diff --git a/frontend/bun.lockb b/frontend/bun.lockb index 5305d0f..6bdea4a 100755 Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ diff --git a/frontend/index.html b/frontend/index.html index 637bbec..f0d66bb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,13 +1,18 @@ - - - - - PokeArcadia - - -
- - + + + + + + PokeArcadia + + +
+ + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 75f7db1..17078f7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,12 +18,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" @@ -1739,6 +1740,44 @@ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", "license": "MIT" }, + "node_modules/autoprefixer": { + "version": "10.4.20", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", + "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.23.3", + "caniuse-lite": "^1.0.30001646", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/axios": { "version": "1.7.7", "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", @@ -2586,6 +2625,20 @@ "node": ">= 6" } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3158,6 +3211,16 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7f384ad..c91cd0f 100644 --- 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 new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ 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 new file mode 100644 index 0000000..82b3661 Binary files /dev/null and b/frontend/public/oak.png differ diff --git a/frontend/public/tipbox.png b/frontend/public/tipbox.png new file mode 100644 index 0000000..7303741 Binary files /dev/null and b/frontend/public/tipbox.png differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index dadf541..1039dae 100644 --- 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 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ 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 new file mode 100644 index 0000000..5cf4045 Binary files /dev/null and b/frontend/src/assets/fonts/gba.ttf differ diff --git a/frontend/src/assets/fonts/poke.ttf b/frontend/src/assets/fonts/poke.ttf new file mode 100644 index 0000000..b901cf2 Binary files /dev/null and b/frontend/src/assets/fonts/poke.ttf differ diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/frontend/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/hallofame/Canvas.tsx b/frontend/src/components/hallofame/Canvas.tsx index 168e4c9..818e2d9 100644 --- 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(null); // Video canvas diff --git a/frontend/src/components/tutorial/Tutorial.tsx b/frontend/src/components/tutorial/Tutorial.tsx new file mode 100644 index 0000000..6350ec8 --- /dev/null +++ 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) => ( + + )); + function nextTip() { + if (tipNo != dataArray[moduleNo].module.length - 1) setTipNo(tipNo + 1); + } + function prevTip() { + if (tipNo != 0) setTipNo(tipNo - 1); + } + return ( + <> +
+
+
+
+ Not Found +
+ Not Found +
+
+
+
+ {listModules} +
+
+
+
+ +
+
+
+ {" "} +

{dataArray[moduleNo].module[tipNo].tip}

+
+
+
+
+ +
+
+ +
+
+
+
+ + ); +}; + +export default Tutorial; diff --git a/frontend/src/components/tutorial/data.ts b/frontend/src/components/tutorial/data.ts new file mode 100644 index 0000000..b0a8046 --- /dev/null +++ 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/logo@2x.png", + 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 index bd6213e..bbaefbd 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,3 +1,24 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@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 index 5a66654..5921036 100644 --- 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: [], -} \ No newline at end of file +};