Technigo · viktoria-olo · Apr 14, 2024 · Apr 14, 2024 · Apr 15, 2024 · Apr 20, 2024
diff --git a/README.md b/README.md
@@ -6,29 +6,17 @@
 
 # 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
-```
+The assignment was to create a text-based adventure game using Zustand for state management. The user posts to an API in order to move forward in the game.
 
 ### 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?
+After making a sketch of the project layout in Figma, the next step was to make sure that the POST requests worked and that the correct responses were received. The needed repsonses were stored in the store and divided amongst the different components. I was a bit worried about how to make the loading screen and animation work, but it worked out well in the end.
+
+If I had more time, I would have worked more on styling, as well as trying out more of the stretch goals.
 
 ### 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.
+https://gleaming-panda-f1e201.netlify.app/
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -3,8 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Labyrinth Zustand</title>
+    <title>Labyrinth - A Journey</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie": "^0.0.1",
+    "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",

diff --git a/public/books.jpg b/public/books.jpg
diff --git a/public/cave-opening.jpg b/public/cave-opening.jpg
diff --git a/public/colourful-cave.jpg b/public/colourful-cave.jpg
diff --git a/public/light-exit.jpg b/public/light-exit.jpg
diff --git a/public/lightrays.jpg b/public/lightrays.jpg
diff --git a/public/machine-exit.jpg b/public/machine-exit.jpg
diff --git a/public/machine-room.jpg b/public/machine-room.jpg
diff --git a/pull_request_template.md b/pull_request_template.md
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,9 @@
+import { Home } from "./components/Home/Home";
+import { Loading } from "./components/Loading/Loading";
+import { useLabyrinthStore } from "./store/useLabyrinthStore";
 
 export const App = () => {
-  return (
-  <div>
-    Labyrinth Project 
-  </div>
-  );
+  const { loading } = useLabyrinthStore();
+
+  return <>{loading ? <Loading /> : <Home />}</>;
 };
diff --git a/src/animation.json b/src/animation.json
diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 16px;
+}
+
+@media (min-width: 668px) {
+  .container {
+    margin: 20px 36px 20px 36px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    margin: 0 36px 0 36px;
+  }
+}
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -0,0 +1,16 @@
+import { useLabyrinthStore } from "../../store/useLabyrinthStore";
+import { UsernameInput } from "../UsernameInput/UsernameInput";
+import { Scene } from "../Scene/Scene";
+import { SceneCard } from "../SceneCard/SceneCard";
+import "./Home.css";
+
+export const Home = () => {
+  const { apiData, username } = useLabyrinthStore();
+
+  return (
+    <div className="container">
+      {!username ? <UsernameInput /> : <Scene />}
+      {apiData && <SceneCard />}
+    </div>
+  );
+};
diff --git a/src/components/Loading/Loading.css b/src/components/Loading/Loading.css
@@ -0,0 +1,12 @@
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+@media (min-width: 668px) {
+  .loader {
+    height: 60vh;
+  }
+}
diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx
@@ -0,0 +1,11 @@
+import Lottie from "lottie-react";
+import animationData from "../../animation.json";
+import "./Loading.css"
+
+export const Loading = () => {
+  return (
+    <div className="loader">
+      <Lottie animationData={animationData} />
+    </div>
+  );
+};
diff --git a/src/components/Scene/Scene.css b/src/components/Scene/Scene.css
@@ -0,0 +1,22 @@
+.location-image {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+  border: solid white 2px;
+}
+
+@media (min-width: 668px) {
+  .scene-div {
+    margin-top: 16px;
+  }
+  .location-image {
+    height: 500px;
+  }
+}
+
+
+@media (min-width: 1024px) {
+.scene-div {
+    max-width: 700px;
+  }
+}
diff --git a/src/components/Scene/Scene.jsx b/src/components/Scene/Scene.jsx
@@ -0,0 +1,19 @@
+import { useLabyrinthStore } from "../../store/useLabyrinthStore";
+import locationImage from "../locationImage.json";
+import "./Scene.css";
+
+export const Scene = () => {
+  const { locationDescription, coordinates } = useLabyrinthStore();
+  const image = locationImage.find((img) => img.imgCoordinates === coordinates);
+
+  return (
+    <div className="scene-div">
+      <img
+        className="location-image"
+        src={image.imageUrl}
+        alt={image.altText}
+      />
+      <p>{locationDescription}</p>
+    </div>
+  );
+};
diff --git a/src/components/SceneCard/SceneCard.css b/src/components/SceneCard/SceneCard.css
@@ -0,0 +1,57 @@
+.actions-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.actions-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  border-top: solid 1px white;
+}
+
+.move-btn {
+  font-size: 1.2rem;
+  letter-spacing: 3px;
+  min-width: 120px;
+  max-width: 300px;
+  font-size: 1rem;
+  margin: 1rem;
+  background: #881400;
+}
+
+.move-btn:hover {
+  background: #a81000;
+}
+
+.look-btn {
+  background: #0000bc;
+  min-width: 80px;
+  font-size: 1rem;
+  max-width: 300px;
+  letter-spacing: 3px;
+  margin: 1rem;
+}
+
+.look-btn:hover {
+  background: #0000fc;
+}
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .actions-container {
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: 700px;
+  }
+  .actions-div {
+    flex-direction: row;
+    border-top: none;
+    text-align: left;
+  }
+}
diff --git a/src/components/SceneCard/SceneCard.jsx b/src/components/SceneCard/SceneCard.jsx
@@ -0,0 +1,30 @@
+import { useLabyrinthStore } from "../../store/useLabyrinthStore";
+import "./SceneCard.css";
+
+export const SceneCard = () => {
+  const { apiData, username, nextMove, actions, isHidden, toggleHidden } =
+    useLabyrinthStore();
+
+  return (
+    <>
+      {actions.length > 0 && (
+        <div className="actions-container">
+          <button className="look-btn" onClick={toggleHidden}>
+            Look around
+          </button>
+          {actions.map((action, index) => (
+            <div key={index} className="actions-div">
+              <p className={isHidden ? "hidden" : ""}>{action.description}</p>
+              <button
+                className="move-btn"
+                onClick={() => nextMove(username, action.direction)}
+              >
+                {`GO ${action.direction}`}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/UsernameInput/UsernameInput.css b/src/components/UsernameInput/UsernameInput.css
@@ -0,0 +1,38 @@
+.username-form {
+  display: flex;
+  flex-direction: column;
+  text-shadow: 1px 1px 2px gray;
+  align-items: center;
+  text-align: center;
+}
+
+.username-form input {
+  width: 100%;
+  min-width: 220px;
+  max-width: 400px;
+  font-family: "DotGothic16", sans-serif;
+  letter-spacing: 1px;
+  margin: 1rem 0 1rem 0;
+}
+
+.start-btn {
+  background: #005800;
+  margin: 1rem;
+  font-size: 1.2rem;
+  letter-spacing: 3px;
+  min-width: 18 0px;
+  max-width: 300px;
+}
+
+.start-btn:hover {
+  background: #006800;
+}
+
+@media (min-width: 668px) {
+  .username-form {
+    padding: 100px;
+  }
+}
+
+@media (min-width: 1024px) {
+}
diff --git a/src/components/UsernameInput/UsernameInput.jsx b/src/components/UsernameInput/UsernameInput.jsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { useLabyrinthStore } from "../../store/useLabyrinthStore";
+import "./UsernameInput.css";
+
+export const UsernameInput = () => {
+  const { startGame } = useLabyrinthStore();
+  const [playerName, setPlayerName] = useState("");
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    await startGame(playerName);
+  };
+  return (
+    <form className="username-form" onSubmit={handleSubmit}>
+      <h1>Welcome, traveller.</h1>
+      <p>To begin the adventure, please enter your name:</p>
+      <label>
+        <input
+          type="text"
+          value={playerName}
+          placeholder="Enter your name"
+          onChange={(event) => setPlayerName(event.target.value)}
+        />
+      </label>
+      <button className="start-btn" type="submit">
+        start game
+      </button>
+    </form>
+  );
+};
diff --git a/src/components/locationImage.json b/src/components/locationImage.json
@@ -0,0 +1,37 @@
+[
+  {
+    "altText": "archway leading into a cave",
+    "imgCoordinates": "0,0",
+    "imageUrl": "/cave-opening.jpg"
+  },
+  {
+    "altText": "cave with lightrays penetrating the ceiling",
+    "imgCoordinates": "1,0",
+    "imageUrl": "/lightrays.jpg"
+  },
+  {
+    "altText": "colourful cave wall",
+    "imgCoordinates": "1,1",
+    "imageUrl": "/colourful-cave.jpg"
+  },
+  {
+    "altText": "machine room",
+    "imgCoordinates": "0,1",
+    "imageUrl": "/machine-room.jpg"
+  },
+  {
+    "altText": "machine interface",
+    "imgCoordinates": "0,2",
+    "imageUrl": "/machine-exit.jpg"
+  },
+  {
+    "altText": "library",
+    "imgCoordinates": "0,3",
+    "imageUrl": "/books.jpg"
+  },
+  {
+    "altText": "view of mountainside in sunlight",
+    "imgCoordinates": "1,3",
+    "imageUrl": "/light-exit.jpg"
+  }
+]