blog: Rubiks' Cube Scrambler post

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
This commit is contained in:
Eryn Wells 2024-11-13 17:06:01 -08:00
parent cb16a35020
commit 122e55b1fa
7 changed files with 221 additions and 2 deletions

View file

@ -0,0 +1,30 @@
---
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