Skip to content

Commit 7f971d2

Browse files
OutsideofemiTOutsideofemiT
committed
resolving merge conflicts to commit
2 parents 6792b4a + d7567a5 commit 7f971d2

File tree

25 files changed

+1905
-3670
lines changed

25 files changed

+1905
-3670
lines changed

‎client/background/confetti_image.jpg‎

13.8 KB
Loading

‎client/package-lock.json‎

Lines changed: 844 additions & 94 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,28 @@
1313
"@apollo/client": "^3.13.8",
1414
"@radix-ui/react-dialog": "^1.1.11",
1515
"graphql": "^16.11.0",
16+
1617
"jwt-decode": "^4.0.0",
18+
1719
"lucide-react": "^0.503.0",
1820
"react": "^19.0.0",
1921
"react-dom": "^19.0.0",
22+
2023
"react-howler": "^5.2.0"
24+
25+
"react-router-dom": "^7.5.2"
26+
2127
},
2228
"devDependencies": {
2329
"@eslint/js": "^9.21.0",
2430
"@tailwindcss/postcss": "^4.1.4",
2531
"@types/react": "^19.0.10",
2632
"@types/react-dom": "^19.0.4",
33+
2734
"@types/react-howler": "^5.2.3",
35+
36+
"@types/react-router-dom": "^5.3.3",
37+
2838
"@vitejs/plugin-react": "^4.3.4",
2939
"autoprefixer": "^10.4.21",
3040
"eslint": "^9.21.0",

‎client/src/App.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react';
22
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
33
import { Login } from './components/screens/Login';
44
import GameMap from './components/screens/GameMap';
5-
// import GameOver from './components/screens/GameOver';
6-
// import Victory from './components/screens/Victory';
5+
import GameOver from './components/screens/GameOver';
6+
import Victory from './components/screens/Victory';
77
import Signup from './components/screens/Signup';
8+
import Questions from './components/screens/Questions';
89

910
import './styles/codezilla.css';
1011

@@ -14,9 +15,11 @@ const App: React.FC = () => {
1415
<Routes>
1516
<Route path="/" element={<Login />} />
1617
<Route path="/map" element={<GameMap />} />
17-
{/* <Route path="/gameover" element={<GameOver />} /> */}
18+
<Route path="/gameover" element={<GameOver />} />
1819
<Route path="/signup" element={<Signup />} />
19-
{/* <Route path="/victory" element={<Victory />} /> */}
20+
<Route path="/victory" element={<Victory />} />
21+
<Route path="/question/:id" element={<Questions />} />
22+
2023

2124

2225
</Routes>

‎client/src/components/screens/GameMap.tsx‎

Lines changed: 84 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,141 @@
1+
12
// src/components/screens/GameMap.tsx
23

34
// IMPORT LIBRARIES
45
import * as React from 'react';
6+
7+
import React, { useState } from 'react';
8+
59
import { useNavigate } from 'react-router-dom';
6-
import Minion from './Minions';
10+
import Minion from './Minions';
711
import "../../styles/codezilla.css";
812

913
const GameMap: React.FC = () => {
1014
const navigate = useNavigate();
15+
const [completedPaths, setCompletedPaths] = useState<string[]>([]);
1116

1217
const minions = [
1318
{
1419
id: '1',
15-
x: 100,
16-
y: 150,
20+
xPercent: 17,
21+
yPercent: 25,
1722
image: '/minions/nullbyte3a.png',
1823
name: 'Nullbyte',
1924
questionId: 'q1',
2025
},
2126
{
2227
id: '2',
23-
x: 250,
24-
y: 200,
28+
xPercent: 35,
29+
yPercent: 48,
2530
image: '/minions/dbug2a.png',
2631
name: 'Dbug',
2732
questionId: 'q2',
2833
},
2934
{
3035
id: '3',
31-
x: 400,
32-
y: 250,
36+
xPercent: 53,
37+
yPercent: 65,
3338
image: '/minions/typerrorus.png',
3439
name: 'Typerrorasaurus',
3540
questionId: 'q3',
3641
},
3742
{
3843
id: '4',
39-
x: 550,
40-
y: 300,
44+
xPercent: 72,
45+
yPercent: 50,
4146
image: '/minions/monster-left.png',
4247
name: 'Pie-Thon',
4348
questionId: 'q4',
4449
},
4550
{
4651
id: '5',
47-
x: 700,
48-
y: 350,
52+
xPercent: 87,
53+
yPercent: 27,
4954
image: '/minions/codezilla2.png',
5055
name: 'Codezilla',
5156
questionId: 'q5',
5257
},
5358
];
5459

60+
const nodes = [
61+
{ id: 'node1', xPercent: 18, yPercent: 28 }, // START LEFT
62+
{ id: 'node2', xPercent: 18, yPercent: 48 }, // SMALL DOWN
63+
{ id: 'node3', xPercent: 35, yPercent: 48 }, // SMALL RIGHT
64+
{ id: 'node4', xPercent: 35, yPercent: 68 }, // SMALL DOWN
65+
{ id: 'node5', xPercent: 53, yPercent: 68 }, // SMALL RIGHT
66+
{ id: 'node6', xPercent: 53, yPercent: 48 }, // SMALL UP
67+
{ id: 'node7', xPercent: 70, yPercent: 48 }, // SMALL RIGHT
68+
{ id: 'node8', xPercent: 70, yPercent: 28 }, // SMALL UP
69+
{ id: 'node9', xPercent: 88, yPercent: 28 }, // CODEZILLA
70+
];
71+
5572
const goToQuestion = (questionId: string) => {
5673
console.log('Go to question', questionId);
74+
75+
const currentIndex = minions.findIndex(m => m.questionId === questionId);
76+
77+
if (currentIndex < nodes.length - 1) {
78+
const pathId = `${nodes[currentIndex].id}-${nodes[currentIndex + 1].id}`;
79+
setCompletedPaths(prev => [...prev, pathId]);
80+
}
81+
5782
navigate(`/question/${questionId}`);
5883
};
5984

6085
return (
6186
<div className="game-map">
62-
{/* Background image */}
63-
<img
64-
src="/background/codezilla_bkgd.png"
65-
alt="rainy cityscape"
66-
className="background-image"
67-
/>
68-
69-
{/* Minions */}
87+
88+
{/* SVG LINES AND CIRCLES 2*/}
89+
<svg className="map-lines">
90+
{/* LINES BETWEEN NODES */}
91+
{nodes.map((node, index) => {
92+
const nextNode = nodes[index + 1];
93+
if (!nextNode) return null;
94+
95+
return (
96+
<line
97+
key={`line-${node.id}-${nextNode.id}`}
98+
x1={`${node.xPercent}%`}
99+
y1={`${node.yPercent}%`}
100+
x2={`${nextNode.xPercent}%`}
101+
y2={`${nextNode.yPercent}%`}
102+
className={`map-line ${completedPaths.includes(`${node.id}-${nextNode.id}`) ? 'completed' : ''}`}
103+
/>
104+
);
105+
})}
106+
107+
{/* GLOWING OUTER CIRCLE + DARKER INNER CIRCLE */}
108+
{nodes.map((node, index) => {
109+
const isCompleted = index < completedPaths.length;
110+
111+
return (
112+
<g key={`node-${node.id}`}>
113+
{/* OUTER GLOW CIRCLE */}
114+
<circle
115+
cx={`${node.xPercent}%`}
116+
cy={`${node.yPercent}%`}
117+
r="3.5%"
118+
className={`map-node-outer ${isCompleted ? 'completed' : ''}`}
119+
/>
120+
{/* INNER DARKER CIRCLE */}
121+
<circle
122+
cx={`${node.xPercent}%`}
123+
cy={`${node.yPercent}%`}
124+
r="3%"
125+
className="map-node-inner"
126+
/>
127+
</g>
128+
);
129+
})}
130+
</svg>
131+
132+
{/* MINIONS */}
70133
{minions.map((minion) => (
71134
<Minion
72135
key={minion.id}
73136
id={minion.id}
74-
x={minion.x}
75-
y={minion.y}
137+
xPercent={minion.xPercent}
138+
yPercent={minion.yPercent}
76139
image={minion.image}
77140
name={minion.name}
78141
questionId={minion.questionId}

‎client/src/components/screens/GameOver.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
1-
import './codezilla.css';
1+
import "../../styles/codezilla.css";
22

33
const GameOverPage = ({
4-
backgroundUrl = '/assets/background.jpg',
5-
logoUrl = '/assets/codezilla-logo.png',
6-
avatarUrl = '/assets/player-avatar.png',
7-
codezillaUrl = '/assets/codezilla.png',
4+
backgroundUrl = 'client/background/codezilla_bkgd.png',
5+
avatarUrl = 'client/avatars/avatar4.png',
6+
codezillaUrl = 'client/minions/codezilla2.png',
87
}) => {
98
return (
109
<div
1110
className="game-over-page"
1211
style={{ backgroundImage: `url(${backgroundUrl})` }}
1312
>
14-
<img
15-
className="game-over-logo"
16-
src={logoUrl}
17-
alt="Codezilla Logo"
18-
/>
1913

2014
<div className="game-over-container">
2115
<h1 className="game-over-title">Game Over!</h1>

‎client/src/components/screens/Login.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ export const Login: React.FC = () => {
1212

1313
return (
1414
<div className="login-wrapper">
15-
<img
16-
src="/background/codezilla_bkgd.png"
17-
alt="rainy cityscape"
18-
className="background-image"
19-
/>
20-
2115
<div className="login-content">
2216
<div className="question-box">
2317
<h1>Login</h1>

‎client/src/components/screens/Minions.tsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,52 @@
1-
// src/components/Minion.tsx
2-
31
import React from 'react';
42

53
interface MinionProps {
64
id: string;
7-
x: number;
8-
y: number;
5+
xPercent: number;
6+
yPercent: number;
97
image: string;
108
name: string;
119
questionId: string;
1210
goToQuestion: (questionId: string) => void;
11+
size: number,
1312
}
1413

15-
const Minion: React.FC<MinionProps> = ({ id, x, y, image, name, questionId, goToQuestion }) => {
14+
const Minion: React.FC<MinionProps> = ({
15+
id,
16+
xPercent,
17+
yPercent,
18+
image,
19+
name,
20+
questionId,
21+
goToQuestion,
22+
}) => {
23+
1624
return (
1725
<div
18-
id={`minion-${id}`} // ✅ Corrected here
19-
style={{ position: 'absolute', top: y, left: x, cursor: 'pointer' }}
26+
id={`minion-${id}`}
27+
className="minion"
28+
style={{
29+
position: 'absolute',
30+
top: `${yPercent}%`,
31+
left: `${xPercent}%`,
32+
width: '120px',
33+
height: '120px',
34+
transform: 'translate(-50%, -50%)',
35+
cursor: 'pointer',
36+
zIndex: 2,
37+
}}
2038
onClick={() => goToQuestion(questionId)}
39+
title={name}
2140
>
22-
<img src={image} alt={name} style={{ width: '80px', height: '80px' }} />
41+
<img
42+
src={image}
43+
alt={name}
44+
style={{
45+
width: '100%',
46+
height: '100%',
47+
objectFit: 'contain',
48+
}}
49+
/>
2350
</div>
2451
);
2552
};

‎client/src/components/screens/Questions.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { useParams, useNavigate } from 'react-router-dom';
3+
4+
const Questions: React.FC = () => {
5+
const { id } = useParams<{ id: string }>();
6+
const navigate = useNavigate();
7+
8+
const handleBack = () => {
9+
navigate('/map');
10+
};
11+
12+
return (
13+
<div className="question-screen">
14+
<h1>Question {id}</h1>
15+
<p>This is where the question {id} will go!</p>
16+
<button onClick={handleBack}>Back to Map</button>
17+
</div>
18+
);
19+
};
20+
21+
export default Questions;

‎client/src/components/screens/Signup.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// src/components/SignUp.tsx
21
/*CREATE IMPORTS */
32
import React, { useState } from 'react';
43
import { useNavigate } from 'react-router-dom';
@@ -26,11 +25,6 @@ const SignUp: React.FC = () => {
2625

2726
return (
2827
<div className="login-wrapper">
29-
<img
30-
src="/background/codezilla_bkgd.png"
31-
alt="Background"
32-
className="background-image"
33-
/>
3428
<form className="question-box" onSubmit={handleSubmit}>
3529
<h2>Create Your Codezilla Account</h2>
3630
<input

0 commit comments

Comments
 (0)