moved some more assets, added reminder modal

This commit is contained in:
Steffen 2020-04-04 16:14:25 +02:00
parent 3b1d92ac0f
commit 7f5ae5f8e5
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
51 changed files with 218 additions and 55 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="townsquare" class="square" v-bind:class="{ public: isPublic }"> <div id="app">
<TownSquare :is-public="isPublic"></TownSquare> <TownSquare :is-public="isPublic"></TownSquare>
<div class="controls"> <div class="controls">
<button v-on:click="togglePublic">Toggle</button> <button v-on:click="togglePublic">Toggle</button>
@ -27,18 +27,18 @@
<style lang="scss"> <style lang="scss">
@font-face { font-family: "Papyrus"; @font-face { font-family: "Papyrus";
src: url("fonts/papyrus.eot"); /* IE9*/ src: url("assets/fonts/papyrus.eot"); /* IE9*/
src: url("fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ src: url("assets/fonts/papyrus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("fonts/papyrus.woff2") format("woff2"), /* chrome firefox */ url("assets/fonts/papyrus.woff2") format("woff2"), /* chrome firefox */
url("fonts/papyrus.woff") format("woff"), /* chrome firefox */ url("assets/fonts/papyrus.woff") format("woff"), /* chrome firefox */
url("fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/ url("assets/fonts/papyrus.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
url("fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */ url("assets/fonts/papyrus.svg#PapyrusW01") format("svg"); /* iOS 4.1- */
} }
html, body { html, body {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4; line-height: 1.4;
background: url('img/background.jpg') center center; background: url('assets/background.jpg') center center;
background-size: cover; background-size: cover;
color: white; color: white;
height: 100%; height: 100%;
@ -49,13 +49,8 @@
margin: 0; margin: 0;
} }
#townsquare { #app {
width: 100%;
height: 100%; height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
} }
// Controls // Controls

View File

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View File

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View File

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 147 KiB

View File

Before

Width:  |  Height:  |  Size: 308 KiB

After

Width:  |  Height:  |  Size: 308 KiB

View File

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 128 KiB

View File

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

View File

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

View File

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View File

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View File

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 125 KiB

View File

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 97 KiB

View File

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

View File

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

View File

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

View File

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

View File

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 162 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

View File

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View File

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

View File

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 170 KiB

View File

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

View File

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 82 KiB

View File

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

View File

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 126 KiB

View File

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB

View File

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

View File

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

View File

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

View File

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

View File

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

View File

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

Before

Width:  |  Height:  |  Size: 125 KiB

After

Width:  |  Height:  |  Size: 125 KiB

View File

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View File

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

View File

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 226 KiB

View File

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

58
src/components/Modal.vue Normal file
View File

@ -0,0 +1,58 @@
<script>
export default {
methods: {
close() {
this.$emit('close');
},
},
};
</script>
<template>
<transition name="modal-fade">
<div class="modal-backdrop" @click="close">
<div class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
@click.stop=""
>
<slot></slot>
</div>
</div>
</transition>
</template>
<style>
.modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.modal {
background: rgba(0,0,0,0.8);
padding: 10px 20px;
border-radius: 10px;
box-shadow: 2px 2px 20px 1px #000;
overflow-x: auto;
display: flex;
flex-direction: column;
max-width: 70%;
}
.modal-fade-enter,
.modal-fade-leave-active {
opacity: 0;
}
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity .2s ease
}
</style>

View File

