31 lines
914 B
Markdown
31 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
|