Technigo · kathinka · Apr 19, 2024 · Apr 20, 2024 · Apr 21, 2024 · Apr 21, 2024
diff --git a/README.md b/README.md
@@ -6,29 +6,23 @@
 
 # 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.
+Zustand Project  - make a labyrint game where all the actions in the game are given with posts to api.
 
 ## 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.
+Initially I waited to be paired up with someone, but when that wasn't possible I just got cracking.
+i started with the basics, just getting the name from the user, and posting that in the json to see what i got from the API. Then I proceeded to build logic to be able to handle the different choices.
 
-```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?
+Spendt a lot of time playing with animation, images and shapes, before I saw that less is more, and it looked quite cluttered and crazy, and spent a lot of time removing it all 😂.
+Should probably used my time a bit better and worked on making a design before starting, and going for making a map, and store the choices in local storage. but on the other hand I had fun with animation and clipping masks, even if i didn't actually use them all.
+`
 
 ### 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.
+View it live: <a href="https://maze-mania.netlify.app/"> Are you the hero of the maze? </a>
 
 ## Instructions
 

diff --git a/index.html b/index.html
@@ -2,9 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🕹️</text></svg>">
+    <meta name="description" content="Project Labyrinth Zustand" />
+    <meta name="keywords" content="React, Zustand, Labyrinth, Game" />
     <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=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:wght@100..900&display=swap" rel="stylesheet">
+    <title>Project Labyrinth</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zustand": "^4.4.1"

diff --git a/public/assets/0x0.jpg b/public/assets/0x0.jpg
diff --git a/public/assets/0x0east.jpg b/public/assets/0x0east.jpg
diff --git a/public/assets/0x1.jpg b/public/assets/0x1.jpg
diff --git a/public/assets/0x1east.jpg b/public/assets/0x1east.jpg
diff --git a/public/assets/0x1north.jpg b/public/assets/0x1north.jpg
diff --git a/public/assets/0x2.jpg b/public/assets/0x2.jpg
diff --git a/public/assets/0x2north.jpg b/public/assets/0x2north.jpg
diff --git a/public/assets/0x2south.jpg b/public/assets/0x2south.jpg
diff --git a/public/assets/1x0.jpg b/public/assets/1x0.jpg
diff --git a/public/assets/1x0north.jpg b/public/assets/1x0north.jpg
diff --git a/public/assets/1x0west.jpg b/public/assets/1x0west.jpg
diff --git a/public/assets/1x1.jpg b/public/assets/1x1.jpg
diff --git a/public/assets/1x1south.jpg b/public/assets/1x1south.jpg
diff --git a/public/assets/cartoon/0x0.jpg b/public/assets/cartoon/0x0.jpg
diff --git a/public/assets/cartoon/0x0_v.jpg b/public/assets/cartoon/0x0_v.jpg
diff --git a/public/assets/cartoon/0x0e.jpg b/public/assets/cartoon/0x0e.jpg
diff --git a/public/assets/cartoon/0x0e2-v.jpg b/public/assets/cartoon/0x0e2-v.jpg
diff --git a/public/assets/cartoon/0x1.jpg b/public/assets/cartoon/0x1.jpg
diff --git a/public/assets/cartoon/0x1e.jpg b/public/assets/cartoon/0x1e.jpg
diff --git a/public/assets/cartoon/0x1n.jpg b/public/assets/cartoon/0x1n.jpg
diff --git a/public/assets/cartoon/0x2.jpg b/public/assets/cartoon/0x2.jpg
diff --git a/public/assets/cartoon/0x2n.jpg b/public/assets/cartoon/0x2n.jpg
diff --git a/public/assets/cartoon/0x2s.jpg b/public/assets/cartoon/0x2s.jpg
diff --git a/public/assets/cartoon/0x3-v2-v.jpg b/public/assets/cartoon/0x3-v2-v.jpg
diff --git a/public/assets/cartoon/0x3.jpg b/public/assets/cartoon/0x3.jpg
diff --git a/public/assets/cartoon/0x3e-v.jpg b/public/assets/cartoon/0x3e-v.jpg
diff --git a/public/assets/cartoon/0x3e.jpg b/public/assets/cartoon/0x3e.jpg
diff --git a/public/assets/cartoon/0x3s.jpg b/public/assets/cartoon/0x3s.jpg
diff --git a/public/assets/cartoon/1x0.jpg b/public/assets/cartoon/1x0.jpg
diff --git a/public/assets/cartoon/1x0n.jpg b/public/assets/cartoon/1x0n.jpg
diff --git a/public/assets/cartoon/1x0w.jpg b/public/assets/cartoon/1x0w.jpg
diff --git a/public/assets/cartoon/1x1.jpg b/public/assets/cartoon/1x1.jpg
diff --git a/public/assets/cartoon/1x1e.jpg b/public/assets/cartoon/1x1e.jpg
diff --git a/public/assets/cartoon/1x1s.jpg b/public/assets/cartoon/1x1s.jpg
diff --git a/public/assets/cartoon/1x3-v-v.jpg b/public/assets/cartoon/1x3-v-v.jpg
diff --git a/public/assets/cartoon/1x3-v.jpg b/public/assets/cartoon/1x3-v.jpg
diff --git a/public/assets/cartoon/1x3-v2-v.jpg b/public/assets/cartoon/1x3-v2-v.jpg
diff --git a/public/assets/cartoon/1x3.jpg b/public/assets/cartoon/1x3.jpg
diff --git a/public/assets/z0x3.jpg b/public/assets/z0x3.jpg
diff --git a/public/assets/z0x3e.jpg b/public/assets/z0x3e.jpg
diff --git a/public/assets/z0x3south.jpg b/public/assets/z0x3south.jpg
diff --git a/public/assets/z1x3.jpg b/public/assets/z1x3.jpg
diff --git a/public/assets/zstart.jpg b/public/assets/zstart.jpg
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1,7 +1,5 @@
 ## Netlify link
