Initial commit: Tortugotchi sea turtle conservation PWA
Vanilla HTML/CSS/JS Tamagotchi-style game with three species (green, loggerhead, leatherback), persistent idle progression, hazard QTEs (sharks, boats, ghost nets, tourists), and offline PWA support via service worker. Includes README with cited conservation resources and research.
This commit is contained in:
Joel Brock
+18
@@ -0,0 +1,18 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# OS / editor
|
||||
.DS_Store
|
||||
*.swp
|
||||
|
||||
# Local databases
|
||||
*.db
|
||||
*.db-shm
|
||||
*.db-wal
|
||||
|
||||
# Tooling / AI agent state (not part of the app)
|
||||
.claude/
|
||||
.claude-flow/
|
||||
.swarm/
|
||||
.mcp.json
|
||||
CLAUDE.md
|
||||
@@ -0,0 +1,90 @@
|
||||
# Implementation Plan - Tortugotchi (Sea Turtle PWA)
|
||||
|
||||
Create a highly polished, responsive mobile Progressive Web App (PWA) called **Tortugotchi**. The game raised awareness of sea turtle conservation by making the player responsible for nesting eggs, hatchlings, an ocean-going juvenile turtle, and protecting it from human-made and natural hazards.
|
||||
|
||||
## User Review Required
|
||||
|
||||
> [!IMPORTANT]
|
||||
> **Aesthetic Goal:** The app will use vanilla CSS with a premium glassmorphic dark UI, sunset/night gradients for the beach phase, and a bioluminescent/light-ray deep teal theme for the ocean phase. The turtle itself will be rendered as an interactive SVG containing customizable elements (custom name, facial expressions, swimming animations) rather than static or low-quality PNGs.
|
||||
|
||||
> [!NOTE]
|
||||
> **PWA Support:** The application will be a fully-functional PWA that can be installed on iOS/Android. It will include a service worker for offline play and asset caching, and support responsive viewport sizes locked to a phone aspect ratio with modern desktop padding.
|
||||
|
||||
## Proposed Changes
|
||||
|
||||
We will construct the project in the workspace `/opt/homebrew/var/www/tortugotchi`.
|
||||
|
||||
### Configuration & PWA Assets
|
||||
|
||||
#### [NEW] [manifest.json](file:///opt/homebrew/var/www/tortugotchi/manifest.json)
|
||||
- Define metadata for installation (app name: `Tortugotchi`, theme color, display mode: `standalone`).
|
||||
- Specify sizes for icons: `192x192` and `512x512`.
|
||||
|
||||
#### [NEW] [sw.js](file:///opt/homebrew/var/www/tortugotchi/sw.js)
|
||||
- A lightweight, reliable Service Worker to cache assets (`index.html`, `style.css`, `app.js`, sounds/images) for fast load speeds and true offline playability.
|
||||
|
||||
### Core Structure
|
||||
|
||||
#### [NEW] [index.html](file:///opt/homebrew/var/www/tortugotchi/index.html)
|
||||
- Define a single-page app layout with three primary game views/states managed by JavaScript:
|
||||
1. **Start Screen:** Onboarding screen explaining the conservation mission, choosing a species (e.g. Green Sea Turtle vs. Loggerhead Sea Turtle), and initiating the nest phase.
|
||||
2. **Nest & Hatchling Stage:** Interactive night beach view. Guarding the nest from crabs, birds, filling holes, turning off streetlights, and getting the hatchlings to the water.
|
||||
3. **Ocean Care Stage:** Floating deep sea environment. Feeding, playing, cleaning shell, avoiding plastic bags (mimicking jellyfish), dodging motorboats, and surviving shark encounters.
|
||||
4. **Beaching Event:** Occasional alert view. The turtle beaches, and the player must ward off ignorant selfie-seeking tourists while asserting NOAA's 10-foot boundary laws.
|
||||
- Implement HTML5 semantic elements and SEO tags (`description`, `title`, viewport adjustments).
|
||||
|
||||
#### [NEW] [style.css](file:///opt/homebrew/var/www/tortugotchi/style.css)
|
||||
- Implement a modern color system (teal, deep ocean blues, soft sandy gold, coral accent colors).
|
||||
- Use CSS Variables for theme control.
|
||||
- Apply modern CSS styling:
|
||||
- Glassmorphic panels (`backdrop-filter: blur(10px) saturate(180%)`).
|
||||
- Flex/Grid layouts optimized for mobile-first viewport dimensions (capped aspect ratios on desktop to emulate a mobile screen).
|
||||
- Swimming keyframe animations for the SVG sea turtle (flipper strokes, head bobs).
|
||||
- Floating animations for underwater debris (plastic bags, nets, jellyfish).
|
||||
- Shake effects for damage and light pulses for night hazards.
|
||||
|
||||
#### [NEW] [app.js](file:///opt/homebrew/var/www/tortugotchi/app.js)
|
||||
- Build a custom clientside Game State Machine:
|
||||
- **`STATE_START`**: Title screen, species select, instruction logs.
|
||||
- **`STATE_NEST`**: Nest health counter, hazard generator (predator crabs, deep beach holes, light distractions). Timer counts down to hatching. Hatchlings crawl to the ocean.
|
||||
- **`STATE_OCEAN`**: Core Tamagotchi care cycle. Loop monitors Stats (`Hunger`, `Happiness`, `Shell Cleanliness`, `Health`).
|
||||
- **`STATE_BEACHING`**: Triggers occasionally. Spawns tourists entering the safe zone. Tapping tourists drives them away and displays quick conservation/legal facts.
|
||||
- **Interactivity handlers**:
|
||||
- Dragging to fill holes.
|
||||
- Tapping to turn off lights/scare crabs.
|
||||
- Feeding: Seagrass/crabs (based on species) and avoiding floating plastic bags.
|
||||
- Shell cleaning: Drag-to-brush mini-game.
|
||||
- Boat Alarm: Quick-time-event "Dive" button.
|
||||
- Shark Alarm: Quick-time-event "Retract into Shell" or "Hide in Reef" button.
|
||||
- Stats decrease over time; alerts occur when status is low.
|
||||
- LocalStorage integration to save the turtle's progress (age, name, species, score).
|
||||
|
||||
### Assets Creation
|
||||
|
||||
We will generate beautiful SVG files or use the `generate_image` tool to construct a gorgeous logo/app icon (`icon-192.png` and `icon-512.png`). The primary characters and visual elements (turtle, sharks, crabs, trash, jellyfish, tourists) will be generated as custom SVG elements or inline SVGs directly inside the application files for crisp rendering, interactive state alterations, and high performance.
|
||||
|
||||
---
|
||||
|
||||
## Science & Conservation Facts Integrated
|
||||
The game will highlight the following realistic conservation elements through status warnings, events, and educational overlays:
|
||||
1. **Light Disorientation:** Artificial lights cause hatchlings to crawl inland, exhausting their energy and leaving them exposed to land predators or cars.
|
||||
2. **Marine Plastic Mimicry:** Plastic bags resemble jellyfish floating in currents. Ingesting plastic causes gut blockages and false satiety, leading to starvation.
|
||||
3. **Ghost Gear:** Discarded commercial fishing nets tangle sea turtles, preventing them from surfacing to breathe, causing drowning.
|
||||
4. **Lawful Distance:** Under the Endangered Species Act (ESA) and NOAA regulations, tourists must stay at least 10 feet (3 meters) away from sea turtles on beaches. Crowding and touching stress turtles, and flash photography disorients them.
|
||||
|
||||
---
|
||||
|
||||
## Verification Plan
|
||||
|
||||
### Automated/Code Quality Checks
|
||||
- Run `./bin/brew typecheck` (Wait, this is an empty workspace not related to Homebrew Ruby code directly, but we will make sure our JavaScript code is lint-free, follows best practices, has no syntax errors, and validates locally. If there are any Ruby tools in the repository, we can ignore them as we are creating a standalone HTML PWA).
|
||||
- Validate HTML semantics and CSS standards.
|
||||
|
||||
### Manual Verification
|
||||
- Launch a local developer server using a simple python/node server to view and play the game in the browser.
|
||||
- Verify responsive layout works seamlessly on mobile viewports (simulated Chrome responsive view) and desktop views.
|
||||
- Test PWA manifest compliance and verify the service worker registers successfully.
|
||||
- Manually play through all three stages:
|
||||
- Guarding the eggs and hatchlings.
|
||||
- Feeding the turtle, brushing shell, avoiding plastic debris, diving under boat propellers, hiding from sharks.
|
||||
- Driving selfie-seeking tourists back to the 10-foot boundary.
|
||||
@@ -0,0 +1,98 @@
|
||||
# Tortugotchi — Sea Turtle Protector
|
||||
|
||||
<p align="center">
|
||||
<img src="icon-512.png" alt="Tortugotchi logo" width="180">
|
||||
</p>
|
||||
|
||||
A Tamagotchi-style Progressive Web App that raises awareness of sea turtle conservation. Hatch a nest, raise a juvenile in the open ocean, defend it from real-world hazards (light pollution, plastic, ghost gear, boats, sharks, beachgoers), and keep it healthy long enough to grow from hatchling to adult.
|
||||
|
||||
Built as a vanilla HTML / CSS / JS PWA — no build step, installable on iOS and Android, fully playable offline.
|
||||
|
||||
## Play
|
||||
|
||||
Open [http://localhost:8000/](http://localhost:8000/) after running a static server from the project root:
|
||||
|
||||
```bash
|
||||
python3 -m http.server 8000
|
||||
```
|
||||
|
||||
Then "Add to Home Screen" (iOS) or "Install app" (Chrome/Android) for the full standalone experience.
|
||||
|
||||
## Gameplay
|
||||
|
||||
Three species — **Green**, **Loggerhead**, **Leatherback** — each with distinct appearance and a preferred playmate. Your turtle ages roughly **one day per 15 seconds** at peak health, slowing as stats decline. Progress persists across sessions via `localStorage`, and offline time is reconciled when you return.
|
||||
|
||||
| Stage | Care loop |
|
||||
|------------|-----------|
|
||||
| Nest | Scare crabs, fill holes, kill artificial lights, walk hatchlings to surf |
|
||||
| Ocean | Feed, brush shell, play with species-specific companion, dodge hazards |
|
||||
| Beaching | Hold tourists to the NOAA 10-foot boundary while the turtle rests |
|
||||
| Hazard QTEs | Brace for sharks, dive under boats, cut through ghost nets |
|
||||
|
||||
## Tech
|
||||
|
||||
- Single-page vanilla JS state machine (`app.js`)
|
||||
- Inline SVG turtle with CSS-driven species palettes and growth-stage scaling
|
||||
- Service worker (`sw.js`) with cache-first offline strategy
|
||||
- Web App Manifest with maskable icons, installable on Chromium, iOS Safari, Firefox Android, Samsung Internet
|
||||
|
||||
## Conservation Topics Modeled in the Game
|
||||
|
||||
The hazards in Tortugotchi aren't decorative — each one mirrors a documented threat to wild sea turtles:
|
||||
|
||||
1. **Light pollution and hatchling disorientation.** Hatchlings orient toward the brightest horizon, which in undisturbed beaches is moonlight on the ocean. Artificial lighting pulls them inland, where they die of exhaustion, dehydration, or predation.
|
||||
2. **Plastic mimicry.** Floating plastic bags resemble jellyfish, a primary food source for leatherbacks. Ingested plastic causes gut blockage and false satiation; necropsies regularly find plastic in dead turtles of every species.
|
||||
3. **Ghost gear entanglement.** Lost or abandoned fishing nets and lines drift for years, tangling turtles and preventing them from surfacing to breathe.
|
||||
4. **Vessel strikes.** Propeller wounds and blunt-force trauma from boats are a leading cause of injury for turtles in coastal waters.
|
||||
5. **Human disturbance on beaches.** Crowding, touching, and flash photography stress nesting and basking turtles. NOAA and the U.S. Endangered Species Act establish a minimum approach distance of **10 feet (3 meters)** in U.S. waters.
|
||||
6. **Defensive behavior.** Unlike freshwater turtles, sea turtles **cannot fully retract** into their shells. The in-game "brace" posture reflects how wild turtles actually respond — tucking the head and flippers tight against the carapace.
|
||||
|
||||
## Resources & Citations
|
||||
|
||||
Used to ground the game's mechanics, species behavior, and conservation messaging.
|
||||
|
||||
### Regulatory & Government
|
||||
|
||||
- **NOAA Fisheries — Sea Turtles.** Species profiles, threats, recovery plans, and viewing guidelines. <https://www.fisheries.noaa.gov/sea-turtles>
|
||||
- **NOAA — Sea Turtle Viewing Guidelines.** Establishes the 10-foot / 3-meter minimum approach distance and lighting guidance. <https://www.fisheries.noaa.gov/national/marine-life-distress/sea-turtle-viewing-guidelines>
|
||||
- **U.S. Fish & Wildlife Service — Sea Turtle Program.** ESA listings, nesting beach management. <https://www.fws.gov/program/sea-turtle>
|
||||
- **Endangered Species Act of 1973 (16 U.S.C. §§ 1531–1544).** Federal protection framework for all six U.S. sea turtle species. <https://www.fws.gov/law/endangered-species-act>
|
||||
- **Florida Fish and Wildlife Conservation Commission — Sea Turtle Lighting.** Practical guidance behind the in-game "turn off the lights" mechanic. <https://myfwc.com/conservation/you-conserve/lighting/>
|
||||
|
||||
### Scientific & Conservation Organizations
|
||||
|
||||
- **IUCN Red List — Marine Turtles.** Current conservation status by species (Green, Loggerhead, Leatherback, Hawksbill, Kemp's ridley, Olive ridley, Flatback). <https://www.iucnredlist.org/>
|
||||
- **IUCN Marine Turtle Specialist Group (MTSG).** Global assessments, regional management units. <https://www.iucn-mtsg.org/>
|
||||
- **Sea Turtle Conservancy.** Public education, satellite tracking, nesting beach protection. <https://conserveturtles.org/>
|
||||
- **SEE Turtles.** Conservation tourism, plastic and lighting campaigns. <https://www.seeturtles.org/>
|
||||
- **The Ocean Cleanup — Ghost Gear research.** Data on abandoned, lost, and discarded fishing gear (ALDFG). <https://theoceancleanup.com/>
|
||||
- **Global Ghost Gear Initiative.** Cross-industry effort tracking and removing lost fishing gear. <https://www.ghostgear.org/>
|
||||
|
||||
### Selected Research
|
||||
|
||||
- Schuyler, Q. A., Wilcox, C., Townsend, K. A., et al. (2016). *Risk analysis reveals global hotspots for marine debris ingestion by sea turtles.* **Global Change Biology** 22(2): 567–576. <https://doi.org/10.1111/gcb.13078>
|
||||
- Wilcox, C., Puckridge, M., Schuyler, Q. A., Townsend, K., & Hardesty, B. D. (2018). *A quantitative analysis linking sea turtle mortality and plastic debris ingestion.* **Scientific Reports** 8: 12536. <https://doi.org/10.1038/s41598-018-30038-z>
|
||||
- Witherington, B. E., & Martin, R. E. (2003). *Understanding, Assessing, and Resolving Light-Pollution Problems on Sea Turtle Nesting Beaches.* Florida Marine Research Institute Technical Report TR-2.
|
||||
- Stelfox, M., Hudgins, J., & Sweet, M. (2016). *A review of ghost gear entanglement amongst marine mammals, reptiles and elasmobranchs.* **Marine Pollution Bulletin** 111(1–2): 6–17. <https://doi.org/10.1016/j.marpolbul.2016.06.034>
|
||||
- Lutcavage, M. E., Plotkin, P., Witherington, B., & Lutz, P. L. (1997). *Human Impacts on Sea Turtle Survival.* In Lutz & Musick (eds.), *The Biology of Sea Turtles, Vol. I*, CRC Press.
|
||||
|
||||
### Species Biology References
|
||||
|
||||
- Spotila, J. R. (2004). *Sea Turtles: A Complete Guide to Their Biology, Behavior, and Conservation.* Johns Hopkins University Press.
|
||||
- Bjorndal, K. A., & Bolten, A. B. (eds., 2003). *Loggerhead Sea Turtles.* Smithsonian Institution Press.
|
||||
- **NOAA Species Pages** for in-game species:
|
||||
- Green Sea Turtle (*Chelonia mydas*): <https://www.fisheries.noaa.gov/species/green-turtle>
|
||||
- Loggerhead Sea Turtle (*Caretta caretta*): <https://www.fisheries.noaa.gov/species/loggerhead-turtle>
|
||||
- Leatherback Sea Turtle (*Dermochelys coriacea*): <https://www.fisheries.noaa.gov/species/leatherback-turtle>
|
||||
|
||||
## How You Can Help (Real World)
|
||||
|
||||
- Turn off or shield beachfront lighting during nesting season (roughly May–October in the U.S. Atlantic and Gulf).
|
||||
- Fill in holes and remove beach furniture before sunset — hatchlings get stuck.
|
||||
- Pack out all trash; cut six-pack rings and discarded line.
|
||||
- Keep 10 feet (3 m) from any wild sea turtle. Never use flash.
|
||||
- Report stranded, injured, or harassed turtles to your regional **NOAA Stranding Network** hotline.
|
||||
|
||||
## License
|
||||
|
||||
Tortugotchi is a non-commercial educational project. Cited materials remain the property of their respective authors and organizations.
|
||||
@@ -0,0 +1,73 @@
|
||||
# Walkthrough: Tortugotchi Sea Turtle Conservation PWA
|
||||
|
||||
We have successfully built and deployed the Progressive Web App (PWA) game **Tortugotchi** in the `/opt/homebrew/var/www/tortugotchi` workspace directory. The application educates players on sea turtle conservation by placing them in charge of a nest and then rearing an individual turtle.
|
||||
|
||||
## App Icon Preview
|
||||
Here is the generated application icon representing our anime-styled, cute cuddly sea turtle friend:
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Created File Architecture
|
||||
|
||||
The codebase contains the following core files:
|
||||
1. **[index.html](file:///opt/homebrew/var/www/tortugotchi/index.html)**: Main HTML structure, layout viewport, game overlay HUD screens, and conservation science modal.
|
||||
2. **[style.css](file:///opt/homebrew/var/www/tortugotchi/style.css)**: Glassmorphic UI layout design, mobile frame constraints, sunset/night sand and water gradients, and keyframe animations for characters (swimming, blinking, waddling).
|
||||
3. **[app.js](file:///opt/homebrew/var/www/tortugotchi/app.js)**: State machine controller, collision logic for floating trash, drag-and-drop recycling support, touch repelling for tourists, and LocalStorage data saving.
|
||||
4. **[manifest.json](file:///opt/homebrew/var/www/tortugotchi/manifest.json)**: PWA installation properties, orientation locks, theme coloring, and app identity.
|
||||
5. **[sw.js](file:///opt/homebrew/var/www/tortugotchi/sw.js)**: Service worker shell caching routine, enabling offline gameplay.
|
||||
6. **[icon-512.png](file:///opt/homebrew/var/www/tortugotchi/icon-512.png)** and **[icon-192.png](file:///opt/homebrew/var/www/tortugotchi/icon-192.png)**: High-resolution app launcher and splash screen icons.
|
||||
|
||||
---
|
||||
|
||||
## Gameplay Mechanics Walkthrough
|
||||
|
||||
### Phase 1: Nest & Hatchling Guarding (Beach)
|
||||
- **Objective**: Protect a nest of 20 sea turtle eggs.
|
||||
- **Hazards**:
|
||||
- **Trash (🥤, 🍼, 🍿)** blocks crawling hatchlings. The user must drag and drop the trash into the **Recycle Bin** on the bottom right.
|
||||
- **Sand Holes** trap hatchlings. Tapping them twice fills them in.
|
||||
- **Predators (Crabs 🦀, Seagulls 🦅)** attempt to eat the hatchlings. Tapping them scares them away.
|
||||
- **Streetlights 💡** confuse the hatchlings' navigation. Tapping them turns off the light pollution so hatchlings navigate towards the moonlit sea.
|
||||
- **Hatching Crawl**: During the final 20 seconds, hatchlings emerge and crawl toward the sea.
|
||||
- **Realistic Survival Rate**: Safely guide at least **5 out of 20 hatchlings (25%)** to proceed, representing the real-world baseline survival rate on unprotected beaches.
|
||||
- **Crawling Improvements**: Hatchling movement speed is increased to allow them to cross the beach container fully within the hatching window.
|
||||
- **Conservation Bonus**: Rescuing **more than 5** hatchlings (> 25%) awards a **Starting Goody Bonus** (your ocean turtle starts with +20 hunger/fullness and +20 joy, maxing them out at 100% to represent a healthier head-start).
|
||||
- **Scientific Result Breakdown**: Successfully completing this phase shows an intermediate results screen showing the precise survival rate and real-world sea turtle mortality trivia (e.g. only 1 in 1,000 hatchlings survive to adulthood).
|
||||
|
||||
### Phase 2: Ocean Care (Virtual Pet Room)
|
||||
- **Objective**: Raise a single juvenile turtle, rename it (default: "Shelly"), and monitor stats.
|
||||
- **Stats**: Hunger, Joy, Shell Cleanliness, and Health. Health decays if other stats fall low or if hazards collide.
|
||||
- **Interactivity**:
|
||||
- **Feed**: Choose species-accurate foods.
|
||||
- *Green Turtle*: Likes **Seagrass 🌿**.
|
||||
- *Loggerhead*: Likes **Crabs 🦀**.
|
||||
- *Leatherback*: Likes **Jellyfish 🪼**.
|
||||
- *Penalty*: Feeding incorrect food drops happiness. Swallowing **Plastic Bags 🛍️** (which float by and mimic jellyfish) causes severe sickness. Tap/swipe plastic bags away before the turtle swallows them!
|
||||
- **Clean Shell**: Brushing minigame. Rub the screen over the turtle's shell to scrape away green algae spots.
|
||||
- **Play**: Tickle the belly to make it spin and gain Joy.
|
||||
- **Heal**: Apply medicine to cure plastic-bag toxicity and injuries.
|
||||
- **QTE Hazards**:
|
||||
- **Ghost Nets**: Tangled net blocks breathing. Swipe back and forth repeatedly to cut the turtle free.
|
||||
- **Boat Strikes**: Motor shadow passes. Tap the "DIVE DEEP" button to escape the propeller.
|
||||
- **Shark Attacks**: A Tiger shark swims in. Tap "Hide in Shell" so the turtle retracts its head and flippers.
|
||||
|
||||
### Phase 3: Beaching & Tourist Control (Conservation Defense)
|
||||
- **Objective**: Protect your resting, beached sea turtle from humans.
|
||||
- **Hazards**: Ignorant tourists spawn and try to enter the **10-Foot Safe Zone** to take selfies. Camera flashes disorient and stress the turtle (damaging health and progress).
|
||||
- **Repelling**: Tap on incoming tourists to shove them back to the screen margins. Each tap displays a federal conservation law fact or NOAA guideline.
|
||||
- **Resolution**: Successfully protect the turtle until its rest progress bar reaches 100% to return it safely to the ocean.
|
||||
|
||||
---
|
||||
|
||||
## How to Verify and Run
|
||||
|
||||
1. We have launched a background Python HTTP server on port 8000 in the project folder.
|
||||
2. **Access the Game**: Open your browser and navigate to:
|
||||
[http://localhost:8000](http://localhost:8000)
|
||||
3. **PWA Installation**:
|
||||
- On Desktop Chrome: An install icon will appear in the URL address bar, or you can trigger installation via the floating in-game install prompt.
|
||||
- On iOS Safari: Tap "Share" -> "Add to Home Screen".
|
||||
- On Android Chrome: Tap the three dots -> "Install app".
|
||||
4. **Offline Play**: Turn off your network/Wi-Fi connection. Reload the page to verify that the Service Worker caches the code shell and lets you play offline seamlessly.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
+639
@@ -0,0 +1,639 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Tortugotchi - Sea Turtle Conservation Game</title>
|
||||
|
||||
<!-- PWA & Mobile Web Capabilities -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Tortugotchi">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<meta name="theme-color" content="#0d1b2a">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="Help raise awareness for sea turtle conservation! Guard nests, guide hatchlings to the ocean, raise your own sea turtle, and protect it from human and environmental hazards in this interactive Tamagotchi-style game.">
|
||||
<meta name="keywords" content="sea turtle, conservation, tamagotchi, game, PWA, marine life, endangered species">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Service Worker / PWA Install Prompt (Floating) -->
|
||||
<div id="pwa-install-banner" class="install-banner hidden">
|
||||
<div class="banner-content">
|
||||
<span class="banner-icon">🐢</span>
|
||||
<div class="banner-text">
|
||||
<h4>Install Tortugotchi</h4>
|
||||
<p>Play offline and save your turtle's progress!</p>
|
||||
</div>
|
||||
<button id="btn-pwa-install" class="btn-primary-mini">Install</button>
|
||||
<button id="btn-pwa-close" class="btn-text">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Mobile Aspect Frame -->
|
||||
<main id="app-container" class="app-frame">
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- 1. START / ONBOARDING SCREEN -->
|
||||
<!-- ========================================== -->
|
||||
<section id="screen-start" class="game-screen active">
|
||||
<div class="header-logo">
|
||||
<svg viewBox="0 0 100 100" class="logo-turtle-svg">
|
||||
<path d="M50 15 C 38 15, 30 25, 30 45 C 30 65, 38 75, 50 75 C 62 75, 70 65, 70 45 C 70 25, 62 15, 50 15 Z" fill="#00b4d8"/>
|
||||
<ellipse cx="50" cy="18" rx="8" ry="10" fill="#0077b6"/>
|
||||
<!-- Flippers -->
|
||||
<path d="M32 30 C 15 25, 5 35, 12 50 C 18 58, 28 50, 31 42" fill="#0096c7"/>
|
||||
<path d="M68 30 C 85 25, 95 35, 88 50 C 82 58, 72 50, 69 42" fill="#0096c7"/>
|
||||
<!-- Little Shell Pattern -->
|
||||
<path d="M50 25 L 50 65 M38 45 L 62 45" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
|
||||
<circle cx="50" cy="18" r="3" fill="#ffffff"/>
|
||||
</svg>
|
||||
<h1 class="app-title">Tortugotchi</h1>
|
||||
<p class="app-subtitle">Protect. Raise. Conserve.</p>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel onboard-card">
|
||||
<p class="intro-text">
|
||||
Sea turtles have navigated our oceans for over 100 million years, but today they face extinction due to plastic pollution, light disorientation, coastal development, and boat collisions.
|
||||
</p>
|
||||
<p class="intro-action"><strong>Choose a species to begin your conservation journey:</strong></p>
|
||||
|
||||
<div class="species-selector">
|
||||
<!-- Green Turtle -->
|
||||
<label class="species-option" for="species-green">
|
||||
<input type="radio" name="species" id="species-green" value="green" checked>
|
||||
<div class="species-card">
|
||||
<span class="species-icon">🌿</span>
|
||||
<div class="species-details">
|
||||
<h3>Green Sea Turtle</h3>
|
||||
<p class="species-diet">Diet: Herbivore (Seagrass/Algae)</p>
|
||||
<p class="species-desc">Possesses finely serrated jaws to graze on seagrass beds, maintaining critical marine ecosystems.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Loggerhead -->
|
||||
<label class="species-option" for="species-loggerhead">
|
||||
<input type="radio" name="species" id="species-loggerhead" value="loggerhead">
|
||||
<div class="species-card">
|
||||
<span class="species-icon">🦀</span>
|
||||
<div class="species-details">
|
||||
<h3>Loggerhead Sea Turtle</h3>
|
||||
<p class="species-diet">Diet: Carnivore (Crabs/Shellfish)</p>
|
||||
<p class="species-desc">Known for its massive head and powerful jaws, feeding on hard-shelled crabs and mollusks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Leatherback -->
|
||||
<label class="species-option" for="species-leatherback">
|
||||
<input type="radio" name="species" id="species-leatherback" value="leatherback">
|
||||
<div class="species-card">
|
||||
<span class="species-icon">🪼</span>
|
||||
<div class="species-details">
|
||||
<h3>Leatherback Sea Turtle</h3>
|
||||
<p class="species-diet">Diet: Gelatinivore (Jellyfish)</p>
|
||||
<p class="species-desc">The largest sea turtle. Has a rubbery, ridged shell and eats jellyfish, diving over 4,000 feet deep.</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button id="btn-start-game" class="btn-primary btn-pulse">Start Conservation Game</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-info-links">
|
||||
<button id="btn-show-facts-main" class="btn-secondary-text">📚 Read Conservation Facts</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- 2. BEACH / NEST GUARDING STAGE -->
|
||||
<!-- ========================================== -->
|
||||
<section id="screen-beach" class="game-screen">
|
||||
<div class="screen-header">
|
||||
<div class="hud-item">
|
||||
<span class="hud-label">Nest Status</span>
|
||||
<span id="beach-phase-title" class="hud-value text-accent">Guarding Eggs</span>
|
||||
</div>
|
||||
<div class="hud-item">
|
||||
<span class="hud-label">Hatchlings Safe</span>
|
||||
<span id="hatchlings-saved-count" class="hud-value text-success">0 / 20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Interactive Beach Play Area -->
|
||||
<div id="beach-sandbox" class="beach-area">
|
||||
<!-- Dynamic, liquid tide rolling at top of beach -->
|
||||
<div class="tide-layer">
|
||||
<svg class="tide-svg" viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="tideGradBeach" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#7ed3f5" stop-opacity="0.95"/>
|
||||
<stop offset="55%" stop-color="#1d7ab5" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#0a3a63" stop-opacity="0.75"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="tideGradBeach2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#a8e3f7" stop-opacity="0.7"/>
|
||||
<stop offset="100%" stop-color="#1c93cc" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path class="tide-wave tide-back" d="M0,60 C150,90 300,30 600,55 C900,80 1050,30 1200,60 L1200,120 L0,120 Z" fill="url(#tideGradBeach)"/>
|
||||
<path class="tide-wave tide-mid" d="M0,72 C200,40 400,95 600,65 C800,40 1000,90 1200,68 L1200,120 L0,120 Z" fill="url(#tideGradBeach2)"/>
|
||||
<path class="tide-wave tide-front" d="M0,85 C180,110 360,55 600,80 C840,105 1020,60 1200,82 L1200,120 L0,120 Z" fill="rgba(255,255,255,0.45)"/>
|
||||
<path class="tide-foam" d="M0,95 C150,82 350,108 600,92 C850,76 1050,108 1200,92 L1200,120 L0,120 Z" fill="rgba(255,255,255,0.7)"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Eggs Nest Container -->
|
||||
<div id="turtle-nest" class="nest-site">
|
||||
<div class="nest-mound"></div>
|
||||
<div class="nest-label">NEST</div>
|
||||
<!-- Little hatching eggs inside -->
|
||||
<div id="nest-eggs-visual" class="eggs-visual">
|
||||
<div class="egg"></div>
|
||||
<div class="egg"></div>
|
||||
<div class="egg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic elements will be spawned here by JS:
|
||||
- Trash pieces (draggable to trash can)
|
||||
- Deep holes (tappable to fill)
|
||||
- Predators (ghost crabs, seagulls - tappable to scare)
|
||||
- Light pollution rays (streetlamp/flashlight)
|
||||
- Hatchlings (moving from nest to sea)
|
||||
-->
|
||||
<div id="beach-hazards-layer" class="hazards-layer"></div>
|
||||
<div id="hatchling-crawlers-layer" class="hatchlings-layer"></div>
|
||||
|
||||
<!-- Beach Obstacles / Environmental elements -->
|
||||
<div id="beach-trash-can" class="beach-trash-can-zone">
|
||||
<span class="trash-icon">🗑️</span>
|
||||
<span class="trash-label">Recycle Bin</span>
|
||||
</div>
|
||||
|
||||
<!-- Light switch overlay if a streetlamp turns on -->
|
||||
<div id="light-pollution-hud" class="light-alert-card hidden">
|
||||
<span class="light-warning-icon">⚠️💡</span>
|
||||
<div class="light-warning-text">
|
||||
<strong>Light Pollution Active!</strong>
|
||||
<p>Hatchlings crawl toward artificial lights instead of the moonlit sea! Tap the source to turn it off.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instructions Bubble -->
|
||||
<div id="beach-tutorial-overlay" class="game-tutorial-bubble">
|
||||
<p id="beach-tutorial-text">Clear beach trash, fill holes, scare crabs/gulls, and turn off blinding lights before hatching!</p>
|
||||
<button id="btn-dismiss-beach-tut" class="btn-primary-mini">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action / Progress Controls -->
|
||||
<div class="beach-footer glass-panel">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-label">Time to Hatching / Migration</div>
|
||||
<div class="progress-bar-bg">
|
||||
<div id="beach-progress-fill" class="progress-bar-fill" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-feedback-text" id="beach-feedback">Guarding nest... clear hazards to prepare the beach!</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- 3. OCEAN TAMAGOTCHI CARE STAGE -->
|
||||
<!-- ========================================== -->
|
||||
<section id="screen-ocean" class="game-screen">
|
||||
<!-- HUD / Stats Dashboard -->
|
||||
<div class="ocean-header">
|
||||
<div class="turtle-identity">
|
||||
<span id="turtle-avatar-indicator">🐢</span>
|
||||
<div>
|
||||
<h2 id="display-turtle-name">Shelly</h2>
|
||||
<p id="display-turtle-species" class="species-subtext">Green Sea Turtle</p>
|
||||
</div>
|
||||
<button id="btn-rename-turtle" class="btn-edit-icon" title="Rename Turtle">✏️</button>
|
||||
</div>
|
||||
<div class="turtle-age-score">
|
||||
<span class="hud-label">Turtle Age</span>
|
||||
<span id="turtle-age-val" class="hud-value">0 Days</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Core Tamagotchi Stat Bars -->
|
||||
<div class="stats-grid">
|
||||
<!-- Health -->
|
||||
<div class="stat-bar-card">
|
||||
<div class="stat-bar-header">
|
||||
<span>❤️ Health</span>
|
||||
<span id="stat-health-text" class="stat-val">100%</span>
|
||||
</div>
|
||||
<div class="stat-progress-bg">
|
||||
<div id="bar-health" class="stat-progress-fill health" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hunger -->
|
||||
<div class="stat-bar-card">
|
||||
<div class="stat-bar-header">
|
||||
<span>😋 Fullness</span>
|
||||
<span id="stat-hunger-text" class="stat-val">80%</span>
|
||||
</div>
|
||||
<div class="stat-progress-bg">
|
||||
<div id="bar-hunger" class="stat-progress-fill hunger" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Joy / Happiness -->
|
||||
<div class="stat-bar-card">
|
||||
<div class="stat-bar-header">
|
||||
<span>✨ Happiness</span>
|
||||
<span id="stat-joy-text" class="stat-val">90%</span>
|
||||
</div>
|
||||
<div class="stat-progress-bg">
|
||||
<div id="bar-joy" class="stat-progress-fill joy" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shell Cleanliness -->
|
||||
<div class="stat-bar-card">
|
||||
<div class="stat-bar-header">
|
||||
<span>🛡️ Shell Clean</span>
|
||||
<span id="stat-clean-text" class="stat-val">100%</span>
|
||||
</div>
|
||||
<div class="stat-progress-bg">
|
||||
<div id="bar-clean" class="stat-progress-fill clean" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Animated Turtle Playpen -->
|
||||
<div id="ocean-playpen" class="ocean-area">
|
||||
<!-- Ocean current background particles will float here -->
|
||||
<div class="ocean-light-rays"></div>
|
||||
<div class="ocean-water-particles"></div>
|
||||
|
||||
<!-- Active QTE Hazard Overlays (Nets, Boats, Sharks) -->
|
||||
<div id="qte-net-overlay" class="qte-overlay net-hazard hidden">
|
||||
<div class="qte-warning-title">⚠️ GHOST NET ENTANGLEMENT!</div>
|
||||
<p class="qte-instructions">SWIPE REPEATEDLY across the net to cut your turtle loose!</p>
|
||||
<div class="swipe-progress-container">
|
||||
<div id="net-swipe-fill" class="swipe-progress-fill" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="net-grid-graphics"></div>
|
||||
</div>
|
||||
|
||||
<div id="qte-boat-overlay" class="qte-overlay boat-hazard hidden">
|
||||
<div class="qte-warning-title">🚢 BOAT STRIKE INCOMING!</div>
|
||||
<p class="qte-instructions">Propeller noise approaching! Tap the DIVE button to escape!</p>
|
||||
<button id="btn-qte-dive" class="btn-danger btn-large btn-pulse">🌊 DIVE DEEP! 🌊</button>
|
||||
</div>
|
||||
|
||||
<div id="qte-shark-overlay" class="qte-overlay shark-hazard hidden">
|
||||
<div class="qte-warning-title">🦈 SHARK SPOTTED!</div>
|
||||
<p class="qte-instructions">Tiger shark in the area! Tap BRACE to tuck head and flippers tight and angle your shell toward the threat — sea turtles can't fully retract, so the shell is their main armor.</p>
|
||||
<div class="shark-btn-row">
|
||||
<button id="btn-qte-hide" class="btn-warning btn-large">🛡️ Brace (Shell First)</button>
|
||||
</div>
|
||||
<!-- Shark animated graphic will be injected here -->
|
||||
</div>
|
||||
|
||||
<!-- Food items that drift when feeding -->
|
||||
<div id="floating-items-container" class="floating-items-layer"></div>
|
||||
|
||||
<!-- Draggable Brush Overlay for Shell Cleaning -->
|
||||
<div id="cleaning-game-overlay" class="cleaning-layer hidden">
|
||||
<div class="cleaning-instructions">DRAG the brush over the turtle's shell to clean algae and barnacles!</div>
|
||||
<div id="cleaning-brush" class="interactive-brush">🪥 Brush</div>
|
||||
</div>
|
||||
|
||||
<!-- THE MAIN ANIME SEA TURTLE SVG -->
|
||||
<div id="sea-turtle-container" class="sea-turtle-sprite">
|
||||
<svg viewBox="0 0 200 200" id="svg-turtle">
|
||||
<!-- Front Flippers (animated in CSS) -->
|
||||
<g id="flipper-left" class="flipper fl-left">
|
||||
<path d="M60 90 C 25 80, 5 95, 12 120 C 18 135, 45 125, 55 110" fill="#2d6a4f"/>
|
||||
<path d="M50 95 C 28 88, 15 100, 20 115 C 25 125, 42 118, 48 108" fill="#40916c" opacity="0.6"/>
|
||||
</g>
|
||||
<g id="flipper-right" class="flipper fl-right">
|
||||
<path d="M140 90 C 175 80, 195 95, 188 120 C 182 135, 155 125, 145 110" fill="#2d6a4f"/>
|
||||
<path d="M150 95 C 172 88, 185 100, 180 115 C 175 125, 158 118, 152 108" fill="#40916c" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
<!-- Rear Flippers -->
|
||||
<g id="flipper-back-left" class="flipper fl-back-left">
|
||||
<path d="M75 145 C 55 155, 45 175, 55 185 C 65 190, 75 175, 80 160" fill="#1b4332"/>
|
||||
</g>
|
||||
<g id="flipper-back-right" class="flipper fl-back-right">
|
||||
<path d="M125 145 C 145 155, 155 175, 145 185 C 135 190, 125 175, 120 160" fill="#1b4332"/>
|
||||
</g>
|
||||
|
||||
<!-- Little Tail -->
|
||||
<path d="M100 165 L 100 182 L 96 172 Z" fill="#1b4332"/>
|
||||
|
||||
<!-- Main Shell -->
|
||||
<g id="turtle-shell">
|
||||
<!-- Outer rim / carapace -->
|
||||
<ellipse cx="100" cy="120" rx="45" ry="52" fill="#1b4332" stroke="#2d6a4f" stroke-width="4"/>
|
||||
|
||||
<!-- Inner shell patterns -->
|
||||
<path d="M100 72 C 120 85, 120 155, 100 168 C 80 155, 80 85, 100 72 Z" fill="#40916c"/>
|
||||
|
||||
<!-- Cute scute design patterns -->
|
||||
<path d="M100 95 L 75 88 M100 95 L 125 88 M100 120 L 68 120 M100 120 L 132 120 M100 145 L 75 152 M100 145 L 125 152 M100 72 L 100 168" stroke="#1b4332" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<!-- Spots / Highlights on shell -->
|
||||
<circle cx="90" cy="105" r="4" fill="#52b788" opacity="0.5"/>
|
||||
<circle cx="110" cy="135" r="5" fill="#52b788" opacity="0.5"/>
|
||||
|
||||
<!-- Algae Spots (Visual representation of dirty shell) -->
|
||||
<g id="turtle-algae-spots" class="dirty-spots hidden">
|
||||
<circle cx="80" cy="100" r="8" fill="#4f5d2f" opacity="0.8"/>
|
||||
<circle cx="120" cy="110" r="10" fill="#3a4f1c" opacity="0.8"/>
|
||||
<circle cx="95" cy="140" r="7" fill="#4f5d2f" opacity="0.9"/>
|
||||
<circle cx="110" cy="95" r="5" fill="#3a4f1c" opacity="0.75"/>
|
||||
<text x="80" y="103" font-size="8">🐚</text>
|
||||
<text x="115" y="145" font-size="8">🐚</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Neck and Head -->
|
||||
<g id="turtle-head">
|
||||
<!-- Neck -->
|
||||
<path d="M90 85 L 90 65 C 90 60, 110 60, 110 65 L 110 85 Z" fill="#2d6a4f"/>
|
||||
|
||||
<!-- Head shape -->
|
||||
<ellipse cx="100" cy="55" rx="22" ry="24" fill="#2d6a4f"/>
|
||||
|
||||
<!-- Anime Cheeks (blush) -->
|
||||
<ellipse cx="86" cy="62" rx="4" ry="2.5" fill="#ff85a1" opacity="0.6"/>
|
||||
<ellipse cx="114" cy="62" rx="4" ry="2.5" fill="#ff85a1" opacity="0.6"/>
|
||||
|
||||
<!-- EXPRESSIVE ANIME EYES -->
|
||||
<g id="turtle-eyes-happy" class="eye-state hidden">
|
||||
<!-- Happy curve eyes ^ ^ -->
|
||||
<path d="M80 54 Q 85 45, 90 54" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M110 54 Q 115 45, 120 54" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g id="turtle-eyes-dizzy" class="eye-state hidden">
|
||||
<!-- Dizzy spiral eyes -->
|
||||
<text x="79" y="58" font-size="14" fill="#ffffff" font-weight="bold">×</text>
|
||||
<text x="109" y="58" font-size="14" fill="#ffffff" font-weight="bold">×</text>
|
||||
</g>
|
||||
|
||||
<g id="turtle-eyes-sleeping" class="eye-state hidden">
|
||||
<!-- Closed sleeping curves u u -->
|
||||
<path d="M78 52 Q 84 59, 90 52" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M110 52 Q 116 59, 122 52" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<g id="turtle-eyes-normal" class="eye-state">
|
||||
<!-- Large, adorable glossy anime eyes -->
|
||||
<circle cx="84" cy="53" r="7" fill="#000000"/>
|
||||
<circle cx="116" cy="53" r="7" fill="#000000"/>
|
||||
<!-- Gloss highlights -->
|
||||
<circle cx="82" cy="50" r="3.5" fill="#ffffff"/>
|
||||
<circle cx="114" cy="50" r="3.5" fill="#ffffff"/>
|
||||
<circle cx="86" cy="55" r="1.5" fill="#ffffff"/>
|
||||
<circle cx="118" cy="55" r="1.5" fill="#ffffff"/>
|
||||
</g>
|
||||
|
||||
<!-- Cute Mouth -->
|
||||
<g id="turtle-mouth-normal" class="mouth-state">
|
||||
<path d="M96 66 Q 100 70, 104 66" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g id="turtle-mouth-eating" class="mouth-state hidden">
|
||||
<circle cx="100" cy="67" r="4.5" fill="#ff758f"/>
|
||||
</g>
|
||||
<g id="turtle-mouth-sad" class="mouth-state hidden">
|
||||
<path d="M96 68 Q 100 64, 104 68" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Floating Dialog Bubble for Status thoughts -->
|
||||
<div id="turtle-thought-bubble" class="thought-bubble hidden">
|
||||
<span id="thought-text">I'm hungry! 🌿</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Panel Buttons (Glassmorphic) -->
|
||||
<div class="ocean-footer glass-panel">
|
||||
<div class="button-row">
|
||||
<!-- Feed -->
|
||||
<button id="btn-action-feed" class="action-btn">
|
||||
<span class="btn-emoji">🍽️</span>
|
||||
<span class="btn-lbl">Feed</span>
|
||||
</button>
|
||||
|
||||
<!-- Clean -->
|
||||
<button id="btn-action-clean" class="action-btn">
|
||||
<span class="btn-emoji">🧼</span>
|
||||
<span class="btn-lbl">Clean</span>
|
||||
</button>
|
||||
|
||||
<!-- Play -->
|
||||
<button id="btn-action-play" class="action-btn">
|
||||
<span class="btn-emoji">⚽</span>
|
||||
<span class="btn-lbl">Play</span>
|
||||
</button>
|
||||
|
||||
<!-- Heal -->
|
||||
<button id="btn-action-heal" class="action-btn">
|
||||
<span class="btn-emoji">🩹</span>
|
||||
<span class="btn-lbl">Heal</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Sub-menus (Drawer systems) -->
|
||||
<div id="feed-options-drawer" class="drawer-panel hidden">
|
||||
<h4>Select Food (Ensure it matches species diet!)</h4>
|
||||
<div class="food-options-row">
|
||||
<button class="food-btn" data-food="seagrass">🌿 Seagrass</button>
|
||||
<button class="food-btn" data-food="crabs">🦀 Crab meat</button>
|
||||
<button class="food-btn" data-food="jellyfish">🪼 Jellyfish</button>
|
||||
</div>
|
||||
<div class="drawer-warning">👆 <strong>Tap the food</strong> as it drifts down to feed your turtle. Beware: plastic bags 🛍️ that resemble jellyfish are dangerous — tap to push them away!</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- 4. BEACHING / TOURIST SHIELD EVENT -->
|
||||
<!-- ========================================== -->
|
||||
<section id="screen-beaching" class="game-screen">
|
||||
<div class="screen-header warning-bg">
|
||||
<div class="hud-item">
|
||||
<span class="hud-label text-warning">CRITICAL STATE</span>
|
||||
<span class="hud-value text-white">Turtle Beached!</span>
|
||||
</div>
|
||||
<div class="hud-item">
|
||||
<span class="hud-label text-white">Resting Progress</span>
|
||||
<span id="beaching-progress-text" class="hud-value">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beaching Play Sandbox -->
|
||||
<div id="beaching-sandbox" class="beaching-area">
|
||||
<!-- Dynamic colorful tide rolling at top of beach (water meeting sand) -->
|
||||
<div class="tide-layer beaching-tide">
|
||||
<svg class="tide-svg" viewBox="0 0 1200 140" preserveAspectRatio="none" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="tideGradBch" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#9be0ff" stop-opacity="0.95"/>
|
||||
<stop offset="45%" stop-color="#2293c7" stop-opacity="0.95"/>
|
||||
<stop offset="100%" stop-color="#0a4a72" stop-opacity="0.8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="tideGradBch2" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#c9f0ff" stop-opacity="0.75"/>
|
||||
<stop offset="100%" stop-color="#3ab0d8" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path class="tide-wave tide-back" d="M0,70 C200,100 400,40 600,65 C800,90 1000,40 1200,70 L1200,140 L0,140 Z" fill="url(#tideGradBch)"/>
|
||||
<path class="tide-wave tide-mid" d="M0,85 C220,50 420,110 600,75 C780,40 990,108 1200,82 L1200,140 L0,140 Z" fill="url(#tideGradBch2)"/>
|
||||
<path class="tide-wave tide-front" d="M0,100 C200,128 380,68 600,95 C820,122 1010,72 1200,98 L1200,140 L0,140 Z" fill="rgba(255,255,255,0.5)"/>
|
||||
<path class="tide-foam" d="M0,112 C160,98 360,128 600,108 C840,90 1050,128 1200,108 L1200,140 L0,140 Z" fill="rgba(255,255,255,0.78)"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Beached Turtle SVG (static resting sprite) -->
|
||||
<div id="beached-turtle-spot" class="beached-turtle-resting">
|
||||
<div class="turtle-zone-ring"></div>
|
||||
<span class="safe-zone-label">10 FEET SAFE ZONE</span>
|
||||
|
||||
<svg viewBox="0 0 100 100" class="resting-turtle-svg">
|
||||
<ellipse cx="50" cy="55" rx="30" ry="35" fill="#1b4332" stroke="#2d6a4f" stroke-width="2"/>
|
||||
<circle cx="50" cy="22" r="14" fill="#2d6a4f"/>
|
||||
<!-- Closed sleepy eyes -->
|
||||
<path d="M42 22 Q 46 25, 48 22" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<path d="M52 22 Q 54 25, 58 22" fill="none" stroke="#ffffff" stroke-width="1.5"/>
|
||||
<!-- Flippers tucked -->
|
||||
<path d="M22 45 C 15 50, 18 60, 24 55" fill="#2d6a4f"/>
|
||||
<path d="M78 45 C 85 50, 82 60, 76 55" fill="#2d6a4f"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Ignorant tourists will walk towards center, user must tap to push back -->
|
||||
<div id="tourist-spawn-layer" class="tourists-layer"></div>
|
||||
|
||||
<!-- HUD Alerts -->
|
||||
<div class="beaching-instructions-card">
|
||||
<p>💤 Shelly has beached to rest and digest. <strong>Ignorant tourists are trying to crowd closer for selfies!</strong></p>
|
||||
<p class="text-accent"><strong>Tap tourists to push them back outside the 10-foot boundary!</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer displaying education fact relative to tourist behavior -->
|
||||
<div class="beaching-footer glass-panel">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar-bg">
|
||||
<div id="beaching-progress-fill" class="progress-bar-fill warning" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tourist-fact-box" class="educational-pop-box">
|
||||
<span class="fact-icon">ℹ️</span>
|
||||
<span id="tourist-fact-text" class="fact-text">Federal law requires maintaining at least 10 feet of distance from sea turtles.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ========================================== -->
|
||||
<!-- MODALS & ALERTS -->
|
||||
<!-- ========================================== -->
|
||||
|
||||
<!-- 1. Conservation Facts Education Modal -->
|
||||
<div id="modal-facts" class="modal-overlay hidden">
|
||||
<div class="glass-panel modal-card">
|
||||
<div class="modal-header">
|
||||
<h2>📚 Sea Turtle Science & Conservation</h2>
|
||||
<button id="btn-close-facts" class="btn-close-text">✕</button>
|
||||
</div>
|
||||
<div class="modal-body scrollable-content">
|
||||
|
||||
<h3>1. Major Threat: Light Pollution 💡</h3>
|
||||
<p>Hatchlings emerge from sandy nests at night and instinctively crawl towards the brightest horizon, which is naturally the starlight and moonlight reflecting on the ocean surface. Artificial streetlights, hotel lighting, and flashlights draw hatchlings inland. They become exhausted, dehydrated, run over by cars, or eaten by land predators.</p>
|
||||
|
||||
<h3>2. Diet & Plastic Bag Mimicry 🪼</h3>
|
||||
<p>Many sea turtles, especially Leatherbacks, eat soft-bodied jellyfish. Unfortunately, floating plastic bags in the water columns look exactly like jellyfish. If a turtle swallows plastic, it blocks their digestive tract, creating gas that makes them float (unable to dive for food) or starving them to death.</p>
|
||||
|
||||
<h3>3. Commercial Fishing & Ghost Nets 🕸️</h3>
|
||||
<p>Ghost nets are commercial fishing nets that are lost or abandoned in the ocean. They continue to catch and entangle marine life indiscriminately. Since sea turtles are reptiles and breathe air with lungs, getting tangled in a net prevents them from surfacing to breathe, leading to drowning.</p>
|
||||
|
||||
<h3>4. Tourist Distance Rules & Laws 🚷</h3>
|
||||
<p>All sea turtle species are listed as threatened or endangered. Under the United States <strong>Endangered Species Act (ESA)</strong>, it is illegal to harass, touch, capture, or harm sea turtles, their eggs, or hatchlings. Violations carry heavy federal penalties, including fines up to $25,000 and jail time. Wildlife agencies recommend keeping a distance of at least <strong>10 feet (3 meters)</strong> on beaches to prevent causing stress.</p>
|
||||
|
||||
<div class="citation-box">
|
||||
<p>Scientific facts verified by NOAA Fisheries and Marine Turtle Research organizations.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-close-facts-bottom" class="btn-primary">Back to Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Migration Success & Trivia Modal -->
|
||||
<div id="modal-migration-success" class="modal-overlay hidden">
|
||||
<div class="glass-panel modal-card">
|
||||
<h2 style="font-size: 1.25rem; font-weight: 800; text-align: center;">🌊 Nest Migration Results</h2>
|
||||
|
||||
<div class="migration-results-card">
|
||||
<p>Hatchlings Reached Ocean: <strong id="success-saved-count" class="text-success" style="font-size: 1.1rem;">0 / 20</strong></p>
|
||||
<p>Survival Rate: <strong id="success-saved-pct" class="text-accent" style="font-size: 1.1rem;">0%</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="conservation-trivia-card">
|
||||
<h3>🐢 Real Science Trivia</h3>
|
||||
<p>In the wild, only about <strong>50% to 75%</strong> of hatchlings crawl from the nest to the sea. On beaches with artificial lights and trash, this falls to <strong>less than 25%</strong>.</p>
|
||||
<p style="margin-top: 6px;">Once in the water, the odds are even harder: only <strong>1 in 1,000 (0.1%)</strong> sea turtle hatchlings survive to adulthood due to ocean predators and human debris.</p>
|
||||
</div>
|
||||
|
||||
<div id="bonus-info-card" class="bonus-box hidden">
|
||||
<h4>🎉 Conservation Goodies Awarded!</h4>
|
||||
<p>Superb beach management! Since you beat the unmanaged average of 25% (> 5 hatchlings), Shelly starts the ocean journey with: <strong>+20 Joy</strong>, <strong>+20 Fullness</strong>, and a **+20 Health** head-start!</p>
|
||||
</div>
|
||||
|
||||
<button id="btn-migration-continue" class="btn-primary">Continue to Ocean Journey</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Rename Turtle Modal -->
|
||||
<div id="modal-rename" class="modal-overlay hidden">
|
||||
<div class="glass-panel modal-card small-modal">
|
||||
<h3>🏷️ Give Your Turtle a Name</h3>
|
||||
<p>Give your rescued sea turtle a unique name for its ocean journey.</p>
|
||||
<input type="text" id="input-turtle-name" maxlength="12" placeholder="Shelly" class="text-input">
|
||||
<div class="modal-buttons">
|
||||
<button id="btn-save-name" class="btn-primary">Save Name</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Game Over / Reset Modal -->
|
||||
<div id="modal-gameover" class="modal-overlay hidden">
|
||||
<div class="glass-panel modal-card small-modal text-center">
|
||||
<h2 id="gameover-title" class="text-danger">⚠️ Shell-shocked!</h2>
|
||||
<p id="gameover-desc">Your turtle could not survive the hazard. Try again to apply what you learned!</p>
|
||||
<div class="gameover-stats">
|
||||
<p>Turtle Name: <strong id="gameover-name">Shelly</strong></p>
|
||||
<p>Age Reached: <strong id="gameover-age">0 Days</strong></p>
|
||||
</div>
|
||||
<button id="btn-restart-game" class="btn-primary">Restart Journey</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"id": "/",
|
||||
"short_name": "Tortugotchi",
|
||||
"name": "Tortugotchi: Sea Turtle Protector",
|
||||
"description": "A Tamagotchi-style game to protect nests, raise sea turtles, and advocate for sea turtle conservation.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
],
|
||||
"scope": "./",
|
||||
"start_url": "./index.html",
|
||||
"background_color": "#0d1b2a",
|
||||
"theme_color": "#008080",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait-primary",
|
||||
"categories": ["games", "education"]
|
||||
}
|
||||
Generated
+9315
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"claude-flow": "^3.7.0-alpha.72"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
const CACHE_NAME = 'tortugotchi-v10';
|
||||
const ASSETS = [
|
||||
'./',
|
||||
'./index.html',
|
||||
'./style.css',
|
||||
'./app.js',
|
||||
'./manifest.json',
|
||||
'./icon-192.png',
|
||||
'./icon-512.png'
|
||||
];
|
||||
|
||||
// Install Event
|
||||
self.addEventListener('install', (e) => {
|
||||
e.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
console.log('[Service Worker] Caching all app shell assets');
|
||||
return cache.addAll(ASSETS);
|
||||
}).then(() => self.skipWaiting())
|
||||
);
|
||||
});
|
||||
|
||||
// Activate Event
|
||||
self.addEventListener('activate', (e) => {
|
||||
e.waitUntil(
|
||||
caches.keys().then((keys) => {
|
||||
return Promise.all(
|
||||
keys.map((key) => {
|
||||
if (key !== CACHE_NAME) {
|
||||
console.log('[Service Worker] Removing old cache', key);
|
||||
return caches.delete(key);
|
||||
}
|
||||
})
|
||||
);
|
||||
}).then(() => self.clients.claim())
|
||||
);
|
||||
});
|
||||
|
||||
// Fetch Event
|
||||
self.addEventListener('fetch', (e) => {
|
||||
e.respondWith(
|
||||
caches.match(e.request).then((cachedResponse) => {
|
||||
// Return cached version or fetch from network
|
||||
return cachedResponse || fetch(e.request).catch(() => {
|
||||
// Fallback for document requests if completely offline
|
||||
if (e.request.destination === 'document') {
|
||||
return caches.match('./index.html');
|
||||
}
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 602 KiB |
Reference in New Issue
Block a user