project-labyrinth

README.md

@@ -1,37 +1,13 @@
-<h1 align="center">
-  <a href="">
-    <img src="./src/assets/banner.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
 # Labyrinth - Zustand Project
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
-
-## Getting Started with the Project
-
-### Dependency Installation & Startup Development Server
-
-Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.
-
-The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.
-
-```bash
-npm i && code . && npm run dev
-```
+This week we were supposed do build a labyrinth game with the help of an api
 
 ### The Problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I did this as my last project due to lack of time and it was hard. When i thought i was finished new error messages kept showing up in the console, and it never stoped so decieded to redo the whole project. And it did work :) Due to lack of time the styling need some more love.
 
 ### View it live
 
 Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
 
-## Instructions
-
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://sage-cheesecake-3111f7.netlify.app/

package.json

@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zustand": "^4.4.1"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,8 +1,9 @@
+import { StartGame } from "./components/Game/Game"
 
 export const App = () => {
   return (
-  <div>
-    Labyrinth Project 
-  </div>
-  );
-};
+    <div className="text-container">
+      <StartGame />
+    </div>
+  )
+}

src/assets/compass.json

@@ -0,0 +1 @@
+{"v":"5.5.7","fr":25,"ip":0,"op":82,"w":1000,"h":1000,"nm":"Campus rotation with axis","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-9.64],[-9.64,0],[0,9.64],[9.64,0]],"o":[[0,9.64],[9.64,0],[0,-9.64],[-9.64,0]],"v":[[-17.454,0],[-0.001,17.454],[17.454,0],[-0.001,-17.454]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.00784313725490196,0.07450980392156863,0.17254901960784313,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[518.58,481.335],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 6 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[152]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[42]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[247]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":59,"s":[357]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":71,"s":[163]},{"t":81,"s":[0]}],"ix":10},"p":{"a":0,"k":[518.316,481.373,0],"ix":2},"a":{"a":0,"k":[518.316,481.373,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,5.489],[9.524,0],[2.967,-2.415]],"o":[[0,0],[0,0],[0,0],[3.997,-3.155],[0,-9.517],[-4.13,0],[0,0]],"v":[[-83.748,20.938],[83.748,-71.846],[-42.931,71.845],[-52.551,59.852],[-45.992,46.325],[-63.232,29.091],[-74.109,32.96]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[581.56,434.862],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,-5.488],[-9.524,0],[-2.966,2.415]],"o":[[0,0],[0,0],[0,0],[-3.995,3.154],[0,9.519],[4.131,0],[0,0]],"v":[[83.748,-20.939],[-83.748,71.845],[42.932,-71.845],[52.55,-59.852],[45.992,-46.326],[63.232,-29.091],[74.109,-32.96]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9294117647058824,0.14901960784313725,0.25882352941176473,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[455.073,527.885],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 5 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":17,"s":[-84]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[-32]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-145]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":64,"s":[67]},{"t":81,"s":[0]}],"ix":10},"p":{"a":0,"k":[518.411,482.509,0],"ix":2},"a":{"a":0,"k":[518.411,482.509,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[43.834,0],[0,43.834],[-43.835,0],[0,-43.835]],"o":[[-43.835,0],[0,-43.835],[43.834,0],[0,43.834]],"v":[[0,78.351],[-79.37,-1.017],[0,-80.387],[79.369,-1.017]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-5.949,38.974],[0,0],[0,0],[40.038,5.512],[0,0],[0,0],[5.159,-40.159],[0,0],[0,0],[-39.097,-5.607],[0,0],[0,0]],"o":[[0,0],[0,0],[-5.078,-40.174],[0,0],[0,0],[-40.077,5.42],[0,0],[0,0],[5.877,39.008],[0,0],[0,0],[39.106,-5.544]],"v":[[88.775,12.645],[138.495,0.866],[89.094,-12.392],[12.36,-89.975],[0.866,-138.494],[-12.148,-90.004],[-89.069,-12.576],[-138.495,-0.866],[-88.799,12.472],[-12.859,87.869],[-0.866,138.494],[12.716,87.889]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20392156862745098,0.2196078431372549,0.26666666666666666,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[518.411,482.509],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 4 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[119.215,0],[0,119.214],[-119.215,0],[0,-119.215]],"o":[[-119.215,0],[0,-119.215],[119.215,0],[0,119.214]],"v":[[0,215.858],[-215.858,0],[0,-215.858],[215.858,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[124.391,0],[0,-124.391],[-124.391,0],[0,124.391]],"o":[[-124.391,0],[0,124.391],[124.391,0],[0,-124.391]],"v":[[0,-225.23],[-225.23,0],[0,225.23],[225.23,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.20392156862745098,0.2196078431372549,0.26666666666666666,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[518.411,479.649],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[9.665,0],[0,9.664],[-9.663,0],[0,-9.664]],"o":[[-9.663,0],[0,-9.664],[9.665,0],[0,9.664]],"v":[[0,17.498],[-17.497,0],[0,-17.497],[17.498,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[139.312,0],[0,-139.312],[-139.312,0],[0,139.312]],"o":[[-139.312,0],[0,139.312],[139.312,0],[0,-139.312]],"v":[[0.001,-252.247],[-252.246,0],[0.001,252.247],[252.246,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.00784313725490196,0.07450980392156863,0.17254901960784313,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[518.411,481.491],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[163.391,0],[0,-163.391],[-163.391,0],[0,163.391]],"o":[[-163.391,0],[0,163.391],[163.391,0],[0,-163.391]],"v":[[0,-295.845],[-295.845,0],[0,295.845],[295.845,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.00784313725490196,0.07450980392156863,0.17254901960784313,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[518.411,481.491],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0}],"markers":[]}

