Fix things. Now on (live) game start + play

[vchess.git] / client / src / components / Game.vue

diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue
index 73c3769..2a74a07 100644 (file)
--- a/client/src/components/Game.vue
+++ b/client/src/components/Game.vue
@@ -6,31 +6,31 @@
       .card.smallpad.small-modal.text-center
         label.modal-close(for="modalEog")
         h3#eogMessage.section {{ endgameMessage }}
-      //Chat(:opponents="opponents" :people="people")
-      Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor"
-        :orientation="orientation" @play-move="play")
+    //Chat(:opponents="opponents" :people="people")
+    Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor"
+      :orientation="orientation" :vname="variant.name" @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
+    .button-group(v-if="mode=='human'")
+      button(@click="offerDraw") Draw
+      button(@click="abortGame") Abort
+      button(@click="resign") Resign
+    div(v-if="mode=='human' && subMode=='corr'")
+      textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg")
+      div(v-show="cursor>=0") {{ moves[cursor].message }}
+    .section-content(v-if="showFen && !!vr" id="fen-div")
+      p#fenString.text-center {{ vr.getFen() }}
+    #pgnDiv.section-content
+      a#download(href="#")
       .button-group
-        button(@click="() => play()") Play
-        button(@click="() => undo()") Undo
-        button(@click="flip") Flip
-        button(@click="gotoBegin") GotoBegin
-        button(@click="gotoEnd") GotoEnd
-      .button-group(v-if="mode=='human'")
-        button(@click="offerDraw") Draw
-        button(@click="abortGame") Abort
-        button(@click="resign") Resign
-      div(v-if="mode=='human' && subMode=='corr'")
-        textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg")
-        div(v-show="cursor>=0") {{ moves[cursor].message }}
-      .section-content(v-if="showFen && !!vr" id="fen-div")
-        p#fenString.text-center {{ vr.getFen() }}
-      #pgnDiv.section-content
-        a#download(href="#")
-        .button-group
-          button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }}
-          button Import game
-      //MoveList(v-if="showMoves"
-        :moves="moves" :cursor="cursor" @goto-move="gotoMove")
+        button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }}
+        button Import game
+    //MoveList(v-if="showMoves"
+      :moves="moves" :cursor="cursor" @goto-move="gotoMove")
 </template>
 
 <script>
@@ -46,8 +46,16 @@ import Board from "@/components/Board.vue";
 //import Chat from "@/components/Chat.vue";
 //import MoveList from "@/components/MoveList.vue";
 import { store } from "@/store";
+
+import { getSquareId } from "@/utils/squareId";
+
+import Worker from 'worker-loader!@/playCompMove';
+
 export default {
   name: 'my-game',
+  components: {
+    Board,
+  },
   // gameId: to find the game in storage (assumption: it exists)
   // fen: to start from a FEN without identifiers (analyze mode)
   // subMode: "auto" (game comp vs comp) or "corr" (correspondance game),
@@ -58,7 +66,6 @@ export default {
     return {
       st: store.state,
       // Web worker to play computer moves without freezing interface:
-      compWorker: new Worker('/javascripts/playCompMove.js'),
       timeStart: undefined, //time when computer starts thinking
       vr: null, //VariantRules object, describing the game state + rules
       endgameMessage: "",
@@ -75,6 +82,7 @@ export default {
       moves: [], //all moves played in current game
       cursor: -1, //index of the move just played
       lastMove: null,
+      compWorker: null,
     };
   },
   watch: {
@@ -170,8 +178,8 @@ export default {
           this.endGame(this.mycolor=="w"?"1-0":"0-1");
           break;
         // TODO: also use (dis)connect info to count online players?
-        case "connect":
-        case "disconnect":
+        case "gameconnect":
+        case "gamedisconnect":
           if (this.mode=="human")
           {
             const online = (data.code == "connect");
@@ -200,7 +208,7 @@ export default {
       this.conn.onclose = socketCloseListener;
     }
     // Computer moves web worker logic: (TODO: also for observers in HH games ?)
-    this.compWorker.postMessage(["scripts",this.variant.name]);
+    this.compWorker = new Worker(); //'/javascripts/playCompMove.js'),
     this.compWorker.onmessage = e => {
       this.lockCompThink = true; //to avoid some ghost moves
       let compMove = e.data;
@@ -271,7 +279,8 @@ export default {
     },
     launchGame: async function() {
       const vModule = await import("@/variants/" + this.variant.name + ".js");
-      window.V = tModule.VariantRules;
+      window.V = vModule.VariantRules;
+      this.compWorker.postMessage(["scripts",this.variant.name]);
       if (this.gidOrFen.indexOf('/') >= 0)
         this.newGameFromFen(this.gidOrFen);
       else
@@ -400,7 +409,7 @@ export default {
         document.querySelector("#" + getSquareId(move.start) + " > img.piece");
       // HACK for animation (with positive translate, image slides "under background")
       // Possible improvement: just alter squares on the piece's way...
-      squares = document.getElementsByClassName("board");
+      const squares = document.getElementsByClassName("board");
       for (let i=0; i<squares.length; i++)
       {
         let square = squares.item(i);
@@ -453,7 +462,7 @@ export default {
       this.lastMove = move;
       if (!move.fen)
         move.fen = this.vr.getFen();
-      if (this.settings.sound == 2)
+      if (this.st.settings.sound == 2)
         new Audio("/sounds/move.mp3").play().catch(err => {});
       if (this.mode == "human")
       {
@@ -505,7 +514,7 @@ export default {
       this.vr.undo(move);
       this.cursor--;
       this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
-      if (this.settings.sound == 2)
+      if (this.st.settings.sound == 2)
         new Audio("/sounds/undo.mp3").play().catch(err => {});
       this.incheck = this.vr.getCheckSquares(this.vr.turn);
       if (navigate)