Merge remote-tracking branch 'origin/feature/137-zone-effect' into feature/new-design-FE
This commit is contained in:
commit
295ce98e33
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 432 KiB |
@ -12,6 +12,8 @@ import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const sceneRef = ref<Phaser.Scene | null>(null)
|
||||
|
||||
// Effect-related refs
|
||||
const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
|
||||
const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
|
||||
@ -19,7 +21,7 @@ const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
|
||||
|
||||
// Effect parameters
|
||||
const dayNightDuration = 300000 // 5 minutes in milliseconds
|
||||
const maxDarkness = 0.3
|
||||
const maxDarkness = 0.7
|
||||
|
||||
const preloadScene = async (scene: Phaser.Scene) => {
|
||||
scene.load.image('raindrop', 'assets/raindrop.png')
|
||||
@ -27,6 +29,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
||||
}
|
||||
|
||||
const createScene = async (scene: Phaser.Scene) => {
|
||||
sceneRef.value = scene
|
||||
createDayNightCycle(scene)
|
||||
createRainEffect(scene)
|
||||
createFogEffect(scene)
|
||||
@ -58,12 +61,12 @@ const createRainEffect = (scene: Phaser.Scene) => {
|
||||
quantity: 5,
|
||||
lifespan: 2000,
|
||||
speedY: { min: 300, max: 500 },
|
||||
scale: { start: 0.1, end: 0.2 },
|
||||
scale: { start: 0.005, end: 0.005 },
|
||||
alpha: { start: 0.5, end: 0 },
|
||||
blendMode: 'ADD'
|
||||
})
|
||||
rainEmitter.value.setDepth(900)
|
||||
toggleRain(false) // Start with rain off
|
||||
toggleRain(true) // Start with rain off
|
||||
}
|
||||
|
||||
const toggleRain = (isRaining: boolean) => {
|
||||
@ -73,10 +76,10 @@ const toggleRain = (isRaining: boolean) => {
|
||||
}
|
||||
|
||||
const createFogEffect = (scene: Phaser.Scene) => {
|
||||
fogSprite.value = scene.add.sprite(window.width / 2, window.innerHeight / 2, 'fog')
|
||||
fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
||||
fogSprite.value.setScale(2)
|
||||
fogSprite.value.setAlpha(0)
|
||||
fogSprite.value.setDepth(950)
|
||||
fogSprite.value.setAlpha(0) // yeetdasasdasd
|
||||
fogSprite.value.setDepth(950) // yeetdasasdasd
|
||||
}
|
||||
|
||||
const updateFogEffect = () => {
|
||||
@ -101,6 +104,6 @@ const controlEffects = {
|
||||
defineExpose(controlEffects)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.destroy()
|
||||
if (sceneRef.value) sceneRef.value.scene.remove('effects')
|
||||
})
|
||||
</script>
|
||||
9
src/components/gui/ExpBar.vue
Normal file
9
src/components/gui/ExpBar.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
@ -1,46 +1,5 @@
|
||||
<template>
|
||||
<div class="hud-wrapper relative left-0 w-[310px] h-[84px]">
|
||||
<div class="absolute w-14 h-14 bg-gray rounded-full border-3 border-solid border-gray-500 top-1/2 -translate-y-1/2 left-0 z-20">
|
||||
<img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" draggable="false" src="/assets/avatar/default/head.png" />
|
||||
</div>
|
||||
<div class="hud-bg absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-top bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>
|
||||
<div class="absolute top-0 left-8 w-[280px] h-[84px] z-10 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">
|
||||
<div class="h-16 flex flex-col items-end py-2.5 pl-12 pr-5">
|
||||
<div class="w-full flex items-center justify-between mb-1.5">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm text-white">{{ gameStore.character.name }}</span>
|
||||
<span class="text-sm text-white">lvl. {{ gameStore.character.level }}</span>
|
||||
</div>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<label class="text-sm text-white" for="hp">HP</label>
|
||||
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>
|
||||
</div>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<label class="text-sm text-white" for="mp">MP</label>
|
||||
<progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-blue" id="mp" :value="gameStore.character.mana" max="100">{{ gameStore.character.mana }}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Replace gameStore.character with other (selected) player's -->
|
||||
<!-- <div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">-->
|
||||
<!-- <div class="absolute w-14 h-14 bg-white/80 rounded-full border-3 border-solid border-white top-1/2 -translate-y-1/2 right-0 z-20">-->
|
||||
<!-- <img class="w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -scale-x-100" draggable="false" src="/assets/avatar/default/head.png" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="hud-bg absolute top-0 right-8 w-[280px] h-[84px] z-10 bg-[url('/assets/bg-hud-2.png')] bg-center bg-[length:cover] bg-no-repeat mask-[url('/assets/shapes/hud-image-shape.svg')] mask-center mask-[length:cover] mask-no-repeat"></div>-->
|
||||
<!-- <div class="absolute top-0 right-8 w-[280px] h-[84px] z-10 -scale-x-100 bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">-->
|
||||
<!-- <div class="h-16 flex flex-col items-end -scale-x-100 py-2.5 pr-12 pl-5">-->
|
||||
<!-- <div class="w-full flex items-center justify-between mb-1.5">-->
|
||||
<!-- <span class="text-ellipsis overflow-hidden whitespace-nowrap max-w-32 text-sm">{{ gameStore.character.name }}</span>-->
|
||||
<!-- <span class="text-sm">lvl. {{ gameStore.character.level }}</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="w-full flex items-center justify-between">-->
|
||||
<!-- <label class="text-sm" for="hp">HP</label>-->
|
||||
<!-- <progress class="h-2 rounded-lg w-full max-w-44 appearance-none accent-red" id="hp" :value="gameStore.character.hitpoints" max="100">{{ gameStore.character.hitpoints }}%</progress>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
9
src/components/gui/Keybindings.vue
Normal file
9
src/components/gui/Keybindings.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
9
src/components/gui/Minimap.vue
Normal file
9
src/components/gui/Minimap.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
@ -5,24 +5,18 @@
|
||||
|
||||
<div v-if="!zoneEditorStore.active">
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Effects />
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<div v-if="isLoaded">
|
||||
<Inventory />
|
||||
<div class="fixed inset-x-0 top-0 flex justify-start items-end p-10 pointer-events-none">
|
||||
<div class="pointer-events-auto">
|
||||
<Hud />
|
||||
</div>
|
||||
</div>
|
||||
<Menu />
|
||||
<Hud />
|
||||
<Keybindings />
|
||||
<Minimap />
|
||||
<Zone />
|
||||
<div class="fixed inset-x-0 bottom-0 flex justify-between gap-5 items-end py-10 px-5 xxs:p-10 pointer-events-none max-md:flex-wrap max-md:flex-col-reverse">
|
||||
<div class="pointer-events-auto w-full">
|
||||
<Chat />
|
||||
</div>
|
||||
<div class="pointer-events-auto max-xs:m-auto mr-auto">
|
||||
<Menubar />
|
||||
</div>
|
||||
</div>
|
||||
<Chat />
|
||||
<Inventory />
|
||||
<ExpBar />
|
||||
|
||||
<Effects />
|
||||
</div>
|
||||
</Scene>
|
||||
</Game>
|
||||
@ -43,16 +37,20 @@ import { ref, onBeforeUnmount } from 'vue'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import Menu from '@/components/gui/Menu.vue'
|
||||
import ExpBar from '@/components/gui/ExpBar.vue'
|
||||
import Hud from '@/components/gui/Hud.vue'
|
||||
import Zone from '@/components/zone/Zone.vue'
|
||||
import Keybindings from '@/components/gui/Keybindings.vue'
|
||||
import Chat from '@/components/gui/Chat.vue'
|
||||
import Menubar from '@/components/gui/Menu.vue'
|
||||
import GmTools from '@/components/gameMaster/GmTools.vue'
|
||||
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
|
||||
import GmPanel from '@/components/gameMaster/GmPanel.vue'
|
||||
import Inventory from '@/components/gui/UserPanel.vue'
|
||||
import { loadAssets } from '@/composables/zoneComposable'
|
||||
import Effects from '@/components/Effects.vue'
|
||||
import { loadAssets } from '@/composables/zoneComposable'
|
||||
import Minimap from '@/components/gui/Minimap.vue'
|
||||
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user