martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
View File

File diff suppressed because it is too large Load Diff

30
package.json
View File

@ -2,22 +2,27 @@
"name": "townsquare", "name": "townsquare",
"version": "1.0.0", "version": "1.0.0",
"description": "Blood on the Clocktower Virtual Town Square", "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", "main": "App.vue",
"dependencies": { "dependencies": {
"@vue/cli-service": "^4.2.3",
"sass": "^1.26.3", "sass": "^1.26.3",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"@vue/cli-service": "^4.2.3",
"vue": "^2.3.3", "vue": "^2.3.3",
"vue-template-compiler": "^2.6.11" "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": [ "keywords": [
"botc", "botc",
@ -25,6 +30,9 @@
"vue", "vue",
"scss" "scss"
], ],
"author": "Steffen Baumgart", "license": "GPL-3.0",
"license": "GPL-3.0" "repository": {
"type": "git",
"url": "https://github.com//bra1n/townsquare.git"
}
} }

41
src/App.vue
View File

@ -8,9 +8,9 @@
</template> </template>
<script> <script>
import TownSquare from './components/TownSquare.vue' import TownSquare from "./components/TownSquare.vue";
export default { export default {
components: { components: {
TownSquare TownSquare
}, },
@ -18,45 +18,48 @@
isPublic: false isPublic: false
}), }),
methods: { methods: {
togglePublic () { togglePublic() {
this.isPublic = !this.isPublic; this.isPublic = !this.isPublic;
} }
} }
} };
</script> </script>
<style lang="scss"> <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"); /* 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- */ url("assets/fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
} }
html, body { html,
body {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4; line-height: 1.4;
background: url('assets/background.jpg') center center; background: url("assets/background.jpg") center center;
background-size: cover; background-size: cover;
color: white; color: white;
height: 100%; height: 100%;
font-family: 'Roboto Condensed', sans-serif; font-family: "Roboto Condensed", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#app { #app {
height: 100%; height: 100%;
} }
// Controls // Controls
.controls { .controls {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
} }
</style> </style>

37
src/components/Modal.vue
View File

@ -1,16 +1,17 @@
<script> <script>
export default { export default {
methods: { methods: {
close() { close() {
this.$emit('close'); this.$emit("close");
}, }
}, }
}; };
</script> </script>
<template> <template>
<transition name="modal-fade"> <transition name="modal-fade">
<div class="modal-backdrop" @click="close"> <div class="modal-backdrop" @click="close">
<div class="modal" <div
class="modal"
role="dialog" role="dialog"
aria-labelledby="modalTitle" aria-labelledby="modalTitle"
aria-describedby="modalDescription" aria-describedby="modalDescription"
@ -22,7 +23,7 @@
</transition> </transition>
</template> </template>
<style lang="scss"> <style lang="scss">
.modal-backdrop { .modal-backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -33,10 +34,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 100; z-index: 100;
} }
.modal { .modal {
background: rgba(0,0,0,0.8); background: rgba(0, 0, 0, 0.8);
padding: 10px 20px; padding: 10px 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 2px 2px 20px 1px #000; box-shadow: 2px 2px 20px 1px #000;
@ -49,15 +50,15 @@
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
} }
.modal-fade-enter, .modal-fade-enter,
.modal-fade-leave-active { .modal-fade-leave-active {
opacity: 0; opacity: 0;
} }
.modal-fade-enter-active, .modal-fade-enter-active,
.modal-fade-leave-active { .modal-fade-leave-active {
transition: opacity .2s ease transition: opacity 0.2s ease;
} }
</style> </style>

224
src/components/Player.vue
View File

