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 2022-12-14 11:57:23 +01:00
parent e16f89d0f6
commit 984ce50ad8
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
1 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,30 @@
<template> <template>
<div class="chat"> <div class="chat" :style="`${collapsed?'min-width:0':''}`">
<h4 v-if="spectators > 0">{{$tc("chat.spectators", spectators)}}</h4> <div class="chat-header">
<h3>{{$t("chat.chat")}}</h3> <div style="display:flex;align-items: center;max-height: 20pt;">
<transition-group name="message" tag="div" id="chatbox"> <h3>{{$t("chat.chat")}}</h3>
<!-- <div id="chatbox"> --> <button class="btn" @click="collapsed = !collapsed" style="max-height:20pt;">{{collapsed?">>":"X"}}</button>
<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> </div>
<p class="end" key="end" style="color:#0000">.</p> <h4 v-if="spectators > 0">{{$tc("chat.spectators", spectators)}}</h4>
<!-- </div> -->
</transition-group>
<div v-if="commandSuggestion.length > 0">
<p style="margin:1pt 15pt;cursor:pointer;" class="chat-message" v-for="(msg, i) in commandSuggestion" v-bind:key="`${i}-c`" :style="`color:orange`"
@click="fillCmd(msg.cmd)">{{msg.cmd}} <i class="std-text" style="font-size:8pt;">{{msg.help}}</i></p>
</div> </div>
<form @submit="sendChatMessage" id="msg-form"> <div class="cont">
<input id="my-msg" autocomplete="off" v-model="text" style="flex-grow:2;"/> <transition-group name="message" tag="div" id="chatbox" :style="`${collapsed?'display:none':''}`">
<input id="submit-message" type="submit" class="btn" :value="$t('submit')"/> <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.bgcolor?';border-left: medium solid '+msg.color+';padding-left:2pt;':''}`">{{msg.text}}</p>
</form> <p class="end" key="end" style="color:#0000">.</p>
</transition-group>
<div v-if="commandSuggestion.length > 0">
<p style="margin:1pt 15pt;cursor:pointer;" class="chat-message" v-for="(msg, i) in commandSuggestion" v-bind:key="`${i}-c`" :style="`color:orange`"
@click="fillCmd(msg.cmd)">{{msg.cmd}} <i class="std-text" style="font-size:8pt;">{{msg.help}}</i></p>
</div>
<form @submit="sendChatMessage" id="msg-form">
<input id="my-msg" autocomplete="off" v-model="text" style="flex-grow:2;"/>
<input id="submit-message" type="submit" class="btn" :value="$t('submit')"/>
</form>
</div>
<transition-group name="message" tag="div" id="toast-chatbox">
<p style="margin:1pt;" class="chat-message" v-for="msg in toasts" v-bind:key="`${msg.text}-c`" :style="`width:fit-content;color:${msg.color};background:${msg.bgcolor}${msg.bgcolor?';border-left: medium solid '+msg.color+';padding-left:2pt;padding-right:4pt;':''}`">{{msg.text}}</p>
<p class="end" key="end" style="color:#0000">.</p>
</transition-group>
</div> </div>
</template> </template>
@ -34,9 +43,11 @@ export default {
}, },
data: () => ({ data: () => ({
messages: [], messages: [],
toasts: [],
text: '', text: '',
spectators: 0, spectators: 0,
commands: [{cmd:'/debug', help:'Toggles the debug mode'}], commands: [{cmd:'/debug', help:'Toggles the debug mode'}],
collapsed: false,
}), }),
computed: { computed: {
commandSuggestion() { commandSuggestion() {
@ -97,6 +108,10 @@ export default {
} else { // a chat message } else { // a chat message
(new Audio(message_sfx)).play(); (new Audio(message_sfx)).play();
this.messages.push(msg); this.messages.push(msg);
if (this.collapsed || window.innerWidth < 1000) {
this.toasts.push(msg);
setTimeout(() => this.toasts.shift(), 5000);
}
} }
let container = this.$el.querySelector("#chatbox"); let container = this.$el.querySelector("#chatbox");
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
@ -151,7 +166,7 @@ input {
.std-text { .std-text {
color: var(--font-color); color: var(--font-color);
} }
.chat { .chat, .cont {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -169,7 +184,10 @@ input {
transform: translateX(30px); transform: translateX(30px);
} }
@media only screen and (min-width:1000px) { @media only screen and (min-width:1000px) {
.chat { .chat-header {
margin-left: 10pt;
}
.chat, .cont {
height: 90vh; height: 90vh;
margin-left: 10pt; margin-left: 10pt;
} }
@ -178,6 +196,12 @@ input {
margin-right: -5pt; margin-right: -5pt;
} }
} }
#toast-chatbox {
position: fixed;
bottom: 30pt;
left: 0;
background: #ffffffcf;
}
@media only screen and (max-width:1000px) { @media only screen and (max-width:1000px) {
#msg-form { #msg-form {
flex-direction: column; flex-direction: column;