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

visual fixes

Browse Source
This commit is contained in:
Alberto Xamin 2021-05-22 20:05:12 +02:00
parent cae7f2dfcb
commit 4f8b5ea0c8
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
6 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/bang/game.py
View File

@ -51,12 +51,12 @@ class Game:
'started': self.started, 'started': self.started,
'players': [{'name':p.name, 'ready': p.character != None, 'is_bot': p.is_bot} for p in self.players], 'players': [{'name':p.name, 'ready': p.character != None, 'is_bot': p.is_bot} for p in self.players],
'password': self.password, 'password': self.password,
'debug': self.debug,
'is_competitive': self.is_competitive, 'is_competitive': self.is_competitive,
'disconnect_bot': self.disconnect_bot, 'disconnect_bot': self.disconnect_bot,
'expansions': self.expansions, 'expansions': self.expansions,
'available_expansions': self.available_expansions, 'available_expansions': self.available_expansions,
}) })
self.sio.emit('debug', room=self.name, data=self.debug)
self.sio.emit('spectators', room=self.name, data=len(self.spectators)) self.sio.emit('spectators', room=self.name, data=len(self.spectators))
def toggle_expansion(self, expansion_name): def toggle_expansion(self, expansion_name):

24
frontend/src/App.vue
View File

@ -9,8 +9,8 @@
</div> </div>
<help v-if="showHelp"/> <help v-if="showHelp"/>
<div style="position:fixed;bottom:4pt;right:4pt;display:flex;"> <div style="position:fixed;bottom:4pt;right:4pt;display:flex;">
<input type="button" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/> <input type="button" class="btn" :value="(showHelp?'X':'?')" style="min-width:28pt;border-radius:100%;cursor:pointer;" @click="getHelp"/>
<select id="lang" v-model="theme"> <select id="theme" class="btn" v-model="theme">
<option <option
v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']" v-for="(theme, i) in ['light.☀️.Light', 'dark.🌙️.Dark', 'sepia..Sepia', 'grayscale..Grayscale']"
:key="`theme-${i}`" :key="`theme-${i}`"
@ -18,7 +18,7 @@
{{theme.split('.')[1]}} {{theme.split('.')[2]}} {{theme.split('.')[1]}} {{theme.split('.')[2]}}
</option> </option>
</select> </select>
<select id="lang" v-model="$i18n.locale" @change="storeLangPref"> <select id="lang" class="btn" v-model="$i18n.locale" @change="storeLangPref">
<option <option
v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']" v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
:key="`lang-${i}`" :key="`lang-${i}`"
@ -218,6 +218,7 @@ input:disabled {
:root { :root {
--font-color: #2c3e50; --font-color: #2c3e50;
--bg-color: white; --bg-color: white;
--muted-color: #ccc;
} }
[data-theme="dark"] { [data-theme="dark"] {
--font-color: rgb(174, 194, 211); --font-color: rgb(174, 194, 211);
@ -226,14 +227,31 @@ input:disabled {
[data-theme="sepia"] { [data-theme="sepia"] {
--font-color: rgb(54, 43, 33); --font-color: rgb(54, 43, 33);
--bg-color: #e7d6bb; --bg-color: #e7d6bb;
--muted-color: rgba(54, 43, 33, 0.5);
} }
[data-theme="grayscale"] { [data-theme="grayscale"] {
--font-color: rgb(66, 66, 66); --font-color: rgb(66, 66, 66);
--bg-color: #e2e0e0; --bg-color: #e2e0e0;
--muted-color: rgba(66, 66, 66, 0.5);
} }
html, #app, input, select { html, #app, input, select {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--font-color); color: var(--font-color);
} }
.btn {
background-color: var(--bg-color);
color: var(--font-color);
border: 2px solid var(--font-color);
border-radius: 12pt;
cursor: pointer;
transition: all 0.13s ease-in-out;
}
.btn:hover:not([disabled]) {
background-color: var(--font-color); /* Green */
color: var(--bg-color);
}
.btn:disabled {
cursor: not-allowed;
}
</style> </style>

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

@ -10,7 +10,7 @@
</transition-group> </transition-group>
<form @submit="sendChatMessage" id="msg-form"> <form @submit="sendChatMessage" id="msg-form">
<input v-model="text" style="flex-grow:2;"/> <input v-model="text" style="flex-grow:2;"/>
<input type="submit" :value="$t('submit')"/> <input id="submit-message" type="submit" class="btn" :value="$t('submit')"/>
</form> </form>
</div> </div>
</template> </template>
@ -112,7 +112,7 @@ export default {
overflow-x: hidden; overflow-x: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow-wrap: normal; overflow-wrap: normal;
border: 2pt solid #ccc; border: 2pt solid var(--muted-color);
border-radius: 4pt; border-radius: 4pt;
} }
input { input {
@ -129,6 +129,7 @@ input {
#msg-form { #msg-form {
width:100%; width:100%;
padding:0; padding:0;
margin-top: 6pt;
display:flex; display:flex;
} }
.message-enter-active, .message-leave-active { .message-enter-active, .message-leave-active {
@ -143,11 +144,18 @@ input {
height: 90vh; height: 90vh;
margin-left: 10pt; margin-left: 10pt;
} }
#submit-message {
margin-left: 6pt;
margin-right: -5pt;
}
} }
@media only screen and (max-width:1000px) { @media only screen and (max-width:1000px) {
#msg-form { #msg-form {
flex-direction: column; flex-direction: column;
} }
#submit-message {
margin-top: 6pt;
}
#chatbox { #chatbox {
max-height:150px; max-height:150px;
} }

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

