Use SVGs for the board and pieces

5 files changed, 121 insertions, 0 deletions

diff --git a/draughts/public/images/BluePiece.png b/draughts/public/images/BluePiece.png
deleted file mode 100644
index 39fc808..0000000
--- a/draughts/public/images/BluePiece.png
+++ /dev/null
diff --git a/draughts/public/images/RedPiece.png b/draughts/public/images/RedPiece.png
deleted file mode 100644
index a5994a7..0000000
--- a/draughts/public/images/RedPiece.png
+++ /dev/null
diff --git a/draughts/public/images/bluepiece.svg b/draughts/public/images/bluepiece.svg
new file mode 100644
index 0000000..aa71150
--- /dev/null
+++ b/draughts/public/images/bluepiece.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="5" cy="5" r="5" fill="#204C6D" />
+	<circle cx="5" cy="5" r="3.5" fill="#007BBD" />
+</svg>
diff --git a/draughts/public/images/board.svg b/draughts/public/images/board.svg
new file mode 100644
index 0000000..0f06e62
--- /dev/null
+++ b/draughts/public/images/board.svg
@@ -0,0 +1,111 @@
+<svg version="1.1" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	<rect x="0"  y="0"  width="10" height="10" fill="black" />
+	<rect x="10" y="0"  width="10" height="10" fill="white" />
+	<rect x="20" y="0"  width="10" height="10" fill="black" />
+	<rect x="30" y="0"  width="10" height="10" fill="white" />
+	<rect x="40" y="0"  width="10" height="10" fill="black" />
+	<rect x="50" y="0"  width="10" height="10" fill="white" />
+	<rect x="60" y="0"  width="10" height="10" fill="black" />
+	<rect x="70" y="0"  width="10" height="10" fill="white" />
+	<rect x="80" y="0"  width="10" height="10" fill="black" />
+	<rect x="90" y="0"  width="10" height="10" fill="white" />
+
+	<rect x="0"  y="10" width="10" height="10" fill="white" />
+	<rect x="10" y="10" width="10" height="10" fill="black" />
+	<rect x="20" y="10" width="10" height="10" fill="white" />
+	<rect x="30" y="10" width="10" height="10" fill="black" />
+	<rect x="40" y="10" width="10" height="10" fill="white" />
+	<rect x="50" y="10" width="10" height="10" fill="black" />
+	<rect x="60" y="10" width="10" height="10" fill="white" />
+	<rect x="70" y="10" width="10" height="10" fill="black" />
+	<rect x="80" y="10" width="10" height="10" fill="white" />
+	<rect x="90" y="10" width="10" height="10" fill="black" />
+
+	<rect x="0"  y="20" width="10" height="10" fill="black" />
+	<rect x="10" y="20" width="10" height="10" fill="white" />
+	<rect x="20" y="20" width="10" height="10" fill="black" />
+	<rect x="30" y="20" width="10" height="10" fill="white" />
+	<rect x="40" y="20" width="10" height="10" fill="black" />
+	<rect x="50" y="20" width="10" height="10" fill="white" />
+	<rect x="60" y="20" width="10" height="10" fill="black" />
+	<rect x="70" y="20" width="10" height="10" fill="white" />
+	<rect x="80" y="20" width="10" height="10" fill="black" />
+	<rect x="90" y="20" width="10" height="10" fill="white" />
+
+	<rect x="0"  y="30" width="10" height="10" fill="white" />
+	<rect x="10" y="30" width="10" height="10" fill="black" />
+	<rect x="20" y="30" width="10" height="10" fill="white" />
+	<rect x="30" y="30" width="10" height="10" fill="black" />
+	<rect x="40" y="30" width="10" height="10" fill="white" />
+	<rect x="50" y="30" width="10" height="10" fill="black" />
+	<rect x="60" y="30" width="10" height="10" fill="white" />
+	<rect x="70" y="30" width="10" height="10" fill="black" />
+	<rect x="80" y="30" width="10" height="10" fill="white" />
+	<rect x="90" y="30" width="10" height="10" fill="black" />
+
+	<rect x="0"  y="40" width="10" height="10" fill="black" />
+	<rect x="10" y="40" width="10" height="10" fill="white" />
+	<rect x="20" y="40" width="10" height="10" fill="black" />
+	<rect x="30" y="40" width="10" height="10" fill="white" />
+	<rect x="40" y="40" width="10" height="10" fill="black" />
+	<rect x="50" y="40" width="10" height="10" fill="white" />
+	<rect x="60" y="40" width="10" height="10" fill="black" />
+	<rect x="70" y="40" width="10" height="10" fill="white" />
+	<rect x="80" y="40" width="10" height="10" fill="black" />
+	<rect x="90" y="40" width="10" height="10" fill="white" />
+
+	<rect x="0"  y="50" width="10" height="10" fill="white" />
+	<rect x="10" y="50" width="10" height="10" fill="black" />
+	<rect x="20" y="50" width="10" height="10" fill="white" />
+	<rect x="30" y="50" width="10" height="10" fill="black" />
+	<rect x="40" y="50" width="10" height="10" fill="white" />
+	<rect x="50" y="50" width="10" height="10" fill="black" />
+	<rect x="60" y="50" width="10" height="10" fill="white" />
+	<rect x="70" y="50" width="10" height="10" fill="black" />
+	<rect x="80" y="50" width="10" height="10" fill="white" />
+	<rect x="90" y="50" width="10" height="10" fill="black" />
+
+	<rect x="0"  y="60" width="10" height="10" fill="black" />
+	<rect x="10" y="60" width="10" height="10" fill="white" />
+	<rect x="20" y="60" width="10" height="10" fill="black" />
+	<rect x="30" y="60" width="10" height="10" fill="white" />
+	<rect x="40" y="60" width="10" height="10" fill="black" />
+	<rect x="50" y="60" width="10" height="10" fill="white" />
+	<rect x="60" y="60" width="10" height="10" fill="black" />
+	<rect x="70" y="60" width="10" height="10" fill="white" />
+	<rect x="80" y="60" width="10" height="10" fill="black" />
+	<rect x="90" y="60" width="10" height="10" fill="white" />
+
+	<rect x="0"  y="70" width="10" height="10" fill="white" />
+	<rect x="10" y="70" width="10" height="10" fill="black" />
+	<rect x="20" y="70" width="10" height="10" fill="white" />
+	<rect x="30" y="70" width="10" height="10" fill="black" />
+	<rect x="40" y="70" width="10" height="10" fill="white" />
+	<rect x="50" y="70" width="10" height="10" fill="black" />
+	<rect x="60" y="70" width="10" height="10" fill="white" />
+	<rect x="70" y="70" width="10" height="10" fill="black" />
+	<rect x="80" y="70" width="10" height="10" fill="white" />
+	<rect x="90" y="70" width="10" height="10" fill="black" />
+
+	<rect x="0"  y="80" width="10" height="10" fill="black" />
+	<rect x="10" y="80" width="10" height="10" fill="white" />
+	<rect x="20" y="80" width="10" height="10" fill="black" />
+	<rect x="30" y="80" width="10" height="10" fill="white" />
+	<rect x="40" y="80" width="10" height="10" fill="black" />
+	<rect x="50" y="80" width="10" height="10" fill="white" />
+	<rect x="60" y="80" width="10" height="10" fill="black" />
+	<rect x="70" y="80" width="10" height="10" fill="white" />
+	<rect x="80" y="80" width="10" height="10" fill="black" />
+	<rect x="90" y="80" width="10" height="10" fill="white" />
+
+	<rect x="0"  y="90" width="10" height="10" fill="white" />
+	<rect x="10" y="90" width="10" height="10" fill="black" />
+	<rect x="20" y="90" width="10" height="10" fill="white" />
+	<rect x="30" y="90" width="10" height="10" fill="black" />
+	<rect x="40" y="90" width="10" height="10" fill="white" />
+	<rect x="50" y="90" width="10" height="10" fill="black" />
+	<rect x="60" y="90" width="10" height="10" fill="white" />
+	<rect x="70" y="90" width="10" height="10" fill="black" />
+	<rect x="80" y="90" width="10" height="10" fill="white" />
+	<rect x="90" y="90" width="10" height="10" fill="black" />
+</svg>
diff --git a/draughts/public/images/redpiece.svg b/draughts/public/images/redpiece.svg
new file mode 100644
index 0000000..308a895
--- /dev/null
+++ b/draughts/public/images/redpiece.svg
@@ -0,0 +1,6 @@
+<!-- -*- major-mode: nxml-mode -*- -->
+
+<svg version="1.1" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="5" cy="5" r="5" fill="#803B2F" />
+	<circle cx="5" cy="5" r="3.5" fill="#9E3C2F" />
+</svg>
\ No newline at end of file