Page v1

osdc · Sep 15, 2024 · 467132c · 467132c
1 parent 6e867b8
commit 467132c
Show file tree

Hide file tree

Showing 17 changed files with 277 additions and 20 deletions.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,18 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://avatars.githubusercontent.com/u/919383?s=200&v=4" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PokeArcadia</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link
+            rel="icon"
+            type="image/svg+xml"
+            href="https://avatars.githubusercontent.com/u/919383?s=200&v=4"
+        />
+        <link rel="stylesheet" href="/src/style.css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PokeArcadia</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,12 +20,13 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
     "postcss": "8.1",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/oak.png b/frontend/public/oak.png
diff --git a/frontend/public/tipbox.png b/frontend/public/tipbox.png
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import RootLayout from "./layout/RootLayout";
 import Home from "./components/home/Home";
 import Test from "./components/test/Test";
+import Tutorial from "./components/tutorial/Tutorial";
 import HallOFame from "./components/hallofame/HallOFame";
 const router = createBrowserRouter([
   {
@@ -14,6 +15,7 @@ const router = createBrowserRouter([
       { index: true, Component: Home },
       { path: "/test", Component: Test },
       { path: "/hallofame", Component: HallOFame },
+      { path: "/tutorial", Component: Tutorial },
     ],
   },
 ]);

diff --git a/frontend/src/assets/font.css b/frontend/src/assets/font.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/assets/fonts/gba.ttf b/frontend/src/assets/fonts/gba.ttf
diff --git a/frontend/src/assets/fonts/poke.ttf b/frontend/src/assets/fonts/poke.ttf
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/hallofame/Canvas.tsx b/frontend/src/components/hallofame/Canvas.tsx
@@ -7,7 +7,6 @@ let scaleFactor = 1;
 let maxX = 0;
 let maxY = 0;
 let side: number;
-let loaded: boolean = false;
 
 const Canvas: React.FC = () => {
   const videoCanvasRef = useRef<HTMLCanvasElement>(null); // Video canvas

diff --git a/frontend/src/components/tutorial/Tutorial.tsx b/frontend/src/components/tutorial/Tutorial.tsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import TipBox from "/tipbox.png"; // Ensure this path is correct
+import { dataArray } from "./data.ts";
+import Oak from "/oak.png";
+const Tutorial = () => {
+  const [tipNo, setTipNo] = useState(0);
+  const [moduleNo, setModuleNo] = useState(0);
+  const imageSection = dataArray[moduleNo].module[tipNo].imageData.src;
+  const listModules = dataArray.map((x) => (
+    <button
+      className="fr text-2xl m-5 text-gray-600"
+      onClick={() => {
+        setModuleNo(x.index);
+        setTipNo(0);
+      }}
+    >
+      {x.name}
+    </button>
+  ));
+  function nextTip() {
+    if (tipNo != dataArray[moduleNo].module.length - 1) setTipNo(tipNo + 1);
+  }
+  function prevTip() {
+    if (tipNo != 0) setTipNo(tipNo - 1);
+  }
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center h-screen bg-[#3B8481]">
+        <div className="flex flex-row h-[70%] w-full">
+          <div className="oak flex w-3/4 flex-row m-5 justify-end">
+            <div className="h-full flex flex-col items-center justify-center w-1/2">
+              <img src={imageSection} alt="Not Found" className="max-h-[50%]" />
+            </div>
+            <img src={Oak} alt="Not Found" />
+          </div>
+          <div className="list flex flex-col items-center justify-center w-[25%]">
+            <div className="border-black border-2 h-full m-10 w-full mr-4 bg-[#756C80] rounded-md">
+              <div className="bg-white m-2 rounded-md w-auto h-full mb-6 flex flex-col ">
+                {listModules}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="BottomHalf" className="flex flex-row flex-grow w-full">
+          <div
+            className="w-3/4 h-[80%] bg-no-repeat bg-center bg-contain text-4xl flex flex-col jusitfy-center items-center"
+            style={{ backgroundImage: `url(${TipBox})` }}
+          >
+            <div className="w-3/4 flex flex-col justify-center items-center h-full">
+              {" "}
+              <p className="fr">{dataArray[moduleNo].module[tipNo].tip}</p>
+            </div>
+          </div>
+          <div className="list w-[25%] h-full flex flex-row  ">
+            <div className="flex flex-col align-top justify-end">
+              <button
+                onClick={prevTip}
+                className="gba bg-[#317370] p-2 text-8xl w-40 h-40 rounded-full hover:bg-[#317888] text-white m-5"
+              >
+                B
+              </button>
+            </div>
+            <div>
+              <button
+                onClick={nextTip}
+                className="gba bg-[#317370] p-2 text-8xl w-40 h-40 rounded-full hover:bg-[#317888] text-white m-5"
+              >
+                A
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Tutorial;
diff --git a/frontend/src/components/tutorial/data.ts b/frontend/src/components/tutorial/data.ts
@@ -0,0 +1,80 @@
+export const dataArray: {
+  name: string;
+  index: number;
+  module: { tip: string; imageData: { src: string | null; large: boolean } }[];
+}[] = [
+  {
+    name: "Version Control Tools",
+    index: 0,
+    module: [
+      {
+        tip: "Git is a distributed version control system.",
+        imageData: {
+          src: "https://git-scm.com/images/[email protected]",
+          large: true,
+        },
+      },
+      {
+        tip: "Git helps in tracking changes in source code.",
+        imageData: {
+          src: "https://miro.medium.com/v2/resize:fit:720/format:webp/1*ogPtJWe61oKEXVPcpkG6BA.png",
+          large: false,
+        },
+      },
+    ],
+  },
+  {
+    name: "Web Development Technologies",
+    index: 1,
+    module: [
+      {
+        tip: "HTML is the standard markup language for creating web pages.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg",
+          large: false,
+        },
+      },
+      {
+        tip: "CSS is used to style and layout web pages.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg",
+          large: true,
+        },
+      },
+      {
+        tip: "JavaScript adds interactivity to web pages.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
+          large: true,
+        },
+      },
+    ],
+  },
+  {
+    name: "Programming Languages",
+    index: 2,
+    module: [
+      {
+        tip: "Python is a high-level, interpreted programming language.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg",
+          large: false,
+        },
+      },
+      {
+        tip: "Java is a widely-used object-oriented programming language.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg",
+          large: true,
+        },
+      },
+      {
+        tip: "Rust is a systems programming language focusing on safety and performance.",
+        imageData: {
+          src: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Rust_programming_language_black_logo.svg",
+          large: true,
+        },
+      },
+    ],
+  },
+];
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+@font-face {
+    font-family: "GBAFont";
+    src: url("./assets/fonts/gba.ttf") format("truetype"); /* Update path if necessary */
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FireRedScript";
+    src: url("./assets/fonts/poke.ttf") format("truetype"); /* Update path if necessary */
+    font-weight: normal;
+    font-style: normal;
+}
+
+.gba {
+    font-family: "GBAFont";
+}
+
+.fr {
+    font-family: "FireRedScript";
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -1,10 +1,11 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-  ],
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  options: {
+    safelist: ["fr"],
+  },
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};