All files / repo/src/components/GameCanvasDemo GameCanvasDemo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="demo-container" ref="containerRef">
    <div class="demo-game" ref="gameRef" :style="gridStyle">
      <div v-for="tile in tiles" :key="tile.id" class="tile" :class="[{ flipped: tile.flipped, matched: tile.matched }]">
        <div class="tile-front" :class="[`rarity-${tile.rarity}`, { [`rarity-border-${tile.rarity}`]: tile.matched }]">
          <LazyImage :src="./tile.imagePath" :alt="tile.name" className="tile-img" />
          <span class="tile-name">{{ tile.name }}</span>
        </div>
        <div class="tile-back"></div>
      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { useDemoGame } from '@/hooks/useDemoGame';
import { useResizeObserver } from '@/hooks/useResizeObserver';
import { ref, watch } from 'vue';
 
const { tiles } = useDemoGame(() => setTimeout(() => scaleGrid(), 600));
const containerRef = ref<HTMLElement | null>(null);
const gameRef = ref<HTMLElement | null>(null);
 
function scaleGrid() {
  const container = containerRef.value;
  const game = gameRef.value;
  if (!container || !game) return;
  const gameHeight = game.offsetHeight;
  const containerHeight = container.clientHeight;
  const scale = Math.min(1, containerHeight / gameHeight);
  game.style.transform = `scale(${scale})`;
}
 
const gridStyle = computed(() => {
  const cols = Math.min(6, Math.ceil(Math.sqrt(tiles.value.length)));
  return {
    display: 'grid',
    gridTemplateColumns: `repeat(${cols}, 1fr)`,
    gap: '8px',
    padding: '1rem',
  };
});
 
useResizeObserver(containerRef, () => {
  scaleGrid();
});
 
watch(tiles, () => {
  scaleGrid();
});
</script>
 
<style scoped src="././GameCanvasDemo.scss" />