X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FHall.vue;h=9bcfd05ea45746558e35807404eaed4039902300;hb=1611a25f25911da6a95fc0095b31c4b096a6638e;hp=190717d0dbe2df25c4529f597aba68565102163c;hpb=6808d7a16ec1e761c6a2dffec2281c96953e4d89;p=vchess.git

diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue
index 190717d0..9bcfd05e 100644
--- a/client/src/views/Hall.vue
+++ b/client/src/views/Hall.vue
@@ -1,55 +1,111 @@
 <template lang="pug">
 main
   input#modalInfo.modal(type="checkbox")
-  div#infoDiv(role="dialog" data-checkbox="modalInfo")
+  div#infoDiv(
+    role="dialog"
+    data-checkbox="modalInfo"
+  )
     .card.text-center
       label.modal-close(for="modalInfo")
       p(v-html="infoMessage")
-  input#modalNewgame.modal(type="checkbox")
-  div#newgameDiv(role="dialog" data-checkbox="modalNewgame")
+  input#modalAccept.modal(type="checkbox")
+  div#acceptDiv(role="dialog")
+    .card.text-center
+      p
+        span.variantName {{ curChallToAccept.vname }} 
+        span {{ curChallToAccept.cadence }} 
+        span {{ st.tr["with"] + " " + curChallToAccept.from.name }}
+      .diagram(v-html="tchallDiag")
+      .button-group#buttonsTchall
+        button.acceptBtn(@click="decisionChallenge(true)") {{ st.tr["Accept challenge?"] }}
+        button.refuseBtn(@click="decisionChallenge(false)") {{ st.tr["Refuse"] }}
+  input#modalNewgame.modal(
+    type="checkbox"
+    @change="cadenceFocusIfOpened($event)"
+  )
+  div#newgameDiv(
+    role="dialog"
+    data-checkbox="modalNewgame"
+  )
     .card
       label#closeNewgame.modal-close(for="modalNewgame")
-      form(@submit.prevent="newChallenge()" @keyup.enter="newChallenge()")
+      div(@keyup.enter="newChallenge()")
         fieldset
           label(for="selectVariant") {{ st.tr["Variant"] }} *
-          select#selectVariant(v-model="newchallenge.vid")
-            option(v-for="v in st.variants" :value="v.id"
-                :selected="newchallenge.vid==v.id")
+          select#selectVariant(
+            @change="loadNewchallVariant(trySetNewchallDiag)"
+            v-model="newchallenge.vid"
+          )
+            option(
+              v-for="v in st.variants"
+              :value="v.id"
+              :selected="newchallenge.vid==v.id"
+            )
               | {{ v.name }}
         fieldset
           label(for="cadence") {{ st.tr["Cadence"] }} *
           div#predefinedCadences
-            button 3+2
-            button 5+3
-            button 15+5
-          input#cadence(type="text" v-model="newchallenge.cadence"
-            placeholder="5+0, 1h+30s, 7d+1d ...")
+            button(type="button") 5+3
+            button(type="button") 15+5
+            button(type="button") 45+30
+            button(type="button") 7d+2d
+          input#cadence(
+            type="text"
+            v-model="newchallenge.cadence"
+            placeholder="5+0, 1h+30s, 7d+1d ..."
+          )
         fieldset(v-if="st.user.id > 0")
           label(for="selectPlayers") {{ st.tr["Play with?"] }}
-          input#selectPlayers(type="text" v-model="newchallenge.to")
+          input#selectPlayers(
+            type="text"
+            v-model="newchallenge.to"
+          )
         fieldset(v-if="st.user.id > 0 && newchallenge.to.length > 0")
-          label(for="inputFen") FEN
-          input#inputFen(type="text" v-model="newchallenge.fen")
+          input#inputFen(
+            placeholder="FEN"
+            @input="trySetNewchallDiag()"
+            type="text"
+            v-model="newchallenge.fen"
+          )
+        .diagram(v-html="newchallenge.diag")
       button(@click="newChallenge()") {{ st.tr["Send challenge"] }}
-  input#modalPeople.modal(type="checkbox" @click="resetChatColor()")
-  div#peopleWrap(role="dialog" data-checkbox="modalPeople")
+  input#modalPeople.modal(
+    type="checkbox"
+    @click="resetChatColor()"
+  )
+  div#peopleWrap(
+    role="dialog"
+    data-checkbox="modalPeople"
+  )
     .card
       label.modal-close(for="modalPeople")
       #people
         #players
-          p(v-for="sid in Object.keys(people)" v-if="!!people[sid].name")
+          p(
+            v-for="sid in Object.keys(people)"
+            v-if="!!people[sid].name"
+          )
             span {{ people[sid].name }}
-            button.player-action(v-if="sid!=st.user.sid || isGamer(sid)" @click="challOrWatch(sid)")
+            button.player-action(
+              v-if="isGamer(sid) || (st.user.id > 0 && sid!=st.user.sid)"
+              @click="challOrWatch(sid)"
+            )
               | {{ getActionLabel(sid) }}
           p.anonymous @nonymous ({{ anonymousCount }})
         #chat
-          Chat(:newChat="newChat" @mychat="processChat" :pastChats="[]")
+          Chat(
+            :newChat="newChat"
+            @mychat="processChat"
+            :pastChats="[]"
+          )
         .clearer
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       .button-group
-        button#peopleBtn(onClick="doClick('modalPeople')") {{ st.tr["Social"] }}
-        button(onClick="doClick('modalNewgame')") {{ st.tr["New game"] }}
+        button#peopleBtn(onClick="window.doClick('modalPeople')")
+          | {{ st.tr["Who's there?"] }}
+        button(onClick="window.doClick('modalNewgame')")
+          | {{ st.tr["New game"] }}
   .row
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
       div#div2
@@ -58,20 +114,34 @@ main
             | {{ st.tr["Live challenges"] }}
           button.tabbtn#btnCcorr(@click="setDisplay('c','corr',$event)")
             | {{ st.tr["Correspondance challenges"] }}
-        ChallengeList(v-show="cdisplay=='live'"
-          :challenges="filterChallenges('live')" @click-challenge="clickChallenge")
-        ChallengeList(v-show="cdisplay=='corr'"
-          :challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
+        ChallengeList(
+          v-show="cdisplay=='live'"
+          :challenges="filterChallenges('live')"
+          @click-challenge="clickChallenge"
+        )
+        ChallengeList(
+          v-show="cdisplay=='corr'"
+          :challenges="filterChallenges('corr')"
+          @click-challenge="clickChallenge"
+        )
       div#div3
         .button-group
           button.tabbtn#btnGlive(@click="setDisplay('g','live',$event)")
             | {{ st.tr["Live games"] }}
           button.tabbtn#btnGcorr(@click="setDisplay('g','corr',$event)")
             | {{ st.tr["Correspondance games"] }}
-        GameList(v-show="gdisplay=='live'" :games="filterGames('live')"
-          :showBoth="true" @show-game="showGame")
-        GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')"
-          :showBoth="true" @show-game="showGame")
+        GameList(
+          v-show="gdisplay=='live'"
+          :games="filterGames('live')"
+          :showBoth="true"
+          @show-game="showGame"
+        )
+        GameList(
+          v-show="gdisplay=='corr'"
+          :games="filterGames('corr')"
+          :showBoth="true"
+          @show-game="showGame"
+        )
 </template>
 
 <script>
@@ -81,6 +151,7 @@ import { ArrayFun } from "@/utils/array";
 import { ajax } from "@/utils/ajax";
 import params from "@/parameters";
 import { getRandString, shuffle } from "@/utils/alea";
