diff --git a/.gitignore b/.gitignore index c54f64f..e2aa2fa 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,8 @@ dist/ .env.* !.env.example .cursor/ + +# Generated Stability AI images — not committed, generate locally +images/*.png +images/*.jpg +!images/.gitkeep diff --git a/IMAGES.md b/IMAGES.md new file mode 100644 index 0000000..50c373e --- /dev/null +++ b/IMAGES.md @@ -0,0 +1,278 @@ +# Hell Strait — Image Assets + +All art is generated via [Stability AI Stable Image Core](https://platform.stability.ai/docs/api-reference). +Place finished PNGs in the `images/` folder — the game loads them automatically and falls back to procedural canvas art if missing. + +--- + +## Generating with Stability AI + +```bash +cp .env.example .env +# Add your STABILITY_API_KEY to .env + +# Generate a specific asset: +node scripts/stability-generate.mjs -- --name=title-art --aspect=16:9 "YOUR PROMPT" + +# Or use the npm shortcuts: +npm run generate:all +``` + +--- + +## Screen Backgrounds + +### `images/title-art.png` — 640 × 240 + +``` +Amiga Cinemaware 1989 game title screen, dramatic pixel art, +dark Strait of Hormuz at night, massive oil tanker silhouette on horizon, +jagged Iranian coastline low hills far left, Shahed drones as dark specks +in sky, lone figure in a tiny battered speedboat smoking a thick cigar, +moonlight shimmer on flat black water, orange-red distant glow from +refinery flares, limited 32-colour Amiga palette, chunky pixels, +retro game aesthetic, no modern HDR, no text, no logos +``` + +**Negative:** text, watermark, modern CGI, photorealistic, bokeh, anime +**Aspect:** 16:9 +**npm:** `npm run generate:title-art` + +--- + +### `images/scene-border.png` — 640 × 280 + +Used in cutscene frames 1–2 (Omani border crossing). + +``` +Amiga pixel art 1989 Cinemaware style, desert border checkpoint at early dawn, +Omani guard in traditional white dishdasha and leather belt, holding open a +crumpled Western passport, suspicious squinting expression, small dusty +checkpoint building with boom gate, sand dunes and flat horizon behind, +orange-pink sunrise sky, warm side light, limited 32-colour palette, +chunky retro game art, no text, no logos, no photorealistic faces +``` + +**Negative:** text, modern CGI, photorealistic, bokeh, watermark, anime +**Aspect:** 16:9 +**npm:** `npm run generate:scene-border` + +--- + +### `images/scene-hamid.png` — 640 × 280 + +Used in cutscene frames 3–4 (Meet Hamid, "Fuck the police"). + +``` +Amiga pixel art 1989 Cinemaware style, Omani fisherman at a rickety +night canal dock, weathered dark skin, rolled sleeves, one hand pointing +at a battered 40-year-old wooden dinghy speedboat tied with fraying rope, +other hand holding a folded wad of dollar bills, single dock lamp warm glow, +moonlight on dark still water, dramatic shadow play, limited 32-colour palette, +chunky retro game scene, no text, no logos +``` + +**Negative:** text, modern CGI, photorealistic, bokeh, watermark, anime +**Aspect:** 16:9 +**npm:** `npm run generate:scene-hamid` + +--- + +### `images/scene-boat.png` — 640 × 280 + +Used in cutscene frames 5–6 (The crossing → The swim). + +``` +Amiga pixel art 1989 Cinemaware side-scrolling scene, battered old +wooden dinghy racing across open flat ocean at pre-dawn, Iranian rocky +coastline silhouette in far hazy distance, Shahed-136 drone dark shape +visible in orange-grey sky overhead, man sitting at bow smoking a +thick Cuban cigar, salt spray, wave motion lines, very limited 32-colour +Amiga palette, retro game background art, no text, no logos +``` + +**Negative:** text, watermark, modern lens blur, photorealistic, anime +**Aspect:** 16:9 +**npm:** `npm run generate:scene-boat` + +--- + +### `images/win-art.png` — 640 × 160 + +Victory screen art. + +``` +Amiga pixel art 1989 Cinemaware victory screen, American man floating +on his back in calm turquoise ocean, thick lit Cuban cigar clamped in +wide grinning teeth, aviator sunglasses, arms spread wide, two Shahed +drones passing harmlessly high overhead in orange sunrise sky, +golden morning light glittering on water, triumphant joyful mood, +limited 32-colour retro palette, chunky pixels, no text, no UI +``` + +**Negative:** text, watermark, modern CGI, bokeh, anime +**Aspect:** 16:9 (top 160px crop) +**npm:** `npm run generate:win-art` + +--- + +### `images/lose-art.png` — 640 × 160 + +Game over screen art. + +``` +Amiga pixel art 1989 Cinemaware game-over screen, large Omani Coast Guard +patrol vessel looming in the foreground, powerful white searchlight beam +cutting across dark water onto a bedraggled wet man treading water, +stern uniformed officers leaning over deck railing aiming rifles down, +dramatic stark contrast between light and shadow, humiliation and threat, +limited 32-colour retro palette, no text, no UI +``` + +**Negative:** text, watermark, modern CGI, bokeh, anime +**Aspect:** 16:9 (top 160px crop) +**npm:** `npm run generate:lose-art` + +--- + +## Sprite Sheet PNGs + +All sprites use **transparent background**. Amiga 32-colour palette. +The game auto-detects and draws these via `ctx.drawImage()` — if missing, procedural canvas art is used as fallback. + +--- + +### `images/sprite-player.png` — 96 × 20 + +4-frame horizontal strip. Each frame: 24 × 20px. + +``` +Amiga pixel art sprite sheet, 4-frame swim cycle animation horizontal strip, +American man swimming breaststroke side-view facing right, each frame 24×20px +(total 96×20px), lit cigar clamped between grinning teeth, dark aviator +sunglasses, khaki shorts, arms alternating stroke positions, legs kicking, +transparent background, 1989 Cinemaware style, limited 32-colour palette, +no text, no outline border +``` + +**Aspect:** 1:1 (custom: 96×20) +**npm:** `npm run generate:sprite-player` + +--- + +### `images/sprite-drone.png` — 88 × 24 + +2-frame horizontal strip. Each frame: 44 × 24px (engine-off / engine-on). + +``` +Amiga pixel art sprite sheet, Shahed-136 loitering munition drone, +2-frame horizontal strip (total 88×24px), each frame 44×24px, +top-down plan view, frame 1 engine cold: dark grey delta-wing body +pointed nose left, red LED dot dim; frame 2 engine hot: same body with +small orange exhaust flame at rear, red LED bright, +transparent background, retro game enemy sprite, limited 32-colour palette +``` + +**Aspect:** 1:1 (custom: 88×24) +**npm:** `npm run generate:sprite-drone` + +--- + +### `images/sprite-boat.png` — 104 × 18 + +2-frame horizontal strip. Each frame: 52 × 18px (left-facing / right-facing). + +``` +Amiga pixel art sprite sheet, Iranian IRGC fast-attack patrol boat, +2-frame horizontal strip (total 104×18px), each frame 52×18px, +top-down view, dark hull with grey deck, mounted machine gun on foredeck, +tiny Iranian tricolour flag at stern, short wake lines at stern, +frame 1 boat facing left, frame 2 boat facing right (mirror), +transparent background, 1989 retro game enemy sprite, limited 32-colour palette +``` + +**Aspect:** 1:1 (custom: 104×18) +**npm:** `npm run generate:sprite-boat` + +--- + +### `images/sprite-zyn.png` — 16 × 12 + +Single frame. Power-up collectible. + +``` +Amiga pixel art sprite, Zyn nicotine pouch, single frame 16×12px, +small white rectangular foil pouch, bold blue ZYN text in pixel font, +subtle cyan glow outline around edges suggesting power-up, +transparent background, retro game collectible item, limited palette +``` + +**Aspect:** 1:1 (custom: 16×12) +**npm:** `npm run generate:sprite-zyn` + +--- + +### `images/sprite-cigar.png` — 24 × 8 + +Single frame. Collectible. + +``` +Amiga pixel art sprite, lit Cuban cigar floating in water, single frame 24×8px, +brown tobacco body with gold band at one third, glowing orange-red lit ember +at right end, tiny wisp of grey smoke curling up, ash grey at left tip, +transparent background, retro game collectible, limited 32-colour Amiga palette +``` + +**Aspect:** 1:1 (custom: 24×8) +**npm:** `npm run generate:sprite-cigar` + +--- + +### `images/sprite-coastguard.png` — 68 × 24 + +Single frame. Boss / end-of-level threat. + +``` +Amiga pixel art sprite, Omani Coast Guard patrol vessel, single frame 68×24px, +top-down view, dark navy hull with white superstructure, searchlight tower +amidships with beam indicated, Omani national flag at stern (red white green), +two rifle barrels protruding from starboard deck, small wake at stern, +dramatic and threatening, transparent background, retro game boss enemy, +limited 32-colour Amiga palette +``` + +**Aspect:** 1:1 (custom: 68×24) +**npm:** `npm run generate:sprite-coastguard` + +--- + +## Optional / Background Tiles + +### `images/bg-water.png` — 640 × 360 _(optional)_ + +If present, replaces the procedural wave animation. Tiled horizontally. + +``` +Amiga pixel art, top-down open ocean water texture tile 640×360px, +dark blue-green water with horizontal wave crest lines, subtle parallax +depth variation, light diffuse patterns, Strait of Hormuz deep water, +1989 retro game background scroll, limited 32-colour palette, no text +``` + +--- + +## Generation Order (recommended) + +1. `npm run generate:title-art` — gets the title screen looking right first +2. `npm run generate:scene-border` + `scene-hamid` + `scene-boat` — cutscenes +3. `npm run generate:win-art` + `lose-art` — end screens +4. Sprites last (hardest to get right at small sizes) + +--- + +## Style Notes for Consistency + +- **Palette:** Warm oranges, deep teals, dark navy, sandy ochre — Amiga OCS 32-colour +- **No** modern HDR, no depth-of-field blur, no photorealistic faces +- **Yes** chunky pixel dithering, flat colour regions, hard shadow edges +- All reference images: 1989 Cinemaware games (*Wings*, *It Came from the Desert*, *Defender of the Crown*) diff --git a/images/.gitkeep b/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 525f8aa..d4affe6 100644 --- a/index.html +++ b/index.html @@ -1,636 +1,1087 @@ - - - - - - Hell Strait - - - - - - - - -
- - + + + + HELL STRAIT + + + + +
+ + +
+
+ +
+
+
+ +
BASED ON A TRUE STORY • HORMUZ 2026
+
— PRESS SPACE OR TAP TO START —
+
A CITRINI PRODUCTIONS JOINT • ANALYST #3 REPORTING
+
+
+ + +
+ + +
+
+
+
+
OMANI BORDER GUARD
+
"You understand the rules here against photography,
journalism, and intelligence gathering."
+
[ SPACE / TAP TO CONTINUE ] ▶
+
+
-
-

