immediate updates on map change

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import Help from './screens/help.vue'
 import Inventory from './screens/inventory.vue'
 
@@ -37,8 +37,17 @@ const tx = computed(() => fracX.value * -BLOCK_SIZE)
 const ty = computed(() => fracY.value * -BLOCK_SIZE)
 const px = computed(() => Math.round(player.x + fracX.value))
 const py = computed(() => Math.round(player.y + fracY.value))
-const rows = computed(() => level.grid(floorX.value, floorY.value))
+
-const lightBarrier = computed(() => level.sunLight(floorX.value))
+const lightBarrier = computed<number[]>(() => {
+  const _update = mapUpdateCount.value // reactivity trigger
+  return level.sunLight(floorX.value)
+})
+
+const mapUpdateCount = ref(0)
+const mapGrid = computed<Block[][]>(() => {
+  const _update = mapUpdateCount.value // reactivity trigger
+  return level.grid(floorX.value, floorY.value, true)
+})
 
 const arriving = ref(true)
 const walking = ref(false)
@@ -52,13 +61,14 @@ type Surroundings = {
   down: Block,
 }
 const surroundings = computed<Surroundings>(() => {
+  const _update = mapUpdateCount.value // reactivity trigger
   const x = px.value
   const y = py.value
-  const row = level.grid(floorX.value, floorY.value)
+  const rows = mapGrid.value
 
-  const rowY = row[y]
+  const rowY = rows[y]
-  const rowYp = row[y - 1]
+  const rowYp = rows[y - 1]
-  const rowYn = row[y + 1]
+  const rowYn = rows[y + 1]
 
   return {
     at: rowY[x],
@@ -94,6 +104,7 @@ function dig(blockX: number, blockY: number, block: Block) {
     y: floorY.value + blockY,
     newType: 'air'
   })
+  mapUpdateCount.value = mapUpdateCount.value + 1
 
   // anything to pick up?
   if (block.drops) {
@@ -113,6 +124,7 @@ function build(blockX: number, blockY: number, block: InventoryItem) {
     y: floorY.value + blockY,
     newType: blockToBuild
   })
+  mapUpdateCount.value = mapUpdateCount.value + 1
 
   const newAmount = unpocket(block)
   if (newAmount < 1) inventorySelection.value = player.inventory[0]
@@ -134,12 +146,6 @@ function interactWith(blockX: number, blockY: number, block: Block) {
   } else if (toolInHand && !emptyBlock) {
     dig(blockX, blockY, block)
   }
-
-  // This feels like cheating, but it makes Vue recalculate floorX
-  // which then recalculates the blocks, so that the changes are
-  // applied. Otherwise, they wouldn't be visible before moving
-  x.value = x.value + 0.01
-  x.value = x.value - 0.01
 }
 
 let lastTimeUpdate = 0
@@ -224,9 +230,8 @@ onMounted(() => {
 
 <template>
   <div id="field" :class="timeOfDay">
-
     <div id="blocks" :style="{transform: `translate(${tx}px, ${ty}px)`}">
-      <template v-for="(row, y) in rows">
+      <template v-for="(row, y) in mapGrid">
         <div v-for="(block, x) in row"
           :class="['block', block.type, { highlight: x === px && y === py }]"
           @click="interactWith(x, y, block)"
@@ -257,8 +262,8 @@ onMounted(() => {
       x:{{ floorX }}, y:{{ floorY }}
       <template v-if="paused">(PAUSED)</template>
       <template v-else>({{ clock }})</template>
-      <br>
+      <br/>
-      {{ fracY }}
+      Map Changes: {{ mapUpdateCount }}
     </div>
 
     <Inventory :shown="inventory"

src/level/index.ts

@@ -60,7 +60,7 @@ export default function createLevel(width: number, height: number, seed = 'extre
   // takes the current columnOffset and generates all blocks from the very top
   // until a block is generated that blocks light. The height of that block is
   // stored in the lightBarrier list
-  function calcLightBarrier(columnOffset: number) {
+  function calcLightBarrier(columnOffset: number): void {
     let previousBlock: Block = T.air
 
     for (let col = 0; col < width; col++) {
@@ -84,7 +84,7 @@ export default function createLevel(width: number, height: number, seed = 'extre
     }
   }
 
-  function generate(columnOffset: number, levelOffset: number) {
+  function generate(columnOffset: number, levelOffset: number): void {
     for (let i = 0; i < height; i++) {
       const level = levelOffset + i
       const row: Block[] = Array(width)
@@ -98,7 +98,7 @@ export default function createLevel(width: number, height: number, seed = 'extre
     applyPlayerChanges(columnOffset, levelOffset)
   }
 
-  function sunLight(columnOffset: number) {
+  function sunLight(columnOffset: number): number[] {
     calcLightBarrier(columnOffset)
     return _lightBarrier
   }
@@ -107,8 +107,8 @@ export default function createLevel(width: number, height: number, seed = 'extre
   let lastGenY = 0
   generate(0, 0)
 
-  function grid(x: number, y: number) {
+  function grid(x: number, y: number, force: false): Block[][] {
-    if (lastGenX !== x || lastGenY !== y) {
+    if (force || lastGenX !== x || lastGenY !== y) {
       generate(x, y)
       lastGenX = x
       lastGenY = y