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:
parent
cb16a35020
commit
122e55b1fa
7 changed files with 221 additions and 2 deletions
30
content/blog/2024/rubiks-scrambler.md
Normal file
30
content/blog/2024/rubiks-scrambler.md
Normal 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
|
Loading…
Add table
Add a link
Reference in a new issue