mirror of https://github.com/bra1n/townsquare.git
here comes Vuex
This commit is contained in:
Steffen
parent
18e7599c43
commit
966c6f0944
|
|
@ -8578,6 +8578,11 @@
|
|||
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
|
||||
"integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
"sass": "^1.26.3",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue": "^2.3.3",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuex": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-eslint": "^4.3.1",
|
||||
|
|
|
|||
382
src/App.vue
382
src/App.vue
|
|
@ -3,15 +3,19 @@
|
|||
id="app"
|
||||
@keyup="keyup"
|
||||
tabindex="-1"
|
||||
v-bind:class="{ screenshot: isScreenshot }"
|
||||
v-bind:style="{ backgroundImage: background ? `url('${background}')` : '' }"
|
||||
v-bind:class="{ screenshot: grimoire.isScreenshot }"
|
||||
v-bind:style="{
|
||||
backgroundImage: grimoire.background
|
||||
? `url('${grimoire.background}')`
|
||||
: ''
|
||||
}"
|
||||
>
|
||||
<div class="intro" v-if="!players.length">
|
||||
<img src="static/apple-icon.png" alt="" />
|
||||
Welcome to the (unofficial)
|
||||
<b> Virtual Blood on the Clocktower Town Square</b>!<br />
|
||||
Please add more players through the
|
||||
<span class="button" @click="isControlOpen = !isControlOpen">
|
||||
<span class="button">
|
||||
<font-awesome-icon icon="cog" /> Menu
|
||||
</span>
|
||||
on the top right or by pressing <b>[A]</b>.<br />
|
||||
|
|
@ -24,252 +28,62 @@
|
|||
v-if="players.length"
|
||||
></TownInfo>
|
||||
<TownSquare
|
||||
:is-public="isPublic"
|
||||
:is-night-order="isNightOrder"
|
||||
:is-public="grimoire.isPublic"
|
||||
:is-night-order="grimoire.isNightOrder"
|
||||
:players="players"
|
||||
:roles="roles"
|
||||
:zoom="zoom"
|
||||
:zoom="grimoire.zoom"
|
||||
@screenshot="takeScreenshot"
|
||||
></TownSquare>
|
||||
|
||||
<Modal
|
||||
class="editions"
|
||||
v-show="isEditionModalOpen"
|
||||
@close="isEditionModalOpen = false"
|
||||
>
|
||||
<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>
|
||||
|
||||
<RoleSelectionModal
|
||||
:players="players"
|
||||
:roles="roles"
|
||||
:is-open="isRoleModalOpen"
|
||||
@close="isRoleModalOpen = false"
|
||||
></RoleSelectionModal>
|
||||
|
||||
<Screenshot
|
||||
ref="screenshot"
|
||||
@success="onScreenshot(true)"
|
||||
@error="onScreenshot(false)"
|
||||
></Screenshot>
|
||||
|
||||
<div class="controls">
|
||||
<font-awesome-icon
|
||||
icon="camera"
|
||||
@click="takeScreenshot()"
|
||||
v-bind:class="{ success: isScreenshotSuccess }"
|
||||
/>
|
||||
<div class="menu" v-bind:class="{ open: isControlOpen }">
|
||||
<font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" />
|
||||
<ul>
|
||||
<!-- Grimoire -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="book-open" />
|
||||
Grimoire
|
||||
</li>
|
||||
<li @click="togglePublic" v-if="players.length">
|
||||
<em>[G]</em>
|
||||
<template v-if="!isPublic">Hide</template>
|
||||
<template v-if="isPublic">Show</template>
|
||||
</li>
|
||||
<li @click="toggleNightOrder" v-if="players.length">
|
||||
<em
|
||||
><font-awesome-icon
|
||||
:icon="['fas', isNightOrder ? 'check-square' : 'square']"
|
||||
/></em>
|
||||
Night order
|
||||
</li>
|
||||
<li v-if="players.length">
|
||||
<em>
|
||||
<font-awesome-icon @click="zoom -= 0.1" icon="search-minus" />
|
||||
{{ Math.round(zoom * 100) }}%
|
||||
<font-awesome-icon @click="zoom += 0.1" icon="search-plus" />
|
||||
</em>
|
||||
Zoom
|
||||
</li>
|
||||
<li @click="setBackground">
|
||||
Background image
|
||||
</li>
|
||||
|
||||
<!-- Users -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="users" />
|
||||
Players
|
||||
</li>
|
||||
<li @click="addPlayer" v-if="players.length < 20">
|
||||
<em>[A]</em> Add
|
||||
</li>
|
||||
<li @click="randomizeSeatings" v-if="players.length > 2">
|
||||
<em>[R]</em> Randomize
|
||||
</li>
|
||||
<li @click="clearPlayers" v-if="players.length">
|
||||
Remove all
|
||||
</li>
|
||||
|
||||
<!-- Characters -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="theater-masks" />
|
||||
Characters
|
||||
</li>
|
||||
<li @click="showEditionModal">
|
||||
<em>[E]</em>
|
||||
Select Edition
|
||||
</li>
|
||||
<li @click="showRoleModal" v-if="players.length > 4">
|
||||
<em>[C]</em>
|
||||
Choose & Assign
|
||||
</li>
|
||||
<li @click="clearRoles" v-if="players.length">
|
||||
Remove all
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Menu ref="menu" :players="players"></Menu>
|
||||
<EditionSelectionModal :players="players"></EditionSelectionModal>
|
||||
<RoleSelectionModal :players="players"></RoleSelectionModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import TownSquare from "./components/TownSquare";
|
||||
import TownInfo from "./components/TownInfo";
|
||||
import Modal from "./components/Modal";
|
||||
import Menu from "./components/Menu";
|
||||
import RoleSelectionModal from "./components/RoleSelectionModal";
|
||||
import rolesJSON from "./roles";
|
||||
import editionJSON from "./editions";
|
||||
import Screenshot from "./components/Screenshot";
|
||||
import EditionSelectionModal from "./components/EditionSelectionModal";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Screenshot,
|
||||
EditionSelectionModal,
|
||||
Menu,
|
||||
TownSquare,
|
||||
TownInfo,
|
||||
Modal,
|
||||
RoleSelectionModal
|
||||
},
|
||||
computed: mapState(["grimoire", "edition", "roles"]),
|
||||
data: function() {
|
||||
return {
|
||||
background: "",
|
||||
editions: editionJSON,
|
||||
isNightOrder: true,
|
||||
isPublic: true,
|
||||
isControlOpen: false,
|
||||
isEditionModalOpen: false,
|
||||
isRoleModalOpen: false,
|
||||
isScreenshotSuccess: false,
|
||||
isScreenshot: false,
|
||||
players: [],
|
||||
roles: this.getRolesByEdition(),
|
||||
edition: "tb",
|
||||
zoom: 1
|
||||
players: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
takeScreenshot(dimensions = {}) {
|
||||
this.isScreenshotSuccess = false;
|
||||
this.isScreenshot = true;
|
||||
this.$refs.screenshot.capture(dimensions, this.zoom);
|
||||
},
|
||||
onScreenshot(success = false) {
|
||||
this.isScreenshotSuccess = success;
|
||||
this.isScreenshot = false;
|
||||
},
|
||||
togglePublic() {
|
||||
this.isPublic = !this.isPublic;
|
||||
this.isControlOpen = !this.isPublic;
|
||||
},
|
||||
toggleNightOrder() {
|
||||
this.isNightOrder = !this.isNightOrder;
|
||||
},
|
||||
setBackground() {
|
||||
this.background = prompt("Enter custom background URL");
|
||||
},
|
||||
addPlayer() {
|
||||
const name = prompt("Player name");
|
||||
if (name) {
|
||||
this.players.push({
|
||||
name,
|
||||
role: {},
|
||||
reminders: []
|
||||
});
|
||||
}
|
||||
},
|
||||
randomizeSeatings() {
|
||||
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]);
|
||||
}
|
||||
},
|
||||
clearPlayers() {
|
||||
this.isControlOpen = false;
|
||||
if (confirm("Are you sure you want to remove all players?")) {
|
||||
this.players = [];
|
||||
}
|
||||
},
|
||||
clearRoles() {
|
||||
this.isControlOpen = false;
|
||||
if (confirm("Are you sure you want to remove all player roles?")) {
|
||||
this.players.forEach(player => {
|
||||
player.role = {};
|
||||
player.hasDied = false;
|
||||
player.reminders = [];
|
||||
});
|
||||
}
|
||||
},
|
||||
getRolesByEdition(edition = "tb") {
|
||||
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])
|
||||
);
|
||||
},
|
||||
showEditionModal() {
|
||||
this.isEditionModalOpen = true;
|
||||
this.isPublic = false;
|
||||
this.isControlOpen = false;
|
||||
},
|
||||
setEdition(edition) {
|
||||
this.edition = edition;
|
||||
this.isEditionModalOpen = false;
|
||||
},
|
||||
showRoleModal() {
|
||||
this.isRoleModalOpen = true;
|
||||
this.isPublic = false;
|
||||
this.isControlOpen = false;
|
||||
takeScreenshot(dimensions) {
|
||||
this.$refs.menu.takeScreenshot(dimensions);
|
||||
},
|
||||
keyup({ key }) {
|
||||
switch (key) {
|
||||
case "g":
|
||||
this.togglePublic();
|
||||
this.$store.commit("toggleGrimoire");
|
||||
break;
|
||||
case "a":
|
||||
this.addPlayer();
|
||||
this.$refs.menu.addPlayer();
|
||||
break;
|
||||
case "r":
|
||||
this.randomizeSeatings();
|
||||
this.$refs.menu.randomizeSeatings();
|
||||
break;
|
||||
case "e":
|
||||
this.showEditionModal();
|
||||
this.$store.commit("toggleModal", "edition");
|
||||
break;
|
||||
case "c":
|
||||
this.showRoleModal();
|
||||
this.$store.commit("toggleModal", "roles");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -282,8 +96,7 @@ export default {
|
|||
this.isPublic = JSON.parse(localStorage.isPublic);
|
||||
}
|
||||
if (localStorage.edition) {
|
||||
this.edition = localStorage.edition;
|
||||
this.roles = this.getRolesByEdition(this.edition);
|
||||
this.$store.commit("setEdition", localStorage.edition);
|
||||
}
|
||||
if (localStorage.players) {
|
||||
this.players = JSON.parse(localStorage.players).map(player => ({
|
||||
|
|
@ -328,7 +141,6 @@ export default {
|
|||
},
|
||||
edition(newEdition) {
|
||||
localStorage.edition = newEdition;
|
||||
this.roles = this.getRolesByEdition(newEdition);
|
||||
},
|
||||
isPublic(newIsPublic) {
|
||||
localStorage.isPublic = JSON.stringify(newIsPublic);
|
||||
|
|
@ -444,144 +256,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
.controls {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
text-align: right;
|
||||
|
||||
#app.screenshot & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
|
||||
&.success {
|
||||
animation: greenToWhite 1s normal forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-camera {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 10px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 210px;
|
||||
transform-origin: 190px 22px;
|
||||
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
transform: rotate(-90deg);
|
||||
|
||||
&.open {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
> svg {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 3px solid black;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
margin-bottom: -8px;
|
||||
border-bottom: 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 5px 5px 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 3px solid black;
|
||||
border-radius: 10px 0 10px 10px;
|
||||
|
||||
li {
|
||||
padding: 2px 10px;
|
||||
color: white;
|
||||
text-align: left;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.headline):hover {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
|
||||
em {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
font-size: 80%;
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$demon 0%,
|
||||
rgba(0, 0, 0, 0.5) 20%,
|
||||
rgba(0, 0, 0, 0.5) 80%,
|
||||
$townsfolk 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Editions
|
||||
@each $img, $skipIcons in $editions {
|
||||
.edition-#{$img} {
|
||||
background-image: url("./assets/editions/#{$img}.png");
|
||||
}
|
||||
@if $skipIcons != true {
|
||||
.edition-#{$img}.townsfolk {
|
||||
background-image: url("./assets/editions/#{$img}-townsfolk.png");
|
||||
}
|
||||
.edition-#{$img}.outsider {
|
||||
background-image: url("./assets/editions/#{$img}-outsider.png");
|
||||
}
|
||||
.edition-#{$img}.minion {
|
||||
background-image: url("./assets/editions/#{$img}-minion.png");
|
||||
}
|
||||
.edition-#{$img}.demon {
|
||||
background-image: url("./assets/editions/#{$img}-demon.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;
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.button-group {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<Modal
|
||||
class="editions"
|
||||
v-show="modals.edition"
|
||||
@close="toggleModal('edition')"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import editionJSON from "../editions";
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import Modal from "./Modal";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
editions: editionJSON
|
||||
};
|
||||
},
|
||||
computed: mapState(["modals"]),
|
||||
methods: mapMutations(["toggleModal", "setEdition"])
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../vars";
|
||||
|
||||
// Editions
|
||||
@each $img, $skipIcons in $editions {
|
||||
.edition-#{$img} {
|
||||
background-image: url("../assets/editions/#{$img}.png");
|
||||
}
|
||||
@if $skipIcons != true {
|
||||
.edition-#{$img}.townsfolk {
|
||||
background-image: url("../assets/editions/#{$img}-townsfolk.png");
|
||||
}
|
||||
.edition-#{$img}.outsider {
|
||||
background-image: url("../assets/editions/#{$img}-outsider.png");
|
||||
}
|
||||
.edition-#{$img}.minion {
|
||||
background-image: url("../assets/editions/#{$img}-minion.png");
|
||||
}
|
||||
.edition-#{$img}.demon {
|
||||
background-image: url("../assets/editions/#{$img}-demon.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;
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<div id="controls">
|
||||
<Screenshot ref="screenshot"></Screenshot>
|
||||
<font-awesome-icon
|
||||
icon="camera"
|
||||
@click="takeScreenshot()"
|
||||
v-bind:class="{ success: grimoire.isScreenshotSuccess }"
|
||||
/>
|
||||
<div class="menu" v-bind:class="{ open: isMenuOpen }">
|
||||
<font-awesome-icon icon="cog" @click="isMenuOpen = !isMenuOpen" />
|
||||
<ul>
|
||||
<!-- Grimoire -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="book-open" />
|
||||
Grimoire
|
||||
</li>
|
||||
<li @click="toggleGrimoire" v-if="players.length">
|
||||
<em>[G]</em>
|
||||
<template v-if="!grimoire.isPublic">Hide</template>
|
||||
<template v-if="grimoire.isPublic">Show</template>
|
||||
</li>
|
||||
<li @click="toggleNightOrder" v-if="players.length">
|
||||
<em
|
||||
><font-awesome-icon
|
||||
:icon="['fas', grimoire.isNightOrder ? 'check-square' : 'square']"
|
||||
/></em>
|
||||
Night order
|
||||
</li>
|
||||
<li v-if="players.length">
|
||||
<em>
|
||||
<font-awesome-icon @click="updateZoom(-0.1)" icon="search-minus" />
|
||||
{{ Math.round(grimoire.zoom * 100) }}%
|
||||
<font-awesome-icon @click="updateZoom(0.1)" icon="search-plus" />
|
||||
</em>
|
||||
Zoom
|
||||
</li>
|
||||
<li @click="setBackground">
|
||||
Background image
|
||||
</li>
|
||||
|
||||
<!-- Users -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="users" />
|
||||
Players
|
||||
</li>
|
||||
<li @click="addPlayer" v-if="players.length < 20"><em>[A]</em> Add</li>
|
||||
<li @click="randomizeSeatings" v-if="players.length > 2">
|
||||
<em>[R]</em> Randomize
|
||||
</li>
|
||||
<li @click="clearPlayers" v-if="players.length">
|
||||
Remove all
|
||||
</li>
|
||||
|
||||
<!-- Characters -->
|
||||
<li class="headline">
|
||||
<font-awesome-icon icon="theater-masks" />
|
||||
Characters
|
||||
</li>
|
||||
<li @click="toggleModal('edition')">
|
||||
<em>[E]</em>
|
||||
Select Edition
|
||||
</li>
|
||||
<li @click="toggleModal('roles')" v-if="players.length > 4">
|
||||
<em>[C]</em>
|
||||
Choose & Assign
|
||||
</li>
|
||||
<li @click="clearRoles" v-if="players.length">
|
||||
Remove all
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import Screenshot from "./Screenshot";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Screenshot
|
||||
},
|
||||
props: ["players"],
|
||||
data: function() {
|
||||
return {
|
||||
isMenuOpen: false
|
||||
};
|
||||
},
|
||||
computed: mapState(["grimoire"]),
|
||||
methods: {
|
||||
takeScreenshot(dimensions = {}) {
|
||||
this.$store.commit("updateScreenshot");
|
||||
this.$refs.screenshot.capture(dimensions);
|
||||
},
|
||||
setBackground() {
|
||||
this.$store.commit(
|
||||
"setBackground",
|
||||
prompt("Enter custom background URL")
|
||||
);
|
||||
},
|
||||
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]);
|
||||
}
|
||||
},
|
||||
clearPlayers() {
|
||||
if (confirm("Are you sure you want to remove all players?")) {
|
||||
this.players = [];
|
||||
}
|
||||
},
|
||||
clearRoles() {
|
||||
this.$store.commit("showGrimoire");
|
||||
if (confirm("Are you sure you want to remove all player roles?")) {
|
||||
this.players.forEach(player => {
|
||||
player.role = {};
|
||||
player.hasDied = false;
|
||||
player.reminders = [];
|
||||
});
|
||||
}
|
||||
},
|
||||
...mapMutations([
|
||||
"toggleGrimoire",
|
||||
"toggleNightOrder",
|
||||
"updateScreenshot",
|
||||
"updateZoom",
|
||||
"toggleModal"
|
||||
])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../vars.scss";
|
||||
|
||||
// Controls
|
||||
#controls {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
text-align: right;
|
||||
|
||||
#app.screenshot & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
|
||||
&.success {
|
||||
animation: greenToWhite 1s normal forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-camera {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 10px;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 210px;
|
||||
transform-origin: 190px 22px;
|
||||
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
transform: rotate(-90deg);
|
||||
|
||||
&.open {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
> svg {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 3px solid black;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
margin-bottom: -8px;
|
||||
border-bottom: 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 5px 5px 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 3px solid black;
|
||||
border-radius: 10px 0 10px 10px;
|
||||
|
||||
li {
|
||||
padding: 2px 10px;
|
||||
color: white;
|
||||
text-align: left;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.headline):hover {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
|
||||
em {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
font-size: 80%;
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.headline {
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$demon 0%,
|
||||
rgba(0, 0, 0, 0.5) 20%,
|
||||
rgba(0, 0, 0, 0.5) 80%,
|
||||
$townsfolk 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<Modal
|
||||
class="roles"
|
||||
v-show="isOpen"
|
||||
@close="close()"
|
||||
v-show="modals.roles"
|
||||
@close="toggleModal('roles')"
|
||||
v-if="nontravelerPlayers >= 5"
|
||||
>
|
||||
<h3>Select the characters for {{ nontravelerPlayers }} players:</h3>
|
||||
|
|
@ -51,6 +51,7 @@
|
|||
import Modal from "./Modal";
|
||||
import gameJSON from "./../game";
|
||||
import Token from "./Token";
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
|
||||
const randomElement = arr => arr[Math.floor(Math.random() * arr.length)];
|
||||
|
||||
|
|
@ -63,14 +64,6 @@ export default {
|
|||
players: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Map,
|
||||
required: true
|
||||
},
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
|
|
@ -96,12 +89,10 @@ export default {
|
|||
return Object.values(this.roleSelection).some(roles =>
|
||||
roles.some(role => role.selected && role.setup)
|
||||
);
|
||||
}
|
||||
},
|
||||
...mapState(["roles", "modals"])
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$emit("close");
|
||||
},
|
||||
selectRandomRoles() {
|
||||
this.roleSelection = {};
|
||||
this.roles.forEach(role => {
|
||||
|
|
@ -141,7 +132,8 @@ export default {
|
|||
});
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
...mapMutations(["toggleModal"])
|
||||
},
|
||||
mounted: function() {
|
||||
if (!Object.keys(this.roleSelection).length) {
|
||||
|
|
|
|||
|
|
@ -13,9 +13,10 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
async capture({ x = 0, y = 0, width = 0, height = 0 }, zoom = 1) {
|
||||
async capture({ x = 0, y = 0, width = 0, height = 0 }) {
|
||||
const canvas = this.$refs.canvas;
|
||||
const video = this.$refs.video;
|
||||
const zoom = this.$store.state.grimoire.zoom;
|
||||
// start capturing
|
||||
if (!this.stream || !this.stream.active) {
|
||||
alert(
|
||||
|
|
@ -30,7 +31,7 @@ export default {
|
|||
audio: false
|
||||
});
|
||||
} catch (err) {
|
||||
this.$emit("error", err);
|
||||
this.$store.commit("updateScreenshot", false);
|
||||
}
|
||||
}
|
||||
// get screenshot
|
||||
|
|
@ -57,9 +58,9 @@ export default {
|
|||
// eslint-disable-next-line no-undef
|
||||
const item = new ClipboardItem({ "image/png": blob });
|
||||
navigator.clipboard.write([item]);
|
||||
this.$emit("success");
|
||||
this.$store.commit("updateScreenshot", true);
|
||||
} catch (err) {
|
||||
this.$emit("error", err);
|
||||
this.$store.commit("updateScreenshot", false);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App";
|
||||
import store from "./store";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import {
|
||||
faBookOpen,
|
||||
|
|
@ -45,5 +46,6 @@ Vue.component("font-awesome-icon", FontAwesomeIcon);
|
|||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
render: h => h(App),
|
||||
store
|
||||
}).$mount("#app");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
import editionJSON from "../editions.json";
|
||||
import rolesJSON from "../roles.json";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const getRolesByEdition = (edition = "tb") => {
|
||||
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])
|
||||
);
|
||||
};
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
grimoire: {
|
||||
isNightOrder: true,
|
||||
isPublic: true,
|
||||
isScreenshot: false,
|
||||
isScreenshotSuccess: false,
|
||||
zoom: 1,
|
||||
background: ""
|
||||
},
|
||||
modals: {
|
||||
edition: false,
|
||||
roles: false
|
||||
},
|
||||
edition: "tb",
|
||||
roles: getRolesByEdition(),
|
||||
players: []
|
||||
},
|
||||
mutations: {
|
||||
toggleGrimoire({ grimoire }) {
|
||||
grimoire.isPublic = !grimoire.isPublic;
|
||||
grimoire.isControlOpen = !grimoire.isPublic;
|
||||
},
|
||||
showGrimoire({ grimoire }) {
|
||||
grimoire.isPublic = false;
|
||||
},
|
||||
toggleNightOrder({ grimoire }) {
|
||||
grimoire.isNightOrder = !grimoire.isNightOrder;
|
||||
},
|
||||
updateZoom({ grimoire }, by = 0) {
|
||||
grimoire.zoom += by;
|
||||
},
|
||||
setBackground({ grimoire }, background) {
|
||||
grimoire.background = background;
|
||||
},
|
||||
toggleModal({ modals }, name) {
|
||||
modals[name] = !modals[name];
|
||||
},
|
||||
updateScreenshot({ grimoire }, status) {
|
||||
if (status !== true && status !== false) {
|
||||
grimoire.isScreenshotSuccess = false;
|
||||
grimoire.isScreenshot = true;
|
||||
} else {
|
||||
grimoire.isScreenshotSuccess = status;
|
||||
grimoire.isScreenshot = false;
|
||||
}
|
||||
},
|
||||
setEdition(state, edition) {
|
||||
state.edition = edition;
|
||||
state.modals.edition = false;
|
||||
state.roles = getRolesByEdition(edition);
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue