make the ui look nicer

davefollett · May 23, 2018 · ee350a6 · ee350a6
1 parent b4b90a8
commit ee350a6
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 7 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>chess-fun-number-8-amazon-checkmate</title>
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <title>Chess Fun #8: Amazon Checkmate</title>
   </head>
   <body>
     <noscript>

diff --git a/src/assets/amazon.png b/src/assets/amazon.png
diff --git a/src/assets/blank.png b/src/assets/blank.png
diff --git a/src/assets/check-orange.png b/src/assets/check-orange.png
diff --git a/src/assets/checkmate-red.png b/src/assets/checkmate-red.png
diff --git a/src/assets/king.png b/src/assets/king.png
diff --git a/src/assets/queen.png b/src/assets/queen.png
diff --git a/src/assets/safe-green.png b/src/assets/safe-green.png
diff --git a/src/assets/stalemate-blue.png b/src/assets/stalemate-blue.png
diff --git a/src/components/ChessBoard.vue b/src/components/ChessBoard.vue
@@ -162,7 +162,8 @@ export default {
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(10, 1fr);
+    /*grid-template-columns: repeat(10, 1fr);*/
+    grid-template-columns: repeat(10, 75px);
     grid-gap: 2px;
     align-items: center;
 }

diff --git a/src/components/ChessSquare.vue b/src/components/ChessSquare.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="border">
-    {{ value }}
+  <div :class="[background, 'center']">
+    <img :src="require(`@/assets/${imagePath}`)" height="48" width="48">
   </div>
 </template>
 
@@ -11,16 +11,51 @@ export default {
     row: Number,
     column: Number,
   },
+  data () {
+    return {
+      imageLoopup: {
+        "A": "amazon.png",
+        "K": "king.png",
+        "S": "stalemate-blue.png",
+        "+": "check-orange.png",
+        "X": "checkmate-red.png",
+        "B": "blank.png",
+        "-": "blank.png",
+        "O": "safe-green.png"
+      },
+    }
+  },
   computed: {
-    value() {
-      return this.$store.getters.getSquareValue(this.row, this.column);
+    imagePath() {
+      return this.imageLoopup[this.$store.getters.getSquareValue(this.row, this.column)];
     },
+    background() {
+      let result = "even-color";
+      if((this.row + this.column) % 2 === 0) {
+        result = "odd-color";
+      }
+      return result;
+    }
   }
 }
 </script>
 
 <style scoped>
 
+.even-color {
+  /*background-color: tan;*/
+  background-color: #b6876b;
+}
+
+.odd-color {
+  /*background-color:peru;*/
+  /*background-color: #f4dfc1;*/
+  background-color: tan;
+}
+.center {
+  text-align: center;
+}
+
 .border {
   border-style: solid;
   border-width: 5px;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    <h2> Codewars Solution Tester: <a href="https://www.codewars.com/kata/chess-fun-number-8-amazon-checkmate" target="_blank">Chess Fun #8: Amazon Checkmate</a></h2>
     <ChessBoard></ChessBoard>
   </div>
 </template>