@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Konami/Game/index.vue

@@ -0,0 +1,752 @@
+<template>
+  <div
+    class="bk bk-konami"
+    :style="{
+  '--bk-bg': background
+}"
+  >
+    <div class="bk-dialog-background" />
+    <div class="bk-konami-game bk-slide-up-inner">
+      <div class="bk-konami-game-canvas">
+        <canvas
+          ref="canvasDisplay"
+          :style="canvasStyle"
+          :width="canvasWidth"
+          :height="canvasHeight"
+          class="bk-is-display"
+        />
+        <Pixelgrid
+          :canvas-scale
+          :canvas-height
+          :canvas-width
+          :style="canvasStyle"
+        />
+      </div>
+    </div>
+    <div v-if="DEBUG_ICONS" class="bk-konami-debug-canvas">
+      <canvas
+        ref="debugCanvas"
+        :width="debugCanvasWidth"
+        :height="debugCanvasHeight"
+        :style="{
+  width: debugCanvasWidth * 6 + 'px',
+  height: debugCanvasHeight * 6 + 'px'
+}"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import {
+  computed,
+  useTemplateRef,
+  useBlokkli,
+  ref,
+  onMounted,
+  onUnmounted
+} from "#imports";
+import Pixelgrid from "./PixelGrid.vue";
+import { useTextRendering } from "./textRendering";
+import { useIconRendering } from "./useIconRendering";
+import logoUrl from "./blokkli.png";
+const emit = defineEmits(["close"]);
+const DEBUG_ICONS = false;
+const DEBUG_GAME = false;
+const INIT_EATEN = 0;
+const largeIconSize = 32;
+const blackColor = "black";
+const worldWidth = 7 * 3;
+const worldHeight = 4 * 3 - 1;
+const scoreAreaHeight = 1;
+const cellSize = 12;
+const gameWorldBorder = 1;
+const gameWorldPadding = 1;
+let isLoaded = false;
+const { keyboard, ui } = useBlokkli();
+const { drawTextPixels, getTextWidth, drawText } = useTextRendering();
+const { initIcons, getIconCount, drawIcon } = useIconRendering(
+  cellSize,
+  largeIconSize
+);
+const iconCount = getIconCount();
+const canvasWidth = computed(() => {
+  return worldWidth * cellSize + (gameWorldBorder + gameWorldPadding) * 2;
+});
+const canvasHeight = computed(() => {
+  return scoreAreaHeight * cellSize + (gameWorldBorder + gameWorldPadding) * 2 + worldHeight * cellSize;
+});
+const canvasScale = computed(() => {
+  const availableWidth = ui.viewport.value.width * 0.8;
+  const availableHeight = ui.viewport.value.height * 0.8;
+  const maxScaleWidth = Math.floor(availableWidth / canvasWidth.value);
+  const maxScaleHeight = Math.floor(availableHeight / canvasHeight.value);
+  return Math.max(1, Math.min(maxScaleWidth, maxScaleHeight));
+});
+const canvasStyle = computed(() => {
+  return {
+    width: canvasWidth.value * canvasScale.value + "px",
+    height: canvasHeight.value * canvasScale.value + "px"
+  };
+});
+const snake = ref([
+  { x: Math.floor(worldWidth / 2), y: Math.floor(worldHeight / 2) }
+]);
+const direction = ref("right");
+const nextDirection = ref("right");
+const food = ref({ x: 10, y: 10 });
+const gameOver = ref(false);
+const gameStarted = ref(false);
+const score = ref(0);
+const blocksEaten = ref(0);
+const removedTail = ref(null);
+let lastCellUpdate = 0;
+let gameOverTime = 0;
+const currentBlockIndex = ref(0);
+let movesSinceFoodSpawn = 0;
+let optimalPathLength = 0;
+const canvasDisplay = useTemplateRef("canvasDisplay");
+const debugCanvas = useTemplateRef("debugCanvas");
+const debugCanvasWidth = computed(() => {
+  if (!DEBUG_ICONS) return 0;
+  const iconsPerRow = 7;
+  return Math.min(iconCount, iconsPerRow) * (largeIconSize + 10);
+});
+const debugCanvasHeight = computed(() => {
+  if (!DEBUG_ICONS) return 0;
+  const iconsPerRow = 7;
+  const smallRows = Math.ceil(iconCount / iconsPerRow);
+  const largeRows = Math.ceil(iconCount / iconsPerRow);
+  return smallRows * (cellSize + 10) + largeRows * (largeIconSize + 10) + 20;
+});
+let scoreCanvas = null;
+let snakeCanvas = null;
+let logoCanvas = null;
+let lastScore = -1;
+let lastBlocksEaten = -1;
+const MOVE_DURATION = 200;
+function generateFood() {
+  let newFood;
+  do {
+    newFood = {
+      x: Math.floor(Math.random() * worldWidth),
+      y: Math.floor(Math.random() * worldHeight)
+    };
+  } while (snake.value.some(
+    (segment) => segment.x === newFood.x && segment.y === newFood.y
+  ));
+  food.value = newFood;
+  currentBlockIndex.value = (currentBlockIndex.value + 1) % iconCount;
+  movesSinceFoodSpawn = 0;
+  const head = snake.value[0];
+  optimalPathLength = Math.abs(head.x - newFood.x) + Math.abs(head.y - newFood.y);
+}
+function getAIDirection() {
+  const head = snake.value[0];
+  const target = food.value;
+  const isSafe = (pos) => {
+    if (pos.x < 0 || pos.x >= worldWidth || pos.y < 0 || pos.y >= worldHeight) {
+      return false;
+    }
+    for (let i = 0; i < snake.value.length - 1; i++) {
+      const segment = snake.value[i];
+      if (segment.x === pos.x && segment.y === pos.y) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const moves = [];
+  const directions = ["up", "down", "left", "right"];
+  for (const dir of directions) {
+    if (dir === "up" && direction.value === "down" || dir === "down" && direction.value === "up" || dir === "left" && direction.value === "right" || dir === "right" && direction.value === "left") {
+      continue;
+    }
+    const newPos = { ...head };
+    switch (dir) {
+      case "up":
+        newPos.y -= 1;
+        break;
+      case "down":
+        newPos.y += 1;
+        break;
+      case "left":
+        newPos.x -= 1;
+        break;
+      case "right":
+        newPos.x += 1;
+        break;
+    }
+    if (isSafe(newPos)) {
+      const distance = Math.abs(newPos.x - target.x) + Math.abs(newPos.y - target.y);
+      moves.push({ dir, pos: newPos, priority: -distance });
+    }
+  }
+  moves.sort((a, b) => b.priority - a.priority);
+  return moves.length > 0 ? moves[0].dir : direction.value;
+}
+function resetGame() {
+  const startPos = {
+    x: Math.floor(worldWidth / 2),
+    y: Math.floor(worldHeight / 2)
+  };
+  snake.value = [startPos];
+  direction.value = "right";
+  nextDirection.value = "right";
+  gameOver.value = false;
+  gameStarted.value = false;
+  score.value = 0;
+  blocksEaten.value = 0;
+  removedTail.value = null;
+  lastCellUpdate = 0;
+  gameOverTime = 0;
+  movesSinceFoodSpawn = 0;
+  optimalPathLength = 0;
+  if (DEBUG_GAME) {
+    for (let i = 0; i < 10; i++) {
+      const head = snake.value[0];
+      snake.value.push({ x: head.x - i - 1, y: head.y });
+    }
+    blocksEaten.value = 10;
+    score.value = 10 * 100;
+    gameStarted.value = true;
+  }
+  if (INIT_EATEN) {
+    for (let i = 0; i < INIT_EATEN; i++) {
+      const head = snake.value[0];
+      snake.value.push({ x: head.x - i - 1, y: head.y });
+    }
+  }
+  generateFood();
+}
+function update(currentTime) {
+  if (gameOver.value || !gameStarted.value) return;
+  if (lastCellUpdate === 0) {
+    lastCellUpdate = currentTime;
+    return;
+  }
+  const timeSinceLastUpdate = currentTime - lastCellUpdate;
+  if (timeSinceLastUpdate >= MOVE_DURATION) {
+    if (DEBUG_GAME) {
+      nextDirection.value = getAIDirection();
+    }
+    direction.value = nextDirection.value;
+    const head = snake.value[0];
+    const newHead = { ...head };
+    switch (direction.value) {
+      case "up":
+        newHead.y -= 1;
+        break;
+      case "down":
+        newHead.y += 1;
+        break;
+      case "left":
+        newHead.x -= 1;
+        break;
+      case "right":
+        newHead.x += 1;
+        break;
+    }
+    if (newHead.x < 0 || newHead.x >= worldWidth || newHead.y < 0 || newHead.y >= worldHeight) {
+      gameOver.value = true;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
+      return;
+    }
+    if (snake.value.some(
+      (segment) => segment.x === newHead.x && segment.y === newHead.y
+    )) {
+      gameOver.value = true;
+      gameOverTime = lastCellUpdate + MOVE_DURATION;
+      return;
+    }
+    lastCellUpdate = currentTime;
+    snake.value.unshift(newHead);
+    movesSinceFoodSpawn++;
+    if (newHead.x === food.value.x && newHead.y === food.value.y) {
+      const pathDifference = movesSinceFoodSpawn - optimalPathLength;
+      const cappedDifference = Math.min(pathDifference, 9);
+      const points = 100 - cappedDifference * 10;
+      score.value += points;
+      blocksEaten.value += 1;
+      generateFood();
+      removedTail.value = null;
+    } else {
+      const tail = snake.value.pop();
+      removedTail.value = tail ? { ...tail } : null;
+    }
+  }
+}
+const background = computed(() => {
+  return "rgba(133, 144, 24, 1)";
+});
+function initOffscreenCanvases() {
+  scoreCanvas = document.createElement("canvas");
+  scoreCanvas.width = canvasWidth.value;
+  scoreCanvas.height = cellSize;
+  const gameAreaWidth = worldWidth * cellSize + (gameWorldBorder + gameWorldPadding) * 2;
+  const gameAreaHeight = scoreAreaHeight * cellSize + (gameWorldBorder + gameWorldPadding) * 2 + worldHeight * cellSize;
+  snakeCanvas = new OffscreenCanvas(gameAreaWidth, gameAreaHeight);
+}
+async function initLogo() {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      logoCanvas = new OffscreenCanvas(img.width, img.height);
+      const ctx = logoCanvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) {
+        resolve();
+        return;
+      }
+      ctx.drawImage(img, 0, 0);
+      const imageData = ctx.getImageData(0, 0, img.width, img.height);
+      const data = imageData.data;
+      const bgColor = background.value;
+      const match = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      const bgR = match ? Number.parseInt(match[1]) : 0;
+      const bgG = match ? Number.parseInt(match[2]) : 0;
+      const bgB = match ? Number.parseInt(match[3]) : 0;
+      for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+        const brightness = (r + g + b) / 3;
+        if (a > 0 && brightness > 200) {
+          data[i] = bgR;
+          data[i + 1] = bgG;
+          data[i + 2] = bgB;
+          data[i + 3] = 255;
+        }
+      }
+      ctx.putImageData(imageData, 0, 0);
+      resolve();
+    };
+    img.src = logoUrl;
+  });
+}
+function drawScoreArea() {
+  if (!scoreCanvas) return;
+  const ctx = scoreCanvas.getContext("2d");
+  if (!ctx) return;
+  ctx.fillStyle = background.value;
+  ctx.fillRect(0, 0, scoreCanvas.width, scoreCanvas.height);
+  const scoreText = "Score: " + score.value.toString();
+  drawTextPixels(ctx, scoreText, 0, 2, blackColor, "left");
+  const blocksText = blocksEaten.value.toString();
+  const rightAlignX = worldWidth * cellSize + 4;
+  drawTextPixels(ctx, blocksText, rightAlignX, 2, blackColor, "right");
+  lastScore = score.value;
+  lastBlocksEaten = blocksEaten.value;
+}
+function drawStartScreen(ctx, currentTime) {
+  ctx.imageSmoothingEnabled = false;
+  const offset = gameWorldBorder + gameWorldPadding;
+  const totalWidth = worldWidth * cellSize;
+  const largeIconSize2 = 32;
+  const gameAreaY = scoreAreaHeight * cellSize + offset;
+  const numColumns = 6;
+  const columnWidth = totalWidth / numColumns;
+  const rowHeight = largeIconSize2 + 24;
+  const numRows = 8;
+  const speed = 25;
+  const wrapHeight = numRows * rowHeight;
+  let positionIndex = 0;
+  for (let row = 0; row < numRows; row++) {
+    for (let col = 0; col < numColumns; col++) {
+      if ((row + col) % 2 === 0) {
+        const iconIndex = positionIndex % iconCount;
+        const xBase = offset + col * columnWidth + (columnWidth - largeIconSize2) / 2;
+        const sineFrequency = 1e-3;
+        const sinePhase = positionIndex * 0.6;
+        const xOffset = Math.cos(currentTime * sineFrequency + sinePhase) * 24;
+        const x = xBase + xOffset;
+        const baseY = row * rowHeight;
+        const yProgress = currentTime / 1e3 * speed;
+        const wrappedY = (baseY + yProgress) % wrapHeight;
+        const y = wrappedY + gameAreaY - largeIconSize2 * 2;
+        drawIcon(ctx, iconIndex, x, y, true);
+        positionIndex++;
+      }
+    }
+  }
+  if (logoCanvas) {
+    ctx.drawImage(logoCanvas, 0, 0);
+  }
+  const line1 = "Use arrow keys to move";
+  const line1Width = getTextWidth(line1);
+  const line1X = Math.floor((totalWidth - line1Width) / 2) + offset;
+  const line2 = "Press ESC to exit";
+  const line2Width = getTextWidth(line2);
+  const line2X = Math.floor((totalWidth - line2Width) / 2) + offset;
+  ctx.beginPath();
+  ctx.rect((canvasWidth.value - (line1Width + 10)) / 2, 88, line1Width + 10, 21);
+  ctx.fill();
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  drawText(ctx, line1, line1X, 90, blackColor);
+  drawText(ctx, line2, line2X, 100, blackColor);
+  const blinkOn = currentTime % 1e3 < 500;
+  if (blinkOn) {
+    const spaceText = "Press SPACE to start";
+    const spaceTextWidth = Math.round(getTextWidth(spaceText));
+    const spaceTextX = Math.round((canvasWidth.value - spaceTextWidth) / 2);
+    ctx.fillStyle = background.value;
+    ctx.strokeStyle = blackColor;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.rect(spaceTextX - 3, 117, spaceTextWidth + 6, 13);
+    ctx.fill();
+    ctx.stroke();
+    drawTextPixels(
+      ctx,
+      spaceText,
+      canvasWidth.value / 2,
+      120,
+      blackColor,
+      "center"
+    );
+  }
+}
+function draw(currentTime) {
+  const ctx = canvasDisplay.value?.getContext("2d");
+  if (!ctx) return;
+  if (!gameStarted.value) {
+    ctx.fillStyle = background.value;
+    ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value);
+    drawStartScreen(ctx, currentTime);
+    return;
+  }
+  let movementProgress = 0;
+  if (lastCellUpdate > 0) {
+    const timeToUse = gameOver.value && gameOverTime > 0 ? gameOverTime : currentTime;
+    const timeSinceLastUpdate = timeToUse - lastCellUpdate;
+    movementProgress = Math.min(timeSinceLastUpdate / MOVE_DURATION, 1);
+  }
+  if (score.value !== lastScore || blocksEaten.value !== lastBlocksEaten) {
+    drawScoreArea();
+  }
+  const offset = gameWorldBorder + gameWorldPadding;
+  const gameAreaY = scoreAreaHeight * cellSize;
+  const gameAreaHeight = canvasHeight.value - gameAreaY;
+  ctx.fillStyle = background.value;
+  ctx.fillRect(0, gameAreaY, canvasWidth.value, gameAreaHeight);
+  if (gameWorldBorder > 0) {
+    ctx.fillStyle = blackColor;
+    const borderX = 0;
+    const borderY = scoreAreaHeight * cellSize;
+    const borderWidth = worldWidth * cellSize + (gameWorldBorder + gameWorldPadding) * 2;
+    const borderHeight = worldHeight * cellSize + (gameWorldBorder + gameWorldPadding) * 2;
+    ctx.fillRect(borderX, borderY, borderWidth, gameWorldBorder);
+    ctx.fillRect(
+      borderX,
+      borderY + borderHeight - gameWorldBorder,
+      borderWidth,
+      gameWorldBorder
+    );
+    ctx.fillRect(borderX, borderY, gameWorldBorder, borderHeight);
+    ctx.fillRect(
+      borderX + borderWidth - gameWorldBorder,
+      borderY,
+      gameWorldBorder,
+      borderHeight
+    );
+  }
+  const renderPositions = [];
+  if (removedTail.value) {
+    const currentTail = snake.value[snake.value.length - 1];
+    if (currentTail) {
+      const dx = currentTail.x - removedTail.value.x;
+      const dy = currentTail.y - removedTail.value.y;
+      const renderX = removedTail.value.x + dx * movementProgress;
+      const renderY = removedTail.value.y + dy * movementProgress;
+      renderPositions.push({ x: renderX, y: renderY });
+    }
+  }
+  for (let i = snake.value.length - 1; i >= 0; i--) {
+    const segment = snake.value[i];
+    let renderX = segment.x;
+    let renderY = segment.y;
+    if (i === 0) {
+      const dx = direction.value === "left" ? 1 : direction.value === "right" ? -1 : 0;
+      const dy = direction.value === "up" ? 1 : direction.value === "down" ? -1 : 0;
+      renderX = segment.x + dx * (1 - movementProgress);
+      renderY = segment.y + dy * (1 - movementProgress);
+    }
+    renderPositions.push({ x: renderX, y: renderY });
+  }
+  const SNAKE_DEBUG = false;
+  if (snakeCanvas) {
+    const snakeCtx = SNAKE_DEBUG ? ctx : snakeCanvas.getContext("2d", {
+      willReadFrequently: true
+    });
+    if (snakeCtx) {
+      snakeCtx.clearRect(0, 0, snakeCanvas.width, snakeCanvas.height);
+      snakeCtx.strokeStyle = blackColor;
+      snakeCtx.lineCap = "round";
+      snakeCtx.lineJoin = "round";
+      snakeCtx.beginPath();
+      if (renderPositions.length > 0) {
+        const offset2 = gameWorldBorder + gameWorldPadding;
+        const firstPos = renderPositions[0];
+        const startX = Math.round(firstPos.x * cellSize + cellSize / 2 + offset2);
+        const startY = Math.round(
+          (firstPos.y + scoreAreaHeight) * cellSize + cellSize / 2 + offset2
+        );
+        snakeCtx.moveTo(startX, startY);
+        for (let i = 1; i < renderPositions.length; i++) {
+          const pos = renderPositions[i];
+          const x = Math.round(pos.x * cellSize + cellSize / 2 + offset2);
+          const y = Math.round(
+            (pos.y + scoreAreaHeight) * cellSize + cellSize / 2 + offset2
+          );
+          snakeCtx.lineTo(x, y);
+        }
+        snakeCtx.lineCap = "round";
+        snakeCtx.lineJoin = "round";
+        snakeCtx.lineDashOffset = 0;
+        snakeCtx.lineWidth = 12;
+        snakeCtx.setLineDash([4e5]);
+        snakeCtx.stroke();
+        snakeCtx.strokeStyle = "white";
+        snakeCtx.lineDashOffset = 0;
+        snakeCtx.lineWidth = 10;
+        snakeCtx.stroke();
+        snakeCtx.lineWidth = 6;
+        snakeCtx.strokeStyle = "black";
+        snakeCtx.lineDashOffset = -0;
+        snakeCtx.setLineDash([4, 8]);
+        snakeCtx.stroke();
+        snakeCtx.lineWidth = 2;
+        snakeCtx.strokeStyle = "black";
+        snakeCtx.lineDashOffset = -0;
+        snakeCtx.setLineDash([]);
+        snakeCtx.stroke();
+        const headPos = renderPositions[renderPositions.length - 1];
+        const headX = Math.round(headPos.x * cellSize + cellSize / 2 + offset2);
+        const headY = Math.round(
+          (headPos.y + scoreAreaHeight) * cellSize + cellSize / 2 + offset2
+        );
+        const headRadius = cellSize / 2;
+        snakeCtx.setLineDash([]);
+        snakeCtx.fillStyle = blackColor;
+        const mouthCycle = currentTime % 600 / 600;
+        const mouthOpen = Math.sin(mouthCycle * Math.PI * 2) * 0.5 + 0.5;
+        const maxMouthAngle = Math.PI / 3;
+        const mouthAngle = mouthOpen * maxMouthAngle;
+        snakeCtx.fillStyle = "white";
+        snakeCtx.beginPath();
+        snakeCtx.arc(headX, headY, cellSize / 2 - 2, 0, Math.PI * 2);
+        snakeCtx.fill();
+        let rotation = 0;
+        switch (direction.value) {
+          case "right":
+            rotation = 0;
+            break;
+          case "down":
+            rotation = Math.PI / 2;
+            break;
+          case "left":
+            rotation = Math.PI;
+            break;
+          case "up":
+            rotation = -Math.PI / 2;
+            break;
+        }
+        const jawLength = headRadius + 2;
+        const mouthOffset = -1;
+        const mouthCenterX = headX + Math.cos(rotation) * mouthOffset;
+        const mouthCenterY = headY + Math.sin(rotation) * mouthOffset;
+        const upperJawX = mouthCenterX + Math.cos(rotation - mouthAngle / 2) * jawLength;
+        const upperJawY = mouthCenterY + Math.sin(rotation - mouthAngle / 2) * jawLength;
+        const lowerJawX = mouthCenterX + Math.cos(rotation + mouthAngle / 2) * jawLength;
+        const lowerJawY = mouthCenterY + Math.sin(rotation + mouthAngle / 2) * jawLength;
+        snakeCtx.fillStyle = "white";
+        snakeCtx.beginPath();
+        snakeCtx.moveTo(mouthCenterX, mouthCenterY);
+        snakeCtx.lineTo(upperJawX, upperJawY);
+        snakeCtx.lineTo(lowerJawX, lowerJawY);
+        snakeCtx.closePath();
+        snakeCtx.fill();
+        snakeCtx.strokeStyle = blackColor;
+        snakeCtx.lineWidth = 1;
+        snakeCtx.lineCap = "round";
+        snakeCtx.beginPath();
+        snakeCtx.moveTo(mouthCenterX, mouthCenterY);
+        snakeCtx.lineTo(upperJawX, upperJawY);
+        snakeCtx.stroke();
+        snakeCtx.beginPath();
+        snakeCtx.moveTo(mouthCenterX, mouthCenterY);
+        snakeCtx.lineTo(lowerJawX, lowerJawY);
+        snakeCtx.stroke();
+      }
+      if (!SNAKE_DEBUG) {
+        const imageData = snakeCtx.getImageData(
+          0,
+          0,
+          snakeCanvas.width,
+          snakeCanvas.height
+        );
+        const data = imageData.data;
+        const THRESHOLD = 100;
+        for (let i = 0; i < data.length; i += 4) {
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+          const a = data[i + 3];
+          const brightness = (r + g + b) / 3;
+          if (a > THRESHOLD && brightness < THRESHOLD) {
+            data[i] = 0;
+            data[i + 1] = 0;
+            data[i + 2] = 0;
+            data[i + 3] = 255;
+          } else {
+            data[i] = 0;
+            data[i + 1] = 0;
+            data[i + 2] = 0;
+            data[i + 3] = 0;
+          }
+        }
+        snakeCtx.putImageData(imageData, 0, 0);
+        ctx.drawImage(
+          snakeCanvas,
+          0,
+          0,
+          // source x, y
+          snakeCanvas.width,
+          snakeCanvas.height,
+          // source width, height
+          0,
+          0,
+          // destination x, y
+          snakeCanvas.width,
+          snakeCanvas.height
+          // destination width, height
+        );
+      }
+    }
+  }
+  const foodX = food.value.x * cellSize + offset;
+  const foodY = (food.value.y + scoreAreaHeight) * cellSize + offset;
+  drawIcon(ctx, currentBlockIndex.value, foodX, foodY);
+  if (scoreCanvas) {
+    ctx.drawImage(scoreCanvas, 0, 0);
+  }
+  if (gameOver.value) {
+    const totalWidth = worldWidth * cellSize;
+    const gameOverText = "GAME OVER";
+    const gameOverWidth = getTextWidth(gameOverText) * 3;
+    const gameOverX = Math.floor((totalWidth - gameOverWidth) / 2) + offset;
+    drawText(
+      ctx,
+      gameOverText,
+      gameOverX,
+      3 * cellSize,
+      blackColor,
+      background.value,
+      1,
+      2,
+      3
+    );
+    const retryText = "Press SPACE to try again";
+    const retryWidth = getTextWidth(retryText);
+    const retryX = Math.floor((totalWidth - retryWidth) / 2) + offset;
+    drawText(
+      ctx,
+      retryText,
+      retryX,
+      8 * cellSize,
+      blackColor,
+      background.value,
+      1,
+      2
+    );
+  }
+}
+function handleKeyPress(e) {
+  e.stopPropagation();
+  const key = e.key;
+  if ((key === "r" || key === "R") && (e.metaKey || e.ctrlKey)) {
+    return;
+  }
+  if (key === "Escape") {
+    e.preventDefault();
+    emit("close");
+    return;
+  }
+  if (key === " " && gameOver.value) {
+    e.preventDefault();
+    resetGame();
+    gameStarted.value = true;
+    return;
+  }
+  if (!gameStarted.value && (key === " " || key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight")) {
+    e.preventDefault();
+    gameStarted.value = true;
+    return;
+  }
+  if (key === "ArrowUp" && direction.value !== "down") {
+    e.preventDefault();
+    nextDirection.value = "up";
+  } else if (key === "ArrowDown" && direction.value !== "up") {
+    e.preventDefault();
+    nextDirection.value = "down";
+  } else if (key === "ArrowLeft" && direction.value !== "right") {
+    e.preventDefault();
+    nextDirection.value = "left";
+  } else if (key === "ArrowRight" && direction.value !== "left") {
+    e.preventDefault();
+    nextDirection.value = "right";
+  }
+}
+onMounted(async () => {
+  keyboard.lockKeyboardEvents("konami");
+  document.addEventListener("keydown", handleKeyPress, { capture: true });
+  console.log(
+    "Virtual screen resolution:",
+    canvasWidth.value,
+    "x",
+    canvasHeight.value
+  );
+  await initIcons();
+  await initLogo();
+  initOffscreenCanvases();
+  resetGame();
+  drawScoreArea();
+  if (DEBUG_ICONS && debugCanvas.value) {
+    const ctx = debugCanvas.value.getContext("2d");
+    if (ctx) {
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, debugCanvas.value.width, debugCanvas.value.height);
+      const iconsPerRow = 7;
+      for (let i = 0; i < iconCount; i++) {
+        const row = Math.floor(i / iconsPerRow);
+        const col = i % iconsPerRow;
+        const x = col * (largeIconSize + 10) + 5;
+        const y = row * (cellSize + 10) + 5;
+        drawIcon(ctx, i, x, y, false);
+      }
+      const smallRows = Math.ceil(iconCount / iconsPerRow);
+      const largeIconsStartY = smallRows * (cellSize + 10) + 10;
+      for (let i = 0; i < iconCount; i++) {
+        const row = Math.floor(i / iconsPerRow);
+        const col = i % iconsPerRow;
+        const x = col * (largeIconSize + 10) + 5;
+        const y = largeIconsStartY + row * (largeIconSize + 10);
+        drawIcon(ctx, i, x, y, true);
+      }
+    }
+  }
+  isLoaded = true;
+});
+onUnmounted(() => {
+  keyboard.unlockKeyboardEvents("konami");
+  document.removeEventListener("keydown", handleKeyPress, { capture: true });
+});
+onBlokkliEvent("canvas:draw", (e) => {
+  if (!isLoaded) return;
+  const time = e.time;
+  update(time);
+  draw(time);
+});
+</script>