townsquare/src/App.vue

259 lines
6.1 KiB
Vue
Raw Normal View History

2020-04-01 20:57:14 +00:00
<template>
2020-04-09 20:14:48 +00:00
<div id="app" @keyup="keyup" tabindex="-1">
2020-04-10 09:37:06 +00:00
<TownInfo :players="players" :edition="edition"></TownInfo>
2020-04-05 19:50:06 +00:00
<TownSquare
:is-public="isPublic"
:players="players"
:roles="roles"
></TownSquare>
<Modal v-show="showEditionModal" @close="showEditionModal = false">
<h2>Select an edition:</h2>
<ul class="editions">
<li
v-for="edition in editions"
class="edition"
v-bind:class="['edition-' + edition.id]"
v-bind:key="edition.id"
@click="setEdition(edition.id)"
>
{{ edition.name }}
</li>
</ul>
</Modal>
2020-04-01 20:57:14 +00:00
<div class="controls">
2020-04-09 20:15:05 +00:00
<font-awesome-icon icon="cogs" @click="isControlOpen = !isControlOpen" />
<ul v-if="isControlOpen">
2020-04-10 08:59:32 +00:00
<li @click="togglePublic">Toggle <em>G</em>rimoire</li>
<li @click="addPlayer" v-if="players.length < 20">
2020-04-09 20:14:48 +00:00
<em>A</em>dd Player
</li>
2020-04-10 08:59:32 +00:00
<li @click="randomizeSeatings" v-if="players.length > 2">
2020-04-09 20:14:48 +00:00
<em>R</em>andomize Seatings
</li>
2020-04-10 08:59:32 +00:00
<li @click="clearPlayers" v-if="players.length">
Clear Players
</li>
<li @click="showEditionModal = true" v-if="players.length > 4">
Select Edition
</li>
</ul>
2020-04-01 20:57:14 +00:00
</div>
</div>
</template>
<script>
import TownSquare from "./components/TownSquare";
import TownInfo from "./components/TownInfo";
import Modal from "./components/Modal";
2020-04-05 19:50:06 +00:00
import rolesJSON from "./roles";
import editions from "./editions";
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
export default {
components: {
TownSquare,
TownInfo,
Modal
},
data: function() {
return {
editions,
isPublic: true,
isControlOpen: false,
players: [],
roles: this.getRolesByEdition(),
edition: "tb",
showEditionModal: false
};
2020-04-05 19:50:06 +00:00
},
2020-04-05 17:50:33 +00:00
methods: {
togglePublic() {
this.isPublic = !this.isPublic;
this.isControlOpen = false;
2020-04-05 19:50:06 +00:00
},
addPlayer() {
const name = prompt("Player name");
if (name) {
this.players.push({
name,
role: {},
reminders: []
});
}
},
randomizeSeatings() {
if (confirm("Are you sure you want to randomize seatings?")) {
this.players = this.players
.map(a => [Math.random(), a])
.sort((a, b) => a[0] - b[0])
.map(a => a[1]);
}
2020-04-09 20:14:48 +00:00
},
2020-04-10 08:59:32 +00:00
clearPlayers() {
this.players = [];
},
2020-04-09 20:14:48 +00:00
keyup({ key }) {
switch (key) {
case "g":
this.togglePublic();
break;
case "a":
this.addPlayer();
break;
case "r":
this.randomizeSeatings();
break;
}
},
getRolesByEdition(edition = "tb") {
const selectedEdition = editions.find(({ id }) => id === edition);
return new Map(
rolesJSON
.filter(
r => r.edition === edition || selectedEdition.roles.includes(r.id)
)
.sort((a, b) => b.team.localeCompare(a.team))
.map(role => [role.id, role])
);
},
setEdition(edition) {
this.edition = edition;
this.showEditionModal = false;
2020-04-09 20:14:48 +00:00
}
},
mounted() {
if (localStorage.isPublic !== undefined) {
this.isPublic = JSON.parse(localStorage.isPublic);
}
2020-04-10 09:37:06 +00:00
if (localStorage.edition) {
this.edition = localStorage.edition;
this.roles = this.getRolesByEdition(this.edition);
2020-04-10 09:37:06 +00:00
}
2020-04-09 20:14:48 +00:00
if (localStorage.players) {
2020-04-10 08:59:32 +00:00
this.players = JSON.parse(localStorage.players).map(player => ({
...player,
2020-04-10 09:37:06 +00:00
role: this.roles.get(player.role) || {}
2020-04-10 08:59:32 +00:00
}));
}
2020-04-09 20:14:48 +00:00
},
watch: {
players: {
handler(newPlayers) {
2020-04-10 08:59:32 +00:00
localStorage.players = JSON.stringify(
newPlayers.map(player => ({
...player,
role: player.role.id || {}
}))
);
2020-04-09 20:14:48 +00:00
},
deep: true
2020-04-10 08:59:32 +00:00
},
2020-04-10 09:37:06 +00:00
edition(newEdition) {
localStorage.edition = newEdition;
this.roles = this.getRolesByEdition(newEdition);
},
isPublic(newIsPublic) {
localStorage.isPublic = JSON.stringify(newIsPublic);
2020-04-01 20:57:14 +00:00
}
}
2020-04-05 17:50:33 +00:00
};
2020-04-01 20:57:14 +00:00
</script>
<style lang="scss">
@import "vars";
2020-04-05 17:50:33 +00:00
@font-face {
font-family: "Papyrus";
src: url("assets/fonts/papyrus.eot"); /* IE9*/
src: url("assets/fonts/papyrus.eot?#iefix") format("embedded-opentype"),
/* IE6-IE8 */ url("assets/fonts/papyrus.woff2") format("woff2"),
/* chrome firefox */ url("assets/fonts/papyrus.woff") format("woff"),
/* chrome firefox */ url("assets/fonts/papyrus.ttf") format("truetype"),
/* chrome firefox opera Safari, Android, iOS 4.2+*/
url("assets/fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
}
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
html,
body {
font-size: 1.2em;
line-height: 1.4;
background: url("assets/background.jpg") center center;
background-size: cover;
color: white;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0;
margin: 0;
2020-04-09 20:14:48 +00:00
overflow: hidden;
2020-04-05 17:50:33 +00:00
}
2020-04-01 20:57:14 +00:00
2020-04-05 19:50:06 +00:00
* {
box-sizing: border-box;
position: relative;
}
2020-04-05 17:50:33 +00:00
#app {
height: 100%;
}
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
// Controls
.controls {
position: absolute;
right: 0;
top: 0;
text-align: right;
padding: 10px;
svg {
cursor: pointer;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px black;
li {
padding: 5px 10px;
color: white;
text-align: center;
background: rgba(0, 0, 0, 0.7);
margin-bottom: 1px;
cursor: pointer;
&:hover {
background-color: red;
}
2020-04-09 20:14:48 +00:00
em {
text-decoration: underline;
font-style: normal;
font-weight: bold;
}
2020-04-05 19:50:06 +00:00
}
}
}
// Editions
@each $img in $editions {
.edition-#{$img} {
background-image: url("./assets/edition-#{$img}.png");
}
}
ul.editions .edition {
text-align: center;
padding-top: 100px;
background-position: center center;
background-size: cover;
width: 200px;
margin: 5px;
font-size: 120%;
font-weight: bold;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
1px 1px 0 #000, 0 0 5px rgba(0, 0, 0, 0.75);
cursor: pointer;
}
2020-04-01 20:57:14 +00:00
</style>