imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Convert game screen to tailwind

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-06 20:45:48 +02:00
parent 425da73930
commit 3098cf862e
2 changed files with 5 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template> <template>
<ul class="list-none flex gap-2.5"> <ul class="list-none flex gap-2.5 items-center">
<li class="menu-item relative"> <li class="menu-item relative">
<div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden"> <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
<p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p> <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>

37
src/screens/Game.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="game-container"> <div class="game-container flex justify-center items-center h-dvh p-[30px] relative">
<GmTools v-if="isLoaded" /> <GmTools v-if="isLoaded" />
<GmPanel v-if="isLoaded" /> <GmPanel v-if="isLoaded" />
<Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active"> <Game class="game" :config="gameConfig" @create="createGame" v-if="!zoneEditorStore.active">
<Scene name="main" @preload="preloadScene" @create="createScene"> <Scene name="main" @preload="preloadScene" @create="createScene">
<div class="top-ui" v-if="isLoaded"> <div class="top-ui flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0" v-if="isLoaded">
<Hud /> <Hud />
</div> </div>
<div class="center-ui" v-if="isLoaded"> <div class="center-ui" v-if="isLoaded">
<World /> <World />
</div> </div>
<div class="bottom-ui" v-if="isLoaded"> <div class="bottom-ui flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0" v-if="isLoaded">
<Chat /> <Chat />
<Menubar /> <Menubar />
</div> </div>
@ -167,34 +167,3 @@ const createScene = (scene: Phaser.Scene) => {
// }); // });
} }
</script> </script>
<style scoped lang="scss">
.game-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 30px;
position: relative;
}
.top-ui,
.bottom-ui {
display: flex;
position: absolute;
justify-content: space-between;
left: 0;
right: 0;
margin: 0 48px;
}
.top-ui {
top: 48px;
}
.bottom-ui {
align-items: center;
bottom: 100px;
height: 100px;
}
</style>