Merge branch 'version-2-dev' into version-2

app/imports/client/ui/creature/character/CharacterSheetToolbar.vue

@@ -39,27 +39,45 @@
                 <v-icon>mdi-dots-vertical</v-icon>
               </v-btn>
             </template>
-            <v-list v-if="editPermission">
-              <v-list-item @click="deleteCharacter">
+            <v-list>
+              <v-list-item :to="printUrl">
                 <v-list-item-title>
-                  <v-icon>mdi-delete</v-icon> Delete
+                  <v-icon left>
+                    mdi-printer
+                  </v-icon> Print
                 </v-list-item-title>
               </v-list-item>
-              <v-list-item @click="showCharacterForm">
+              <template v-if="editPermission">
+                <v-list-item @click="deleteCharacter">
+                  <v-list-item-title>
+                    <v-icon left>
+                      mdi-delete
+                    </v-icon> Delete
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="showCharacterForm">
+                  <v-list-item-title>
+                    <v-icon left>
+                      mdi-pencil
+                    </v-icon> Edit details
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="showShareDialog">
+                  <v-list-item-title>
+                    <v-icon left>
+                      mdi-share-variant
+                    </v-icon> Sharing
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+              <v-list-item
+                v-else
+                @click="unshareWithMe"
+              >
                 <v-list-item-title>
-                  <v-icon>mdi-pencil</v-icon> Edit details
-                </v-list-item-title>
-              </v-list-item>
-              <v-list-item @click="showShareDialog">
-                <v-list-item-title>
-                  <v-icon>mdi-share-variant</v-icon> Sharing
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-            <v-list v-else>
-              <v-list-item @click="unshareWithMe">
-                <v-list-item-title>
-                  <v-icon>mdi-delete</v-icon> Unshare with me
+                  <v-icon left>
+                    mdi-delete
+                  </v-icon> Unshare with me
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -144,6 +162,7 @@ import isDarkColor from '/imports/client/ui/utility/isDarkColor.js';
 import CharacterSheetFab from '/imports/client/ui/creature/character/CharacterSheetFab.vue';
 import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
 import SharedIcon from '/imports/client/ui/components/SharedIcon.vue';
