feat: change color of large objects

Author: aster-void

public/assets/Screenshot From 2025-05-23 14-52-24.png

@@ -93,6 +93,7 @@ export function copy(cx: Context) {
 
   History.record(cx);
 
+  cx.dynamic.isInventoryBlockLarge = movableObject.relativePositions.length >= 2;
   cx.dynamic.player.activated = true;
 }
 export function paste(cx: Context) {
@@ -156,6 +157,7 @@ export function cut(cx: Context) {
   printCells(createSnapshot(cx).game.cells, "cut");
   History.record(cx);
 
+  cx.dynamic.isInventoryBlockLarge = movableObject.relativePositions.length >= 2;
   cx.dynamic.player.activated = true;
 }
 
@@ -192,13 +194,20 @@ export function placeMovableObject(cx: Context, x: number, y: number, object: Mo
     return;
   }
   const newObjectId = Math.random().toString();
+  const isBlockLarge = object.relativePositions.length >= 2;
   for (const rel of object.relativePositions) {
     const positionX = x + rel.x;
     const positionY = y + rel.y;
-    grid.setBlock(cx, positionX, positionY, {
-      block: object.block,
-      objectId: newObjectId,
-      switchId: undefined,
-    });
+    grid.setBlock(
+      cx,
+      positionX,
+      positionY,
+      {
+        block: object.block,
+        objectId: newObjectId,
+        switchId: undefined,
+      },
+      isBlockLarge,
+    );
   }
 }

public/assets/block-large.png

@@ -19,6 +19,7 @@ export const elapsedTimePerFrame = 30;
 
 export const laserWidth = 0.3;
 
