From 9d58ef95e3affd799571838164f7c5bbfda11f64 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 8 Feb 2019 00:15:37 +0100 Subject: [PATCH] Work on main hall --- client/src/components/Game.vue | 4 +- client/src/components/GameList.vue | 9 +- client/src/data/challengeCheck.js | 85 +++++---- client/src/data/userCheck.js | 4 +- client/src/utils/array.js | 12 +- client/src/views/Hall.vue | 269 ++++++++++++++++------------- 6 files changed, 221 insertions(+), 162 deletions(-) diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue index 3eb8f0c6..2a74a072 100644 --- a/client/src/components/Game.vue +++ b/client/src/components/Game.vue @@ -178,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"); diff --git a/client/src/components/GameList.vue b/client/src/components/GameList.vue index c7f661ca..bb97a742 100644 --- a/client/src/components/GameList.vue +++ b/client/src/components/GameList.vue @@ -1,16 +1,18 @@ <template lang="pug"> table tr - th(v-if="showVariant") Variant + th Variant th Players names th Cadence th(v-if="showResult") Result + th(v-else) Moves count tr(v-for="g in games" @click="$emit('show-game',g)") - td(v-if="showVariant") {{ g.vname }} + td {{ g.vname }} td span(v-for="p in g.players") {{ p.name }} td {{ g.mainTime }} + {{ g.increment }} td(v-if="showResult") {{ g.score }} + td(v-else) {{ g.movesCount }} </template> <script> @@ -18,9 +20,6 @@ export default { name: "my-game-list", props: ["games"], computed: { - showVariant: function() { - return this.games.length > 0 && !!this.games[0].vname; - }, showResult: function() { return this.games.length > 0 && this.games[0].score != "*"; }, diff --git a/client/src/data/challengeCheck.js b/client/src/data/challengeCheck.js index 85d8571d..0a3a9917 100644 --- a/client/src/data/challengeCheck.js +++ b/client/src/data/challengeCheck.js @@ -1,16 +1,55 @@ -// 'vname' for 'variant name' is defined when run on client side -function checkChallenge(c, vname) + + +function timeUnitToSeconds(value, unit) +{ + let seconds = value; + switch (unit) + { + case 'd': + seconds *= 24; + case 'h': + seconds *= 60; + case 'm': + seconds *= 60; + } + return seconds; +} + +function isLargerUnit(unit1, unit2) +{ + return (unit1 == 'd' && unit2 != 'd') + || (unit1 == 'h' && ['s','m'].includes(unit2)) + || (unit1 == 'm' && unit2 == 's'); +} + +export function checkChallenge(c) { const vid = parseInt(c.vid); if (isNaN(vid) || vid <= 0) return "Please select a variant"; - const mainTime = parseInt(c.mainTime); - const increment = parseInt(c.increment); - if (isNaN(mainTime) || mainTime <= 0) + const tcParts = c.timeControl.replace(/ /g,"").split('+'); + const mainTime = tcParts[0].match(/([0-9]+)([smhd])/); + if (!mainTime) + return "Wrong time control"; + const mainTimeValue = parseInt(mainTime[1]); + const mainTimeUnit = mainTime[2]; + if (isNaN(mainTimeValue) || mainTimeValue <= 0) return "Main time should be strictly positive"; - if (isNaN(increment) || increment < 0) - return "Increment must be positive"; + c.mainTime = timeUnitToSeconds(mainTimeValue, mainTimeUnit); + if (tcParts.length >= 2) + { + const increment = tcParts[1].match(/([0-9]+)([smhd])/); + if (!increment) + return "Wrong time control"; + const incrementValue = parseInt(increment[1]); + const incrementUnit = increment[2]; + if (isLargerUnit(incrementUnit, mainTimeUnit)) + return "Increment unit cannot be larger than main unit"; + if (isNaN(incrementValue) || incrementValue < 0) + return "Increment must be positive"; + c.increment = timeUnitToSeconds(incrementValue, incrementUnit); + } // Basic alphanumeric check for players names let playerCount = 0; @@ -18,6 +57,7 @@ function checkChallenge(c, vname) { if (p.name.length > 0) { + // TODO: slightly redundant (see data/userCheck.js) if (!p.name.match(/^[\w]+$/)) return "Wrong characters in players names"; playerCount++; @@ -27,27 +67,12 @@ function checkChallenge(c, vname) if (playerCount > 0 && playerCount != c.nbPlayers-1) return "None, or all of the opponent names must be filled" - if (typeof document !== "undefined") //client side - { - const V = eval(vname + "Rules"); - // Allow custom FEN (and check it) only for individual challenges - if (c.fen.length > 0 && playerCount > 0) - { - if (!V.IsGoodFen(c.fen)) - return "Bad FEN string"; - } - else - { - // Generate a FEN - c.fen = V.GenRandInitFen(); - } - } - else - { - // Just characters check on server: - if (!c.fen.match(/^[a-zA-Z0-9, /-]*$/)) - return "Bad FEN string"; - } + // Allow custom FEN (and check it) only for individual challenges + if (c.fen.length > 0 && playerCount > 0) + { + if (!V.IsGoodFen(c.fen)) + return "Bad FEN string"; + } + else //generate a FEN + c.fen = V.GenRandInitFen(); } - -try { module.exports = checkChallenge; } catch(e) { } //for server diff --git a/client/src/data/userCheck.js b/client/src/data/userCheck.js index 65ed1db8..4c714a68 100644 --- a/client/src/data/userCheck.js +++ b/client/src/data/userCheck.js @@ -1,4 +1,4 @@ -function checkNameEmail(o) +export function checkNameEmail(o) { if (typeof o.name === "string") { @@ -15,5 +15,3 @@ function checkNameEmail(o) return "Bad characters in email"; } } - -try { module.exports = checkNameEmail; } catch(e) { } //for server diff --git a/client/src/utils/array.js b/client/src/utils/array.js index 1b92e350..fae4ce91 100644 --- a/client/src/utils/array.js +++ b/client/src/utils/array.js @@ -1,19 +1,19 @@ // Remove item(s) in array (if present) export const ArrayFun = { - remove: function(array, rfun, all) + remove: function(arr, rfun, all) { - const index = array.findIndex(rfun); + const index = arr.findIndex(rfun); if (index >= 0) { - array.splice(index, 1); + arr.splice(index, 1); if (!!all) { // Reverse loop because of the splice below - for (let i=array.length-1; i>=index; i--) + for (let i=arr.length-1; i>=index; i--) { - if (rfun(array[i])) - array.splice(i, 1); + if (rfun(arr[i])) + arr.splice(i, 1); } } } diff --git a/client/src/views/Hall.vue b/client/src/views/Hall.vue index ca0caa26..ae5e7830 100644 --- a/client/src/views/Hall.vue +++ b/client/src/views/Hall.vue @@ -1,59 +1,58 @@ <template lang="pug"> -div +main input#modalNewgame.modal(type="checkbox") div(role="dialog" aria-labelledby="titleFenedit") .card.smallpad label#closeNewgame.modal-close(for="modalNewgame") fieldset label(for="selectVariant") {{ st.tr["Variant"] }} - select#selectVariant(v-model="newgameInfo.vid") + select#selectVariant(v-model="newchallenge.vid") option(v-for="v in st.variants" :value="v.id") {{ v.name }} fieldset label(for="selectNbPlayers") {{ st.tr["Number of players"] }} - select#selectNbPlayers(v-model="newgameInfo.nbPlayers") + select#selectNbPlayers(v-model="newchallenge.nbPlayers") option(v-show="possibleNbplayers(2)" value="2") 2 option(v-show="possibleNbplayers(3)" value="3") 3 option(v-show="possibleNbplayers(4)" value="4") 4 fieldset - label(for="timeControl") Time control (in days) - #timeControl - input(type="number" v-model="newgameInfo.mainTime" - placeholder="Main time") - input(type="number" v-model="newgameInfo.increment" - placeholder="Increment") + label(for="timeControl") Time control (e.g. 3m, 1h+30s, 7d+1d) + input#timeControl(type="text" v-model="newchallenge.timeControl" + placeholder="Time control") fieldset - label(for="selectPlayers") {{ st.tr["Play with?"] }} + label(for="selectPlayers") {{ st.tr["Play with? (optional)"] }} #selectPlayers - input(type="text" v-model="newgameInfo.players[0].name") - input(v-show="newgameInfo.nbPlayers>=3" type="text" - v-model="newgameInfo.players[1].name") - input(v-show="newgameInfo.nbPlayers==4" type="text" - v-model="newgameInfo.players[2].name") + input(type="text" v-model="newchallenge.players[0].name") + input(v-show="newchallenge.nbPlayers>=3" type="text" + v-model="newchallenge.players[1].name") + input(v-show="newchallenge.nbPlayers==4" type="text" + v-model="newchallenge.players[2].name") fieldset - label(for="inputFen") - | {{ st.tr["FEN (ignored if players fields are blank)"] }} - input#inputFen(type="text" v-model="newgameInfo.fen") - button(@click="newGame") Launch game - p TODO: cadence, adversaire (pre-filled if click on name) - p cadence 2m+12s ou 7d+1d (m,s ou d,d) --> main, increment - p Note: leave FEN blank for random; FEN only for targeted challenge - div - ChallengeList(:challenges="challenges" @click-challenge="clickChallenge") - div(style="border:1px solid black") - h3 Online players - div(v-for="p in players" @click="challenge(p)") {{ p.name }} - button(onClick="doClick('modalNewgame')") New game - div - .button-group - button(@click="gdisplay='live'") Live games - button(@click="gdisplay='corr'") Correspondance games - GameList(v-show="gdisplay=='live'" :games="liveGames" - @show-game="showGame") - GameList(v-show="gdisplay=='corr'" :games="corrGames" - @show-game="showGame") + label(for="inputFen") {{ st.tr["FEN (optional)"] }} + input#inputFen(type="text" v-model="newchallenge.fen") + button(@click="newChallenge") Send challenge + .row + .col-sm-12.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-2 + ChallengeList(:challenges="challenges" @click-challenge="clickChallenge") + .col-sm-12.col-md-5.col-lg-4 + #players + h3 Online players + div(v-for="p in players" @click="challenge(p)") {{ p.name }} + .row + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + button(onClick="doClick('modalNewgame')") New game + .row + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + .button-group + button(@click="gdisplay='live'") Live games + button(@click="gdisplay='corr'") Correspondance games + GameList(v-show="gdisplay=='live'" :games="liveGames" + @show-game="showGame") + GameList(v-show="gdisplay=='corr'" :games="corrGames" + @show-game="showGame") </template> <script> +// TODO: blank time control == untimed // main playing hall: online players + current challenges + button "new game" // TODO: si on est en train de jouer une partie, le notifier aux nouveaux connectés /* @@ -64,8 +63,29 @@ fin de partie corr: supprimer partie du serveur au bout de 7 jours (arbitraire) */ // TODO: au moins l'échange des coups en P2P ? et game chat ? // TODO: objet game, objet challenge ? et player ? +/* + * Possible events: + * - send new challenge (corr or live, cf. time control), with button or click on player + * - accept challenge (corr or live) --> send info to all concerned players + * - cancel challenge (click on sent challenge) --> send info to all concerned players + * - withdraw from challenge (if >= 3 players and previously accepted) + * --> send info to all concerned players + * - prepare and start new game (if challenge is full after acceptation) + * Also send to all connected players (only from me) + * - receive "player connect": send all our current challenges (to him or global) + * Also send all our games (live - max 1 - and corr) [in web worker ?] + * + all our sent challenges. + * - receive "playergames": list of games by some connected player (NO corr) + * - receive "playerchallenges": list of challenges (sent) by some online player (NO corr) + * - receive "player disconnect": remove from players list + * - receive "accept/withdraw/cancel challenge": apply action to challenges list + * - receive "new game": if live, store locally + redirect to game + * If corr: notify "new game has started", give link, but do not redirect +*/ import { store } from "@/store"; import { NbPlayers } from "@/data/nbPlayers"; +import { checkChallenge } from "@/data/challengeCheck"; +import { ArrayFun } from "@/utils/array"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; export default { @@ -83,67 +103,76 @@ export default { players: [], //online players challenges: [], //live challenges willPlay: [], //IDs of challenges in which I decide to play (>= 3 players) - newgameInfo: { + newchallenge: { fen: "", vid: 0, nbPlayers: 0, + // TODO: distinguer uid et sid ! players: [{id:0,name:""},{id:0,name:""},{id:0,name:""}], - mainTime: 0, - increment: 0, + timeControl: "", }, }; }, watch: { "st.conn": 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) - { - case "newgame": - // TODO: new game just started: data contain all informations - // (id, players, time control, fenStart ...) - break; - // TODO: also receive live games summaries (update) - // (just players names, time control, and ID + player ID) - case "acceptchallenge": - // oppid: opponent socket ID (or DB id if registered) - if (true) //TODO: if challenge is full - this.newGame(data.challenge, data.user); //user.id et user.name - break; - case "withdrawchallenge": - // TODO - break; - case "cancelchallenge": - // TODO - break; - // TODO: distinguish these (dis)connect events from their analogs in game.js - case "connect": - this.players.push({name:data.name, id:data.uid}); - break; - case "disconnect": - const pIdx = this.players.findIndex(p => p.id == data.uid); - this.players.splice(pIdx); - break; - } - }; - const socketCloseListener = () => { - this.st.conn.addEventListener('message', socketMessageListener); - this.st.conn.addEventListener('close', socketCloseListener); - }; - this.st.conn.onmessage = socketMessageListener; - this.st.conn.onclose = socketCloseListener; + this.st.conn.onmessage = this.socketMessageListener; + this.st.conn.onclose = this.socketCloseListener; }, }, + created: function() { + // TODO: ask server for current corr games (all but mines: names, ID, time control) + if (!!this.st.conn) + { + this.st.conn.onmessage = this.socketMessageListener; + this.st.conn.onclose = this.socketCloseListener; + } + }, methods: { + socketMessageListener: function(msg) { + const data = JSON.parse(msg.data); + switch (data.code) + { + case "newgame": + // TODO: new game just started: data contain all informations + // (id, players, time control, fenStart ...) + break; + // TODO: also receive live games summaries (update) + // (just players names, time control, and ID + player ID) + case "acceptchallenge": + if (true) //TODO: if challenge is full + this.newGame(data.challenge, data.user); //user.id et user.name + break; + case "withdrawchallenge": + const cIdx = this.challenges.findIndex(c => c.id == data.cid); + let chall = this.challenges[cIdx] + ArrayFun.remove(chall.players, p => p.id == data.uid); + chall.players.push({id:0, name:""}); + break; + case "cancelchallenge": + ArrayFun.remove(this.challenges, c => c.id == data.cid); + break; + case "hallconnect": + this.players.push({name:data.name, id:data.uid}); + break; + case "halldisconnect": + ArrayFun.remove(this.players, p => p.id == data.uid); + break; + } + }, + socketCloseListener: function() { + this.st.conn.addEventListener('message', socketMessageListener); + this.st.conn.addEventListener('close', socketCloseListener); + }, + clickPlayer: function() { + //this.newgameInfo.players[0].name = clickPlayer.name; + //show modal; + }, showGame: function(game) { // NOTE: if we are an observer, the game will be found in main games list // (sent by connected remote players) this.$router.push("/" + game.id) }, challenge: function(player) { - this.st.conn.send(JSON.stringify({code:"sendchallenge", oppid:p.id, - user:{name:this.st.user.name,id:this.st.user.id}})); }, clickChallenge: function(challenge) { const index = this.challenges.findIndex(c => c.id == challenge.id); @@ -169,76 +198,84 @@ export default { } // TODO: accepter un challenge peut lancer une partie, il // faut alors supprimer challenge + creer partie + la retourner et l'ajouter ici - // autres actions: - // supprime mon défi - // accepte un défi - // annule l'acceptation d'un défi (si >= 3 joueurs) - // // si pas le mien et FEN speciale :: (charger code variante et) // montrer diagramme + couleur (orienté) }, // user: last person to accept the challenge - newGameLive: function(chall, user) { + newGame: function(chall, user) { const fen = chall.fen || V.GenRandInitFen(); const game = {}; //TODO: fen, players, time ... //setStorage(game); //TODO - game.players.forEach(p => { + game.players.forEach(p => { //...even if game is by corr (could be played live, why not...) this.conn.send( JSON.stringify({code:"newgame", oppid:p.id, game:game})); }); if (this.settings.sound >= 1) new Audio("/sounds/newgame.mp3").play().catch(err => {}); }, - newGame: function() { - const afterRulesAreLoaded = () => { - // NOTE: side-effect = set FEN - // TODO: (to avoid any cheating option) separate the GenRandInitFen() functions - // in separate files, load on server and generate FEN on server. - const error = checkChallenge(this.newgameInfo, vname); - if (!!error) - return alert(error); + newChallenge: async function() { + const idxInVariants = + this.st.variants.findIndex(v => v.id == this.newchallenge.vid); + const vname = variants[idxInVariants].name; + const vModule = await import("@/variants/" + vname + ".js"); + window.V = vModule.VariantRules; + // NOTE: side-effect = set FEN, and mainTime + increment in seconds + // TODO: (to limit cheating options) separate the GenRandInitFen() functions + // in separate files, load on server and generate FEN on server. + const error = checkChallenge(this.newchallenge); + if (!!error) + return alert(error); + // TODO: 40 = average number of moves ? + if (this.newchallenge.mainTime + 40 * this.newchallenge.increment + >= 3*24*60*60) //3 days (TODO: heuristic...) + { + // Correspondance game: // Possible (server) error if filled player does not exist ajax( - "/challenges/" + this.newgameInfo.vid, + "/challenges/" + this.newchallenge.vid, "POST", - this.newgameInfo, + this.newchallenge, response => { const chall = Object.assign({}, - this.newgameInfo, + this.newchallenge, { id: response.cid, - uid: user.id, + uid: this.st.user.id, added: Date.now(), vname: vname, }); this.challenges.push(chall); + document.getElementById("modalNewgame").checked = false; } ); - // TODO: else, if live game: send infos (socket), and... - }; - const idxInVariants = - variantArray.findIndex(v => v.id == this.newgameInfo.vid); - const vname = variantArray[idxInVariants].name; - const scriptId = vname + "RulesScript"; - if (!document.getElementById(scriptId)) - { - // Load variant rules (only once) - var script = document.createElement("script"); - script.id = scriptId; - script.onload = afterRulesAreLoaded; - //script.addEventListener ("load", afterRulesAreLoaded, false); - script.src = "/javascripts/variants/" + vname + ".js"; - document.body.appendChild(script); } else - afterRulesAreLoaded(); + { + // Considered live game + if (this.newchallenges.players[0].id > 0) + { + // Challenge with target players + this.newchallenges.players.forEach(p => { + this.st.conn.send(JSON.stringify({ + code: "sendchallenge", + oppid: p.id, + user: {name:this.st.user.name, id:this.st.user.id} + })); + }); + } + else + { + // Open challenge: send to all connected players + // TODO + } + } }, possibleNbplayers: function(nbp) { - if (this.newgameInfo.vid == 0) + if (this.newchallenge.vid == 0) return false; const variants = this.st.variants; const idxInVariants = - variants.findIndex(v => v.id == this.newgameInfo.vid); + variants.findIndex(v => v.id == this.newchallenge.vid); return NbPlayers[variants[idxInVariants].name].includes(nbp); }, }, -- 2.44.0