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,7 +8,7 @@
</template>
<script>
import TownSquare from './components/TownSquare.vue'
import TownSquare from "./components/TownSquare.vue";
export default {
components: {
@ -22,27 +22,30 @@
this.isPublic = !this.isPublic;
}
}
}
};
</script>
<style lang="scss">
@font-face { font-family: "Papyrus";
@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+*/
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 {
html,
body {
font-size: 1.2em;
line-height: 1.4;
background: url('assets/background.jpg') center center;
background: url("assets/background.jpg") center center;
background-size: cover;
color: white;
height: 100%;
font-family: 'Roboto Condensed', sans-serif;
font-family: "Roboto Condensed", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0;

View File

@ -2,15 +2,16 @@
export default {
methods: {
close() {
this.$emit('close');
},
},
this.$emit("close");
}
}
};
</script>
<template>
<transition name="modal-fade">
<div class="modal-backdrop" @click="close">
<div class="modal"
<div
class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
@ -58,6 +59,6 @@
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .2s ease
transition: opacity 0.2s ease;
}
</style>

View File

@ -1,23 +1,36 @@
<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"
<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>
@click="removeReminder(reminder)"
>
{{ reminder.name }}
</div>
</template>
<div class="reminder add" @click="$emit('add-reminder', player)"></div>
</li>
</template>
@ -39,22 +52,22 @@
}
},
data() {
return {}
return {};
},
methods: {
toggleStatus() {
if (!this.isPublic || !this.player.hasDied) {
this.$set(this.player, 'hasDied', !this.player.hasDied);
this.$set(this.player, "hasDied", !this.player.hasDied);
if (!this.player.hasDied) {
this.$set(this.player, 'hasVoted', false);
this.$set(this.player, "hasVoted", false);
}
} else {
this.$set(this.player, 'hasVoted', !this.player.hasVoted);
this.$set(this.player, "hasVoted", !this.player.hasVoted);
}
},
changeRole() {
if (!this.isPublic) {
this.$emit('set-role', this.player);
this.$emit("set-role", this.player);
} else {
this.toggleStatus();
}
@ -63,11 +76,10 @@
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
}
}
}
};
</script>
<style lang="scss">
// token size
$token: 150px;
@ -77,7 +89,7 @@
.shroud {
content: " ";
background: url('../assets/shroud.png') center -10px no-repeat;
background: url("../assets/shroud.png") center -10px no-repeat;
background-size: auto 100%;
position: absolute;
margin-left: -2/6 * $token;
@ -102,7 +114,9 @@
top: 0;
transform: scale(1);
}
&.dead .name { color: #999; }
&.dead .name {
color: #999;
}
}
#townsquare.public .player.dead {
@ -112,38 +126,40 @@
left: 0;
top: 0;
width: 100%;
background: url('../assets/vote.png') center center no-repeat;
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; }
&.traveller:after {
filter: grayscale(100%);
}
&.no-vote:after {
display: none;
}
}
#townsquare.public .player .shroud { display: none; }
#townsquare.public .player .shroud {
display: none;
}
/***** Role token ******/
.circle .token {
border-radius: 50%;
height: $token + 3px;
width: $token + 3px;
background: url('../assets/token.png') center center;
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);
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;
font-family: "Papyrus", serif;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
@ -166,25 +182,47 @@
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'); }
&.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; }
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');
background-image: url("../assets/death.png");
}
#townsquare.public .player.traveller .token {
@ -195,16 +233,14 @@
.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);
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; }
#townsquare.public .ability {
display: none;
}
.circle .ability {
position: absolute;
padding: 5px 10px;
@ -231,11 +267,13 @@
}
}
.player:hover .ability { display: block; }
.player:hover .ability {
display: block;
}
/***** Reminder token *****/
.circle .reminder {
background: url('../assets/reminder.png') center center;
background: url("../assets/reminder.png") center center;
background-size: 100%;
width: $token / 2;
height: $token / 2;
@ -254,7 +292,8 @@
transition: all 200ms;
cursor: pointer;
&:before, &:after {
&:before,
&:after {
content: " ";
position: absolute;
left: 0;
@ -264,26 +303,39 @@
background-size: 100%;
background-position: center 0;
background-repeat: no-repeat;
background-image: url('../assets/icons/plus.png');
background-image: url("../assets/icons/plus.png");
transition: opacity 200ms;
}
&:after {
background-image: url('../assets/icons/x.png');
background-image: url("../assets/icons/x.png");
opacity: 0;
}
&.add {
opacity: 0;
top: 30px;
&:after { display: none; }
&:after {
display: none;
}
}
&:hover:before { opacity: 0; }
&:hover:after { opacity: 1; }
&: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;
}
.circle li:hover .reminder.add, { opacity: 1; top: 0; }
.circle li:hover .reminder.add:before { opacity: 1; }
#townsquare.public .reminder { display: none; }
#townsquare.public .reminder {
display: none;
}
</style>

View File

@ -14,9 +14,13 @@
<Modal v-show="availableReminders.length" @close="closeModal">
<h2>Choose a reminder token:</h2>
<ul class="reminders">
<li v-for="reminder in availableReminders" class="reminder"
<li
v-for="reminder in availableReminders"
class="reminder"
v-bind:class="[reminder.role]"
@click="addReminder(reminder)">
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"
<li
v-for="role in availableRoles"
class="token"
v-bind:class="[role.id, role.team]"
@click="setRole(role)">
v-bind:key="role.id"
@click="setRole(role)"
>
{{ role.name }}
</li>
</ul>
@ -35,22 +43,30 @@
</template>
<script>
import rolesJSON from '../roles.json'
import Player from './Player'
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
},
props: ['isPublic'],
props: ["isPublic"],
data() {
return {
players: [
{ name: "Steffen", role: roles.get('baron'), reminders: [{ role: 'imp', name: 'Die' }] },
{
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: [] },
@ -59,13 +75,13 @@
{ 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: [] },
{ name: "Petra", role: roles.get("undertaker"), reminders: [] }
],
roles,
selectedPlayer: false,
availableReminders: [],
availableRoles: [],
}
availableRoles: []
};
},
methods: {
openReminderModal(player) {
@ -103,11 +119,11 @@
this.availableRoles = [];
}
}
}
};
</script>
<style lang="scss">
@import '../roles.scss';
@import "../roles.scss";
@mixin on-circle($item-count) {
$angle: (360 / $item-count);
@ -119,7 +135,8 @@
@if $i - 1 <= $item-count / 2 {
z-index: $item-count - $i + 1;
.ability {
left: 100%; right: auto;
left: 100%;
right: auto;
&:after {
border-left-color: transparent;
border-right-color: black;
@ -184,12 +201,12 @@
// player circle
.circle {
background: url('../assets/demon-head2.png') center center no-repeat;
background: url("../assets/demon-head2.png") center center no-repeat;
background-size: 10%;
}
#townsquare.public .circle {
background-image: url('../assets/demon-head.png');
background-image: url("../assets/demon-head.png");
}
/***** Role token modal ******/
@ -210,31 +227,35 @@
border-radius: 50%;
height: 120px;
width: 120px;
background: url('../assets/token.png') center center;
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);
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;
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; }
&.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: " ";
@ -257,7 +278,7 @@
@extend .tokens;
.reminder {
background: url('../assets/reminder.png') center center;
background: url("../assets/reminder.png") center center;
background-size: 100%;
width: 100px;
height: 100px;
@ -293,5 +314,4 @@
}
}
}
</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/" : "/"
};