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

add chat background so it is easier to see

Browse Source
This commit is contained in:
Alberto Xamin 2022-12-13 22:24:13 +01:00
parent 35c241d9cf
commit 5dcfc884c9
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/server.py
View File

@ -549,8 +549,11 @@ def chat_message(sid, msg, pl=None):
else: else:
sio.emit('chat_message', room=sid, data={'color': f'','text':f'{msg} COMMAND NOT FOUND'}) sio.emit('chat_message', room=sid, data={'color': f'','text':f'{msg} COMMAND NOT FOUND'})
else: else:
color = sid.encode('utf-8').hex()[-3:] # get a color from sid
sio.emit('chat_message', room=ses.game.name, data={'color': f'#{color}','text':f'[{ses.name}]: {msg}'}) color = sid.encode('utf-8').hex()[0:6]
#bg color will be slightly darker and transparent
bg_color = f'{int(color[0:2],16)-10:02x}{int(color[2:4],16)-10:02x}{int(color[4:6],16)-10:02x}20'
sio.emit('chat_message', room=ses.game.name, data={'color': f'#{color}', 'bgcolor': f'#{bg_color}','text':f'[{ses.name}]: {msg}'})
if not ses.game.is_replay: if not ses.game.is_replay:
Metrics.send_metric('chat_message', points=[1], tags=[f'game:{ses.game.name.replace(" ","_")}']) Metrics.send_metric('chat_message', points=[1], tags=[f'game:{ses.game.name.replace(" ","_")}'])

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

@ -4,7 +4,7 @@
<h3>{{$t("chat.chat")}}</h3> <h3>{{$t("chat.chat")}}</h3>
<transition-group name="message" tag="div" id="chatbox"> <transition-group name="message" tag="div" id="chatbox">
<!-- <div id="chatbox"> --> <!-- <div id="chatbox"> -->
<p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color}`">{{msg.text}}</p> <p style="margin:1pt;" class="chat-message" v-for="(msg, i) in messages" v-bind:key="`${i}-c`" :style="`color:${msg.color};background:${msg.bgcolor}`">{{msg.text}}</p>
<p class="end" key="end" style="color:#0000">.</p> <p class="end" key="end" style="color:#0000">.</p>
<!-- </div> --> <!-- </div> -->
</transition-group> </transition-group>
@ -52,8 +52,10 @@ export default {
// console.log(msg) // console.log(msg)
if ((typeof msg === "string" && msg.indexOf('_') === 0) || (msg.color != null && msg.text.indexOf('_') === 0)) { if ((typeof msg === "string" && msg.indexOf('_') === 0) || (msg.color != null && msg.text.indexOf('_') === 0)) {
let t_color = null let t_color = null
let bg_color = null
if (msg.color != null) { if (msg.color != null) {
t_color = msg.color t_color = msg.color
bg_color = msg.bgcolor
msg = msg.text msg = msg.text
} }
let params = msg.split('|') let params = msg.split('|')
@ -75,7 +77,7 @@ export default {
} }
} }
if (t_color != null) { if (t_color != null) {
this.messages.push({color:t_color, text:this.$t(`chat.${type}`, params)}); this.messages.push({color:t_color, bgcolor: bg_color, text:this.$t(`chat.${type}`, params)});
} else { } else {
this.messages.push({text:this.$t(`chat.${type}`, params)}); this.messages.push({text:this.$t(`chat.${type}`, params)});
} }