Commit | Line | Data |
---|---|---|
ccd4a2b7 | 1 | <template lang="pug"> |
9d58ef95 | 2 | main |
5b020e73 BA |
3 | input#modalNewgame.modal(type="checkbox") |
4 | div(role="dialog" aria-labelledby="titleFenedit") | |
5 | .card.smallpad | |
6 | label#closeNewgame.modal-close(for="modalNewgame") | |
7 | fieldset | |
8 | label(for="selectVariant") {{ st.tr["Variant"] }} | |
9d58ef95 | 9 | select#selectVariant(v-model="newchallenge.vid") |
85e5b5c1 | 10 | option(v-for="v in st.variants" :value="v.id") {{ v.name }} |
5b020e73 BA |
11 | fieldset |
12 | label(for="selectNbPlayers") {{ st.tr["Number of players"] }} | |
9d58ef95 | 13 | select#selectNbPlayers(v-model="newchallenge.nbPlayers") |
5b020e73 BA |
14 | option(v-show="possibleNbplayers(2)" value="2") 2 |
15 | option(v-show="possibleNbplayers(3)" value="3") 3 | |
16 | option(v-show="possibleNbplayers(4)" value="4") 4 | |
17 | fieldset | |
9d58ef95 BA |
18 | label(for="timeControl") Time control (e.g. 3m, 1h+30s, 7d+1d) |
19 | input#timeControl(type="text" v-model="newchallenge.timeControl" | |
20 | placeholder="Time control") | |
5b020e73 | 21 | fieldset |
9d58ef95 | 22 | label(for="selectPlayers") {{ st.tr["Play with? (optional)"] }} |
5b020e73 | 23 | #selectPlayers |
9d58ef95 BA |
24 | input(type="text" v-model="newchallenge.players[0].name") |
25 | input(v-show="newchallenge.nbPlayers>=3" type="text" | |
26 | v-model="newchallenge.players[1].name") | |
27 | input(v-show="newchallenge.nbPlayers==4" type="text" | |
28 | v-model="newchallenge.players[2].name") | |
5b020e73 | 29 | fieldset |
9d58ef95 BA |
30 | label(for="inputFen") {{ st.tr["FEN (optional)"] }} |
31 | input#inputFen(type="text" v-model="newchallenge.fen") | |
32 | button(@click="newChallenge") Send challenge | |
33 | .row | |
34 | .col-sm-12.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-2 | |
35 | ChallengeList(:challenges="challenges" @click-challenge="clickChallenge") | |
36 | .col-sm-12.col-md-5.col-lg-4 | |
37 | #players | |
38 | h3 Online players | |
39 | div(v-for="p in players" @click="challenge(p)") {{ p.name }} | |
40 | .row | |
41 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
42 | button(onClick="doClick('modalNewgame')") New game | |
43 | .row | |
44 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
45 | .button-group | |
46 | button(@click="gdisplay='live'") Live games | |
47 | button(@click="gdisplay='corr'") Correspondance games | |
48 | GameList(v-show="gdisplay=='live'" :games="liveGames" | |
49 | @show-game="showGame") | |
50 | GameList(v-show="gdisplay=='corr'" :games="corrGames" | |
51 | @show-game="showGame") | |
625022fd BA |
52 | </template> |
53 | ||
54 | <script> | |
9d58ef95 | 55 | // TODO: blank time control == untimed |
5b020e73 BA |
56 | // main playing hall: online players + current challenges + button "new game" |
57 | // TODO: si on est en train de jouer une partie, le notifier aux nouveaux connectés | |
58 | /* | |
59 | TODO: surligner si nouveau défi perso et pas affichage courant | |
60 | (cadences base + incrément, corr == incr >= 1jour ou base >= 7j) | |
61 | --> correspondance: stocker sur serveur lastMove + uid + color + movesCount + gameId + variant + timeleft | |
62 | fin de partie corr: supprimer partie du serveur au bout de 7 jours (arbitraire) | |
63 | */ | |
64 | // TODO: au moins l'échange des coups en P2P ? et game chat ? | |
65 | // TODO: objet game, objet challenge ? et player ? | |
9d58ef95 BA |
66 | /* |
67 | * Possible events: | |
68 | * - send new challenge (corr or live, cf. time control), with button or click on player | |
69 | * - accept challenge (corr or live) --> send info to all concerned players | |
70 | * - cancel challenge (click on sent challenge) --> send info to all concerned players | |
71 | * - withdraw from challenge (if >= 3 players and previously accepted) | |
72 | * --> send info to all concerned players | |
73 | * - prepare and start new game (if challenge is full after acceptation) | |
74 | * Also send to all connected players (only from me) | |
75 | * - receive "player connect": send all our current challenges (to him or global) | |
76 | * Also send all our games (live - max 1 - and corr) [in web worker ?] | |
77 | * + all our sent challenges. | |
78 | * - receive "playergames": list of games by some connected player (NO corr) | |
79 | * - receive "playerchallenges": list of challenges (sent) by some online player (NO corr) | |
80 | * - receive "player disconnect": remove from players list | |
81 | * - receive "accept/withdraw/cancel challenge": apply action to challenges list | |
82 | * - receive "new game": if live, store locally + redirect to game | |
83 | * If corr: notify "new game has started", give link, but do not redirect | |
84 | */ | |
5b020e73 | 85 | import { store } from "@/store"; |
85e5b5c1 | 86 | import { NbPlayers } from "@/data/nbPlayers"; |
9d58ef95 BA |
87 | import { checkChallenge } from "@/data/challengeCheck"; |
88 | import { ArrayFun } from "@/utils/array"; | |
5b020e73 BA |
89 | import GameList from "@/components/GameList.vue"; |
90 | import ChallengeList from "@/components/ChallengeList.vue"; | |
625022fd | 91 | export default { |
cf2343ce | 92 | name: "my-hall", |
5b020e73 BA |
93 | components: { |
94 | GameList, | |
95 | ChallengeList, | |
96 | }, | |
fb54f098 BA |
97 | data: function () { |
98 | return { | |
5b020e73 | 99 | st: store.state, |
fb54f098 BA |
100 | gdisplay: "live", |
101 | liveGames: [], | |
102 | corrGames: [], | |
103 | players: [], //online players | |
104 | challenges: [], //live challenges | |
105 | willPlay: [], //IDs of challenges in which I decide to play (>= 3 players) | |
9d58ef95 | 106 | newchallenge: { |
fb54f098 BA |
107 | fen: "", |
108 | vid: 0, | |
109 | nbPlayers: 0, | |
9d58ef95 | 110 | // TODO: distinguer uid et sid ! |
fb54f098 | 111 | players: [{id:0,name:""},{id:0,name:""},{id:0,name:""}], |
9d58ef95 | 112 | timeControl: "", |
fb54f098 BA |
113 | }, |
114 | }; | |
115 | }, | |
85e5b5c1 BA |
116 | watch: { |
117 | "st.conn": function() { | |
9d58ef95 BA |
118 | this.st.conn.onmessage = this.socketMessageListener; |
119 | this.st.conn.onclose = this.socketCloseListener; | |
85e5b5c1 BA |
120 | }, |
121 | }, | |
9d58ef95 BA |
122 | created: function() { |
123 | // TODO: ask server for current corr games (all but mines: names, ID, time control) | |
124 | if (!!this.st.conn) | |
125 | { | |
126 | this.st.conn.onmessage = this.socketMessageListener; | |
127 | this.st.conn.onclose = this.socketCloseListener; | |
128 | } | |
129 | }, | |
fb54f098 | 130 | methods: { |
9d58ef95 BA |
131 | socketMessageListener: function(msg) { |
132 | const data = JSON.parse(msg.data); | |
133 | switch (data.code) | |
134 | { | |
135 | case "newgame": | |
136 | // TODO: new game just started: data contain all informations | |
137 | // (id, players, time control, fenStart ...) | |
138 | break; | |
139 | // TODO: also receive live games summaries (update) | |
140 | // (just players names, time control, and ID + player ID) | |
141 | case "acceptchallenge": | |
142 | if (true) //TODO: if challenge is full | |
143 | this.newGame(data.challenge, data.user); //user.id et user.name | |
144 | break; | |
145 | case "withdrawchallenge": | |
146 | const cIdx = this.challenges.findIndex(c => c.id == data.cid); | |
147 | let chall = this.challenges[cIdx] | |
148 | ArrayFun.remove(chall.players, p => p.id == data.uid); | |
149 | chall.players.push({id:0, name:""}); | |
150 | break; | |
151 | case "cancelchallenge": | |
152 | ArrayFun.remove(this.challenges, c => c.id == data.cid); | |
153 | break; | |
154 | case "hallconnect": | |
155 | this.players.push({name:data.name, id:data.uid}); | |
156 | break; | |
157 | case "halldisconnect": | |
158 | ArrayFun.remove(this.players, p => p.id == data.uid); | |
159 | break; | |
160 | } | |
161 | }, | |
162 | socketCloseListener: function() { | |
163 | this.st.conn.addEventListener('message', socketMessageListener); | |
164 | this.st.conn.addEventListener('close', socketCloseListener); | |
165 | }, | |
166 | clickPlayer: function() { | |
167 | //this.newgameInfo.players[0].name = clickPlayer.name; | |
168 | //show modal; | |
169 | }, | |
fb54f098 | 170 | showGame: function(game) { |
5b020e73 BA |
171 | // NOTE: if we are an observer, the game will be found in main games list |
172 | // (sent by connected remote players) | |
173 | this.$router.push("/" + game.id) | |
fb54f098 BA |
174 | }, |
175 | challenge: function(player) { | |
fb54f098 BA |
176 | }, |
177 | clickChallenge: function(challenge) { | |
178 | const index = this.challenges.findIndex(c => c.id == challenge.id); | |
179 | const toIdx = challenge.to.findIndex(p => p.id == user.id); | |
180 | const me = {name:user.name,id:user.id}; | |
181 | if (toIdx >= 0) | |
182 | { | |
183 | // It's a multiplayer challenge I accepted: withdraw | |
184 | this.st.conn.send(JSON.stringify({code:"withdrawchallenge", | |
185 | cid:challenge.id, user:me})); | |
186 | this.challenges.to.splice(toIdx, 1); | |
187 | } | |
188 | else if (challenge.from.id == user.id) //it's my challenge: cancel it | |
189 | { | |
190 | this.st.conn.send(JSON.stringify({code:"cancelchallenge", cid:challenge.id})); | |
191 | this.challenges.splice(index, 1); | |
192 | } | |
193 | else //accept a challenge | |
194 | { | |
195 | this.st.conn.send(JSON.stringify({code:"acceptchallenge", | |
196 | cid:challenge.id, user:me})); | |
197 | this.challenges[index].to.push(me); | |
198 | } | |
199 | // TODO: accepter un challenge peut lancer une partie, il | |
200 | // faut alors supprimer challenge + creer partie + la retourner et l'ajouter ici | |
fb54f098 BA |
201 | // si pas le mien et FEN speciale :: (charger code variante et) |
202 | // montrer diagramme + couleur (orienté) | |
203 | }, | |
204 | // user: last person to accept the challenge | |
9d58ef95 | 205 | newGame: function(chall, user) { |
fb54f098 BA |
206 | const fen = chall.fen || V.GenRandInitFen(); |
207 | const game = {}; //TODO: fen, players, time ... | |
208 | //setStorage(game); //TODO | |
9d58ef95 | 209 | game.players.forEach(p => { //...even if game is by corr (could be played live, why not...) |
fb54f098 BA |
210 | this.conn.send( |
211 | JSON.stringify({code:"newgame", oppid:p.id, game:game})); | |
212 | }); | |
213 | if (this.settings.sound >= 1) | |
214 | new Audio("/sounds/newgame.mp3").play().catch(err => {}); | |
215 | }, | |
9d58ef95 BA |
216 | newChallenge: async function() { |
217 | const idxInVariants = | |
218 | this.st.variants.findIndex(v => v.id == this.newchallenge.vid); | |
219 | const vname = variants[idxInVariants].name; | |
220 | const vModule = await import("@/variants/" + vname + ".js"); | |
221 | window.V = vModule.VariantRules; | |
222 | // NOTE: side-effect = set FEN, and mainTime + increment in seconds | |
223 | // TODO: (to limit cheating options) separate the GenRandInitFen() functions | |
224 | // in separate files, load on server and generate FEN on server. | |
225 | const error = checkChallenge(this.newchallenge); | |
226 | if (!!error) | |
227 | return alert(error); | |
228 | // TODO: 40 = average number of moves ? | |
229 | if (this.newchallenge.mainTime + 40 * this.newchallenge.increment | |
230 | >= 3*24*60*60) //3 days (TODO: heuristic...) | |
231 | { | |
232 | // Correspondance game: | |
fb54f098 BA |
233 | // Possible (server) error if filled player does not exist |
234 | ajax( | |
9d58ef95 | 235 | "/challenges/" + this.newchallenge.vid, |
fb54f098 | 236 | "POST", |
9d58ef95 | 237 | this.newchallenge, |
fb54f098 BA |
238 | response => { |
239 | const chall = Object.assign({}, | |
9d58ef95 | 240 | this.newchallenge, |
fb54f098 BA |
241 | { |
242 | id: response.cid, | |
9d58ef95 | 243 | uid: this.st.user.id, |
fb54f098 BA |
244 | added: Date.now(), |
245 | vname: vname, | |
246 | }); | |
247 | this.challenges.push(chall); | |
9d58ef95 | 248 | document.getElementById("modalNewgame").checked = false; |
fb54f098 BA |
249 | } |
250 | ); | |
fb54f098 BA |
251 | } |
252 | else | |
9d58ef95 BA |
253 | { |
254 | // Considered live game | |
255 | if (this.newchallenges.players[0].id > 0) | |
256 | { | |
257 | // Challenge with target players | |
258 | this.newchallenges.players.forEach(p => { | |
259 | this.st.conn.send(JSON.stringify({ | |
260 | code: "sendchallenge", | |
261 | oppid: p.id, | |
262 | user: {name:this.st.user.name, id:this.st.user.id} | |
263 | })); | |
264 | }); | |
265 | } | |
266 | else | |
267 | { | |
268 | // Open challenge: send to all connected players | |
269 | // TODO | |
270 | } | |
271 | } | |
fb54f098 BA |
272 | }, |
273 | possibleNbplayers: function(nbp) { | |
9d58ef95 | 274 | if (this.newchallenge.vid == 0) |
fb54f098 | 275 | return false; |
85e5b5c1 | 276 | const variants = this.st.variants; |
fb54f098 | 277 | const idxInVariants = |
9d58ef95 | 278 | variants.findIndex(v => v.id == this.newchallenge.vid); |
fb54f098 BA |
279 | return NbPlayers[variants[idxInVariants].name].includes(nbp); |
280 | }, | |
281 | }, | |
85e5b5c1 | 282 | }; |
ccd4a2b7 | 283 | </script> |
85e5b5c1 BA |
284 | |
285 | <style lang="sass"> | |
286 | // TODO | |
287 | </style> |