.row
.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
.collapse
- input#challengeSection(type="radio" checked aria-hidden="true" name="accordion")
- label(for="challengeSection" aria-hidden="true") Challenges
div
.button-group
- button(@click="cdisplay='live'") Live Challenges
- button(@click="cdisplay='corr'") Correspondance challenges
+ button(@click="(e) => setDisplay('c','live',e)" class="active")
+ | Live Challenges
+ button(@click="(e) => setDisplay('c','corr',e)")
+ | Correspondance challenges
ChallengeList(v-show="cdisplay=='live'"
:challenges="filterChallenges('live')" @click-challenge="clickChallenge")
ChallengeList(v-show="cdisplay=='corr'"
:challenges="filterChallenges('corr')" @click-challenge="clickChallenge")
- input#peopleSection(type="radio" aria-hidden="true" name="accordion")
- label(for="peopleSection" aria-hidden="true") People
div
.button-group
- button(@click="pdisplay='players'") Players
- button(@click="pdisplay='chat'") Chat
+ button(@click="(e) => setDisplay('p','players',e)" class="active")
+ | Players
+ button(@click="(e) => setDisplay('p','chat',e)")
+ | Chat
#players(v-show="pdisplay=='players'")
- p.text-center(v-for="p in uniquePlayers")
+ p(v-for="p in uniquePlayers")
span(:class="{anonymous: !!p.count}")
| {{ (p.name || '@nonymous') + (!!p.count ? " ("+p.count+")" : "") }}
- button.player-action(v-if="!p.count" @click="challOrWatch(p,$event)")
+ button.player-action(v-if="!p.count && p.name != st.user.name"
+ @click="challOrWatch(p,$event)")
| {{ whatPlayerDoes(p) }}
#chat(v-show="pdisplay=='chat'")
Chat(:players="[]")
- input#gameSection(type="radio" aria-hidden="true" name="accordion")
- label(for="gameSection" aria-hidden="true") Games
div
.button-group
- button(@click="gdisplay='live'") Live games
- button(@click="gdisplay='corr'") Correspondance games
+ button(@click="(e) => setDisplay('g','live',e)" class="active")
+ | Live games
+ button(@click="(e) => setDisplay('g','corr',e)")
+ | Correspondance games
GameList(v-show="gdisplay=='live'" :games="filterGames('live')"
@show-game="showGame")
GameList(v-show="gdisplay=='corr'" :games="filterGames('corr')"
url += "?rid=" + g.rid;
this.$router.push(url);
},
+ setDisplay: function(letter, type, e) {
+ this[letter + "display"] = type;
+ e.target.classList.add("active");
+ if (!!e.target.previousElementSibling)
+ e.target.previousElementSibling.classList.remove("active");
+ else
+ e.target.nextElementSibling.classList.remove("active");
+ },
getVname: function(vid) {
const variant = this.st.variants.find(v => v.id == vid);
// this.st.variants might be uninitialized (variant == null)
return (!!variant ? variant.name : "");
},
whatPlayerDoes: function(p) {
- if (this.games.some(g => g.players.some(pl => pl.sid == p.sid)))
+ if (this.games.some(g => g.type == "live"
+ && g.players.some(pl => pl.sid == p.sid)))
+ {
return "Playing";
+ }
return "Challenge"; //player is available
},
sendSomethingTo: function(to, code, obj, warnDisconnected) {
{
// Receive game from some player (+sid)
// NOTE: it may be correspondance (if newgame while we are connected)
- if (!this.games.some(g => g.id == data.game.id)) //ignore duplicates
+ if (this.games.every(g => g.id != data.game.id)) //ignore duplicates
{
let newGame = data.game;
newGame.type = this.classifyObject(data.game);
case "Playing":
// NOTE: this search for game was already done for rendering
this.showGame(this.games.find(
- g => g.players.some(pl => pl.sid == p.sid)));
+ g => g.type=="live" && g.players.some(pl => pl.sid == p.sid)));
break;
};
},
};
</script>
-<style lang="sass">
+<style lang="sass" scoped>
+.active
+ color: #42a983
#newGame
display: block
margin: 10px auto 5px auto
max-width: 100%
margin: 0;
border: none;
+#players > p
+ margin-left: 40%
+@media screen and (max-width: 767px)
+ #players > p
+ margin-left: 5px
.anonymous
font-style: italic
button.player-action
- margin-left: 20px
+ margin-left: 32px
</style>