Merge pull request #33 from DartCaller/develop

v1.2.0

Author: 8BitJonny

.storybook/customTheme.js

@@ -0,0 +1,9 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'dark',
+  appBg: 'rgba(16,15,19,1)',
+  barBg: 'rgba(16,15,19,1)',
+});

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/addons';
+import customTheme from './customTheme';
+
+addons.setConfig({
+  theme: customTheme,
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: [],
+  },
+});

.storybook/preview.js

@@ -5,8 +5,28 @@ import Vuesax from 'vuesax'
 import 'vuesax/dist/vuesax.css'
 import ICountUp from 'vue-countup-v2'
 
+import Socket from '../plugins/socket'
+
+Socket({ store: {}}, (name, plugin) => {
+  Vue.use({ install: (VueInstance) => {
+      VueInstance.prototype['$'+name] = plugin
+  }})
+})
+
+Vue.use({ install: (VueInstance) => {
+  VueInstance.prototype.$store = { state: {}, commit: () => ({}) }
+}})
 
 Vue.component('CountUp', ICountUp)
+Vue.component('NuxtLink', {
+  props:  {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  template: '<a :href="to"><slot /></a>'
+})
 Vue.use(Vuesax, {})
 
 export const parameters = {

components/TheNavBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <the-nav-bar-pure
+    :logged-in="loggedIn"
+    :items="navItems"
+    :logged-in-items="loggedInNavItems"
+  />
+</template>
+
+<script>
+import TheNavBarPure from '~/components/TheNavBarPure'
+
+export default {
+  name: 'TheNavBar',
+  components: { TheNavBarPure },
+  data() {
+    return {
+      navItems: [
+        { label: 'Game', href: 'create-game' },
+        { label: 'Profile', clickHandler: this.notImplemented },
+        { label: 'Settings', clickHandler: this.notImplemented },
+        { label: 'Logout', clickHandler: this.logout },
+      ],
+      loggedInNavItems: [{ label: 'Login', clickHandler: this.login }],
+    }
+  },
+  computed: {
+    loggedIn() {
+      return this.$store.state.accessToken !== null
+    },
+  },
+  methods: {
+    login() {
+      this.$auth0.login()
+    },
+    logout() {
+      this.$auth0.logout()
+    },
+    notImplemented() {
+      this.$vs.notification({
+        progress: 'auto',
+        position: 'top-center',
+        duration: 5000,
+        title: 'Not yet implemented',
+        text:
+          'But Timon, Pumba and the whole Lion King family is busy as a bee working on it.',
+      })
+    },
+  },
+}
+</script>

components/TheNavBarPure.stories.js

@@ -0,0 +1,37 @@
+import { action } from '@storybook/addon-actions'
+import TheNavBarPure from './TheNavBarPure'
+
+export default {
+  component: TheNavBarPure,
+  excludeStories: /.*Data$/,
+  title: 'Common/TheNavBarPure',
+  decorators: [
+    () => ({
+      template:
+        '<div style="position: relative; margin: 0.5rem; background-color: #303030"><story/></div>',
+    }),
+  ],
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { TheNavBarPure },
+  props: Object.keys(argTypes),
+  template: '<TheNavBarPure v-bind="$props" />',
+})
+export const Default = Template.bind({})
+Default.args = {
+  loggedIn: false,
+  itemsLoggedIn: [
+    { label: 'Game', href: 'create-game' },
+    { label: 'Profile', clickHandler: action('ProfileClicked') },
+    { label: 'Settings', clickHandler: action('SettingsClicked') },
+    { label: 'Logout', clickHandler: action('LogoutClicked') },
+  ],
+  items: [{ label: 'Login', clickHandler: () => {} }],
+}
+
+export const LoggedIn = Template.bind({})
+LoggedIn.args = {
+  ...Default.args,
+  loggedIn: true,
+}

components/TheNavBarPure.vue

@@ -0,0 +1,49 @@
+<template>
+  <vs-navbar color="#303030" text-white square>
+    <template #left>
+      <h2>DartCaller</h2>
+    </template>
+    <template #right>
+      <template v-for="item in itemsToDisplay">
+        <template v-if="item.href">
+          <NuxtLink :key="item.label" :to="item.href">
+            <styledButton>{{ item.label }}</styledButton>
+          </NuxtLink>
+        </template>
+        <template v-else>
+          <styledButton :key="item.label" @click="item.clickHandler">
+            {{ item.label }}
+          </styledButton>
+        </template>
+      </template>
+    </template>
+  </vs-navbar>
+</template>
+
+<script>
+import styledButton from '~/components/common/StyledButton'
+
+export default {
+  name: 'TheNavBar',
+  components: { styledButton },
+  props: {
+    loggedIn: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    itemsLoggedIn: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    itemsToDisplay() {
+      return this.loggedIn ? this.itemsLoggedIn : this.items
+    },
+  },
+}
+</script>

components/common/StyledButton.stories.js

@@ -4,7 +4,7 @@ import StyledButton from './StyledButton.vue'
 export default {
   component: StyledButton,
   excludeStories: /.*Data$/,
-  title: 'StyledButton',
+  title: 'Common/StyledButton',
   argTypes: {
     icon: {
       control: {

components/common/modal/CorrectScore.stories.js

@@ -1,15 +1,20 @@
-import PureCorrectScore from './PureCorrectScore.vue'
+import CorrectScorePure from './CorrectScorePure.vue'
 
 export default {
-  component: PureCorrectScore,
-  title: 'PureCorrectScore',
+  component: CorrectScorePure,
+  title: 'InGame/CorrectScorePure',
   exludeStories: /.*Data$/,
+  decorators: [
+    () => ({
+      template: '<div style="max-width: 40rem; margin: 1em;"><story/></div>',
+    }),
+  ],
 }
 
 const Template = (args, { argTypes }) => ({
-  components: { PureCorrectScore },
+  components: { CorrectScorePure },
   props: Object.keys(argTypes),
-  template: '<pureCorrectScore v-bind="$props"/>',
+  template: '<correctScorePure v-bind="$props"/>',
 })
 export const Default = Template.bind({})
 Default.args = {

components/common/modal/CorrectScore.vue

@@ -1,5 +1,5 @@
 <template>
-  <PureCorrectScore
+  <CorrectScorePure
     :player-names="game.playerNames"
     :player-order="game.playerOrder"
     :current-player="game.currentPlayer"
@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import PureCorrectScore from '~/components/common/modal/PureCorrectScore.vue'
+import CorrectScorePure from '~/components/common/modal/CorrectScorePure.vue'
 
 export default {
   name: 'Modal',
-  components: { PureCorrectScore },
+  components: { CorrectScorePure },
   data: () => ({
     allPlayers: [],
     chosenPlayerID: '',

…onents/common/modal/PureCorrectScore.vue …onents/common/modal/CorrectScorePure.vuecomponents/common/modal/PureCorrectScore.vue renamed to components/common/modal/CorrectScorePure.vue components/common/modal/PureCorrectScore.vue renamed to components/common/modal/CorrectScorePure.vue

@@ -3,7 +3,7 @@
     <h2 class="colored mb text-center">Correct Score</h2>
     <div class="row">
       <div>
-        <p>For Player:</p>
+        <p class="label">For Player:</p>
         <vs-select
           v-model="chosenPlayerID"
           color="#14A76C"
@@ -24,7 +24,7 @@
         </vs-select>
       </div>
       <div>
-        <p>Last Score:</p>
+        <p class="label">Last Score:</p>
         <vs-input v-model="newScoreValue" class="input" border success>
           <template v-if="!newScoreIsValid" #message-danger> Invalid </template>
         </vs-input>
@@ -280,8 +280,8 @@ export default {
       display: flex;
       align-items: center;
 
-      :not(:first-child) {
-        margin-left: 10px;
+      .label {
+        margin-right: 10px;
       }
     }
 
@@ -290,7 +290,19 @@ export default {
     }
 
     .input {
-      max-width: 50px;
+      &::v-deep input {
+        max-width: 60px;
+        text-align: center;
+
+        &:focus {
+          padding-left: 9.5px;
+        }
+      }
+
+      &::v-deep .vs-input__message {
+        bottom: -2px;
+        margin: auto;
+      }
     }
 
     * {