townsquare/src/components/Menu.vue

498 lines
13 KiB
Vue
Raw Normal View History

2020-05-02 19:11:20 +00:00
<template>
<div id="controls">
<Screenshot ref="screenshot"></Screenshot>
<span
class="session"
:class="{
spectator: session.isSpectator,
reconnecting: session.isReconnecting
}"
v-if="session.sessionId"
@click="leaveSession"
:title="
2020-09-17 08:47:13 +00:00
`${session.playerCount} other players in this session${
session.ping ? ' (' + session.ping + 'ms latency)' : ''
}`
"
>
<font-awesome-icon icon="broadcast-tower" />
{{ session.playerCount }}
</span>
<span class="camera">
<font-awesome-icon
icon="camera"
@click="takeScreenshot()"
title="Take a screenshot"
:class="{ success: grimoire.isScreenshotSuccess }"
/>
</span>
2020-05-02 19:33:44 +00:00
<div class="menu" v-bind:class="{ open: grimoire.isMenuOpen }">
<font-awesome-icon icon="cog" @click="toggleMenu" />
2020-05-02 19:11:20 +00:00
<ul>
<li class="tabs" :class="tab">
<font-awesome-icon icon="book-open" @click="tab = 'grimoire'" />
<font-awesome-icon icon="broadcast-tower" @click="tab = 'session'" />
<font-awesome-icon
icon="users"
v-if="!session.isSpectator"
@click="tab = 'players'"
/>
2020-06-04 19:59:01 +00:00
<font-awesome-icon icon="theater-masks" @click="tab = 'characters'" />
<font-awesome-icon icon="question" @click="tab = 'help'" />
2020-05-08 17:33:29 +00:00
</li>
2020-05-02 19:11:20 +00:00
<template v-if="tab === 'grimoire'">
<!-- Grimoire -->
<li class="headline">Grimoire</li>
<li @click="toggleGrimoire" v-if="players.length">
<template v-if="!grimoire.isPublic">Hide</template>
<template v-if="grimoire.isPublic">Show</template>
2020-06-10 22:37:17 +00:00
<em>[G]</em>
</li>
2020-12-02 19:39:12 +00:00
<li @click="toggleNight" v-if="!session.isSpectator">
<template v-if="!grimoire.isNight">Switch to Night</template>
<template v-if="grimoire.isNight">Switch to Day</template>
<em
><font-awesome-icon
:icon="['fas', grimoire.isNight ? 'sun' : 'cloud-moon']"
/></em>
</li>
<li @click="toggleNightOrder" v-if="players.length">
2020-06-10 22:37:17 +00:00
Night order
<em
><font-awesome-icon
:icon="[
'fas',
grimoire.isNightOrder ? 'check-square' : 'square'
]"
/></em>
</li>
<li v-if="players.length">
2020-06-10 22:37:17 +00:00
Zoom
<em>
<font-awesome-icon
@click="setZoom(grimoire.zoom - 1)"
icon="search-minus"
/>
{{ Math.round(100 + grimoire.zoom * 10) }}%
2020-06-07 19:51:19 +00:00
<font-awesome-icon
@click="setZoom(grimoire.zoom + 1)"
2020-06-07 19:51:19 +00:00
icon="search-plus"
/>
</em>
</li>
<li @click="setBackground">
Background image
2020-06-10 22:37:17 +00:00
<em><font-awesome-icon icon="image"/></em>
</li>
</template>
<template v-if="tab === 'session'">
<li class="headline" v-if="session.sessionId">
{{ session.isSpectator ? "Playing" : "Hosting" }}
</li>
<li class="headline" v-else>
Live Session
</li>
<li @click="hostSession" v-if="!session.sessionId">
2020-06-10 22:37:17 +00:00
Host (Storyteller)<em>[H]</em>
</li>
<li @click="joinSession" v-if="!session.sessionId">
2020-06-10 22:37:17 +00:00
Join (Player)<em>[J]</em>
</li>
<li v-if="session.sessionId && session.ping">
2020-09-16 09:52:26 +00:00
Delay to {{ session.isSpectator ? "host" : "players" }}
<em>{{ session.ping }}ms</em>
</li>
<li v-if="session.sessionId" @click="copySessionUrl">
Copy player link
2020-06-10 22:37:17 +00:00
<em><font-awesome-icon icon="copy"/></em>
</li>
2020-12-06 21:27:52 +00:00
<li
v-if="session.voteHistory.length"
@click="toggleModal('voteHistory')"
>
Nomination history
<em><font-awesome-icon icon="hand-paper"/></em>
</li>
<li @click="leaveSession" v-if="session.sessionId">
Leave Session
2020-06-10 22:37:17 +00:00
<em>{{ session.sessionId }}</em>
</li>
</template>
<template v-if="tab === 'players' && !session.isSpectator">
<!-- Users -->
<li class="headline">Players</li>
2020-06-10 22:37:17 +00:00
<li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>
<li @click="randomizeSeatings" v-if="players.length > 2">
Randomize
2020-06-10 22:37:17 +00:00
<em><font-awesome-icon icon="dice"/></em>
</li>
<li @click="clearPlayers" v-if="players.length">
Remove all
2020-06-10 22:37:17 +00:00
<em><font-awesome-icon icon="trash-alt"/></em>
</li>
2020-05-27 19:42:09 +00:00
</template>
2020-05-02 19:11:20 +00:00
2020-06-04 19:59:01 +00:00
<template v-if="tab === 'characters'">
<!-- Characters -->
<li class="headline">Characters</li>
2020-06-04 19:59:01 +00:00
<li v-if="!session.isSpectator" @click="toggleModal('edition')">
Select Edition
2020-06-10 22:37:17 +00:00
<em>[E]</em>
</li>
2020-06-04 19:59:01 +00:00
<li
@click="toggleModal('roles')"
v-if="!session.isSpectator && players.length > 4"
>
Choose & Assign
2020-06-10 22:37:17 +00:00
<em>[C]</em>
</li>
2020-12-02 19:39:12 +00:00
<li v-if="!session.isSpectator" @click="toggleModal('fabled')">
Add Fabled
<em><font-awesome-icon icon="dragon"/></em>
</li>
<li @click="clearRoles" v-if="players.length">
Remove all
2020-06-10 22:37:17 +00:00
<em><font-awesome-icon icon="trash-alt"/></em>
</li>
</template>
<template v-if="tab === 'help'">
<!-- Help -->
<li class="headline">Help</li>
<li @click="toggleModal('reference')">
Reference Sheet
2020-06-10 22:37:17 +00:00
<em>[R]</em>
</li>
<li @click="toggleModal('nightOrder')">
Night Order Sheet
<em>[N]</em>
</li>
<li @click="toggleModal('gameState')">
Game State JSON
<em>G</em>
</li>
<li>
<a href="https://discord.gg/Gd7ybwWbFk" target="_blank">
Join Discord
</a>
2020-09-19 14:19:05 +00:00
<em>
<a href="https://discord.gg/Gd7ybwWbFk" target="_blank">
2020-09-19 14:19:05 +00:00
<font-awesome-icon :icon="['fab', 'discord']" />
</a>
</em>
</li>
<li>
<a href="https://github.com/bra1n/townsquare" target="_blank">
Source code
</a>
2020-09-19 14:19:05 +00:00
<em>
<a href="https://github.com/bra1n/townsquare" target="_blank">
<font-awesome-icon :icon="['fab', 'github']" />
</a>
</em>
</li>
</template>
2020-05-02 19:11:20 +00:00
</ul>
</div>
</div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
import Screenshot from "./Screenshot";
export default {
components: {
Screenshot
},
2020-05-08 17:33:29 +00:00
computed: {
...mapState(["grimoire", "session"]),
2020-05-08 17:33:29 +00:00
...mapState("players", ["players"])
},
data() {
return {
tab: "grimoire"
};
},
2020-05-02 19:11:20 +00:00
methods: {
takeScreenshot(dimensions = {}) {
this.$store.commit("updateScreenshot");
this.$refs.screenshot.capture(dimensions);
},
setBackground() {
const background = prompt("Enter custom background URL");
if (background || background === "") {
this.$store.commit("setBackground", background);
}
2020-05-02 19:11:20 +00:00
},
2020-05-08 17:33:29 +00:00
hostSession() {
const sessionId = prompt(
2020-05-30 20:01:42 +00:00
"Enter a channel number / name for your session",
2020-05-09 19:56:51 +00:00
Math.round(Math.random() * 10000)
2020-05-08 17:33:29 +00:00
);
if (sessionId) {
2020-12-06 21:27:52 +00:00
this.$store.commit("session/clearHistory");
2020-05-30 20:47:42 +00:00
this.$store.commit("session/setSpectator", false);
this.$store.commit(
2020-05-30 20:47:42 +00:00
"session/setSessionId",
sessionId
.toLocaleLowerCase()
.replace(/[^0-9a-z]/g, "")
.substr(0, 10)
);
this.copySessionUrl();
2020-05-08 17:33:29 +00:00
}
},
copySessionUrl() {
// check for clipboard permissions
navigator.permissions
.query({ name: "clipboard-write" })
.then(({ state }) => {
if (state === "granted" || state === "prompt") {
const url = window.location.href.split("#")[0];
const link = url + "#play/" + this.session.sessionId;
navigator.clipboard.writeText(link);
}
});
},
2020-05-08 17:33:29 +00:00
joinSession() {
const sessionId = prompt(
2020-05-30 20:01:42 +00:00
"Enter the channel number / name of the session you want to join"
2020-05-08 17:33:29 +00:00
);
if (sessionId) {
2020-12-06 21:27:52 +00:00
this.$store.commit("session/clearHistory");
2020-05-30 20:47:42 +00:00
this.$store.commit("session/setSpectator", true);
2020-12-02 19:39:12 +00:00
this.$store.commit("toggleGrimoire", false);
this.$store.commit(
2020-05-30 20:47:42 +00:00
"session/setSessionId",
sessionId
.toLocaleLowerCase()
.replace(/[^0-9a-z]/g, "")
.substr(0, 10)
);
2020-05-08 17:33:29 +00:00
}
},
leaveSession() {
if (confirm("Are you sure you want to leave the active live game?")) {
2020-05-30 20:47:42 +00:00
this.$store.commit("session/setSpectator", false);
this.$store.commit("session/setSessionId", "");
}
2020-05-08 17:33:29 +00:00
},
2020-05-02 19:11:20 +00:00
addPlayer() {
if (this.session.isSpectator) return;
2020-06-10 22:37:17 +00:00
if (this.players.length >= 20) return;
2020-05-02 19:11:20 +00:00
const name = prompt("Player name");
if (name) {
2020-05-03 21:05:17 +00:00
this.$store.commit("players/add", name);
2020-05-02 19:11:20 +00:00
}
},
randomizeSeatings() {
if (this.session.isSpectator) return;
2020-05-02 19:11:20 +00:00
if (confirm("Are you sure you want to randomize seatings?")) {
2020-05-03 21:05:17 +00:00
this.$store.dispatch("players/randomize");
2020-05-02 19:11:20 +00:00
}
},
clearPlayers() {
if (this.session.isSpectator) return;
2020-05-02 19:11:20 +00:00
if (confirm("Are you sure you want to remove all players?")) {
2020-05-03 21:05:17 +00:00
this.$store.commit("players/clear");
2020-05-02 19:11:20 +00:00
}
},
clearRoles() {
if (confirm("Are you sure you want to remove all player roles?")) {
2020-05-03 21:05:17 +00:00
this.$store.dispatch("players/clearRoles");
2020-05-02 19:11:20 +00:00
}
},
...mapMutations([
"toggleGrimoire",
2020-05-02 19:33:44 +00:00
"toggleMenu",
2020-12-02 19:39:12 +00:00
"toggleNight",
2020-05-02 19:11:20 +00:00
"toggleNightOrder",
"updateScreenshot",
2020-06-07 19:51:19 +00:00
"setZoom",
2020-05-02 19:11:20 +00:00
"toggleModal"
])
}
};
</script>
<style scoped lang="scss">
@import "../vars.scss";
2020-05-02 19:33:44 +00:00
// success animation
@keyframes greenToWhite {
from {
color: green;
}
to {
color: white;
}
}
2020-05-02 19:11:20 +00:00
// Controls
#controls {
position: absolute;
right: 3px;
top: 3px;
text-align: right;
padding-right: 50px;
2020-06-10 22:37:17 +00:00
z-index: 200;
2020-05-02 19:11:20 +00:00
#app.screenshot & {
display: none;
}
svg {
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
&.success {
animation: greenToWhite 1s normal forwards;
animation-iteration-count: 1;
}
}
> span {
display: inline-block;
cursor: pointer;
2020-05-02 19:11:20 +00:00
z-index: 5;
margin-top: 7px;
2020-05-12 20:22:36 +00:00
margin-left: 10px;
2020-05-02 19:11:20 +00:00
}
span.session {
color: $demon;
&.spectator {
color: $townsfolk;
}
&.reconnecting {
animation: blink 1s infinite;
}
}
}
@keyframes blink {
50% {
opacity: 0.5;
color: gray;
}
2020-05-02 19:11:20 +00:00
}
.menu {
2020-06-04 19:56:07 +00:00
width: 220px;
transform-origin: 200px 22px;
2020-05-02 19:11:20 +00:00
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
transform: rotate(-90deg);
position: absolute;
right: 0;
top: 0;
2020-05-02 19:11:20 +00:00
&.open {
transform: rotate(0deg);
}
> svg {
cursor: pointer;
2020-05-02 19:11:20 +00:00
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;
}
a {
color: white;
text-decoration: none;
&:hover {
color: red;
}
}
2020-05-02 19:11:20 +00:00
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 {
2020-06-04 19:56:07 +00:00
padding: 2px 5px;
2020-05-02 19:11:20 +00:00
color: white;
text-align: left;
background: rgba(0, 0, 0, 0.7);
2020-06-10 22:37:17 +00:00
display: flex;
align-items: center;
justify-content: space-between;
min-height: 30px;
2020-05-02 19:11:20 +00:00
&.tabs {
display: flex;
padding: 0;
svg {
flex-grow: 1;
flex-shrink: 0;
height: 35px;
border-bottom: 3px solid black;
border-right: 3px solid black;
padding: 5px 0;
cursor: pointer;
transition: color 250ms;
&:hover {
color: red;
}
&:last-child {
border-right: 0;
}
}
&.grimoire .fa-book-open,
&.players .fa-users,
&.characters .fa-theater-masks,
&.session .fa-broadcast-tower,
&.help .fa-question {
background: linear-gradient(
to bottom,
$townsfolk 0%,
rgba(0, 0, 0, 0.5) 100%
);
}
}
&:not(.headline):not(.tabs):hover {
2020-05-02 19:11:20 +00:00
cursor: pointer;
color: red;
}
em {
2020-06-10 22:37:17 +00:00
flex-grow: 0;
2020-05-02 19:11:20 +00:00
font-style: normal;
margin-left: 10px;
font-size: 80%;
}
}
.headline {
font-family: PiratesBay, sans-serif;
letter-spacing: 1px;
padding: 0 10px;
2020-05-02 19:11:20 +00:00
text-align: center;
2020-06-10 22:37:17 +00:00
justify-content: center;
2020-05-02 19:11:20 +00:00
background: linear-gradient(
to right,
2020-05-04 21:05:36 +00:00
$townsfolk 0%,
2020-05-02 19:11:20 +00:00
rgba(0, 0, 0, 0.5) 20%,
rgba(0, 0, 0, 0.5) 80%,
2020-05-04 21:05:36 +00:00
$demon 100%
2020-05-02 19:11:20 +00:00
);
}
}
}
</style>