+import { getDiagram } from "@/utils/printDiagram";
 import Chat from "@/components/Chat.vue";
 import GameList from "@/components/GameList.vue";
 import ChallengeList from "@/components/ChallengeList.vue";
@@ -104,10 +175,17 @@ export default {
       infoMessage: "",
       newchallenge: {
         fen: "",
-        vid: localStorage.getItem("vid") || "",
+        vid: parseInt(localStorage.getItem("vid")) || 0,
         to: "", //name of challenged player (if any)
-        cadence: localStorage.getItem("cadence") || ""
+        cadence: localStorage.getItem("cadence") || "",
+        // VariantRules object, stored to not interfere with
+        // diagrams of targetted challenges:
+        V: null,
+        vname: "",
+        diag: "" //visualizing FEN
       },
+      tchallDiag: "",
+      curChallToAccept: {from: {}},
       newChat: "",
       conn: null,
       connexionString: "",
@@ -123,6 +201,8 @@ export default {
       this.challenges.concat(this.games).forEach(o => {
         if (o.vname == "") o.vname = this.getVname(o.vid);
       });
+      if (!this.newchallenge.V && this.newchallenge.vid > 0)
+        this.loadNewchallVariant();
     }
   },
   computed: {
@@ -135,6 +215,8 @@ export default {
     }
   },
   created: function() {
+    if (this.st.variants.length > 0 && this.newchallenge.vid > 0)
+      this.loadNewchallVariant();
     const my = this.st.user;
     this.$set(this.people, my.sid, { id: my.id, name: my.name, pages: ["/"] });
     // Ask server for current corr games (all but mines)
@@ -159,7 +241,6 @@ export default {
       let names = {};
       response.challenges.forEach(c => {
         if (c.uid != this.st.user.id) names[c.uid] = "";
-        //unknwon for now
         else if (!!c.target && c.target != this.st.user.id)
           names[c.target] = "";
       });
@@ -225,8 +306,11 @@ export default {
         this.newchallenge.cadence = b.innerHTML;
       });
     });
-    const showCtype = localStorage.getItem("type-challenges") || "live";
-    const showGtype = localStorage.getItem("type-games") || "live";
+    const dispCorr = this.$route.query["disp"];
+    const showCtype =
+      dispCorr || localStorage.getItem("type-challenges") || "live";
+    const showGtype =
+      dispCorr || localStorage.getItem("type-games") || "live";
     this.setDisplay("c", showCtype);
     this.setDisplay("g", showGtype);
   },
