{
))}
{/* Render power-ups */}
- {gameStore.powerUps.map((powerUp) => (
+ {powerUps.map((powerUp) => (
{
- const { player, score, level, timePlayed } = useGameStore();
+ const player = useGameStore((state) => state.player);
+ const score = useGameStore((state) => state.score);
+ const level = useGameStore((state) => state.level);
+ const timePlayed = useGameStore((state) => state.timePlayed);
+ const highScores = useGameStore((state) => state.highScores);
const formatTime = (ms: number) => {
const seconds = Math.floor(ms / 1000);
@@ -11,11 +14,22 @@ export const GameHUD: React.FC = () => {
return `${minutes}:${(seconds % 60).toString().padStart(2, "0")}`;
};
+ const bestScore = highScores.length > 0 ? Math.max(...highScores) : 0;
+
+ const getPowerUpIcon = (type: string) => {
+ switch (type) {
+ case "SPEED":
+ return
;
+ case "SHIELD":
+ return
;
+ default:
+ return
;
+ }
+ };
+
return (
- {/* Left section - Health and PowerUps */}
- {/* Health bar */}
{
style={{ width: `${player.health}%` }}
/>
+
+ {player.health}%
+
- {/* Active power-ups */}
-
- {player.powerUps.map((powerUp) => (
-
-
-
+ {player.powerUps.length > 0 && (
+
+ {player.powerUps.map((powerUp) => (
+
+ {getPowerUpIcon(powerUp.type)}
+ {powerUp.type}
-
- ))}
-
+ ))}
+
+ )}
- {/* Center - Score and Level */}
-
+
Level {level}
@@ -62,7 +78,6 @@ export const GameHUD: React.FC = () => {
- {/* Right section - Time and High Score */}
@@ -70,12 +85,7 @@ export const GameHUD: React.FC = () => {
-
- Best:{" "}
- {Math.max(
- ...useGameStore.getState().highScores,
- ).toLocaleString()}
-
+ Best: {bestScore.toLocaleString()}
diff --git a/src/games/fox-adventure/components/GameOverlay.tsx b/src/games/fox-adventure/components/GameOverlay.tsx
old mode 100644
new mode 100755
diff --git a/src/games/fox-adventure/components/Player.tsx b/src/games/fox-adventure/components/Player.tsx
old mode 100644
new mode 100755
diff --git a/src/games/fox-adventure/hooks/useGameControls.ts b/src/games/fox-adventure/hooks/useGameControls.ts
old mode 100644
new mode 100755
index 4f8830e..c615cf6
--- a/src/games/fox-adventure/hooks/useGameControls.ts
+++ b/src/games/fox-adventure/hooks/useGameControls.ts
@@ -2,46 +2,45 @@ import { useEffect } from "react";
import useGameStore from "../state/gameStore";
export const useGameControls = () => {
- const gameStore = useGameStore();
-
useEffect(() => {
const keys = new Set
();
const handleKeyDown = (e: KeyboardEvent) => {
- keys.add(e.key);
+ keys.add(e.key.toLowerCase());
if (e.key === "Escape") {
- if (gameStore.gameStatus === "PLAYING") {
- gameStore.pauseGame();
- } else if (gameStore.gameStatus === "PAUSED") {
- gameStore.resumeGame();
+ const state = useGameStore.getState();
+ if (state.gameStatus === "PLAYING") {
+ state.pauseGame();
+ } else if (state.gameStatus === "PAUSED") {
+ state.resumeGame();
}
}
};
const handleKeyUp = (e: KeyboardEvent) => {
- keys.delete(e.key);
+ keys.delete(e.key.toLowerCase());
};
const updatePlayerMovement = () => {
- if (gameStore.gameStatus !== "PLAYING") return;
+ const state = useGameStore.getState();
+ if (state.gameStatus !== "PLAYING") return;
const direction = { x: 0, y: 0 };
- if (keys.has("ArrowUp") || keys.has("w")) direction.y -= 1;
- if (keys.has("ArrowDown") || keys.has("s")) direction.y += 1;
- if (keys.has("ArrowLeft") || keys.has("a")) direction.x -= 1;
- if (keys.has("ArrowRight") || keys.has("d")) direction.x += 1;
+ if (keys.has("arrowup") || keys.has("w")) direction.y -= 1;
+ if (keys.has("arrowdown") || keys.has("s")) direction.y += 1;
+ if (keys.has("arrowleft") || keys.has("a")) direction.x -= 1;
+ if (keys.has("arrowright") || keys.has("d")) direction.x += 1;
if (direction.x !== 0 || direction.y !== 0) {
- // Normalize diagonal movement
const magnitude = Math.sqrt(
direction.x * direction.x + direction.y * direction.y,
);
direction.x /= magnitude;
direction.y /= magnitude;
- gameStore.movePlayer(direction);
+ state.movePlayer(direction);
}
};
diff --git a/src/games/fox-adventure/hooks/useGameLoop.ts b/src/games/fox-adventure/hooks/useGameLoop.ts
old mode 100644
new mode 100755
index 2ec9c8f..b67f39d
--- a/src/games/fox-adventure/hooks/useGameLoop.ts
+++ b/src/games/fox-adventure/hooks/useGameLoop.ts
@@ -4,63 +4,36 @@ import useGameStore from "../state/gameStore";
export const useGameLoop = () => {
const frameRef = useRef();
const lastUpdateRef = useRef(0);
- const lastSpawnRef = useRef(0);
- const gameStore = useGameStore();
+ const lastCollectibleSpawnRef = useRef(0);
+ const lastEnemySpawnRef = useRef(0);
+ const lastPowerUpSpawnRef = useRef(0);
useEffect(() => {
- const spawnCollectible = () => {
- const now = Date.now();
- if (now - lastSpawnRef.current < 2000) return; // Spawn every 2 seconds
-
- lastSpawnRef.current = now;
- const collectible: any = {
- id: `collectible-${now}`,
- type: Math.random() > 0.8 ? "GEM" : "STAR",
- value: Math.random() > 0.8 ? 10 : 5,
- position: {
- x: Math.random() * 90 + 5,
- y: Math.random() * 90 + 5,
- },
- };
-
- gameStore.collectibles.push(collectible);
- };
-
const gameLoop = (timestamp: number) => {
if (!lastUpdateRef.current) lastUpdateRef.current = timestamp;
const deltaTime = timestamp - lastUpdateRef.current;
- if (gameStore.gameStatus === "PLAYING") {
- // Update entities
- gameStore.updateEnemies(deltaTime);
+ const state = useGameStore.getState();
- // Spawn collectibles
- spawnCollectible();
+ if (state.gameStatus === "PLAYING") {
+ state.updateTimePlayed(deltaTime);
+ state.updateEnemies();
+ state.checkCollisions();
- // Check collisions
- const { player, enemies, collectibles } = gameStore;
+ if (timestamp - lastCollectibleSpawnRef.current > 1500) {
+ state.spawnCollectible();
+ lastCollectibleSpawnRef.current = timestamp;
+ }
- // Enemy collisions
- enemies.forEach((enemy) => {
- const dx = player.position.x - enemy.position.x;
- const dy = player.position.y - enemy.position.y;
- const distance = Math.sqrt(dx * dx + dy * dy);
+ if (timestamp - lastEnemySpawnRef.current > 4000) {
+ state.spawnEnemy();
+ lastEnemySpawnRef.current = timestamp;
+ }
- if (distance < 5 && !player.isInvincible) {
- gameStore.takeDamage(20);
- }
- });
-
- // Collectible collisions
- collectibles.forEach((collectible) => {
- const dx = player.position.x - collectible.position.x;
- const dy = player.position.y - collectible.position.y;
- const distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance < 5) {
- gameStore.collectItem(collectible.id);
- }
- });
+ if (timestamp - lastPowerUpSpawnRef.current > 8000) {
+ state.spawnPowerUp();
+ lastPowerUpSpawnRef.current = timestamp;
+ }
}
lastUpdateRef.current = timestamp;
diff --git a/src/games/fox-adventure/state/gameStore.ts b/src/games/fox-adventure/state/gameStore.ts
old mode 100644
new mode 100755
index c69b788..7ef32e4
--- a/src/games/fox-adventure/state/gameStore.ts
+++ b/src/games/fox-adventure/state/gameStore.ts
@@ -1,11 +1,19 @@
import { create } from "zustand";
-import type { GameState, Position } from "@/types/game";
+import type {
+ GameState,
+ Position,
+ Collectible,
+ Enemy,
+ PowerUp,
+} from "@/types/game";
+
+const COLLISION_DISTANCE = 5;
const useGameStore = create((set, get) => ({
player: {
position: { x: 50, y: 50 },
health: 100,
- speed: 5,
+ speed: 0.8,
powerUps: [],
isInvincible: false,
hasKey: false,
@@ -16,7 +24,7 @@ const useGameStore = create((set, get) => ({
score: 0,
level: 1,
gameStatus: "MENU",
- highScores: [],
+ highScores: [0],
timePlayed: 0,
movePlayer: (direction: Position) => {
@@ -26,16 +34,16 @@ const useGameStore = create((set, get) => ({
...player,
position: {
x: Math.max(
- 0,
+ 2,
Math.min(
- 100,
+ 98,
player.position.x + direction.x * player.speed,
),
),
y: Math.max(
- 0,
+ 2,
Math.min(
- 100,
+ 98,
player.position.y + direction.y * player.speed,
),
),
@@ -46,20 +54,38 @@ const useGameStore = create((set, get) => ({
updateEnemies: () => {
const { enemies, player } = get();
+ if (enemies.length === 0) return;
+
const updatedEnemies = enemies.map((enemy) => {
const dx = player.position.x - enemy.position.x;
const dy = player.position.y - enemy.position.y;
const distance = Math.sqrt(dx * dx + dy * dy);
+ if (distance === 0) return enemy;
+
+ const newDirection = {
+ x: dx / distance,
+ y: dy / distance,
+ };
+
return {
...enemy,
- direction: {
- x: dx / distance,
- y: dy / distance,
- },
+ direction: newDirection,
position: {
- x: enemy.position.x + enemy.direction.x * enemy.speed,
- y: enemy.position.y + enemy.direction.y * enemy.speed,
+ x: Math.max(
+ 0,
+ Math.min(
+ 100,
+ enemy.position.x + newDirection.x * enemy.speed,
+ ),
+ ),
+ y: Math.max(
+ 0,
+ Math.min(
+ 100,
+ enemy.position.y + newDirection.y * enemy.speed,
+ ),
+ ),
},
};
});
@@ -79,17 +105,35 @@ const useGameStore = create((set, get) => ({
},
takeDamage: (amount: number) => {
- const { player, gameStatus } = get();
+ const { player, gameStatus, score, highScores } = get();
if (player.isInvincible) return;
- const newHealth = player.health - amount;
+ const newHealth = Math.max(0, player.health - amount);
+ const isGameOver = newHealth <= 0;
+
set({
player: {
...player,
health: newHealth,
+ isInvincible: true,
},
- gameStatus: newHealth <= 0 ? "GAME_OVER" : gameStatus,
+ gameStatus: isGameOver ? "GAME_OVER" : gameStatus,
+ highScores: isGameOver
+ ? [...highScores, score].sort((a, b) => b - a).slice(0, 5)
+ : highScores,
});
+
+ if (!isGameOver) {
+ setTimeout(() => {
+ const currentPlayer = get().player;
+ set({
+ player: {
+ ...currentPlayer,
+ isInvincible: false,
+ },
+ });
+ }, 1500);
+ }
},
activatePowerUp: (powerUpId: string) => {
@@ -97,24 +141,38 @@ const useGameStore = create((set, get) => ({
const powerUp = powerUps.find((p) => p.id === powerUpId);
if (!powerUp) return;
+ const updatedPlayer = {
+ ...player,
+ powerUps: [...player.powerUps, powerUp],
+ };
+
+ if (powerUp.type === "SHIELD") {
+ updatedPlayer.isInvincible = true;
+ } else if (powerUp.type === "SPEED") {
+ updatedPlayer.speed = player.speed * 1.5;
+ }
+
set({
- player: {
- ...player,
- powerUps: [...player.powerUps, powerUp],
- },
+ player: updatedPlayer,
powerUps: powerUps.filter((p) => p.id !== powerUpId),
});
setTimeout(() => {
const currentPlayer = get().player;
- set({
- player: {
- ...currentPlayer,
- powerUps: currentPlayer.powerUps.filter(
- (p) => p.id !== powerUp.id,
- ),
- },
- });
+ const resetPlayer = {
+ ...currentPlayer,
+ powerUps: currentPlayer.powerUps.filter(
+ (p) => p.id !== powerUp.id,
+ ),
+ };
+
+ if (powerUp.type === "SHIELD") {
+ resetPlayer.isInvincible = false;
+ } else if (powerUp.type === "SPEED") {
+ resetPlayer.speed = 0.8;
+ }
+
+ set({ player: resetPlayer });
}, powerUp.duration);
},
@@ -123,7 +181,7 @@ const useGameStore = create((set, get) => ({
player: {
position: { x: 50, y: 50 },
health: 100,
- speed: 5,
+ speed: 0.8,
powerUps: [],
isInvincible: false,
hasKey: false,
@@ -139,6 +197,136 @@ const useGameStore = create((set, get) => ({
pauseGame: () => set({ gameStatus: "PAUSED" }),
resumeGame: () => set({ gameStatus: "PLAYING" }),
+
+ spawnCollectible: () => {
+ const { collectibles } = get();
+ if (collectibles.length >= 10) return;
+
+ const isGem = Math.random() > 0.7;
+ const collectible: Collectible = {
+ id: `collectible-${Date.now()}-${Math.random()}`,
+ type: isGem ? "GEM" : "STAR",
+ value: isGem ? 25 : 10,
+ position: {
+ x: Math.random() * 80 + 10,
+ y: Math.random() * 80 + 10,
+ },
+ };
+
+ set({ collectibles: [...collectibles, collectible] });
+ },
+
+ spawnEnemy: () => {
+ const { enemies, level } = get();
+ const maxEnemies = Math.min(3 + level, 8);
+ if (enemies.length >= maxEnemies) return;
+
+ const side = Math.floor(Math.random() * 4);
+ let x: number, y: number;
+
+ switch (side) {
+ case 0:
+ x = Math.random() * 100;
+ y = 0;
+ break;
+ case 1:
+ x = 100;
+ y = Math.random() * 100;
+ break;
+ case 2:
+ x = Math.random() * 100;
+ y = 100;
+ break;
+ default:
+ x = 0;
+ y = Math.random() * 100;
+ break;
+ }
+
+ const enemyTypes: Array<"WOLF" | "OWL" | "HUNTER"> = [
+ "WOLF",
+ "OWL",
+ "HUNTER",
+ ];
+ const enemy: Enemy = {
+ id: `enemy-${Date.now()}-${Math.random()}`,
+ type: enemyTypes[Math.floor(Math.random() * enemyTypes.length)],
+ position: { x, y },
+ direction: { x: 0, y: 0 },
+ speed: 0.15 + Math.random() * 0.1 + level * 0.02,
+ };
+
+ set({ enemies: [...enemies, enemy] });
+ },
+
+ spawnPowerUp: () => {
+ const { powerUps } = get();
+ if (powerUps.length >= 2) return;
+
+ const types: Array<"SPEED" | "SHIELD" | "MAGNET"> = [
+ "SPEED",
+ "SHIELD",
+ "MAGNET",
+ ];
+ const powerUp: PowerUp = {
+ id: `powerup-${Date.now()}-${Math.random()}`,
+ type: types[Math.floor(Math.random() * types.length)],
+ duration: 5000,
+ position: {
+ x: Math.random() * 80 + 10,
+ y: Math.random() * 80 + 10,
+ },
+ };
+
+ set({ powerUps: [...powerUps, powerUp] });
+ },
+
+ updateTimePlayed: (delta: number) => {
+ const { timePlayed, score, level } = get();
+ const newTime = timePlayed + delta;
+
+ const newLevel = Math.floor(score / 100) + 1;
+
+ set({
+ timePlayed: newTime,
+ level: Math.max(level, newLevel),
+ });
+ },
+
+ checkCollisions: () => {
+ const { player, enemies, collectibles, powerUps } = get();
+ const store = get();
+
+ enemies.forEach((enemy) => {
+ const dx = player.position.x - enemy.position.x;
+ const dy = player.position.y - enemy.position.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < COLLISION_DISTANCE) {
+ store.takeDamage(20);
+ }
+ });
+
+ collectibles.forEach((collectible) => {
+ const dx = player.position.x - collectible.position.x;
+ const dy = player.position.y - collectible.position.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < COLLISION_DISTANCE) {
+ store.collectItem(collectible.id);
+ }
+ });
+
+ powerUps.forEach((powerUp) => {
+ const dx = player.position.x - powerUp.position.x;
+ const dy = player.position.y - powerUp.position.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance < COLLISION_DISTANCE) {
+ store.activatePowerUp(powerUp.id);
+ }
+ });
+ },
}));
export default useGameStore;
diff --git a/src/hooks/useGithubRepos.tsx b/src/hooks/useGithubRepos.tsx
old mode 100644
new mode 100755
index 9208e21..b8aed28
--- a/src/hooks/useGithubRepos.tsx
+++ b/src/hooks/useGithubRepos.tsx
@@ -10,7 +10,7 @@ const useGithubRepos = () => {
const fetchRepos = async () => {
try {
const response = await fetch(
- "https://api.github.com/users/EndofTimee/repos?sort=updated",
+ "https://api.github.com/users/System-End/repos?sort=updated",
);
if (!response.ok) {
throw new Error("Failed to fetch repositories");
diff --git a/src/index.tsx b/src/index.tsx
old mode 100644
new mode 100755
diff --git a/src/logo.svg b/src/logo.svg
old mode 100644
new mode 100755
diff --git a/src/pages/APCSPPage.tsx b/src/pages/APCSPPage.tsx
old mode 100644
new mode 100755
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
old mode 100644
new mode 100755
diff --git a/src/pages/ProjectsPage.tsx b/src/pages/ProjectsPage.tsx
old mode 100644
new mode 100755
diff --git a/src/reportWebVitals.tsx b/src/reportWebVitals.tsx
old mode 100644
new mode 100755
diff --git a/src/styles/App.css b/src/styles/App.css
old mode 100644
new mode 100755
diff --git a/src/styles/EndOSBootAnimation.css b/src/styles/EndOSBootAnimation.css
old mode 100644
new mode 100755
index 90a290d..c4a9648
--- a/src/styles/EndOSBootAnimation.css
+++ b/src/styles/EndOSBootAnimation.css
@@ -490,6 +490,7 @@
font-size: 14px;
color: #8be9fd;
margin-top: 20px;
+ text-align: center;
}
/* Skip button - Enhanced with animation and more prominence */
diff --git a/src/styles/FoxCard.css b/src/styles/FoxCard.css
old mode 100644
new mode 100755
diff --git a/src/styles/GithubRepos.css b/src/styles/GithubRepos.css
old mode 100644
new mode 100755
diff --git a/src/styles/LoadingFox.css b/src/styles/LoadingFox.css
old mode 100644
new mode 100755
diff --git a/src/styles/ThemeToggle.css b/src/styles/ThemeToggle.css
old mode 100644
new mode 100755
diff --git a/src/styles/animations.css b/src/styles/animations.css
old mode 100644
new mode 100755
diff --git a/src/styles/base.css b/src/styles/base.css
old mode 100644
new mode 100755
diff --git a/src/styles/cursor.css b/src/styles/cursor.css
old mode 100644
new mode 100755
diff --git a/src/styles/cursor/default.svg b/src/styles/cursor/default.svg
old mode 100644
new mode 100755
diff --git a/src/styles/cursor/paw.svg b/src/styles/cursor/paw.svg
old mode 100644
new mode 100755
diff --git a/src/styles/cursor/tail-loading.svg b/src/styles/cursor/tail-loading.svg
old mode 100644
new mode 100755
diff --git a/src/styles/game.css b/src/styles/game.css
old mode 100644
new mode 100755
diff --git a/src/styles/index.css b/src/styles/index.css
old mode 100644
new mode 100755
diff --git a/src/styles/pages.css b/src/styles/pages.css
old mode 100644
new mode 100755
diff --git a/src/styles/protofox-theme.css b/src/styles/protofox-theme.css
old mode 100644
new mode 100755
diff --git a/src/styles/theme.css b/src/styles/theme.css
old mode 100644
new mode 100755
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
old mode 100644
new mode 100755
diff --git a/src/types/game.ts b/src/types/game.ts
old mode 100644
new mode 100755
index 3e0c361..dae8ac8
--- a/src/types/game.ts
+++ b/src/types/game.ts
@@ -47,11 +47,16 @@ export interface GameState {
// Actions
movePlayer: (direction: Position) => void;
- updateEnemies: (deltaTime?: number) => void;
+ updateEnemies: () => void;
collectItem: (itemId: string) => void;
takeDamage: (amount: number) => void;
activatePowerUp: (powerUpId: string) => void;
startNewGame: () => void;
pauseGame: () => void;
resumeGame: () => void;
+ spawnCollectible: () => void;
+ spawnEnemy: () => void;
+ spawnPowerUp: () => void;
+ updateTimePlayed: (delta: number) => void;
+ checkCollisions: () => void;
}
diff --git a/src/types/index.ts b/src/types/index.ts
old mode 100644
new mode 100755
diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts
old mode 100644
new mode 100755
diff --git a/tailwind.config.js b/tailwind.config.js
old mode 100644
new mode 100755
diff --git a/tsconfig.json b/tsconfig.json
old mode 100644
new mode 100755
diff --git a/tsconfig.node.json b/tsconfig.node.json
old mode 100644
new mode 100755
diff --git a/tsconfig.worker.json b/tsconfig.worker.json
old mode 100644
new mode 100755
diff --git a/vite.config.ts b/vite.config.ts
old mode 100644
new mode 100755
index ebb19be..e58d81c
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
-import babel from 'vite-plugin-babel';
import path from "path";
export default defineConfig({
- plugins: [
- react(),
- babel({
- babelConfig: {
- plugins: ['babel-plugin-react-compiler'],
- },
- }),],
+ plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
diff --git a/wrangler.toml b/wrangler.toml
old mode 100644
new mode 100755