- Game state with localStorage save/load + reset (type DELETE to confirm) - Alpine.js + Tailwind CSS + Lucide UI overlay (HUD bar, shop modal, settings, toasts) - Economy: fish prices, tank tier costs/capacities, rarity multipliers, sell value formula - Genetic system: hue/saturation/size/speed/pattern/rarity/gender + breeding inheritance - Fish selection via raycaster (click fish = select, click empty = drop food) - Buy/Sell/Breed/Upgrade actions wired to game state
This commit is contained in:
+207
-46
@@ -1,3 +1,4 @@
|
||||
import "./style.css";
|
||||
import * as THREE from "three";
|
||||
import { createTank } from "./scene/Tank";
|
||||
import { createWater } from "./scene/Water";
|
||||
@@ -7,56 +8,69 @@ import { createDecor, type DecorSpec } from "./scene/Decor";
|
||||
import { createParallaxCamera } from "./scene/Camera";
|
||||
import { createBubbles } from "./scene/Bubbles";
|
||||
import { createFood } from "./scene/Food";
|
||||
import { createDefaultState, saveGame, loadGame, resetGame } from "./game/state";
|
||||
import type { GameState, FishData, FishSpecies, Genetics } from "./game/types";
|
||||
import { RARITY_MULT } from "./game/types";
|
||||
import { syncFromGameState, pushToast, getUIState } from "./game/store";
|
||||
import { setGameActions, startAlpine } from "./ui";
|
||||
import { FISH_PRICES, SPECIES_RARITY_DIST, TANK_TIER_COSTS, TANK_TIER_DIMS, getFishSellValue, getFishValueBreakdown } from "./game/economy";
|
||||
import { generateGenetics, generateFishName, breedGenetics } from "./game/genetics";
|
||||
|
||||
// --- Game State ---
|
||||
let gameState: GameState = loadGame() || createDefaultState();
|
||||
saveGame(gameState);
|
||||
|
||||
// --- Canvas & Renderer ---
|
||||
const canvas = document.querySelector<HTMLCanvasElement>("#aquarium");
|
||||
if (!canvas) {
|
||||
throw new Error('Canvas element with id "aquarium" not found');
|
||||
}
|
||||
|
||||
// Renderer
|
||||
if (!canvas) throw new Error('Canvas "aquarium" not found');
|
||||
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
|
||||
// Scene
|
||||
// --- Scene ---
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0a0f);
|
||||
|
||||
// Camera — frames the tank, positioned slightly above its center
|
||||
const camera = new THREE.PerspectiveCamera(
|
||||
50,
|
||||
window.innerWidth / window.innerHeight,
|
||||
0.1,
|
||||
100
|
||||
);
|
||||
camera.position.set(0, 1.5, 6);
|
||||
camera.lookAt(0, 1.2, 0);
|
||||
// --- Camera ---
|
||||
const tankDim = TANK_TIER_DIMS[gameState.tankTier];
|
||||
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
|
||||
camera.position.set(0, tankDim.h / 2, tankDim.camZ);
|
||||
camera.lookAt(0, tankDim.h * 0.5, 0);
|
||||
|
||||
// Scene content
|
||||
// --- Scene Content ---
|
||||
setupLighting(scene, renderer);
|
||||
createTank(scene);
|
||||
const water = createWater(scene);
|
||||
|
||||
// Food — pellets that drop from above; fish seek and eat them.
|
||||
const food = createFood(scene);
|
||||
|
||||
// Fish — GLB models with swim animations + wandering AI + food seeking.
|
||||
const fishSpecs: FishSpec[] = [
|
||||
// Tropical (maya's-aquarium-3d)
|
||||
{ url: "models/angelfish.glb", targetLength: 0.55, speed: [0.25, 0.45] },
|
||||
{ url: "models/angelfish.glb", targetLength: 0.5, speed: [0.25, 0.45] },
|
||||
{ url: "models/goldfish.glb", targetLength: 0.45, speed: [0.35, 0.6] },
|
||||
{ url: "models/goldfish.glb", targetLength: 0.4, speed: [0.35, 0.6] },
|
||||
{ url: "models/guppy.glb", targetLength: 0.4, speed: [0.4, 0.7] },
|
||||
{ url: "models/guppy.glb", targetLength: 0.35, speed: [0.4, 0.7] },
|
||||
// Cute fish (Quaternius, CC0)
|
||||
{ url: "models/quaternius/glb/Fish1.glb", targetLength: 0.5, speed: [0.4, 0.7], orient: { y: Math.PI / 2 } },
|
||||
{ url: "models/quaternius/glb/Fish1.glb", targetLength: 0.45, speed: [0.4, 0.7], orient: { y: Math.PI / 2 } },
|
||||
{ url: "models/quaternius/glb/Fish2.glb", targetLength: 0.6, speed: [0.3, 0.55], orient: { y: Math.PI / 2 } },
|
||||
{ url: "models/quaternius/glb/Fish3.glb", targetLength: 0.55, speed: [0.35, 0.6], orient: { y: Math.PI / 2 } },
|
||||
];
|
||||
const fishSchool = createGLTFishSchool(scene, fishSpecs, food);
|
||||
// --- Fish specs from game state ---
|
||||
function isQuaternius(sp: FishSpecies): boolean {
|
||||
return sp === "fish1" || sp === "fish2" || sp === "fish3";
|
||||
}
|
||||
|
||||
// Decor — static plants and rocks on the gravel floor (y ~ 0.05).
|
||||
function getSpeciesUrl(sp: FishSpecies): string {
|
||||
const urls: Record<FishSpecies, string> = {
|
||||
angelfish: "models/angelfish.glb",
|
||||
goldfish: "models/goldfish.glb",
|
||||
guppy: "models/guppy.glb",
|
||||
fish1: "models/quaternius/glb/Fish1.glb",
|
||||
fish2: "models/quaternius/glb/Fish2.glb",
|
||||
fish3: "models/quaternius/glb/Fish3.glb",
|
||||
};
|
||||
return urls[sp];
|
||||
}
|
||||
|
||||
function getFishSpecs(): FishSpec[] {
|
||||
return gameState.fish.map((f) => ({
|
||||
url: getSpeciesUrl(f.species),
|
||||
targetLength: f.genetics.sizeMult * 0.5,
|
||||
speed: [0.3 * f.genetics.speedMult, 0.7 * f.genetics.speedMult],
|
||||
orient: isQuaternius(f.species) ? { y: Math.PI / 2 } : undefined,
|
||||
}));
|
||||
}
|
||||
|
||||
const fishSchool = createGLTFishSchool(scene, getFishSpecs(), food);
|
||||
|
||||
// --- Decor ---
|
||||
const decorSpecs: DecorSpec[] = [
|
||||
{ url: "models/plant0.glb", x: -1.4, z: -0.9, targetSize: 1.4, rotationY: 0.4 },
|
||||
{ url: "models/plant1.glb", x: 1.3, z: -0.8, targetSize: 1.1, rotationY: -0.3 },
|
||||
@@ -66,36 +80,183 @@ const decorSpecs: DecorSpec[] = [
|
||||
];
|
||||
createDecor(scene, decorSpecs);
|
||||
|
||||
// Bubbles — rising from air stones near the plants.
|
||||
const bubbles = createBubbles(scene);
|
||||
|
||||
const parallax = createParallaxCamera(camera);
|
||||
|
||||
// Mouse tracking (normalized to -1..1)
|
||||
// --- Mouse / Raycaster ---
|
||||
let mouseX = 0, mouseY = 0;
|
||||
const raycaster = new THREE.Raycaster();
|
||||
const mouseNDC = new THREE.Vector2();
|
||||
|
||||
window.addEventListener("mousemove", (e) => {
|
||||
mouseX = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouseY = (e.clientY / window.innerHeight) * 2 - 1;
|
||||
});
|
||||
|
||||
// Click to drop food.
|
||||
window.addEventListener("click", () => {
|
||||
window.addEventListener("click", (e) => {
|
||||
// Don't process clicks on UI elements
|
||||
if (e.target !== canvas) return;
|
||||
|
||||
mouseNDC.x = (e.clientX / window.innerWidth) * 2 - 1;
|
||||
mouseNDC.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
||||
raycaster.setFromCamera(mouseNDC, camera);
|
||||
|
||||
const fishGroup = fishSchool.group;
|
||||
const intersects = raycaster.intersectObjects(fishGroup.children, true);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
let obj: THREE.Object3D | null = intersects[0].object;
|
||||
while (obj && obj.parent !== fishGroup) {
|
||||
obj = obj.parent;
|
||||
}
|
||||
if (obj) {
|
||||
const idx = fishGroup.children.indexOf(obj);
|
||||
if (idx >= 0 && idx < gameState.fish.length) {
|
||||
getUIState().selectedFish = gameState.fish[idx];
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// No fish clicked — drop food
|
||||
food.dropFood(4);
|
||||
});
|
||||
|
||||
// Resize handling
|
||||
// --- Cooldown tracking ---
|
||||
const cooldowns: Record<string, number> = {};
|
||||
|
||||
// --- Game Actions ---
|
||||
setGameActions({
|
||||
getState: () => gameState,
|
||||
getFishById: (id) => gameState.fish.find((f) => f.id === id) || null,
|
||||
isAdult: (f) => f.age >= 72,
|
||||
inCooldown: (id) => cooldowns[id] !== undefined && Date.now() < cooldowns[id],
|
||||
|
||||
onBuyFish: (species: FishSpecies, genetics: Genetics) => {
|
||||
const price = FISH_PRICES[species];
|
||||
if (gameState.money < price) return;
|
||||
if (gameState.fish.length >= TANK_TIER_DIMS[gameState.tankTier].cap) return;
|
||||
gameState.money -= price;
|
||||
const name = generateFishName(species, genetics);
|
||||
const fish: FishData = {
|
||||
id: `fish_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
|
||||
species,
|
||||
name,
|
||||
genetics,
|
||||
age: 0,
|
||||
x: 0, y: 1, z: 0,
|
||||
};
|
||||
gameState.fish.push(fish);
|
||||
saveGame(gameState);
|
||||
syncFromGameState(gameState);
|
||||
if (genetics.rarity === "epic" || genetics.rarity === "legendary") {
|
||||
pushToast(`🌟 ${genetics.rarity.toUpperCase()} ${name}!`, "rare");
|
||||
} else {
|
||||
pushToast(`+${name} (${genetics.rarity})`, "success");
|
||||
}
|
||||
console.log("[GAME] Bought:", name, "Rarity:", genetics.rarity);
|
||||
},
|
||||
|
||||
onSellFish: (fishId: string) => {
|
||||
const idx = gameState.fish.findIndex((f) => f.id === fishId);
|
||||
if (idx < 0) return;
|
||||
if (gameState.fish.length <= 1) {
|
||||
pushToast("Can't sell your last fish!", "warning");
|
||||
return;
|
||||
}
|
||||
const fish = gameState.fish[idx];
|
||||
const value = getFishSellValue(fish);
|
||||
gameState.money += value;
|
||||
gameState.fish.splice(idx, 1);
|
||||
delete cooldowns[fishId];
|
||||
saveGame(gameState);
|
||||
syncFromGameState(gameState);
|
||||
pushToast(`+$${value} — Sold ${fish.name}`, "success");
|
||||
console.log("[GAME] Sold:", fish.name, "for", value);
|
||||
},
|
||||
|
||||
onBreed: (fishA: FishData, fishB: FishData) => {
|
||||
if (fishA.species !== fishB.species) return;
|
||||
if (fishA.genetics.gender === fishB.genetics.gender) {
|
||||
pushToast("Need male + female to breed!", "warning");
|
||||
return;
|
||||
}
|
||||
if (fishA.age < 72 || fishB.age < 72) {
|
||||
pushToast("Fish must be adults to breed!", "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
// Set cooldowns
|
||||
cooldowns[fishA.id] = Date.now() + 60000;
|
||||
cooldowns[fishB.id] = Date.now() + 60000;
|
||||
|
||||
// Breed 1-3 offspring
|
||||
const count = 1 + Math.floor(Math.random() * 3);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const genetics = breedGenetics(fishA.genetics, fishB.genetics);
|
||||
const name = generateFishName(fishA.species, genetics);
|
||||
const baby: FishData = {
|
||||
id: `fish_${Date.now()}_${i}_${Math.random().toString(36).slice(2, 8)}`,
|
||||
species: fishA.species,
|
||||
name,
|
||||
genetics,
|
||||
age: 0,
|
||||
x: 0, y: 1, z: 0,
|
||||
};
|
||||
gameState.fish.push(baby);
|
||||
}
|
||||
|
||||
// Breeding bonus: 10% of combined parent value
|
||||
const bonus = Math.round((getFishSellValue(fishA) + getFishSellValue(fishB)) * 0.1);
|
||||
gameState.money += bonus;
|
||||
|
||||
saveGame(gameState);
|
||||
syncFromGameState(gameState);
|
||||
pushToast(`🐣 ${count} baby ${fishA.species} born! (+$${bonus})`, "success");
|
||||
console.log("[GAME] Breeding:", fishA.name, "x", fishB.name, "→", count, "babies");
|
||||
},
|
||||
|
||||
onUpgradeTank: () => {
|
||||
const nextTier = gameState.tankTier + 1;
|
||||
if (nextTier > 3) return;
|
||||
const cost = TANK_TIER_COSTS[nextTier];
|
||||
if (gameState.money < cost) return;
|
||||
gameState.money -= cost;
|
||||
gameState.tankTier = nextTier;
|
||||
saveGame(gameState);
|
||||
syncFromGameState(gameState);
|
||||
const names = ["Small", "Medium", "Large", "XL"];
|
||||
pushToast(`🔬 Tank upgraded to ${names[nextTier]}!`, "success");
|
||||
console.log("[GAME] Tank upgraded to tier", nextTier);
|
||||
},
|
||||
|
||||
onReset: () => {
|
||||
resetGame();
|
||||
window.location.reload();
|
||||
},
|
||||
});
|
||||
|
||||
// --- Start Alpine & sync ---
|
||||
startAlpine();
|
||||
syncFromGameState(gameState);
|
||||
|
||||
// --- Resize ---
|
||||
function resize(): void {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
camera.aspect = width / height;
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(width, height);
|
||||
renderer.setSize(w, h);
|
||||
}
|
||||
resize();
|
||||
window.addEventListener("resize", resize);
|
||||
|
||||
// Render loop
|
||||
// --- Auto-save ---
|
||||
setInterval(() => {
|
||||
saveGame(gameState);
|
||||
}, 30000);
|
||||
|
||||
// --- Render Loop ---
|
||||
const startTime = performance.now();
|
||||
let lastFrameTime = performance.now();
|
||||
function animate(): void {
|
||||
|
||||
Reference in New Issue
Block a user