Cleaned a bit

src/App.vue

@@ -1,5 +1,4 @@
 <template>
-<!--  <Login />-->
   <Game />
 </template>
 

src/components/Game.vue

@@ -1,3 +1,13 @@
+<template>
+  <div class="game-container">
+    <Game :config="gameConfig" class="game">
+      <Scene name="main" @preload="preload" @create="create">
+        <World />
+      </Scene>
+    </Game>
+  </div>
+</template>
+
 <script setup lang="ts">
 import  'phaser';
 import { Game, Scene } from 'phavuer'
@@ -7,10 +17,11 @@ const gameConfig = {
   scale: {
     mode: Phaser.Scale.FIT,
     autoCenter: Phaser.Scale.CENTER_BOTH,
-
   },
-  pixelArt: true,
   type: Phaser.AUTO,
+  pixelArt: true,
+  width: 1200,
+  height: 800,
 }
 
 const preload = (scene) => {
@@ -19,7 +30,10 @@ const preload = (scene) => {
 
 const create = (scene) => {
   let cam = scene.cameras.main;
+
+  // set camera bounds to the size of the map
   scene.input.on("pointermove", function (p) {
+
     if (!p.isDown) return;
     cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
     cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
@@ -27,12 +41,16 @@ const create = (scene) => {
 }
 </script>
 
-<template>
-  <div class="game-container">
-    <Game :config="gameConfig" class="game">
-      <Scene name="main" @preload="preload" @create="create">
-        <World />
-      </Scene>
-    </Game>
-  </div>
-</template>
+<style scoped>
+.game-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  border: 1px solid white;
+}
+
+.game {
+  border: 1px solid red;
+}
+</style>

src/components/World.vue

@@ -1,13 +1,12 @@
 <template>
-  <TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
+  <TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data"/>
+  <Circle :radius="10" :fillColor="0xFFFFFF" :x="150" :y="1" />
 </template>
 
 <script setup>
-import { TilemapLayer, useScene } from 'phavuer'
-import Phaser from 'phaser'
+import { Circle, TilemapLayer, useScene } from 'phavuer'
 
 const scene = useScene()
-
 const mapData = new Phaser.Tilemaps.MapData({
   orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
   format: Phaser.Tilemaps.Formats.ARRAY_2D,
@@ -16,8 +15,6 @@ const mapData = new Phaser.Tilemaps.MapData({
   tileWidth: 64,
   tileHeight: 32,
 });
-
-// scene
 const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
 const tileset = map.addTilesetImage('default', 'tiles');
 const layer = map.createBlankLayer('layer', tileset);

src/components/__tests__/HelloWorld.spec.ts

@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

src/components/player/Player.vue

@@ -0,0 +1,8 @@
+<template>
+
+</template>
+
+<script setup>
+import { Image } from 'phavuer'
+
+</script>

src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})