@ -13,7 +13,12 @@
<div class="ability" v-if="role.ability">{{ role.ability }}</div> <div class="ability" v-if="role.ability">{{ role.ability }}</div>
<div class="name">{{ player.name }}</div> <div class="name">{{ player.name }}</div>
</div> </div>
<div class="reminder add"></div> <div class="reminder"
v-if="player.reminders"
v-for="reminder in player.reminders"
v-bind:class="[reminder.role]"
@click="removeReminder(reminder)">{{ reminder.name }}</div>
<div class="reminder add" @click="$emit('add-reminder', player)"></div>
</li> </li>
</template> </template>
@ -55,13 +60,15 @@
} else { } else {
this.toggleStatus(); this.toggleStatus();
} }
},
removeReminder (reminder) {
this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../roles.scss';
// token size // token size
$token: 150px; $token: 150px;
@ -72,7 +79,7 @@
.shroud { .shroud {
content: " "; content: " ";
background: url('../img/shroud.png') center -10px no-repeat; background: url('../assets/shroud.png') center -10px no-repeat;
background-size: auto 100%; background-size: auto 100%;
position: absolute; position: absolute;
margin-left: -2/6 * $token; margin-left: -2/6 * $token;
@ -98,7 +105,7 @@
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
background: url('../img/vote.png') center center no-repeat; background: url('../assets/vote.png') center center no-repeat;
background-size: 40%; background-size: 40%;
height: $token + 3px; height: $token + 3px;
pointer-events: none; pointer-events: none;
@ -114,7 +121,7 @@
border-radius: 50%; border-radius: 50%;
height: $token + 3px; height: $token + 3px;
width: $token + 3px; width: $token + 3px;
background: url('../img/token.png') center center; background: url('../assets/token.png') center center;
background-size: 100%; background-size: 100%;
text-align: center; text-align: center;
position: relative; position: relative;
@ -152,25 +159,25 @@
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
&.leaf-left { background-image: url('../img/leaf-left.png'); } &.leaf-left { background-image: url('../assets/leaf-left.png'); }
&.leaf-orange { background-image: url('../img/leaf-orange.png'); } &.leaf-orange { background-image: url('../assets/leaf-orange.png'); }
&.leaf-right { background-image: url('../img/leaf-right.png'); } &.leaf-right { background-image: url('../assets/leaf-right.png'); }
&.leaf-top1 { background-image: url('../img/leaf-top1.png'); } &.leaf-top1 { background-image: url('../assets/leaf-top1.png'); }
&.leaf-top2 { background-image: url('../img/leaf-top2.png'); } &.leaf-top2 { background-image: url('../assets/leaf-top2.png'); }
&.leaf-top3 { background-image: url('../img/leaf-top3.png'); } &.leaf-top3 { background-image: url('../assets/leaf-top3.png'); }
&.leaf-top4 { background-image: url('../img/leaf-top4.png'); } &.leaf-top4 { background-image: url('../assets/leaf-top4.png'); }
&.leaf-top5 { background-image: url('../img/leaf-top5.png'); } &.leaf-top5 { background-image: url('../assets/leaf-top5.png'); }
} }
} }
#townsquare.public .token { #townsquare.public .token {
background-image: url('../img/life.png'); background-image: url('../assets/life.png');
div { display: none; } div { display: none; }
&:before, &:after, span { display: none; } &:before, &:after, span { display: none; }
} }
#townsquare.public .player.dead .token { #townsquare.public .player.dead .token {
background-image: url('../img/death.png'); background-image: url('../assets/death.png');
} }
#townsquare.public .player.traveller .token { #townsquare.public .player.traveller .token {
@ -221,7 +228,7 @@
/***** Reminder token *****/ /***** Reminder token *****/
.circle .reminder { .circle .reminder {
background: url('../img/reminder.png') center center; background: url('../assets/reminder.png') center center;
background-size: 100%; background-size: 100%;
width: $token / 2; width: $token / 2;
height: $token / 2; height: $token / 2;
@ -250,12 +257,12 @@
background-size: 100%; background-size: 100%;
background-position: center 0; background-position: center 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('../img/icon-plus.png'); background-image: url('../assets/icons/plus.png');
transition: opacity 200ms; transition: opacity 200ms;
} }
&:after { &:after {
background-image: url('../img/icon-x.png'); background-image: url('../assets/icons/x.png');
opacity: 0; opacity: 0;
} }

View File

