mirror of https://github.com/bra1n/townsquare.git
added vue
This commit is contained in:
Steffen
parent
b99fc6a3e5
commit
74a8280333
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
1440
css/circle.css
1440
css/circle.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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); }
|
||||
463
css/main.css
463
css/main.css
|
|
@ -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 */
|
||||
|
|
@ -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"}
|
||||
474
css/main.scss
474
css/main.scss
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
252
css/roles.css
252
css/roles.css
|
|
@ -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 */
|
||||
|
|
@ -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"}
|
||||
141
index.html
141
index.html
|
|
@ -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>
|
||||
12
js/main.js
12
js/main.js
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
88
roles.json
88
roles.json
|
|
@ -3,8 +3,8 @@
|
|||
"name": "washerwoman",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": false,
|
||||
"firstNight": true,
|
||||
"otherNight": false,
|
||||
"reminders": ["Townsfolk", "Decoy"],
|
||||
"setup": false,
|
||||
"ability": "You start knowing 1 of 2 players is a particular Townsfolk."
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
"name": "librarian",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": false,
|
||||
"firstNight": true,
|
||||
"otherNight": false,
|
||||
"reminders": ["Outsider", "Decoy"],
|
||||
"setup": false,
|
||||
"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",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": false,
|
||||
"firstNight": true,
|
||||
"otherNight": false,
|
||||
"reminders": ["Minion", "Decoy"],
|
||||
"setup": false,
|
||||
"ability": "You start knowing 1 of 2 players is a particular Minion."
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
"name": "chef",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": false,
|
||||
"firstNight": true,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "You start knowing how many pairs of evil players there are."
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
"name": "empath",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": true,
|
||||
"firstNight": true,
|
||||
"otherNight": true,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "Each night, you learn how many of your 2 alive neighbours are evil."
|
||||
|
|
@ -53,8 +53,8 @@
|
|||
"name": "fortuneteller",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": true,
|
||||
"other-night": true,
|
||||
"firstNight": true,
|
||||
"otherNight": true,
|
||||
"reminders": ["Decoy"],
|
||||
"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."
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
"name": "undertaker",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": true,
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": ["Executed"],
|
||||
"setup": false,
|
||||
"ability": "Each night*, you learn which character died by execution today."
|
||||
|
|
@ -73,8 +73,8 @@
|
|||
"name": "monk",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": true,
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": ["Protected"],
|
||||
"setup": false,
|
||||
"ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight."
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
"name": "ravenkeeper",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": true,
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "If you die at night, you are woken to choose a player: you learn their character."
|
||||
|
|
@ -93,8 +93,8 @@
|
|||
"name": "mayor",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"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",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": ["Used"],
|
||||
"setup": false,
|
||||
"ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die."
|
||||
|
|
@ -113,8 +113,8 @@
|
|||
"name": "soldier",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "You are safe from the Demon."
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
"name": "virgin",
|
||||
"set": "TB",
|
||||
"team": "townsfolk",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": ["Used"],
|
||||
"setup": false,
|
||||
"ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately."
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
"name": "butler",
|
||||
"set": "TB",
|
||||
"team": "outsider",
|
||||
"first-night": true,
|
||||
"other-night": true,
|
||||
"firstNight": true,
|
||||
"otherNight": true,
|
||||
"reminders": ["Master"],
|
||||
"setup": false,
|
||||
"ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too."
|
||||
|
|
@ -143,8 +143,8 @@
|
|||
"name": "drunk",
|
||||
"set": "TB",
|
||||
"team": "outsider",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": ["Drunk"],
|
||||
"setup": true,
|
||||
"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",
|
||||
"set": "TB",
|
||||
"team": "outsider",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "You might register as evil and as a Minion or Demon, even if dead."
|
||||
|
|
@ -163,8 +163,8 @@
|
|||
"name": "saint",
|
||||
"set": "TB",
|
||||
"team": "outsider",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"ability": "If you die by execution, your team loses."
|
||||
|
|
@ -173,8 +173,8 @@
|
|||
"name": "baron",
|
||||
"set": "TB",
|
||||
"team": "minion",
|
||||
"first-night": false,
|
||||
"other-night": false,
|
||||
"firstNight": false,
|
||||
"otherNight": false,
|
||||
"reminders": [],
|
||||
"setup": true,
|
||||
"ability": "There are extra Outsiders in play. [+2 Outsiders]"
|
||||
|
|
@ -183,8 +183,8 @@
|
|||
"name": "poisoner",
|
||||
"set": "TB",
|
||||
"team": "minion",
|
||||
"first-night": true,
|
||||
"other-night": true,
|
||||
"firstNight": true,
|
||||
"otherNight": true,
|
||||
"reminders": ["Poisoned"],
|
||||
"setup": false,
|
||||
"ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day."
|
||||
|
|
@ -193,8 +193,8 @@
|
|||
"name": "spy",
|
||||
"set": "TB",
|
||||
"team": "minion",
|
||||
"first-night": true,
|
||||
"other-night": true,
|
||||
"firstNight": true,
|
||||
"otherNight": true,
|
||||
"reminders": [],
|
||||
"setup": false,
|
||||
"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",
|
||||
"set": "TB",
|
||||
"team": "minion",
|
||||
"first-night": false,
|
||||
"other-night": true,
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": ["Demon"],
|
||||
"setup": false,
|
||||
"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",
|
||||
"set": "TB",
|
||||
"team": "demon",
|
||||
"first-night": false,
|
||||
"other-night": true,
|
||||
"firstNight": false,
|
||||
"otherNight": true,
|
||||
"reminders": ["Die"],
|
||||
"setup": false,
|
||||
"ability": "Each night*, choose a player: they die. If you kill yourself this way, a Minion becomes the Imp."
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@ $roles:
|
|||
'slayer' 'Slayer',
|
||||
'soldier' 'Soldier',
|
||||
'spy' 'Spy',
|
||||
'scarletwoman' 'Scarlet Woman',
|
||||
'scarletwoman' 'Scarlet Woman' 80%,
|
||||
'undertaker' 'Undertaker' 85%,
|
||||
'virgin' 'Virgin',
|
||||
'washerwoman' 'Washerwoman' 75%;
|
||||
|
||||
@each $img, $name, $fontsize in $roles {
|
||||
.square .token.#{$img} {
|
||||
.token.#{$img} {
|
||||
&:before {
|
||||
background-image: url('../img/icon-#{$img}.png');
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ $roles:
|
|||
font-size: $fontsize;
|
||||
}
|
||||
|
||||
.square .reminder.#{$img}:before {
|
||||
.reminder.#{$img}:before {
|
||||
background-image: url('../img/icon-#{$img}.png');
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue