Added implementation of the game

snyypi · May 13, 2018 · 4cba29c · 4cba29c
1 parent d210dd2
commit 4cba29c
Show file tree

Hide file tree

Showing 17 changed files with 704 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tweenjs/tween.js": "^17.2.0",
+    "crypto-js": "^3.1.9-1",
+    "js-cookie": "^2.2.0",
+    "materialize-css": "^1.0.0-rc.1",
     "vue": "^2.5.16"
   },
   "devDependencies": {

diff --git a/public/dice-cube-outline.svg b/public/dice-cube-outline.svg
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <title>dice</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,112 @@
 <template>
-  <div id="app">
-    <img src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app" class="container">
+    <div class="row">
+      <div class="col m8 s12 left-align">
+        <img class="responsive-img" src="./assets/logo.svg">
+        <h1>DICE</h1>
+      </div>
+      <Balance :balance="info.balance" @change="free"/>
+    </div>
+    <div class="row">
+      <Board :current="current" :info="info" @change="dice"/>
+      <Info :info="info"/>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue';
+import CryptoJS from 'crypto-js';
+import Cookie from 'js-cookie';
+
+import Balance from './components/Balance.vue';
+import Board from './components/Board.vue';
+import Info from './components/Info.vue';
+
+const getCurrent = () => {
+  let key = Math.random().toString(36).substr(2, 8);
+  let val = Math.floor(Math.random() * 100).toString();
+
+  key = CryptoJS.SHA3(key, { outputLength: 256 }).toString(CryptoJS.enc.Base64);
+  val = CryptoJS.AES.encrypt(val, key).toString();
+
+  return { key, val };
+};
 
 export default {
   name: 'app',
-  components: {
-    HelloWorld,
+  components: { Balance, Board, Info },
+  data() {
+    const current = getCurrent();
+
+    return { info: {}, current };
+  },
+  methods: {
+    dice(value) {
+      const { status, amount } = value;
+      const round = x => Number(x.toFixed(2));
+
+      const balance = round(this.info.balance + amount);
+      const previous = this.current;
+
+      this.info = {
+        amount,
+        balance,
+        previous,
+        status,
+      };
+      this.current = getCurrent();
+
+      Cookie.set('balance', balance);
+      Cookie.set('previous', previous);
+      Cookie.set('status', status);
+      Cookie.set('amount', amount);
+    },
+    free() {
+      this.info.balance = 100;
+      Cookie.set('balance', '100');
+    },
+  },
+  created() {
+    const info = Cookie.getJSON();
+    const isFirstGame = (!info.balance && info.balance !== 0);
+
+    this.info = info;
+    if (isFirstGame) {
+      Cookie.set('balance', '100');
+      this.info.balance = 100;
+    }
   },
 };
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
   margin-top: 60px;
 }
+#app h1 {
+  color: #1f1e25;
+  font-weight: 300;
+  margin: 0px;
+  padding: 0px;
+}
+#app .row {
+  margin-bottom: 0px;
+}
+#app .responsive-img {
+  height: 76px;
+  max-width: 76px;
+  width: 100%;
+
+  float: left;
+  margin-right: 10px;
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/Balance.vue b/src/components/Balance.vue
@@ -0,0 +1,38 @@
+<template lang="html">
+  <div class="col m4 s12 left">
+    <div class="row">
+      <div class="card deep-purple darken-4 left-align">
+        <div class="card-content white-text">
+          <span class="card-title">Your balanse $<Animated :value="balance"/></span>
+
+          <p>Free credits are available only with zero balance.</p>
+        </div>
+        <transition name="fade">
+          <div v-if="balance<=0" class="card-action">
+            <a href="#" @click="free">Get Free Credits</a>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Animated from './helpers/Animated.vue';
+
+export default {
+  name: 'Balance',
+  components: { Animated },
+  props: {
+    balance: Number,
+  },
+  methods: {
+    free() {
+      this.$emit('change');
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>