- 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: {
+ gdisplay: "live",
+ liveGames: [],
+ corrGames: [],
+ players: [], //online players
+ challenges: [], //live challenges
+ },
+ // 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="myname" :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>
+ <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="display=='live'" :games="liveGames" @show-game="showGame">
+ </my-game-list>
+ <my-game-list v-show="display=='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)