Technigo · Paulajungaker · Apr 19, 2024 · Apr 19, 2024 · Apr 20, 2024 · Apr 21, 2024
diff --git a/README.md b/README.md
@@ -1,37 +1,11 @@
-<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.
+Creating a labyrinth game using an API from Technigo.
 
-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.
+## The Problem
 
-```bash
-npm i && code . && npm run dev
-```
-
-### 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?
+We used a Figjam board to plan the project and what components was needed for it. We also used postman to post to the API and see the endpoints of it. If we had more time we would add a restard button and sound to the game and work on making even more functionalites in it.
 
 ### 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-meerkat-f96544.netlify.app/
diff --git a/index.html b/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Project Labyrinth Zustand</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Macondo&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -12,7 +12,9 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zustand": "^4.4.1"
+    "react-icons": "^5.1.0",
+    "react-router-dom": "^6.22.3",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/public/Archway.jpg b/public/Archway.jpg
diff --git a/public/Bookshelf.jpg b/public/Bookshelf.jpg
diff --git a/public/Cavern.jpg b/public/Cavern.jpg
diff --git a/public/DarkRoom.jpg b/public/DarkRoom.jpg
diff --git a/public/Labyrinth.jpg b/public/Labyrinth.jpg
diff --git a/public/MechanicalGadgets.jpg b/public/MechanicalGadgets.jpg
diff --git a/public/RayofSunlight.jpg b/public/RayofSunlight.jpg
diff --git a/public/Sunlight.jpg b/public/Sunlight.jpg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,11 @@
+import AppRoutes from "./components/AppRoutes";
 
 export const App = () => {
   return (
-  <div>
-    Labyrinth Project 
-  </div>
+    <div>
+      <AppRoutes />
+    </div>
   );
 };
+
+export default App;
diff --git a/src/components/AppRoutes.jsx b/src/components/AppRoutes.jsx
@@ -0,0 +1,19 @@
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import StartGame from "./StartGame";
+import Rooms from "./Rooms";
+import BackgroundWrapper from "./BackgroundWrapper";
+
+const AppRoutes = () => {
+  return (
+    <Router>
+      <BackgroundWrapper>
+        <Routes>
+          <Route path="/" element={<StartGame />} />
+          <Route path="/rooms" element={<Rooms />} />
+        </Routes>
+      </BackgroundWrapper>
+    </Router>
+  );
+};
+
+export default AppRoutes;
diff --git a/src/components/BackgroundWrapper.jsx b/src/components/BackgroundWrapper.jsx
@@ -0,0 +1,18 @@
+import { useLocation } from "react-router-dom";
+
+const BackgroundWrapper = ({ children }) => {
+  const location = useLocation();
+  const isStartGamePage = location.pathname === "/";
+
+  const backgroundStyle = isStartGamePage
+    ? { backgroundImage: "url(/Labyrinth.jpg)" }
+    : {};
+
+  return (
+    <div style={backgroundStyle} className="startBackground">
+      {children}
+    </div>
+  );
+};
+
+export default BackgroundWrapper;
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -0,0 +1,12 @@
+import { BsCompass } from "react-icons/bs";
+import "../styling/Loading.css";
+
+const Loading = () => {
+  return (
+    <div className="loadingContainer">
+      <BsCompass className="loadingIcon" />
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/src/components/Rooms.jsx b/src/components/Rooms.jsx
@@ -0,0 +1,91 @@
+import { useEffect, useState } from "react";
+import useLabyrinthStore from "../store/useLabyrinthStore";
+import Loading from "./Loading";
+import locationData from "./location.json";
+import "../styling/Rooms.css";
+
+const Rooms = () => {
+  const {
+    currentRoom,
+    performAction,
+    isLoading,
+    error,
+    setLoading,
+    setError,
+    username,
+  } = useLabyrinthStore();
+  const [roomImage, setRoomImage] = useState(null);
+
+  useEffect(() => {
+    const fetchRoomData = async () => {
+      try {
+        setLoading(true);
+        await performAction(username, { direction: "start" });
+      } catch (error) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRoomData();
+  }, [performAction, setLoading, setError, username]);
+
+  useEffect(() => {
+    if (currentRoom && currentRoom.coordinates) {
+      const matchingLocation = locationData.locationImages.find(
+        (location) => location.coordinates === currentRoom.coordinates
+      );
+      if (matchingLocation) {
+        setRoomImage(matchingLocation.image);
+      }
+    }
+  }, [currentRoom]);
+
+  const handleAction = async (action) => {
+    try {
+      setLoading(true);
+      await performAction(username, action);
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return <div>Error: </div>;
+  }
+
+  return (
+    <div
+      className="roomContainer"
+      style={{
+        backgroundImage: `url(${roomImage})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        minHeight: "100vh",
+      }}
+    >
+      <div className="roomContent">
+        <h2 className="roomDescription">{currentRoom.description}</h2>
+      </div>
+
+      <ul className="roomList">
+        {currentRoom.actions.map((action, index) => (
+          <li key={index}>
+            <button className="roomButton" onClick={() => handleAction(action)}>
+              {action.direction}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Rooms;
diff --git a/src/components/StartGame.jsx b/src/components/StartGame.jsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import useLabyrinthStore from "../store/useLabyrinthStore";
+import "../styling/StartGame.css";
+
+const StartGame = () => {
+  const [username, setUsername] = useState("");
+  const { startGame, setLoading, setError } = useLabyrinthStore();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+    try {
+      await startGame(username);
+      navigate("/rooms");
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="startGameWrapper">
+      <div className="startGameContainer">
+        <h1 className="title">Journey into the Unknown</h1>
+        <h2 className="introText">
+          Many people have been lost during the search, enter the labyrinth at
+          your own risk.
+        </h2>
+        <p className="usernameText">Enter your username:</p>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            value={username}
+            onChange={(event) => setUsername(event.target.value)}
+            placeholder="Enter username"
+            className="usernameInput"
+          />
+          <button type="submit" className="usernameButton">
+            Start Game
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default StartGame;
diff --git a/src/components/location.json b/src/components/location.json
@@ -0,0 +1,39 @@
+{
+  "locationImages": [
+    {
+      "coordinates": "0,0",
+      "image": "/Archway.jpg",
+      "alt": "large archway"
+    },
+    {
+      "coordinates": "1,0",
+      "image": "/RayofSunlight.jpg",
+      "alt": "Sunlight shining through window"
+    },
+    {
+      "coordinates": "1,1",
+      "image": "/Cavern.jpg",
+      "alt": "Light on the walls of the cavern"
+    },
+    {
+      "coordinates": "0,1",
+      "image": "MechanicalGadgets.jpg",
+      "alt": "Room filled with mechanical gadgets"
+    },
+    {
+      "coordinates": "0,2",
+      "image": "/DarkRoom.jpg",
+      "alt": "A dark room"
+    },
+    {
+      "coordinates": "0,3",
+      "image": "/Bookshelf.jpg",
+      "alt": "Bookshelf filled with books"
+    },
+    {
+      "coordinates": "1,3",
+      "image": "Sunlight.jpg",
+      "alt": "Sunlight shining"
+    }
+  ]
+}