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

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

@ -4,7 +4,8 @@
<div>
<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 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>
</div>
</template>
@ -21,7 +22,12 @@ export default {
cards: Array,
select: Function,
cancel: Function,
cancelText: {
type: String,
default: 'ANNULLA',
},
text: String,
hintText: String,
},
data: () => ({
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="lives <= 0 && max_lives > 0" text="SEI MORTO" />
<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" />
</div>
</template>
@ -64,10 +65,13 @@ export default {
win_status: undefined,
range: 1,
sight: 1,
show_role: false,
}),
sockets: {
role(role) {
this.my_role = JSON.parse(role)
this.my_role.is_back = true
this.show_role = true
},
self(self) {
self = JSON.parse(self)