Chessboard added

apps/react/package.json

@@ -12,21 +12,13 @@
     "unit:test": "vitest"
   },
   "dependencies": {
-    "@formkit/auto-animate": "^0.7.0",
-    "@mui/icons-material": "^5.14.19",
     "axios": "^1.6.2",
-    "framer-motion": "^10.16.16",
     "leva": "^0.9.35",
-    "localforage": "^1.10.0",
-    "match-sorter": "^6.3.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
-    "react-router-dom": "^6.21.0",
-    "react-router-hash-link": "^2.4.3",
-    "sort-by": "^1.2.0",
-    "tweakpane": "^4.0.3"
+    "react-router-dom": "^6.21.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",

apps/react/src/challenges/25-5-clock/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styles from './Style.module.css';
 import { HiChevronUp, HiChevronDown, HiPlay, HiPause, HiRefresh } from 'react-icons/hi';
 
@@ -9,7 +9,7 @@ export default function TwentyfiveFiveClock() {
   const [sessTime, setSessTime] = useState({ time: 25, range: [5, 60] });
   const [timeLeft, setTimeLeft] = useState([25, 0]);
   const [timerInterval, setTimerInterval] = useState(null);
-  const [lastMinute, setLastMinute] = useState(false);
+  const [lastMinute] = useState(false);
 
   function start() {
     setIsRunning(true);

apps/react/src/challenges/chess-board/App.tsx

@@ -1,13 +1,41 @@
-import { FC } from 'react';
-import ChessBoard from './ChessBoard';
+import { useState } from 'react';
 import styles from './chess-board.module.scss';
+import { Box } from './box';
+
+const gridSize = 8;
+
+function App() {
+  const [selectedTile, setSelectedTile] = useState<{ row: number; col: number } | null>(null);
+
+  function colorDiagonally(e: React.MouseEvent<HTMLButtonElement>) {
+    const target = e.target as HTMLButtonElement;
+    setSelectedTile({
+      row: Number(target.dataset.row),
+      col: Number(target.dataset.col),
+    });
+  }
 
-const App: FC = () => {
   return (
-    <main className={styles.app}>
-      <ChessBoard />
-    </main>
+    <>
+      <p className={styles.instruction}>Click on any cell to color diagonally</p>
+
+      <div className={styles.board}>
+        {Array.from({ length: gridSize }, (_, row) => (
+          <div key={row} className={styles.row}>
+            {Array.from({ length: gridSize }, (_, col) => (
+              <Box
+                key={col}
+                row={row}
+                col={col}
+                selectedTile={selectedTile}
+                onClick={colorDiagonally}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </>
   );
-};
+}
 
 export default App;

apps/react/src/challenges/chess-board/box.tsx

@@ -0,0 +1,25 @@
+import classes from './chess-board.module.scss';
+
+interface Props {
+  row: number;
+  col: number;
+  selectedTile: { row: number; col: number } | null;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function Box({ row, col, selectedTile, onClick }: Props) {
+  let className = classes.box;
+  if (selectedTile) {
+    if (
+      row - col === selectedTile.row - selectedTile.col ||
+      row + col === selectedTile.row + selectedTile.col
+    ) {
+      className += ' ' + classes.selected;
+    }
+    if (row === selectedTile.row && col === selectedTile.col) {
+      className += ' ' + classes.clicked;
+    }
+  }
+
+  return <button key={col} className={className} data-row={row} data-col={col} onClick={onClick} />;
+}

apps/react/src/challenges/chess-board/chess-board.module.scss

@@ -1,61 +1,48 @@
-//variables
-$white: #ffffff;
-$black: #151417;
-$gray: #333642;
-$shadow: rgba(0, 0, 0, 0.2) 0px 0px 25px;
-$base-font-size: 16px;
-
-.app {
-  width: 100%;
-  height: 85dvh;
-  background-color: red;
+.instruction {
+  text-align: center;
 }
 
-//mixins
-@mixin flex($direction: row, $justify: center, $align: center, $wrap: nowrap, $gap: 0) {
+.board {
   display: flex;
-  align-items: $align;
-  justify-content: $justify;
-  flex-wrap: $wrap;
-  gap: $gap;
-}
+  flex-direction: column;
+  flex-grow: 1;
+  margin: auto;
+  border: 2px solid black;
+  width: min(90vw, 100vh - 160px);
+  height: min(90vw, 100vh - 160px);
 
-@mixin grid($columsn, $rows, $gap: 0) {
-  display: grid;
-  grid-template-columns: $columsn;
-  grid-template-rows: $rows;
-  gap: $gap;
-}
+  div {
+    display: flex;
+    width: 100%;
+    height: 100%;
 
-//styles
-.app {
-  height: 85dvh;
-  width: 100%;
-  background-color: $gray;
-  @include flex();
-}
+    button.box {
+      display: flex;
+      flex-grow: 1;
+      cursor: pointer;
+      border: none;
+    }
 
-.chess {
-  height: 100%;
-  min-height: 2.5rem;
-  aspect-ratio: 1;
-  background-color: $black;
-  @include grid(repeat(8, 1fr), repeat(8, 1fr));
-  box-shadow: $shadow;
-  overflow: hidden;
-  background-color: $black;
-  color: $white;
-}
+    button:focus-visible {
+      outline: 4px solid yellowgreen;
+      z-index: 1;
+    }
+  }
 
-.tile {
-  @include flex;
-  width: 100%;
-  height: 100%;
-  font-size: 3.5em;
-}
+  div:nth-child(even) button:nth-child(odd) {
+    background-color: black;
+  }
+
+  div:nth-child(odd) button:nth-child(even) {
+    background-color: black;
+  }
+
+  div button.box.selected {
+    transition: background-color 0.33s;
+    background-color: red;
+  }
 
-.tile_color {
-  background-color: $white;
-  overflow: hidden;
-  color: $black;
+  div button.box.clicked {
+    background-color: darkred;
+  }
 }

apps/react/src/challenges/meeting-calendar/styles.module.scss

@@ -47,7 +47,7 @@
       opacity: 0.8;
       overflow: hidden;
       border-radius: 4px;
-      background-color: lightblue;
+      background-color: rgb(134, 198, 219);
       outline: 1px solid white;
       border: 1px solid gray;
       transition: background-color 0.5s;
@@ -61,8 +61,9 @@
         font-weight: bold;
       }
 
-      &:hover {
-        background-color: rgb(170, 223, 240);
+      &:focus {
+        background-color: rgb(57, 196, 243);
+        z-index: 1;
       }
     }
   }