added vue

This commit is contained in:
Steffen 2020-04-01 22:57:14 +02:00
parent b99fc6a3e5
commit 74a8280333
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
17 changed files with 775 additions and 3243 deletions

66
App.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="square" id="townsquare" v-bind:class="{ public: isPublic }">
<TownSquare :is-public="isPublic"></TownSquare>
<div class="controls">
<button v-on:click="togglePublic">Toggle</button>
</div>
</div>
</template>
<script>
import TownSquare from './components/TownSquare.vue'
export default {
components: {
TownSquare
},
data: () => ({
isPublic: false
}),
methods: {
togglePublic () {
this.isPublic = !this.isPublic;
}
}
}
</script>
<style lang="scss">
@font-face { font-family: "Papyrus";
src: url("fonts/papyrus.eot"); /* IE9*/
src: url("fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
url("fonts/papyrus.woff") format("woff"), /* chrome firefox */
url("fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
url("fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
}
html, body {
font-size: 1.2em;
line-height: 1.4;
background: url('img/background.jpg') center center;
background-size: cover;
color: white;
height: 100%;
font-family: 'Roboto Condensed', sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
padding: 0;
margin: 0;
}
#townsquare {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
}
// Controls
.controls {
position: absolute;
right: 0;
top: 0;
}
</style>

241
components/Player.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<li>
<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]">
<span class="leaf-left" v-if="role.firstNight"></span>
<span class="leaf-right" v-if="role.otherNight"></span>
<span v-if="role.reminders.length" v-bind:class="['leaf-top' + role.reminders.length]"></span>
<span class="leaf-orange" v-if="role.setup"></span>
</div>
<div class="name">{{ player.name }}</div>
</div>
<div class="reminder add"></div>
</li>
</template>
<script>
export default {
props: {
player: {
type: Object,
required: true
},
roles: {
type: Map,
required: true
},
isPublic: {
type: Boolean,
required: true
}
},
data () {
return {
role: this.roles.get(this.player.role)
}
},
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) {
console.log('role change');
} else {
this.toggleStatus();
}
}
}
}
</script>
<style lang="scss">
@import '../roles.scss';
// token size
$token: 150px;
/***** Player token *****/
.circle .player {
margin-bottom: 10px;
.shroud {
content: " ";
background: url('../img/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: 0;
cursor: pointer;
opacity: 0;
transition: opacity 200ms;
z-index: 2;
&:hover { opacity: 0.5; }
}
&.dead .shroud { opacity: 1; }
&.dead .name { color: #999; }
}
#townsquare.public .player.dead {
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: url('../img/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; }
}
#townsquare.public .player .shroud { display: none; }
/***** Role token ******/
.circle .token {
border-radius: 50%;
height: $token + 3px;
width: $token + 3px;
background: url('../img/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('../img/leaf-left.png'); }
&.leaf-orange { background-image: url('../img/leaf-orange.png'); }
&.leaf-right { background-image: url('../img/leaf-right.png'); }
&.leaf-top1 { background-image: url('../img/leaf-top1.png'); }
&.leaf-top2 { background-image: url('../img/leaf-top2.png'); }
&.leaf-top3 { background-image: url('../img/leaf-top3.png'); }
&.leaf-top4 { background-image: url('../img/leaf-top4.png'); }
&.leaf-top5 { background-image: url('../img/leaf-top5.png'); }
}
}
#townsquare.public .token {
background-image: url('../img/life.png');
&:before, &:after, span { display: none; }
}
#townsquare.public .player.dead .token {
background-image: url('../img/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);
}
/***** Reminder token *****/
.circle .reminder {
background: url('../img/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: opacity 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('../img/icon-plus.png');
transition: opacity 200ms;
}
&:after {
background-image: url('../img/icon-x.png');
opacity: 0;
}
&.add {
opacity: 0;
&:after { display: none; }
}
&:hover:before { opacity: 0; }
&:hover:after { opacity: 1; }
}
.circle li:hover .reminder.add, { opacity: 1; }
.circle li:hover .reminder.add:before { opacity: 1; }
#townsquare.public .reminder { display: none; }
</style>

115
components/TownSquare.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<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"
></Player>
</ul>
</template>
<script>
import Player from './Player.vue'
import roles from '../roles.json'
export default {
components: {
Player
},
props: ['isPublic'],
data () {
return {
players: [
{ name: "Steffen", role: "baron" },
{ name: "Tino", role: "imp" },
{ name: "Basti", role: "chef" },
{ name: "Bernd", role: "ravenkeeper" },
{ name: "Tim", role: "drunk" },
{ name: "Yann", role: "librarian" },
{ name: "Marie", role: "empath" },
{ name: "Bogdan", role: "scarletwoman" },
{ name: "Sean", role: "recluse" },
{ name: "Petra", role: "undertaker" },
],
roles: new Map(roles.map(role => [role.name, role])),
}
}
}
</script>
<style lang="scss">
@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;
} @else {
z-index: $i - 1;
}
> * {
transform: rotate($rot * -1deg);
}
}
$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;
> * {
margin-left: -100px;
width: 200px;
}
}
}
.circle.size-5 li { @include on-circle($item-count: 5); }
.circle.size-6 li { @include on-circle($item-count: 6); }
.circle.size-7 li { @include on-circle($item-count: 7); }
.circle.size-8 li { @include on-circle($item-count: 8); }
.circle.size-9 li { @include on-circle($item-count: 9); }
.circle.size-10 li { @include on-circle($item-count: 10); }
.circle.size-11 li { @include on-circle($item-count: 11); }
.circle.size-12 li { @include on-circle($item-count: 12); }
.circle.size-13 li { @include on-circle($item-count: 13); }
.circle.size-14 li { @include on-circle($item-count: 14); }
.circle.size-15 li { @include on-circle($item-count: 15); }
.circle.size-16 li { @include on-circle($item-count: 16); }
.circle.size-17 li { @include on-circle($item-count: 17); }
.circle.size-18 li { @include on-circle($item-count: 18); }
.circle.size-19 li { @include on-circle($item-count: 19); }
.circle.size-20 li { @include on-circle($item-count: 20); }
// player circle
.circle {
background: url('../img/demon-head2.png') center center no-repeat;
background-size: 10%;
}
#townsquare.public .circle {
background-image: url('../img/demon-head.png');
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,62 +0,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;
} @else {
z-index: $i - 1;
}
> * {
transform: rotate($rot * -1deg);
}
}
$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;
> * {
margin-left: -100px;
width: 200px;
}
}
}
.circle.size-5 li { @include on-circle($item-count: 5); }
.circle.size-6 li { @include on-circle($item-count: 6); }
.circle.size-7 li { @include on-circle($item-count: 7); }
.circle.size-8 li { @include on-circle($item-count: 8); }
.circle.size-9 li { @include on-circle($item-count: 9); }
.circle.size-10 li { @include on-circle($item-count: 10); }
.circle.size-11 li { @include on-circle($item-count: 11); }
.circle.size-12 li { @include on-circle($item-count: 12); }
.circle.size-13 li { @include on-circle($item-count: 13); }
.circle.size-14 li { @include on-circle($item-count: 14); }
.circle.size-15 li { @include on-circle($item-count: 15); }
.circle.size-16 li { @include on-circle($item-count: 16); }
.circle.size-17 li { @include on-circle($item-count: 17); }
.circle.size-18 li { @include on-circle($item-count: 18); }
.circle.size-19 li { @include on-circle($item-count: 19); }
.circle.size-20 li { @include on-circle($item-count: 20); }

