diff --git a/client/package-lock.json b/client/package-lock.json index cf4bd40..f10dbcf 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -12,7 +12,8 @@ "howler": "^2.2.4", "lucide-react": "^0.503.0", "react": "^19.1.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^6.30.0" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -20,6 +21,7 @@ "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@types/react-howler": "^5.2.3", + "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.21", "eslint": "^9.21.0", @@ -1406,6 +1408,15 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz", + "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.40.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz", @@ -2006,6 +2017,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/howler": { "version": "2.2.12", "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.12.tgz", @@ -2051,6 +2069,29 @@ "@types/react": "*" } }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.31.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.31.0.tgz", @@ -3908,6 +3949,38 @@ } } }, + "node_modules/react-router": { + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz", + "integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz", + "integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.0", + "react-router": "6.30.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-style-singleton": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", diff --git a/client/package.json b/client/package.json index e5281a1..ee981eb 100644 --- a/client/package.json +++ b/client/package.json @@ -14,7 +14,8 @@ "howler": "^2.2.4", "lucide-react": "^0.503.0", "react": "^19.1.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-router-dom": "^6.30.0" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -22,6 +23,7 @@ "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@types/react-howler": "^5.2.3", + "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.21", "eslint": "^9.21.0", diff --git a/client/src/components/screens/GameOver.tsx b/client/src/components/screens/GameOver.tsx index 0a392c5..c601bd2 100644 --- a/client/src/components/screens/GameOver.tsx +++ b/client/src/components/screens/GameOver.tsx @@ -1,11 +1,48 @@ -// GameOver you lost screen :( -// TODO: IMPORT LIBRARIES: REACT, REACT-ROUTER-DOM -// TODO: FUNCTIONAL GAMEOVER COMPONENT -// TODO: USENAVIGATE() -// TODO: ADD IMG SRC "/clients/backgrounds/codezilla_bkgd.png" -// TODO: NAVIGATE USERS BACK TO THE MAP -// TODO: CREATE A CONTAINER GAMEOVER-CONTAINER W/ A GAME OVER HEADING -// TODO: CREATE A GAME OVER MESSAGE -// TODO: CREATE A RESTRT HANDLE -// TODO: EXPORT DEFAULT GAMEOVER; +import './codezilla.css'; +const GameOverPage = ({ + backgroundUrl = '/assets/background.jpg', + logoUrl = '/assets/codezilla-logo.png', + avatarUrl = '/assets/player-avatar.png', + codezillaUrl = '/assets/codezilla.png', +}) => { + return ( +
+ Codezilla Logo + +
+

Game Over!

+ +
+ Player Avatar + Codezilla +
+ +

+ You were defeated by Codezilla! +

+ +

+ Try again to become a code master +

+
+
+ ); +}; + +export default GameOverPage; diff --git a/client/src/components/screens/Victory.tsx b/client/src/components/screens/Victory.tsx index 1f00041..771bec6 100644 --- a/client/src/components/screens/Victory.tsx +++ b/client/src/components/screens/Victory.tsx @@ -1,12 +1,46 @@ -// Victory screen with return to map link -// TODO: IMPORT LIBRARIES: REACT, REACT-ROUTER-DOM -// TODO:CR8 FUNCTIONAL VICTORY COMPONENT -// TODO: W/I VICTORY COMPONENT USENAVIGATE() -// TODO: ADD IMG SRC "/clients/backgrounds/codezilla_bkgd.png" -// TODO: NAVIGATE BACK TO THE MAP -// TODO: CREAT A CONTAINER VICTORY-CONTAINER -// TODO: CREATE "VICTORY" HEADER -// TODO: CREATE A VICTORY CONGRATULATORY MESSAGE -// TODO: CREATE A PLAY AGAIN BUTTON -// TODO: EXPORT DEFAULT VICTORY +import './codezilla.css'; + +export default function VictoryPage({ + backgroundUrl = '/assets/background.jpg', + logoUrl = '/assets/codezilla-logo.png', + avatarUrl = '/assets/player-avatar.png', + confettiUrl = '/assets/confetti.png', +}) { + return ( +
+ Codezilla Logo + +
+ {/* Confetti overlay */} +
+ +

Congratulations!

+ + Player Avatar + +

+ You defeated Codezilla! +

+ +

+ you are a coding master! +

+
+
+ ); +} diff --git a/client/src/styles/codezilla.css b/client/src/styles/codezilla.css index e1d7ee5..a72e919 100644 --- a/client/src/styles/codezilla.css +++ b/client/src/styles/codezilla.css @@ -102,4 +102,152 @@ z-index: 10; } - \ No newline at end of file + /* Game Over Page Styling */ + /* Full-screen rainy night background */ +.game-over-page { + width: 100vw; + height: 100vh; + background-size: cover; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + position: relative; + font-family: sans-serif; +} + +/* Logo in top-left corner */ +.game-over-logo { + position: absolute; + top: 20px; + left: 20px; + width: 160px; /* adjust as needed */ +} + +/* The dark rounded panel */ +.game-over-container { + background: rgba(0, 0, 30, 0.9); + border-radius: 40px; + padding: 40px 60px; + box-shadow: 0 0 30px rgba(255, 0, 0, 0.5); + text-align: center; + max-width: 800px; + width: calc(100% - 80px); +} + +/* “Game Over!” */ +.game-over-title { + color: #e00; + font-size: 4rem; + margin: 0; +} + +/* Avatars row */ +.game-over-images { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + margin: 2.5rem 0; +} + +.player-avatar, +.codezilla-avatar { + width: 120px; /* adjust size */ + height: auto; +} + +/* “You were defeated…” */ +.game-over-subtitle { + color: #e00; + font-size: 2rem; + margin: 0.5rem 0 1.5rem; +} + +/* “try again…” */ +.game-over-cta { + color: #fff; + font-size: 1.25rem; + margin: 0; +} + +/* Victory Page Styling */ +/* Full-screen rainy night background */ +.victory-page { + width: 100vw; + height: 100vh; + background-size: cover; + background-position: center; + display: flex; + justify-content: center; + align-items: center; + position: relative; + font-family: sans-serif; +} + +/* Logo in top-left corner */ +.victory-logo { + position: absolute; + top: 20px; + left: 20px; + width: 160px; +} + +/* Dark rounded panel container */ +.victory-container { + position: relative; + background: rgba(0, 0, 30, 0.9); + border-radius: 40px; + padding: 40px 60px; + box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); + text-align: center; + max-width: 800px; + width: calc(100% - 80px); + overflow: hidden; +} + +/* Confetti overlay inside the panel */ +.victory-confetti { + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + opacity: 0.8; + pointer-events: none; +} + +/* “Congratulations!” */ +.victory-title { + color: #fff; + font-size: 3.5rem; + margin: 0; + position: relative; + z-index: 1; +} + +/* Player avatar */ +.victory-avatar { + width: 120px; + height: auto; + margin: 2rem 0; + position: relative; + z-index: 1; +} + +/* “You defeated Codezilla!” */ +.victory-subtitle { + color: #fff; + font-size: 2rem; + margin: 0.5rem 0 1rem; + position: relative; + z-index: 1; +} + +/* “you are a coding master!” */ +.victory-cta { + color: #fff; + font-size: 1.25rem; + margin: 0; + position: relative; + z-index: 1; +}