final cleanups to sudoku components, make mobile styles work right

ayan4m1 · Dec 26, 2023 · e79aaf9 · e79aaf9
1 parent 28955ae
commit e79aaf9
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 24 deletions.
diff --git a/src/components/sudokuBoard.js b/src/components/sudokuBoard.js
@@ -30,15 +30,15 @@ export default function SudokuBoard() {
   const [savedState, setSavedState] = useLocalStorageState('savedState', {
     defaultValue: null
   });
-  const rows = useMemo(
+  const cells = useMemo(
     () =>
       chunk(puzzle.puzzle.split(''), 9).map((row) =>
         row.map((value) => (value === '-' ? null : parseInt(value, 10)))
       ),
     [puzzle]
   );
   const [values, setValues] = useState(Array(9).fill(Array(9).fill(-1)));
-  const invalids = useMemo(() => getInvalids(values, rows), [values, rows]);
+  const invalids = useMemo(() => getInvalids(values, cells), [values, cells]);
   const handleClick = useCallback(
     (row, column) =>
       setActiveCell(([prevRow, prevCol]) => {
@@ -83,13 +83,17 @@ export default function SudokuBoard() {
   const handleClear = useCallback(() => setSavedState(null), []);
 
   useEffect(() => {
-    setSolved(checkSolution(rows, values, puzzle.solution));
-  }, [rows, values, puzzle]);
+    setSolved(checkSolution(cells, values, puzzle.solution));
+  }, [cells, values, puzzle]);
 
   return (
     <Card body>
-      {solved && <Alert variant="success">You solved it!</Alert>}
       <Container fluid>
+        <Row>
+          <Col xs={12} className="mb-2">
+            <h1>Sudoku</h1>
+          </Col>
+        </Row>
         <Row className="mb-2">
           <Col className="d-flex justify-content-center g-0">
             <ButtonGroup className="w-100">
@@ -108,8 +112,17 @@ export default function SudokuBoard() {
             </ButtonGroup>
           </Col>
         </Row>
-        {rows.map((row, rowIdx) => (
-          <Row key={rowIdx}>
+        <Row>
+          <Col className="g-0">
+            {solved && (
+              <Alert className="mb-2" variant="success">
+                You solved it!
+              </Alert>
+            )}
+          </Col>
+        </Row>
+        {cells.map((row, rowIdx) => (
+          <Row key={rowIdx} className="d-flex justify-content-center">
             {row.map((value, colIdx) => (
               <SudokuCell
                 row={rowIdx}

diff --git a/src/components/sudokuCell.js b/src/components/sudokuCell.js
@@ -29,12 +29,14 @@ export default function SudokuCell({
   );
   const handleKeyDown = useCallback(
     ({ key }) => {
-      if (!active || !['Enter', 'Tab'].includes(key)) {
-        return;
+      if (active && ['Enter', 'Tab'].includes(key)) {
+        event.preventDefault();
+        onClick(-1, -1);
+      } else if (active && ['Backspace', 'Delete'].includes(key)) {
+        event.preventDefault();
+        onChange(row, column, -1);
+        onClick(-1, -1);
       }
-
-      event.preventDefault();
-      onClick(-1, -1);
     },
     [active, onClick]
   );
@@ -57,18 +59,14 @@ export default function SudokuCell({
         }
       }}
       className={classNames(
-        'd-flex',
-        'justify-content-center',
-        'align-items-center',
-        'text-dark',
-        'p-0',
-        'border-2',
+        'sudoku-cell',
         'border-dark',
+        'border-2',
+        'text-dark',
         column > 0 && column % 3 === 2 && 'border-end',
         row > 0 && row % 3 === 2 && 'border-bottom',
         valid ? 'bg-white' : 'bg-danger'
       )}
-      style={{ height: 48, maxWidth: 48, minWidth: 48 }}
     >
       {unknown && active ? (
         <Form.Control

diff --git a/src/components/sudokuCell.scss b/src/components/sudokuCell.scss
@@ -0,0 +1,38 @@
+$cell-xs: 32px;
+$cell-sm: $cell-xs * 1.25;
+$cell-md: $cell-xs * 1.5;
+$cell-lg: $cell-xs * 1.75;
+
+.sudoku-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  height: $cell-xs;
+  min-width: $cell-xs;
+  max-width: $cell-xs;
+}
+
+@include media-breakpoint-up(sm) {
+  .sudoku-cell {
+    height: $cell-sm;
+    min-width: $cell-sm;
+    max-width: $cell-sm;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .sudoku-cell {
+    height: $cell-md;
+    min-width: $cell-md;
+    max-width: $cell-md;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .sudoku-cell {
+    height: $cell-lg;
+    min-width: $cell-lg;
+    max-width: $cell-lg;
+  }
+}
diff --git a/src/index.scss b/src/index.scss
@@ -3,6 +3,9 @@
 @import '~bootstrap/scss/bootstrap';
 @import '~bootswatch/dist/journal/bootswatch';
 
+// Component styles
+@import 'components/sudokuCell';
+
 // Global styles
 blockquote {
   word-break: break-word;

diff --git a/src/pages/sudoku.js b/src/pages/sudoku.js
@@ -9,11 +9,6 @@ export default function SudokuPage() {
     <Layout>
       <SEO title="Sudoku" />
       <Container>
-        <Row>
-          <Col xs={12}>
-            <h1>Sudoku</h1>
-          </Col>
-        </Row>
         <Row>
           <Col className="d-flex justify-content-center">
             <SudokuBoard />