feat: add roads, improve editor

Author: kt3k

editor/deno.json

@@ -13,7 +13,8 @@
     "extension": "deno -A jsr:@kt3k/pack@0.1.14 extension.tsx -o out/extension.js --external vscode --format cjs",
     "webview": "deno -A jsr:@kt3k/pack@0.1.14 webview.ts -o out/webview.js",
     "webview-style": "deno -A npm:tailwindcss@3 -o out/style.css",
-    "package": "deno -A --unstable-unsafe-proto npm:@vscode/vsce package"
+    "package": "deno task compile && deno -A --unstable-unsafe-proto npm:@vscode/vsce package",
+    "update-package": "deno task package && code --install-extension vscode-bw-block-editor-0.4.0.vsix",
   },
   "lint": {
     "rules": {

editor/extension.tsx

@@ -39,8 +39,17 @@ function resolveCustomTextEditor(
         <div class="toolbox fixed left-0 top-0 flex items-center gap-2 bg-neutral-900/50 w-full">
           <div class="cell-switch flex items-center relative">
           </div>
-          <div class="mode-switch" title="Press 's' to toggle">
-            dot
+          <div class="group relative">
+            <span class="mode-switch">dot</span>
+            <span class="
+              absolute top-full left-1/2 -translate-x-1/2 mt-2
+              hidden group-hover:block
+            bg-neutral-800 text-white text-sm px-2 py-1 rounded-lg
+              border border-neutral-600
+              whitespace-nowrap pointer-events-none
+            ">
+              Press "s" to toggle
+            </span>
           </div>
         </div>
         <script src={u("out/webview.js")} type="module"></script>

editor/vscode-bw-block-editor-0.4.0.vsix

@@ -167,16 +167,8 @@ function CellSwitch({ on, el, subscribe }: Context) {
   })
 }
 
-function ModeSwitch({ on, subscribe, el }: Context<HTMLElement>) {
+function ModeSwitch({ subscribe, el }: Context<HTMLElement>) {
   subscribe(mode, (mode) => el.textContent = mode)
-
-  on("click", () => {
-    if (mode.get() === "dot") {
-      mode.update("stroke")
-    } else {
-      mode.update("dot")
-    }
-  })
 }
 
 function FieldBlockCanvas({ on, el }: Context<HTMLCanvasElement>) {
@@ -206,7 +198,7 @@ function FieldBlockCanvas({ on, el }: Context<HTMLCanvasElement>) {
   }
 
   on("click", (e) => {
-    if (mode.get() === "dot") paint(e)
+    paint(e)
   })
 
   on("mousemove", (e) => {
@@ -247,6 +239,8 @@ function KeyHandler({ on }: Context) {
       } else {
         mode.update("dot")
       }
+    } else if (e.key === "Escape") {
+      mode.update("dot")
     }
   })
 }

editor/webview.ts

@@ -33,16 +33,24 @@ export class ItemSpawnInfo implements IBox {
   readonly j: number
   readonly type: ItemType
   readonly src: string
+  readonly srcBase: string
   readonly x: number
   readonly y: number
   readonly w = CELL_SIZE
   readonly h = CELL_SIZE
-  constructor(i: number, j: number, type: ItemType, src: string) {
+  constructor(
+    i: number,
+    j: number,
+    type: ItemType,
+    src: string,
+    srcBase: string,
+  ) {
     this.id = `${i}.${j}.${type}` // Unique ID for the spawn
     this.i = i
     this.j = j
     this.type = type
     this.src = src
+    this.srcBase = srcBase
     this.x = i * CELL_SIZE
     this.y = j * CELL_SIZE
   }
@@ -65,6 +73,7 @@ export class CharacterSpawnInfo implements IBox {
   readonly j: number
   readonly type: NPCType
   readonly src: string
+  readonly srcBase: string
   readonly dir?: Dir
   readonly speed?: CharacterSpeed
   readonly x: number
@@ -76,6 +85,7 @@ export class CharacterSpawnInfo implements IBox {
     j: number,
     type: NPCType,
     src: string,
+    srcBase: string,
     { dir, speed }: {
       dir?: Dir
       speed?: CharacterSpeed
@@ -88,6 +98,7 @@ export class CharacterSpawnInfo implements IBox {
     this.speed = speed
     this.type = type
     this.src = src
+    this.srcBase = srcBase
     this.x = i * CELL_SIZE
     this.y = j * CELL_SIZE
   }
@@ -185,7 +196,8 @@ export class BlockMap {
         spawn.i,
         spawn.j,
         spawn.type,
-        new URL(spawn.src, this.url).href,
+        spawn.src,
+        this.url,
         {
           dir: spawn.dir,
           speed: spawn.speed,
@@ -199,7 +211,8 @@ export class BlockMap {
         item.i,
         item.j,
         item.type,
-        new URL(item.src, this.url).href,
+        item.src,
+        this.url,
       )
     )
     this.field = obj.field

model/field-block.ts

@@ -449,7 +449,7 @@ class Field implements IFieldTester {
           spawn.type,
           spawn.i,
           spawn.j,
-          spawn.src,
+          new URL(spawn.src, spawn.srcBase).href,
           {
             dir: spawn.dir,
             speed: spawn.speed,
@@ -470,7 +470,7 @@ class Field implements IFieldTester {
             spawn.i,
             spawn.j,
             spawn.type,
-            spawn.src,
+            new URL(spawn.src, spawn.srcBase).href,
           ),
         )
       }
@@ -519,7 +519,7 @@ export function GameScreen({ el, query }: Context) {
   el.style.width = screenSize + "px"
   el.style.height = screenSize + "px"
 
-  const me = new MainCharacter(2, 2, "char/kimi/", "kimi", "down", 1)
+  const me = new MainCharacter(22, 22, "char/kimi/", "kimi", "down", 1)
   signal.centerPixel.update({ x: me.centerX, y: me.centerY })
 
   const viewScope = new ViewScope(screenSize, screenSize)