Difficulty options (#28)

* Created difficulty drop down

* Created AI difficulty options styling, made some other styling improvements

src/app.js

@@ -315,9 +315,9 @@ export default function Game() {
               <ClipboardAnimation peerId={peerId} />
               {peerConnection &&
                 (isItMyTurn(playerSymbol) ? (
-                  <p>{`Your (${playerSymbol}) turn`}</p>
+                  <p style={{textAlign: "center"}}>{`Your (${playerSymbol}) turn`}</p>
                 ) : (
-                  <p>{`Opponent's (${opponentSymbol}) turn`}</p>
+                  <p style={{textAlign: "center"}}>{`Opponent's (${opponentSymbol}) turn`}</p>
                 ))}
               {!peerConnection && (
                 <p

src/startpage/startpage.js

@@ -9,6 +9,7 @@ export default function StartScreen({ onStart }) {
   const [onlineModeSelected, setOnlineModeSelected] = useState(false);
   const [joinModeSelected, setJoinModeSelected] = useState(false);
   const [joinId, setJoinId] = useState("");
+  const [selectedDifficulty, setSelectedDifficulty] = useState(6);
 
   function createMultiplayerGame() {
     const props = new GameStartProperties(false, null, null, null);
@@ -30,7 +31,7 @@ export default function StartScreen({ onStart }) {
     return randomPlayer === 0 ? "X" : "O";
   }
 
-  function createAiGame(playerSymbol = randomSymbol(), difficulty = 6) {
+  function createAiGame(playerSymbol, difficulty) {
     const props = new GameStartProperties(
       true,
       playerSymbol,
@@ -58,9 +59,19 @@ export default function StartScreen({ onStart }) {
       {aiModeSelected && (
         <>
           <div className={styles.horizontalButtonsContainer}>
-            <button onClick={() => createAiGame("X")}>Play first (X)</button>
-            <button onClick={() => createAiGame("O")}>Play second (O)</button>
-            <button onClick={() => createAiGame()}>Random</button>
+            <button onClick={() => createAiGame("X", selectedDifficulty)}>Play first (X)</button>
+            <button onClick={() => createAiGame("O", selectedDifficulty)}>Play second (O)</button>
+            <button onClick={() => createAiGame(randomSymbol(), selectedDifficulty)}>Random</button>
+          </div>
+          <div>
+            <select
+              value={selectedDifficulty}
+              onChange={(e) => setSelectedDifficulty(parseInt(e.target.value))}
+            >
+              <option value={6}>Easy</option>
+              <option value={7}>Medium</option>
+              <option value={8}>Hard</option>
+            </select>
           </div>
           <button onClick={() => setAiModeSelected(false)}>Back</button>
         </>

src/startpage/startpage.module.css

@@ -36,11 +36,28 @@ img {
 .horizontalButtonsContainer {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .horizontalButtonsContainer button {
   font-size: 1rem;
   margin-left: 5px;
   margin-right: 5px;
 }
+
+.startScreen select {
+  text-align: center;
+  padding: 10px 20px;
+  font-size: 1.2rem;
+  background-color: #f8b400;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-bottom: 20px;
+}
+
+.startScreen select:hover {
+  background-color: #ffd04f;
+}

src/styles.css

@@ -82,8 +82,8 @@ h1 {
   background: url(../media/home.png) no-repeat;
   cursor: pointer;
   border: none;
-  width: 40px;
-  height: 40px;
+  width: 43px;
+  height: 43px;
   background-size: contain;
   position: absolute;
   top: 40px;