@ -3,16 +3,16 @@
<div style="flex-grow: 4;"> <div style="flex-grow: 4;">
<div style="position:relative;"> <div style="position:relative;">
<h2 v-if="!started">{{$t('room')}}{{ lobbyName }}</h2> <h2 v-if="!started">{{$t('room')}}{{ lobbyName }}</h2>
<input style="position:absolute;top:0;right:0;max-height:100pt" v-if="!started" type="button" @click="leaveRoom" :value="$t('leave_room')"/> <input style="position:absolute;top:0;right:0;max-height:100pt" v-if="!started" type="button" class="btn" @click="leaveRoom" :value="$t('leave_room')"/>
</div> </div>
<h3>{{$t('room_players', {username:username})}}</h3> <h3>{{$t('room_players', {username:username})}}</h3>
<div v-if="debug" style="position: absolute;top: 6pt;right: 6pt;"> <div v-if="debug_mode" style="position: absolute;top: 6pt;right: 6pt;">
<p style="padding:0 10px;background:red;color:white;border-radius:12pt;">DEBUG ON</p> <p style="padding:0 10px;background:red;color:white;border-radius:12pt;">DEBUG ON</p>
</div> </div>
<div v-if="!started"> <div v-if="!started">
<PrettyCheck v-if="isRoomOwner" class="p-switch p-fill" v-model="privateRoom" style="margin-top:5px; margin-bottom:3px;">{{$t("private_room")}}</PrettyCheck> <PrettyCheck v-if="isRoomOwner" class="p-switch p-fill" v-model="privateRoom" style="margin-top:5px; margin-bottom:3px;">{{$t("private_room")}}</PrettyCheck>
<label v-if="password !== ''">{{$t('password')}}<b class="selectable" style="font-size:larger;">{{ password }}</b></label> <label v-if="password !== ''">{{$t('password')}}<b class="selectable" style="font-size:larger;">{{ password }}</b></label>
<input type="button" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/> <input type="button" class="btn" style="margin-left: 10pt;" v-clipboard:copy="inviteLink" :value="$t('copy')"/>
</div> </div>
<!-- <div class="players-table"> --> <!-- <div class="players-table"> -->
@ -56,8 +56,8 @@
<h3>{{$t('mods')}}</h3> <h3>{{$t('mods')}}</h3>
<PrettyCheck @click.native="toggleCompetitive" :disabled="!isRoomOwner" v-model="is_competitive" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('mod_comp')}}</PrettyCheck> <PrettyCheck @click.native="toggleCompetitive" :disabled="!isRoomOwner" v-model="is_competitive" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('mod_comp')}}</PrettyCheck>
<h3>{{$t('bots')}}</h3> <h3>{{$t('bots')}}</h3>
<input type="button" :value="$t('add_bot')" :disabled="!isRoomOwner || players.length > 7" @click="()=>{this.$socket.emit('chat_message', '/addbot')}"/> <input type="button" class="btn" :value="$t('add_bot')" :disabled="!isRoomOwner || players.length > 7" @click="()=>{this.$socket.emit('chat_message', '/addbot')}"/>
<input type="button" style="margin-left: 10pt;" :value="$t('remove_bot')" :disabled="!isRoomOwner || !isThereAnyBot" @click="()=>{this.$socket.emit('chat_message', '/removebot')}"/> <input type="button" class="btn" style="margin-left: 10pt;" :value="$t('remove_bot')" :disabled="!isRoomOwner || !isThereAnyBot" @click="()=>{this.$socket.emit('chat_message', '/removebot')}"/>
<!-- <br> --> <!-- <br> -->
<!-- <PrettyCheck @click.native="toggleReplaceWithBot" :disabled="!isRoomOwner" v-model="disconnect_bot" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('disconnect_bot')}}</PrettyCheck> --> <!-- <PrettyCheck @click.native="toggleReplaceWithBot" :disabled="!isRoomOwner" v-model="disconnect_bot" class="p-switch p-fill" style="margin-top:5px; margin-bottom:3px;">{{$t('disconnect_bot')}}</PrettyCheck> -->
</div> </div>
@ -117,7 +117,7 @@ export default {
hasToSetUsername: false, hasToSetUsername: false,
is_competitive: false, is_competitive: false,
disconnect_bot: false, disconnect_bot: false,
debug: false, debug_mode: false,
}), }),
sockets: { sockets: {
room(data) { room(data) {
@ -134,7 +134,6 @@ export default {
this.disconnect_bot = data.disconnect_bot this.disconnect_bot = data.disconnect_bot
this.togglable_expansions = data.available_expansions this.togglable_expansions = data.available_expansions
this.expansions = data.expansions this.expansions = data.expansions
this.debug = data.debug
this.players = data.players.map(x => { this.players = data.players.map(x => {
return { return {
name: x.name, name: x.name,
@ -144,6 +143,9 @@ export default {
} }
}) })
}, },
debug(data) {
this.debug_mode = data;
},
start() { start() {
this.started = true; this.started = true;
}, },

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

@ -14,7 +14,7 @@
<p>{{$t("choose_username")}}</p> <p>{{$t("choose_username")}}</p>
<form @submit="setUsername"> <form @submit="setUsername">
<input id="username" v-model="username" /> <input id="username" v-model="username" />
<input type="submit" :value="$t('submit')"/> <input type="submit" class="btn" :value="$t('submit')"/>
</form> </form>
<p v-if="onlinePlayers > 0">{{$t("online_players")}}{{onlinePlayers}}</p> <p v-if="onlinePlayers > 0">{{$t("online_players")}}{{onlinePlayers}}</p>
</div> </div>
@ -26,7 +26,7 @@
<form @submit="createLobby" style="display:flex"> <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" class="btn" :value="$t('submit')"/>
</form> </form>
<h2>{{$t("available_lobbies")}}</h2> <h2>{{$t("available_lobbies")}}</h2>
<div style="display: flex"> <div style="display: flex">

14
frontend/src/components/Player.vue
View File

@ -20,10 +20,12 @@
<transition name="list"> <transition name="list">
<p v-if="desc"><i>{{desc}}</i></p> <p v-if="desc"><i>{{desc}}</i></p>
</transition> </transition>
<button v-if="is_my_turn && character.name === 'Sid Ketchum' && lives < max_lives && hand.length > 1" @click="sidWantsScrapForHealth=true">{{$t('special_ability')}}</button> <div style="margin-bottom:6pt;margin-bottom: 6pt;display: flex;flex-direction: column;">
<button v-if="is_my_turn && character.name === 'Chuck Wengam' && lives > 1" @click="chuckSpecial">{{$t('special_ability')}}</button> <button class="btn" v-if="is_my_turn && character.name === 'Sid Ketchum' && lives < max_lives && hand.length > 1" @click="sidWantsScrapForHealth=true">{{$t('special_ability')}}</button>
<button v-if="is_my_turn && character.name === 'José Delgrado' && special_use_count < 2 && hand.filter(x => x.is_equipment).length > 0" @click="joseScrap=true">{{$t('special_ability')}}</button> <button class="btn" v-if="is_my_turn && character.name === 'Chuck Wengam' && lives > 1" @click="chuckSpecial">{{$t('special_ability')}}</button>
<button v-if="is_my_turn && character.name === 'Doc Holyday' && special_use_count < 1 && hand.length > 1" @click="holydayScrap=true">{{$t('special_ability')}}</button> <button class="btn" v-if="is_my_turn && character.name === 'José Delgrado' && special_use_count < 2 && hand.filter(x => x.is_equipment).length > 0" @click="joseScrap=true">{{$t('special_ability')}}</button>
<button class="btn" v-if="is_my_turn && character.name === 'Doc Holyday' && special_use_count < 1 && hand.length > 1" @click="holydayScrap=true">{{$t('special_ability')}}</button>
</div>
<div v-if="lives > 0 || is_ghost" style="position:relative"> <div v-if="lives > 0 || is_ghost" style="position:relative">
<span id="hand_text">{{$t('hand')}}</span> <span id="hand_text">{{$t('hand')}}</span>
<transition-group name="list" tag="div" :class="{hand:true, 'play-cards':pending_action===2}"> <transition-group name="list" tag="div" :class="{hand:true, 'play-cards':pending_action===2}">
@ -421,7 +423,7 @@ export default {
.hand { .hand {
position: relative; position: relative;
display:flex; display:flex;
border: 2px dashed #ccc; border: 2px dashed var(--muted-color);
padding: 10pt 40pt 0pt 40pt; padding: 10pt 40pt 0pt 40pt;
overflow:auto; overflow:auto;
border-radius: 4pt; border-radius: 4pt;
@ -442,7 +444,7 @@ export default {
transform: translateY(-15px); transform: translateY(-15px);
} }
#hand_text{ #hand_text{
color: #ccc; color: var(--muted-color);
position: absolute; position: absolute;
font-size: xxx-large; font-size: xxx-large;
font-weight: 300; font-weight: 300;