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