View File

@ -1,463 +0,0 @@
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
@font-face {
font-family: "Papyrus";
src: url("../fonts/papyrus.eot");
/* IE9*/
src: url("../fonts/papyrus.eot?#iefix") format("embedded-opentype"), url("../fonts/papyrus.woff2") format("woff2"), url("../fonts/papyrus.woff") format("woff"), url("../fonts/papyrus.ttf") format("truetype"), url("../fonts/papyrus.svg#PapyrusW01") format("svg");
/* iOS 4.1- */
}
html, body {
font-size: 1.2em;
line-height: 1.4;
background: url("../img/background.jpg") center center;
background-size: cover;
color: white;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.square {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
}
.square .circle {
background: url("../img/demon-head2.png") center center no-repeat;
background-size: 10%;
}
.square.public .circle {
background-image: url("../img/demon-head.png");
}
.square .player {
margin-bottom: 10px;
}
.square .player .shroud {
content: " ";
background: url("../img/shroud.png") center -10px no-repeat;
background-size: auto 100%;
position: absolute;
margin-left: -50px;
width: 100px;
height: 100px;
left: 50%;
top: 0;
cursor: pointer;
opacity: 0;
transition: opacity 200ms;
z-index: 2;
}
.square .player .shroud:hover {
opacity: 1;
}
.square .player.dead .shroud {
opacity: 1;
}
.square .player.dead .name {
color: #999;
}
.square.public .player.dead .shroud {
display: none;
}
.square.public .player.dead:after {
background: url("../img/vote.png") center center no-repeat;
background-size: 40%;
height: 153px;
}
.square.public .player.dead.traveller:after {
filter: grayscale(100%);
}
.square.public .player.dead.no-vote:after {
display: none;
}
.square .token {
border-radius: 50%;
height: 153px;
width: 153px;
background: url("../img/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: 105px;
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;
}
.square .token:before {
content: " ";
background-size: 100%;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.square .token span {
position: absolute;
width: 100%;
height: 100%;
background-size: 100%;
left: 0;
top: 0;
pointer-events: none;
}
.square .token span.leaf-left {
background-image: url("../img/leaf-left.png");
}
.square .token span.leaf-orange {
background-image: url("../img/leaf-orange.png");
}
.square .token span.leaf-right {
background-image: url("../img/leaf-right.png");
}
.square .token span.leaf-top1 {
background-image: url("../img/leaf-top1.png");
}
.square .token span.leaf-top2 {
background-image: url("../img/leaf-top2.png");
}
.square .token span.leaf-top3 {
background-image: url("../img/leaf-top3.png");
}
.square .token span.leaf-top4 {
background-image: url("../img/leaf-top4.png");
}
.square .token span.leaf-top5 {
background-image: url("../img/leaf-top5.png");
}
.square.public .token {
background-image: url("../img/life.png");
}
.square.public .token:before, .square.public .token:after, .square.public .token span {
display: none;
}
.square.public .player.dead .token {
background-image: url("../img/death.png");
}
.square.public .player.traveller .token {
filter: grayscale(100%);
}
.square .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);
}
.square .reminder {
background: url("../img/reminder.png") center center;
background-size: 100%;
width: 75px;
height: 75px;
color: black;
font-size: 50%;
font-weight: bold;
display: block;
margin: 5px -37.5px 0;
text-align: center;
position: relative;
box-sizing: border-box;
padding-top: 45px;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
cursor: pointer;
}
.square .reminder:before, .square .reminder: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("../img/icon-plus.png");
transition: opacity 200ms;
}
.square .reminder:after {
background-image: url("../img/icon-x.png");
opacity: 0;
}
.square .reminder.add {
opacity: 0;
}
.square .reminder.add:after {
display: none;
}
.square .reminder:hover:before {
opacity: 0;
}
.square .reminder:hover:after {
opacity: 1;
}
.square .circle li:hover .reminder.add {
opacity: 1;
}
.square .circle li:hover .reminder.add:before {
opacity: 1;
}
.square.public .reminder {
display: none;
}
.square .controls {
position: absolute;
right: 0;
top: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*# sourceMappingURL=main.css.map */

View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAIA;EAAY;EACR;AAAkC;EAClC;AAIsD;;AAG1D;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAIA;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAMA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;;AAIJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AAGd;EAAiB;;AACjB;EAAe;;AAIf;EAAU;;AACV;EACI;EACA;EACA;;AAEJ;EAAoB;;AACpB;EAAkB;;AAItB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aACQ;EAKR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAc;;AACd;EAAgB;;AAChB;EAAe;;AACf;EAAc;;AACd;EAAc;;AACd;EAAc;;AACd;EAAc;;AACd;EAAc;;AAItB;EACI;;AACA;EAA0B;;AAG9B;EACI;;AAGJ;EACI;;AAIJ;EACI;EACA;EACA,aACI;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AACA;EAAU;;AAGd;EAAiB;;AACjB;EAAgB;;AAEpB;EAAkC;;AAClC;EAAwC;;AAExC;EAAqB;;AAGrB;EACI;EACA;EACA;;;AAIR;AAAA;AAAA;AAIA;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;AAIA;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;EAEI;AACA;EACA;AACA;;;AAGJ;EACI;;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;AACI;;AAGJ;AAII;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAMA;EACI;AAAA;AAAA;IAGI;IACA;AACA;IACA;IACA;;;EAEJ;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;IACI;;;AAEJ;AAAA;AAAA;AAAA;EAIA;AAAA;IAEI;;;EAEJ;IACI;;;EAEJ;AAAA;IAEI;IACA;;;AAEJ;AAAA;AAAA;AAAA;EAIA;IACI;;;EAEJ;AAAA;IAEI;;;EAEJ;AAAA;AAAA;IAGI;IACA;;;EAEJ;AAAA;IAEI","file":"main.css"}

View File

@ -1,474 +0,0 @@
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
@font-face {font-family: "Papyrus";
src: url("../fonts/papyrus.eot"); /* IE9*/
src: url("../fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("../fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
url("../fonts/papyrus.woff") format("woff"), /* chrome firefox */
url("../fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
url("../fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
}
html, body {
font-size: 1.2em;
line-height: 1.4;
background: url('../img/background.jpg') center center;
background-size: cover;
color: white;
height: 100%;
font-family: 'Roboto Condensed', sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
$token: 150px;
.square {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
// player circle
.circle {
background: url('../img/demon-head2.png') center center no-repeat;
background-size: 10%;
}
&.public .circle {
background-image: url('../img/demon-head.png');
}
// Player token
.player {
margin-bottom: 10px;
.shroud {
content: " ";
background: url('../img/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: 0;
cursor: pointer;
opacity: 0;
transition: opacity 200ms;
z-index: 2;
&:hover { opacity: 1; }
}
&.dead .shroud { opacity: 1; }
&.dead .name { color: #999; }
}
&.public .player.dead {
.shroud { display: none; }
&:after {
background: url('../img/vote.png') center center no-repeat;
background-size: 40%;
height: $token + 3px;
}
&.traveller:after { filter: grayscale(100%); }
&.no-vote:after { display: none; }
}
// Role token
.token {
border-radius: 50%;
height: $token + 3px;
width: $token + 3px;
background: url('../img/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('../img/leaf-left.png'); }
&.leaf-orange { background-image: url('../img/leaf-orange.png'); }
&.leaf-right { background-image: url('../img/leaf-right.png'); }
&.leaf-top1 { background-image: url('../img/leaf-top1.png'); }
&.leaf-top2 { background-image: url('../img/leaf-top2.png'); }
&.leaf-top3 { background-image: url('../img/leaf-top3.png'); }
&.leaf-top4 { background-image: url('../img/leaf-top4.png'); }
&.leaf-top5 { background-image: url('../img/leaf-top5.png'); }
}
}
&.public .token {
background-image: url('../img/life.png');
&:before, &:after, span { display: none; }
}
&.public .player.dead .token {
background-image: url('../img/death.png');
}
&.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);
}
// Reminder token
.reminder {
background: url('../img/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: opacity 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('../img/icon-plus.png');
transition: opacity 200ms;
}
&:after {
background-image: url('../img/icon-x.png');
opacity: 0;
}
&.add {
opacity: 0;
&:after { display: none; }
}
&:hover:before { opacity: 0; }
&:hover:after { opacity: 1; }
}
.circle li:hover .reminder.add, { opacity: 1; }
.circle li:hover .reminder.add:before { opacity: 1; }
&.public .reminder { display: none; }
// Controls
.controls {
position: absolute;
right: 0;
top: 0;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}

349
css/normalize.css vendored
View File

@ -1,349 +0,0 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

View File

@ -1,252 +0,0 @@
.square .token.baron:before {
background-image: url("../img/icon-baron.png");
}
.square .token.baron:after {
content: "Baron";
}
.square .reminder.baron:before {
background-image: url("../img/icon-baron.png");
}
.square .token.butler:before {
background-image: url("../img/icon-butler.png");
}
.square .token.butler:after {
content: "Butler";
}
.square .reminder.butler:before {
background-image: url("../img/icon-butler.png");
}
.square .token.chef:before {
background-image: url("../img/icon-chef.png");
}
.square .token.chef:after {
content: "Chef";
}
.square .reminder.chef:before {
background-image: url("../img/icon-chef.png");
}
.square .token.drunk:before {
background-image: url("../img/icon-drunk.png");
}
.square .token.drunk:after {
content: "Drunk";
}
.square .reminder.drunk:before {
background-image: url("../img/icon-drunk.png");
}
.square .token.empath:before {
background-image: url("../img/icon-empath.png");
}
.square .token.empath:after {
content: "Empath";
}
.square .reminder.empath:before {
background-image: url("../img/icon-empath.png");
}
.square .token.fortuneteller:before {
background-image: url("../img/icon-fortuneteller.png");
}
.square .token.fortuneteller:after {
content: "Fortune Teller";
}
.square .reminder.fortuneteller:before {
background-image: url("../img/icon-fortuneteller.png");
}
.square .token.imp:before {
background-image: url("../img/icon-imp.png");
}
.square .token.imp:after {
content: "Imp";
}
.square .reminder.imp:before {
background-image: url("../img/icon-imp.png");
}
.square .token.investigator:before {
background-image: url("../img/icon-investigator.png");
}
.square .token.investigator:after {
content: "Investigator";
}
.square .reminder.investigator:before {
background-image: url("../img/icon-investigator.png");
}
.square .token.librarian:before {
background-image: url("../img/icon-librarian.png");
}
.square .token.librarian:after {
content: "Librarian";
}
.square .reminder.librarian:before {
background-image: url("../img/icon-librarian.png");
}
.square .token.mayor:before {
background-image: url("../img/icon-mayor.png");
}
.square .token.mayor:after {
content: "Mayor";
}
.square .reminder.mayor:before {
background-image: url("../img/icon-mayor.png");
}
.square .token.monk:before {
background-image: url("../img/icon-monk.png");
}
.square .token.monk:after {
content: "Monk";
}
.square .reminder.monk:before {
background-image: url("../img/icon-monk.png");
}
.square .token.poisoner:before {
background-image: url("../img/icon-poisoner.png");
}
.square .token.poisoner:after {
content: "Poisoner";
}
.square .reminder.poisoner:before {
background-image: url("../img/icon-poisoner.png");
}
.square .token.recluse:before {
background-image: url("../img/icon-recluse.png");
}
.square .token.recluse:after {
content: "Recluse";
}
.square .reminder.recluse:before {
background-image: url("../img/icon-recluse.png");
}
.square .token.ravenkeeper {
font-size: 80%;
}
.square .token.ravenkeeper:before {
background-image: url("../img/icon-ravenkeeper.png");
}
.square .token.ravenkeeper:after {
content: "Ravenkeeper";
}
.square .reminder.ravenkeeper:before {
background-image: url("../img/icon-ravenkeeper.png");
}
.square .token.saint:before {
background-image: url("../img/icon-saint.png");
}
.square .token.saint:after {
content: "Saint";
}
.square .reminder.saint:before {
background-image: url("../img/icon-saint.png");
}
.square .token.slayer:before {
background-image: url("../img/icon-slayer.png");
}
.square .token.slayer:after {
content: "Slayer";
}
.square .reminder.slayer:before {
background-image: url("../img/icon-slayer.png");
}
.square .token.soldier:before {
background-image: url("../img/icon-soldier.png");
}
.square .token.soldier:after {
content: "Soldier";
}
.square .reminder.soldier:before {
background-image: url("../img/icon-soldier.png");
}
.square .token.spy:before {
background-image: url("../img/icon-spy.png");
}
.square .token.spy:after {
content: "Spy";
}
.square .reminder.spy:before {
background-image: url("../img/icon-spy.png");
}
.square .token.scarletwoman:before {
background-image: url("../img/icon-scarletwoman.png");
}
.square .token.scarletwoman:after {
content: "Scarlet Woman";
}
.square .reminder.scarletwoman:before {
background-image: url("../img/icon-scarletwoman.png");
}
.square .token.undertaker {
font-size: 85%;
}
.square .token.undertaker:before {
background-image: url("../img/icon-undertaker.png");
}
.square .token.undertaker:after {
content: "Undertaker";
}
.square .reminder.undertaker:before {
background-image: url("../img/icon-undertaker.png");
}
.square .token.virgin:before {
background-image: url("../img/icon-virgin.png");
}
.square .token.virgin:after {
content: "Virgin";
}
.square .reminder.virgin:before {
background-image: url("../img/icon-virgin.png");
}
.square .token.washerwoman {
font-size: 75%;
}
.square .token.washerwoman:before {
background-image: url("../img/icon-washerwoman.png");
}
.square .token.washerwoman:after {
content: "Washerwoman";
}
.square .reminder.washerwoman:before {
background-image: url("../img/icon-washerwoman.png");
}
/*# sourceMappingURL=roles.css.map */

View File

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["roles.scss"],"names":[],"mappings":"AA0BI;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE","file":"roles.css"}

View File

@ -1,141 +0,0 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Blood on the Clocktower Town Square</title>
<meta name="description" content="Virtual Blood on the Clocktower Town Square">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="manifest" href="site.webmanifest">-->
<!-- <link rel="apple-touch-icon" href="icon.png">-->
<!-- Place favicon.ico in the root directory -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/circle.css">
<link rel="stylesheet" href="css/roles.css">
<meta name="theme-color" content="#000000">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="square" id="townsquare" v-bind:class="{ public: isPublic }">
<ul class="circle size-12">
<li>
<div class="player">
<div class="shroud"></div>
<div class="token spy">
<span class="leaf-left"></span>
<span class="leaf-right"></span>
<span class="leaf-top1"></span>
<span class="leaf-orange"></span>
</div>
<div class="name">Steffen</div>
</div>
<div class="reminder drunk">Drunk</div>
<div class="reminder add"></div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token baron"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder add"></div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token chef"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player dead">
<div class="shroud"></div>
<div class="token empath"></div>
<div class="name">Tot</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token imp"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player traveller">
<div class="shroud"></div>
<div class="token mayor"></div>
<div class="name">Traveller</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player traveller dead">
<div class="shroud"></div>
<div class="token recluse"></div>
<div class="name">Toter Traveller</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token butler"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player dead no-vote">
<div class="shroud"></div>
<div class="token virgin"></div>
<div class="name">Keine Stimme</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token ravenkeeper"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder fortuneteller">Red Herring</div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token washerwoman"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder drunk">Drunk</div>
</li>
<li>
<div class="player">
<div class="shroud"></div>
<div class="token undertaker"></div>
<div class="name">Steffen</div>
</div>
<div class="reminder imp">Dies</div>
</li>
</ul>
<div class="controls">
<button v-on:click="togglePublic">Toggle</button>
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>

View File

@ -1,12 +0,0 @@
const app = new Vue({
el: '#townsquare',
data: {
isPublic: false
},
methods: {
togglePublic: function () {
console.log('click', this.isPublic);
this.isPublic = !this.isPublic;
}
}
});

306
package-lock.json generated Normal file
View File

@ -0,0 +1,306 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"ajv": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
"integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
"integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
"dev": true
},
"anymatch": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
},
"big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true
},
"binary-extensions": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
"dev": true
},
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"chokidar": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
"integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
"dev": true,
"requires": {
"anymatch": "~3.1.1",
"braces": "~3.0.2",
"fsevents": "~2.1.2",
"glob-parent": "~5.1.0",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.3.0"
}
},
"clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
"dev": true,
"requires": {
"is-plain-object": "^2.0.4",
"kind-of": "^6.0.2",
"shallow-clone": "^3.0.0"
}
},
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true
},
"fast-deep-equal": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
"integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
"dev": true
},
"fast-json-stable-stringify": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
"dev": true
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"fsevents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
"dev": true,
"optional": true
},
"glob-parent": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
"integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"requires": {
"binary-extensions": "^2.0.0"
}
},
"is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
"dev": true
},
"is-glob": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
"dev": true,
"requires": {
"is-extglob": "^2.1.1"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"is-plain-object": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
"dev": true,
"requires": {
"isobject": "^3.0.1"
}
},
"isobject": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
"dev": true
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"dev": true
},
"loader-utils": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
"integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
"dev": true
},
"neo-async": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
},
"picomatch": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
"dev": true
},
"punycode": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"readdirp": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
"integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
"dev": true,
"requires": {
"picomatch": "^2.0.7"
}
},
"sass": {
"version": "1.26.3",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.26.3.tgz",
"integrity": "sha512-5NMHI1+YFYw4sN3yfKjpLuV9B5l7MqQ6FlkTcC4FT+oHbBRUZoSjHrrt/mE0nFXJyY2kQtU9ou9HxvFVjLFuuw==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
"integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"loader-utils": "^1.2.3",
"neo-async": "^2.6.1",
"schema-utils": "^2.6.1",
"semver": "^6.3.0"
}
},
"schema-utils": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.5.tgz",
"integrity": "sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==",
"dev": true,
"requires": {
"ajv": "^6.12.0",
"ajv-keywords": "^3.4.1"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
},
"shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
"dev": true,
"requires": {
"kind-of": "^6.0.2"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
},
"uri-js": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
"dev": true,
"requires": {
"punycode": "^2.1.0"
}
}
}
}