@@ -235,6 +319,10 @@ export default {
   },
   methods: {
     // Helpers:
+    cadenceFocusIfOpened: function() {
+      if (event.target.checked)
+        document.getElementById("cadence").focus();
+    },
     send: function(code, obj) {
       if (this.conn) {
         this.conn.send(JSON.stringify(Object.assign({ code: code }, obj)));
@@ -292,7 +380,9 @@ export default {
           if (matchGid) gids.push(matchGid[0]);
         });
         const gid = gids[Math.floor(Math.random() * gids.length)];
-        this.showGame(this.games.find(g => g.id == gid));
+        const game = this.games.find(g => g.id == gid);
+        if (game) this.showGame(game);
+        else this.$router.push("/game/" + gid); //game vs. me
       }
     },
     showGame: function(g) {
@@ -396,12 +486,8 @@ export default {
         }
         case "killed":
           // I logged in elsewhere:
-          alert(this.st.tr["New connexion detected: tab now offline"]);
-          // TODO: this fails. See https://github.com/websockets/ws/issues/489
-          //this.conn.removeEventListener("message", this.socketMessageListener);
-          //this.conn.removeEventListener("close", this.socketCloseListener);
-          //this.conn.close();
           this.conn = null;
+          alert(this.st.tr["New connexion detected: tab now offline"]);
           break;
         case "askidentity": {
           // Request for identification (TODO: anonymous shouldn't need to reply)
@@ -417,7 +503,6 @@ export default {
         case "identity": {
           const user = data.data;
           if (user.name) {
-            //otherwise anonymous
             // If I multi-connect, kill current connexion if no mark (I'm older)
             if (
               this.newConnect[user.sid] &&
@@ -509,28 +594,32 @@ export default {
         case "newgame": {
           // NOTE: it may be live or correspondance
           const game = data.data;
-          let locGame = this.games.find(g => g.id == game.id);
-          if (!locGame) {
-            let newGame = game;
-            newGame.type = this.classifyObject(game);
-            newGame.vname = this.getVname(game.vid);
-            if (!game.score)
-              //if new game from Hall
-              newGame.score = "*";
-            newGame.rids = [game.rid];
-            delete newGame["rid"];
-            this.games.push(newGame);
-            if (
-              (newGame.type == "live" && this.gdisplay == "corr") ||
-              (newGame.type == "corr" && this.gdisplay == "live")
-            ) {
-              document
-                .getElementById("btnG" + newGame.type)
-                .classList.add("somethingnew");
+          // Ignore games where I play (corr games)
+          if (game.players.every(p => p.id != this.st.user.id))
+          {
+            let locGame = this.games.find(g => g.id == game.id);
+            if (!locGame) {
+              let newGame = game;
+              newGame.type = this.classifyObject(game);
+              newGame.vname = this.getVname(game.vid);
+              if (!game.score)
+                //if new game from Hall
+                newGame.score = "*";
+              newGame.rids = [game.rid];
+              delete newGame["rid"];
+              this.games.push(newGame);
+              if (
+                (newGame.type == "live" && this.gdisplay == "corr") ||
+                (newGame.type == "corr" && this.gdisplay == "live")
+              ) {
+                document
+                  .getElementById("btnG" + newGame.type)
+                  .classList.add("somethingnew");
+              }
+            } else {
+              // Append rid (if not already in list)
+              if (!locGame.rids.includes(game.rid)) locGame.rids.push(game.rid);
             }
-          } else {
-            // Append rid (if not already in list)
-            if (!locGame.rids.includes(game.rid)) locGame.rids.push(game.rid);
           }
           break;
         }
@@ -572,25 +661,58 @@ export default {
       this.conn.addEventListener("close", this.socketCloseListener);
     },
     // Challenge lifecycle:
+    loadNewchallVariant: async function(cb) {
+      const vname = this.getVname(this.newchallenge.vid);
+      const vModule = await import("@/variants/" + vname + ".js");
+      this.newchallenge.V = vModule.VariantRules;
+      this.newchallenge.vname = vname;
+      if (cb)
+        cb();
+    },
+    trySetNewchallDiag: function() {
+      if (!this.newchallenge.fen) {
+        this.newchallenge.diag = "";
+        return;
+      }
+      // If vid > 0 then the variant is loaded (function above):
+      window.V = this.newchallenge.V;
+      if (
+        this.newchallenge.vid > 0 &&
+        this.newchallenge.fen &&
+        V.IsGoodFen(this.newchallenge.fen)
+      ) {
+        const parsedFen = V.ParseFen(this.newchallenge.fen);
+        this.newchallenge.diag = getDiagram({
+          position: parsedFen.position,
+          orientation: V.GetOppCol(parsedFen.turn)
+        });
+      }
+    },
     newChallenge: async function() {
+      if (this.newchallenge.cadence.match(/^[0-9]+$/))
+        this.newchallenge.cadence += "+0"; //assume minutes, no increment
+      const ctype = this.classifyObject(this.newchallenge);
+      // TODO: cadence still unchecked so ctype could be wrong...
       let error = "";
-      if (this.newchallenge.vid == "")
+      if (!this.newchallenge.vid)
         error = this.st.tr["Please select a variant"];
-      else if (!!this.newchallenge.to && this.newchallenge.to == this.st.user.name)
-        error = this.st.tr["Self-challenge is forbidden"];
+      else if (ctype == "corr" && this.st.user.id <= 0)
+        error = this.st.tr["Please log in to play correspondance games"];
+      else if (this.newchallenge.to) {
+        if (this.newchallenge.to == this.st.user.name)
+          error = this.st.tr["Self-challenge is forbidden"];
+        else if (
+          ctype == "live" &&
+          Object.values(this.people).every(p => p.name != this.newchallenge.to)
+        )
+          error = this.newchallenge.to + " " + this.st.tr["is not online"];
+      }
       if (error) {
         alert(error);
         return;
       }
-      const vname = this.getVname(this.newchallenge.vid);
-      const vModule = await import("@/variants/" + vname + ".js");
-      window.V = vModule.VariantRules;
-      if (this.newchallenge.cadence.match(/^[0-9]+$/))
-        this.newchallenge.cadence += "+0"; //assume minutes, no increment
-      const ctype = this.classifyObject(this.newchallenge);
+      window.V = this.newchallenge.V;
       error = checkChallenge(this.newchallenge);
-      if (!error && ctype == "corr" && this.st.user.id <= 0)
-        error = this.st.tr["Please log in to play correspondance games"];
       if (error) {
         alert(error);
         return;
@@ -618,7 +740,7 @@ export default {
         });
         // Add new challenge:
         chall.from = {
-          //decompose to avoid revealing email
+          // Decompose to avoid revealing email
           sid: this.st.user.sid,
           id: this.st.user.id,
           name: this.st.user.name
@@ -626,12 +748,19 @@ export default {
         chall.added = Date.now();
         // NOTE: vname and type are redundant (can be deduced from cadence + vid)
         chall.type = ctype;
-        chall.vname = vname;
+        chall.vname = this.newchallenge.vname;
         this.challenges.push(chall);
         // Remember cadence  + vid for quicker further challenges:
         localStorage.setItem("cadence", chall.cadence);
         localStorage.setItem("vid", chall.vid);
         document.getElementById("modalNewgame").checked = false;
+        // Show the challenge if not on current display
+        if (
+          (ctype == "live" && this.cdisplay == "corr") ||
+          (ctype == "corr" && this.cdisplay == "live")
+        ) {
+          this.setDisplay('c', ctype);
+        }
       };
       if (ctype == "live") {
         // Live challenges have a random ID
@@ -643,7 +772,28 @@ export default {
         });
       }
     },
-    clickChallenge: function(c) {
+    // Callback function after a diagram was showed to accept
+    // or refuse targetted challenge:
+    decisionChallenge: function(accepted) {
+      this.curChallToAccept.accepted = accepted;
+      this.finishProcessingChallenge(this.curChallToAccept);
+      document.getElementById("modalAccept").checked = false;
+    },
+    finishProcessingChallenge: function(c) {
+      if (c.accepted) {
+        c.seat = {
+          // Again, avoid c.seat = st.user to not reveal email
+          sid: this.st.user.sid,
+          id: this.st.user.id,
+          name: this.st.user.name
+        };
+        this.launchGame(c);
+      } else {
+        this.send("refusechallenge", { data: c.id, target: c.from.sid });
+      }
+      this.send("deletechallenge", { data: c.id });
+    },
+    clickChallenge: async function(c) {
       const myChallenge =
         c.from.sid == this.st.user.sid || //live
         (this.st.user.id > 0 && c.from.id == this.st.user.id); //corr
@@ -653,25 +803,31 @@ export default {
           return;
         }
         c.accepted = true;
+        const vModule = await import("@/variants/" + c.vname + ".js");
+        window.V = vModule.VariantRules;
         if (c.to) {
-          //c.to == this.st.user.name (connected)
-          // TODO: if special FEN, show diagram after loading variant
-          c.accepted = confirm("Accept challenge?");
-        }
-        if (c.accepted) {
-          c.seat = {
-            //again, avoid c.seat = st.user to not reveal email
-            sid: this.st.user.sid,
-            id: this.st.user.id,
-            name: this.st.user.name
-          };
-          this.launchGame(c);
-        } else {
-          this.send("refusechallenge", { data: c.id, target: c.from.sid });
+          // c.to == this.st.user.name (connected)
+          if (c.fen) {
+            const parsedFen = V.ParseFen(c.fen);
+            c.mycolor = V.GetOppCol(parsedFen.turn);
+            this.tchallDiag = getDiagram({
+              position: parsedFen.position,
+              orientation: c.mycolor
+            });
+            this.curChallToAccept = c;
+            document.getElementById("modalAccept").checked = true;
+          }
+          else {
+            if (!confirm(this.st.tr["Accept challenge?"]))
+              c.accepted = false;
+            this.finishProcessingChallenge(c);
+          }
         }
-        this.send("deletechallenge", { data: c.id });
-      } //my challenge
+        else
+          this.finishProcessingChallenge(c);
+      }
       else {
+        // My challenge
         if (c.type == "corr") {
           ajax("/challenges", "DELETE", { id: c.id });
         }
@@ -681,14 +837,15 @@ export default {
       ArrayFun.remove(this.challenges, ch => ch.id == c.id);
     },
     // NOTE: when launching game, the challenge is already being deleted
-    launchGame: async function(c) {
-      const vModule = await import("@/variants/" + c.vname + ".js");
-      window.V = vModule.VariantRules;
+    launchGame: function(c) {
       // These game informations will be shared
       let gameInfo = {
         id: getRandString(),
         fen: c.fen || V.GenRandInitFen(),
-        players: shuffle([c.from, c.seat]), //white then black
+        // White player index 0, black player index 1:
+        players: c.mycolor
+          ? (c.mycolor == "w" ? [c.seat, c.from] : [c.from, c.seat])
+          : shuffle([c.from, c.seat]),
         vid: c.vid,
         cadence: c.cadence
       };
@@ -735,10 +892,14 @@ export default {
         initime: [0, 0], //initialized later
         score: "*"
       });
-      GameStorage.add(game);
-      if (this.st.settings.sound >= 1)
-        new Audio("/sounds/newgame.mp3").play().catch(() => {});
-      this.$router.push("/game/" + gameInfo.id);
+      GameStorage.add(game, (err) => {
+        // If an error occurred, game is not added: abort
+        if (!err) {
+          if (this.st.settings.sound)
+            new Audio("/sounds/newgame.wav").play().catch(() => {});
+          this.$router.push("/game/" + gameInfo.id);
+        }
+      });
     }
   }
 };
@@ -752,7 +913,7 @@ export default {
   padding: 15px 0
   max-width: 430px
 
-#newgameDiv > .card
+#newgameDiv > .card, #acceptDiv > .card
   max-width: 767px
   max-height: 100%
 
@@ -775,21 +936,27 @@ div#peopleWrap > .card
   width: 50%
   position: relative
   float: left
+
 #chat
   width: 50%
   float: left
   position: relative
+
 @media screen and (max-width: 767px)
   #players, #chats
     width: 100%
+
 #chat > .card
   max-width: 100%
   margin: 0;
   border: none;
+
 #players > p
   margin-left: 5px
+
 .anonymous
   font-style: italic
+
 button.player-action
   margin-left: 32px
 
@@ -799,6 +966,24 @@ button.player-action
 .tabbtn
   background-color: #f9faee
 
+button.acceptBtn
+  background-color: lightgreen
+button.refuseBtn
+  background-color: red
+
+#buttonsTchall
+  margin-top: 10px
+
+.variantName
+  font-weight: bold
+
+.diagram
+  margin: 0 auto
+  max-width: 400px
+
+#inputFen
+  width: 100%
+
 #div2, #div3
   margin-top: 15px
 @media screen and (max-width: 767px)