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

Optimization, small tailwind tweaks

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-06 23:31:37 +02:00
parent 5fad4583ad
commit dfe5550fa6
14 changed files with 66 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/gui/Chat.vue
View File

@ -1,15 +1,5 @@
<template>
<div class="chat-wrapper w-full h-full flex justify-start items-center">
<input class="max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
<input class="bg-[calc(100%_-_25px)_center] max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
</div>
</template>
<style scoped lang="scss">
.chat-wrapper {
input {
// @TODO: find Tailwind alternative as calc() doesnt work
background-position: calc(100% - 25px) center;
}
}
</style>

2
src/components/gui/Hud.vue
View File

@ -25,7 +25,7 @@
<!-- TODO: Replace socket.character with other (selected) player's -->
<div class="hud-wrapper other-player relative right-0 w-[310px] h-[84px]">
<div class="absolute w-[54px] h-[54px] bg-white bg-opacity-80 rounded-full border-3 border-solid border-white top-1/2 translate-y-[-50%] right-0 z-20">
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]"draggable="false" src="/assets/avatar/default/head.png" />
<img class="w-[28px] absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] scale-x-[-1]" draggable="false" src="/assets/avatar/default/head.png" />
</div>
<div class="hud-bg absolute top-0 right-[30px] 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-[30px] w-[280px] h-[84px] z-10 scale-x-[-1] bg-[url('/assets/shapes/hud-shape-empty.svg')] bg-center bg-[length:cover] bg-no-repeat">

1
src/components/utilities/GmTools.vue
View File

@ -19,4 +19,3 @@ import { useGmPanelStore } from '@/stores/gmPanel'
const zoneEditorStore = useZoneEditorStore()
const gmPanelStore = useGmPanelStore()
</script>

2
src/components/utilities/assetManager/AssetManager.vue
View File

@ -6,7 +6,7 @@
<span>Tiles</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<a class="relative p-2.5 hover:cursor-pointer" :class="{ selected: selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
<span>Objects</span>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>

8
src/components/utilities/zoneEditor/Objects.vue
View File

@ -5,10 +5,10 @@
<h3 class="text-lg">Objects</h3>
<div class="flex">
<div class="w-full flex gap-1.5 flex-row">
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
</div>
<div>
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
<input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
</div>
<div>
<label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
<input @mousedown.stop class="input-cyan" type="number" name="z-index" placeholder="Z-index" />

20
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -1,6 +1,6 @@
<template>
<Teleport to="body">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
<template #modalHeader>
<h3 class="m-0 font-medium shrink-0">Tiles</h3>
<div class="flex">
@ -15,8 +15,22 @@
<template #modalBody>
<div class="m-[15px]">
<div class="flex flex-wrap gap-2.5">
<img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
<img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in zoneEditorStore.tileList" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
<img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
src="/assets/zone/blank_tile.png"
alt="Blank tile"
@click="zoneEditorStore.setSelectedTile('blank_tile')"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }"
/>
<img
class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300"
v-for="(tile, index) in zoneEditorStore.tileList"
:key="index"
:src="`${config.server_endpoint}/assets/tiles/${tile}.png`"
alt="Tile"
@click="zoneEditorStore.setSelectedTile(tile)"
:class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }"
/>
</div>
</div>
</template>

2
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

@ -133,7 +133,7 @@ watch(objectList, (newObjects) => {
object: newObject
}
})
});
})
onBeforeMount(() => {
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))

14
src/screens/Characters.vue
View File

@ -3,7 +3,7 @@
<div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
<div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
<div class="filler"></div>
<div class="characters-wrapper flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
<div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
<div v-for="character in characters" :key="character.id" class="character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
<label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
@ -116,14 +116,10 @@ onBeforeUnmount(() => {
</script>
<style lang="scss">
@import '@/assets/scss/main';
.characters-wrapper {
.character {
&.active {
.selected-character {
@apply max-w-[170px];
}
.character {
&.active {
.selected-character {
@apply max-w-[170px];
}
}
}

59
src/screens/Game.vue
View File

@ -78,13 +78,13 @@ const preloadScene = (scene: Phaser.Scene) => {
/**
* Create loading bar
*/
const width = scene.cameras.main.width;
const height = scene.cameras.main.height;
const width = scene.cameras.main.width
const height = scene.cameras.main.height
const progressBox = scene.add.graphics();
const progressBar = scene.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(width / 2 - 180, height / 2, 320, 50);
const progressBox = scene.add.graphics()
const progressBar = scene.add.graphics()
progressBox.fillStyle(0x222222, 0.8)
progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
const loadingText = scene.make.text({
x: width / 2,
@ -94,21 +94,21 @@ const preloadScene = (scene: Phaser.Scene) => {
font: '20px monospace',
fill: '#ffffff'
}
});
loadingText.setOrigin(0.5, 0.5);
})
loadingText.setOrigin(0.5, 0.5)
scene.load.on('progress', function (value: any) {
progressBar.clear();
progressBar.fillStyle(0x368f8b, 1);
progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30);
});
progressBar.clear()
progressBar.fillStyle(0x368f8b, 1)
progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
})
scene.load.on('complete', function () {
progressBar.destroy();
progressBox.destroy();
loadingText.destroy();
progressBar.destroy()
progressBox.destroy()
loadingText.destroy()
isLoaded.value = true
});
})
/**
* Load the assets into the Phaser scene
@ -144,21 +144,20 @@ const createScene = (scene: Phaser.Scene) => {
* Watch for changes in assets and reload them
*/
watch(assets, (newAssets) => {
newAssets.forEach((asset) => {
if (asset.type === 'link') {
scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
}
if (asset.type === 'base64') {
scene.textures.addBase64(asset.key, asset.value)
}
})
newAssets.forEach((asset) => {
if (asset.type === 'link') {
scene.load.image(asset.key, config.server_endpoint + '/assets' + asset.value + '.png')
}
if (asset.type === 'base64') {
scene.textures.addBase64(asset.key, asset.value)
}
})
scene.load.start()
scene.load.start()
scene.load.once('complete', () => {
console.log('assets re-loaded')
})
}
)
scene.load.once('complete', () => {
console.log('assets re-loaded')
})
})
}
</script>

2
src/stores/assetManager.ts
View File

@ -33,6 +33,6 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
selectedTile,
selectedObject,
setSelectedTile,
setSelectedObject,
setSelectedObject
}
})

2
src/stores/assets.ts
View File

@ -6,7 +6,7 @@ export const useAssetStore = defineStore('assets', {
state: () => ({
assets: [] as Asset[],
tiles: [] as string[],
objects: [] as Object[],
objects: [] as Object[]
}),
actions: {
setAssets(assets: Asset[]) {