stars and roller/assets improvements

src/components/Assets/Asset.vue

@@ -16,22 +16,23 @@
         </q-item-section>
       </q-item>
     </template>
-    <div class="q-pa-md q-gutter-sm">
-      <div v-if="data.subtitle" v-html="data.subtitle" />
+    <div class="q-pa-sm">
+      <div class="q-mb-sm" v-if="data.subtitle" v-html="data.subtitle" />
+
       <i-input class="q-mb-sm" v-if="data.input" :label="data.input.label" v-model="data.input.text" />
+
       <div v-for="(item, index) in data.items" :key="index">
-        <div class="row q-mb-sm no-wrap">
-          <q-checkbox class="col-1 self-center" v-model="data.items[index].marked" dense />
-          <div class="col-11 q-my-sm q-ml-sm text-justify asset-text" v-html="item.text" />
-        </div>
-        <div class="row justify-end">
-          <i-input
-            class="col-11"
-            v-if="data.items[index].input"
-            :label="data.items[index].input.label"
-            v-model="data.items[index].input.text"
-          />
+        <div class="row q-mb-sm no-wrap items-center q-pr-sm">
+          <q-checkbox class="col-shrink q-mr-sm" v-model="data.items[index].marked" dense />
+          <q-separator vertical />
+          <div class="col q-mx-sm text-justify asset-text" v-html="item.text" />
         </div>
+        <i-input
+          class="q-ml-lg q-mb-sm"
+          v-if="data.items[index].input"
+          :label="data.items[index].input.label"
+          v-model="data.items[index].input.text"
+        />
       </div>
       <div class="row justify-evenly q-gutter-sm">
         <q-checkbox v-if="data.cursed != undefined" label="Cursed" v-model="data.cursed" />

src/components/Assets/Assets.vue

@@ -84,7 +84,7 @@
                   label="Delete"
                   @click="customAssets.delete(ca)"
                 />
-                <q-btn class="q-ma-md" outline label="Mine!" @click="addAsset(ca.id || ca.title)" />
+                <q-btn class="q-ma-md" outline label="Add" @click="addAsset(ca.id || ca.title)" />
               </div>
             </div>
             <div v-else>
@@ -101,7 +101,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue';
 import { Assets } from 'src/lib/assets';
-//import Asset from 'src/components/Assets2/Asset.vue';
 import { IAsset } from 'src/components/models';
 import AssetEditor from './AssetEditor.vue';
 import { useAssets } from 'src/store/assets';
