From 7aa548e72ba8a4af4e2c7f63e7723ad10d2cd3a4 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 26 Jan 2020 19:33:13 +0100 Subject: [PATCH] Some graphical improvements (first attempt) --- client/src/components/BaseGame.vue | 37 +++++++++++++------------ client/src/components/Board.vue | 2 -- client/src/components/ChallengeList.vue | 23 +++++++-------- client/src/components/Chat.vue | 16 +++++------ client/src/components/ComputerGame.vue | 6 ++-- client/src/components/GameList.vue | 29 +++++++++---------- client/src/views/About.vue | 9 +++--- client/src/views/Analyze.vue | 5 ++-- client/src/views/Game.vue | 30 +++++++++++--------- client/src/views/Rules.vue | 27 +++++++++--------- client/src/views/Variants.vue | 23 +++++++-------- 11 files changed, 105 insertions(+), 102 deletions(-) diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 470488f6..a2d78a06 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -5,24 +5,25 @@ div .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} - .float70 //TODO: use mini-css predefined styles - Board(:vr="vr" :last-move="lastMove" :analyze="analyze" - :user-color="game.mycolor" :orientation="orientation" - :vname="game.vname" @play-move="play") - .button-group - button(@click="() => play()") Play - button(@click="() => undo()") Undo - button(@click="flip") Flip - button(@click="gotoBegin") GotoBegin - button(@click="gotoEnd") GotoEnd - #fenDiv(v-if="showFen && !!vr") - p {{ vr.getFen() }} - #pgnDiv - a#download(href="#") - button(@click="download") {{ st.tr["Download PGN"] }} - .float30 //TODO: should be optional (adjust widths dynamically) - MoveList(v-if="showMoves" - :moves="moves" :cursor="cursor" @goto-move="gotoMove") + .row + .col-sm-12.col-md-9.col-lg-8 + Board(:vr="vr" :last-move="lastMove" :analyze="analyze" + :user-color="game.mycolor" :orientation="orientation" + :vname="game.vname" @play-move="play") + .button-group + button(@click="() => play()") Play + button(@click="() => undo()") Undo + button(@click="flip") Flip + button(@click="gotoBegin") GotoBegin + button(@click="gotoEnd") GotoEnd + #fenDiv(v-if="showFen && !!vr") + p {{ vr.getFen() }} + #pgnDiv + a#download(href="#") + button(@click="download") {{ st.tr["Download PGN"] }} + .col-sm-12.col-md-3.col-lg-4 + MoveList(v-if="showMoves" + :moves="moves" :cursor="cursor" @goto-move="gotoMove") </template> <script> diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 7257b218..4e03b187 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -1,6 +1,4 @@ <script> -// TODO: BoardHex for hexagonal variants (2 players) - import { getSquareId, getSquareFromId } from "@/utils/squareId"; import { ArrayFun } from "@/utils/array"; diff --git a/client/src/components/ChallengeList.vue b/client/src/components/ChallengeList.vue index 0b7581bf..07aa326b 100644 --- a/client/src/components/ChallengeList.vue +++ b/client/src/components/ChallengeList.vue @@ -1,15 +1,16 @@ <template lang="pug"> -table - tr - th Variant - th From - th To - th Cadence - tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)") - td {{ c.vname }} - td {{ c.from.name }} - td {{ c.to }} - td {{ c.timeControl }} +div + table + tr + th Variant + th From + th To + th Cadence + tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)") + td {{ c.vname }} + td {{ c.from.name }} + td {{ c.to }} + td {{ c.timeControl }} </template> <script> diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue index 2dc68428..517d2cdd 100644 --- a/client/src/components/Chat.vue +++ b/client/src/components/Chat.vue @@ -1,13 +1,11 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - // TODO: Chat modal sur petit écran, dans la page pour grand écran - .card.smallpad - h4 Chat - p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg") - input#inputChat(type="text" :placeholder="st.tr['Type here']" - @keyup.enter="sendChat") - button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }} +div + .card.smallpad + h4 Chat + p(v-for="chat in chats" :class="classObject(chat)" v-html="chat.msg") + input#inputChat(type="text" :placeholder="st.tr['Type here']" + @keyup.enter="sendChat") + button#sendChatBtn(@click="sendChat") {{ st.tr["Send"] }} </template> <script> diff --git a/client/src/components/ComputerGame.vue b/client/src/components/ComputerGame.vue index 2745e4c1..1506e982 100644 --- a/client/src/components/ComputerGame.vue +++ b/client/src/components/ComputerGame.vue @@ -1,8 +1,6 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:game="game" :vr="vr" ref="basegame" - @newmove="processMove" @gameover="gameOver") +BaseGame(:game="game" :vr="vr" ref="basegame" + @newmove="processMove" @gameover="gameOver") </template> <script> diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index 60d4fede..a9090550 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -1,18 +1,19 @@ <template lang="pug"> -table - tr - th Variant - th White - th Black - th Time control - th(v-if="showResult") Result - tr(v-for="g in sortedGames" @click="$emit('show-game',g)" - :class="{'my-turn': g.myTurn}") - td {{ g.vname }} - td {{ g.players[0].name || "@nonymous" }} - td {{ g.players[1].name || "@nonymous" }} - td {{ g.timeControl }} - td(v-if="showResult") {{ g.score }} +div + table + tr + th Variant + th White + th Black + th Time control + th(v-if="showResult") Result + tr(v-for="g in sortedGames" @click="$emit('show-game',g)" + :class="{'my-turn': g.myTurn}") + td {{ g.vname }} + td {{ g.players[0].name || "@nonymous" }} + td {{ g.players[1].name || "@nonymous" }} + td {{ g.timeControl }} + td(v-if="showResult") {{ g.score }} </template> <script> diff --git a/client/src/views/About.vue b/client/src/views/About.vue index e4b76375..6b2f27c1 100644 --- a/client/src/views/About.vue +++ b/client/src/views/About.vue @@ -1,8 +1,9 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - p TODO: give github URL, tell website story... - a(href="https://github.com/yagu0/vchess") contribute... +main + .row + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + p TODO: give github URL, tell website story... + a(href="https://github.com/yagu0/vchess") contribute... </template> <style lang="sass"> diff --git a/client/src/views/Analyze.vue b/client/src/views/Analyze.vue index cecb7737..d1b669ec 100644 --- a/client/src/views/Analyze.vue +++ b/client/src/views/Analyze.vue @@ -1,7 +1,6 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:game="game" :vr="vr" ref="basegame") +main + BaseGame(:game="game" :vr="vr" ref="basegame") </template> <script> diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 5199154a..94b5dc70 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -1,17 +1,21 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - BaseGame(:game="game" :vr="vr" ref="basegame" - @newmove="processMove" @gameover="gameOver") - div Names: {{ game.players[0].name }} - {{ game.players[1].name }} - div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }} - .button-group(v-if="game.mode!='analyze' && game.score=='*'") - button(@click="offerDraw") Draw - button(@click="abortGame") Abort - button(@click="resign") Resign - div(v-if="game.type=='corr'") {{ game.corrMsg }} - textarea(v-if="game.score=='*'" v-model="corrMsg") - Chat(:players="game.players") +main + .row + .col-sm-12.col-md-3 + Chat(:players="game.players") + .col-sm-12.col-md-9 + BaseGame(:game="game" :vr="vr" ref="basegame" + @newmove="processMove" @gameover="gameOver") + .row + .col-sm-12.col-md-9.col-md-offset-3 + .button-group(v-if="game.mode!='analyze' && game.score=='*'") + button(@click="offerDraw") Draw + button(@click="abortGame") Abort + button(@click="resign") Resign + div Names: {{ game.players[0].name }} - {{ game.players[1].name }} + div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }} + div(v-if="game.type=='corr'") {{ game.corrMsg }} + textarea(v-if="game.score=='*'" v-model="corrMsg") </template> <script> diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index e709e50a..e7d1acac 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -1,17 +1,18 @@ <template lang="pug"> -.row - .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - .button-group - button(@click="clickReadRules") Read the rules - button(v-show="!gameInProgress" @click="() => startGame('auto')") - | Observe a sample game - button(v-show="!gameInProgress" @click="() => startGame('versus')") - | Beat the computer! - button(v-show="gameInProgress" @click="() => stopGame()") - | Stop game - .section-content(v-show="display=='rules'" v-html="content") - ComputerGame(v-show="display=='computer'" :game-info="gameInfo" - @game-over="stopGame" @game-stopped="gameStopped") +main + .row + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .button-group + button(@click="clickReadRules") Read the rules + button(v-show="!gameInProgress" @click="() => startGame('auto')") + | Observe a sample game + button(v-show="!gameInProgress" @click="() => startGame('versus')") + | Beat the computer! + button(v-show="gameInProgress" @click="() => stopGame()") + | Stop game + .section-content(v-show="display=='rules'" v-html="content") + ComputerGame(v-show="display=='computer'" :game-info="gameInfo" + @game-over="stopGame" @game-stopped="gameStopped") </template> <script> diff --git a/client/src/views/Variants.vue b/client/src/views/Variants.vue index 503be054..9d0a42d9 100644 --- a/client/src/views/Variants.vue +++ b/client/src/views/Variants.vue @@ -1,15 +1,16 @@ <template lang="pug"> -.row - .nopadding.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 - label(for="prefixFilter") Type first letters... - input#prefixFilter(v-model="curPrefix") - .variant.col-sm-12.col-md-5.col-lg-4( - v-for="(v,idx) in filteredVariants" - :class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}" - ) - router-link(:to="getLink(v.name)") - h4.boxtitle.text-center {{ v.name }} - p.description.text-center {{ st.tr[v.desc] }} +main + .row + .nopadding.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + label(for="prefixFilter") Type first letters... + input#prefixFilter(v-model="curPrefix") + .variant.col-sm-12.col-md-5.col-lg-4( + v-for="(v,idx) in filteredVariants" + :class="{'col-md-offset-1': idx%2==0, 'col-lg-offset-2': idx%2==0}" + ) + router-link(:to="getLink(v.name)") + h4.boxtitle.text-center {{ v.name }} + p.description.text-center {{ st.tr[v.desc] }} </template> <script> -- 2.44.0