From 04a91e994c338dd36a9290a023081d7b30eea98d Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Mon, 14 Nov 2016 21:45:47 +0000
Subject: [PATCH] Render the pieces with background images

---
 app/components/chess-piece.vue | 15 ++++++---------
 app/styles/main.scss           | 21 +++++++++++++++------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/components/chess-piece.vue b/app/components/chess-piece.vue
index ae4a6fd..1ed0335 100644
--- a/app/components/chess-piece.vue
+++ b/app/components/chess-piece.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="board-square">
-    <img v-if="piece != null" :src="pieceImage(piece)">
+  <div class="board-square" :class="classes(piece)">
   </div>
 </template>
 
 <script>
 export default {
   methods: {
-    pieceImage: (piece) => {
-      return "/images/"
-        + piece.type
-        + "_"
-        + piece.colour
-        + ".svg";
-    }
+    classes: (piece) => {
+      if (piece != null) {
+        return [piece.type, piece.colour];
+      }
+    },
   },
 
   props: ["piece"]
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 718da09..3db43ec 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -10,6 +10,9 @@ $white-square-color: #d0bfa1;
 
 $square-outline-color: darken($black-square-color, 20%);
 
+$colours: black white;
+$pieces: king queen bishop knight rook pawn;
+
 .board {
   display: inline-block;
   font-size: 0;
@@ -24,19 +27,25 @@ $square-outline-color: darken($black-square-color, 20%);
   width: $board-square-size;
   height: $board-square-size;
 
-  img {
-    position: absolute;
-    margin: 0;
-    width: $board-square-size;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  @each $colour in $colours {
+    @each $piece in $pieces {
+      &.#{$colour}.#{$piece} {
+        background-image: url(/images/#{$piece}_#{$colour}.svg);
+      }
+    }
   }
 }
 
 %black-square {
-  background: $black-square-color;  
+  background-color: $black-square-color;
 }
 
 %white-square {
-  background: $white-square-color;
+  background-color: $white-square-color;
 }
 
 .board-row:nth-child(odd) {