@ -1,29 +1,42 @@
<template> <template>
<li> <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="shroud" @click="toggleStatus()"></div>
<div class="token" @click="changeRole()" :class="[player.role.id]"> <div class="token" @click="changeRole()" :class="[player.role.id]">
<span class="leaf-left" v-if="player.role.firstNight"></span> <span class="leaf-left" v-if="player.role.firstNight"></span>
<span class="leaf-right" v-if="player.role.otherNight"></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> <span class="leaf-orange" v-if="player.role.setup"></span>
<div>{{ player.role.name }}</div> <div>{{ player.role.name }}</div>
</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 class="name">{{ player.name }}</div>
</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-for="reminder in player.reminders"
v-bind:class="[reminder.role]" 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> <div class="reminder add" @click="$emit('add-reminder', player)"></div>
</li> </li>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
player: { player: {
type: Object, type: Object,
@ -38,46 +51,45 @@
required: true required: true
} }
}, },
data () { data() {
return {} return {};
}, },
methods: { methods: {
toggleStatus () { toggleStatus() {
if (!this.isPublic || !this.player.hasDied) { 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) { if (!this.player.hasDied) {
this.$set(this.player, 'hasVoted', false); this.$set(this.player, "hasVoted", false);
} }
} else { } else {
this.$set(this.player, 'hasVoted', !this.player.hasVoted); this.$set(this.player, "hasVoted", !this.player.hasVoted);
} }
}, },
changeRole () { changeRole() {
if (!this.isPublic) { if (!this.isPublic) {
this.$emit('set-role', this.player); this.$emit("set-role", this.player);
} else { } else {
this.toggleStatus(); this.toggleStatus();
} }
}, },
removeReminder (reminder) { removeReminder(reminder) {
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1); this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
} }
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
// token size
$token: 150px;
// token size /***** Player token *****/
$token: 150px; .circle .player {
/***** Player token *****/
.circle .player {
margin-bottom: 10px; margin-bottom: 10px;
.shroud { .shroud {
content: " "; content: " ";
background: url('../assets/shroud.png') center -10px no-repeat; background: url("../assets/shroud.png") center -10px no-repeat;
background-size: auto 100%; background-size: auto 100%;
position: absolute; position: absolute;
margin-left: -2/6 * $token; margin-left: -2/6 * $token;
@ -102,50 +114,54 @@
top: 0; top: 0;
transform: scale(1); transform: scale(1);
} }
&.dead .name { color: #999; } &.dead .name {
color: #999;
} }
}
#townsquare.public .player.dead { #townsquare.public .player.dead {
&:after { &:after {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
background: url('../assets/vote.png') center center no-repeat; background: url("../assets/vote.png") center center no-repeat;
background-size: 40%; background-size: 40%;
height: $token + 3px; height: $token + 3px;
pointer-events: none; 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 ******/ /***** Role token ******/
.circle .token { .circle .token {
border-radius: 50%; border-radius: 50%;
height: $token + 3px; height: $token + 3px;
width: $token + 3px; width: $token + 3px;
background: url('../assets/token.png') center center; background: url("../assets/token.png") center center;
background-size: 100%; background-size: 100%;
text-align: center; text-align: center;
position: relative; position: relative;
color: black; color: black;
margin: auto; margin: auto;
font-weight: 600; 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; padding-top: $token * 0.7;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Papyrus', serif; font-family: "Papyrus", serif;
border: 3px solid black; border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
&:before { &:before {
@ -166,46 +182,66 @@
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none; 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 { #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,
#townsquare.public .player.dead .token { &:after,
background-image: url('../assets/death.png'); span {
display: none;
} }
}
#townsquare.public .player.traveller .token { #townsquare.public .player.dead .token {
background-image: url("../assets/death.png");
}
#townsquare.public .player.traveller .token {
filter: grayscale(100%); filter: grayscale(100%);
} }
/***** Player name *****/ /***** Player name *****/
.name { .name {
font-size: 120%; font-size: 120%;
line-height: 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 *****/ /***** Ability text *****/
#townsquare.public .ability { display: none; } #townsquare.public .ability {
.circle .ability { display: none;
}
.circle .ability {
position: absolute; position: absolute;
padding: 5px 10px; padding: 5px 10px;
top: 20px; top: 20px;
@ -213,7 +249,7 @@
width: 200px; width: 200px;
z-index: 25; z-index: 25;
font-size: 80%; font-size: 80%;
background: rgba(0,0,0,0.7); background: rgba(0, 0, 0, 0.7);
border-radius: 10px; border-radius: 10px;
border: 3px solid black; border: 3px solid black;
text-align: left; text-align: left;
@ -229,13 +265,15 @@
top: 20px; top: 20px;
margin: 0 2px; margin: 0 2px;
} }
} }
.player:hover .ability { display: block; } .player:hover .ability {
display: block;
}
/***** Reminder token *****/ /***** Reminder token *****/
.circle .reminder { .circle .reminder {
background: url('../assets/reminder.png') center center; background: url("../assets/reminder.png") center center;
background-size: 100%; background-size: 100%;
width: $token / 2; width: $token / 2;
height: $token / 2; height: $token / 2;
@ -250,11 +288,12 @@
padding-top: $token * 0.3; padding-top: $token * 0.3;
border-radius: 50%; border-radius: 50%;
border: 3px solid black; border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 200ms; transition: all 200ms;
cursor: pointer; cursor: pointer;
&:before, &:after { &:before,
&:after {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
@ -264,26 +303,39 @@
background-size: 100%; background-size: 100%;
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('../assets/icons/plus.png'); background-image: url("../assets/icons/plus.png");
transition: opacity 200ms; transition: opacity 200ms;
} }
&:after { &:after {
background-image: url('../assets/icons/x.png'); background-image: url("../assets/icons/x.png");
opacity: 0; opacity: 0;
} }
&.add { &.add {
opacity: 0; opacity: 0;
top: 30px; top: 30px;
&:after { display: none; } &:after {
display: none;
}
} }
&:hover:before { opacity: 0; } &:hover:before {
&:hover:after { opacity: 1; } opacity: 0;
} }
.circle li:hover .reminder.add, { opacity: 1; top: 0; } &:hover:after {
.circle li:hover .reminder.add:before { opacity: 1; } 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> </style>

144
src/components/TownSquare.vue
View File

@ -14,9 +14,13 @@
<Modal v-show="availableReminders.length" @close="closeModal"> <Modal v-show="availableReminders.length" @close="closeModal">
<h2>Choose a reminder token:</h2> <h2>Choose a reminder token:</h2>
<ul class="reminders"> <ul class="reminders">
<li v-for="reminder in availableReminders" class="reminder" <li
v-for="reminder in availableReminders"
class="reminder"
v-bind:class="[reminder.role]" v-bind:class="[reminder.role]"
@click="addReminder(reminder)"> v-bind:key="reminder.role + ' ' + reminder.name"
@click="addReminder(reminder)"
>
{{ reminder.name }} {{ reminder.name }}
</li> </li>
</ul> </ul>
@ -24,9 +28,13 @@
<Modal v-show="availableRoles.length" @close="closeModal"> <Modal v-show="availableRoles.length" @close="closeModal">
<h2>Choose a new role:</h2> <h2>Choose a new role:</h2>
<ul class="tokens"> <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]" v-bind:class="[role.id, role.team]"
@click="setRole(role)"> v-bind:key="role.id"
@click="setRole(role)"
>
{{ role.name }} {{ role.name }}
</li> </li>
</ul> </ul>
@ -35,22 +43,30 @@
</template> </template>
<script> <script>
import rolesJSON from '../roles.json' import rolesJSON from "../roles.json";
import Player from './Player' import Player from "./Player";
import Modal from "./Modal"; 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 { export default {
components: { components: {
Modal, Modal,
Player Player
}, },
props: ['isPublic'], props: ["isPublic"],
data () { data() {
return { return {
players: [ 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: "Tino", role: roles.get("imp") },
{ name: "Basti", role: roles.get("chef"), reminders: [] }, { name: "Basti", role: roles.get("chef"), reminders: [] },
{ name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] }, { name: "Bernd", role: roles.get("ravenkeeper"), reminders: [] },
@ -59,57 +75,57 @@
{ name: "Marie", role: roles.get("empath"), reminders: [] }, { name: "Marie", role: roles.get("empath"), reminders: [] },
{ name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] }, { name: "Bogdan", role: roles.get("scarletwoman"), reminders: [] },
{ name: "Sean", role: roles.get("recluse"), reminders: [] }, { name: "Sean", role: roles.get("recluse"), reminders: [] },
{ name: "Petra", role: roles.get("undertaker"), reminders: [] }, { name: "Petra", role: roles.get("undertaker"), reminders: [] }
], ],
roles, roles,
selectedPlayer: false, selectedPlayer: false,
availableReminders: [], availableReminders: [],
availableRoles: [], availableRoles: []
} };
}, },
methods: { methods: {
openReminderModal (player) { openReminderModal(player) {
this.selectedPlayer = player; this.selectedPlayer = player;
this.availableReminders = []; this.availableReminders = [];
this.roles.forEach(role => { this.roles.forEach(role => {
if (this.players.some(p => p.role.id === role.id)) { if (this.players.some(p => p.role.id === role.id)) {
this.availableReminders = [ this.availableReminders = [
...this.availableReminders, ...this.availableReminders,
...role.reminders.map(name => ({role: role.id, name})) ...role.reminders.map(name => ({ role: role.id, name }))
]; ];
} }
}); });
}, },
openRoleModal (player) { openRoleModal(player) {
this.selectedPlayer = player; this.selectedPlayer = player;
this.availableRoles = []; this.availableRoles = [];
this.roles.forEach(role => { this.roles.forEach(role => {
if(role.id !== player.role) { if (role.id !== player.role) {
this.availableRoles.push(role); this.availableRoles.push(role);
} }
}); });
}, },
addReminder (reminder) { addReminder(reminder) {
this.selectedPlayer.reminders.push(reminder); this.selectedPlayer.reminders.push(reminder);
this.closeModal(); this.closeModal();
}, },
setRole (role) { setRole(role) {
this.selectedPlayer.role = role; this.selectedPlayer.role = role;
this.closeModal(); this.closeModal();
}, },
closeModal () { closeModal() {
this.selectedPlayer = false; this.selectedPlayer = false;
this.availableReminders = []; this.availableReminders = [];
this.availableRoles = []; this.availableRoles = [];
} }
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../roles.scss'; @import "../roles.scss";
@mixin on-circle($item-count) { @mixin on-circle($item-count) {
$angle: (360 / $item-count); $angle: (360 / $item-count);
$rot: 0; $rot: 0;
@ -119,7 +135,8 @@
@if $i - 1 <= $item-count / 2 { @if $i - 1 <= $item-count / 2 {
z-index: $item-count - $i + 1; z-index: $item-count - $i + 1;
.ability { .ability {
left: 100%; right: auto; left: 100%;
right: auto;
&:after { &:after {
border-left-color: transparent; border-left-color: transparent;
border-right-color: black; border-right-color: black;
@ -136,9 +153,9 @@
} }
$rot: $rot + $angle; $rot: $rot + $angle;
} }
} }
.circle { .circle {
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -165,35 +182,35 @@
width: 200px; width: 200px;
} }
} }
} }
@for $i from 5 through 20 { @for $i from 5 through 20 {
.circle.size-#{$i} li { .circle.size-#{$i} li {
@include on-circle($item-count: $i); @include on-circle($item-count: $i);
} }
} }
#townsquare { #townsquare {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
} }
// player circle // player circle
.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%; background-size: 10%;
} }
#townsquare.public .circle { #townsquare.public .circle {
background-image: url('../assets/demon-head.png'); background-image: url("../assets/demon-head.png");
} }
/***** Role token modal ******/ /***** Role token modal ******/
ul.tokens { ul.tokens {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -210,31 +227,35 @@
border-radius: 50%; border-radius: 50%;
height: 120px; height: 120px;
width: 120px; width: 120px;
background: url('../assets/token.png') center center; background: url("../assets/token.png") center center;
background-size: 100%; background-size: 100%;
text-align: center; text-align: center;
position: relative; position: relative;
color: black; color: black;
margin: 5px; margin: 5px;
font-weight: 600; 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; padding-top: 85px;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Papyrus', serif; font-family: "Papyrus", serif;
border: 3px solid black; border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
transition: transform 500ms ease; 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 { &:before {
content: " "; content: " ";
@ -250,14 +271,14 @@
transform: scale(1.2); transform: scale(1.2);
} }
} }
} }
/***** Reminder token modal ******/ /***** Reminder token modal ******/
ul.reminders { ul.reminders {
@extend .tokens; @extend .tokens;
.reminder { .reminder {
background: url('../assets/reminder.png') center center; background: url("../assets/reminder.png") center center;
background-size: 100%; background-size: 100%;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -270,7 +291,7 @@
position: relative; position: relative;
border-radius: 50%; border-radius: 50%;
border: 3px solid black; border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
padding-top: 65px; padding-top: 65px;
@ -292,6 +313,5 @@
transform: scale(1.2); transform: scale(1.2);
} }
} }
} }
</style> </style>

8
src/main.js
View File

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

4
vue.config.js
View File

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