| 1 | <template lang="pug"> |
| 2 | main |
| 3 | .row |
| 4 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
| 5 | .button-group |
| 6 | button(@click="display='live'") Live games |
| 7 | button(@click="display='corr'") Correspondance games |
| 8 | GameList(v-show="display=='live'" :games="filterGames('live')" |
| 9 | @show-game="showGame") |
| 10 | GameList(v-show="display=='corr'" :games="filterGames('corr')" |
| 11 | @show-game="showGame") |
| 12 | </template> |
| 13 | |
| 14 | <script> |
| 15 | // TODO: background orange si à moi de jouer |
| 16 | // (helper: static fonction "GetNextCol()" dans base_rules.js) |
| 17 | // use GameStorage.getAll() |
| 18 | |
| 19 | import { store } from "@/store"; |
| 20 | import { GameStorage } from "@/utils/gameStorage"; |
| 21 | import { ajax } from "@/utils/ajax"; |
| 22 | import GameList from "@/components/GameList.vue"; |
| 23 | export default { |
| 24 | name: "my-games", |
| 25 | components: { |
| 26 | GameList, |
| 27 | }, |
| 28 | data: function() { |
| 29 | return { |
| 30 | st: store.state, |
| 31 | display: "live", |
| 32 | games: [], |
| 33 | }; |
| 34 | }, |
| 35 | created: function() { |
| 36 | GameStorage.getAll((localGames) => { |
| 37 | localGames.forEach((g) => g.type = this.classifyObject(g)); |
| 38 | Array.prototype.push.apply(this.games, localGames); |
| 39 | }); |
| 40 | if (this.st.user.id > 0) |
| 41 | { |
| 42 | ajax("/games", "GET", {uid: this.st.user.id}, (res) => { |
| 43 | res.games.forEach((g) => g.type = this.classifyObject(g)); |
| 44 | //Array.prototype.push.apply(this.games, res.games); //TODO: Vue 3 |
| 45 | this.games = this.games.concat(res.games); |
| 46 | }); |
| 47 | } |
| 48 | }, |
| 49 | methods: { |
| 50 | // TODO: classifyObject and filterGames are redundant (see Hall.vue) |
| 51 | classifyObject: function(o) { |
| 52 | return (o.timeControl.indexOf('d') === -1 ? "live" : "corr"); |
| 53 | }, |
| 54 | filterGames: function(type) { |
| 55 | return this.games.filter(g => g.type == type); |
| 56 | }, |
| 57 | showGame: function(g) { |
| 58 | // NOTE: we play in this game, since this is "MyGames" page |
| 59 | this.$router.push("/game/" + g.id); |
| 60 | }, |
| 61 | }, |
| 62 | }; |
| 63 | </script> |
| 64 | |
| 65 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 66 | <style scoped lang="sass"> |
| 67 | /* TODO */ |
| 68 | </style> |