Skip to content

Swim game prototype: Analyst #3 swims the Strait of Hormuz#1

Open
ziggythebot wants to merge 1 commit intob1rdmania:mainfrom
ziggythebot:swim-prototype
Open

Swim game prototype: Analyst #3 swims the Strait of Hormuz#1
ziggythebot wants to merge 1 commit intob1rdmania:mainfrom
ziggythebot:swim-prototype

Conversation

@ziggythebot
Copy link
Copy Markdown

@ziggythebot ziggythebot commented Apr 9, 2026

Summary

Standalone HTML/Canvas swim game — Amiga/Cinemaware aesthetic, no build step needed.

  • Narrative intro: 6-frame cutscene — Omani border crossing, meeting Hamid, "Fuck the police", the swim begins
  • Gameplay: swim right as Analyst #3, dodge Shahed drones + IRGC patrol boats, collect Zyn pouches (restore vitality) + cigars (score), survive the Coast Guard boss
  • Vitality bar: drains over time, replenished by Zyn — reach Kumzar or die trying
  • Win/Lose screens with retro Cinemaware art slots

Image placeholders (all documented for Stability AI)

Every image slot is clearly marked:

File Size What it is
images/title-art.png 640×240 Title splash — Hormuz at night, tanker, cigar
images/scene-border.png 640×280 Omani border checkpoint at dawn
images/scene-hamid.png 640×280 Hamid at the dock, dinghy + cash
images/scene-boat.png 640×280 Speedboat crossing, Shahed drone above
images/win-art.png 640×160 Man floating victorious, cigar, drones
images/lose-art.png 640×160 Coast Guard vessel, searchlight, rifles
images/sprite-player.png 96×20 4-frame swim strip
images/sprite-drone.png 88×24 Shahed 2-frame strip
images/sprite-boat.png 104×18 IRGC boat 2-frame strip
images/sprite-zyn.png 16×12 Zyn pouch collectible
images/sprite-cigar.png 24×8 Cigar collectible
images/sprite-coastguard.png 68×24 Coast Guard boss

Full 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

cp .env.example .env  # add STABILITY_API_KEY
npm run generate:screens    # all 6 screen images
npm run generate:sprites    # all 6 sprites
npm run generate:all        # everything

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Game now renders using canvas-based graphics with a centered viewport layout.
    • Updated screen progression with title, cutscenes, gameplay, win, and lose states.
    • Redesigned HUD displaying vitality, collectible counts, and score.
  • Documentation

    • Added comprehensive guide for managing visual assets and generating images using Stability AI.
  • Chores

    • Updated image generation scripts and build commands to support new asset workflow.

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>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 9, 2026

📝 Walkthrough

Walkthrough

This 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

Cohort / File(s) Summary
Asset Management
.gitignore, IMAGES.md
Added ignore rules for generated images while preserving tracking metadata, and introduced comprehensive documentation for asset acquisition, organization, and Stability AI generation with concrete specifications for screen backgrounds, sprite sheets, dimensions, prompts, and generation order.
Game Implementation
index.html
Complete rewrite replacing modular JS/Three.js/Phaser architecture with inline canvas-based game loop featuring a state machine (title → cutscene → playing → win/lose), procedural/asset-based rendering, sprite animation, entity logic (player, drones, boats, collectibles), and a compact HUD with vitality/resource counts.
Generation Scripts & Configuration
package.json, scripts/stability-generate.mjs
Replaced legacy image generation commands with output-driven generators for screen art (title-art, scene-*) and sprite sheets (sprite-player, sprite-drone, etc.), added orchestration scripts (generate:screens, generate:sprites, generate:all), and extended the Stability AI CLI to support --out= argument for explicit output path control.

Sequence Diagram

sequenceDiagram
    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
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 A canvas so fine, with sprites dancing bright,
State machines guiding the flow day and night,
From title to cutscene, where stories take flight,
Assets and scripts in harmony—what a sight!
Stability's images bloom in the code. ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the main change: a swim game prototype where Analyst #3 swims the Strait of Hormuz, which accurately reflects the primary objective and deliverable of this pull request.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
index.html (1)

943-950: Minor: preloadSprites is called on every game start.

Each time the player starts a new game (including restarts), preloadSprites re-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: resolve is imported but never used.

The resolve function 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

📥 Commits

Reviewing files that changed from the base of the PR and between 75b179c and 78720fc.

📒 Files selected for processing (6)
  • .gitignore
  • IMAGES.md
  • images/.gitkeep
  • index.html
  • package.json
  • scripts/stability-generate.mjs

Comment thread IMAGES.md
Comment on lines +14 to +15
# Generate a specific asset:
node scripts/stability-generate.mjs -- --name=title-art --aspect=16:9 "YOUR PROMPT"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
# 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.

Comment thread package.json
Comment on lines +23 to +25
"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",
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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.mjs

Repository: 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:

  1. Embedding prompts directly in the npm scripts, or
  2. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant