Cleaned a bit

src/App.vue

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

src/components/Game.vue

@@ -1,32 +1,3 @@
-<script setup lang="ts">
-import  'phaser';
-import { Game, Scene } from 'phavuer'
-import World from '@/components/World.vue'
-
-const gameConfig = {
-  scale: {
-    mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
-
-  },
-  pixelArt: true,
-  type: Phaser.AUTO,
-}
-
-const preload = (scene) => {
-  scene.load.image('tiles', '/assets/tiles/default.png');
-}
-
-const create = (scene) => {
-  let cam = scene.cameras.main;
-  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;
-  });
-}
-</script>
-
 <template>
   <div class="game-container">
     <Game :config="gameConfig" class="game">
@@ -36,3 +7,50 @@ const create = (scene) => {
     </Game>
   </div>
 </template>
+
+<script setup lang="ts">
+import  'phaser';
+import { Game, Scene } from 'phavuer'
+import World from '@/components/World.vue'
+
+const gameConfig = {
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+  },
+  type: Phaser.AUTO,
+  pixelArt: true,
+  width: 1200,
+  height: 800,
+}
+
+const preload = (scene) => {
+  scene.load.image('tiles', '/assets/tiles/default.png');
+}
+
+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;
+  });
+}
+</script>
+
+<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 { Circle, TilemapLayer, useScene } from 'phavuer'
-import Phaser from 'phaser'
 
 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 }
-})