eslint added

.eslintrc.js

@@ -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"
+  }
+};

package.json

@@ -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": {},
+  "devDependencies": {
-  "scripts": {
+    "@vue/cli-plugin-eslint": "^4.3.0",
-    "serve": "vue-cli-service serve",
+    "@vue/eslint-config-prettier": "^6.0.0",
-    "build": "vue-cli-service build ./src/main.js"
+    "eslint": "^6.7.2",
-  },
+    "eslint-plugin-prettier": "^3.1.1",
-  "repository": {
+    "eslint-plugin-vue": "^6.2.2",
-    "type": "git",
+    "prettier": "^1.19.1"
-    "url": "https://github.com//bra1n/townsquare.git"
   },
   "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"
+  }
 }

src/App.vue

@@ -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 */
+  src: url("assets/fonts/papyrus.eot?#iefix") format("embedded-opentype"),
-    url("assets/fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
+    /* IE6-IE8 */ url("assets/fonts/papyrus.woff2") format("woff2"),
-    url("assets/fonts/papyrus.woff") format("woff"), /* chrome firefox */
+    /* chrome firefox */ url("assets/fonts/papyrus.woff") format("woff"),
-    url("assets/fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
+    /* 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;

src/components/Modal.vue

@@ -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>

src/components/Player.vue

@@ -1,23 +1,36 @@
 <template>
   <li>
-    <div class="player"
+    <div
-         :class="{ dead: player.hasDied, 'no-vote': player.hasVoted }">
+      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"
+    <template v-if="player.reminders">
-         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%); }
+  &.traveller:after {
-    &.no-vote:after { display: none; }
+    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:
+  text-shadow: -1px -1px 0 #fff, 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);
-        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-left {
-      &.leaf-orange { background-image: url('../assets/leaf-orange.png'); }
+      background-image: url("../assets/leaf-left.png");
-      &.leaf-right { background-image: url('../assets/leaf-right.png'); }
+    }
-      &.leaf-top1 { background-image: url('../assets/leaf-top1.png'); }
+    &.leaf-orange {
-      &.leaf-top2 { background-image: url('../assets/leaf-top2.png'); }
+      background-image: url("../assets/leaf-orange.png");
-      &.leaf-top3 { background-image: url('../assets/leaf-top3.png'); }
+    }
-      &.leaf-top4 { background-image: url('../assets/leaf-top4.png'); }
+    &.leaf-right {
-      &.leaf-top5 { background-image: url('../assets/leaf-top5.png'); }
+      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');
+  background-image: url("../assets/life.png");
-    div { display: none; }
+  div {
-    &:before, &:after, span { display: none; }
+    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:
+  text-shadow: -2px -2px 0 #000, 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);
-        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:before {
-    &:hover:after { opacity: 1; }
+    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>

src/components/TownSquare.vue

@@ -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 rolesJSON from "../roles.json";
-  import Player from './Player'
+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:
+    text-shadow: -1px -1px 0 #fff, 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);
-          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; }
+    &.townsfolk {
-      &.outsider { box-shadow: 0 0 10px #00D6FF, 0 0 10px #00d6ff; }
+      box-shadow: 0 0 10px #004cff, 0 0 10px #004cff;
-      &.minion { box-shadow: 0 0 10px #ff6900, 0 0 10px #ff6900; }
+    }
-      &.demon { box-shadow: 0 0 10px #ff0000, 0 0 10px #ff0000; }
+    &.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>

src/main.js

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

vue.config.js

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