cleanup and some minor lightmap improvements

src/App.vue

@@ -27,6 +27,7 @@ pocket({ name: 'Pick Axe', type: 'tool', icon: 'pick', quality: 'wood' })
 let animationFrame = 0
 let lastTick = 0
 
+const debug = ref(false)
 const x = ref(0)
 const y = ref(0)
 const floorX = computed(() => Math.floor(x.value))
@@ -233,7 +234,7 @@ onMounted(() => {
     <div id="blocks" :style="{transform: `translate(${tx}px, ${ty}px)`}">
       <template v-for="(row, y) in mapGrid">
         <div v-for="(block, x) in row"
-          :class="['block', block.type, { highlight: x === px && y === py }]"
+          :class="['block', block.type, { highlight: debug && x === px && y === py }]"
           @click="interactWith(x, y, block)"
         />
       </template>
@@ -256,7 +257,12 @@ onMounted(() => {
       </div>
     </div>
 
-    <canvas id="light-mask" ref="lightMapEl" :style="{transform: `translate(${tx}px, ${ty}px)`}" />
+    <canvas id="light-mask" ref="lightMapEl"
+      :style="{
+        transform: `translate(${tx}px, ${ty}px)`,
+        mixBlendMode: paused && debug ? 'normal' : 'multiply',
+      }"
+    />
     <div id="beam" v-if="arriving"></div>
     <div id="level-indicator">
       x:{{ floorX }}, y:{{ floorY }}

src/light-mask.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue'
-import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT } from './level/def'
-
-export interface Props {
-  x: number,
-  y: number,
-  tx: number,
-  ty: number,
-  lightBarrier: number[],
-  time: number,
-}
-const props = defineProps<Props>()
-
-// TODO: use OffscreenCanvas and a WebWorker?
-const lightMapEl = ref<HTMLCanvasElement | undefined>(undefined)
-const W = ((STAGE_WIDTH + 2) * BLOCK_SIZE) / 2
-const H = ((STAGE_HEIGHT + 2) * BLOCK_SIZE) / 2
-
-const playerX = (W - BLOCK_SIZE) / 4
-const playerY = H / 4 - BLOCK_SIZE / 2
-const playerLightSize = BLOCK_SIZE / 3
-
-function drawPlayerLight(ctx: CanvasRenderingContext2D) {
-
-  const playerLight = ctx.createRadialGradient(
-    playerX - props.tx / 4, playerY - props.ty / 4, 0,
-    playerX - props.tx / 4, playerY - props.ty / 4, playerLightSize
-  )
-
-  // Add three color stops
-  playerLight.addColorStop(0.0, "#FFFF");
-  playerLight.addColorStop(1, "#F0F0");
-
-  // Set the fill style and draw a rectangle
-  ctx.fillStyle = playerLight;
-  ctx.fillRect(0, 0, W, H)
-}
-
-
-onMounted(() => {
-  const canvas = lightMapEl.value
-  const ctx = canvas?.getContext('2d')
-  if (!ctx) return
-
-  watch(props, () => {
-    const t = props.time
-
-    if (t > 900 || t < 100) {
-      ctx.fillStyle = `hsl(0, 0%, 20%)`
-    } else if (t < 250) {
-      const s = Math.round((t - 100) / 1.5) // 0-100%
-      const l = Math.round((t - 100) / 1.875) + 20 // 20-100%
-      ctx.fillStyle = `hsl(0, ${s}%, ${l}%)`
-    // } else if (t < 700) {
-    //   ctx.fillStyle = `hsl(0, ${}%, ${}%)`
-    } else {
-      ctx.fillStyle = `hsl(0, 0%, 100%)`
-    }
-    ctx.fillRect(0, 0, W, H)
-    drawPlayerLight(ctx)
-  })
-})
-
-</script>
-
-<template>
-  <canvas ref="lightMapEl" :style="{transform: `translate(${tx}px, ${ty}px)`}" />
-</template>
-
-<style scoped>
-canvas {
-  position: absolute;
-  top: -64px;
-  left: -64px;
-  width: calc(100% + 128px);
-  height: calc(100% + 128px);
-  mix-blend-mode: multiply;
-}
-</style>

src/util/useLightMap.ts

@@ -48,7 +48,9 @@ export default function useLightMap(
 
     // Add color stops: white in the center to transparent white
     playerLight.addColorStop(0.0, "#FFFF");
-    playerLight.addColorStop(1, "#FFF0");
+    playerLight.addColorStop(0.4, "#FFFF");
+    playerLight.addColorStop(0.7, "#FFFA");
+    playerLight.addColorStop(1, "#FFF1");
 
     // Set the fill style and draw a rectangle
     ctx.fillStyle = playerLight;
@@ -58,7 +60,6 @@ export default function useLightMap(
   function drawLights() {
     // used for everything above ground
     const ambientLight = getAmbientLightColor()
-    const surroundingLight = ambientLight.slice(-2)
     const barrier = lightBarrier.value
 
     ctx.fillStyle = ambientLight
@@ -74,8 +75,7 @@ export default function useLightMap(
 
     // make light columns wider to illuminate surrounding blocks
     const extra = Math.floor(B / 2)
-    const reflectedLight = ambientLight.slice(0, -1) + ', 50%)'
+    ctx.fillStyle = ambientLight.slice(0, -1) + ', 40%)'
-    ctx.fillStyle = reflectedLight
     for (let col = 0; col < W / B; col++) {
       const level = (barrier[col] - y.value) * B
       const sw = B