feat: Add heading

html/static/styles.css

@@ -7,6 +7,16 @@ body {
     background-color: black;
 }
 
+h1 {
+    color: white;
+    text-align: center;
+    font-size: 60px;
+}
+
+h2 {
+    font-size: 40px;
+}
+
 .setup {
     text-align: center;
     color: white;
@@ -14,6 +24,7 @@ body {
 
 .setup ul {
     list-style-type: none;
+    padding: 0;
 }
 
 .setup li {

src/components/App.jsx

@@ -21,17 +21,20 @@ export const App = () => {
 
     console.log(correct)
 
-    return <>{ wordLength === null ?
+    return <>
-        <SetupScreen
+        <h1>x86-64 Wordle</h1>
-            dictionary={dictionary}
+        { wordLength === null ?
-            selectLength={setWordLength}
+            <SetupScreen
-        /> :
+                dictionary={dictionary}
-        <Game
+                selectLength={setWordLength}
-            wordLength={wordLength}
+            /> :
-            reset={() => setWordLength(null)}
+            <Game
-            numberOfGuesses={numberOfGuesses}
+                wordLength={wordLength}
-            availableWords={availableWords}
+                reset={() => setWordLength(null)}
-            correctWord={correct}
+                numberOfGuesses={numberOfGuesses}
-        />
+                availableWords={availableWords}
-    }</>
+                correctWord={correct}
+            />
+        }
+    </>
 };

src/components/SetupScreen.jsx

@@ -11,7 +11,7 @@ export const SetupScreen = ({dictionary, selectLength}) => {
         .map(length => [length, lengthsMap[length].length]);
 
     return <div className="setup">
-        <h1>Select word length</h1>
+        <h2>Select word length</h2>
         <ul>
         {lengths.map(([length, numberOfWordsWithLength]) =>
             <li key={length} onClick={() => selectLength(parseInt(length))}>