From 80b38d463c0d5dacac93bc2aeb666bbb19781e1e Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Sat, 2 May 2020 01:17:43 +0200 Subject: [PATCH] UserBio: a few fixes, but still doesn't work as expected --- client/src/components/UserBio.vue | 20 +++++++++----- client/src/views/Game.vue | 45 ++++++++++++++++++++----------- client/src/views/Hall.vue | 5 +++- server/models/User.js | 2 +- server/routes/users.js | 3 ++- 5 files changed, 50 insertions(+), 25 deletions(-) diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue index c954f3d8..181c7dfe 100644 --- a/client/src/components/UserBio.vue +++ b/client/src/components/UserBio.vue @@ -6,11 +6,10 @@ div 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 @@ -20,7 +19,11 @@ div @click="modeEdit = !modeEdit" ) #dialog.text-center {{ st.tr[infoMsg] }} - span.clickable(@click="showBio()") {{ name }} + span( + :class="{ clickable: !!uname }" + @click="showBio()" + ) + | {{ uname || "@nonymous" }} </template> <script> @@ -29,7 +32,7 @@ import { ajax } from "@/utils/ajax"; import { processModalClick } from "@/utils/modalClick.js"; export default { name: "my-user-bio", - props: ["id", "name"], + props: ["uid", "uname"], data: function() { return { st: store.state, @@ -44,6 +47,9 @@ export default { }, methods: { showBio: function() { + if (!this.uname) + // Anonymous users have no bio: + return; this.infoMsg = ""; document.getElementById("modalBio").checked = true; if (this.userBio === undefined) { @@ -51,7 +57,7 @@ export default { "/userbio", "GET", { - data: { id: this.id }, + data: { id: this.uid }, success: (res) => { this.userBio = res.bio; } @@ -77,7 +83,7 @@ export default { <style lang="sass" scoped> [type="checkbox"].modal+div .card - max-width: 768px + max-width: 570px max-height: 100% #submitBtn diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index ffb7564e..171dc6c6 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -120,8 +120,11 @@ main 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'}" @@ -131,8 +134,11 @@ main 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'}" @@ -142,11 +148,17 @@ main 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] }} @@ -168,6 +180,7 @@ main <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"; @@ -188,7 +201,8 @@ export default { name: "my-game", components: { BaseGame, - Chat + Chat, + UserBio }, data: function() { return { @@ -1678,6 +1692,13 @@ button #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 @@ -1697,12 +1718,6 @@ span.separator 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) diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index 48af22ee..a98b4c05 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -113,7 +113,7 @@ main v-for="sid in Object.keys(people)" v-if="!!people[sid].name" ) - UserBio(:id="people[sid].id" :name="people[sid].name") + UserBio.user-bio(:uid="people[sid].id" :uname="people[sid].name") button.player-action( v-if="isGamer(sid)" @click="watchGame(sid)" @@ -1402,6 +1402,9 @@ button.refuseBtn #div2, #div3 margin-top: 0 +.user-bio + display: inline + tr > td &.random-0 background-color: #FF5733 diff --git a/server/models/User.js b/server/models/User.js index 8a97d572..37df4e6c 100644 --- a/server/models/User.js +++ b/server/models/User.js @@ -58,7 +58,7 @@ const UserModel = { }); }, - getBio: function(id) { + getBio: function(id, cb) { db.serialize(function() { const query = "SELECT bio " + diff --git a/server/routes/users.js b/server/routes/users.js index a9adc162..d637e13c 100644 --- a/server/routes/users.js +++ b/server/routes/users.js @@ -32,7 +32,8 @@ router.post('/register', access.unlogged, access.ajax, (req,res) => { ? "User name or email already in use" : "User creation failed. Try again"; res.json({errmsg: msg}); - } else { + } + else { const user = { id: ret.id, name: name, -- 2.44.0