+export const LARGE_BLOCK_COLOR = 0xff00a0; // 大きなブロックは別の色で表示する
 export enum Block {
   block = "block",
   movable = "movable",

src/ability.ts

@@ -118,7 +118,15 @@ export class Grid {
           case Block.fallable:
           case Block.goal:
           case Block.switchBase: {
-            const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
+            const objectId = stageDefinition.blockGroups.find((g) => g.x === x && g.y === y)?.objectId || undefined;
+            let movableBlockColor: number | undefined = undefined;
+            if (
+              dblock === Block.movable &&
+              stageDefinition.blockGroups.filter((b) => b.objectId === objectId).length >= 2
+            ) {
+              movableBlockColor = consts.LARGE_BLOCK_COLOR;
+            }
+            const sprite = createSprite(cellSize, dblock, x, y, this.marginY, movableBlockColor);
             stage.addChild(sprite);
             vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
             break;
@@ -211,7 +219,10 @@ export class Grid {
         const vsom = this.__vsom[y][x];
         const newCell = newGrid[y][x];
         if (vsom?.block !== newCell.block) {
-          this.setBlock(cx, x, y, newCell);
+          // TODO:this uses a lot of memory
+          const isBlockLarge =
+            newGrid.flatMap((row) => row.filter((cell) => cell.objectId === newCell.objectId)).length >= 2;
+          this.setBlock(cx, x, y, newCell, isBlockLarge);
         }
       }
     }
@@ -345,6 +356,7 @@ export class Grid {
     x: number,
     y: number,
     cNewCell: GridCell,
+    isLargeBlock?: boolean, // todo: please fix shitty code this someone please
   ) {
     const stage = cx._stage_container;
     const cells = get(cx.state).cells;
@@ -363,6 +375,8 @@ export class Grid {
       assert(cNewCell.objectId == null, "Cell is not movable but has an objectId");
     }
 
+    const movableBlockColor = isLargeBlock ? consts.LARGE_BLOCK_COLOR : undefined;
+
     if (vprev?.block === Block.switch && cNewCell.block === Block.switchPressed) {
       // switchがプレイヤーに押されるとき
       assert(
@@ -409,7 +423,7 @@ export class Grid {
         console.log("cell.block", cNewCell.block);
         return;
       }
-      const movableSprite = createSprite(blockSize, cNewCell.block, x, y, marginY);
+      const movableSprite = createSprite(blockSize, cNewCell.block, x, y, marginY, movableBlockColor);
       stage.addChild(movableSprite);
       assert(cNewCell.objectId !== undefined, "movable block must have objectId");
       assert(
@@ -551,7 +565,8 @@ export class Grid {
           break;
         }
         case Block.movable: {
-          const movableSprite = createSprite(blockSize, cNewCell.block, x, y, marginY);
+          const movableSprite = createSprite(blockSize, cNewCell.block, x, y, marginY, movableBlockColor);
+          console.log(movableBlockColor);
           stage.addChild(movableSprite);
           assert(cNewCell.objectId !== undefined, "movable block must have objectId");
           cells[y][x] = {
@@ -666,7 +681,6 @@ export class Grid {
           vSwapCell.vy = vcell.vy;
           vcell.dy = 0;
           vcell.vy = 0;
-          // また抽象化失敗してる...
           vSwapCell.sprite.y = (y + swapDiff) * blockSize + marginY + vSwapCell.dy;
           console.log("dy", vSwapCell.dy, "vy", vSwapCell.vy);
         }
@@ -908,7 +922,8 @@ function createSprite(
   x: number,
   y: number,
   marginY: number,
-  switchColor?: number, // 例: #ffa500
+  // 使われたり使われなかったりするので注意
+  color?: number, // 例: #ffa500
 ) {
   switch (block) {
     case Block.block: {
@@ -918,10 +933,14 @@ function createSprite(
       return sprite;
     }
     case Block.movable: {
-      const movableSprite = new Sprite(rockTexture);
-      movableSprite.tint = 0xff0000;
-      updateSprite(movableSprite, blockSize, x, y, marginY, 0);
-      return movableSprite;
+      const sprite = new Sprite(rockTexture);
+      if (color) {
+        sprite.tint = color;
+      } else {
+        sprite.tint = 0xff0000;
+      }
+      updateSprite(sprite, blockSize, x, y, marginY, 0);
+      return sprite;
     }
     case Block.fallable: {
       const movableSprite = new Sprite(fallableTexture);
@@ -931,7 +950,7 @@ function createSprite(
     }
     case Block.switch: {
       const switchSprite = new Sprite(switchTexture);
-      if (switchColor) switchSprite.tint = switchColor;
+      if (color) switchSprite.tint = color;
       updateSprite(switchSprite, blockSize, x, y, marginY, 0);
       return switchSprite;
     }
@@ -943,23 +962,23 @@ function createSprite(
     case Block.inverseSwitchingBlockON:
     case Block.switchingBlockOFF: {
       const sprite = new Sprite(rockTexture);
-      if (switchColor) sprite.tint = switchColor;
+      if (color) sprite.tint = color;
       else sprite.tint = 0xffa500;
       updateSprite(sprite, blockSize, x, y, marginY, 0);
       return sprite;
     }
     case Block.inverseSwitchingBlockOFF:
     case Block.switchingBlockON: {
       const sprite = new Sprite(rockTexture);
-      if (switchColor) sprite.tint = switchColor;
+      if (color) sprite.tint = color;
       else sprite.tint = 0xffa500;
       sprite.alpha = 0.3;
       updateSprite(sprite, blockSize, x, y, marginY, 0);
       return sprite;
     }
     case Block.switchPressed: {
       const sprite = new Sprite(switchPressedTexture);
-      if (switchColor) sprite.tint = switchColor;
+      if (color) sprite.tint = color;
       else sprite.tint = 0xffa500;
       updateSprite(sprite, blockSize, x, y, marginY, 0);
       return sprite;

src/constants.ts

@@ -109,10 +109,10 @@ function restore(cx: Context, ss: StateSnapshot) {
   cx.dynamic.player.x = ss.playerX;
   cx.dynamic.player.y = ss.playerY;
   cx.dynamic.player.facing = ss.playerFacing;
+  cx.dynamic.isInventoryBlockLarge = (ss.game.inventory?.relativePositions.length ?? 0) >= 2;
   cx.grid.diffAndUpdateTo(cx, ss.game.cells);
   cx.grid.clearFallableSprites(cx);
   cx.grid.clearLaser(cx);
-  printCells(ss.game.cells, "restore");
 }
 function stash(cx: Context) {
   cx.history.update((prev) => {

src/grid.ts

@@ -94,6 +94,7 @@ export async function setup(
   const initialDynamic = {
     focus: null,
     player: null,
+    isInventoryBlockLarge: false,
   } satisfies GameDynamic;
   const state = writable<GameState>(structuredClone(initialGameState));
   const grid = new Grid(
@@ -116,7 +117,7 @@ export async function setup(
     state: state,
     history,
     config,
-    elapsed: 0, // does this need to be writable? like is anyone listening to this/
+    elapsed: 0,
   };
 
   function reset() {
@@ -214,7 +215,7 @@ export async function setup(
   };
 
   const uiContext = derived([state, history], ([$state, $history]) => {
-    return useUI($state, $history);
+    return useUI($state, $history, cx.dynamic);
   });
   uiContext.subscribe((uiInfo) => {
     bindings.uiInfo = uiInfo;

src/history.ts

@@ -58,6 +58,7 @@ export type GameHistory = {
 export type GameDynamic = {
   focus: Coords | null; // current focus coordinates
   player: Player | null;
+  isInventoryBlockLarge: boolean; // please forgive me
 };
 
 export type Context = {
@@ -81,6 +82,7 @@ export type Context = {
 
 export type UIInfo = {
   inventory: MovableObject | null;
+  inventoryIsLarge: boolean;
   inventoryIsInfinite: boolean;
   copy: number;
   paste: number;

src/main.ts

@@ -63,15 +63,19 @@ onDestroy(() => bindings.destroy());
       // if this isn't working well, we can use window.location.reload(); instead
       bindings.reset();
     }}
-    stageNum={stageNum}
+    {stageNum}
   />
   <GoalMenu
     goaled={uiContext.goaled}
     {nextStage}
     reset={() => bindings.reset()}
-    stageNum={stageNum}
+    {stageNum}
+  />
+  <GameOverMenu
+    gameover={uiContext.gameover}
+    reset={() => bindings.reset()}
+    {stageNum}
   />
-  <GameOverMenu gameover={uiContext.gameover} reset={() => bindings.reset()} stageNum={stageNum} />
   <div
     class="uiBackground"
     style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: end; "
@@ -85,13 +89,22 @@ onDestroy(() => bindings.destroy());
     <span style="">Clipboard:</span>
     <div class="inventory">
       {#if uiContext.inventory?.block === Block.movable}
-        <!-- todo: tint 0xff0000 をする必要があるが、そもそもこの画像は仮なのか本当に赤色にするのか -->
-        <img
-          src="/assets/block-red.png"
-          alt="inventory"
-          width="100%"
-          height="100%"
-        />
+        {#if uiContext.inventoryIsLarge}
+          <img
+            src="/assets/block-large.png"
+            alt="inventory"
+            width="100%"
+            height="100%"
+          />
+        {:else}
+          <!-- todo: tint 0xff0000 をする必要があるが、そもそもこの画像は仮なのか本当に赤色にするのか -->
+          <img
+            src="/assets/block-red.png"
+            alt="inventory"
+            width="100%"
+            height="100%"
+          />
+        {/if}
       {:else if uiContext.inventory?.block === Block.fallable}
         <img
           src="/assets/woodenbox.png"

src/public-types.ts

@@ -1,8 +1,9 @@
-import type { GameHistory, GameState, UIInfo } from "./public-types.ts";
+import type { GameDynamic, GameHistory, GameState, UIInfo } from "./public-types.ts";
 
-export function useUI(state: GameState, history: GameHistory): UIInfo {
+export function useUI(state: GameState, history: GameHistory, dynamic: GameDynamic): UIInfo {
   return {
     inventory: state.inventory,
+    inventoryIsLarge: dynamic.isInventoryBlockLarge,
     inventoryIsInfinite: state.inventoryIsInfinite,
     copy: state.usage.copy,
     paste: state.usage.paste,