Eryn Wells
122e55b1fa
Implement the rubiks-cube-scrambler custom element, including JS and template files. Put these things in the body-extras.html partial that the termlite theme added. resource-builders: Update submodule commit termlite: Update submodule commit
30 lines
914 B
Markdown
30 lines
914 B
Markdown
---
|
||
title: Rubik's Cube Scrambler
|
||
date: 2024-11-13T15:34:22-08:00
|
||
tags:
|
||
- Tech
|
||
- Puzzles
|
||
- Rubik's Cube
|
||
- HTML
|
||
- JavaScript
|
||
- CSS
|
||
- Web Components
|
||
---
|
||
|
||
Here's a silly thing I made while I was home sick today. It's a widget that
|
||
produces a randomized pattern of [moves][rmoves] to scramble a 3×3 [Rubik's
|
||
Cube][rcube].
|
||
|
||
<figure class="figure--main-column figure--object">
|
||
{{< rubiks/scrambler >}}
|
||
</figure>
|
||
|
||
This thing is a [Web Component][wc]. The interactive logic lives inside a custom
|
||
[HTMLElement][htmlelement], and the content and styling are specified inside a
|
||
[`<template>`][template] element.
|
||
|
||
[rcube]: https://www.rubiks.com
|
||
[rmoves]: https://jperm.net/3x3/moves
|
||
[wc]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components
|
||
[htmlelement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
|
||
[template]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
|