| 1 | Vue.component("my-correspondance", { |
| 2 | data: function() { |
| 3 | return { |
| 4 | userId: user.id, |
| 5 | games: [], |
| 6 | challenges: [], |
| 7 | willPlay: [], //IDs of challenges in which I decide to play (>= 3 players) |
| 8 | newgameInfo: { |
| 9 | fen: "", |
| 10 | vid: 0, |
| 11 | nbPlayers: 0, |
| 12 | players: ["","",""], |
| 13 | mainTime: 0, |
| 14 | increment: 0, |
| 15 | }, |
| 16 | }; |
| 17 | }, |
| 18 | template: ` |
| 19 | <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> |
| 20 | <input id="modalNewgame" type="checkbox" class="modal"/> |
| 21 | <div role="dialog" aria-labelledby="titleFenedit"> |
| 22 | <div class="card smallpad"> |
| 23 | <label id="closeNewgame" for="modalNewgame" class="modal-close"> |
| 24 | </label> |
| 25 | <fieldset> |
| 26 | <label for="selectVariant">{{ translate("Variant") }}</label> |
| 27 | <select id="selectVariant" v-model="newgameInfo.vid"> |
| 28 | <option v-for="v in variants" :value="v.id">{{ v.name }}</option> |
| 29 | </select> |
| 30 | </fieldset> |
| 31 | <fieldset> |
| 32 | <label for="selectNbPlayers">{{ translate("Number of players") }}</label> |
| 33 | <select id="selectNbPlayers" v-model="newgameInfo.nbPlayers"> |
| 34 | <option v-show="possibleNbplayers(2)" value="2">2</option> |
| 35 | <option v-show="possibleNbplayers(3)" value="3">3</option> |
| 36 | <option v-show="possibleNbplayers(4)" value="4">4</option> |
| 37 | </select> |
| 38 | </fieldset> |
| 39 | <fieldset> |
| 40 | <label for="timeControl">Time control (in days)</label> |
| 41 | <div id="timeControl"> |
| 42 | <input type="number" v-model="newgameInfo.mainTime" placeholder="Main time"/> |
| 43 | <input type="number" v-model="newgameInfo.increment" placeholder="Increment"/> |
| 44 | </div> |
| 45 | </fieldset> |
| 46 | <fieldset> |
| 47 | <label for="selectPlayers">{{ translate("Play with?") }}</label> |
| 48 | <div id="selectPlayers"> |
| 49 | <input type="text" v-model="newgameInfo.players[0]"/> |
| 50 | <input v-show="newgameInfo.nbPlayers>=3" type="text" |
| 51 | v-model="newgameInfo.players[1]"/> |
| 52 | <input v-show="newgameInfo.nbPlayers==4" type="text" |
| 53 | v-model="newgameInfo.players[2]"/> |
| 54 | </div> |
| 55 | </fieldset> |
| 56 | <fieldset> |
| 57 | <label for="inputFen">{{ translate("FEN (ignored if players fields are blank)") }}</label> |
| 58 | <input id="inputFen" type="text" v-model="newgameInfo.fen"/> |
| 59 | </fieldset> |
| 60 | <button @click="newGame">Launch game</button> |
| 61 | </div> |
| 62 | </div> |
| 63 | <p v-if="!userId">Correspondance play is reserved to registered users</p> |
| 64 | <div v-if="!!userId"> |
| 65 | <my-challenge-list :challenges="challenges" @click-challenge="clickChallenge"> |
| 66 | </my-challenge-list> |
| 67 | <button onClick="doClick('modalNewgame')">New game</button> |
| 68 | <my-game-list :games="games" @show-game="showGame"> |
| 69 | </my-game-list> |
| 70 | </div> |
| 71 | </div> |
| 72 | `, |
| 73 | computed: { |
| 74 | // TODO: this is very artificial... |
| 75 | variants: function() { |
| 76 | return variantArray; |
| 77 | }, |
| 78 | }, |
| 79 | created: function() { |
| 80 | // use user.id to load challenges + games from server |
| 81 | }, |
| 82 | methods: { |
| 83 | translate: translate, |
| 84 | clickChallenge: function() { |
| 85 | // TODO: accepter un challenge peut lancer une partie, il |
| 86 | // faut alors supprimer challenge + creer partie + la retourner et l'ajouter ici |
| 87 | // autres actions: |
| 88 | // supprime mon défi |
| 89 | // accepte un défi |
| 90 | // annule l'acceptation d'un défi (si >= 3 joueurs) |
| 91 | // |
| 92 | // si pas le mien et FEN speciale :: (charger code variante et) |
| 93 | // montrer diagramme + couleur (orienté) |
| 94 | }, |
| 95 | showGame: function(g) { |
| 96 | // Redirect to /variant#game?id=... |
| 97 | location.href="/variant#game?id=" + g.id; |
| 98 | }, |
| 99 | newGame: function() { |
| 100 | // NOTE: side-effect = set FEN |
| 101 | // TODO: (to avoid any cheating option) separate the GenRandInitFen() functions |
| 102 | // in separate files, load on server and generate FEN on server. |
| 103 | const error = checkChallenge(this.newgameInfo); |
| 104 | if (!!error) |
| 105 | return alert(error); |
| 106 | // Possible (server) error if filled player does not exist |
| 107 | ajax( |
| 108 | "/challenges/" + this.newgameInfo.vid, |
| 109 | "POST", |
| 110 | this.newgameInfo, |
| 111 | response => { |
| 112 | this.challenges.push(response.challenge); |
| 113 | } |
| 114 | ); |
| 115 | }, |
| 116 | possibleNbplayers: function(nbp) { |
| 117 | if (this.newgameInfo.vid == 0) |
| 118 | return false; |
| 119 | const idxInVariants = variantArray.findIndex(v => v.id == this.newgameInfo.vid); |
| 120 | return NbPlayers[variantArray[idxInVariants].name].includes(nbp); |
| 121 | }, |
| 122 | }, |
| 123 | }); |