noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small clean

Browse Source
This commit is contained in:
Dennis Postma 2024-07-06 22:41:42 +02:00
parent 29df343d64
commit 595c9d5d7c
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/screens/Game.vue
View File

@ -29,6 +29,7 @@
import config from '@/config' import config from '@/config'
import 'phaser' import 'phaser'
import { onUnmounted, toRaw, watch, ref } from 'vue' import { onUnmounted, toRaw, watch, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { Game, Scene } from 'phavuer' import { Game, Scene } from 'phavuer'
import { useSocketStore } from '@/stores/socket' import { useSocketStore } from '@/stores/socket'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
@ -45,6 +46,7 @@ const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const assetStore = useAssetStore() const assetStore = useAssetStore()
const isLoaded = ref(false) const isLoaded = ref(false)
const { assets } = storeToRefs(assetStore)
onUnmounted(() => { onUnmounted(() => {
socket.disconnectSocket() socket.disconnectSocket()
@ -74,7 +76,7 @@ const createGame = (game: Phaser.Game) => {
const preloadScene = (scene: Phaser.Scene) => { const preloadScene = (scene: Phaser.Scene) => {
/** /**
* @TODO : Fix the progress bar so its centered correctly * Create loading bar
*/ */
const width = scene.cameras.main.width; const width = scene.cameras.main.width;
const height = scene.cameras.main.height; const height = scene.cameras.main.height;
@ -111,7 +113,7 @@ const preloadScene = (scene: Phaser.Scene) => {
/** /**
* Load the assets into the Phaser scene * Load the assets into the Phaser scene
*/ */
toRaw(assetStore.assets).forEach((asset) => { assets.value.forEach((asset) => {
if (asset.type === 'link') { if (asset.type === 'link') {
scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png') scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
} }
@ -138,11 +140,11 @@ const createScene = (scene: Phaser.Scene) => {
repeat: -1 repeat: -1
}) })
watch( /**
() => assetStore.assets, * Watch for changes in assets and reload them
() => { */
console.log('re-loading assets', assetStore.assets) watch(assets, (newAssets) => {
toRaw(assetStore.assets).forEach((asset) => { newAssets.forEach((asset) => {
if (asset.type === 'link') { if (asset.type === 'link') {
scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png') scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
} }
@ -156,14 +158,7 @@ const createScene = (scene: Phaser.Scene) => {
scene.load.once('complete', () => { scene.load.once('complete', () => {
console.log('assets re-loaded') console.log('assets re-loaded')
}) })
}, }
{ deep: true }
) )
// const grid = scene.add.grid(0, 0, window.innerWidth, window.innerHeight, 64, 32, 0, 0, 0xff0000, 0.5).setOrigin(0, 0);
//
// window.addEventListener('resize', () => {
// grid.setSize(window.innerWidth, window.innerHeight);
// });
} }
</script> </script>