h3#newGameTxt= translations["New game"]
p= translations["Waiting for opponent..."]
*/
-
+// TODO: my-challenge-list, gérant clicks sur challenges, affichage, réception/émission des infos sur challenges ; de même, my-player-list
// TODO: si on est en train de jouer une partie, le notifier aux nouveaux connectés
-
/*
Players + challenges : == "room" home of variant (surligner si nouveau défi perso et pas affichage courant)
joueurs en ligne (dte),
quand je poste un lastMove corr, supprimer mon ancien lastMove le cas échéant (tlm l'a eu)
fin de partie corr: garder maxi nbPlayers lastMove sur serveur, pendant 7 jours (arbitraire)
*/
- case "newgame": //opponent found
- // oppid: opponent socket ID
+// TODO: au moins l'échange des coups en P2P ?
+Vue.component('my-room', {
+ props: ["conn","settings"],
+ data: {
+ remoteGames: [],
+ corrGames: [],
+ },
+ // 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>Note: leave FEN blank for random</p>
+ <button @click="newGame">Launch game</button>
+ </div>
+ </div>
+ <div>
+ <my-chat :conn="conn" :myname="myname" :people="people"></my-chat>
+ <my-challenge-list :conn="conn"></my-challenge-list>
+ </div>
+ <div>
+ <my-player-list :conn="conn"></my-player-list>
+ // TODO: also corr games (of pther players)
+ // presentation ? table ?!
+ <my-game-summary v-for="g in remoteGames"
+ v-bind:vobj="g" v-bind:game="g" v-bind:key="g.id"
+ @click="() => showGame(g.id,g.uid)">
+ </my-game-summary>
+ </div>
+ </div>
+ `,
+ created: function() {
+ // TODO: ask server for current corr games (all but mines)
+ const socketMessageListener = msg => {
+ const data = JSON.parse(msg.data);
+ switch (data.code)
+ {
+ // TODO: also receive remote games summaries (update)
+ // (just players names, time control, and ID + player ID)
+ case "newgame": //challenge accepted
+ // oppid: opponent socket ID (or DB id if registered)
this.newGame("human", data.fen, data.color, data.oppid, data.gameid);
break;
-
- // TODO: elsewhere, probably (new game button)
+ }
+ };
+ const socketCloseListener = () => {
+ this.conn.addEventListener('message', socketMessageListener);
+ this.conn.addEventListener('close', socketCloseListener);
+ };
+ this.conn.onmessage = socketMessageListener;
+ this.conn.onclose = socketCloseListener;
+ },
+ methods: {
clickGameSeek: function(e) {
- this.getRidOfTooltip(e.currentTarget);
if (this.mode == "human" && this.score == "*")
return; //no newgame while playing
if (this.seek)
else
this.newGame("human");
},
- clickComputerGame: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- if (this.mode == "computer" && this.score == "*"
- && this.vr.turn != this.mycolor)
- {
- // Wait for computer reply first (avoid potential "ghost move" bug)
- return;
- }
- this.newGame("computer");
- },
- clickFriendGame: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- document.getElementById("modal-fenedit").checked = true;
- },
- // In main hall :
newGame: function(mode, fenInit, color, oppId, gameId) {
const fen = fenInit || VariantRules.GenRandInitFen();
console.log(fen); //DEBUG
setTimeout(() => { modalBox.checked = false; }, 2000);
return;
}
- const prefix = this.getStoragePrefix(mode);
- if (mode == "computer")
- {
- const storageVariant = localStorage.getItem(prefix+"variant");
- if (!!storageVariant)
- {
- const score = localStorage.getItem(prefix+"score");
- if (storageVariant !== variant.name && score == "*")
- {
- if (!confirm(storageVariant +
- translations[": unfinished computer game will be erased"]))
- {
- return;
- }
- }
- }
- }
- else if (mode == "friend")
- {
- const storageVariant = localStorage.getItem(prefix+"variant");
- if (!!storageVariant)
- {
- const score = localStorage.getItem(prefix+"score");
- if (storageVariant !== variant.name && score == "*")
- {
- if (!confirm(storageVariant +
- translations[": current analysis will be erased"]))
- {
- return;
- }
- }
- }
- }
this.vr = new VariantRules(fen, []);
this.score = "*";
this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
new Audio("/sounds/newgame.mp3").play().catch(err => {});
document.getElementById("modal-newgame").checked = false;
}
- else if (mode == "computer")
- {
- this.compWorker.postMessage(["init",this.vr.getFen()]);
- this.mycolor = (Math.random() < 0.5 ? 'w' : 'b');
- if (this.mycolor != this.vr.turn)
- this.playComputerMove();
- }
- else if (mode == "friend")
- this.mycolor = "w"; //convention...
- //else: problem solving: nothing more to do
- if (mode != "problem")
- this.setStorage(); //store game state in case of interruptions
+ this.setStorage(); //store game state in case of interruptions
},
- continueGame: function(mode) {
- this.mode = mode;
- this.oppid = (mode=="human" ? localStorage.getItem("oppid") : undefined);
- const prefix = this.getStoragePrefix(mode);
- this.mycolor = localStorage.getItem(prefix+"mycolor");
- const moves = JSON.parse(localStorage.getItem(prefix+"moves"));
- const fen = localStorage.getItem(prefix+"fen");
- const score = localStorage.getItem(prefix+"score"); //set in "endGame()"
- this.fenStart = localStorage.getItem(prefix+"fenStart");
- this.vr = new VariantRules(fen, moves);
+ continueGame: function() {
+ this.oppid = localStorage.getItem("oppid");
+ this.mycolor = localStorage.getItem("mycolor");
+ const moves = JSON.parse(localStorage.getItem("moves"));
+ const fen = localStorage.getItem("fen");
+ const score = localStorage.getItem("score"); //always "*" ?!
+ this.fenStart = localStorage.getItem("fenStart");
+ this.vr = new VariantRules(fen);
this.incheck = this.vr.getCheckSquares(this.vr.turn);
- if (mode == "human")
- {
- this.gameId = localStorage.getItem("gameId");
- // Send ping to server (answer pong if opponent is connected)
- this.conn.send(JSON.stringify({
- code:"ping",oppid:this.oppid,gameId:this.gameId}));
- }
- else if (mode == "computer")
- {
- this.compWorker.postMessage(["init",fen]);
- if (score == "*" && this.mycolor != this.vr.turn)
- this.playComputerMove();
- }
- //else: nothing special to do in friend mode
- if (score != "*")
- {
- // Small delay required when continuation run faster than drawing page
- setTimeout(() => this.endGame(score), 100);
- }
+ this.gameId = localStorage.getItem("gameId");
+ // Send ping to server (answer pong if opponent is connected)
+ this.conn.send(JSON.stringify({
+ code:"ping",oppid:this.oppid,gameId:this.gameId}));
},
-
-
- // TODO: option du bouton "new game"
- const modalFenEdit = [
- h('input',
- {
- attrs: { "id": "modal-fenedit", type: "checkbox" },
- "class": { "modal": true },
- }),
- h('div',
- {
- attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
- },
- [
- h('div',
- {
- "class": { "card": true, "smallpad": true },
- },
- [
- h('label',
- {
- attrs: { "id": "close-fenedit", "for": "modal-fenedit" },
- "class": { "modal-close": true },
- }
- ),
- h('h3',
- {
- attrs: { "id": "titleFenedit" },
- "class": { "section": true },
- domProps: { innerHTML: translations["Game state (FEN):"] },
- }
- ),
- h('input',
- {
- attrs: {
- "id": "input-fen",
- type: "text",
- value: VariantRules.GenRandInitFen(),
- },
- }
- ),
- h('button',
- {
- on: { click:
- () => {
- const fen = document.getElementById("input-fen").value;
- document.getElementById("modal-fenedit").checked = false;
- this.newGame("friend", fen);
- }
- },
- domProps: { innerHTML: translations["Ok"] },
- }
- ),
- h('button',
- {
- on: { click:
- () => {
- document.getElementById("input-fen").value =
- VariantRules.GenRandInitFen();
- }
- },
- domProps: { innerHTML: translations["Random"] },
- }
- ),
- ]
- )
- ]
- )
- ];
- elementArray = elementArray.concat(modalFenEdit);
+ },
+});