Use Phavuer wherever possible

package-lock.json

@@ -2860,9 +2860,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.749",
+      "version": "1.4.750",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.749.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.750.tgz",
-      "integrity": "sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q==",
+      "integrity": "sha512-9ItEpeu15hW5m8jKdriL+BQrgwDTXEL9pn4SkillWFu73ZNNNQ2BKKLS+ZHv2vC9UkNhosAeyfxOf/5OSeTCPA==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4791,9 +4791,9 @@
       ]
     },
     "node_modules/react-is": {
-      "version": "18.3.0",
+      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-wRiUsea88TjKDc4FBEn+sLvIDesp6brMbGWnJGjew2waAc9evdhja/2LvePc898HJbHw0L+MTWy7NhpnELAvLQ==",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
     "node_modules/read-package-json-fast": {

src/App.vue

@@ -1,9 +1,9 @@
 <template>
 <!--  <Login />-->
-  <Screen />
+  <Game />
 </template>
 
 <script setup lang="ts">
-import Screen from '@/components/game/Screen.vue'
+import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
 </script>

src/components/Game.vue

@@ -0,0 +1,38 @@
+<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">
+      <Scene name="main" @preload="preload" @create="create">
+        <World />
+      </Scene>
+    </Game>
+  </div>
+</template>

src/components/World.vue

@@ -0,0 +1,46 @@
+<template>
+  <TilemapLayer :tilemap="map" :layerIndex="0" :tileset="data" />
+</template>
+
+<script setup>
+import { 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,
+  width: 10,
+  height: 10,
+  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);
+
+const data = [
+  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
+  [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
+];
+
+let y = 0;
+
+data.forEach(row => {
+  row.forEach((tile, x) => {
+    layer.putTileAt(tile, x, y);
+  });
+  y++;
+});
+</script>

src/components/game/Screen.vue

@@ -1,39 +0,0 @@
-<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,
-
-  },
-  render: {
-    roundPixels: true,
-  },
-  pixelArt: true,
-  type: Phaser.AUTO,
-  scene: Example
-}
-</script>
-
-<style>
-.game-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  border: 1px solid white;
-}
-
-.game {
-  border: 1px solid red;
-}
-</style>
-
-<template>
-  <div class="game-container">
-    <Game :config="gameConfig" class="game" />
-  </div>
-</template>

src/scenes/mapScene.js

@@ -1,63 +0,0 @@
-import Phaser from 'phaser';
-
-class Example extends Phaser.Scene
-{
-  constructor () {
-    super();
-  }
-
-  preload () {
-    this.load.image('tiles', '/assets/tilesets/default.png');
-  }
-
-  create () {
-    const mapData = new Phaser.Tilemaps.MapData({
-      orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
-      format: Phaser.Tilemaps.Formats.ARRAY_2D,
-      width: 10,
-      height: 10,
-      tileWidth: 64,
-      tileHeight: 32,
-    });
-
-    const map = new Phaser.Tilemaps.Tilemap(this, mapData);
-    const tileset = map.addTilesetImage('default', 'tiles');
-    const layer = map.createBlankLayer('layer', tileset);
-
-    const data = [
-      [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
-      [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
-    ];
-
-    let y = 0;
-
-    data.forEach(row => {
-      row.forEach((tile, x) => {
-        layer.putTileAt(tile, x, y);
-      });
-      y++;
-    });
-
-    // middle of the screen by default
-    const centerX = map.widthInPixels / 1.5;
-    const centerY = map.heightInPixels / 2;
-    layer.setPosition(centerX, centerY);
-
-    let cam = this.cameras.main;
-    this.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;
-    });
-  }
-}
-
-export default Example;