| 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: [{id:0,name:""},{id:0,name:""},{id:0,name:""}], |
| 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"> |
| 29 | {{ v.name }} |
| 30 | </option> |
| 31 | </select> |
| 32 | </fieldset> |
| 33 | <fieldset> |
| 34 | <label for="selectNbPlayers"> |
| 35 | {{ translate("Number of players") }} |
| 36 | </label> |
| 37 | <select id="selectNbPlayers" v-model="newgameInfo.nbPlayers"> |
| 38 | <option v-show="possibleNbplayers(2)" value="2">2</option> |
| 39 | <option v-show="possibleNbplayers(3)" value="3">3</option> |
| 40 | <option v-show="possibleNbplayers(4)" value="4">4</option> |
| 41 | </select> |
| 42 | </fieldset> |
| 43 | <fieldset> |
| 44 | <label for="timeControl">Time control (in days)</label> |
| 45 | <div id="timeControl"> |
| 46 | <input type="number" v-model="newgameInfo.mainTime" |
| 47 | placeholder="Main time"/> |
| 48 | <input type="number" v-model="newgameInfo.increment" |
| 49 | placeholder="Increment"/> |
| 50 | </div> |
| 51 | </fieldset> |
| 52 | <fieldset> |
| 53 | <label for="selectPlayers">{{ translate("Play with?") }}</label> |
| 54 | <div id="selectPlayers"> |
| 55 | <input type="text" v-model="newgameInfo.players[0].name"/> |
| 56 | <input v-show="newgameInfo.nbPlayers>=3" type="text" |
| 57 | v-model="newgameInfo.players[1].name"/> |
| 58 | <input v-show="newgameInfo.nbPlayers==4" type="text" |
| 59 | v-model="newgameInfo.players[2].name"/> |
| 60 | </div> |
| 61 | </fieldset> |
| 62 | <fieldset> |
| 63 | <label for="inputFen"> |
| 64 | {{ translate("FEN (ignored if players fields are blank)") }} |
| 65 | </label> |
| 66 | <input id="inputFen" type="text" v-model="newgameInfo.fen"/> |
| 67 | </fieldset> |
| 68 | <button @click="newGame">Launch game</button> |
| 69 | </div> |
| 70 | </div> |
| 71 | <p v-if="!userId"> |
| 72 | Correspondance play is reserved to registered users |
| 73 | </p> |
| 74 | <div v-if="!!userId"> |
| 75 | <my-challenge-list :challenges="challenges" |
| 76 | @click-challenge="clickChallenge"> |
| 77 | </my-challenge-list> |
| 78 | <button onClick="doClick('modalNewgame')">New game</button> |
| 79 | <my-game-list :games="games" @show-game="showGame"> |
| 80 | </my-game-list> |
| 81 | </div> |
| 82 | </div> |
| 83 | `, |
| 84 | computed: { |
| 85 | // TODO: this is very artificial... |
| 86 | variants: function() { |
| 87 | return variantArray; |
| 88 | }, |
| 89 | }, |
| 90 | created: function() { |
| 91 | // use user.id to load challenges + games from server |
| 92 | }, |
| 93 | methods: { |
| 94 | translate: translate, |
| 95 | clickChallenge: function() { |
| 96 | // TODO: accepter un challenge peut lancer une partie, il |
| 97 | // faut alors supprimer challenge + creer partie + la retourner et l'ajouter ici |
| 98 | // autres actions: |
| 99 | // supprime mon défi |
| 100 | // accepte un défi |
| 101 | // annule l'acceptation d'un défi (si >= 3 joueurs) |
| 102 | // |
| 103 | // si pas le mien et FEN speciale :: (charger code variante et) |
| 104 | // montrer diagramme + couleur (orienté) |
| 105 | }, |
| 106 | showGame: function(g) { |
| 107 | // Redirect to /variant#game?id=... |
| 108 | location.href="/variant#game?id=" + g.id; |
| 109 | }, |
| 110 | newGame: function() { |
| 111 | const afterRulesAreLoaded = () => { |
| 112 | // NOTE: side-effect = set FEN |
| 113 | // TODO: (to avoid any cheating option) separate the GenRandInitFen() functions |
| 114 | // in separate files, load on server and generate FEN on server. |
| 115 | const error = checkChallenge(this.newgameInfo, vname); |
| 116 | if (!!error) |
| 117 | return alert(error); |
| 118 | // Possible (server) error if filled player does not exist |
| 119 | ajax( |
| 120 | "/challenges/" + this.newgameInfo.vid, |
| 121 | "POST", |
| 122 | this.newgameInfo, |
| 123 | response => { |
| 124 | const chall = Object.assign({}, |
| 125 | this.newgameInfo, |
| 126 | { |
| 127 | id: response.cid, |
| 128 | uid: user.id, |
| 129 | added: Date.now(), |
| 130 | vname: vname, |
| 131 | }, |
| 132 | this.challenges.push(response.challengei); |
| 133 | } |
| 134 | ); |
| 135 | }; |
| 136 | const idxInVariants = |
| 137 | variantArray.findIndex(v => v.id == this.newgameInfo.vid); |
| 138 | const vname = variantArray[idxInVariants].name; |
| 139 | const scriptId = vname + "RulesScript"; |
| 140 | if (!document.getElementById(scriptId)) |
| 141 | { |
| 142 | // Load variant rules (only once) |
| 143 | var script = document.createElement("script"); |
| 144 | script.id = scriptId; |
| 145 | script.onload = afterRulesAreLoaded; |
| 146 | //script.addEventListener ("load", afterRulesAreLoaded, false); |
| 147 | script.src = "/javascripts/variants/" + vname + ".js"; |
| 148 | document.body.appendChild(script); |
| 149 | } |
| 150 | else |
| 151 | afterRulesAreLoaded(); |
| 152 | }, |
| 153 | possibleNbplayers: function(nbp) { |
| 154 | if (this.newgameInfo.vid == 0) |
| 155 | return false; |
| 156 | const idxInVariants = |
| 157 | variantArray.findIndex(v => v.id == this.newgameInfo.vid); |
| 158 | return NbPlayers[variantArray[idxInVariants].name].includes(nbp); |
| 159 | }, |
| 160 | }, |
| 161 | }); |