Started work on UI for rolling checks

app/imports/api/creature/actions/doCheck.js

@@ -5,15 +5,18 @@ import Creatures from '/imports/api/creature/Creatures.js';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import roll from '/imports/parser/roll.js';
 
-const doAction = new ValidatedMethod({
+const doCheck = new ValidatedMethod({
   name: 'creature.doCheck',
   validate: new SimpleSchema({
-    actionId: SimpleSchema.RegEx.Id,
-    targetId: {
+    creatureId: {
       type: String,
       regEx: SimpleSchema.RegEx.Id,
       optional: true,
     },
+    attributeName: {
+      type: String,
+      optional: true,
+    },
   }).validator(),
   mixins: [RateLimiterMixin],
   rateLimit: {
@@ -23,18 +26,31 @@ const doAction = new ValidatedMethod({
   run({creatureId, attributeName}) {
     let creature = Creatures.findOne(creatureId);
     assertEditPermission(creature, this.userId);
-		return doCheckWork({attributeName, creature});
+    let bonus = getAttributeValue({creature, attributeName})
+		return doCheckWork({bonus});
   },
 });
 
-function doCheckWork({attributeName, creature}){
+function getAttributeValue({creature, attributeName}){
   let att = creature.variables[attributeName];
   if (!att) throw new Meteor.Error('No such attribute',
     `This creature does not have a ${attributeName} property`);
   let bonus = att.attributeType === 'ability'? att.modifier : att.value;
-  //Always roll 2d20 and let the advantage be decided in UI
-  let rolls = roll(2,20);
-  return {rolls, bonus};
+  return bonus || 0;
 }
 
-export default doAction;
+export function doCheckWork({bonus, advantage = 0}){
+  let rolls = roll(2,20);
+  let chosenRoll;
+  if (advantage === 1){
+    chosenRoll = Math.max.apply(rolls);
+  } else if (advantage === -1){
+    chosenRoll = Math.min.apply(rolls);
+  } else {
+    chosenRoll = rolls[0];
+  }
+  let result = chosenRoll + bonus;
+  return {rolls, bonus, chosenRoll, result};
+}
+
+export default doCheck;

app/imports/ui/components/rolls/Check.vue

@@ -0,0 +1,100 @@
+<template lang="html">
+  <v-card>
+    <template v-if="!result">
+      <v-btn-toggle v-model="advantage">
+        <v-btn flat>
+          Advantage
+        </v-btn>
+        <v-btn flat>
+          Disadvantage
+        </v-btn>
+      </v-btn-toggle>
+      <v-card-text>
+        <div class="layout row justify-center align-center">
+          <v-btn
+            large
+            fab
+            outline
+            @click="makeRoll"
+          >
+            <div class="display-1">
+              {{ numberToSignedString(bonus) }}
+            </div>
+          </v-btn>
+        </div>
+      </v-card-text>
+    </template>
+    <template v-else>
+      <div>
+        <div class="title">
+          <span
+            v-for="(roll, index) of rolls"
+            :key="index"
+            class="roll"
+            :class="{strikethrough: index !== chosenRollIndex}"
+          >
+            {{ roll }}
+          </span>
+          <span class="ml-1">
+            {{ numberToSignedString(bonus) }}
+          </span>
+        </div>
+        <div class="display-1">
+          {{ result }}
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script>
+import { doCheckWork } from '/imports/api/creature/actions/doCheck.js'
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+export default {
+  props: {
+    attributeVarName: {
+      type: String,
+      default: '',
+    },
+    attributeName: {
+      type: String,
+      default: '',
+    },
+    creatureId: {
+      type: String,
+      default: '',
+    },
+    bonus: {
+      type: Number,
+      required: true,
+    },
+  },
+  data(){return {
+    advantage: undefined,
+    result: undefined,
+    rolls: undefined,
+    chosenRoll: undefined,
+    chosenRollIndex: undefined,
+  }},
+  methods: {
+    makeRoll(){
+      //let {rolls, bonus, chosenRoll, result} = doCheckWork.call();
+      this.rolls = [12, 8];
+      if (this.advantage === 1){
+        this.chosenRoll = 8;
+      } else {
+        this.chosenRoll = 12;
+      }
+      this.result = this.chosenRoll + this.bonus;
+      this.chosenRollIndex = this.rolls.indexOf(this.chosenRoll);
+    },
+    numberToSignedString,
+  }
+}
+</script>
+
+<style lang="css" scoped>
+  .strikethrough {
+    text-decoration: line-through;
+  }
+</style>

app/imports/ui/components/rolls/check.vue

@@ -1,9 +1,100 @@
-<template lang="html" />
+<template lang="html">
+  <v-card>
+    <template v-if="!result">
+      <v-btn-toggle v-model="advantage">
+        <v-btn flat>
+          Advantage
+        </v-btn>
+        <v-btn flat>
+          Disadvantage
+        </v-btn>
+      </v-btn-toggle>
+      <v-card-text>
+        <div class="layout row justify-center align-center">
+          <v-btn
+            large
+            fab
+            outline
+            @click="makeRoll"
+          >
+            <div class="display-1">
+              {{ numberToSignedString(bonus) }}
+            </div>
+          </v-btn>
+        </div>
+      </v-card-text>
+    </template>
+    <template v-else>
+      <div>
+        <div class="title">
+          <span
+            v-for="(roll, index) of rolls"
+            :key="index"
+            class="roll"
+            :class="{strikethrough: index !== chosenRollIndex}"
+          >
+            {{ roll }}
+          </span>
+          <span class="ml-1">
+            {{ numberToSignedString(bonus) }}
+          </span>
+        </div>
+        <div class="display-1">
+          {{ result }}
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
 
 <script>
+import { doCheckWork } from '/imports/api/creature/actions/doCheck.js'
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
+  props: {
+    attributeVarName: {
+      type: String,
+      default: '',
+    },
+    attributeName: {
+      type: String,
+      default: '',
+    },
+    creatureId: {
+      type: String,
+      default: '',
+    },
+    bonus: {
+      type: Number,
+      required: true,
+    },
+  },
+  data(){return {
+    advantage: undefined,
+    result: undefined,
+    rolls: undefined,
+    chosenRoll: undefined,
+    chosenRollIndex: undefined,
+  }},
+  methods: {
+    makeRoll(){
+      //let {rolls, bonus, chosenRoll, result} = doCheckWork.call();
+      this.rolls = [12, 8];
+      if (this.advantage === 1){
+        this.chosenRoll = 8;
+      } else {
+        this.chosenRoll = 12;
+      }
+      this.result = this.chosenRoll + this.bonus;
+      this.chosenRollIndex = this.rolls.indexOf(this.chosenRoll);
+    },
+    numberToSignedString,
+  }
 }
 </script>
 
 <style lang="css" scoped>
+  .strikethrough {
+    text-decoration: line-through;
+  }
 </style>

app/imports/ui/pages/Parser.vue

@@ -48,6 +48,20 @@
           label="reduced"
         />
         <function-reference />
+        <v-dialog
+          width="500"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              color="red lighten-2"
+              dark
+              v-on="on"
+            >
+              Click Me
+            </v-btn>
+          </template>
+          <check :bonus="4" />
+        </v-dialog>
       </v-card-text>
     </v-card>
   </div>
@@ -56,10 +70,12 @@
 <script>
 import { parse, CompilationContext } from '/imports/parser/parser.js';
 import FunctionReference from '/imports/ui/documentation/FunctionReference.vue';
+import Check from '/imports/ui/components/rolls/Check.vue';
 console.log(parse);
 export default {
   components: {
     FunctionReference,
+    Check,
   },
   data(){return {
     input: null,