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

show goal and chat fix

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-22 23:09:25 +01:00
parent e2a9407dba
commit e40d10ad80
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
3 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,13 @@
<template> <template>
<div> <div style="max-width: 350pt;">
<h3>Chat</h3> <h3>Chat</h3>
<div id="chatbox"> <div id="chatbox">
<p style="margin:1pt;" 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">{{msg}}</p>
<p class="end">.</p>
</div> </div>
<form @submit="sendChatMessage" style="width:100%; padding:0"> <form @submit="sendChatMessage" style="width:100%; padding:0; display:flex;">
<input v-model="text" style="width:80%;"/> <input v-model="text" style="flex-grow:2;"/>
<input type="submit" style="width:18%;"/> <input type="submit"/>
</form> </form>
</div> </div>
</template> </template>
@ -21,8 +22,12 @@ export default {
sockets: { sockets: {
chat_message(msg) { chat_message(msg) {
this.messages.push(msg) this.messages.push(msg)
let container = this.$el.querySelector("#chatbox"); // let container = this.$el.querySelector("#chatbox");
container.scrollTop = container.scrollHeight; // container.scrollTop = container.scrollHeight;
const el = this.$el.getElementsByClassName('end')[0];
if (el) {
el.scrollIntoView();
}
}, },
}, },
methods: { methods: {
@ -36,12 +41,18 @@ export default {
}, },
} }
</script> </script>
<style > <style scoped>
#chatbox { #chatbox {
width:100%; width:100%;
max-height:150px; max-height:150px;
overflow:auto; overflow-y: auto;
overflow-x: hidden;
overflow-wrap: break-word;
overflow-wrap: normal;
border: 1pt solid #ccc; border: 1pt solid #ccc;
border-radius: 2pt; border-radius: 2pt;
} }
/* .chat-message:nth-last-of-type(1) {
margin-bottom: 50pt !important;
} */
</style> </style>

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

@ -4,7 +4,8 @@
<div> <div>
<Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)" @mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/> <Card v-for="c in cards" v-bind:key="c" :card="c" @click.native="select(c)" @mouseover.native="showDesc(c)" @mouseleave.native="desc=''"/>
</div> </div>
<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>ANNULLA</span></div> <p v-if="hintText">{{hintText}}</p>
<div class="button center-stuff" v-if="showCancelBtn" @click="cancel"><span>{{cancelText}}</span></div>
<p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p> <p v-if="desc" style="bottom:10pt;position:absolute;margin:16pt;">{{desc}}</p>
</div> </div>
</template> </template>
@ -21,7 +22,12 @@ export default {
cards: Array, cards: Array,
select: Function, select: Function,
cancel: Function, cancel: Function,
cancelText: {
type: String,
default: 'ANNULLA',
},
text: String, text: String,
hintText: String,
}, },
data: () => ({ data: () => ({
desc: '' desc: ''

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

@ -27,7 +27,8 @@
<Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/> <Chooser v-if="shouldChooseCard" text="Scegli che carta pescare" :cards="available_cards" :select="choose"/>
<Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" /> <Chooser v-if="lives <= 0 && max_lives > 0" text="SEI MORTO" />
<Chooser v-if="win_status !== undefined" :text="win_status?'HAI VINTO':'HAI PERSO'" /> <Chooser v-if="win_status !== undefined" :text="win_status?'HAI VINTO':'HAI PERSO'" />
<Chooser v-if="is_my_turn" text="GIOCA IL TUO TURNO" :key="is_my_turn" class="turn-notify" /> <Chooser v-if="show_role" text="Tu sei" :cards="[my_role]" :hintText="my_role.goal" :cancel="() => {show_role=false}" cancelText="OK" />
<Chooser v-if="!show_role && is_my_turn" text="GIOCA IL TUO TURNO" :key="is_my_turn" class="turn-notify" />
<Chooser v-if="hasToPickResponse" text="ESTRAI UNA CARTA" :key="hasToPickResponse" class="turn-notify" /> <Chooser v-if="hasToPickResponse" text="ESTRAI UNA CARTA" :key="hasToPickResponse" class="turn-notify" />
</div> </div>
</template> </template>
@ -64,10 +65,13 @@ export default {
win_status: undefined, win_status: undefined,
range: 1, range: 1,
sight: 1, sight: 1,
show_role: false,
}), }),
sockets: { sockets: {
role(role) { role(role) {
this.my_role = JSON.parse(role) this.my_role = JSON.parse(role)
this.my_role.is_back = true
this.show_role = true
}, },
self(self) { self(self) {
self = JSON.parse(self) self = JSON.parse(self)