Add the game over vue

src/App.vue

@@ -17,7 +17,7 @@ export default {
 
 <style>
 html {
-  background: url(assets/bg.jpg) no-repeat center fixed; 
+  background: url(assets/bg.jpg) no-repeat center fixed;
   -webkit-background-size: cover;
   background-size: cover;
 }

src/components/GameOver.vue

@@ -1,26 +1,32 @@
 <template>
   <div
-    v-if="score.winner"
+    v-if="isGameOver"
     class="floating-container">
-    <div class="game-over-modal">Game Over</div>
+    <div class="game-over-modal">
+      <div>Game Over</div>
+      <div v-if="isDraw">Draw</div>
+      <div v-else>{{ game.winner.char }}</div>
+      <div>{{ game.score.light }} - {{ game.score.dark }}</div>
+    </div>
   </div>
 </template>
 
 <script type="text/javascript">
 import { DiskConstants } from '../models/Disk'
 
 export default {
-  data: () => ({
-    empty: DiskConstants.empty
-  }),
   props: {
-    score: {
+    game: {
       type: Object,
-      default: () => ({
-        winner: null,
-        lightScore: 0,
-        darkScore: 0
-      })
+      default: () => null
+    }
+  },
+  computed: {
+    isGameOver () {
+      return this.game && this.game.currentPlayerDisk === DiskConstants.empty
+    },
+    isDraw () {
+      return this.game && this.game.winner.value === DiskConstants.empty
     }
   }
 }
@@ -31,10 +37,15 @@ export default {
   position: absolute;
 }
 .game-over-modal {
-  border: solid 5px black;
-  box-shadow: 5px;
-  background-color: rga(64, 192, 64);
-  width: 50vmin;
-  height: 50vmin;
+  border: solid 1vmin black;
+  box-shadow: 1vmin;
+  background-color: rgb(64, 192, 64);
+  display: flex;
+  flex-flow: column;
+}
+.game-over-modal div {
+  font-size: 10vmin;
+  padding: 3vmin;
+  text-align: center;
 }
 </style>

src/components/Reversi.vue

@@ -5,7 +5,7 @@
       @play="play"
     />
     <GameOver
-      :score="score"
+      :game="game"
       @restart="restart"
     />
   </div>
@@ -15,37 +15,28 @@
 import GameBoard from './GameBoard.vue'
 import GameOver from './GameOver.vue'
 import Reversi from '../models/Reversi'
-import DiskConstants from '../models/DiskConstants'
 
 export default {
   components: {
     GameBoard,
     GameOver
   },
   data: () => ({
-    game: undefined,
-    disk: undefined,
-    score: undefined
+    game: undefined
   }),
   methods: {
     play (position) {
-      this.game.clearHints()
       this.game.play(position)
-      this.disk = this.game.prepareNextTurn()
-      // TODO
-      if (this.disk === DiskConstants.empty) {
-        this.score = this.game.countScore()
-      }
+      this.game.prepareNextTurn()
     },
     restart () {
       this.game.reset()
-      this.disk = this.game.prepareNextTurn()
+      this.game.prepareNextTurn()
     }
   },
   mounted () {
     this.game = new Reversi()
-    this.disk = this.game.prepareNextTurn()
-    this.score = this.game.countScore()
+    this.game.prepareNextTurn()
   }
 }
 </script>

src/models/Disk.js

@@ -9,8 +9,8 @@ export const DiskConstants = {
 }
 
 class Disk {
-  constructor () {
-    this.value = 0
+  constructor (value = 0) {
+    this.value = value
   }
 
   get char () {

src/models/Reversi.js

@@ -216,7 +216,7 @@ class Reversi {
       winner = DiskConstants.light
     }
 
-    return winner
+    return new Disk(winner)
   }
 
   /**

tests/unit/Reversi.spec.js

@@ -206,12 +206,12 @@ describe('Reversi', () => {
       const reversi = new Reversi()
       reversi.setValueAt([0, 0], DiskConstants.dark)
       //
-      expect(reversi.winner).to.equal(DiskConstants.dark)
+      expect(reversi.winner.value).to.equal(DiskConstants.dark)
     })
     it('should return the winner to DiskConstants.empty if its a draw', () => {
       const reversi = new Reversi()
       //
-      expect(reversi.winner).to.equal(DiskConstants.empty)
+      expect(reversi.winner.value).to.equal(DiskConstants.empty)
     })
   })