Tile work

src/components/game/Screen.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import  'phaser';
+import { Game, Scene, Rectangle } from 'phavuer'
+import Example from '@/scenes/mapScene'
+
+const gameConfig = {
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: 1280,
+    height: 720,
+  },
+  render: {
+    roundPixels: true,
+  },
+  pixelArt: true,
+  type: Phaser.AUTO,
+  scene: Example
+}
+</script>
+
+<template>
+  <div class="game-container">
+    <Game :config="gameConfig" class="game" />
+  </div>
+</template>

src/components/screens/Login.vue

@@ -0,0 +1,23 @@
+<template>
+<audio ref="bgm" id="bgm" src="@/assets/sound/bgm.mp3" loop autoplay></audio>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const bgm = ref(null)
+const bgmStart = () => bgm.value.play();
+
+onMounted(() => {
+  // check if bgm is playing already and do nothing
+  if (bgm.value.paused) {
+    window.addEventListener('click', () => bgm.value.play())
+    window.addEventListener('keydown', () => bgm.value.play())
+    window.addEventListener('mousemove', () => bgm.value.play())
+  }
+
+})
+
+
+
+</script>