eslint added

This commit is contained in:
Steffen 2020-04-05 19:50:33 +02:00
parent 66a68b96af
commit 5bcec74076
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
9 changed files with 1638 additions and 593 deletions

14
.eslintrc.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
ecmaVersion: 2020
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};

949
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2,22 +2,27 @@
"name": "townsquare",
"version": "1.0.0",
"description": "Blood on the Clocktower Virtual Town Square",
"author": "Steffen Baumgart",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build ./src/main.js",
"lint": "vue-cli-service lint"
},
"main": "App.vue",
"dependencies": {
"@vue/cli-service": "^4.2.3",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"@vue/cli-service": "^4.2.3",
"vue": "^2.3.3",
"vue-template-compiler": "^2.6.11"
},
"devDependencies": {},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build ./src/main.js"
},
"repository": {
"type": "git",
"url": "https://github.com//bra1n/townsquare.git"
"devDependencies": {
"@vue/cli-plugin-eslint": "^4.3.0",
"@vue/eslint-config-prettier": "^6.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1"
},
"keywords": [
"botc",
@ -25,6 +30,9 @@
"vue",
"scss"
],
"author": "Steffen Baumgart",
"license": "GPL-3.0"
"license": "GPL-3.0",
"repository": {
"type": "git",
"url": "https://github.com//bra1n/townsquare.git"
}
}

View File

@ -8,55 +8,58 @@
</template>
<script>
import TownSquare from './components/TownSquare.vue'
import TownSquare from "./components/TownSquare.vue";
export default {
components: {
TownSquare
},
data: () => ({
isPublic: false
}),
methods: {
togglePublic () {
this.isPublic = !this.isPublic;
}
export default {
components: {
TownSquare
},
data: () => ({
isPublic: false
}),
methods: {
togglePublic() {
this.isPublic = !this.isPublic;
}
}
};
</script>
<style lang="scss">
@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- */
}
@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- */
}
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;
}
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;
}
#app {
height: 100%;
}
#app {
height: 100%;
}
// Controls
.controls {
position: absolute;
right: 0;
top: 0;
}
// Controls
.controls {
position: absolute;
right: 0;
top: 0;
}
</style>

View File

@ -1,20 +1,21 @@
<script>
export default {
methods: {
close() {
this.$emit('close');
},
},
};
export default {
methods: {
close() {
this.$emit("close");
}
}
};
</script>
<template>
<transition name="modal-fade">
<div class="modal-backdrop" @click="close">
<div class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
@click.stop=""
<div
class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
@click.stop=""
>
<slot></slot>
</div>
@ -22,42 +23,42 @@
</transition>
</template>
<style lang="scss">
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background: rgba(0,0,0,0.8);
padding: 10px 20px;
border-radius: 10px;
box-shadow: 2px 2px 20px 1px #000;
overflow-x: auto;
display: flex;
flex-direction: column;
max-width: 60%;
.modal {
background: rgba(0, 0, 0, 0.8);
padding: 10px 20px;
border-radius: 10px;
box-shadow: 2px 2px 20px 1px #000;
overflow-x: auto;
display: flex;
flex-direction: column;
max-width: 60%;
h2 {
margin: 0;
text-align: center;
}
h2 {
margin: 0;
text-align: center;
}
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .2s ease
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.2s ease;
}
</style>

View File

