townsquare/src/App.vue

371 lines
8.2 KiB
Vue
Raw Permalink 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"
v2.13.0 (#168) * add support for custom fabled (closes #110) * 2.13.0 * show custom fabled first * add recordVoteHistory & clearVoteHistory to session menu * Update CHANGELOG.md * socket part of toggle recordVoteHistory analogous to isNight * remove accidental * Add files via upload * add custom fabled * Add option to reduce night animations to save power. * add fallback icon for fabled * changelog * disable all animations now * linter * add 'on the block' indicator - after vote, ST chooses to put onto block / empty block / no change to block - player menu has add / remove from block - players are automatically removed from the block when (i) they die (ii) another player is put onto block - fixed crash on add/remove/etc player mid vote * hide rounded corners on maximized modals (barely visible anyway) * ST always sees vote history i.e. toggle affects only players * empty block at night * avoid clashing with seat icon * nlc: toggle within session.js * lint * minor * Use proper "Exile" terminology for exile * Add info about "Banishment"->"Exile" to CHANGELOG * requested changes * remove direct ST control of block * player menu order * move block/night logic from socket to menu * minor fix to previous * on block -> marked * requested changes * requested change Co-authored-by: Steffen <steffen@baumgart.biz> * fix players being moved or removed during a nomination (closes #164) add vue linter * let's try adding a lint error * linter adjusted * it's working! * requested change record marked player id in session * feedback implemented npm audit * prepare develop branch * adjust linter config * revert version bump * fixes & visuals * Update CHANGELOG.md * restore old lint command (fixes #170) * minor fix default * show jinxed interactions on character reference modal * 2.13.0 * changelog Co-authored-by: nicfreeman1209 <nicfreeman1209@gmail.com> Co-authored-by: nicfreeman1209 <14160941+nicfreeman1209@users.noreply.github.com> Co-authored-by: Adrian Irving-Beer <wisq@wisq.net> Co-authored-by: Andrew Conant <emptierset@gmail.com>
2021-05-15 18:07:54 +00:00
:class="{
night: grimoire.isNight,
static: grimoire.isStatic
}"
:style="{
2020-05-02 19:11:20 +00:00
backgroundImage: grimoire.background
? `url('${grimoire.background}')`
: ''
}"
2020-04-22 19:21:54 +00:00
>
<video
id="background"
v-if="grimoire.background && grimoire.background.match(/\.(mp4|webm)$/i)"
:src="grimoire.background"
autoplay
loop
></video>
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>
<TownSquare></TownSquare>
2020-05-03 21:05:17 +00:00
<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-12-06 21:27:52 +00:00
<VoteHistoryModal />
<GameStateModal />
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-12-06 21:27:52 +00:00
import VoteHistoryModal from "@/components/modals/VoteHistoryModal";
import GameStateModal from "@/components/modals/GameStateModal";
2020-04-01 20:57:14 +00:00
2020-04-05 17:50:33 +00:00
export default {
components: {
GameStateModal,
2020-12-06 21:27:52 +00:00
VoteHistoryModal,
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: {
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;
case "v":
v2.13.0 (#168) * add support for custom fabled (closes #110) * 2.13.0 * show custom fabled first * add recordVoteHistory & clearVoteHistory to session menu * Update CHANGELOG.md * socket part of toggle recordVoteHistory analogous to isNight * remove accidental * Add files via upload * add custom fabled * Add option to reduce night animations to save power. * add fallback icon for fabled * changelog * disable all animations now * linter * add 'on the block' indicator - after vote, ST chooses to put onto block / empty block / no change to block - player menu has add / remove from block - players are automatically removed from the block when (i) they die (ii) another player is put onto block - fixed crash on add/remove/etc player mid vote * hide rounded corners on maximized modals (barely visible anyway) * ST always sees vote history i.e. toggle affects only players * empty block at night * avoid clashing with seat icon * nlc: toggle within session.js * lint * minor * Use proper "Exile" terminology for exile * Add info about "Banishment"->"Exile" to CHANGELOG * requested changes * remove direct ST control of block * player menu order * move block/night logic from socket to menu * minor fix to previous * on block -> marked * requested changes * requested change Co-authored-by: Steffen <steffen@baumgart.biz> * fix players being moved or removed during a nomination (closes #164) add vue linter * let's try adding a lint error * linter adjusted * it's working! * requested change record marked player id in session * feedback implemented npm audit * prepare develop branch * adjust linter config * revert version bump * fixes & visuals * Update CHANGELOG.md * restore old lint command (fixes #170) * minor fix default * show jinxed interactions on character reference modal * 2.13.0 * changelog Co-authored-by: nicfreeman1209 <nicfreeman1209@gmail.com> Co-authored-by: nicfreeman1209 <14160941+nicfreeman1209@users.noreply.github.com> Co-authored-by: Adrian Irving-Beer <wisq@wisq.net> Co-authored-by: Andrew Conant <emptierset@gmail.com>
2021-05-15 18:07:54 +00:00
if (this.session.voteHistory.length || !this.session.isSpectator) {
this.$store.commit("toggleModal", "voteHistory");
}
break;
case "s":
if (this.session.isSpectator) return;
v2.13.0 (#168) * add support for custom fabled (closes #110) * 2.13.0 * show custom fabled first * add recordVoteHistory & clearVoteHistory to session menu * Update CHANGELOG.md * socket part of toggle recordVoteHistory analogous to isNight * remove accidental * Add files via upload * add custom fabled * Add option to reduce night animations to save power. * add fallback icon for fabled * changelog * disable all animations now * linter * add 'on the block' indicator - after vote, ST chooses to put onto block / empty block / no change to block - player menu has add / remove from block - players are automatically removed from the block when (i) they die (ii) another player is put onto block - fixed crash on add/remove/etc player mid vote * hide rounded corners on maximized modals (barely visible anyway) * ST always sees vote history i.e. toggle affects only players * empty block at night * avoid clashing with seat icon * nlc: toggle within session.js * lint * minor * Use proper "Exile" terminology for exile * Add info about "Banishment"->"Exile" to CHANGELOG * requested changes * remove direct ST control of block * player menu order * move block/night logic from socket to menu * minor fix to previous * on block -> marked * requested changes * requested change Co-authored-by: Steffen <steffen@baumgart.biz> * fix players being moved or removed during a nomination (closes #164) add vue linter * let's try adding a lint error * linter adjusted * it's working! * requested change record marked player id in session * feedback implemented npm audit * prepare develop branch * adjust linter config * revert version bump * fixes & visuals * Update CHANGELOG.md * restore old lint command (fixes #170) * minor fix default * show jinxed interactions on character reference modal * 2.13.0 * changelog Co-authored-by: nicfreeman1209 <nicfreeman1209@gmail.com> Co-authored-by: nicfreeman1209 <14160941+nicfreeman1209@users.noreply.github.com> Co-authored-by: Adrian Irving-Beer <wisq@wisq.net> Co-authored-by: Andrew Conant <emptierset@gmail.com>
2021-05-15 18:07:54 +00:00
this.$refs.menu.toggleNight();
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
@import "media";
2020-06-10 22:37:17 +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;
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;
v2.13.0 (#168) * add support for custom fabled (closes #110) * 2.13.0 * show custom fabled first * add recordVoteHistory & clearVoteHistory to session menu * Update CHANGELOG.md * socket part of toggle recordVoteHistory analogous to isNight * remove accidental * Add files via upload * add custom fabled * Add option to reduce night animations to save power. * add fallback icon for fabled * changelog * disable all animations now * linter * add 'on the block' indicator - after vote, ST chooses to put onto block / empty block / no change to block - player menu has add / remove from block - players are automatically removed from the block when (i) they die (ii) another player is put onto block - fixed crash on add/remove/etc player mid vote * hide rounded corners on maximized modals (barely visible anyway) * ST always sees vote history i.e. toggle affects only players * empty block at night * avoid clashing with seat icon * nlc: toggle within session.js * lint * minor * Use proper "Exile" terminology for exile * Add info about "Banishment"->"Exile" to CHANGELOG * requested changes * remove direct ST control of block * player menu order * move block/night logic from socket to menu * minor fix to previous * on block -> marked * requested changes * requested change Co-authored-by: Steffen <steffen@baumgart.biz> * fix players being moved or removed during a nomination (closes #164) add vue linter * let's try adding a lint error * linter adjusted * it's working! * requested change record marked player id in session * feedback implemented npm audit * prepare develop branch * adjust linter config * revert version bump * fixes & visuals * Update CHANGELOG.md * restore old lint command (fixes #170) * minor fix default * show jinxed interactions on character reference modal * 2.13.0 * changelog Co-authored-by: nicfreeman1209 <nicfreeman1209@gmail.com> Co-authored-by: nicfreeman1209 <14160941+nicfreeman1209@users.noreply.github.com> Co-authored-by: Adrian Irving-Beer <wisq@wisq.net> Co-authored-by: Andrew Conant <emptierset@gmail.com>
2021-05-15 18:07:54 +00:00
// disable all animations
&.static *,
&.static *:after,
&.static *:before {
transition: none !important;
animation: none !important;
}
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
/* video background */
video#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
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>