townsquare/src/App.vue

411 lines
8.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-12-02 19:39:12 +00:00
v-bind:class="{
screenshot: grimoire.isScreenshot,
night: grimoire.isNight
}"
2020-05-02 19:11:20 +00:00
v-bind:style="{
backgroundImage: grimoire.background
? `url('${grimoire.background}')`
: ''
}"
2020-04-22 19:21:54 +00:00
>
2020-12-02 19:39:12 +00:00
<div class="backdrop"></div>
<transition name="blur">
2020-06-05 18:19:49 +00:00
<Intro v-if="!players.length"></Intro>
<TownInfo v-if="players.length && !session.nomination"></TownInfo>
<Vote v-if="session.nomination"></Vote>
</transition>
2020-05-03 21:05:17 +00:00
<TownSquare @screenshot="takeScreenshot"></TownSquare>
<Menu ref="menu"></Menu>
2020-05-27 19:42:09 +00:00
<EditionModal />
2020-08-09 19:28:38 +00:00
<FabledModal />
2020-05-27 19:42:09 +00:00
<RolesModal />
<ReferenceModal />
<NightOrderModal />
2020-06-04 16:23:33 +00:00
<Gradients />
2020-06-16 08:02:06 +00:00
<span id="version">v{{ version }}</span>
2020-04-01 20:57:14 +00:00
</div>
</template>
<script>
2020-05-02 19:11:20 +00:00
import { mapState } from "vuex";
2020-06-16 08:02:06 +00:00
import { version } from "../package.json";
import TownSquare from "./components/TownSquare";
import TownInfo from "./components/TownInfo";
2020-05-02 19:11:20 +00:00
import Menu from "./components/Menu";
2020-05-03 21:05:17 +00:00
import RolesModal from "./components/modals/RolesModal";
import EditionModal from "./components/modals/EditionModal";
2020-05-02 19:33:44 +00:00
import Intro from "./components/Intro";
2020-05-27 19:42:09 +00:00
import ReferenceModal from "./components/modals/ReferenceModal";
2020-05-31 21:42:08 +00:00
import Vote from "./components/Vote";
2020-06-04 16:23:33 +00:00
import Gradients from "./components/Gradients";
import NightOrderModal from "./components/modals/NightOrderModal";
2020-08-09 19:28:38 +00:00
import FabledModal from "@/components/modals/FabledModal";
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
export default {
components: {
2020-08-09 19:28:38 +00:00
FabledModal,
NightOrderModal,
2020-05-31 21:42:08 +00:00
Vote,
2020-05-27 19:42:09 +00:00
ReferenceModal,
2020-05-02 19:33:44 +00:00
Intro,
TownInfo,
2020-05-03 21:05:17 +00:00
TownSquare,
Menu,
EditionModal,
2020-06-04 16:23:33 +00:00
RolesModal,
Gradients
},
computed: {
...mapState(["grimoire", "session"]),
...mapState("players", ["players"])
},
2020-06-16 08:02:06 +00:00
data() {
return {
version
};
},
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
},
keyup({ key, ctrlKey, metaKey }) {
if (ctrlKey || metaKey) return;
switch (key.toLocaleLowerCase()) {
2020-04-11 20:55:37 +00:00
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;
2020-06-04 19:56:07 +00:00
case "h":
this.$refs.menu.hostSession();
break;
case "j":
this.$refs.menu.joinSession();
break;
2020-04-11 20:55:37 +00:00
case "r":
2020-05-27 19:42:09 +00:00
this.$store.commit("toggleModal", "reference");
2020-04-11 20:55:37 +00:00
break;
case "n":
this.$store.commit("toggleModal", "nightOrder");
break;
case "e":
if (this.session.isSpectator) return;
2020-05-02 19:11:20 +00:00
this.$store.commit("toggleModal", "edition");
break;
case "c":
if (this.session.isSpectator) return;
2020-05-02 19:11:20 +00:00
this.$store.commit("toggleModal", "roles");
break;
2020-06-04 19:56:07 +00:00
case "escape":
this.$store.commit("toggleModal");
2020-04-11 20:55:37 +00:00
}
2020-04-09 20:14:48 +00:00
}
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
@font-face {
font-family: PiratesBay;
src: url("assets/fonts/piratesbay.ttf");
font-display: swap;
}
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-06-10 22:37:17 +00:00
// Large devices (desktops, less than 1200px)
@media screen and (max-width: 1199.98px) {
html,
body {
font-size: 1.1em;
}
.night-order em {
2020-06-10 22:37:17 +00:00
width: 30px;
height: 30px;
}
.fabled .night-order.first span {
left: 30px;
}
2020-06-10 22:37:17 +00:00
}
// Medium devices (tablets, less than 992px)
@media screen and (max-width: 991.98px) {
html,
body {
font-size: 1em;
}
#controls svg {
font-size: 20px;
}
.night-order em {
2020-06-10 22:37:17 +00:00
width: 20px;
height: 20px;
}
.fabled .night-order.first span {
left: 20px;
}
2020-06-10 22:37:17 +00:00
#townsquare {
padding: 10px;
}
}
// Small devices (landscape phones, less than 768px)
@media screen and (max-width: 767.98px) {
html,
body {
font-size: 0.9em;
}
.player > .name {
top: 0;
}
}
// Old phones
@media screen and (max-width: 575.98px) {
html,
body {
font-size: 0.8em;
}
}
// odd aspect ratio
@media (max-aspect-ratio: 11/7) {
2020-07-23 11:52:53 +00:00
.bluffs,
.fabled {
h3 {
max-width: 14vh;
}
ul {
flex-direction: column;
}
2020-06-10 22:37:17 +00:00
}
}
// Firefox doesn't support screenshot mode yet
@-moz-document url-prefix() {
#controls > span.camera,
.player > .menu .screenshot,
.bluffs > svg.fa-camera {
display: none;
}
}
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;
font-family: PiratesBay, sans-serif;
letter-spacing: 1px;
font-weight: normal;
2020-04-18 19:03:58 +00:00
}
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
2020-06-16 08:02:06 +00:00
#version {
position: absolute;
2020-12-05 21:46:05 +00:00
text-align: right;
2020-06-16 08:02:06 +00:00
right: 10px;
bottom: 10px;
font-size: 60%;
opacity: 0.5;
}
.blur-enter-active,
.blur-leave-active {
2020-06-05 18:19:49 +00:00
transition: all 250ms;
filter: blur(0);
}
.blur-enter,
.blur-leave-to {
2020-06-05 18:19:49 +00:00
opacity: 0;
2020-06-05 20:12:51 +00:00
filter: blur(20px);
2020-06-05 18:19:49 +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);
2020-06-10 22:37:17 +00:00
line-height: 170%;
margin: 5px auto;
cursor: pointer;
transition: all 200ms;
2020-06-07 21:43:26 +00:00
white-space: nowrap;
&:hover {
color: red;
}
&.disabled {
color: gray;
cursor: default;
2020-12-05 21:24:55 +00:00
opacity: 0.75;
}
&:before,
&:after {
content: " ";
display: inline-block;
width: 10px;
height: 10px;
}
&.townsfolk {
background: radial-gradient(
at 0 -15%,
rgba(255, 255, 255, 0.07) 70%,
rgba(255, 255, 255, 0) 71%
)
0 0/80% 90% no-repeat content-box,
linear-gradient(#0031ad, rgba(5, 0, 0, 0.22)) content-box,
linear-gradient(#292929, #001142) border-box;
box-shadow: inset 0 1px 1px #002c9c, 0 0 10px #000;
&:hover:not(.disabled) {
color: #008cf7;
}
}
&.demon {
background: radial-gradient(
at 0 -15%,
rgba(255, 255, 255, 0.07) 70%,
rgba(255, 255, 255, 0) 71%
)
0 0/80% 90% no-repeat content-box,
linear-gradient(#ad0000, rgba(5, 0, 0, 0.22)) content-box,
linear-gradient(#292929, #420000) border-box;
box-shadow: inset 0 1px 1px #9c0000, 0 0 10px #000;
}
}
2020-12-02 19:39:12 +00:00
/* Night phase backdrop */
#app > .backdrop {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
pointer-events: none;
background: black;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 1) 0%,
rgba(1, 22, 46, 1) 50%,
rgba(0, 39, 70, 1) 100%
);
opacity: 0;
transition: opacity 1s ease-in-out;
&:after {
content: " ";
display: block;
width: 100%;
padding-right: 2000px;
height: 100%;
background: url("assets/clouds.png") repeat;
background-size: 2000px auto;
animation: move-background 120s linear infinite;
opacity: 0.3;
}
}
@keyframes move-background {
from {
transform: translate3d(-2000px, 0px, 0px);
}
to {
transform: translate3d(0px, 0px, 0px);
}
}
#app.night > .backdrop {
opacity: 0.5;
}
2020-04-01 20:57:14 +00:00
</style>