diff --git a/src/App.vue b/src/App.vue index 27cb5d0..974f8ec 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,4 @@ <template> -<!-- <Login />--> <Game /> </template> diff --git a/src/components/Game.vue b/src/components/Game.vue index 687d8c2..5906bc9 100644 --- a/src/components/Game.vue +++ b/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> \ No newline at end of file +<style scoped> +.game-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + border: 1px solid white; +} + +.game { + border: 1px solid red; +} +</style> \ No newline at end of file diff --git a/src/components/World.vue b/src/components/World.vue index acd2c6e..cfc2233 100644 --- a/src/components/World.vue +++ b/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); diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts deleted file mode 100644 index 2533202..0000000 --- a/src/components/__tests__/HelloWorld.spec.ts +++ /dev/null @@ -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') - }) -}) diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue new file mode 100644 index 0000000..ab794df --- /dev/null +++ b/src/components/player/Player.vue @@ -0,0 +1,8 @@ +<template> + +</template> + +<script setup> +import { Image } from 'phavuer' + +</script> \ No newline at end of file diff --git a/src/stores/counter.ts b/src/stores/counter.ts deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.ts +++ /dev/null @@ -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 } -})