Began work on buttons to make rolls from the sheet
This commit is contained in:
Stefan Zermatten
46
app/imports/ui/components/HorizontalHex.vue
Normal file
46
app/imports/ui/components/HorizontalHex.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template lang="html">
|
||||
<div
|
||||
class="d-flex justify-center align-center"
|
||||
style="height: 120px; width: 120px;"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
style="height: 120px; width: 120px; position: absolute;"
|
||||
>
|
||||
<path
|
||||
d="M 251.313 23.844 L 49.438 140.25 L 49.062 373.75 L 251.687 490.156 L 453.563 373.75 L 453.938 140.25 L 251.313 23.844 Z"
|
||||
fill-opacity="1"
|
||||
:fill="hover ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 255)'"
|
||||
/>
|
||||
<path
|
||||
d="M 249.801 51.001 L 71.808 153.637 L 71.477 359.513 L 250.131 462.148 L 428.125 359.513 L 428.455 153.637 L 249.801 51.001 Z"
|
||||
fill-opacity="1"
|
||||
:fill="hover ? 'rgb(40, 40, 40)' : 'rgb(80, 80, 80)'"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
v-ripple
|
||||
style="height: 100px; width: 100px; border-radius: 50%; z-index: 1; cursor: pointer;"
|
||||
class="d-flex justify-center align-center"
|
||||
@mouseover="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
export default {
|
||||
data(){return {
|
||||
hover: false,
|
||||
}},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
path {
|
||||
transition: fill 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
118
app/imports/ui/components/RollPopup.vue
Normal file
118
app/imports/ui/components/RollPopup.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template lang="html">
|
||||
<div>
|
||||
<v-menu
|
||||
v-model="open"
|
||||
origin="center center"
|
||||
transition="scale-transition"
|
||||
nudge-left="100px"
|
||||
nudge-top="100px"
|
||||
:close-on-content-click="false"
|
||||
>
|
||||
<template #activator="{ on }">
|
||||
<v-btn
|
||||
v-bind="$attrs"
|
||||
:class="buttonClass"
|
||||
v-on="on"
|
||||
@click.stop
|
||||
>
|
||||
<slot />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-sheet class="d-flex flex-column align-center justify-center">
|
||||
<v-btn-toggle v-model="dataAdvantage">
|
||||
<v-btn :value="-1">
|
||||
Disadvantage
|
||||
</v-btn>
|
||||
<v-btn :value="1">
|
||||
Advantage
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<div class="ma-1 text-subtitle-2">
|
||||
{{ name }}
|
||||
</div>
|
||||
<div>
|
||||
<v-scale-transition
|
||||
origin="center center"
|
||||
>
|
||||
<vertical-hex
|
||||
v-if="dataAdvantage !== undefined"
|
||||
style="position:absolute; transition: margin-left 0.3s ease;"
|
||||
:style="{marginLeft: dataAdvantage == 1 ? '24px' : '-24px'}"
|
||||
disable-hover
|
||||
/>
|
||||
</v-scale-transition>
|
||||
<vertical-hex @click="roll">
|
||||
<div>
|
||||
Roll
|
||||
</div>
|
||||
<div v-if="rollText">
|
||||
{{ rollText }}
|
||||
</div>
|
||||
</vertical-hex>
|
||||
</div>
|
||||
<v-btn
|
||||
text
|
||||
color="primary"
|
||||
style="align-self: end"
|
||||
@click="close"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
import VerticalHex from '/imports/ui/components/VerticalHex.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VerticalHex
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
rollText: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
buttonClass: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
advantage: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
data(){return {
|
||||
open: false,
|
||||
dataAdvantage: this.advantage,
|
||||
}},
|
||||
watch: {
|
||||
advantage(val){
|
||||
this.dataAdvantage = val;
|
||||
},
|
||||
open(val){
|
||||
if(!val){
|
||||
this.dataAdvantage = this.advantage;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
roll(){
|
||||
this.$emit('roll', {advantage: this.advantage});
|
||||
this.open = false;
|
||||
},
|
||||
close(){
|
||||
this.open = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
</style>
|
||||
58
app/imports/ui/components/VerticalHex.vue
Normal file
58
app/imports/ui/components/VerticalHex.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template lang="html">
|
||||
<div
|
||||
class="d-flex justify-center align-center"
|
||||
:style="`height: ${height}px; width: ${width}px;`"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
style="height: 120px; width: 120px; position: absolute;"
|
||||
>
|
||||
<path
|
||||
d="M 251.313 23.844 L 49.438 140.25 L 49.062 373.75 L 251.687 490.156 L 453.563 373.75 L 453.938 140.25 L 251.313 23.844 Z"
|
||||
fill-opacity="1"
|
||||
:fill="hover ? '#f44336 ' : '#f44336 '"
|
||||
/>
|
||||
<path
|
||||
d="M 249.801 51.001 L 71.808 153.637 L 71.477 359.513 L 250.131 462.148 L 428.125 359.513 L 428.455 153.637 L 249.801 51.001 Z"
|
||||
fill-opacity="1"
|
||||
:fill="hover ? 'rgb(80, 80, 80)' : 'rgb(40, 40, 40)'"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
v-ripple
|
||||
style="height: 100px; width: 100px; border-radius: 50%; z-index: 1; cursor: pointer;"
|
||||
class="d-flex flex-column justify-center align-center"
|
||||
@mouseover="hover = !disableHover"
|
||||
@mouseleave="hover = false"
|
||||
@click="e => $emit('click', e)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 120,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 120,
|
||||
},
|
||||
disableHover: Boolean,
|
||||
},
|
||||
data(){return {
|
||||
hover: false,
|
||||
}},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
path {
|
||||
transition: fill 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user