data-checkbox="modalBio"
)
.card
- div(v-if="st.user.id == id")
+ div(v-if="st.user.id > 0 && st.user.id == uid")
h3.section(@click="modeEdit = !modeEdit") Click to edit
textarea(
- v-if="userBio !== undefined"
- v-show="modeEdit"
+ v-if="userBio !== undefined && modeEdit"
v-model="userBio"
)
button#submitBtn(@click="sendBio()") Submit
@click="modeEdit = !modeEdit"
)
#dialog.text-center {{ st.tr[infoMsg] }}
- span.clickable(@click="showBio()") {{ name }}
+ span(
+ :class="{ clickable: !!uname }"
+ @click="showBio()"
+ )
+ | {{ uname || "@nonymous" }}
</template>
<script>
import { processModalClick } from "@/utils/modalClick.js";
export default {
name: "my-user-bio",
- props: ["id", "name"],
+ props: ["uid", "uname"],
data: function() {
return {
st: store.state,
},
methods: {
showBio: function() {
+ if (!this.uname)
+ // Anonymous users have no bio:
+ return;
this.infoMsg = "";
document.getElementById("modalBio").checked = true;
if (this.userBio === undefined) {
"/userbio",
"GET",
{
- data: { id: this.id },
+ data: { id: this.uid },
success: (res) => {
this.userBio = res.bio;
}
<style lang="sass" scoped>
[type="checkbox"].modal+div .card
- max-width: 768px
+ max-width: 570px
max-height: 100%
#submitBtn
img(src="/images/icons/rematch.svg")
#playersInfo
div(v-if="isLargeScreen()")
- span.name(:class="{connected: isConnected(0)}")
- | {{ game.players[0].name || "@nonymous" }}
+ UserBio.user-bio(
+ :class="{connected: isConnected(0)}"
+ :uid="game.players[0].id"
+ :uname="game.players[0].name"
+ )
span.time(
v-if="game.score=='*'"
:class="{yourturn: !!vr && vr.turn == 'w'}"
span.time-right(v-if="!!virtualClocks[0][1]")
| {{ virtualClocks[0][1] }}
span.split-names -
- span.name(:class="{connected: isConnected(1)}")
- | {{ game.players[1].name || "@nonymous" }}
+ UserBio.user-bio(
+ :class="{connected: isConnected(1)}"
+ :uid="game.players[1].id"
+ :uname="game.players[1].name"
+ )
span.time(
v-if="game.score=='*'"
:class="{yourturn: !!vr && vr.turn == 'b'}"
span.time-right(v-if="!!virtualClocks[1][1]")
| {{ virtualClocks[1][1] }}
div(v-else)
- span.name(:class="{connected: isConnected(0)}")
- | {{ game.players[0].name || "@nonymous" }}
+ UserBio.user-bio(
+ :class="{connected: isConnected(0)}"
+ :uid="game.players[0].id"
+ :uname="game.players[0].name"
+ )
span.split-names -
- span.name(:class="{connected: isConnected(1)}")
- | {{ game.players[1].name || "@nonymous" }}
+ UserBio.user-bio(
+ :class="{connected: isConnected(1)}"
+ :uid="game.players[1].id"
+ :uname="game.players[1].name"
+ )
div(v-if="game.score=='*'")
span.time(:class="{yourturn: !!vr && vr.turn == 'w'}")
span.time-left {{ virtualClocks[0][0] }}
<script>
import BaseGame from "@/components/BaseGame.vue";
+import UserBio from "@/components/UserBio.vue";
import Chat from "@/components/Chat.vue";
import { store } from "@/store";
import { GameStorage } from "@/utils/gameStorage";
name: "my-game",
components: {
BaseGame,
- Chat
+ Chat,
+ UserBio
},
data: function() {
return {
#aboveBoard
text-align: center
+.user-bio
+ display: inline
+ font-size: 1.5rem
+ @media screen and (max-width: 767px)
+ font-size: 1.2rem
+ padding: 0 3px
+
.variant-cadence
padding-right: 10px
padding: 0
width: 10px
-span.name
- font-size: 1.5rem
- @media screen and (max-width: 767px)
- font-size: 1.2rem
- padding: 0 3px
-
span.time
font-size: 2rem
@media screen and (max-width: 767px)