- case "newgame": //opponent found
- // oppid: opponent socket ID
- this.newGame("human", data.fen, data.color, data.oppid, data.gameid);
- break;
-
- // TODO: elsewhere, probably (new game button)
- clickGameSeek: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- if (this.mode == "human" && this.score == "*")
- return; //no newgame while playing
- if (this.seek)
- {
- this.conn.send(JSON.stringify({code:"cancelnewgame"}));
- this.seek = false;
- }
- else
- this.newGame("human");
- },
- clickComputerGame: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- if (this.mode == "computer" && this.score == "*"
- && this.vr.turn != this.mycolor)
+// TODO: au moins l'échange des coups en P2P ?
+// TODO: objet game, objet challenge ? et player ?
+Vue.component('my-room', {
+ props: ["conn","settings"],
+ data: function () {
+ return {
+ gdisplay: "live",
+ user: user,
+ liveGames: [],
+ corrGames: [],
+ players: [], //online players
+ challenges: [], //live challenges
+ people: [], //people who connect to this room (or disconnect)
+ };
+ },
+ // Modal new game, and then sub-components
+ template: `
+ <div>
+ <input id="modalNewgame" type="checkbox" class="modal"/>
+ <div role="dialog" aria-labelledby="titleFenedit">
+ <div class="card smallpad">
+ <label id="closeNewgame" for="modalNewgame" class="modal-close">
+ </label>
+ <h3 id="titleFenedit" class="section">
+ {{ translate("Game state (FEN):") }}
+ </h3>
+ <input id="input-fen" type="text"/>
+ <p>TODO: cadence, adversaire (pre-filled if click on name)</p>
+ <p>cadence 2m+12s ou 7d+1d (m,s ou d,d) --> main, increment</p>
+ <p>Note: leave FEN blank for random; FEN only for targeted challenge</p>
+ <button @click="newGame">Launch game</button>
+ </div>
+ </div>
+ <div>
+ <my-chat :conn="conn" :myname="user.name" :people="people"></my-chat>
+ <my-challenge-list :challenges="challenges" @click-challenge="clickChallenge">
+ </my-challenge-list>
+ </div>
+ <button onClick="doClick('modalNewgame')">New game</button>
+ <div>
+ <div style="border:1px solid black">
+ <h3>Online players</h3>
+ <div v-for="p in players" @click="challenge(p)">
+ {{ p.name }}
+ </div>
+ </div>
+ <div class="button-group">
+ <button @click="gdisplay='live'">Live games</button>
+ <button @click="gdisplay='corr'">Correspondance games</button>
+ </div>
+ <my-game-list v-show="gdisplay=='live'" :games="liveGames"
+ @show-game="showGame">
+ </my-game-list>
+ <my-game-list v-show="gdisplay=='corr'" :games="corrGames"
+ @show-game="showGame">
+ </my-game-list>
+ </div>
+ </div>
+ `,
+ created: function() {
+ // TODO: ask server for current corr games (all but mines: names, ID, time control)
+ const socketMessageListener = msg => {
+ const data = JSON.parse(msg.data);
+ switch (data.code)