X-Git-Url: https://git.auder.net/rpsls.js?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fviews%2FHome.vue;h=3a7e383f20b48d62bad116fab599b0ad4981b845;hb=fb54f098a565034c09c111f1141d2c60073b4a61;hp=c2c5b44221c07113bcb59fbfd4dddf72beadc52a;hpb=5b020e732156ee77d3b15b127aef2df57c2562ad;p=vchess.git diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue index c2c5b442..3a7e383f 100644 --- a/client/src/views/Home.vue +++ b/client/src/views/Home.vue @@ -7,7 +7,7 @@ div fieldset label(for="selectVariant") {{ st.tr["Variant"] }} select#selectVariant(v-model="newgameInfo.vid") - option(v-for="v in variants" :value="v.id") {{ v.name }} + 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") @@ -31,14 +31,14 @@ div v-model="newgameInfo.players[2].name") fieldset label(for="inputFen") - {{ st.tr["FEN (ignored if players fields are blank)"] }} + | {{ 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 - my-challenge-list(:challenges="challenges" @click-challenge="clickChallenge") + 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 }} @@ -47,9 +47,9 @@ div .button-group button(@click="gdisplay='live'") Live games button(@click="gdisplay='corr'") Correspondance games - my-game-list(v-show="gdisplay=='live'" :games="liveGames" + GameList(v-show="gdisplay=='live'" :games="liveGames" @show-game="showGame") - my-game-list(v-show="gdisplay=='corr'" :games="corrGames" + GameList(v-show="gdisplay=='corr'" :games="corrGames" @show-game="showGame") @@ -65,6 +65,7 @@ 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 ? import { store } from "@/store"; +import { NbPlayers } from "@/data/nbPlayers"; import GameList from "@/components/GameList.vue"; import ChallengeList from "@/components/ChallengeList.vue"; export default { @@ -73,170 +74,177 @@ export default { GameList, ChallengeList, }, - data: function () { - return { + data: function () { + return { st: store.state, - gdisplay: "live", - liveGames: [], - corrGames: [], - players: [], //online players - challenges: [], //live challenges - willPlay: [], //IDs of challenges in which I decide to play (>= 3 players) - newgameInfo: { - fen: "", - vid: 0, - nbPlayers: 0, - players: [{id:0,name:""},{id:0,name:""},{id:0,name:""}], - mainTime: 0, - increment: 0, - }, - }; - }, - 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) - { - 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; - }, - methods: { - showGame: function(game) { + gdisplay: "live", + liveGames: [], + corrGames: [], + players: [], //online players + challenges: [], //live challenges + willPlay: [], //IDs of challenges in which I decide to play (>= 3 players) + newgameInfo: { + fen: "", + vid: 0, + nbPlayers: 0, + players: [{id:0,name:""},{id:0,name:""},{id:0,name:""}], + mainTime: 0, + increment: 0, + }, + }; + }, + 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; + }, + }, + methods: { + 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); - const toIdx = challenge.to.findIndex(p => p.id == user.id); - const me = {name:user.name,id:user.id}; - if (toIdx >= 0) - { - // It's a multiplayer challenge I accepted: withdraw - this.st.conn.send(JSON.stringify({code:"withdrawchallenge", - cid:challenge.id, user:me})); - this.challenges.to.splice(toIdx, 1); - } - else if (challenge.from.id == user.id) //it's my challenge: cancel it - { - this.st.conn.send(JSON.stringify({code:"cancelchallenge", cid:challenge.id})); - this.challenges.splice(index, 1); - } - else //accept a challenge - { - this.st.conn.send(JSON.stringify({code:"acceptchallenge", - cid:challenge.id, user:me})); - this.challenges[index].to.push(me); - } - // 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) { - const fen = chall.fen || V.GenRandInitFen(); - const game = {}; //TODO: fen, players, time ... - //setStorage(game); //TODO - game.players.forEach(p => { - 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); - // Possible (server) error if filled player does not exist - ajax( - "/challenges/" + this.newgameInfo.vid, - "POST", - this.newgameInfo, - response => { - const chall = Object.assign({}, - this.newgameInfo, - { - id: response.cid, - uid: user.id, - added: Date.now(), - vname: vname, - }, - this.challenges.push(response.challenge); - } - ); + }, + 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); + const toIdx = challenge.to.findIndex(p => p.id == user.id); + const me = {name:user.name,id:user.id}; + if (toIdx >= 0) + { + // It's a multiplayer challenge I accepted: withdraw + this.st.conn.send(JSON.stringify({code:"withdrawchallenge", + cid:challenge.id, user:me})); + this.challenges.to.splice(toIdx, 1); + } + else if (challenge.from.id == user.id) //it's my challenge: cancel it + { + this.st.conn.send(JSON.stringify({code:"cancelchallenge", cid:challenge.id})); + this.challenges.splice(index, 1); + } + else //accept a challenge + { + this.st.conn.send(JSON.stringify({code:"acceptchallenge", + cid:challenge.id, user:me})); + this.challenges[index].to.push(me); + } + // 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) { + const fen = chall.fen || V.GenRandInitFen(); + const game = {}; //TODO: fen, players, time ... + //setStorage(game); //TODO + game.players.forEach(p => { + 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); + // Possible (server) error if filled player does not exist + ajax( + "/challenges/" + this.newgameInfo.vid, + "POST", + this.newgameInfo, + response => { + const chall = Object.assign({}, + this.newgameInfo, + { + id: response.cid, + uid: user.id, + added: Date.now(), + vname: vname, + }); + this.challenges.push(chall); + } + ); // 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(); - }, - possibleNbplayers: function(nbp) { - if (this.newgameInfo.vid == 0) - return false; - const idxInVariants = - variantArray.findIndex(v => v.id == this.newgameInfo.vid); - return NbPlayers[variantArray[idxInVariants].name].includes(nbp); - }, - }, -}); + }; + 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(); + }, + possibleNbplayers: function(nbp) { + if (this.newgameInfo.vid == 0) + return false; + const variants = this.st.variants; + const idxInVariants = + variants.findIndex(v => v.id == this.newgameInfo.vid); + return NbPlayers[variants[idxInVariants].name].includes(nbp); + }, + }, +}; + +