working on useGame

2025-10-15 17:29:53 +01:00
commit 8acc16fc1c
37 changed files with 3320 additions and 0 deletions
@@ -0,0 +1,144 @@
+/* =========================================================
+   🔧 Controls (tweak these)
+   ========================================================= */
+:root {
+  --cell-size: 32px;
+  --cell-font-size: 16px;
+  --grid-gap: 2px;
+  --box-separator: 3px;
+}
+
+/* =========================================================
+   Container & Grid Base
+   ========================================================= */
+#sudoku_container {
+  position: relative;
+  margin: 1em auto;
+  width: fit-content;
+}
+
+#sudoku {
+  position: relative;
+  background-color: #1e2030; /* Tokyo Night card background */
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px rgba(130, 170, 255, 0.05);
+  padding: 0.5rem;
+  width: fit-content;
+}
+
+/* =========================================================
+   Grid Layout
+   ========================================================= */
+#sudoku .sudoku-grid {
+  display: grid;
+  grid-template-columns: repeat(9, var(--cell-size));
+  gap: var(--grid-gap);
+  user-select: none;
+}
+
+/* =========================================================
+   Cell Base Styles
+   ========================================================= */
+#sudoku .sudoku-cell {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-family: "Fira Code", monospace;
+  font-size: var(--cell-font-size);
+  background: #2f334d; /* Tokyo Night muted */
+  color: #c8d3f5; /* Tokyo Night foreground */
+  transition: all 0.15s ease;
+  box-shadow: inset 0 0 3px rgba(27, 29, 43, 0.4);
+}
+
+/* =========================================================
+   3x3 Box Separators
+   ========================================================= */
+/* Add thicker border to right of columns 2 and 5 (0-indexed) */
+#sudoku .sudoku-cell[data-c="2"],
+#sudoku .sudoku-cell[data-c="5"] {
+  border-right: var(--box-separator) solid #1e2030;
+  margin-right: 1px;
+}
+
+/* Add thicker border to bottom of rows 2 and 5 (0-indexed) */
+#sudoku .sudoku-cell[data-r="2"],
+#sudoku .sudoku-cell[data-r="5"] {
+  border-bottom: var(--box-separator) solid #1e2030;
+  margin-bottom: 1px;
+}
+
+/* =========================================================
+   User-Entered Cells
+   ========================================================= */
+#sudoku .sudoku-cell.user-entered {
+  color: #82aaff; /* Tokyo Night primary blue */
+  font-weight: 600;
+}
+
+/* =========================================================
+   Active Cell Highlight
+   ========================================================= */
+#sudoku .sudoku-cell.active {
+  outline: 2px solid #ffc777; /* Tokyo Night yellow/warning */
+  outline-offset: -2px;
+  background: #3d3836;
+  box-shadow: 
+    0 0 16px rgba(255, 199, 119, 0.7),
+    0 0 24px rgba(255, 199, 119, 0.4),
+    inset 0 0 12px rgba(255, 199, 119, 0.3);
+  animation: active-cell-glow 1.5s ease-in-out infinite;
+}
+
+@keyframes active-cell-glow {
+  0%, 100% {
+    box-shadow: 
+      0 0 16px rgba(255, 199, 119, 0.7),
+      0 0 24px rgba(255, 199, 119, 0.4),
+      inset 0 0 12px rgba(255, 199, 119, 0.3);
+  }
+  50% {
+    box-shadow: 
+      0 0 20px rgba(255, 199, 119, 0.9),
+      0 0 32px rgba(255, 199, 119, 0.6),
+      inset 0 0 16px rgba(255, 199, 119, 0.4);
+  }
+}
+
+/* =========================================================
+   Visual Feedback Effects
+   ========================================================= */
+/* Invalid move effect */
+#sudoku .sudoku-cell.invalid-move {
+  animation: sudoku-invalid-pulse 180ms ease-out;
+  box-shadow:
+    0 0 12px rgba(255, 117, 127, 0.85),
+    0 0 24px rgba(255, 117, 127, 0.45);
+}
+
+@keyframes sudoku-invalid-pulse {
+  0% {
+    transform: scale(1.05);
+    box-shadow:
+      0 0 16px rgba(255, 117, 127, 0.95),
+      0 0 28px rgba(255, 117, 127, 0.55);
+  }
+  100% {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+/* Trail effect for moves */
+#sudoku .sudoku-cell.trail {
+  box-shadow: inset 0 0 6px rgba(130, 170, 255, 0.6), 0 0 6px rgba(130, 170, 255, 0.35);
+  animation: sudoku-trail-fade 220ms ease-out;
+}
+
+@keyframes sudoku-trail-fade {
+  from { background-color: rgba(130, 170, 255, 0.25); }
+  to   { background-color: transparent; }
+}