Added login bg img

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <Game />
+  <Login />
 </template>
 
 <script setup lang="ts">

src/components/player/Player.vue

@@ -3,29 +3,18 @@
 </template>
 
 <script setup>
-import { Circle, Image, useGame, useScene } from 'phavuer'
-import 'phaser';
+import { Image, useScene } from 'phavuer'
+import { ref } from 'vue'
 
 const scene = useScene()
 
-const props = defineProps({
-  x: Number,
-  y: Number,
-  moving: Boolean,
-  direction: String,
-  speed: Number,
-})
-
-// set x and y
-let x = props.x
-let y = props.y
-x = 100
-y = 100
+let x = ref(0)
+let y = ref(0)
 
 // on press "W" move up
-scene.input.keyboard.on('keydown_W', () => {
-  y -= 10
-  console.log(y);
-})
+const keyObj = scene.input.keyboard.addKey('W');
+var isDown = keyObj.isDown;
+var isUp = keyObj.isUp;
+console.log(isDown, isUp)
 
 </script>

src/components/screens/Login.vue

@@ -1,23 +1,17 @@
 <template>
-<audio ref="bgm" id="bgm" src="@/assets/sound/bgm.mp3" loop autoplay></audio>
+  <audio ref="bgm" id="bgm" src="/assets/sound/bgm.mp3" loop autoplay></audio>
+  <img src="/assets/Leaf_BG_standalone.png" class="bg-img" alt="login bg" />
 </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>
+
+<style scoped>
+.bg-img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>