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

chat improvements

Browse Source
This commit is contained in:
Alberto Xamin 2020-12-13 12:29:28 +01:00
parent b6b8dd7dbf
commit 08287b4818
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
3 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/__init__.py
View File

@ -173,13 +173,14 @@ def chat_message(sid, msg):
elif '/cancelgame' in msg and ses.game.started: elif '/cancelgame' in msg and ses.game.started:
ses.game.reset() ses.game.reset()
elif '/gameinfo' in msg: elif '/gameinfo' in msg:
sio.emit('chat_message', room=sid, data=f'info: {ses.game.__dict__}') sio.emit('chat_message', room=sid, data={'color': f'#black','text':f'info: {ses.game.__dict__}'})
elif '/meinfo' in msg: elif '/meinfo' in msg:
sio.emit('chat_message', room=sid, data=f'info: {ses.__dict__}') sio.emit('chat_message', room=sid, data={'color': f'#black','text':f'info: {ses.__dict__}'})
else: else:
sio.emit('chat_message', room=sid, data=f'{msg} COMMAND NOT FOUND') sio.emit('chat_message', room=sid, data={'color': f'#black','text':f'{msg} COMMAND NOT FOUND'})
else: else:
sio.emit('chat_message', room=ses.game.name, data=f'[{ses.name}]: {msg}') color = sid.encode('utf-8').hex()[-3:]
sio.emit('chat_message', room=ses.game.name, data={'color': f'#{color}','text':f'[{ses.name}]: {msg}'})
@sio.event @sio.event
def start_game(sid): def start_game(sid):

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

@ -2,7 +2,7 @@
<div class="chat"> <div class="chat">
<h3>{{$t("chat.chat")}}</h3> <h3>{{$t("chat.chat")}}</h3>
<div id="chatbox"> <div id="chatbox">
<p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg">{{msg}}</p> <p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg" :style="`color:${msg.color}`">{{msg.text}}</p>
<p class="end">.</p> <p class="end">.</p>
</div> </div>
<form @submit="sendChatMessage" id="msg-form"> <form @submit="sendChatMessage" id="msg-form">
@ -21,10 +21,11 @@ export default {
}), }),
sockets: { sockets: {
chat_message(msg) { chat_message(msg) {
if (msg.indexOf('_') === 0) { console.log(msg)
if ((typeof msg === "string") && msg.indexOf('_') === 0) {
let params = msg.split('|') let params = msg.split('|')
let type = params.shift().substring(1) let type = params.shift().substring(1)
this.messages.push(this.$t(`chat.${type}`, params)) this.messages.push({text:this.$t(`chat.${type}`, params)})
}else { }else {
this.messages.push(msg) this.messages.push(msg)
} }
@ -45,8 +46,8 @@ export default {
</script> </script>
<style scoped> <style scoped>
#chatbox { #chatbox {
flex: 1;
width:100%; width:100%;
max-height:150px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -61,14 +62,27 @@ input {
height: 0pt; height: 0pt;
margin-top: -1.5pt; margin-top: -1.5pt;
} }
.chat {
display: flex;
flex-direction: column;
}
#msg-form { #msg-form {
width:100%; width:100%;
padding:0; padding:0;
display:flex; display:flex;
} }
@media only screen and (min-width:1000px) {
.chat {
height: 90vh;
margin-left: 10pt;
}
}
@media only screen and (max-width:1000px) { @media only screen and (max-width:1000px) {
#msg-form { #msg-form {
flex-direction: column; flex-direction: column;
} }
#chatbox {
max-height:150px;
}
} }
</style> </style>

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

@ -20,8 +20,8 @@
<transition name="list"> <transition name="list">
<p v-if="desc"><i>{{desc}}</i></p> <p v-if="desc"><i>{{desc}}</i></p>
</transition> </transition>
<div v-if="lives > 0"> <div v-if="lives > 0" style="position:relative">
<span>{{$t('hand')}}</span> <span id="hand_text">{{$t('hand')}}</span>
<transition-group name="list" tag="div" class="hand"> <transition-group name="list" tag="div" class="hand">
<Card v-for="card in hand" v-bind:key="card.name+card.number" :card="card" <Card v-for="card in hand" v-bind:key="card.name+card.number" :card="card"
@click.native="play_card(card, false)" @click.native="play_card(card, false)"
@ -328,10 +328,9 @@ export default {
opacity: 0.5; opacity: 0.5;
} }
.hand { .hand {
margin-top: -16pt;
position: relative; position: relative;
display:flex; display:flex;
border: 1px solid #ccc; border: 2px dashed #ccc;
padding: 10pt 40pt 0pt 40pt; padding: 10pt 40pt 0pt 40pt;
overflow:auto; overflow:auto;
border-radius: 4pt; border-radius: 4pt;
@ -344,6 +343,14 @@ export default {
margin-right:35pt; margin-right:35pt;
transform: translateY(-15px); transform: translateY(-15px);
} }
#hand_text{
color: #ccc;
position: absolute;
font-size: xxx-large;
font-weight: 300;
bottom: 0;
right: 10pt;
}
.equipment-slot { .equipment-slot {
display:flex; display:flex;
margin: 10pt 0pt; margin: 10pt 0pt;