@ -1,289 +1,341 @@
<template>
<li>
<div class="player"
:class="{ dead: player.hasDied, 'no-vote': player.hasVoted }">
<div
class="player"
:class="{ dead: player.hasDied, 'no-vote': player.hasVoted }"
>
<div class="shroud" @click="toggleStatus()"></div>
<div class="token" @click="changeRole()" :class="[player.role.id]">
<span class="leaf-left" v-if="player.role.firstNight"></span>
<span class="leaf-right" v-if="player.role.otherNight"></span>
<span v-if="player.role.reminders.length" v-bind:class="['leaf-top' + player.role.reminders.length]"></span>
<span
v-if="player.role.reminders.length"
v-bind:class="['leaf-top' + player.role.reminders.length]"
></span>
<span class="leaf-orange" v-if="player.role.setup"></span>
<div>{{ player.role.name }}</div>
</div>
<div class="ability" v-if="player.role.ability">{{ player.role.ability }}</div>
<div class="ability" v-if="player.role.ability">
{{ player.role.ability }}
</div>
<div class="name">{{ player.name }}</div>
</div>
<div class="reminder"
v-if="player.reminders"
v-for="reminder in player.reminders"
v-bind:class="[reminder.role]"
@click="removeReminder(reminder)">{{ reminder.name }}</div>
<template v-if="player.reminders">
<div
class="reminder"
v-bind:key="reminder.role + ' ' + reminder.name"
v-for="reminder in player.reminders"
v-bind:class="[reminder.role]"
@click="removeReminder(reminder)"
>
{{ reminder.name }}
</div>
</template>
<div class="reminder add" @click="$emit('add-reminder', player)"></div>
</li>
</template>
<script>
export default {
props: {
player: {
type: Object,
required: true
},
roles: {
type: Map,
required: true
},
isPublic: {
type: Boolean,
required: true
export default {
props: {
player: {
type: Object,
required: true
},
roles: {
type: Map,
required: true
},
isPublic: {
type: Boolean,
required: true
}
},
data() {
return {};
},
methods: {
toggleStatus() {
if (!this.isPublic || !this.player.hasDied) {
this.$set(this.player, "hasDied", !this.player.hasDied);
if (!this.player.hasDied) {
this.$set(this.player, "hasVoted", false);
}
} else {
this.$set(this.player, "hasVoted", !this.player.hasVoted);
}
},
data () {
return {}
},
methods: {
toggleStatus () {
if (!this.isPublic || !this.player.hasDied) {
this.$set(this.player, 'hasDied', !this.player.hasDied);
if (!this.player.hasDied) {
this.$set(this.player, 'hasVoted', false);
}
} else {
this.$set(this.player, 'hasVoted', !this.player.hasVoted);
}
},
changeRole () {
if (!this.isPublic) {
this.$emit('set-role', this.player);
} else {
this.toggleStatus();
}
},
removeReminder (reminder) {
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
changeRole() {
if (!this.isPublic) {
this.$emit("set-role", this.player);
} else {
this.toggleStatus();
}
},
removeReminder(reminder) {
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
}
}
};
</script>
<style lang="scss">
// token size
$token: 150px;
// token size
$token: 150px;
/***** Player token *****/
.circle .player {
margin-bottom: 10px;
/***** Player token *****/
.circle .player {
margin-bottom: 10px;
.shroud {
content: " ";
background: url('../assets/shroud.png') center -10px no-repeat;
background-size: auto 100%;
position: absolute;
margin-left: -2/6 * $token;
width: 2/3 * $token;
height: 2/3 * $token;
left: 50%;
top: -30px;
cursor: pointer;
opacity: 0;
transform: scale(1.5);
transition: all 200ms;
z-index: 2;
&:hover {
opacity: 0.5;
top: -10px;
transform: scale(1);
}
}
&.dead .shroud {
opacity: 1;
top: 0;
.shroud {
content: " ";
background: url("../assets/shroud.png") center -10px no-repeat;
background-size: auto 100%;
position: absolute;
margin-left: -2/6 * $token;
width: 2/3 * $token;
height: 2/3 * $token;
left: 50%;
top: -30px;
cursor: pointer;
opacity: 0;
transform: scale(1.5);
transition: all 200ms;
z-index: 2;
&:hover {
opacity: 0.5;
top: -10px;
transform: scale(1);
}
&.dead .name { color: #999; }
}
#townsquare.public .player.dead {
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: url('../assets/vote.png') center center no-repeat;
background-size: 40%;
height: $token + 3px;
pointer-events: none;
}
&.traveller:after { filter: grayscale(100%); }
&.no-vote:after { display: none; }
&.dead .shroud {
opacity: 1;
top: 0;
transform: scale(1);
}
&.dead .name {
color: #999;
}
}
#townsquare.public .player .shroud { display: none; }
/***** Role token ******/
.circle .token {
border-radius: 50%;
#townsquare.public .player.dead {
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: url("../assets/vote.png") center center no-repeat;
background-size: 40%;
height: $token + 3px;
width: $token + 3px;
background: url('../assets/token.png') center center;
background-size: 100%;
text-align: center;
position: relative;
color: black;
margin: auto;
font-weight: 600;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
0 0 5px rgba(0,0,0,0.75);
padding-top: $token * 0.7;
box-sizing: border-box;
font-family: 'Papyrus', serif;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
&:before {
content: " ";
background-size: 100%;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
span {
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
left: 0;
top: 0;
pointer-events: none;
&.leaf-left { background-image: url('../assets/leaf-left.png'); }
&.leaf-orange { background-image: url('../assets/leaf-orange.png'); }
&.leaf-right { background-image: url('../assets/leaf-right.png'); }
&.leaf-top1 { background-image: url('../assets/leaf-top1.png'); }
&.leaf-top2 { background-image: url('../assets/leaf-top2.png'); }
&.leaf-top3 { background-image: url('../assets/leaf-top3.png'); }
&.leaf-top4 { background-image: url('../assets/leaf-top4.png'); }
&.leaf-top5 { background-image: url('../assets/leaf-top5.png'); }
}
pointer-events: none;
}
#townsquare.public .token {
background-image: url('../assets/life.png');
div { display: none; }
&:before, &:after, span { display: none; }
}
#townsquare.public .player.dead .token {
background-image: url('../assets/death.png');
}
#townsquare.public .player.traveller .token {
&.traveller:after {
filter: grayscale(100%);
}
/***** Player name *****/
.name {
font-size: 120%;
line-height: 120%;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
0 0 10px rgba(0,0,0,0.75);
}
/***** Ability text *****/
#townsquare.public .ability { display: none; }
.circle .ability {
position: absolute;
padding: 5px 10px;
top: 20px;
right: 100%;
width: 200px;
z-index: 25;
font-size: 80%;
background: rgba(0,0,0,0.7);
border-radius: 10px;
border: 3px solid black;
text-align: left;
&.no-vote:after {
display: none;
&:after {
content: " ";
border: 10px solid transparent;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-left-color: black;
top: 20px;
margin: 0 2px;
}
}
}
.player:hover .ability { display: block; }
#townsquare.public .player .shroud {
display: none;
}
/***** Reminder token *****/
.circle .reminder {
background: url('../assets/reminder.png') center center;
/***** Role token ******/
.circle .token {
border-radius: 50%;
height: $token + 3px;
width: $token + 3px;
background: url("../assets/token.png") center center;
background-size: 100%;
text-align: center;
position: relative;
color: black;
margin: auto;
font-weight: 600;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
padding-top: $token * 0.7;
box-sizing: border-box;
font-family: "Papyrus", serif;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
&:before {
content: " ";
background-size: 100%;
width: $token / 2;
height: $token / 2;
color: black;
font-size: 50%;
font-weight: bold;
display: block;
margin: 5px ($token / -4) 0;
text-align: center;
position: relative;
box-sizing: border-box;
padding-top: $token * 0.3;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: all 200ms;
cursor: pointer;
&:before, &:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center 0;
background-repeat: no-repeat;
background-image: url('../assets/icons/plus.png');
transition: opacity 200ms;
}
&:after {
background-image: url('../assets/icons/x.png');
opacity: 0;
}
&.add {
opacity: 0;
top: 30px;
&:after { display: none; }
}
&:hover:before { opacity: 0; }
&:hover:after { opacity: 1; }
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.circle li:hover .reminder.add, { opacity: 1; top: 0; }
.circle li:hover .reminder.add:before { opacity: 1; }
#townsquare.public .reminder { display: none; }
span {
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
left: 0;
top: 0;
pointer-events: none;
&.leaf-left {
background-image: url("../assets/leaf-left.png");
}
&.leaf-orange {
background-image: url("../assets/leaf-orange.png");
}
&.leaf-right {
background-image: url("../assets/leaf-right.png");
}
&.leaf-top1 {
background-image: url("../assets/leaf-top1.png");
}
&.leaf-top2 {
background-image: url("../assets/leaf-top2.png");
}
&.leaf-top3 {
background-image: url("../assets/leaf-top3.png");
}
&.leaf-top4 {
background-image: url("../assets/leaf-top4.png");
}
&.leaf-top5 {
background-image: url("../assets/leaf-top5.png");
}
}
}
#townsquare.public .token {
background-image: url("../assets/life.png");
div {
display: none;
}
&:before,
&:after,
span {
display: none;
}
}
#townsquare.public .player.dead .token {
background-image: url("../assets/death.png");
}
#townsquare.public .player.traveller .token {
filter: grayscale(100%);
}
/***** Player name *****/
.name {
font-size: 120%;
line-height: 120%;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.75);
}
/***** Ability text *****/
#townsquare.public .ability {
display: none;
}
.circle .ability {
position: absolute;
padding: 5px 10px;
top: 20px;
right: 100%;
width: 200px;
z-index: 25;
font-size: 80%;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
border: 3px solid black;
text-align: left;
display: none;
&:after {
content: " ";
border: 10px solid transparent;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-left-color: black;
top: 20px;
margin: 0 2px;
}
}
.player:hover .ability {
display: block;
}
/***** Reminder token *****/
.circle .reminder {
background: url("../assets/reminder.png") center center;
background-size: 100%;
width: $token / 2;
height: $token / 2;
color: black;
font-size: 50%;
font-weight: bold;
display: block;
margin: 5px ($token / -4) 0;
text-align: center;
position: relative;
box-sizing: border-box;
padding-top: $token * 0.3;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 200ms;
cursor: pointer;
&:before,
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center 0;
background-repeat: no-repeat;
background-image: url("../assets/icons/plus.png");
transition: opacity 200ms;
}
&:after {
background-image: url("../assets/icons/x.png");
opacity: 0;
}
&.add {
opacity: 0;
top: 30px;
&:after {
display: none;
}
}
&:hover:before {
opacity: 0;
}
&:hover:after {
opacity: 1;
}
}
.circle li:hover .reminder.add {
opacity: 1;
top: 0;
}
.circle li:hover .reminder.add:before {
opacity: 1;
}
#townsquare.public .reminder {
display: none;
}
</style>

