Technigo · wwenzz · Apr 15, 2024 · Apr 16, 2024 · Apr 16, 2024 · Apr 16, 2024
diff --git a/README.md b/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
-```
+In this pair project, we built a text based adventure using Zustand for state management and an API from Technigo to post data.
 
 ### 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 approached the problem by laying out the components and stores we needed. We then ensured that the API calls worked as intended. We identified the states that should be defined globally with Zustand and used them in the components. As a next step, we made sure to implement a user-friendly design that would allow the user to quickly understand what to do.
 
-### View it live
+If we had more time we would look into more of the stretch goals.
 
-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
+### View it live
 
-<a href="instructions.md">
-   See instructions of this project
-  </a>
+https://alma-wen-labyrinth.netlify.app/
diff --git a/index.html b/index.html
@@ -2,9 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta property="og:title" content="A Labyrinth Game" />
+    <meta
+      property="og:description"
+      content="A labyrinth game created by Alma and Wen"
+    />
+    <meta
+      property="og:image"
+      content="https://i.postimg.cc/Fszys7Vp/preview.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Labyrinth Zustand</title>
+    <title>Mysterious Labyrinth</title>
+    <link rel="preload" href="start.jpeg" as="image" />
+    <link rel="preload" href="0,0.jpeg" as="image" />
+    <link rel="preload" href="0,1.jpeg" as="image" />
+    <link rel="preload" href="0,2.jpeg" as="image" />
+    <link rel="preload" href="0,3.jpeg" as="image" />
+    <link rel="preload" href="1,0.jpeg" as="image" />
+    <link rel="preload" href="1,1.jpeg" as="image" />
+    <link rel="preload" href="1,3.jpeg" as="image" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lottie-web": "^5.12.2",
     "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/0,0.jpeg b/public/0,0.jpeg
diff --git a/public/0,1.jpeg b/public/0,1.jpeg
diff --git a/public/0,2.jpeg b/public/0,2.jpeg
diff --git a/public/0,3.jpeg b/public/0,3.jpeg
diff --git a/public/1,0.jpeg b/public/1,0.jpeg
diff --git a/public/1,1.jpeg b/public/1,1.jpeg
diff --git a/public/1,3.jpeg b/public/1,3.jpeg
diff --git a/public/start.jpeg b/public/start.jpeg
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 { FirstPage } from "./components/FirstPage";
 
 export const App = () => {
   return (
-  <div>
-    Labyrinth Project 
-  </div>
+    <>
+      <FirstPage />
+    </>
   );
 };
diff --git a/src/assets/animations/loading-compass.json b/src/assets/animations/loading-compass.json
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
diff --git a/src/assets/fonts/Gravedigger.ttf b/src/assets/fonts/Gravedigger.ttf
diff --git a/src/assets/fonts/Sdfortimburtondemo-ALoW2.ttf b/src/assets/fonts/Sdfortimburtondemo-ALoW2.ttf
diff --git a/src/components/ActionPage.jsx b/src/components/ActionPage.jsx
@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { useLabyrinthStore } from "../stores/useLabyrinthStore";
+import "../style/ActionPage.css";
+
+export const ActionPage = ({ changeBgImg }) => {
+  const { coordinates, description, actions, makeMove, restart } =
+    useLabyrinthStore();
+
+  // useEffect that runs on mount of the component and changes the bg img
+  useEffect(() => {
+    changeBgImg(coordinates);
+  }, [changeBgImg, coordinates]);
+
+  return (
+    <div className="action-container">
+      <p>{description}</p>
+      <div className="button-container">
+        {actions.map((action, index) => (
+          <button
+            className="action-button"
+            value={action.direction}
+            key={index}
+            onClick={e => {
+              const direction = e.target.value;
+              makeMove(direction);
+            }}
+          >
+            {action.direction}
+          </button>
+        ))}
+      </div>
+      <button
+        className="restart-button"
+        type="button"
+        onClick={() => {
+          restart();
+          // change background back to start page
+          changeBgImg("start");
+        }}
+      >
+        Restart
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/FirstPage.jsx b/src/components/FirstPage.jsx
@@ -0,0 +1,66 @@
+import { useRef, useState } from "react"
+import { useLabyrinthStore } from "../stores/useLabyrinthStore"
+import { ActionPage } from "./ActionPage"
+import { LoadingAnimation } from "./LoadingAnimation"
+import "../style/FirstPage.css"
+
+export const FirstPage = () => {
+  // create ref for main container div
+  const bgImgRef = useRef()
+
+  const { loggedIn, startGame, loading } = useLabyrinthStore()
+  const [userInput, setUserInput] = useState("")
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    setUserInput("")
+    startGame(userInput)
+  }
+
+  // function that changes the background img
+  const changeBgImg = (coordinates) => {
+    // replace the url for each coordinate
+    bgImgRef.current.style.backgroundImage = `url('${coordinates}.jpeg')`
+  }
+
+  if (loading) {
+    return <LoadingAnimation />
+  }
+
+  return (
+    <div
+      ref={bgImgRef}
+      className="main-container"
+      style={{ backgroundColor: "gray" }}>
+      {loggedIn ? (
+        <ActionPage changeBgImg={changeBgImg} />
+      ) : (
+        <div className="start-container">
+          <h1 className="heading">Labyrinth</h1>
+          <h2 className="subheading">
+            Dare to tread the labyrinth&apos;s enigmatic paths, where secrets
+            lurk in every shadow.
+          </h2>
+          <p className="description">
+            Are you ready to uncover the secrets of the labyrinth? Embark on the
+            journey and find out.
+          </p>
+          <form className="form" onSubmit={handleSubmit}>
+            <label htmlFor="userName">Adventurer name:</label>
+            <input
+              id="userName"
+              type="text"
+              value={userInput}
+              onChange={(e) => setUserInput(e.target.value)}
+            />
+            <button
+              className="submit-btn"
+              disabled={userInput ? false : true}
+              type="submit">
+              Start
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/LoadingAnimation.jsx b/src/components/LoadingAnimation.jsx
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react"
+import lottie from "lottie-web"
+import loadingCompass from "../assets/animations/loading-compass.json"
+import "../style/LoadingAnimation.css"
+
+export const LoadingAnimation = () => {
+  const container = useRef(null)
+
+  useEffect(() => {
+    const anim = lottie.loadAnimation({
+      container: container.current,
+      renderer: "svg",
+      loop: true,
+      autoplay: true,
+      animationData: loadingCompass,
+    })
+
+    return () => {
+      anim.destroy()
+    }
+  }, [])
+
+  return (
+    <div className="loading-container" style={{ backgroundColor: "gray" }}>
+      <div className="loading-animation" ref={container}></div>
+    </div>
+  )
+}
diff --git a/src/index.css b/src/index.css
@@ -1,11 +1,11 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #242424; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -14,106 +14,23 @@
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
+html,
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  height: 100%;
 }
 
-/* APP Component CSS */
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "SD For Tim Burton";
 }
-
-.read-the-docs {
-  color: #888;
+@font-face {
+  font-family: "Gravedigger";
+  src: url("./assets/fonts/Gravedigger.ttf") format("truetype");
 }
 
-/* Bio Comp */
-.bioComp {
-  border: 1px solid red;
-  margin-bottom: 1em;
+@font-face {
+  font-family: "SD For Tim Burton";
+  src: url("./assets/fonts//Sdfortimburtondemo-ALoW2.ttf") format("truetype");
 }