make braille website

eigilnikolajsen · eigilnikolajsen · commit c4eb0ee3bd7c · 2023-09-05T15:35:29.000+02:00
diff --git a/src/tests/braille.html b/src/tests/braille.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Braille Glyph Recipes</title>
+        <style>
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+            #app {
+                position: absolute;
+                inset: 0;
+                display: grid;
+                place-items: center;
+            }
+            #container {
+                width: 100%;
+                display: grid;
+                grid-template-columns: repeat(16, 1fr);
+                background-color: #eee;
+            }
+            #container > div {
+                aspect-ratio: 1 / 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-self: center;
+                background-color: #fff;
+                border-top: 1px solid #ddd;
+                border-left: 1px solid #ddd;
+            }
+            #container > div.clicked {
+                background-color: #eee;
+            }
+            #container > div > p:first-of-type {
+                font-family: monospace;
+                font-size: 0.5vw;
+                text-align: center;
+            }
+            #container > div > p:last-of-type {
+                font-family: monospace;
+                font-size: 3vw;
+                text-align: center;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app">
+            <div id="container"></div>
+        </div>
+        <script src="braille.js"></script>
+    </body>
+</html>
diff --git a/src/tests/braille.js b/src/tests/braille.js
@@ -15,7 +15,11 @@ function brailleRecipes() {
         7: [0, "bd3"],
         8: ["bd1", "bd3"],
     }
+    const container = document.querySelector("#container")
 
+    const blank = document.createElement("div")
+    blank.innerHTML = `<p>brblank</p><p>${String.fromCharCode(10240)}</p>`
+    container.append(blank)
     for (let i = 1; i < 256; i++) {
         const name =
             "dots" +
@@ -41,8 +45,15 @@ function brailleRecipes() {
                 )
                 .join("+")
         // console.log(i.toString(2), dots, dotPositions)
-        console.log(name, recipe)
+        const div = document.createElement("div")
+        div.innerHTML = `<p>${name}</p><p>${String.fromCharCode(10240 + i)}</p>`
+        div.addEventListener("click", () => {
+            div.classList.toggle("clicked")
+            navigator.clipboard.writeText(recipe)
+        })
+        container.append(div)
+        // console.log(name, recipe)
     }
-    console.log(positions)
+    // console.log(positions)
 }
 brailleRecipes()
