Board and keyboard

.vscode/settings.json

@@ -7,5 +7,8 @@
   },
   "[prisma]": {
     "editor.formatOnSave": true
-  }
+  },
+  "cSpell.words": [
+    "Redwoodle"
+  ]
 }

web/src/Routes.tsx

@@ -10,16 +10,16 @@
 import { Router, Route, Set } from '@redwoodjs/router'
 import { serve } from '@redwoodjs/vite/client'
 
-import NavigationLayout from './layouts/NavigationLayout/NavigationLayout'
-import NotFoundPage from './pages/NotFoundPage/NotFoundPage'
+import MainLayout from 'src/layouts/MainLayout/MainLayout'
+import NotFoundPage from 'src/pages/NotFoundPage/NotFoundPage'
 
 const AboutPage = serve('AboutPage')
 const HomePage = serve('HomePage')
 
 const Routes = () => {
   return (
     <Router>
-      <Set wrap={NavigationLayout}>
+      <Set wrap={MainLayout}>
         <Route path="/" page={HomePage} name="home" />
         <Route path="/about" page={AboutPage} name="about" />
       </Set>

web/src/components/Game/Game.css

@@ -0,0 +1,77 @@
+.game {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .board {
+    width: 307px;
+    height: 367px;
+    margin-top: 164px;
+    margin-bottom: 101px;
+    /* Hack because the board isn't centered properly in the bg image */
+    margin-left: -4px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+  }
+
+  .tile {
+    position: relative;
+    border: 1px solid #e59462;
+    color: #e59462;
+
+    .letter {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  .keyboard {
+    margin-bottom: 100px;
+
+    .keyboard-row {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      margin-bottom: 10px;
+    }
+
+    .keys {
+      display: flex;
+      gap: 10px;
+    }
+
+    .key {
+      display: inline-block;
+      background: transparent;
+      border: 1px solid #200606;
+      padding: 8px;
+      margin: 0;
+      text-decoration: none;
+      font-family: sans-serif;
+      font-size: 1rem;
+      cursor: pointer;
+      text-align: center;
+    }
+  }
+
+  .initial {
+    background: transparent;
+  }
+
+  .wrong {
+    background: #9db5b2;
+  }
+
+  .correct {
+    background: #6fd08c;
+  }
+
+  .placement {
+    background: #fbff12;
+  }
+}

web/src/components/Game/Game.tsx

@@ -0,0 +1,140 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import './Game.css'
+
+type State = 'initial' | 'wrong' | 'correct' | 'placement'
+
+interface Key {
+  letter: string
+  state: State
+}
+
+export const Game = () => {
+  const [keyboard, setKeyboard] = useState(INITIAL_KEYBOARD)
+  const [board, setBoard] = useState(
+    Array<Key>(25).fill({ letter: '', state: 'initial' })
+  )
+
+  return (
+    <div className="game">
+      <div className="board">
+        {board.map((tile, i) => (
+          <div className={`tile ${tile.state}`} key={i}>
+            <span className="letter">{tile.letter}</span>
+          </div>
+        ))}
+      </div>
+      <div className="keyboard">
+        {keyboard.map((row, i) => (
+          <div className="keyboard-row" key={i}>
+            <div className="keys">
+              {row.map((key) => (
+                <button
+                  className={`key ${key.state}`}
+                  key={key.letter}
+                  onClick={() => {
+                    const newBoard = addToBoard(board, key.letter)
+                    if (newBoard) {
+                      setBoard(newBoard)
+
+                      const newKeyboard = updateKeyboard(keyboard, key.letter)
+                      setKeyboard(newKeyboard)
+                    }
+                  }}
+                >
+                  {key.letter}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function addToBoard(board: Array<Key>, letter: string) {
+  const emptyTileIndex = board.findIndex((tile) => !tile.letter)
+  if (emptyTileIndex === -1) {
+    console.log('no empty tiles')
+    return
+  }
+
+  console.log('emptyTileIndex', emptyTileIndex)
+
+  const newBoard = [...board]
+
+  const currentRow = Math.floor(emptyTileIndex / 5)
+  const word =
+    newBoard
+      .slice(currentRow * 5, (currentRow + 1) * 5)
+      .map((tile) => tile.letter)
+      .join('') + letter
+
+  console.log('word', word)
+
+  const emptyTile = newBoard[emptyTileIndex]
+  if (emptyTile) {
+    newBoard[emptyTileIndex] = {
+      letter: letter,
+      state: 'initial',
+    }
+  }
+
+  console.log('new board', newBoard)
+
+  return newBoard
+}
+
+function updateKeyboard(keyboard: Array<Array<Key>>, letter: string) {
+  const newKeyboard = [...keyboard]
+
+  const keyRow = newKeyboard.find((row) =>
+    row.find((key) => key.letter === letter)
+  )
+  const activeKey = keyRow?.find((key) => key.letter === letter)
+  if (activeKey) {
+    activeKey.state = 'wrong'
+  }
+
+  return newKeyboard
+}
+
+const INITIAL_KEYBOARD: Array<Array<Key>> = [
+  [
+    { letter: 'Q', state: 'initial' },
+    { letter: 'W', state: 'initial' },
+    { letter: 'E', state: 'initial' },
+    { letter: 'R', state: 'initial' },
+    { letter: 'T', state: 'initial' },
+    { letter: 'Y', state: 'initial' },
+    { letter: 'U', state: 'initial' },
+    { letter: 'I', state: 'initial' },
+    { letter: 'O', state: 'initial' },
+    { letter: 'P', state: 'initial' },
+  ],
+  [
+    { letter: 'A', state: 'initial' },
+    { letter: 'S', state: 'initial' },
+    { letter: 'D', state: 'initial' },
+    { letter: 'F', state: 'initial' },
+    { letter: 'G', state: 'initial' },
+    { letter: 'H', state: 'initial' },
+    { letter: 'J', state: 'initial' },
+    { letter: 'K', state: 'initial' },
+    { letter: 'L', state: 'initial' },
+  ],
+  [
+    { letter: 'ENTER', state: 'initial' },
+    { letter: 'Z', state: 'initial' },
+    { letter: 'X', state: 'initial' },
+    { letter: 'C', state: 'initial' },
+    { letter: 'V', state: 'initial' },
+    { letter: 'B', state: 'initial' },
+    { letter: 'N', state: 'initial' },
+    { letter: 'M', state: 'initial' },
+    { letter: 'DELETE', state: 'initial' },
+  ],
+]

web/src/index.css

@@ -1,4 +1,5 @@
 html, body {
   margin: 0;
   padding: 0;
+  background-color: #00302e;
 }

web/src/layouts/MainLayout/MainLayout.css

@@ -0,0 +1,17 @@
+.main-layout {
+  & header {
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff7e3;
+    background-image: url(https://i.imgur.com/8JDmu9V.jpeg);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  & main {
+    background-color: #00302e;
+    background-image: url(https://i.imgur.com/fdQfT8D.png);
+    background-position: center top;
+    background-repeat: no-repeat;
+  }
+}

web/src/layouts/MainLayout/MainLayout.tsx

@@ -0,0 +1,39 @@
+import './MainLayout.css'
+
+interface MainLayoutProps {
+  children?: React.ReactNode
+}
+
+const MainLayout = ({ children }: MainLayoutProps) => {
+  return (
+    <div className="main-layout">
+      <header>
+        <div className="redwoodjs-com">
+          <a
+            href="https://redwoodjs.com?utm_source=redwoodle&utm_medium=header&utm_id=bhv01"
+            target="_blank"
+            rel="noreferrer"
+          >
+            RedwoodJS
+          </a>
+        </div>
+        <h1>Redwoodle</h1>
+        <div className="github">
+          <a
+            href="https://github.com/redwoodjs/redwood"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              src="https://img.shields.io/github/stars/redwoodjs/redwood?style=social"
+              alt="GitHub"
+            />
+          </a>
+        </div>
+      </header>
+      <main>{children}</main>
+    </div>
+  )
+}
+
+export default MainLayout