+import getCreatureUrlName from '/imports/api/creature/creatures/getCreatureUrlName.js';
 
 export default {
   components: {
@@ -167,6 +186,9 @@ export default {
     isDark() {
       return isDarkColor(this.toolbarColor);
     },
+    printUrl() {
+      return `/print-character/${this.creature._id}/${getCreatureUrlName(this.creature)}`;
+    },
   },
   methods: {
     ...mapMutations([

app/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrinted.vue

@@ -42,7 +42,7 @@
                 {{ creature.alignment }} {{ background }}
               </div>
               <dir v-if="race || creature.gender">
-                {{ race }} {{ creature.gender }}
+                {{ creature.gender }} {{ race }}
               </dir>
               <div v-if="level && classes && classes.length === 1">
                 Level {{ level }} {{ classes[0].name }}
@@ -236,9 +236,41 @@ export default {
   color: black;
   font-size: 11pt;
 }
+
+.character-sheet-printed * {
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+  cursor: unset !important;
+}
+
 .page {
   padding: 4px;
 }
+
+.character-sheet-printed .column-layout, .character-sheet-printed .column-layout.wide-columns {
+  position:relative;
+  width: 100%;
+  widows: 0;
+  orphans: 0;
+  -webkit-column-fill: balance-all;
+  column-fill: balance-all;
+}
+
+.character-sheet-printed .column-layout>div {
+  position:relative;
+  display: block;
+  width: 100%;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
+.character-sheet-printed .column-layout>div>* {
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+  page-break-inside: avoid;
+}
 .character-sheet-printed .inactive {
   opacity: 1 !important;
 }
@@ -253,8 +285,6 @@ export default {
   background-image: url(/crown-dice-logo-cropped-transparent.png);
   background-size: contain;
   background-position: 0 center;
-  print-color-adjust: exact;
-  -webkit-print-color-adjust: exact;
 }
 
 .character-sheet-printed .v-divider {
@@ -265,7 +295,6 @@ export default {
 .character-sheet-printed .double-border {
   position: relative;
   padding: 11px 10px;
-  page-break-inside: avoid;
 }
 
 .character-sheet-printed .double-border::before {
@@ -286,8 +315,8 @@ export default {
 .character-sheet-printed .octagon-border {
   position: relative;
   padding: 4px 20px;
-  page-break-inside: avoid;
 }
+
 .character-sheet-printed .octagon-border::before {
   content: "";
   position: absolute;
@@ -326,6 +355,9 @@ export default {
   }
 }
 @media print {
+  .v-main, .v-application, .v-application--wrap, .character-sheet-printed {
+    display: block;
+  }
   header {
     display: none !important;
   }

app/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrintedToolbar.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-app-bar
+    app
+    class="character-sheet-printed-toolbar"
+    :color="toolbarColor"
+    :dark="isDark"
+    :light="!isDark"
+    clipped-right
+    :extended="$vuetify.breakpoint.smAndUp"
+    :tabs="$vuetify.breakpoint.smAndUp"
+    dense
+  >
+    <v-app-bar-nav-icon @click="toggleDrawer" />
+    <v-btn
+      icon
+      :to="characterUrl"
+    >
+      <v-icon>mdi-arrow-left</v-icon>
+    </v-btn>
+    <v-toolbar-title>
+      <v-fade-transition mode="out-in">
+        <div :key="$store.state.pageTitle">
+          {{ $store.state.pageTitle }}
+        </div>
+      </v-fade-transition>
+    </v-toolbar-title>
+    <v-spacer />
+    <div
+      slot="extension"
+      style="width: 100%"
+    >
+      <v-btn
+        class="print-fab"
+        color="accent"
+        elevation="4"
+        fab
+        @click="print"
+      >
+        <v-icon>mdi-printer</v-icon>
+      </v-btn>
+    </div>
+  </v-app-bar>
+</template>
+
+<script lang="js">
+import Creatures from '/imports/api/creature/creatures/Creatures.js';
+import { mapMutations } from 'vuex';
+import isDarkColor from '/imports/client/ui/utility/isDarkColor.js';
+import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
+import getCreatureUrlName from '/imports/api/creature/creatures/getCreatureUrlName.js';
+
+export default {
+  inject: {
+    context: { default: {} }
+  },
+  computed: {
+    creatureId() {
+      return this.$route.params.id;
+    },
+    toolbarColor() {
+      if (this.creature && this.creature.color) {
+        return this.creature.color;
+      } else {
+        return getThemeColor('secondary');
+      }
+    },
+    isDark() {
+      return isDarkColor(this.toolbarColor);
+    },
+    characterUrl() {
+      if (!this.creature) return;
+      return `/character/${this.creature._id}/${getCreatureUrlName(this.creature)}`;
+    },
+  },
+  methods: {
+    ...mapMutations([
+      'toggleDrawer',
+    ]),
+    print() {
+      print();
+    },
+  },
+  meteor: {
+    creature() {
+      return Creatures.findOne(this.creatureId);
+    },
+  },
+}
+</script>
+
+<style scoped>
+  .print-fab {
+    position: absolute;
+    bottom: -24px;
+    right: 24px;
+  }
+</style>

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedInventory.vue

@@ -62,7 +62,7 @@
       >
         <div 
           :key="container._id"
-          class="span-all container-header"
+          class="span-all"
         >
           <printed-container
             class="octagon-border"
@@ -232,22 +232,6 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.octagon-border {
-  position: relative;
-  padding: 4px 20px;
-  page-break-inside: avoid;
-}
-.octagon-border::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-image: url(/images/print/octagonBorder.png) 124 118 fill;
-  border-image-width: 22px;
-  z-index: -1;
-}
 
 .label {
   font-size: 14pt;
@@ -262,9 +246,4 @@ export default {
 .inventory-stat > .v-icon {
   margin-right: 8px;
 }
-
-.container-header {
-  page-break-after: avoid;
-  page-break-inside: avoid;
-}
 </style>

app/imports/client/ui/creature/character/printedCharacterSheet/PrintedStats.vue

@@ -2,97 +2,104 @@
   <div class="stats">
     <column-layout>
       <div
-        v-if="abilities.length"
-        class="ability-scores"
+        v-for="ability in abilities"
+        :key="ability._id"
       >
-        <div class="layout flex column">
-          <div
-            v-for="ability in abilities"
-            :key="ability._id"
-            class="ability"
-          >
-            <div class="score">
-              <div class="double-border top big-number">
-                <template v-if="creature.settings.swapScoresAndMods">
-                  {{ ability.total }}
-                </template>
-                <template v-else>
-                  {{ numberToSignedString(ability.modifier) }}
-                </template>
-              </div>
-              <div class="bottom">
-                <template v-if="creature.settings.swapScoresAndMods">
-                  {{ numberToSignedString(ability.modifier) }}
-                </template>
-                <template v-else>
-                  {{ ability.total }}
-                </template>
-              </div>
+        <div
+          class="ability"
+        >
+          <div class="score">
+            <div class="double-border top big-number">
+              <template v-if="creature.settings.swapScoresAndMods">
+                {{ ability.total }}
+              </template>
+              <template v-else>
+                {{ numberToSignedString(ability.modifier) }}
+              </template>
             </div>
-            <div class="double-border name label">
-              {{ ability.name }}
+            <div class="bottom">
+              <template v-if="creature.settings.swapScoresAndMods">
+                {{ numberToSignedString(ability.modifier) }}
+              </template>
+              <template v-else>
+                {{ ability.total }}
+              </template>
             </div>
           </div>
+          <div class="double-border name label">
+            {{ ability.name }}
+          </div>
         </div>
       </div>
 
       <div
         v-for="toggle in toggles"
         :key="toggle._id"
-        class="number-label"
       >
-        <div class="box double-border" />
-        <div class="label double-border">
-          {{ toggle.name }}
+        <div
+          class="number-label"
+        >
+          <div class="box double-border" />
+          <div class="label double-border">
+            {{ toggle.name }}
+          </div>
         </div>
       </div>
 
       <div
         v-for="stat in stats"
         :key="stat._id"
-        class="number-label"
-        :class="stat.variableName == 'armor' && 'shield-number-label'"
       >
         <div
-          :class="stat.variableName == 'armor' ? 'shield-border' : 'octagon-border'"
-          class="number big-number"
+          class="number-label"
+          :class="stat.variableName == 'armor' && 'shield-number-label'"
         >
-          {{ stat.value }}
-        </div>
-        <div class="label double-border">
-          {{ stat.name }}
+          <div
+            :class="stat.variableName == 'armor' ? 'shield-border' : 'octagon-border'"
+            class="number big-number"
+          >
+            {{ stat.value }}
+          </div>
+          <div class="label double-border">
+            {{ stat.name }}
+          </div>
         </div>
       </div>
 
       <div
         v-for="modifier in modifiers"
         :key="modifier._id"
-        class="number-label"
       >
-        <div class="number octagon-border big-number">
-          {{ numberToSignedString(modifier.value) }}
-        </div>
-        <div class="label double-border">
-          {{ modifier.name }}
+        <div
+          class="number-label"
+        >
+          <div class="number octagon-border big-number">
+            {{ numberToSignedString(modifier.value) }}
+          </div>
+          <div class="label double-border">
+            {{ modifier.name }}
+          </div>
         </div>
       </div>
 
       <div
         v-for="check in checks"
         :key="check._id"
-        class="number-label"
       >
-        <div class="number octagon-border big-number">
-          {{ numberToSignedString(check.value) }}
-        </div>
-        <div class="label double-border">
-          {{ check.name }}
+        <div
+          class="number-label"
+        >
+          <div class="number octagon-border big-number">
+            {{ numberToSignedString(check.value) }}
+          </div>
+          <div class="label double-border">
+            {{ check.name }}
+          </div>
         </div>
       </div>
       <div
         v-for="healthBar in healthBars"
         :key="healthBar._id"
-        class="m-2"
       >
         <div class="double-border">
           <div class="label">
@@ -115,7 +122,6 @@
       </div>
       <div
         v-if="hitDice.length"
-        class="hit-dice m-2"
       >
         <div class="double-border">
           <div>

app/imports/client/ui/creature/character/printedCharacterSheet/components/PrintedContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="inventory-container">
     <div class="d-flex justify-center">
       <property-icon
         class="ml-2"

app/imports/client/ui/layouts/Sidebar.vue

@@ -94,7 +94,7 @@ export default {
       let isLoggedIn = !!Meteor.userId();
       let links = [
         { title: 'Home', icon: 'mdi-home', to: '/' },
-        { title: 'Characters', icon: 'mdi-account-group', to: '/characterList', requireLogin: true },
+        { title: 'Characters', icon: 'mdi-account-group', to: '/character-list', requireLogin: true },
         { title: 'Library', icon: 'mdi-library-shelves', to: '/library', requireLogin: true },
         //{title: 'Tabletops', icon: 'api', to: '/tabletops', requireLogin: true},
         //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},

app/imports/client/ui/pages/About.vue

@@ -2,8 +2,8 @@
   <div>
     <section>
       <v-parallax
-        src="/images/paper-dice-crown-with-candy.png"
-        height="400"
+        src="/images/paper-dice-crown.webp"
+        height="300"
       >
         <v-layout
           column
@@ -12,7 +12,7 @@
           class="white--text"
         >
           <p
-            class="white--text ma-2 text-h5 text-center"
+            class="white--text ma-2 text-center"
             style="max-width: 1200px;"
           >
             DiceCloud is a single-developer project started in 2014 with the aim of

app/imports/client/ui/pages/Home.vue

@@ -1,29 +1,75 @@
 <template>
   <div
-    class="content layout column justify-space-between"
+    class="home content layout column justify-space-between"
     style="min-height: 100%;"
   >
+    <section
+      class="py-12 px-4"
+    >
+      <v-row
+        align="end"
+        justify="center"
+        class="mb-8"
+      >
+        <v-col
+          class="text-center"
+          cols="12"
+        >
+          <h1 class="text-h4 mb-4">
+            Free, Auditable, real-time character tracking for 5th edition
+          </h1>
+          <h4 class="subheading">
+            Spend less time shuffling paper, and more time playing the game
+          </h4>
+        </v-col>
+      </v-row>
+      <v-layout
+        v-if="!signedIn"
+        align-center
+        justify-center
+      >
+        <v-btn
+          color="accent"
+          rounded
+          large
+          to="/register"
+          class="mr-4"
+        >
+          Register
+        </v-btn>
+        <v-btn
+          color="accent"
+          rounded
+          outlined
+          large
+          to="/sign-in"
+        >
+          Sign In
+        </v-btn>
+      </v-layout>
+      <v-layout
+        v-else
+        align-center
+        justify-center
+      >
+        <v-btn
+          color="accent"
+          rounded
+          large
+          to="/character-list"
+          class="mr-4"
+        >
+          My Characters
+        </v-btn>
+      </v-layout>
+    </section>
     <section>
       <v-parallax
-        src="/images/paper-dice-crown.png"
+        src="/images/crown-dice-on-ipad.webp"
         height="300"
-      >
-        <v-layout
-          column
-          align-center
-          justify-center
-          class="white--text"
-        >
-          <h1 class="white--text mb-2 text-h4 text-center">
-            DiceCloud - Free, Auditable, real-time character tracking for 5th edition
-          </h1>
-          <div class="subheading mb-3 text-center">
-            Spend less time shuffling paper, and more time playing the game
-          </div>
-        </v-layout>
-      </v-parallax>
+      />
     </section>
-    <section class="text-center">
+    <section class="text-center py-8 px-4">
       <v-layout
         wrap
         justify-space-around
@@ -43,7 +89,7 @@
             Free, open source, community funded
           </h3>
           <p>
-            DiceCloud is free to use. Its hosting is funded via Patreon,
+            DiceCloud is free to use, funded via Patreon,
             and the source code is available on Github under a GPL license.
           </p>
         </v-layout>
@@ -58,11 +104,11 @@
             mdi-ballot-outline
           </v-icon>
           <h3 class="mb-2">
-            Character sheets optimised for one ruleset
+            Custom everything
           </h3>
           <p>
-            By having a narrrow scope, DiceCloud can be the best at what it
-            does: being a fully automated character tracker
+            Add new ability scores, skills, health-bars, and stats to your character.
+            The entire sheet is under your control.
           </p>
         </v-layout>
         <v-layout
@@ -76,31 +122,37 @@
             mdi-file-tree-outline
           </v-icon>
           <h3 class="mb-2">
-            Inventory manager
+            Advanced Character Engine
           </h3>
           <p>
-            Equiping items changes your characters stats automatically.
+            Characters are computed in real-time based on their equipment,
+            features, and buffs.
           </p>
         </v-layout>
       </v-layout>
     </section>
-    <section
-      v-if="!signedIn"
-      class="ma-5"
-    >
-      <v-layout
-        align-center
-        justify-space-around
-      >
-        <v-btn
-          color="accent"
-          rounded
-          large
-          to="/sign-in"
+    <section class="pa-8">
+      <v-row>
+        <v-col
+          v-for="(card, index) in highlightCards"
+          :key="index"
+          v-bind="cols"
         >
-          Sign In
-        </v-btn>
-      </v-layout>
+          <v-card
+            tile
+            :elevation="0"
+          >
+            <v-img
+              class="white--text align-end"
+              :src="'/images/screenshots/' + card.img"
+              gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)"
+              height="360px"
+            >
+              <v-card-title v-text="card.text" />  
+            </v-img>
+          </v-card>
+        </v-col>
+      </v-row>
     </section>
     <section class="text-center grey darken-3 white--text pa-5">
       <h1>
@@ -120,11 +172,16 @@
           ]"
           :key="btn.name"
           :href="btn.link"
-          text
+          outlined
           large
-          color="primary"
+          dark
         >
           {{ btn.name }}
+          <v-icon
+            right
+          >
+            mdi-open-in-new
+          </v-icon>
         </v-btn>
       </v-layout>
     </section>
@@ -133,6 +190,25 @@
 
 <script lang="js">
 export default {
+  data() {return {
+    cols: {
+      cols: 12,
+      sm: 6,
+      md: 4,
+      lg: 3,
+      xl: 2,
+    },
+    highlightCards: [
+      { text: 'Automated actions', img: 'actions.webp' },
+      { text: 'Auditable stats', img: 'auditable.webp' },
+      { text: 'Dice rolling', img: 'automated-dice-rolls.webp' },
+      { text: 'Hackable character builder', img: 'build-system.webp' },
+      { text: 'Drag and drop inventory manager', img: 'inventory.webp' },
+      { text: 'Custom libraries of content', img: 'libraries-of-content.webp' },
+      { text: 'Discord webhooks', img: 'send-to-discord.webp' },
+      { text: 'Printed character sheets', img: 'printing.webp' },
+    ],
+  }},
   meteor: {
     signedIn() {
       return Meteor.userId();
@@ -145,4 +221,7 @@ export default {
 .selling-points>* {
   max-width: 400px;
 }
+.dark-gradient {
+  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+}
 </style>

app/imports/client/ui/pages/SignIn.vue

@@ -39,7 +39,10 @@
         >
           Reset Password
         </v-btn>
-        <div class="error--text">
+        <div
+          v-if="error"
+          class="error--text"
+        >
           {{ error }}
         </div>
         <v-layout>
@@ -59,6 +62,13 @@
             Register
           </v-btn>
         </v-layout>
+        <div class="text-caption mt-4 px-4">
+          <p>
+            DiceCloud Version 2 requires a new account to use.
+          </p><p>
+            Version 1 is still available at <a href="https://v1.dicecloud.com">v1.dicecloud.com</a>
+          </p>
+        </div>
       </v-layout>
     </v-form>
     <v-divider class="ma-4" />

app/imports/client/ui/router.js

@@ -13,6 +13,7 @@ const CharacterSheetPage = () => import('/imports/client/ui/pages/CharacterSheet
 const CharacterSheetToolbar = () => import('/imports/client/ui/creature/character/CharacterSheetToolbar.vue');
 const CharacterSheetRightDrawer = () => import('/imports/client/ui/creature/character/CharacterSheetRightDrawer.vue');
 const CharacterSheetPrinted = () => import('/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrinted.vue');
+const CharacterSheetPrintedToolbar = () => import('/imports/client/ui/creature/character/printedCharacterSheet/CharacterSheetPrintedToolbar.vue');
 const SignIn = () => import('/imports/client/ui/pages/SignIn.vue');
 const Register = () => import('/imports/client/ui/pages/Register.vue');
 const IconAdmin = () => import('/imports/client/ui/icons/IconAdmin.vue');
@@ -185,6 +186,7 @@ RouterFactory.configure(router => {
     alias: '/print-character/:id/:urlName',
     components: {
       default: CharacterSheetPrinted,
+      toolbar: CharacterSheetPrintedToolbar,
     },
     meta: {
       title: 'Print Character Sheet',