board is rendered, SVGs for peices are ready for placement

2022-02-05 18:07:19 +01:00
commit 6d1cac8231
13 changed files with 344 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang='en'>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+        #board {
+          margin: auto;
+          padding-top: 4vw;
+          width: 50vw;
+          height: 50vh;
+          display: grid;
+          grid-template-columns: repeat(8, 1fr);
+          grid-template-rows: auto;
+        }
+        .box::before {
+          content: "";
+          display: block;
+          padding-top: 100%;
+        }
+
+        body {
+          padding: 0;
+          margin: 0;
+          background-color: #212121;
+        }
+        body .grid {
+          max-width: 570px;
+          margin: 30px auto;
+          box-sizing: border-box;
+          border: 10px solid #2a351f;
+        }
+    </style>
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+</head>
+<body onload="renderBoard()">
+    <main id="board">
+    </main>
+    <script>
+        const GREEN = "#779558"
+        const BEIGE = "#eeedd3"
+        const board = document.getElementById("board")
+        // const state = {
+        //     a1: "
+        // }
+        const renderBoard = (fromPerspective = "white")  => {
+            // adapted from https://codepen.io/Staghouse/pen/OzpVya
+            let lastColor = BEIGE
+            let files = Array.from("abcdefgh")
+            let ranks = Array.from("12345678")
+            if (fromPerspective === "white") {
+                ranks.reverse()
+            } else {
+                files.reverse()
+            }
+            ranks.forEach(char => {
+                files.forEach((num, numIndex) => {
+                    if (numIndex % 7 || numIndex > 0) {
+                        lastColor = lastColor === BEIGE ? GREEN : BEIGE
+                    }
+                    const box = document.createElement("div")
+                    box.classList.add("box")
+                    box.id = `${num}${char}`
+                    box.style.backgroundColor = lastColor
+                    board.appendChild(box)
+                })
+            })
+
+        }
+    </script>
+</body>
+</html>