src/components/Buttons/Buttons.css

@@ -0,0 +1,67 @@
+.action-buttons-container {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+  background-color: #1e1e1e;
+}
+
+.list-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  padding: 0;
+  margin: 0;
+}
+
+.list-container li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  list-style: none;
+  text-align: center;
+  padding: 10px;
+  background-color: #2c2c2c;
+  border-radius: 8px;
+}
+
+.action-description {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #ddd;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #333;
+  border: 2px solid #444;
+  border-radius: 8px;
+  padding: 10px 20px;
+  color: #fff;
+  font-family: "Lato", sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  cursor: pointer;
+  margin-top: 12px;
+  transition: transform 0.2s, background-color 0.2s, color 0.2s;
+}
+
+.action-button img {
+  margin-right: 10px;
+  width: 24px;
+  height: 24px;
+  filter: invert(1);
+}
+
+.action-button:hover {
+  background-color: #4a4a4a;
+  color: #fff;
+  transform: scale(1.05);
+}
+
+.action-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(119, 170, 117, 0.4);
+}

src/components/Buttons/Buttons.jsx

@@ -0,0 +1,41 @@
+import NorthArrow from "/arrowNorth.png"
+import EastArrow from "/arrowEast.png"
+import SouthArrow from "/arrowSouth.png"
+import WestArrow from "/arrowWest.png"
+import "../Buttons/Buttons.css"
+
+export const ActionButtons = ({ actions, handleAction }) => {
+  const getArrowImage = (direction) => {
+    switch (direction.toLowerCase()) {
+      case "north":
+        return <img src={NorthArrow} alt="North arrow" />
+      case "south":
+        return <img src={SouthArrow} alt="South arrow" />
+      case "east":
+        return <img src={EastArrow} alt="East arrow" />
+      case "west":
+        return <img src={WestArrow} alt="West arrow" />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="action-buttons-container">
+      <ul className="list-container">
+        {actions.map(({ description, direction }, index) => (
+          <li key={`${direction}-${index}`}>
+            <p className="action-description">{description}</p>
+            <button
+              className="action-button"
+              onClick={() => handleAction(direction)}
+            >
+              {getArrowImage(direction)}
+              Go {direction}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/components/Game/Game.css

@@ -0,0 +1,46 @@
+h1 {
+  font-size: 50px;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 40px;
+  color: #666;
+}
+
+.enter-game-text {
+  text-align: center;
+
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  margin: 20px;
+}
+
+.description {
+  font-size: 30px;
+  color: rgb(201, 199, 199);
+  margin: 20px 0;
+}
+
+.direction-question {
+  font-size: 24px;
+  margin-top: 40px;
+  color: rgb(201, 199, 199);
+}
+
+.chevron:hover {
+  transform: scale(1.1);
+  transition: transform 0.2s;
+}
+
+.animation-compass {
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}

src/components/Game/Game.jsx

@@ -0,0 +1,78 @@
+import { useLabyrinthStore } from "../../stores/useGameStore"
+import { useState, useEffect } from "react"
+import { UserInput } from "../MazePlayer/MazePlayer"
+import { ActionButtons } from "../Buttons/Buttons"
+
+import Lottie from "lottie-react"
+import loadingAnimation from "../../assets/compass.json"
+import "../../components/Game/Game.css"
+
+export const StartGame = () => {
+  const {
+    loading,
+    error,
+    username,
+    description,
+    actions,
+    startGame,
+    gameAction,
+  } = useLabyrinthStore()
+
+  const [usernameInput, setUsernameInput] = useState("")
+  const [gameStarted, setGameStarted] = useState(false)
+
+  useEffect(() => {
+    if (gameStarted && usernameInput) {
+      const fetchDirection = async () => {
+        try {
+          await startGame(usernameInput)
+        } catch (error) {
+          console.error("Error fetching directions:", error)
+        }
+      }
+      fetchDirection()
+    }
+  }, [startGame, usernameInput, gameStarted])
+
+  const handleStartGame = () => {
+    setGameStarted(true)
+  }
+
+  const handleAction = (direction) => {
+    gameAction(username, direction, "move")
+  }
+
+  return (
+    <>
+      {!gameStarted && (
+        <div className="enter-game-text">
+          <h1>The Maze</h1>
+          <h2>
+            Enter the labyrinth on your own risk. Can you find a way out of the
+            maze?
+          </h2>
+          <UserInput
+            setUsernameInput={setUsernameInput}
+            handleStartGame={handleStartGame}
+          />
+        </div>
+      )}
+      {loading && (
+        <div className="animation-compass">
+          <Lottie animationData={loadingAnimation} />
+        </div>
+      )}
+      {error && <p>Error: {error}</p>}
+      {gameStarted && !loading && !error && username && (
+        <>
+          <p className="description">{description}</p>
+          <p className="direction-question">
+            Which direction do you want to go?
+          </p>
+          <img src="./chevron.png" alt="chevron down" className="chevron" />
+          <ActionButtons actions={actions} handleAction={handleAction} />
+        </>
+      )}
+    </>
+  )
+}

src/components/MazePlayer/MazePlayer.css

@@ -0,0 +1,58 @@
+.label {
+  font-size: 18px;
+  color: #ddd;
+  font-family: "Roboto", sans-serif;
+}
+
+.username-input-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  background-color: #1e1e1e;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.username-input {
+  height: 40px;
+  width: 240px;
+  border-radius: 8px;
+  padding-left: 12px;
+  font-size: 16px;
+  background-color: #2c2c2c;
+  border: 2px solid #444;
+  color: #f5f5f5;
+  font-family: "Roboto", sans-serif;
+}
+
+.username-input::placeholder {
+  color: #aaa;
+}
+
+.start-game-button {
+  width: 240px;
+  height: 50px;
+  padding: 10px 20px;
+  border-radius: 25px;
+  border: none;
+  background-color: #4a4a4a;
+  color: #f5f5f5;
+  font-size: 16px;
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.start-game-button:hover {
+  background-color: #676767;
+  transform: scale(1.05);
+}
+
+.start-game-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(106, 155, 222, 0.4);
+}