Objective

-

Defend all 5 coastal plants through 12 waves - until the relief squadron arrives on station.

-
-

Loadout: 12 SM-3 interceptors + unlimited CIWS. - SM-3 resupply drops every 18 seconds.

+ +
+
+
+
+
ANALYST #3
+
He made me sign the pledge. A formal prohibition
against reporting. I read every word of it.
That made him more suspicious.
+
[ SPACE / TAP TO CONTINUE ] ▶
+
+
-
-

Fire Control

-
    -
  • CLICK SM-3 — aimed blast radius (limited)
    • -
  • SPACE CIWS — auto-target nearest (unlimited)
    • -
  • ESC abort / return to command
    • -
+ +
+
+
+
+
NARRATOR
+
At the canal: a man with a dinghy. No GPS.
Navigation by feel. $1,000 cash.
His name was Hamid.
+
[ SPACE / TAP TO CONTINUE ] ▶
+
+
+ +
+
+
+
+
ANALYST #3 → HAMID [SIGNAL]
+
"The CID told me to cancel. What if we just went anyway?"
+
+
HAMID
+
"Fuck the police."
+
+
[ SPACE / TAP TO CONTINUE ] ▶
+
- - -
- - · - + +
+
+
+
+
NARRATOR
+
The "speedboat" was a 40-year-old dinghy with a
few-hundred-CC engine. Shahed drones overhead.
IRGC patrol boats in the distance.
+
+
[ SPACE / TAP TO CONTINUE ] ▶
+
+ +
+
+
+
+
NARRATOR
+
So I figured — if I was out here anyway —
I might as well go for it.
I hopped in the water. Cigar in my mouth. Shaheds above.
+
+
[ SPACE / TAP — SWIM! ] ▶
+
- -
-
- 0 - 90s - HI 0 - W0 +
+ + +
+
+
+
VITALITY
+
+
+
+
+
+ ZYN + 0 +
+
+ CIGARS + 0
-
-
SM-3 ×12
-
-
+
+ SCORE + 0 +
+
+ +
+ + +
+
+
[ images/win-art.png ]
+
640×160 · Man floating, cigar, victory, drones above
+
+
YOU MADE IT.
+
+ Cigars. Shaheds. Coast Guard.
+ You swam the Strait of Hormuz and lived.
+ Tell your grandkids.
+
SCORE: 0
+
[ SPACE / TAP TO PLAY AGAIN ]
+
- -
-
VICTORY
-
-
ENTER / ESC — menu · R — play again
+ +
+
+
[ images/lose-art.png ]
+
640×160 · Coast Guard vessel, searchlight, rifles drawn
+
INTERCEPTED.
+
+ The Coast Guard got you.
+ They told you you were a moron.
+ They were not wrong. +
+
SCORE: 0
+
[ SPACE / TAP TO TRY AGAIN ]
+
+ + +
+
+ + - + + diff --git a/package.json b/package.json index c03877e..4e0a11a 100644 --- a/package.json +++ b/package.json @@ -7,14 +7,31 @@ "build": "tsc --noEmit && vite build", "preview": "vite preview", "generate:art": "node scripts/stability-generate.mjs", - "generate:bg-strait": "node scripts/stability-generate.mjs -- --name=bg-strait --aspect=16:9", - "generate:command-deck": "node scripts/stability-generate.mjs -- --name=command-deck --aspect=16:9", - "generate:carrier": "node scripts/stability-generate.mjs -- --preset=carrier --name=carrier-cinemaware --aspect=16:9", - "generate:gulf-bg": "node scripts/stability-generate.mjs -- --preset=gulf-bg --name=gulf-bg --aspect=16:9", - "generate:missile-inbound": "node scripts/stability-generate.mjs -- --preset=missile-inbound --name=missile-inbound --aspect=9:16", + + "generate:title-art": "node scripts/stability-generate.mjs -- --out=images/title-art.png --aspect=16:9", + "generate:scene-border": "node scripts/stability-generate.mjs -- --out=images/scene-border.png --aspect=16:9", + "generate:scene-hamid": "node scripts/stability-generate.mjs -- --out=images/scene-hamid.png --aspect=16:9", + "generate:scene-boat": "node scripts/stability-generate.mjs -- --out=images/scene-boat.png --aspect=16:9", + "generate:win-art": "node scripts/stability-generate.mjs -- --out=images/win-art.png --aspect=16:9", + "generate:lose-art": "node scripts/stability-generate.mjs -- --out=images/lose-art.png --aspect=16:9", + "generate:sprite-player": "node scripts/stability-generate.mjs -- --out=images/sprite-player.png --aspect=1:1", + "generate:sprite-drone": "node scripts/stability-generate.mjs -- --out=images/sprite-drone.png --aspect=1:1", + "generate:sprite-boat": "node scripts/stability-generate.mjs -- --out=images/sprite-boat.png --aspect=1:1", + "generate:sprite-zyn": "node scripts/stability-generate.mjs -- --out=images/sprite-zyn.png --aspect=1:1", + "generate:sprite-cigar": "node scripts/stability-generate.mjs -- --out=images/sprite-cigar.png --aspect=1:1", + "generate:sprite-coastguard":"node scripts/stability-generate.mjs -- --out=images/sprite-coastguard.png --aspect=1:1", + "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", + + "generate:bg-strait": "node scripts/stability-generate.mjs -- --name=bg-strait --aspect=16:9", + "generate:command-deck": "node scripts/stability-generate.mjs -- --name=command-deck --aspect=16:9", + "generate:carrier": "node scripts/stability-generate.mjs -- --preset=carrier --name=carrier-cinemaware --aspect=16:9", + "generate:gulf-bg": "node scripts/stability-generate.mjs -- --preset=gulf-bg --name=gulf-bg --aspect=16:9", + "generate:missile-inbound": "node scripts/stability-generate.mjs -- --preset=missile-inbound --name=missile-inbound --aspect=9:16", "generate:missile-interceptor": "node scripts/stability-generate.mjs -- --preset=missile-interceptor --name=missile-interceptor --aspect=9:16", - "generate:gulf-assets": "npm run generate:gulf-bg && npm run generate:carrier", - "generate:all-stability": "npm run generate:bg-strait && npm run generate:command-deck && npm run generate:gulf-bg && npm run generate:carrier && npm run generate:missile-inbound && npm run generate:missile-interceptor" + "generate:gulf-assets": "npm run generate:gulf-bg && npm run generate:carrier", + "generate:all-stability": "npm run generate:bg-strait && npm run generate:command-deck && npm run generate:gulf-bg && npm run generate:carrier && npm run generate:missile-inbound && npm run generate:missile-interceptor" }, "dependencies": { "phaser": "^3.90.0", diff --git a/scripts/stability-generate.mjs b/scripts/stability-generate.mjs index 95f58bc..80443e6 100644 --- a/scripts/stability-generate.mjs +++ b/scripts/stability-generate.mjs @@ -6,25 +6,36 @@ * npm run generate:art -- "your prompt here" * npm run generate:art -- --name=meridian-deck "prompt..." * npm run generate:art -- --name=sprites --aspect=1:1 "prompt..." + * npm run generate:art -- --out=images/title-art.png --aspect=16:9 "prompt..." * npm run generate:art # default strait title prompt * - * Prompt ideas for Hell Strait (Amiga × Cinemaware × Bitmap): - * Title / sky plate — sunset strait, tanker silhouettes, dramatic clouds, limited palette feel, - * no readable text, no modern HDR, no depth-of-field, oil painting meets 320×200 dither. - * Meridian deck — dark chrome UI, fake CRT meters, gold trim, cold blue backlight, empty panels. - * Ashar brief — parchment war map, red marker strokes, torchlight, serious not fantasy cartoon. - * Sprites — isolated drone + boat on flat background for cutout (then index-colour in Aseprite). - * Strait / hub plates — npm run generate:bg-strait | generate:command-deck (default strait prompt). - * Gulf SDI — npm run generate:gulf-bg | generate:carrier | generate:missile-inbound | - * generate:missile-interceptor, or npm run generate:all-stability for every preset. - * Outputs land in public/generated/; Gulf SDI loads PNGs when present and keeps procedural fallback. + * Swim game image shortcuts (see IMAGES.md for all prompts): + * npm run generate:title-art → images/title-art.png + * npm run generate:scene-border → images/scene-border.png + * npm run generate:scene-hamid → images/scene-hamid.png + * npm run generate:scene-boat → images/scene-boat.png + * npm run generate:win-art → images/win-art.png + * npm run generate:lose-art → images/lose-art.png + * npm run generate:sprite-player → images/sprite-player.png + * npm run generate:sprite-drone → images/sprite-drone.png + * npm run generate:sprite-boat → images/sprite-boat.png + * npm run generate:sprite-zyn → images/sprite-zyn.png + * npm run generate:sprite-cigar → images/sprite-cigar.png + * npm run generate:sprite-coastguard → images/sprite-coastguard.png + * npm run generate:all → all of the above + * npm run generate:screens → screen backgrounds only + * npm run generate:sprites → sprites only + * + * IMPORTANT: Each npm run generate:* command only passes the --out flag. + * You MUST also pass the prompt from IMAGES.md as a final argument: + * npm run generate:title-art -- "Amiga Cinemaware 1989 game title screen..." * * Never commit API keys — use .env only (see .env.example). */ import "dotenv/config"; import { writeFileSync, mkdirSync } from "node:fs"; import { fileURLToPath } from "node:url"; -import { dirname, join } from "node:path"; +import { dirname, join, resolve } from "node:path"; const __dirname = dirname(fileURLToPath(import.meta.url)); const root = join(__dirname, ".."); @@ -71,12 +82,15 @@ const PRESET_GULF_BG = [ function parseArgs(argv) { let name = null; + let out = null; // --out=images/title-art.png (full relative path) let aspect = "16:9"; let preset = null; const rest = []; for (const a of argv) { if (a.startsWith("--name=")) { name = a.slice(7).replace(/[^a-z0-9-_]/gi, "-"); + } else if (a.startsWith("--out=")) { + out = a.slice(6).trim(); } else if (a.startsWith("--aspect=")) { aspect = a.slice(9).trim() || "16:9"; } else if (a.startsWith("--preset=")) { @@ -85,7 +99,7 @@ function parseArgs(argv) { rest.push(a); } } - return { name, aspect, preset, rest }; + return { name, out, aspect, preset, rest }; } async function main() { @@ -95,7 +109,7 @@ async function main() { process.exit(1); } - const { name, aspect, preset, rest } = parseArgs(process.argv.slice(2)); + const { name, out, aspect, preset, rest } = parseArgs(process.argv.slice(2)); const userPrompt = rest.join(" ").trim(); let prompt = userPrompt; if (!prompt && preset === "carrier") { @@ -112,7 +126,15 @@ async function main() { } if (!prompt) prompt = DEFAULT_PROMPT; - mkdirSync(outDir, { recursive: true }); + // Resolve output path: --out takes priority over --name, both fall back to public/generated/ + let resolvedOutPath; + if (out) { + resolvedOutPath = join(root, out); + } else { + const base = name || `strait-${Date.now()}`; + resolvedOutPath = join(outDir, `${base}.png`); + } + mkdirSync(dirname(resolvedOutPath), { recursive: true }); const form = new FormData(); form.append("prompt", prompt); @@ -130,9 +152,6 @@ async function main() { body: form, }); - const base = name || `strait-${Date.now()}`; - const outPath = join(outDir, `${base}.png`); - if (!res.ok) { const errText = await res.text(); console.error(`Stability API ${res.status}:`, errText); @@ -140,8 +159,8 @@ async function main() { } const buf = Buffer.from(await res.arrayBuffer()); - writeFileSync(outPath, buf); - console.log("Wrote", outPath, `(${buf.length} bytes)`); + writeFileSync(resolvedOutPath, buf); + console.log("Wrote", resolvedOutPath, `(${buf.length} bytes)`); } main().catch((e) => {