View File

@ -1,22 +1,26 @@
<template>
<div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
<div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
<ul class="circle" v-bind:class="['size-' + players.length]">
<Player
v-for="player in players"
:key="player.name"
:player="player"
:roles="roles"
:is-public="isPublic"
@add-reminder="openReminderModal"
@set-role="openRoleModal"
v-for="player in players"
:key="player.name"
:player="player"
:roles="roles"
:is-public="isPublic"
@add-reminder="openReminderModal"
@set-role="openRoleModal"
></Player>
</ul>
<Modal v-show="availableReminders.length" @close="closeModal">
<h2>Choose a reminder token:</h2>
<ul class="reminders">
<li v-for="reminder in availableReminders" class="reminder"
v-bind:class="[reminder.role]"
@click="addReminder(reminder)">
<li
v-for="reminder in availableReminders"
class="reminder"
v-bind:class="[reminder.role]"
v-bind:key="reminder.role + ' ' + reminder.name"
@click="addReminder(reminder)"
>
{{ reminder.name }}
</li>
</ul>
@ -24,9 +28,13 @@
<Modal v-show="availableRoles.length" @close="closeModal">
<h2>Choose a new role:</h2>
<ul class="tokens">
<li v-for="role in availableRoles" class="token"
v-bind:class="[role.id, role.team]"
@click="setRole(role)">
<li
v-for="role in availableRoles"
class="token"
v-bind:class="[role.id, role.team]"
v-bind:key="role.id"
@click="setRole(role)"
>
{{ role.name }}
</li>
</ul>
@ -35,263 +43,275 @@
</template>
<script>
import rolesJSON from '../roles.json'
import Player from './Player'
import Modal from "./Modal";
import rolesJSON from "../roles.json";
import Player from "./Player";
import Modal from "./Modal";
const roles = new Map(rolesJSON.sort((a, b) => b.team.localeCompare(a.team)).map(role => [role.id, role]));
const roles = new Map(
rolesJSON
.sort((a, b) => b.team.localeCompare(a.team))
.map(role => [role.id, role])
);
export default {
components: {
Modal,
Player
export default {
components: {
Modal,
Player
},
props: ["isPublic"],
data() {
return {
players: [
{
name: "Steffen",
role: roles.get("baron"),
reminders: [{ role: "imp", name: "Die" }]
},
{ name: "Tino", role: roles.get("imp") },
{ name: "Basti", role: roles.get("chef"), reminders: [] },
{ name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
{ name: "Tim", role: roles.get("drunk"), reminders: [] },
{ name: "Yann", role: roles.get("librarian"), reminders: [] },
{ name: "Marie", role: roles.get("empath"), reminders: [] },
{ name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
{ name: "Sean", role: roles.get("recluse"), reminders: [] },
{ name: "Petra", role: roles.get("undertaker"), reminders: [] }
],
roles,
selectedPlayer: false,
availableReminders: [],
availableRoles: []
};
},
methods: {
openReminderModal(player) {
this.selectedPlayer = player;
this.availableReminders = [];
this.roles.forEach(role => {
if (this.players.some(p => p.role.id === role.id)) {
this.availableReminders = [
...this.availableReminders,
...role.reminders.map(name => ({ role: role.id, name }))
];
}
});
},
props: ['isPublic'],
data () {
return {
players: [
{ name: "Steffen", role: roles.get('baron'), reminders: [{ role: 'imp', name: 'Die' }] },
{ name: "Tino", role: roles.get("imp") },
{ name: "Basti", role: roles.get("chef"), reminders: [] },
{ name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
{ name: "Tim", role: roles.get("drunk"), reminders: [] },
{ name: "Yann", role: roles.get("librarian"), reminders: [] },
{ name: "Marie", role: roles.get("empath"), reminders: [] },
{ name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
{ name: "Sean", role: roles.get("recluse"), reminders: [] },
{ name: "Petra", role: roles.get("undertaker"), reminders: [] },
],
roles,
selectedPlayer: false,
availableReminders: [],
availableRoles: [],
}
openRoleModal(player) {
this.selectedPlayer = player;
this.availableRoles = [];
this.roles.forEach(role => {
if (role.id !== player.role) {
this.availableRoles.push(role);
}
});
},
methods: {
openReminderModal (player) {
this.selectedPlayer = player;
this.availableReminders = [];
this.roles.forEach(role => {
if (this.players.some(p => p.role.id === role.id)) {
this.availableReminders = [
...this.availableReminders,
...role.reminders.map(name => ({role: role.id, name}))
];
}
});
},
openRoleModal (player) {
this.selectedPlayer = player;
this.availableRoles = [];
this.roles.forEach(role => {
if(role.id !== player.role) {
this.availableRoles.push(role);
}
});
},
addReminder (reminder) {
this.selectedPlayer.reminders.push(reminder);
this.closeModal();
},
setRole (role) {
this.selectedPlayer.role = role;
this.closeModal();
},
closeModal () {
this.selectedPlayer = false;
this.availableReminders = [];
this.availableRoles = [];
}
addReminder(reminder) {
this.selectedPlayer.reminders.push(reminder);
this.closeModal();
},
setRole(role) {
this.selectedPlayer.role = role;
this.closeModal();
},
closeModal() {
this.selectedPlayer = false;
this.availableReminders = [];
this.availableRoles = [];
}
}
};
</script>
<style lang="scss">
@import '../roles.scss';
@import "../roles.scss";
@mixin on-circle($item-count) {
$angle: (360 / $item-count);
$rot: 0;
@mixin on-circle($item-count) {
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-child(#{$i}) {
transform: rotate($rot * 1deg);
@if $i - 1 <= $item-count / 2 {
z-index: $item-count - $i + 1;
.ability {
left: 100%; right: auto;
&:after {
border-left-color: transparent;
border-right-color: black;
left: auto;
right: 100%;
}
@for $i from 1 through $item-count {
&:nth-child(#{$i}) {
transform: rotate($rot * 1deg);
@if $i - 1 <= $item-count / 2 {
z-index: $item-count - $i + 1;
.ability {
left: 100%;
right: auto;
&:after {
border-left-color: transparent;
border-right-color: black;
left: auto;
right: 100%;
}
} @else {
z-index: $i - 1;
}
> * {
transform: rotate($rot * -1deg);
}
} @else {
z-index: $i - 1;
}
$rot: $rot + $angle;
}
}
.circle {
padding: 0;
width: 100%;
height: 100%;
list-style: none;
overflow: hidden;
position: relative;
margin: 0;
box-sizing: border-box;
li {
position: absolute;
top: 0;
left: 50%;
height: 50%;
transform-origin: 0 100%;
text-align: center;
&:hover {
z-index: 25 !important;
}
> * {
margin-left: -100px;
width: 200px;
transform: rotate($rot * -1deg);
}
}
$rot: $rot + $angle;
}
}
@for $i from 5 through 20 {
.circle.size-#{$i} li {
@include on-circle($item-count: $i);
.circle {
padding: 0;
width: 100%;
height: 100%;
list-style: none;
overflow: hidden;
position: relative;
margin: 0;
box-sizing: border-box;
li {
position: absolute;
top: 0;
left: 50%;
height: 50%;
transform-origin: 0 100%;
text-align: center;
&:hover {
z-index: 25 !important;
}
> * {
margin-left: -100px;
width: 200px;
}
}
}
#townsquare {
width: 100%;
height: 100%;
@for $i from 5 through 20 {
.circle.size-#{$i} li {
@include on-circle($item-count: $i);
}
}
#townsquare {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
}
// player circle
.circle {
background: url("../assets/demon-head2.png") center center no-repeat;
background-size: 10%;
}
#townsquare.public .circle {
background-image: url("../assets/demon-head.png");
}
/***** Role token modal ******/
ul.tokens {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
overflow: hidden;
justify-content: center;
font-size: 75%;
line-height: 100%;
.token {
border-radius: 50%;
height: 120px;
width: 120px;
background: url("../assets/token.png") center center;
background-size: 100%;
text-align: center;
position: relative;
color: black;
margin: 5px;
font-weight: 600;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
padding-top: 85px;
box-sizing: border-box;
font-family: "Papyrus", serif;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: transform 500ms ease;
&.townsfolk {
box-shadow: 0 0 10px #004cff, 0 0 10px #004cff;
}
&.outsider {
box-shadow: 0 0 10px #00d6ff, 0 0 10px #00d6ff;
}
&.minion {
box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900;
}
&.demon {
box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000;
}
&:before {
content: " ";
background-size: 100%;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
&:hover {
transform: scale(1.2);
}
}
}
/***** Reminder token modal ******/
ul.reminders {
@extend .tokens;
.reminder {
background: url("../assets/reminder.png") center center;
background-size: 100%;
width: 100px;
height: 100px;
color: black;
font-size: 65%;
font-weight: bold;
display: block;
margin: 5px;
text-align: center;
position: relative;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
box-sizing: border-box;
padding: 20px;
}
padding-top: 65px;
transition: transform 500ms ease;
// player circle
.circle {
background: url('../assets/demon-head2.png') center center no-repeat;
background-size: 10%;
}
#townsquare.public .circle {
background-image: url('../assets/demon-head.png');
}
/***** Role token modal ******/
ul.tokens {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
overflow: hidden;
justify-content: center;
font-size: 75%;
line-height: 100%;
.token {
border-radius: 50%;
height: 120px;
width: 120px;
background: url('../assets/token.png') center center;
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
text-align: center;
position: relative;
color: black;
margin: 5px;
font-weight: 600;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
0 0 5px rgba(0,0,0,0.75);
padding-top: 85px;
box-sizing: border-box;
font-family: 'Papyrus', serif;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
transition: transform 500ms ease;
background-position: center 0;
background-repeat: no-repeat;
}
&.townsfolk { box-shadow: 0 0 10px #004cff, 0 0 10px #004cff; }
&.outsider { box-shadow: 0 0 10px #00D6FF, 0 0 10px #00d6ff; }
&.minion { box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900; }
&.demon { box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000; }
&:before {
content: " ";
background-size: 100%;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
&:hover {
transform: scale(1.2);
}
&:hover {
transform: scale(1.2);
}
}
/***** Reminder token modal ******/
ul.reminders {
@extend .tokens;
.reminder {
background: url('../assets/reminder.png') center center;
background-size: 100%;
width: 100px;
height: 100px;
color: black;
font-size: 65%;
font-weight: bold;
display: block;
margin: 5px;
text-align: center;
position: relative;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
box-sizing: border-box;
padding-top: 65px;
transition: transform 500ms ease;
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center 0;
background-repeat: no-repeat;
}
&:hover {
transform: scale(1.2);
}
}
}
}
</style>

View File

@ -1,8 +1,8 @@
import Vue from 'vue'
import App from './App'
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')
render: h => h(App)
}).$mount("#app");

View File

@ -1,5 +1,3 @@
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/townsquare/'
: '/'
publicPath: process.env.NODE_ENV === "production" ? "/townsquare/" : "/"
};