Merge pull request #3 from pierrechls/revert-2-feature/improve-template

Revert "Improve template"

Author: pierrechls

template/build/webpack.base.conf.js

@@ -29,7 +29,6 @@ module.exports = {
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
-      'views': path.resolve(__dirname, '../src/views'),
       'settings': path.resolve(__dirname, '../settings'),
       'locales': path.resolve(__dirname, '../locales'),
       'data': path.resolve(__dirname, '../src/data'),

template/locales/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import store from 'src/store'
+import store from 'src/vuex/store'
 
 Vue.use(VueI18n)
 Vue.config.lang = store.state.lang

template/package.json

@@ -40,8 +40,7 @@
     "vue": "^2.0.0",
     "vue-i18n": "^4.5.0",
     "vue-router": "^2.0.0",
-    "vuex": "^2.0.0",
-    "vuex-router-sync": "^3.0.0"
+    "vuex": "^1.0.0-rc.2"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

template/src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
     <menu-app></menu-app>
-    <transition name="fade" mode="out-in">
+    <!-- <transition name="default"> -->
       <router-view></router-view>
-    </transition>
+    <!-- <transition> -->
   </div>
 </template>
 
@@ -26,4 +26,3 @@
 </script>
 
 <style lang="scss" src="assets/styles/app.scss"></style>
-<style lang="scss" src="src/transitions/fade.scss"></style>

template/src/assets/fonts/futura/FuturaBkBt.otf

@@ -25,7 +25,7 @@ body {
   color: $green;
   max-width: 250px;
   height: 400px;
-  font-family: 'Open Sans', Helvetica, sans-serif;
+  font-family: 'Futura', Helvetica, sans-serif;
   text-align: center;
   position: relative;
 

template/src/assets/fonts/futura/FuturaBkBt.ttf

@@ -1,5 +1,15 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@font-face {
+  font-family: 'Futura';
+  src: url('~assets/fonts/futura/FuturaBkBt.otf');
+  src: url('~assets/fonts/futura/FuturaBkBt.ttf') format('truetype')
+}
 
 @font-face {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Glyphicons Halflings';
+  src: url('~assets/fonts/glyphicons/glyphicons-halflings-regular.eot');
+  src: url('~assets/fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+       url('~assets/fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
+       url('~assets/fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
+       url('~assets/fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
+       url('~assets/fonts/glyphicons/glyphicons-halflings-regular.svg#@{icon-font-svg-id}') format('svg');
 }

template/src/assets/fonts/glyphicons/glyphicons-halflings-regular.eot

@@ -8,11 +8,13 @@
 
 <script>
 
+  import { getSeed } from 'src/vuex/getters'
+
   export default {
     name: 'Garden',
-    computed: {
-      seedNumber() {
-        return this.$store.state.seed
+    vuex: {
+      getters: {
+        seedNumber: getSeed
       }
     }
   }

template/src/assets/fonts/glyphicons/glyphicons-halflings-regular.svg

@@ -7,19 +7,17 @@
 
 <script>
 
+  import { getLang } from 'src/vuex/getters'
+  import { translate } from 'src/vuex/actions'
+
   export default {
     name: 'LangSwitcher',
-    computed: {
-      lang() {
-        return this.$store.state.lang
-      }
-    },
-    methods: {
-      translate: function (lang) {
-        this.$store.dispatch('translate', lang)
+    vuex: {
+      getters: {
+        lang: getLang
       },
-      pullUp: function () {
-        this.$store.dispatch('translate', lang)
+      actions: {
+        translate
       }
     }
   }

template/src/assets/fonts/glyphicons/glyphicons-halflings-regular.ttf

@@ -9,6 +9,8 @@
 
 <script>
 
+  import { plant, pullUp } from 'src/vuex/actions'
+  import { getSeed } from 'src/vuex/getters'
   import settings from 'lib/settings'
 
   export default {
@@ -19,17 +21,13 @@
         minSeed: 0
       }
     },
-    computed: {
-      seedNumber() {
-        return this.$store.state.seed
-      }
-    },
-    methods: {
-      plant: function () {
-        this.$store.dispatch('plant')
+    vuex: {
+      getters: {
+        seedNumber: getSeed
       },
-      pullUp: function () {
-        this.$store.dispatch('pullUp')
+      actions: {
+        plant,
+        pullUp
       }
     }
   }

template/src/assets/fonts/glyphicons/glyphicons-halflings-regular.woff

@@ -1,6 +1,6 @@
-import Home from 'views/Home'
-import Plant from 'views/Plant'
-import Garden from 'views/Garden'
+import Home from 'components/Home'
+import Plant from 'components/Plant'
+import Garden from 'components/Garden'
 
 module.exports = [
   {

template/src/assets/fonts/glyphicons/glyphicons-halflings-regular.woff2

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import routes from './routes'
+import routes from 'data/routes'
 
 Vue.use(VueRouter)
 

template/src/assets/styles/app.scss

@@ -3,13 +3,14 @@ import App from 'src/App'
 
 // Global vue stuffs
 import 'gsap'
+import 'src/transitions'
 import 'locales/index'
 
 // Routing
-import router from 'src/router'
+import router from 'lib/router'
 
 // Store
-import store from 'src/store'
+import store from 'src/vuex/store'
 
 new Vue({
   el: '#app',

template/src/assets/styles/fonts.scss

@@ -0,0 +1,52 @@
+import Vue from 'vue'
+
+Vue.component('default', {
+  css: false,
+  template: '\
+    <transition\
+      name="default"\
+      mode="out-in"\
+      v-on:before-enter="beforeEnter"\
+      v-on:enter="enter"\
+      v-on:after-enter="afterEnter"\
+      v-on:enter-cancelled="enterCancelled"\
+      v-on:before-leave="beforeLeave"\
+      v-on:leave="leave"\
+      v-on:after-leave="afterLeave"\
+      v-on:leave-cancelled="leaveCancelled"\
+    >\
+      <slot></slot>\
+    </transition>\
+  ',
+  methods: {
+    beforeEnter: function (el) {
+      // ...
+    },
+    enter: function (el, done) {
+      TweenMax.fromTo(el, 0.5, {opacity: 0}, {opacity: 1, onComplete: function () {
+        done()
+      }}).delay(0.2)
+    },
+    afterEnter: function (el) {
+      // ...
+    },
+    enterCancelled: function (el) {
+      // ...
+    },
+
+    beforeLeave: function (el) {
+      // ...
+    },
+    leave: function (el, done) {
+      TweenMax.fromTo(el, 0.2, {opacity: 1}, {opacity: 0, onComplete: function () {
+        done()
+      }})
+    },
+    afterLeave: function (el) {
+      // ...
+    },
+    leaveCancelled: function (el) {
+      // ...
+    }
+  }
+})

template/src/views/Garden.vue renamed to template/src/components/Garden.vue

@@ -0,0 +1 @@
+import './default'

template/src/views/Home.vue renamed to template/src/components/Home.vue

@@ -0,0 +1,11 @@
+export const plant = function ({ dispatch, state }) {
+  dispatch('PLANT', 1)
+}
+
+export const pullUp = function ({ dispatch, state }) {
+  dispatch('PULL_UP', 1)
+}
+
+export const translate = function ({ dispatch, state }, lang) {
+  dispatch('TRANSLATE', lang)
+}

template/src/components/LangSwitcher.vue

@@ -0,0 +1,2 @@
+export const getSeed = state => state.seed
+export const getLang = state => state.lang

template/src/views/Plant.vue renamed to template/src/components/Plant.vue

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import settings from 'lib/settings.js'
+
+// Make vue aware of Vuex
+Vue.use(Vuex)
+
+// Create an object to hold the initial state when
+// the app starts up
+const state = {
+  seed: settings.seed.default,
+  lang: settings.lang
+}
+
+// Create an object storing various mutations. We will write the mutation
+const mutations = {
+  PLANT (state, amount) {
+    state.seed = state.seed - amount
+  },
+  PULL_UP (state, amount) {
+    state.seed = state.seed + amount
+  },
+  TRANSLATE (state, lang) {
+    state.lang = lang
+  }
+}
+
+// Combine the initial state and the mutations to create a Vuex store.
+// This store can be linked to our app.
+export default new Vuex.Store({
+  state,
+  mutations
+})