asdads

Author: Will Wise

src/App.vue

@@ -2,48 +2,48 @@
   <div id="app">
     <div class="sports-field">
       <h1>{{ title }}</h1>
-      <img
-        class="soccer-goal"
-        src="/static/soccer-goal.png"
-        alt="Soccer goal">
-      <img
-        class="soccer-ball"
-        :class="status"
-        src="/static/soccer-ball.png"
-        alt="Soccer ball"
-        @click="shoot">
+      <board :score="score" :miss="miss"></board>
+      <goal></goal>
+      <ball :image="src" @score="score ++" @miss="miss ++"></ball>
     </div>
   </div>
 </template>
 
 <script>
+import Goal from './components/Goal.vue'
+import Ball from './components/Ball.vue'
+import Board from './components/Board.vue'
+
 export default {
+  components: {
+    Goal,
+    Ball,
+    Board
+  },
+
   data () {
     return {
+      score: 0,
+      miss: 0,
       status: '',
-      title: "Let's play"
+      title: "Getting started",
+      goalClass: "something-great",
+      src: '/static/soccer-ball.png'
     }
   },
 
   methods: {
-    shoot () {
-      const results = [
-        'miss',
-        'score'
-      ]
-
-      this.status = results[Math.floor(Math.random() * results.length)]
 
-      setTimeout(() => {
-        this.reset()
-      }, 800)
-    },
 
     reset () {
       this.status = 'reset'
       setTimeout(() => {
         this.status = ''
       }, 500)
+    },
+
+    imageSrc () {
+      return '/static/soccer-ball.png'
     }
   }
 }

src/components/Ball.vue

@@ -0,0 +1,58 @@
+<template>
+  <img
+    :class="status"
+    @click="shoot"
+    class="soccer-ball"
+    :src="image"
+    alt="Soccer ball">
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      status: ''
+    }
+  },
+
+  props: [
+    'image'
+  ],
+
+  watch: {
+    status () {
+      if ( this.status == 'score' ) {
+        this.$emit('score')
+      } else if ( this.status == 'miss' ) {
+        this.$emit('miss')
+      }
+    }
+  },
+
+  methods: {
+    shoot () {
+      const results = [
+        'miss',
+        'score'
+      ]
+
+      this.status = results[Math.floor(Math.random() * results.length)]
+
+      setTimeout(() => {
+        this.reset()
+      }, 800)
+    },
+
+    reset () {
+      this.status = 'reset'
+      setTimeout(() => {
+        this.status = ''
+      }, 500)
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/Board.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="board">
+    <div class="board-score">
+      Score: {{ score }}
+    </div>
+    <div class="board-miss">
+      Miss: {{ miss }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'score',
+    'miss'
+  ]
+}
+</script>
+
+<style>
+
+</style>

src/components/Goal.vue

@@ -0,0 +1,16 @@
+<template>
+  <img
+    class="soccer-goal"
+    src="/static/soccer-goal.png"
+    alt="Soccer goal">
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style>
+
+</style>