@@ -118,6 +117,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['update:modelValue'],
   setup(props, ctx) {
     const campaign = useCampaign();
     const config = useConfig();
@@ -126,6 +126,10 @@ export default defineComponent({
       () => props.modelValue,
       () => (showDialog.value = props.modelValue)
     );
+    watch(
+      () => showDialog.value,
+      () => ctx.emit('update:modelValue', showDialog.value)
+    );
     const close = () => {
       showDialog.value = false;
       showEditor.value = false;

src/components/Roller.vue

@@ -8,107 +8,110 @@
     class="roller"
   >
     <q-card class="column my-card">
-      <q-card-section class="row items-center">
-        <div class="col-12 text-h6 q-px-sm" v-if="d100Res > 0">
-          <div class="row items-baseline justify-between">
-            <div class="col-shrink">
-              <q-icon name="img:icons/dice/d10.svg" /><q-icon name="img:icons/dice/d10.svg" />
-            </div>
-            <div class="col-grow text-center q-mb-sm">{{ d100Res }}</div>
-            <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="d100Res = 0" :size="btnSize" />
+      <q-card-section class="row items-center justify-between q-gutter-sm q-pa-sm text-h6" v-if="d100Res > 0">
+        <div class="col-shrink"><q-icon name="img:icons/dice/d10.svg" /><q-icon name="img:icons/dice/d10.svg" /></div>
+        <div class="col-grow text-center">{{ d100Res }}</div>
+        <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="d100Res = 0" :size="btnSize" />
+      </q-card-section>
+
+      <q-card-section class="row items-center justify-between q-gutter-sm q-pa-sm text-h6" v-if="d6Res > 0">
+        <div class="col-shrink"><q-icon name="mdi-dice-6" /></div>
+        <div class="col-grow text-center">{{ d6Res }}</div>
+        <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="d6Res = 0" :size="btnSize" />
+      </q-card-section>
+
+      <q-card-section class="q-pa-sm" v-if="data.result">
+        <div class="row text-center text-h6 items-center justify-center q-mb-sm">
+          <div :class="data.action.color">
+            {{ data.result }}
+            <span v-if="data.challenge.match">with a match</span>
+            <q-icon v-if="burnt" name="mdi-fire" />
           </div>
         </div>
 
-        <div class="col-12 text-h6 q-px-sm" v-if="d6Res > 0">
-          <div class="row items-baseline justify-between">
-            <div class="col-shrink"><q-icon name="mdi-dice-6" /></div>
-            <div class="col-grow text-center q-mb-sm">{{ d6Res }}</div>
-            <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="d6Res = 0" :size="btnSize" />
-          </div>
+        <div class="row items-center justify-between text-h6 q-mx-sm">
+          <q-btn v-if="!burnt" :icon="adIcon" size="md" flat dense @click="reroll(true, false, false)">
+            <q-tooltip>Reroll Action die</q-tooltip>
+          </q-btn>
+          <span v-if="!burnt">+</span>
+          <span v-if="!burnt">{{ attribute }}</span>
+          <span v-if="!burnt">+</span>
+          <span v-if="!burnt">{{ adds }}</span>
+          <span v-if="!burnt">=</span>
+          <span v-if="burnt">Momentum</span>
+          <span v-if="burnt">=</span>
+          <span :class="data.action.color">{{ data.action.score }}</span>
+          <span>vs</span>
+          <q-btn :class="data.challenge.die1.color" outline round size="md" @click="reroll(false, true, false)">
+            {{ data.challenge.die1.roll }}
+            <q-tooltip>Reroll Challenge die</q-tooltip>
+          </q-btn>
+
+          <q-btn :class="data.challenge.die2.color" outline round size="md" @click="reroll(false, false, true)">
+            {{ data.challenge.die2.roll }}
+            <q-tooltip>Reroll Challenge die</q-tooltip>
+          </q-btn>
+          <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="data.result = ''" :size="btnSize">
+            <q-tooltip>Clear Roll Results</q-tooltip>
+          </q-btn>
         </div>
+      </q-card-section>
 
-        <div v-if="data.result" class="col-12 text-h6">
-          <div class="row text-center items-center justify-center">
-            <div :class="data.action.color">
-              {{ data.result }}
-              <span v-if="data.challenge.match">with a match</span>
-              <q-icon v-if="burnt" name="mdi-fire" />
-            </div>
-          </div>
-          <div class="row items-center justify-between q-mx-sm">
-            <q-btn v-if="!burnt" :icon="adIcon" size="md" flat dense @click="reroll(true, false, false)">
-              <q-tooltip>Reroll Action die</q-tooltip>
-            </q-btn>
-            <span v-if="!burnt">+</span>
-            <span v-if="!burnt">{{ attribute }}</span>
-            <span v-if="!burnt">+</span>
-            <span v-if="!burnt">{{ adds }}</span>
-            <span v-if="!burnt">=</span>
-            <span v-if="burnt">Momentum</span>
-            <span v-if="burnt">=</span>
-            <span :class="data.action.color">{{ data.action.score }}</span>
-            <span>vs</span>
-            <q-btn :class="data.challenge.die1.color" outline round size="md" @click="reroll(false, true, false)">
-              {{ data.challenge.die1.roll }}
-              <q-tooltip>Reroll Challenge die</q-tooltip>
-            </q-btn>
-            <span>|</span>
-            <q-btn :class="data.challenge.die2.color" outline round size="md" @click="reroll(false, false, true)">
-              {{ data.challenge.die2.roll }}
-              <q-tooltip>Reroll Challenge die</q-tooltip>
-            </q-btn>
-            <q-btn class="col-shrink" dense flat icon="mdi-backspace-outline" @click="data.result = ''" :size="btnSize">
-              <q-tooltip>Clear Roll Results</q-tooltip>
-            </q-btn>
-          </div>
+      <q-card-section class="q-pa-sm q-mb-none">
+        <div class="row items-center justify-evenly no-wrap">
+          <q-btn-toggle
+            class="col-grow"
+            flat
+            :options="opts"
+            label="Attribute"
+            dense
+            spread
+            v-model="select"
+            :size="btnSize"
+          />
+
+          <q-input class="col-1" type="number" label="Other" dense borderless v-model="otherAttr">
+            <q-tooltip>Custom attribute value</q-tooltip>
+          </q-input>
+
+          <q-input class="col-1" type="number" label="Adds" dense borderless v-model="adds" />
         </div>
+      </q-card-section>
 
-        <div class="col-12">
-          <div class="row items-baseline justify-between">
-            <q-btn-toggle
-              class="col-grow"
-              :options="opts"
-              label="Attribute"
-              dense
-              flat
-              spread
-              v-model="select"
-              :size="btnSize"
-            />
-            <q-input class="col-1" type="number" label="Other" dense borderless hide-bottom-space v-model="otherAttr">
-              <q-tooltip>Custom attribute value</q-tooltip>
-            </q-input>
-            <q-input class="col-1" type="number" label="Adds" dense borderless hide-bottom-space v-model="adds" />
-          </div>
+      <q-card-section class="q-pa-sm">
+        <div class="row items-center justify-between">
+          <q-btn class="col-shrink" icon="expand_more" dense flat @click="close" :size="btnSize">
+            <q-tooltip>Hide roller</q-tooltip>
+          </q-btn>
 
-          <div class="row items-baseline justify-evenly">
-            <q-btn class="col-shrink" icon="expand_more" dense flat @click="close" :size="btnSize">
-              <q-tooltip>Hide roller</q-tooltip>
-            </q-btn>
-            <q-btn class="col-shrink" dense flat @click="roll" :size="btnSize">
-              <q-icon name="mdi-dice-6" />
-              <q-icon name="img:icons/dice/d10.svg" />
-              <q-icon name="img:icons/dice/d10.svg" />
-              <q-tooltip>Roll +Attribute</q-tooltip>
-            </q-btn>
-            <q-btn
-              class="col-shrink"
-              dense
-              flat
-              :label="campaign.data.character.tracks.momentum.value"
-              icon="mdi-fire"
-              @click="burn"
-              :size="btnSize"
-            >
-              <q-tooltip>Burn Momentum</q-tooltip>
-            </q-btn>
-            <q-btn class="col-shrink" dense flat icon="mdi-dice-6" @click="d6" :size="btnSize">
-              <q-tooltip>Roll a D6</q-tooltip>
-            </q-btn>
-            <q-btn class="col-shrink" dense flat icon="img:icons/dice/d100.svg" @click="d100" :size="btnSize">
-              <q-tooltip>Roll a D100</q-tooltip>
-            </q-btn>
-          </div>
+          <q-btn class="col-shrink" dense flat @click="roll" :size="btnSize">
+            <q-icon name="mdi-dice-6" />
+            <q-icon name="img:icons/dice/d10.svg" />
+            <q-icon name="img:icons/dice/d10.svg" />
+            <q-tooltip>Roll +Attribute</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            class="col-shrink"
+            dense
+            flat
+            :label="campaign.data.character.tracks.momentum.value"
+            icon="mdi-fire"
+            @click="burn"
+            :size="btnSize"
+          >
+            <q-tooltip>Burn Momentum</q-tooltip>
+          </q-btn>
+
+          <q-btn class="col-shrink" dense flat icon="mdi-dice-6" @click="d6" :size="btnSize">
+            <q-tooltip>Roll a D6</q-tooltip>
+          </q-btn>
+
+          <q-btn class="col-shrink" dense flat @click="d100" :size="btnSize">
+            <q-icon name="img:icons/dice/d10.svg" />
+            <q-icon name="img:icons/dice/d10.svg" />
+            <q-tooltip>Roll a D100</q-tooltip>
+          </q-btn>
         </div>
       </q-card-section>
     </q-card>

src/components/Sector/HexMap.vue

@@ -141,7 +141,7 @@ export default defineComponent({
       if (c.ships.length > 0) path = icon.starship();
       if (c.settlements.length > 0) path = icon.settlement();
       if (c.planets.length > 0) path = icon.planet(c.planets[0].type);
-      if (c.stars.length > 0) path = icon.star();
+      if (c.stars.length > 0) path = icon.star(c.stars[0].description);
 
       const i = SVG()
         .image(path.replace('img:', ''))

src/components/Sector/SStar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <q-expansion-item
-      :icon="icon.star()"
+      :icon="icon.star(data.description)"
       header-class="star-header text-h5 sf-header rounded-borders q-mb-sm"
       :label="data.name"
       caption="Star"

src/lib/icons.ts

@@ -5,7 +5,13 @@ export const icon = {
   player: (): string => {
     return 'img:icons/space/player-ship.svg';
   },
-  star: (): string => {
+  star: (type: string): string => {
+    const res = /(red|orange|yellow|blue|young|white|corrupted|neutron|two|black|artificial|unstable|hypergiant)/i.exec(
+      type
+    );
+    if (res) {
+      return `img:icons/stars/${res[0].toLowerCase()}.png`;
+    }
     return 'img:icons/space/star-sattelites.svg';
   },
 
@@ -14,7 +20,7 @@ export const icon = {
   },
 
   planet: (type: string): string => {
-    return `img:icons/planets/${type.toLowerCase()}.svg`;
+    return `img:icons/planets/${type.toLowerCase()}.png`;
   },
 
   settlement: (): string => {
@@ -46,7 +52,9 @@ export const icon = {
   },
 
   asset: (name: string): string => {
-    return `img:${baseUrl}asset-${name.toLowerCase().replace(/ /gi, '-')}.svg`;
+    return /custom/i.test(name)
+      ? 'mdi-crosshairs-question'
+      : `img:${baseUrl}asset-${name.toLowerCase().replace(/ /gi, '-')}.svg`;
   },
 
   truth: (name: string): string => {

src/lib/moves.ts

@@ -105,7 +105,7 @@ export const Moves: { [index: string]: IMove[] } = {
       source: 'Starforged Backer Preview, 081921',
       keywords: '',
       text: '<p><strong>When you seek to resolve questions, discover details, reveal locations, determine how other characters respond, or trigger encounters or events</strong>, you may&hellip;</p>\n\n<ul>\n<li>Draw a conclusion: Decide the answer based on the most interesting and obvious result.</li>\n<li>Spark an idea: Use an oracle table or other random prompt.</li>\n<li>Ask a yes/no question: Decide the odds of a yes, and roll on the table below to check the answer.</li>\n<li>Pick two: Envision two options. Rate one as &lsquo;likely&rsquo;, and roll on the table below to see if it is true. If not, it is the other.</li>\n</ul>\n\n<table>\n<thead>\n<tr>\n<th>Odds</th>\n<th>The answer is &lsquo;yes&rsquo; if you roll&hellip;</th>\n</tr>\n</thead>\n\n<tbody>\n<tr>\n<td>Almost Certain</td>\n<td>11 or greater</td>\n</tr>\n\n<tr>\n<td>Likely</td>\n<td>26 or greater</td>\n</tr>\n\n<tr>\n<td><sup>50</sup>&frasl;<sub>50</sub></td>\n<td>51 or greater</td>\n</tr>\n\n<tr>\n<td>Unlikely</td>\n<td>76 or greater</td>\n</tr>\n\n<tr>\n<td>Small Chance</td>\n<td>91 or greater</td>\n</tr>\n</tbody>\n</table>\n',
-      oracles: ['Ask the Oracle'],
+      oracles: ['Almost Certain', 'Likely', '50/50', 'Unlikely', 'Small Chance'],
     },
   ],
   'Combat Moves': [