Began work on buttons to make rolls from the sheet

app/imports/ui/components/HorizontalHex.vue

@@ -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>

app/imports/ui/components/RollPopup.vue

@@ -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>

app/imports/ui/components/VerticalHex.vue

@@ -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>

app/imports/ui/properties/components/skills/SkillListTile.vue

@@ -4,37 +4,46 @@
     style="min-height: 36px;"
     v-on="hasClickListener ? {click} : {}"
   >
-    <proficiency-icon
-      :value="model.proficiency"
-      class="prof-icon"
-    />
-    <v-list-item-content class="py-1">
-      <v-list-item-title>
-        <span
+    <v-list-item-content class="py-0">
+      <v-list-item-title class="d-flex align-center">
+        <roll-popup
           v-if="!hideModifier"
-          class="prof-mod"
+          class="prof-mod mr-1"
+          button-class="px-2"
+          text
+          :roll-text="displayedModifier"
+          :name="model.name"
+          :advantage="model.advantage"
         >
-          {{ displayedModifier }}
-        </span>
-        <v-icon
-          v-if="model.advantage > 0"
-          size="20px"
-        >
-          mdi-chevron-double-up
-        </v-icon>
-        <v-icon
-          v-if="model.advantage < 0"
-          size="20px"
-        >
-          mdi-chevron-double-down
-        </v-icon>
-        {{ model.name }}
-        <template v-if="model.conditionalBenefits && model.conditionalBenefits.length">
-          *
-        </template>
-        <template v-if="'passiveBonus' in model">
-          ({{ passiveScore }})
-        </template>
+          <proficiency-icon
+            :value="model.proficiency"
+            class="prof-icon mr-2"
+          />
+          <div class="prof-mod">
+            {{ displayedModifier }}
+          </div>
+          <v-icon
+            v-if="model.advantage > 0"
+            size="20px"
+          >
+            mdi-chevron-double-up
+          </v-icon>
+          <v-icon
+            v-if="model.advantage < 0"
+            size="20px"
+          >
+            mdi-chevron-double-down
+          </v-icon>
+        </roll-popup>
+        <div>
+          {{ model.name }}
+          <template v-if="model.conditionalBenefits && model.conditionalBenefits.length">
+            *
+          </template>
+          <template v-if="'passiveBonus' in model">
+            ({{ passiveScore }})
+          </template>
+        </div>
       </v-list-item-title>
     </v-list-item-content>
   </v-list-item>
@@ -43,10 +52,12 @@
 <script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+import RollPopup from '/imports/ui/components/RollPopup.vue';
 
 export default {
   components: {
     ProficiencyIcon,
+    RollPopup,
   },
 	props: {
     model: {
@@ -84,8 +95,6 @@ export default {
 		min-width: 30px;
 	}
 	.prof-mod {
-		display: inline-block;
-		width: 45px;
-		text-align: center;
+    min-width: 32px;
 	}
 </style>

app/imports/ui/properties/viewers/SkillViewer.vue

@@ -42,6 +42,11 @@
         name="Skill type"
         :value="skillTypes[model.skillType]"
       />
+      <property-field
+        v-if="'passiveBonus' in model"
+        name="Passive score"
+        :value="passiveScore"
+      />
     </v-row>
     <v-row dense>
       <property-description
@@ -164,6 +169,9 @@ export default {
     icon(){
       return getProficiencyIcon(this.model.proficiency);
 		},
+    passiveScore(){
+      return 10 + this.model.value + this.model.passiveBonus;
+    }
   },
   methods: {
     numberToSignedString,

app/imports/ui/vuetify.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
-import { Scroll } from 'vuetify/lib/directives';
+import { Scroll, Ripple } from 'vuetify/lib/directives';
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 import SvgIconByName from '/imports/ui/icons/SvgIconByName.vue';
 import themes from '/imports/ui/themes.js';
@@ -9,6 +9,7 @@ import minifyTheme from 'minify-css-string';
 Vue.use(Vuetify, {
   directives: {
     Scroll,
+    Ripple,
   },
 });