townsquare/src/App.vue

384 lines
8.9 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"
2020-04-15 15:30:26 +00:00
:zoom="zoom"
2020-04-05 19:50:06 +00:00
></TownSquare>
2020-04-11 20:55:37 +00:00
<Modal
class="editions"
v-show="isEditionModalOpen"
@close="isEditionModalOpen = false"
>
2020-04-18 19:03:58 +00:00
<h3>Select an edition:</h3>
<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-11 20:55:37 +00:00
<RoleSelectionModal
:players="players"
:roles="roles"
:is-open="isRoleModalOpen"
@close="isRoleModalOpen = false"
></RoleSelectionModal>
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>
2020-04-15 15:30:26 +00:00
<li>
Size
<font-awesome-icon @click="zoom -= 0.1" icon="search-minus" />
{{ Math.round(zoom * 100) }}%
<font-awesome-icon @click="zoom += 0.1" icon="search-plus" />
</li>
2020-04-10 08:59:32 +00:00
<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>
2020-04-11 20:55:37 +00:00
<li @click="clearRoles" v-if="players.length">
Clear Roles
</li>
2020-04-11 21:02:04 +00:00
<li @click="showEditionModal" v-if="players.length > 4">
Select Edition
</li>
2020-04-11 21:02:04 +00:00
<li @click="showRoleModal" v-if="players.length > 4">
2020-04-11 20:55:37 +00:00
Select Roles
</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-11 20:55:37 +00:00
import RoleSelectionModal from "./components/RoleSelectionModal";
2020-04-05 19:50:06 +00:00
import rolesJSON from "./roles";
2020-04-11 20:55:37 +00:00
import editionJSON from "./editions";
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
export default {
components: {
TownSquare,
TownInfo,
2020-04-11 20:55:37 +00:00
Modal,
RoleSelectionModal
},
data: function() {
return {
2020-04-11 20:55:37 +00:00
editions: editionJSON,
isPublic: true,
isControlOpen: false,
2020-04-11 20:55:37 +00:00
isEditionModalOpen: false,
isRoleModalOpen: false,
players: [],
roles: this.getRolesByEdition(),
2020-04-15 15:30:26 +00:00
edition: "tb",
zoom: 1
};
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() {
2020-04-11 21:02:04 +00:00
this.isPublic = false;
this.isControlOpen = false;
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() {
2020-04-11 21:02:04 +00:00
this.isControlOpen = false;
2020-04-11 20:55:37 +00:00
if (confirm("Are you sure you want to remove all players?")) {
this.players = [];
}
2020-04-10 08:59:32 +00:00
},
2020-04-11 20:55:37 +00:00
clearRoles() {
2020-04-11 21:02:04 +00:00
this.isControlOpen = false;
2020-04-11 20:55:37 +00:00
if (confirm("Are you sure you want to remove all player roles?")) {
this.players.forEach(player => {
player.role = {};
player.reminders = [];
});
2020-04-09 20:14:48 +00:00
}
},
getRolesByEdition(edition = "tb") {
2020-04-11 20:55:37 +00:00
const selectedEdition = editionJSON.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])
);
},
2020-04-11 21:02:04 +00:00
showEditionModal() {
this.isEditionModalOpen = true;
this.isPublic = false;
this.isControlOpen = false;
},
setEdition(edition) {
this.edition = edition;
2020-04-11 20:55:37 +00:00
this.isEditionModalOpen = false;
},
2020-04-11 21:02:04 +00:00
showRoleModal() {
this.isRoleModalOpen = true;
this.isPublic = false;
this.isControlOpen = false;
},
2020-04-11 20:55:37 +00:00
keyup({ key }) {
switch (key) {
case "g":
this.togglePublic();
break;
case "a":
this.addPlayer();
break;
case "r":
this.randomizeSeatings();
break;
}
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-18 19:03:58 +00:00
h1, h2, h3, h4, h5 {
margin: 0;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
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: 100% auto;
background-repeat: no-repeat;
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-18 19:14:06 +00:00
&:hover {
color: red;
}
}
// Buttons
.button-group {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
.button {
margin: 5px 0;
border-radius: 0;
&:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
&:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
}
.button {
padding: 0;
border: solid 0.125em transparent;
border-radius: 15px;
box-shadow: inset 0 1px 1px #9c9c9c, 0 0 10px #000;
background: radial-gradient(
at 0 -15%,
rgba(#fff, 0.07) 70%,
rgba(#fff, 0) 71%
)
0 0/ 80% 90% no-repeat content-box,
linear-gradient(#4e4e4e, #040404) content-box,
linear-gradient(#292929, #010101) border-box;
color: white;
font-weight: bold;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
line-height: 40px;
margin: 5px auto;
font-size: 1em;
cursor: pointer;
transition: all 200ms;
&:hover {
color: red;
}
&.disabled {
color: gray;
cursor: default;
}
&:before,
&:after {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
}
}
2020-04-01 20:57:14 +00:00
</style>