@ -1,45 +1,88 @@
<template> <template>
<ul class="circle" v-bind:class="['size-' + players.length]"> <div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
<Player <ul class="circle" v-bind:class="['size-' + players.length]">
v-for="player in players" <Player
:key="player.name" v-for="player in players"
:player="player" :key="player.name"
:roles="roles" :player="player"
:is-public="isPublic" :roles="roles"
></Player> :is-public="isPublic"
</ul> @add-reminder="openReminderModal"
></Player>
</ul>
<Modal v-show="availableReminders.length" @close="closeModal">
<ul class="reminders">
<li v-for="reminder in availableReminders" class="reminder"
v-bind:class="[reminder.role]"
@click="addReminder(reminder)">
{{ reminder.name }}
</li>
</ul>
</Modal>
</div>
</template> </template>
<script> <script>
import Player from './Player.vue'
import roles from '../roles.json' import roles from '../roles.json'
import Player from './Player'
import Modal from "./Modal";
export default { export default {
components: { components: {
Modal,
Player Player
}, },
props: ['isPublic'], props: ['isPublic'],
data () { data () {
return { return {
players: [ players: [
{ name: "Steffen", role: "baron" }, { name: "Steffen", role: "baron", reminders: [{ role: 'imp', name: 'Die' }] },
{ name: "Tino", role: "imp" }, { name: "Tino", role: "imp" },
{ name: "Basti", role: "chef" }, { name: "Basti", role: "chef", reminders: [] },
{ name: "Bernd", role: "ravenkeeper" }, { name: "Bernd", role: "ravenkeeper", reminders: [] },
{ name: "Tim", role: "drunk" }, { name: "Tim", role: "drunk", reminders: [] },
{ name: "Yann", role: "librarian" }, { name: "Yann", role: "librarian", reminders: [] },
{ name: "Marie", role: "empath" }, { name: "Marie", role: "empath", reminders: [] },
{ name: "Bogdan", role: "scarletwoman" }, { name: "Bogdan", role: "scarletwoman", reminders: [] },
{ name: "Sean", role: "recluse" }, { name: "Sean", role: "recluse", reminders: [] },
{ name: "Petra", role: "undertaker" }, { name: "Petra", role: "undertaker", reminders: [] },
], ],
roles: new Map(roles.map(role => [role.id, role])), roles: new Map(roles.map(role => [role.id, role])),
selectedPlayer: false,
availableReminders: [],
availableRoles: [],
}
},
methods: {
openReminderModal (player) {
this.selectedPlayer = player;
this.availableReminders = [];
this.roles.forEach(role => {
if (this.players.some(p => p.role === role.id)) {
this.availableReminders = [
...this.availableReminders,
...role.reminders.map(name => ({role: role.id, name}))
];
}
});
console.log('open', player.reminders);
},
addReminder (reminder) {
this.selectedPlayer.reminders.push(reminder);
this.closeModal();
},
closeModal () {
this.selectedPlayer = false;
this.availableReminders = [];
this.availableRoles = [];
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../roles.scss';
@mixin on-circle($item-count) { @mixin on-circle($item-count) {
$angle: (360 / $item-count); $angle: (360 / $item-count);
$rot: 0; $rot: 0;
@ -104,13 +147,73 @@
} }
} }
#townsquare {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
box-sizing: border-box;
padding: 20px;
}
// player circle // player circle
.circle { .circle {
background: url('../img/demon-head2.png') center center no-repeat; background: url('../assets/demon-head2.png') center center no-repeat;
background-size: 10%; background-size: 10%;
} }
#townsquare.public .circle { #townsquare.public .circle {
background-image: url('../img/demon-head.png'); background-image: url('../assets/demon-head.png');
} }
/***** Reminder token modal ******/
ul.reminders {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
align-items: center;
overflow: hidden;
justify-content: center;
.reminder {
background: url('../assets/reminder.png') center center;
background-size: 100%;
width: 100px;
height: 100px;
color: black;
font-size: 65%;
font-weight: bold;
display: block;
margin: 5px;
text-align: center;
position: relative;
border-radius: 50%;
border: 3px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
cursor: pointer;
box-sizing: border-box;
padding-top: 65px;
transition: transform 500ms ease;
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center 0;
background-repeat: no-repeat;
}
&:hover {
transform: scale(1.2);
}
}
}
</style> </style>

View File

@ -25,12 +25,12 @@ $roles:
@each $img, $fontsize in $roles { @each $img, $fontsize in $roles {
.token.#{$img} { .token.#{$img} {
&:before { &:before {
background-image: url('../img/icon-#{$img}.png'); background-image: url('../assets/icons/#{$img}.png');
} }
font-size: $fontsize; font-size: $fontsize;
} }
.reminder.#{$img}:before { .reminder.#{$img}:before {
background-image: url('../img/icon-#{$img}.png'); background-image: url('../assets/icons/#{$img}.png');
} }
} }