Arnau's maze

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.
-
-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?
+This week, I took a less effective approach. I relied on an AI to provide the project structure, resulting in three components I didn't fully understand. This led to spending most of the week deciphering the code. Instead If I had writedn the code myself would have been a more valuable learning experience.
 
 ### 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>
+[here](https://arnaus-maze.netlify.app/)

package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zustand": "^4.4.1"
+    "react-typed": "^2.0.12",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

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

src/components/Buttons/Buttons.css

@@ -0,0 +1,20 @@
+.audio,
+.restart {
+  position: fixed;
+  top: 5px;
+  color: rgba(255, 255, 255, 0.3);
+  border: none;
+}
+
+.audio {
+  left: 5px;
+}
+
+.restart {
+  right: 5px;
+}
+
+.audio:hover,
+.restart:hover {
+  color: rgb(0, 0, 0);
+}

src/components/Buttons/Buttons.jsx

@@ -0,0 +1,36 @@
+import "./Buttons.css";
+import { useGlobalStoreData } from "../../stores/storeData";
+
+export const RestartButton = () => {
+  const { startGame } = useGlobalStoreData();
+
+  const handleRestart = () => {
+    // Reset the login data in the store
+    useGlobalStoreData.setState({
+      logindata: {
+        isLoggedIn: false,
+        username: "",
+        type: null,
+        direction: null,
+        coordinates: null,
+      },
+    });
+
+    // Call startGame to restart the game
+    startGame(""); // Pass an empty string as username to restart the game
+  };
+
+  return (
+    <button className="otherButtons restart" onClick={handleRestart}>
+      Restart
+    </button>
+  );
+};
+
+export const AudioButton = () => {
+  return (
+    <>
+      <button className="otherButtons audio">Audio</button>
+    </>
+  );
+};

src/components/Footer.css

@@ -0,0 +1,22 @@
+.footer-container {
+  position: absolute;
+  bottom: 0;
+  margin-top: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  background-color: #010101;
+  color: rgb(255, 255, 255);
+  width: 100%;
+}
+
+.footer-container p {
+  margin: 10px;
+  font-size: 0.85rem;
+}
+
+.logo {
+  height: 30px;
+}

src/components/Footer.jsx

@@ -0,0 +1,11 @@
+import "./Footer.css";
+import image from "../assets/technigo-logo.svg";
+
+export const Footer = () => {
+  return (
+    <footer className="footer-container">
+      <p>2024 by Arnau Vidal </p>
+      <img src={image} alt="Technigo logo" className="logo" />
+    </footer>
+  );
+};

src/components/GameScreen.css

@@ -0,0 +1,56 @@
+.game-screen-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100vh;
+}
+
+.game-screen {
+  margin: 20px auto auto auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 400px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.game-screen-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100vh;
+}
+
+.actions {
+  opacity: 0;
+  animation: fade-in 1s ease-in-out forwards;
+}
+
+.otherButtons:hover {
+  background-color: var(--COLOR-2);
+}
+
+.showDirections {
+  opacity: 0;
+  animation: fade-in 1s ease-in-out forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/components/GameScreen.jsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { useGlobalStoreData } from "../stores/storeData";
+import { ReactTyped } from "react-typed";
+import "./GameScreen.css";
+import { AudioButton, RestartButton } from "./Buttons/Buttons";
+
+export const GameScreen = ({ actions }) => {
+  const [isLoading, setLoading] = useState(false);
+  const [typingComplete, setTypingComplete] = useState(false);
+  const [showActions, setShowActions] = useState(false);
+
+  const getDescription = () => {
+    return useGlobalStoreData.getState().gamedata.description;
+  };
+
+  const getCoordinates = () => {
+    return useGlobalStoreData.getState().gamedata.coordinates;
+  };
+
+  const getActions = () => {
+    return useGlobalStoreData.getState().gamedata.actions;
+  };
+
+  const handleAction = async (action) => {
+    setLoading(true);
+    try {
+      const username = useGlobalStoreData.getState().username();
+      await useGlobalStoreData
+        .getState()
+        .sendAction(username, action.type, action.direction);
+    } catch (error) {
+      console.error("Failed to perform action:", error); // Handle error, display error message to the user
+    } finally {
+      setLoading(false);
+      setShowActions(false);
+      setTypingComplete(false);
+    }
+  };
+
+  // Dynamically set the background image URL based on coordinates
+  const cleanCoordinates = getCoordinates().replace(",", "-");
+  const backgroundImageUrl = `url("/background-image-${cleanCoordinates}.png"`;
+
+  const hasDirections = getActions().some((action) => action.type === "move");
+
+  return (
+    <div
+      className="game-screen-background"
+      style={{ backgroundImage: backgroundImageUrl }}
+    >
+      <div className="game-screen">
+        <ReactTyped
+          strings={[getDescription()]}
+          typeSpeed={40}
+          showCursor={false}
+          onComplete={() => setTypingComplete(true)}
+        />
+        {typingComplete && (
+          <>
+            {hasDirections && (
+              <button
+                className="otherButtons showDirections"
+                onClick={() => setShowActions(!showActions)}
+              >
+                {showActions ? "Hide Directions" : "Show Directions"}
+              </button>
+            )}
+            {showActions && (
+              <div className="actions">
+                {getActions().map((action, index) => (
+                  <div key={index}>
+                    {action.type === "move" && (
+                      <button
+                        className="btnDirection"
+                        onClick={() => handleAction(action)}
+                        disabled={isLoading}
+                      >
+                        Go: {action.direction}
+                      </button>
+                    )}
+                    <p>{action.description}</p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+        <AudioButton></AudioButton>
+        <RestartButton></RestartButton>
+      </div>
+    </div>
+  );
+};

src/components/LoginStart.css

@@ -0,0 +1,26 @@
+.login-background {
+  display: flex;
+  justify-content: center;
+  background-image: url("../assets/start-image.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+}
+
+.container-start {
+  margin: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 400px;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.container-start input {
+  margin: 10px;
+}