introducing store

cosmicjs · Aug 26, 2018 · 494627e · 494627e
1 parent 1c9884d
commit 494627e
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>enterthecosmos</title>
   </head>
-  <body>
+  <body style="margin:0px;">
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "cosmicjs": "^3.2.12",
-    "vue": "^2.5.2"
+    "vue": "^2.5.2",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <HelloWorld/>
   </div>
 </template>
@@ -25,6 +24,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
diff --git a/src/assets/homeScreenTitleImage.png b/src/assets/homeScreenTitleImage.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -1,5 +1,19 @@
 <template>
-  <div>
+  <div class="homeScreen" :style="`background-image:url(${(homeScreenImage)});`">
+    <div class="homeScreenTitle">
+      <!-- <img :src="`${homeScreenTitleImage}`"> -->
+      <img src="../assets/homeScreenTitleImage.png" >
+    </div>
+
+    <div class="homeScreenOptions">
+      <div class="homeScreenOption">
+          Play Game
+      </div>
+
+      <div class="homeScreenOption">
+          How To Play {{abey}}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -20,7 +34,11 @@ const api = Cosmic()
     mounted() {
       this.getResObject()
     },
-    computed: {},
+    computed: {
+      abey() {
+        return this.$store.state.abey
+      }
+    },
     methods: {
       async getResObject() {
         const slug = 'home'
@@ -62,5 +80,32 @@ const api = Cosmic()
 </script>
 
 <style scoped>
+  .homeScreen {
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed!important;
+    overflow:hidden;
+    text-align: center;
+  }
 
+  .homeScreenTitle {
+    margin-top: 75px;
+  }
+
+  .homeScreenOptions {
+    margin: 45px auto 0 auto;
+    width: 30%;
+
+  }
+
+  .homeScreenOption {
+    border: 2px solid #92ced6;
+    color: #92ced6;
+    padding: 10px;
+    font-size: 18px;
+    font-weight: 800;
+    text-transform: uppercase;
+    margin: 25px;
+  }
 </style>
diff --git a/src/main.js b/src/main.js
@@ -1,13 +1,16 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import Vuex from 'vuex'
 import App from './App'
+import Store from './store/index.js'
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   components: { App },
-  template: '<App/>'
+  template: '<App/>',
+  store: Store
 })
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    abey: '5'
+  },
+  getters: {
+
+  },
+  mutations: {
+
+  }
+})
+
+export default store