monster/gigaslop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix live deploy: runtime asset URLs must be relative under /games/gigaslop/

Browse Source 
Vite base covered the bundle but Assets.load/img srcs used absolute
/assets/ paths that 404'd on the arcade subpath — the game rendered
placeholder squares in production. All runtime asset references are
now relative.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
type-two 2026-08-01 21:19:56 +10:00
parent 85b81982b0
commit 3a29e08195
6 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/render/scene.ts
View File

@ -32,11 +32,11 @@ export class Scene {
// load textures with graceful fallback — sprite list derives from the catalog
const names = [...new Set(CATALOG.map((d) => d.sprite))];
for (const n of names) {
const t = await this.tryLoad(`/assets/gen/${n}_cut.png`);
const t = await this.tryLoad(`assets/gen/${n}_cut.png`);
if (t) this.textures.set(n, t);
}
for (let i = 0; i < 10; i++) {
const t = await this.tryLoad(`/assets/slop/slop_${String(i).padStart(2, "0")}.png`);
const t = await this.tryLoad(`assets/slop/slop_${String(i).padStart(2, "0")}.png`);
if (t) this.slopTextures.push(t);
}

6
src/sim/rooms.ts
View File

@ -16,17 +16,17 @@ export interface RoomDef {
export const ROOMS: Record<string, RoomDef> = {
bedroom: {
id: "bedroom", name: "Bedroom", image: "/assets/gen/room.png",
id: "bedroom", name: "Bedroom", image: "assets/gen/room.png",
w: 10, h: 10, tileW: 82, tileH: 41, origin: { x: 510, y: 346 },
imgW: 1024, imgH: 768, breakerBase: 1400,
},
garage: {
id: "garage", name: "The Garage", image: "/assets/gen/garage.png",
id: "garage", name: "The Garage", image: "assets/gen/garage.png",
w: 14, h: 14, tileW: 58.5, tileH: 29.5, origin: { x: 510, y: 330 },
imgW: 1024, imgH: 768, breakerBase: 2400,
},
warehouse: {
id: "warehouse", name: "The Warehouse", image: "/assets/gen/warehouse.png",
id: "warehouse", name: "The Warehouse", image: "assets/gen/warehouse.png",
w: 20, h: 20, tileW: 41, tileH: 20.5, origin: { x: 510, y: 330 },
imgW: 1024, imgH: 768, breakerBase: 8000,
},

4
src/ui/hud.ts
View File

@ -166,7 +166,7 @@ export class Hud {
const el = document.createElement("div");
el.className = "shop-item" + (it.locked || !it.affordable ? " dim" : "") +
(this.selectedShop === it.def.id ? " selected" : "");
el.innerHTML = `<img src="/assets/gen/${it.def.sprite}_cut.png" onerror="this.style.visibility='hidden'"/>
el.innerHTML = `<img src="assets/gen/${it.def.sprite}_cut.png" onerror="this.style.visibility='hidden'"/>
<div><div class="nm">${it.def.name}</div>
${it.locked ? `<div class="lock">🔒 earn $${it.def.unlockAt}</div>` : `<div class="cost">$${it.def.cost}</div>`}</div>`;
el.title = it.def.desc;
@ -322,7 +322,7 @@ export class Hud {
const latest = s.videos.slice(-6).reverse();
vids.innerHTML = latest.map((v) => `
<div class="vid">
<img src="/assets/slop/slop_${String(v.thumb).padStart(2, "0")}.png"/>
<img src="assets/slop/slop_${String(v.thumb).padStart(2, "0")}.png"/>
<div><div class="t">${(TITLES as string[])[v.title] ?? "slop"}</div>
<div class="v">👁 ${fmt(v.views, 0)} views ${v.viral > 6 ? '<b class="viral">🔥VIRAL</b>' : ""}${v.dead ? " · faded" : ""}</div></div>
</div>`).join("");

4
src/ui/panels.ts
View File

@ -211,7 +211,7 @@ export class Panels {
${def.gpuSlots ? `<h4>GPU SLOTS (${d.gpus.length}/${def.gpuSlots})</h4>
${d.gpus.map((g, i) => {
const gd = GPU_DEF[g];
return `<div class="node owned gpu-row"><img src="/assets/gen/${gd.sprite}_cut.png"/>
return `<div class="node owned gpu-row"><img src="assets/gen/${gd.sprite}_cut.png"/>
<span>${gd.name}<small>${gd.tok} tok/s · ${gd.watts}W · ${gd.vram}GB</small></span>
<button class="mclose" data-cmd="sellgpu" data-arg="${i}" title="sell +$${Math.round(gd.cost * 0.5)}">💸</button></div>`;
}).join("")}
@ -219,7 +219,7 @@ export class Panels {
? `<h4>INSTALL CARD</h4>` + GPUS
.filter((g) => (g.unlockAt ?? 0) <= s.earnedTotal && (!g.rackOnly || def.rackClass))
.map((g) => `<button class="node buy gpu-row ${s.cash >= g.cost ? "" : "dim"}" data-cmd="gpu" data-arg="${g.id}">
<img src="/assets/gen/${g.sprite}_cut.png"/>
<img src="assets/gen/${g.sprite}_cut.png"/>
<span>${g.name}<small>${g.tok} tok/s · ${g.watts}W · ${g.vram}GB · heat ${g.heat} · $${fmt(g.cost)}</small></span></button>`).join("")
: ""}` : ""}
${compute ? `<h4>SOCKETS (${d.upgrades.length}/${SOCKET_SLOTS})</h4>

28
tools/cf_cut.py Normal file
View File

@ -0,0 +1,28 @@
#!/usr/bin/env python3
"""Take CF-flux JPEGs (name_1.jpg) → MB bg_remove_local → autocrop →
public/assets/gen/<name>_cut.png. Usage: python3 tools/cf_cut.py <indir>"""
import pathlib, sys
sys.path.insert(0, str(pathlib.Path(__file__).parent))
from mb_gen import ROOT, run_batch, upload, beat
from PIL import Image
indir = pathlib.Path(sys.argv[1])
gen = ROOT / "public/assets/gen"
jobs = []
for jpg in sorted(indir.glob("*_1.jpg")):
name = jpg.stem[:-2]
jobs.append((f"{name}_cut", "bg_remove_local", upload(jpg),
{"resolution": 1024, "background": "transparent"}))
beat(f"uploaded {name}")
results = run_batch(jobs, gen)
for label in results:
p = gen / f"{label}.png"
im = Image.open(p).convert("RGBA")
bbox = im.split()[-1].getbbox()
if bbox:
l, t, r, b = bbox
im.crop((max(0, l - 8), max(0, t - 8), min(im.width, r + 8), min(im.height, b + 8))).save(p)
beat(f"done: {len(results)} sprites cut + cropped into {gen}")

25
tools/sprites.tsv Normal file
View File

@ -0,0 +1,25 @@
# GigaSlop hardware sprite manifest — CF flux-1-schnell via 90sDJsim/tools/flux.mjs
# name<TAB>prompt
desk_pc a beat-up beige gaming PC tower with tempered glass side panel removed, one glowing RGB graphics card visible inside, dusty heatsinks, tangled SATA cables spilling out, cable ties, detailed isometric video game asset, single object viewed from a three-quarter high angle, intricate electronic greebles, braided cables, glowing status LEDs, brushed metal and matte black plastic with dust and scratches, neon cyan and magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
desk a cluttered wooden computer desk with a CRT monitor showing static, mechanical keyboard with missing keys, crushed energy drink cans, sticky notes, a tangle of cables draping off the back edge, detailed isometric video game asset, single object viewed from a three-quarter high angle, neon cyan and magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
router a consumer wifi router with four antennas at different angles, a nest of blue and yellow ethernet patch cables plugged in and coiling away, blinking green and amber LEDs, wall-wart power brick, detailed isometric video game asset, single object viewed from a three-quarter high angle, matte black plastic with dust, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
desk_fan a cheap plastic oscillating desk fan with a dented safety cage and a frayed power cord coiled at its base, detailed isometric video game asset, single object viewed from a three-quarter high angle, worn beige plastic with scuffs, neon magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
gpu_rig an open-air mining rig frame built from milk crates and aluminum extrusion, four mismatched graphics cards on PCIe riser ribbons, sagging power cables with zip ties, a cheap power meter dangling, glowing fans, detailed isometric video game asset, single object viewed from a three-quarter high angle, intricate electronic greebles, braided cables, glowing status LEDs, neon cyan and magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
window_ac a battered window air conditioning unit with bent aluminum fins, rust streaks, a drip stain, and a taped power cord, detailed isometric video game asset, single object viewed from a three-quarter high angle, worn beige metal with scratches, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
power_strip an overloaded power strip surge protector with every socket filled, three plug adapters stacked on top of each other, slightly scorched around one outlet, cable spaghetti, detailed isometric video game asset, single object viewed from a three-quarter high angle, dark tech-noir palette with neon magenta rim lighting, centered on plain solid dark charcoal background, no text, crisp edges, high detail
server_rack_mini a half-height 19 inch server rack with mixed rack servers, patch panel with dozens of color-coded cables routed through cable management arms, blinking green and blue status LEDs, perforated side panels, detailed isometric video game asset, single object viewed from a three-quarter high angle, intricate electronic greebles, brushed metal with scratches, neon cyan and magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
breaker_panel an industrial grey electrical breaker panel with the metal door open showing rows of circuit breakers, thick armored conduit pipes entering from the top, warning stickers, detailed isometric video game asset, single object viewed from a three-quarter high angle, scuffed grey enamel metal, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
fiber_modem a sleek black fiber optic terminal box with a glowing blue optical cable loop, status LEDs, and a bundle of yellow fiber patch cords with dust caps, detailed isometric video game asset, single object viewed from a three-quarter high angle, matte black plastic, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
cash_furnace a cast iron pot-belly furnace with its door open showing burning dollar bills, a conveyor of loose cash feeding the fire, warm orange fire glow spilling out, soot stains, detailed isometric video game asset, single object viewed from a three-quarter high angle, dark tech-noir palette with fire glow and neon magenta rim light, centered on plain solid dark charcoal background, no text, crisp edges, high detail
dumb_switch a small cheap plastic 5-port ethernet switch buried under a spaghetti tangle of blue yellow and red patch cables, green LEDs blinking, sticker residue, detailed isometric video game asset, single object viewed from a three-quarter high angle, dark tech-noir palette with neon cyan rim lighting, centered on plain solid dark charcoal background, no text, crisp edges, high detail
managed_switch a professional 1U rackmount managed network switch with 24 ports half-filled with color-coded patch cables neatly combed into a cable arm, orange and green status LEDs, vent grilles, detailed isometric video game asset, single object viewed from a three-quarter high angle, brushed dark metal, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
ssd_shoebox an old cardboard shoebox overflowing with loose SATA SSDs and a tangle of red SATA cables, some drives stacked crooked, marker scribbles on the box, detailed isometric video game asset, single object viewed from a three-quarter high angle, dark tech-noir palette with neon magenta rim lighting, centered on plain solid dark charcoal background, no text, crisp edges, high detail
nvme_hoard a stack of NVMe M.2 solid state drives in an open anti-static tray beside a drive dock with one drive inserted, tiny heatsinks, static bags, detailed isometric video game asset, single object viewed from a three-quarter high angle, dark tech-noir palette with neon cyan rim lighting, centered on plain solid dark charcoal background, no text, crisp edges, high detail
nas_tower a black tower NAS storage server with six drive bays, one bay slid open showing a hard drive, activity LEDs flickering blue, a braided ethernet cable and power cable trailing, detailed isometric video game asset, single object viewed from a three-quarter high angle, matte black metal with dust, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
immersion_tank an open-top industrial immersion cooling tank filled with glowing translucent mineral oil, server motherboards submerged in rows with bubbles rising, external pump with looping clear tubes, drips on the rim, sci-fi green glow, detailed isometric video game asset, single object viewed from a three-quarter high angle, brushed steel tank with warning stripes, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
crac_unit a tall white industrial precision air conditioning unit for server rooms with vent grilles, a small status screen glowing teal, thick insulated refrigerant pipes elbowing into the top, detailed isometric video game asset, single object viewed from a three-quarter high angle, clean white enamel with scuffs, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
extinguisher a red CO2 fire extinguisher with a black horn nozzle, inspection tag hanging from the pin, small scuffs and a safety sticker, detailed isometric video game asset, single object viewed from a three-quarter high angle, glossy red enamel, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
gpu_budget a single dusty old budget graphics card with one small wobbly fan, exposed PCB with capacitors, bent bracket, product photo style on plain background, detailed video game item icon, three-quarter angle, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
gpu_gaming a chunky three-fan RGB gaming graphics card with glowing rainbow accents, backplate, thick heatsink fins, product photo style, detailed video game item icon, three-quarter angle, neon magenta rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
gpu_workstation a sleek blower-style professional workstation graphics card in matte black and gold, single turbine fan, clean minimal design, product photo style, detailed video game item icon, three-quarter angle, neon cyan rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
gpu_datacenter a gold and black datacenter AI accelerator card with no fans, massive fin-stack heatsink, exposed gold contacts, engraved patterns, product photo style, detailed video game item icon, three-quarter angle, neon cyan and gold rim lighting, dark tech-noir palette, centered on plain solid dark charcoal background, no text, crisp edges, high detail
Can't render this file because it has a wrong number of fields in line 3.