Swim game prototype: Analyst #3 swims the Strait of Hormuz#1
Swim game prototype: Analyst #3 swims the Strait of Hormuz#1ziggythebot wants to merge 1 commit intob1rdmania:mainfrom
Conversation
Standalone HTML/Canvas game — Amiga/Cinemaware aesthetic.
Narrative intro via 6-frame cutscene (border, Hamid, the swim).
Gameplay: dodge Shahed drones + IRGC boats, collect Zyn + cigars,
survive the Coast Guard. Vitality bar + score system.
All Stability AI image slots are clearly documented as placeholders:
- images/ directory for generated PNGs (gitignored)
- IMAGES.md: full prompts + dimensions for all 12 assets
- CSS: url('./images/X.png') with gradient fallback on every slot
- Sprites: procedural canvas fallback until real PNGs are placed
- npm run generate:all / generate:screens / generate:sprites shortcuts
- stability-generate.mjs: --out flag for custom output paths
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis pull request refactors the game from a modular architecture to an inline canvas-based implementation with a state machine control flow. It replaces the previous Three.js/Phaser layout with a fixed-size viewport, updates visual asset generation scripts, and adds documentation for the asset creation workflow. Changes
Sequence DiagramsequenceDiagram
participant User
participant Input Handler
participant State Machine
participant Canvas Renderer
participant Asset Loader
User->>Input Handler: Keyboard/Touch/Click
Input Handler->>State Machine: Trigger State Transition
State Machine->>Canvas Renderer: Update Current State
Canvas Renderer->>Asset Loader: Load Screen/Sprite Assets
Asset Loader->>Asset Loader: Check images/ Directory
alt Assets Present
Asset Loader->>Canvas Renderer: Return Loaded Image Data
else Assets Missing
Asset Loader->>Canvas Renderer: Return Fallback (Procedural)
end
Canvas Renderer->>Canvas Renderer: Draw Current Frame<br/>(Water, Sprites, HUD, Overlays)
Canvas Renderer->>User: Display Rendered Canvas
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
index.html (1)
943-950: Minor:preloadSpritesis called on every game start.Each time the player starts a new game (including restarts),
preloadSpritesre-requests all sprite images. While browsers cache these requests, it adds unnecessary latency on restart.Consider moving the preload to initialization or adding a flag to skip if already loaded.
💡 Suggested approach
+let spritesLoaded = false; + function startGame() { + if (spritesLoaded) { + gameState = 'playing'; + resetGame(); + showScreen('screen-game'); + requestAnimationFrame(gameLoop); + return; + } preloadSprites(() => { + spritesLoaded = true; gameState = 'playing'; resetGame(); showScreen('screen-game'); requestAnimationFrame(gameLoop); }); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 943 - 950, The startGame function currently calls preloadSprites on every run, causing repeated network requests; either move the preloadSprites call to app initialization (e.g., run once in init/DOMContentLoaded) so startGame only sets gameState/resetGame/showScreen/requestAnimationFrame, or add an internal guard in preloadSprites (e.g., a spritesLoaded boolean) that returns immediately if true; update references to preloadSprites and startGame accordingly so sprite loading only happens once.scripts/stability-generate.mjs (1)
38-38: Unused import:resolveis imported but never used.The
resolvefunction was added to the import but is not used anywhere in the file.🧹 Proposed fix
-import { dirname, join, resolve } from "node:path"; +import { dirname, join } from "node:path";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@scripts/stability-generate.mjs` at line 38, The import list includes an unused symbol resolve from the node:path module; remove resolve from the import declaration (the import { dirname, join, resolve } from "node:path") or, if resolve was intended to be used, replace its placeholder usage accordingly—ensure only dirname and join remain in the import if resolve is not referenced anywhere else in the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@IMAGES.md`:
- Around line 14-15: Update the example invocation of node
scripts/stability-generate.mjs to use the correct flag and path that writes
assets to images/ instead of the old --name=title-art behavior; replace the
current example using --name=title-art (which writes to
public/generated/title-art.png) with the newer invocation that explicitly
outputs to images/title-art.png (e.g., use the script's output flag such as
--out/--output or the npm shortcut equivalent) so the example matches the
expected images/title-art.png location.
In `@package.json`:
- Around line 23-25: The batch npm scripts generate:screens, generate:sprites
and generate:all currently invoke sub-commands without passing asset-specific
prompts so each generator falls back to DEFAULT_PROMPT; update these scripts so
they either include the documented per-asset prompts (add the appropriate
--prompt="..." arguments to each chained command) or switch to using named
presets (e.g., --preset=carrier) for each asset type as defined in IMAGES.md;
ensure generate:all composes the same prompt/preset choices so automated runs
produce the intended asset-specific images rather than the generic
DEFAULT_PROMPT.
---
Nitpick comments:
In `@index.html`:
- Around line 943-950: The startGame function currently calls preloadSprites on
every run, causing repeated network requests; either move the preloadSprites
call to app initialization (e.g., run once in init/DOMContentLoaded) so
startGame only sets gameState/resetGame/showScreen/requestAnimationFrame, or add
an internal guard in preloadSprites (e.g., a spritesLoaded boolean) that returns
immediately if true; update references to preloadSprites and startGame
accordingly so sprite loading only happens once.
In `@scripts/stability-generate.mjs`:
- Line 38: The import list includes an unused symbol resolve from the node:path
module; remove resolve from the import declaration (the import { dirname, join,
resolve } from "node:path") or, if resolve was intended to be used, replace its
placeholder usage accordingly—ensure only dirname and join remain in the import
if resolve is not referenced anywhere else in the file.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b5e89eaa-05d2-4cd3-be7d-525ddc5f9d22
📒 Files selected for processing (6)
.gitignoreIMAGES.mdimages/.gitkeepindex.htmlpackage.jsonscripts/stability-generate.mjs
| # Generate a specific asset: | ||
| node scripts/stability-generate.mjs -- --name=title-art --aspect=16:9 "YOUR PROMPT" |
There was a problem hiding this comment.
Documentation uses outdated --name= syntax.
The manual invocation example uses --name=title-art which writes to public/generated/title-art.png, not images/title-art.png. This is inconsistent with the npm shortcuts and the expected asset locations documented below.
📝 Proposed fix
# Generate a specific asset:
-node scripts/stability-generate.mjs -- --name=title-art --aspect=16:9 "YOUR PROMPT"
+node scripts/stability-generate.mjs -- --out=images/title-art.png --aspect=16:9 "YOUR PROMPT"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # Generate a specific asset: | |
| node scripts/stability-generate.mjs -- --name=title-art --aspect=16:9 "YOUR PROMPT" | |
| # Generate a specific asset: | |
| node scripts/stability-generate.mjs -- --out=images/title-art.png --aspect=16:9 "YOUR PROMPT" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@IMAGES.md` around lines 14 - 15, Update the example invocation of node
scripts/stability-generate.mjs to use the correct flag and path that writes
assets to images/ instead of the old --name=title-art behavior; replace the
current example using --name=title-art (which writes to
public/generated/title-art.png) with the newer invocation that explicitly
outputs to images/title-art.png (e.g., use the script's output flag such as
--out/--output or the npm shortcut equivalent) so the example matches the
expected images/title-art.png location.
| "generate:screens": "npm run generate:title-art && npm run generate:scene-border && npm run generate:scene-hamid && npm run generate:scene-boat && npm run generate:win-art && npm run generate:lose-art", | ||
| "generate:sprites": "npm run generate:sprite-player && npm run generate:sprite-drone && npm run generate:sprite-boat && npm run generate:sprite-zyn && npm run generate:sprite-cigar && npm run generate:sprite-coastguard", | ||
| "generate:all": "npm run generate:screens && npm run generate:sprites", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check what prompts are embedded in the npm scripts
grep -E "generate:(title-art|scene-border|sprite-player)" package.json | head -5
# Verify the default prompt fallback behavior in the script
grep -A 3 "if (!prompt)" scripts/stability-generate.mjsRepository: b1rdmania/hell-strait
Length of output: 1031
Batch scripts will use default prompt instead of asset-specific prompts.
generate:screens, generate:sprites, and generate:all chain sub-commands that don't include --prompt parameters. When these batch scripts run, each generator will fall back to DEFAULT_PROMPT (the generic strait sunset prompt), not the asset-specific prompts documented in IMAGES.md.
If the intent is for users to manually run each command with its specific prompt, the batch scripts are misleading. If the intent is automated generation, consider either:
- Embedding prompts directly in the npm scripts, or
- Adding preset mappings (similar to
--preset=carrier) for each asset type
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` around lines 23 - 25, The batch npm scripts generate:screens,
generate:sprites and generate:all currently invoke sub-commands without passing
asset-specific prompts so each generator falls back to DEFAULT_PROMPT; update
these scripts so they either include the documented per-asset prompts (add the
appropriate --prompt="..." arguments to each chained command) or switch to using
named presets (e.g., --preset=carrier) for each asset type as defined in
IMAGES.md; ensure generate:all composes the same prompt/preset choices so
automated runs produce the intended asset-specific images rather than the
generic DEFAULT_PROMPT.
Summary
Standalone HTML/Canvas swim game — Amiga/Cinemaware aesthetic, no build step needed.
Image placeholders (all documented for Stability AI)
Every image slot is clearly marked:
images/title-art.pngimages/scene-border.pngimages/scene-hamid.pngimages/scene-boat.pngimages/win-art.pngimages/lose-art.pngimages/sprite-player.pngimages/sprite-drone.pngimages/sprite-boat.pngimages/sprite-zyn.pngimages/sprite-cigar.pngimages/sprite-coastguard.pngFull Stability AI prompts for every asset in
IMAGES.md.CSS slots:
url('./images/X.png')with gradient fallback — game works without any images.Sprites: procedural canvas fallback until PNGs are placed.
Generate images
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
Chores