Merge branch 'main' of https://github.com/subvisual/wordle3 into rs/a…

…dd-gamespace-component

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import './App.css'
 
 import {local_accounts} from './clients/testClient'
@@ -23,6 +24,10 @@ function App() {
     const [currentAcc, setCurrentAcc] = useState(local_accounts[0])
     const [playerAttempts, setPlayerAttempts] = useState(undefined)
     const [alphabet, setAlphabet] = useState(undefined)
+    // Current account and respetive variables
+    const [currentAcc, setCurrentAcc] = useState(local_accounts[0])
+    const [playerAttempts, setPlayerAttempts] = useState(undefined)
+    const [alphabet, setAlphabet] = useState(undefined)
 
     // TODO: remove after testing and prototyping
     const [wdtBalance, setWdtBalance] = useState(undefined)
@@ -88,6 +93,9 @@ function App() {
                 </div>
             </div>
         </>
+    )
+            </div>
+        </>
     )
 }
 

frontend/src/components/Alphabet.tsx

@@ -0,0 +1,40 @@
+import './alphabet.css'
+
+export function Alphabet({ playerAlphabet }) {
+  const alphabetStates = playerAlphabet?.map(({ state }) => state.toString()) || []
+
+  /**
+   * colorMap maps the different states of a letter to a CSS color.
+   * The states are: 0 = miss ; 1 = exists ; 2 = hit ; 3 = discarded
+   */
+  const colorMap = {
+    '0': 'var(--gray)',
+    '1': 'var(--yellow)',
+    '2': 'var(--green)',
+    '3': 'var(--dark-gray)',
+  }
+
+  /**
+   * qwertyLayout is an array of the letters in the QWERTY layout.
+   * It is used to generate the grid of letters.
+   */
+  const qwertyLayout = [
+    'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
+    'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
+    'Z', 'X', 'C', 'V', 'B', 'N', 'M',
+  ]
+
+  return (
+    <div className="alphabet">
+      {qwertyLayout.map((char, index) => (
+        <p
+          key={index}
+          style={{ backgroundColor: alphabetStates && colorMap[alphabetStates[index]] || 'var(--gray)' }}
+        >
+          {char}
+        </p>
+      ))}
+    </div>
+  )
+}
+

frontend/src/components/alphabet.css

@@ -0,0 +1,18 @@
+.alphabet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: center;
+  margin: 20px auto;
+  max-width: 40%;
+}
+
+.alphabet p {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  width: 30px;
+  height: 40px;
+  margin: 0;
+}