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

npm run format, started working on follow player logic, refactor some camera logic

Browse Source
This commit is contained in:
Dennis Postma
2024-09-22 02:14:32 +02:00
parent 42291b93eb
commit 9b592d6c7c
14 changed files with 101 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/gameMaster/GmTools.vue
View File

@ -19,29 +19,26 @@ import { onMounted, ref } from 'vue'
const zoneEditorStore = useZoneEditorStore()
const gameStore = useGameStore()
const modalWidth = ref(200);
const modalHeight = ref(160);
const modalWidth = ref(200)
const modalHeight = ref(160)
let posXY = ref({x: 0, y: 0});
let posXY = ref({ x: 0, y: 0 })
onMounted(() => {
window.addEventListener('resize', () => {
posXY.value = customPositionGmPanel(modalWidth.value);
posXY.value = customPositionGmPanel(modalWidth.value)
})
})
const customPositionGmPanel = (modalWidth: number) => {
const padding = 25
const width = window.innerWidth
const x = width - (modalWidth+4) - 25
const x = width - (modalWidth + 4) - 25
const y = padding
return { x, y }
}
posXY.value = customPositionGmPanel(modalWidth.value)
</script>

12
src/components/gameMaster/zoneEditor/ZoneEditor.vue
View File

@ -29,15 +29,7 @@ import { Container, Image, useScene } from 'phavuer'
import { storeToRefs } from 'pinia'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import {
calculateIsometricDepth,
loadAssets,
placeTile,
setAllTiles,
sortByIsometricDepth,
tileToWorldX,
tileToWorldY
} from '@/composables/zoneComposable'
import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
import { uuidv4 } from '@/utilities'
import config from '@/config'
@ -323,5 +315,5 @@ const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
onBeforeMount(async () => {
await gameStore.fetchAllZoneAssets()
await loadAssets(scene)
});
})
</script>

24
src/components/gameMaster/zoneEditor/partials/Toolbar.vue
View File

@ -68,9 +68,7 @@
<div class="w-px bg-cyan"></div>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone">
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span>
</button>
<button class="flex justify-center items-center min-w-10 p-0 relative" @click="handleClick('settings')" v-if="zoneEditorStore.zone"><img class="invert w-5 h-5" src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" /> <span class="ml-2.5">(Z)</span></button>
</div>
<div class="flex gap-2.5 ml-auto">
@ -163,14 +161,14 @@ onBeforeUnmount(() => {
})
function handleClick(tool: string) {
if(tool === 'settings') {
if (tool === 'settings') {
zoneEditorStore.toggleSettingsModal()
} else {
zoneEditorStore.setTool(tool)
}
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false;
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false;
selectPencilOpen.value = tool === 'pencil' ? !selectPencilOpen.value : false
selectEraserOpen.value = tool === 'eraser' ? !selectEraserOpen.value : false
}
// Key bindings
@ -180,15 +178,15 @@ function initKeyShortcuts(event: KeyboardEvent) {
if (document.activeElement?.tagName === 'INPUT') return
const keyActions: any = {
'm': 'move',
'p': 'pencil',
'e': 'eraser',
'b': 'paint',
'z': 'settings'
};
m: 'move',
p: 'pencil',
e: 'eraser',
b: 'paint',
z: 'settings'
}
if (keyActions.hasOwnProperty(event.key)) {
handleClick(keyActions[event.key]);
handleClick(keyActions[event.key])
}
}

24
src/components/sprites/Character.vue
View File

@ -8,8 +8,7 @@
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
</Container>
<!-- <Text :text="isometricDepth" :depth="isometricDepth" :x="currentX" :y="currentY" />-->
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY">
<Container :depth="isometricDepth" v-if="props.character" :x="currentX" :y="currentY" ref="charContainer">
<Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
<Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
</Container>
@ -29,6 +28,8 @@ enum Direction {
NOCHANGE
}
const charContainer = ref<Phaser.GameObjects.Container | null>(null)
interface Props {
layer: Phaser.Tilemaps.TilemapLayer
character?: CharacterT
@ -38,14 +39,15 @@ const props = withDefaults(defineProps<Props>(), {
character: undefined
})
const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
const gameStore = useGameStore()
const scene = useScene()
const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
const currentX = ref(0)
const currentY = ref(0)
const gameStore = useGameStore();
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)
const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
}
@ -54,11 +56,6 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
const targetX = tileToWorldX(props.layer, x, y)
const targetY = tileToWorldY(props.layer, x, y)
// Used for camera resize calculation to center on Character.
if(gameStore.character) {
gameStore.character.relativePosition = { x: targetX, y: targetY };
}
if (isInitialPosition.value) {
currentX.value = targetX
currentY.value = targetY
@ -165,6 +162,13 @@ const createText = (text: Phaser.GameObjects.Text) => {
}
onMounted(() => {
/**
* @TODO: Put this at an appropriate place not in this component
*/
// Check if player is this character, then lock with camera
if (props.character && props.character.id === gameStore.character?.id) {
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
}
if (props.character) {
updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)
}

6
src/components/utilities/Modal.vue
View File

@ -157,7 +157,7 @@ function handleResize() {
function initializePosition() {
width.value = Math.min(props.modalWidth, window.innerWidth)
height.value = Math.min(props.modalHeight, window.innerHeight)
if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
console.log(props.modalPositionX)
console.log(props.modalPositionY)
x.value = props.modalPositionX
@ -226,7 +226,7 @@ onMounted(() => {
window.addEventListener('mouseup', stopDrag)
window.addEventListener('mousemove', resizeModal)
window.addEventListener('mouseup', stopResize)
if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
window.addEventListener('resize', handleResize)
}
initializePosition()
@ -237,7 +237,7 @@ onUnmounted(() => {
window.removeEventListener('mouseup', stopDrag)
window.removeEventListener('mousemove', resizeModal)
window.removeEventListener('mouseup', stopResize)
if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
window.removeEventListener('resize', handleResize)
}
})

8
src/components/zone/Zone.vue
View File

@ -26,7 +26,6 @@ type zoneLoadData = {
characters: CharacterT[]
}
gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
// Fetch assets for new zone
await gameStore.fetchZoneAssets(response.zone.id)
@ -35,7 +34,6 @@ gameStore.connection!.emit('zone:character:join', async (response: zoneLoadData)
// Set zone and characters
zoneStore.setZone(response.zone)
zoneStore.setCharacters(response.characters)
scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) - gameStore.character.relativePosition.x, -(scene.cameras.main.worldView.height/2) + gameStore.character.relativePosition.y)
})
// Event listeners
@ -57,12 +55,6 @@ gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) =
zoneStore.setZone(data.zone)
zoneStore.setCharacters(data.characters)
const character = gameStore.character;
// Position character centered on zone change or teleport
const posX = tileToWorldX(tileMap.value, character.positionX, character.positionY)
const posY = tileToWorldY(tileMap.value, character.positionX, character.positionY)
scene.cameras.main.setScroll(-(scene.cameras.main.worldView.width/2) + posX, -(scene.cameras.main.worldView.height/2) + posY)
})
gameStore.connection!.on('zone:character:join', async (data: ExtendedCharacterT) => {