Skip to content

Commit

Permalink
Merge pull request #21 from akshithere/tutorialPage
Browse files Browse the repository at this point in the history
Tutorial page
  • Loading branch information
ItsArnavSh authored Sep 15, 2024
2 parents b66b7bd + 467132c commit b77269e
Show file tree
Hide file tree
Showing 19 changed files with 277 additions and 20 deletions.
Empty file added backend/Entries/1,Arnav
Empty file.
Empty file added backend/Entries/new.txt
Empty file.
Binary file modified frontend/bun.lockb
Binary file not shown.
25 changes: 15 additions & 10 deletions frontend/index.html
Original file line number Diff line number Diff line change
@@ -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>
65 changes: 64 additions & 1 deletion frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 6 additions & 0 deletions frontend/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file added frontend/public/oak.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/tipbox.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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([
{
Expand All @@ -14,6 +15,7 @@ const router = createBrowserRouter([
{ index: true, Component: Home },
{ path: "/test", Component: Test },
{ path: "/hallofame", Component: HallOFame },
{ path: "/tutorial", Component: Tutorial },
],
},
]);
Expand Down
1 change: 1 addition & 0 deletions frontend/src/assets/font.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

Binary file added frontend/src/assets/fonts/gba.ttf
Binary file not shown.
Binary file added frontend/src/assets/fonts/poke.ttf
Binary file not shown.
1 change: 0 additions & 1 deletion frontend/src/assets/react.svg

This file was deleted.

1 change: 0 additions & 1 deletion frontend/src/components/hallofame/Canvas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
79 changes: 79 additions & 0 deletions frontend/src/components/tutorial/Tutorial.tsx
Original file line number Diff line number Diff line change
@@ -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;
80 changes: 80 additions & 0 deletions frontend/src/components/tutorial/data.ts
Original file line number Diff line number Diff line change
@@ -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,
},
},
],
},
];
23 changes: 22 additions & 1 deletion frontend/src/index.css
Original file line number Diff line number Diff line change
@@ -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";
}
11 changes: 6 additions & 5 deletions frontend/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -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: [],
}
};

0 comments on commit b77269e

Please sign in to comment.