townsquare/src/App.vue

241 lines
5.5 KiB
Vue
Raw Normal View History

2020-04-01 20:57:14 +00:00
<template>
2020-04-22 19:21:54 +00:00
<div
id="app"
@keyup="keyup"
tabindex="-1"
2020-05-02 19:11:20 +00:00
v-bind:class="{ screenshot: grimoire.isScreenshot }"
v-bind:style="{
backgroundImage: grimoire.background
? `url('${grimoire.background}')`
: ''
}"
2020-04-22 19:21:54 +00:00
>
2020-05-02 19:33:44 +00:00
<Intro v-if="!players.length"></Intro>
<TownInfo :players="players" v-if="players.length"></TownInfo>
<TownSquare :players="players" @screenshot="takeScreenshot"></TownSquare>
2020-05-02 19:11:20 +00:00
<Menu ref="menu" :players="players"></Menu>
<EditionSelectionModal :players="players"></EditionSelectionModal>
<RoleSelectionModal :players="players"></RoleSelectionModal>
2020-04-01 20:57:14 +00:00
</div>
</template>
<script>
2020-05-02 19:11:20 +00:00
import { mapState } from "vuex";
import TownSquare from "./components/TownSquare";
import TownInfo from "./components/TownInfo";
2020-05-02 19:11:20 +00:00
import Menu from "./components/Menu";
2020-04-11 20:55:37 +00:00
import RoleSelectionModal from "./components/RoleSelectionModal";
2020-05-02 19:11:20 +00:00
import EditionSelectionModal from "./components/EditionSelectionModal";
2020-05-02 19:33:44 +00:00
import Intro from "./components/Intro";
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
export default {
components: {
2020-05-02 19:33:44 +00:00
Intro,
2020-05-02 19:11:20 +00:00
EditionSelectionModal,
Menu,
TownSquare,
TownInfo,
2020-04-11 20:55:37 +00:00
RoleSelectionModal
},
2020-05-02 19:33:44 +00:00
computed: mapState(["grimoire"]),
data: function() {
return {
2020-05-02 19:11:20 +00:00
players: []
};
2020-04-05 19:50:06 +00:00
},
2020-04-05 17:50:33 +00:00
methods: {
2020-05-02 19:11:20 +00:00
takeScreenshot(dimensions) {
this.$refs.menu.takeScreenshot(dimensions);
2020-04-11 21:02:04 +00:00
},
2020-04-11 20:55:37 +00:00
keyup({ key }) {
switch (key) {
case "g":
2020-05-02 19:11:20 +00:00
this.$store.commit("toggleGrimoire");
2020-04-11 20:55:37 +00:00
break;
case "a":
2020-05-02 19:11:20 +00:00
this.$refs.menu.addPlayer();
2020-04-11 20:55:37 +00:00
break;
case "r":
2020-05-02 19:11:20 +00:00
this.$refs.menu.randomizeSeatings();
2020-04-11 20:55:37 +00:00
break;
case "e":
2020-05-02 19:11:20 +00:00
this.$store.commit("toggleModal", "edition");
break;
case "c":
2020-05-02 19:11:20 +00:00
this.$store.commit("toggleModal", "roles");
break;
2020-05-02 19:33:44 +00:00
case "Escape":
this.$store.commit("toggleMenu");
2020-04-11 20:55:37 +00:00
}
2020-04-09 20:14:48 +00:00
}
},
mounted() {
if (localStorage.players) {
2020-04-10 08:59:32 +00:00
this.players = JSON.parse(localStorage.players).map(player => ({
...player,
2020-05-02 19:33:44 +00:00
role: this.$store.state.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-22 21:07:25 +00:00
const firstNight = [0];
const otherNight = [0];
newPlayers.forEach(({ role }) => {
if (role.firstNight && !firstNight.includes(role.firstNight)) {
firstNight.push(role.firstNight);
}
if (role.otherNight && !otherNight.includes(role.otherNight)) {
otherNight.push(role.otherNight);
}
});
2020-04-25 20:19:47 +00:00
firstNight.sort((a, b) => a - b);
otherNight.sort((a, b) => a - b);
2020-04-22 21:07:25 +00:00
newPlayers.forEach(player => {
2020-04-22 21:13:59 +00:00
player.firstNight = Math.max(
firstNight.indexOf(player.role.firstNight),
0
);
player.otherNight = Math.max(
otherNight.indexOf(player.role.otherNight),
0
);
2020-04-22 21:07:25 +00:00
});
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-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-28 19:47:28 +00:00
a {
color: $townsfolk;
&:hover {
color: $demon;
}
}
h1,
h2,
h3,
h4,
h5 {
2020-04-18 19:03:58 +00:00
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%;
background-position: center center;
background-size: cover;
2020-04-28 19:47:28 +00:00
display: flex;
align-items: center;
align-content: center;
justify-content: center;
2020-04-05 17:50:33 +00:00
}
2020-04-01 20:57:14 +00:00
// 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>