techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small visual improvements

Browse Source
This commit is contained in:
Alberto Xamin 2021-02-10 13:53:01 +01:00
parent 17a86fc2b9
commit 4f78811c32
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Lobby.vue
View File

@ -12,9 +12,10 @@
<input type="button" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/> <input type="button" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
</div> </div>
<div class="players-table"> <!-- <div class="players-table"> -->
<Card v-if="startGameCard" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> --> <!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<transition-group name="list" tag="div" class="players-table">
<Card v-if="startGameCard" key="_start_game_" :donotlocalize="true" :card="startGameCard" @click.native="startGame"/>
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;"> <div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
<transition-group v-if="p.max_lives && !p.is_ghost" name="list" tag="div" class="tiny-health"> <transition-group v-if="p.max_lives && !p.is_ghost" name="list" tag="div" class="tiny-health">
<span v-for="(n, i) in p.lives" v-bind:key="i" :alt="i">❤️</span> <span v-for="(n, i) in p.lives" v-bind:key="i" :alt="i">❤️</span>
@ -37,9 +38,10 @@
<span>🤖</span> <span>🤖</span>
</div> </div>
</div> </div>
</transition-group>
<!-- :style="p.style"/> --> <!-- :style="p.style"/> -->
<!-- </div> --> <!-- </div> -->
</div> <!-- </div> -->
<div v-if="!started"> <div v-if="!started">
<p v-if="players.length < 3" class="center-stuff">{{$t('minimum_players')}}</p> <p v-if="players.length < 3" class="center-stuff">{{$t('minimum_players')}}</p>
<h3>{{$t("expansions")}}</h3> <h3>{{$t("expansions")}}</h3>

13
frontend/src/components/Menu.vue
View File

@ -1,7 +1,12 @@
<template> <template>
<div id="app" class="dark-mode"> <div id="app" class="dark-mode">
<div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt;"> <div v-if="!isInLobby" id="logo" class="center-stuff" style="margin-bottom:10pt">
<h1 style="margin-bottom:0pt;">PewPew!</h1> <h1 style="margin-bottom:0pt;">PewPew!</h1>
<div style="display:flex;justify-content: space-evenly;;min-height:140pt;">
<span style="font-size:48pt;transform:scaleX(-1) translateY(25%);">🔫️</span>
<TinyHand :ncards="5" ismyturn="true" style="position:none;transform:scale(1);bottom:none;width:120pt;"/>
<span style="font-size:48pt;transform:translateY(25%);">🔫️</span>
</div>
<i style="font-size: x-small;">{{$t("trademark")}}</i> <i style="font-size: x-small;">{{$t("trademark")}}</i>
</div> </div>
<div> <div>
@ -17,8 +22,8 @@
<div v-if="!isInLobby" > <div v-if="!isInLobby" >
<p>{{$t("online_players")}}{{onlinePlayers}}</p> <p>{{$t("online_players")}}{{onlinePlayers}}</p>
<Card :card="getSelfCard" :donotlocalize="true" style="position:absolute; top:10pt; left: 10pt;"/> <Card :card="getSelfCard" :donotlocalize="true" style="position:absolute; top:10pt; left: 10pt;"/>
<form @submit="createLobby"> <h2>{{$t("create_lobby")}}</h2>
<h2>{{$t("create_lobby")}}</h2> <form @submit="createLobby" style="display:flex">
<p>{{$t("lobby_name")}}</p> <p>{{$t("lobby_name")}}</p>
<input id="lobbyname" v-model="lobbyName"/> <input id="lobbyname" v-model="lobbyName"/>
<input type="submit" :value="$t('submit')"/> <input type="submit" :value="$t('submit')"/>
@ -44,12 +49,14 @@
<script> <script>
// import Vue from 'vue' // import Vue from 'vue'
import Card from '@/components/Card.vue' import Card from '@/components/Card.vue'
import TinyHand from '@/components/TinyHand.vue'
// import Lobby from './components/Lobby.vue' // import Lobby from './components/Lobby.vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
Card, Card,
TinyHand,
// Lobby, // Lobby,
}, },
data: () => ({ data: () => ({