-Add your Netlify link here.
-PS. Don't forget to add it in your readme as well.
+View it live: <a href="https://maze-mania.netlify.app/"> Are you the hero of the maze? </a>
 
 ## Collaborators
-Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this:
-[github-username-1, github-username-2]
+solo  - no one was up for playing this week.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,8 @@
-
+import { User } from "./components/User";
 export const App = () => {
   return (
-  <div>
-    Labyrinth Project 
-  </div>
+    <>
+      <User />
+    </>
   );
 };
diff --git a/src/assets/banner.svg b/src/assets/banner.svg
diff --git a/src/components/User.jsx b/src/components/User.jsx
@@ -0,0 +1,107 @@
+import { useLabyrint } from "../stores/useLabyrint.jsx";
+import { images } from "./images";
+import { useState, useEffect } from "react";
+import { Lottie } from "./lottie";
+import "./user.css";
+
+export const User = () => {
+	const { loading, username, setUsername, fetchLabyrint, labyrint, fetchDirectionLabyrint, setDirection, setType, setRoom, setLabyrint } = useLabyrint();
+	const [isSubmitted, setIsSubmitted] = useState(false);
+	const [currentImageDirection, setCurrentImageDirection] = useState('');
+  const [showViewOption, setShowViewOption] = useState(null);
+
+	const random = Math.floor(Math.random() * 10000000);
+	const currentImage = images[labyrint.coordinates];
+
+	const handleInputChange = (event) => {
+		setUsername(event.target.value);
+	};
+
+	const handleButtonClick = async () => {
+		const username2 = username + random;
+		setUsername(username2);
+		event.preventDefault();
+		setIsSubmitted(true);
+		await fetchLabyrint(username2);
+	};
+
+	useEffect(() => {
+		if (labyrint.actions && labyrint.actions.length > 0) {
+			setCurrentImageDirection(images[labyrint.coordinates + labyrint.actions.direction]);
+      setShowViewOption(null);
+		}
+	}, [labyrint]);
+
+
+	const handleDirection = async (direction) => {
+		try {
+			setDirection(direction);
+			setType(labyrint.actions.type);
+			setRoom(labyrint.description);
+			const newLabyrint = await fetchDirectionLabyrint(
+				username,
+				labyrint.actions[0].type,
+				direction,
+				labyrint.coordinates,
+				labyrint.description,
+			);
+			if (newLabyrint) {
+				setLabyrint(newLabyrint);
+			}
+		} catch (error) {
+			console.error('Failed to fetch new labyrinth:', error);
+		}
+	};
+	return (
+		!username || !isSubmitted ? (
+			<section className="hero">
+				<div className="form">
+					<form onSubmit={handleButtonClick}>
+						<h1>To enter the maze, we need a hero&#39;s name</h1>
+						<label name="username" htmlFor="username">I am Legend, I am..	</label>
+						<input
+							value={username}
+							type="text"
+							onChange={handleInputChange}
+							name="username"
+							id="username"
+							autoComplete="given-name"
+						/>
+						<button onClick={handleButtonClick}>Enter the maze</button>
+					</form>
+				</div>
+			</section>
+		)
+			: (
+				<div className="game-stage" style={{ backgroundImage: `url(${currentImage})` }}>
+					{loading ? <Lottie /> : null}
+					{labyrint && labyrint.actions && (
+						<>
+							<h2>{labyrint.description}</h2>
+							<section className="options-container">
+								{labyrint.actions.map((action, index) => (
+									<div className="option" key={index}>
+                    <button className="view" onClick={() => setShowViewOption(showViewOption === index ? null : index)(!showViewOption)}>Look {action.direction}</button>
+                    {showViewOption === index &&
+                    <div className="option view-option">
+										<div className="option-image" style={{
+											backgroundImage: `url(${images[labyrint.coordinates + action.direction]})`
+										}}></div>
+										<div className="option-text-btn-container">
+											<p>{action.description}</p>
+                      </div>
+											<button className="button-direction" onClick={() => handleDirection(action.direction)}> Go {action.direction}</button>
+										</div>}
+									</div>
+								))}
+							</section>
+
+						</>
+					)
+					}</div>
+			)
+	)
+}
+
+
+
diff --git a/src/components/images.jsx b/src/components/images.jsx
@@ -0,0 +1,23 @@
+
+
+export const images = {
+  "0,0": "/assets/cartoon/0x0.jpg",
+  "0,0East": "/assets/cartoon/0x0e2-v.jpg",
+  "0,1": "/assets/cartoon/0x1.jpg",
+  "0,1East": "/assets/cartoon/0x1e.jpg",
+  "0,1North": "/assets/cartoon/0x1n.jpg",
+  "0,2": "/assets/cartoon/0x2.jpg",
+  "0,2North": "/assets/cartoon/0x2n.jpg",
+  "0,2South": "/assets/cartoon/0x2s.jpg",
+  "1,0": "/assets/cartoon/1x0.jpg",
+  "1,0North": "/assets/cartoon/1x0n.jpg",
+  "1,0West": "/assets/cartoon/1x0w.jpg",
+  "1,1": "/assets/cartoon/1x1.jpg",
+  "1,1South": "/assets/cartoon/1x1s.jpg",
+  "1,1West": "/assets/cartoon//0x1e.jpg",
+  "0,3": "/assets/cartoon/0x3.jpg",
+  "0,3East": "/assets/cartoon/0x3e.jpg",
+  "0,3South": "/assets/cartoon/0x3s.jpg",
+  "1,3": "/assets/cartoon/1x3.jpg",
+};
+
diff --git a/src/components/lottie.jsx b/src/components/lottie.jsx
@@ -0,0 +1,15 @@
+import { Player } from '@lottiefiles/react-lottie-player';
+
+export const Lottie = () => {
+
+  return (
+    <div className="lottie-overlay">
+        <Player
+          src='https://lottie.host/6483601a-d5be-4f51-8822-9a5f375d00f9/bGyHW0SHFM.json'
+          className="player"
+          loop
+          autoplay
+        />
+    </div>
+  )
+}