View File

@ -3,8 +3,8 @@
"name": "washerwoman", "name": "washerwoman",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": false, "otherNight": false,
"reminders": ["Townsfolk", "Decoy"], "reminders": ["Townsfolk", "Decoy"],
"setup": false, "setup": false,
"ability": "You start knowing 1 of 2 players is a particular Townsfolk." "ability": "You start knowing 1 of 2 players is a particular Townsfolk."
@ -13,8 +13,8 @@
"name": "librarian", "name": "librarian",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": false, "otherNight": false,
"reminders": ["Outsider", "Decoy"], "reminders": ["Outsider", "Decoy"],
"setup": false, "setup": false,
"ability": "You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)" "ability": "You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)"
@ -23,8 +23,8 @@
"name": "investigator", "name": "investigator",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": false, "otherNight": false,
"reminders": ["Minion", "Decoy"], "reminders": ["Minion", "Decoy"],
"setup": false, "setup": false,
"ability": "You start knowing 1 of 2 players is a particular Minion." "ability": "You start knowing 1 of 2 players is a particular Minion."
@ -33,8 +33,8 @@
"name": "chef", "name": "chef",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "You start knowing how many pairs of evil players there are." "ability": "You start knowing how many pairs of evil players there are."
@ -43,8 +43,8 @@
"name": "empath", "name": "empath",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": true, "otherNight": true,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "Each night, you learn how many of your 2 alive neighbours are evil." "ability": "Each night, you learn how many of your 2 alive neighbours are evil."
@ -53,8 +53,8 @@
"name": "fortuneteller", "name": "fortuneteller",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": true, "firstNight": true,
"other-night": true, "otherNight": true,
"reminders": ["Decoy"], "reminders": ["Decoy"],
"setup": false, "setup": false,
"ability": "Each night, choose 2 players: you learn if either is a Demon. There is 1 good player that registers falsely to you." "ability": "Each night, choose 2 players: you learn if either is a Demon. There is 1 good player that registers falsely to you."
@ -63,8 +63,8 @@
"name": "undertaker", "name": "undertaker",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": true, "otherNight": true,
"reminders": ["Executed"], "reminders": ["Executed"],
"setup": false, "setup": false,
"ability": "Each night*, you learn which character died by execution today." "ability": "Each night*, you learn which character died by execution today."
@ -73,8 +73,8 @@
"name": "monk", "name": "monk",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": true, "otherNight": true,
"reminders": ["Protected"], "reminders": ["Protected"],
"setup": false, "setup": false,
"ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight." "ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight."
@ -83,8 +83,8 @@
"name": "ravenkeeper", "name": "ravenkeeper",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": true, "otherNight": true,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "If you die at night, you are woken to choose a player: you learn their character." "ability": "If you die at night, you are woken to choose a player: you learn their character."
@ -93,8 +93,8 @@
"name": "mayor", "name": "mayor",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead." "ability": "If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead."
@ -103,8 +103,8 @@
"name": "slayer", "name": "slayer",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": ["Used"], "reminders": ["Used"],
"setup": false, "setup": false,
"ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die." "ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die."
@ -113,8 +113,8 @@
"name": "soldier", "name": "soldier",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "You are safe from the Demon." "ability": "You are safe from the Demon."
@ -123,8 +123,8 @@
"name": "virgin", "name": "virgin",
"set": "TB", "set": "TB",
"team": "townsfolk", "team": "townsfolk",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": ["Used"], "reminders": ["Used"],
"setup": false, "setup": false,
"ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately." "ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately."
@ -133,8 +133,8 @@
"name": "butler", "name": "butler",
"set": "TB", "set": "TB",
"team": "outsider", "team": "outsider",
"first-night": true, "firstNight": true,
"other-night": true, "otherNight": true,
"reminders": ["Master"], "reminders": ["Master"],
"setup": false, "setup": false,
"ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too." "ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too."
@ -143,8 +143,8 @@
"name": "drunk", "name": "drunk",
"set": "TB", "set": "TB",
"team": "outsider", "team": "outsider",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": ["Drunk"], "reminders": ["Drunk"],
"setup": true, "setup": true,
"ability": "You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions." "ability": "You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions."
@ -153,8 +153,8 @@
"name": "recluse", "name": "recluse",
"set": "TB", "set": "TB",
"team": "outsider", "team": "outsider",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "You might register as evil and as a Minion or Demon, even if dead." "ability": "You might register as evil and as a Minion or Demon, even if dead."
@ -163,8 +163,8 @@
"name": "saint", "name": "saint",
"set": "TB", "set": "TB",
"team": "outsider", "team": "outsider",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "If you die by execution, your team loses." "ability": "If you die by execution, your team loses."
@ -173,8 +173,8 @@
"name": "baron", "name": "baron",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"first-night": false, "firstNight": false,
"other-night": false, "otherNight": false,
"reminders": [], "reminders": [],
"setup": true, "setup": true,
"ability": "There are extra Outsiders in play. [+2 Outsiders]" "ability": "There are extra Outsiders in play. [+2 Outsiders]"
@ -183,8 +183,8 @@
"name": "poisoner", "name": "poisoner",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"first-night": true, "firstNight": true,
"other-night": true, "otherNight": true,
"reminders": ["Poisoned"], "reminders": ["Poisoned"],
"setup": false, "setup": false,
"ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day." "ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day."
@ -193,8 +193,8 @@
"name": "spy", "name": "spy",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"first-night": true, "firstNight": true,
"other-night": true, "otherNight": true,
"reminders": [], "reminders": [],
"setup": false, "setup": false,
"ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead." "ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead."
@ -203,8 +203,8 @@
"name": "scarletwoman", "name": "scarletwoman",
"set": "TB", "set": "TB",
"team": "minion", "team": "minion",
"first-night": false, "firstNight": false,
"other-night": true, "otherNight": true,
"reminders": ["Demon"], "reminders": ["Demon"],
"setup": false, "setup": false,
"ability": "If there are 5 or more players alive (Travellers don't count) and the Demon dies, you become the Demon." "ability": "If there are 5 or more players alive (Travellers don't count) and the Demon dies, you become the Demon."
@ -213,8 +213,8 @@
"name": "imp", "name": "imp",
"set": "TB", "set": "TB",
"team": "demon", "team": "demon",
"first-night": false, "firstNight": false,
"other-night": true, "otherNight": true,
"reminders": ["Die"], "reminders": ["Die"],
"setup": false, "setup": false,
"ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp." "ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."

View File

@ -17,13 +17,13 @@ $roles:
'slayer' 'Slayer', 'slayer' 'Slayer',
'soldier' 'Soldier', 'soldier' 'Soldier',
'spy' 'Spy', 'spy' 'Spy',
'scarletwoman' 'Scarlet Woman', 'scarletwoman' 'Scarlet Woman' 80%,
'undertaker' 'Undertaker' 85%, 'undertaker' 'Undertaker' 85%,
'virgin' 'Virgin', 'virgin' 'Virgin',
'washerwoman' 'Washerwoman' 75%; 'washerwoman' 'Washerwoman' 75%;
@each $img, $name, $fontsize in $roles { @each $img, $name, $fontsize in $roles {
.square .token.#{$img} { .token.#{$img} {
&:before { &:before {
background-image: url('../img/icon-#{$img}.png'); background-image: url('../img/icon-#{$img}.png');
} }
@ -33,7 +33,7 @@ $roles:
font-size: $fontsize; font-size: $fontsize;
} }
.square .reminder.#{$img}:before { .reminder.#{$img}:before {
background-image: url('../img/icon-#{$img}.png'); background-image: url('../img/icon-#{$img}.png');
} }
} }