From 341458712fde39a370c434b0b03a7699071d8602 Mon Sep 17 00:00:00 2001
From: Indrek Ardel <indrek@ardel.eu>
Date: Tue, 15 Dec 2015 04:36:50 +0200
Subject: [PATCH 1/2] Add CSS for striped ball icon

---
 styles.css | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 3838db9..a57a5f4 100644
--- a/styles.css
+++ b/styles.css
@@ -122,7 +122,7 @@
   width: 20px;
   height: 20px;
   text-align: center;
-  background-color: #d3d3d3;
+  display: block;
   border-radius: 20px;
 }
 
@@ -265,3 +265,34 @@
 .player.unknown span:before {
   content: '?';
 }
+
+.player ul li {
+  font-size: 10px;
+  line-height: 19px;
+  text-align: center;
+}
+
+.player ul li::after {
+  display: block;
+  background-color: white;
+  width: 12px;
+  height: 12px;
+  border-radius: 12px;
+  margin-top: -15px;
+  content: '';
+  margin-left: 4px;
+  z-index: 10;
+}
+
+.player ul li::before {
+  background-image: linear-gradient(#fff 13%, transparent 13%, transparent 87%, #fff 13%);
+  display: block;
+  background-color: red;
+  border: 1px solid #000;
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  margin-top: 0;
+  content: '';
+  margin-bottom: -20px;
+}

From 56f0b9ce860c320c3c9e07a1b6dd3d309aac5c42 Mon Sep 17 00:00:00 2001
From: Indrek Ardel <indrek@ardel.eu>
Date: Tue, 15 Dec 2015 15:24:47 +0200
Subject: [PATCH 2/2] Finish stripes

---
 index.html |  4 ++--
 styles.css | 47 +++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index e161ac6..cb3a567 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@ <h1>3D Billiards</h1>
       </div>
 
       <div id="controlsHud" class="hide">
-        <div class="player player1">
+        <div class="player player1 unknown">
           <h5>Player 1 (<span></span>)</h5>
 
           <ul>
@@ -64,7 +64,7 @@ <h5>Player 1 (<span></span>)</h5>
           </ul>
         </div>
 
-        <div class="player player2">
+        <div class="player player2 unknown">
           <h5>Player 2 (<span></span>)</h5>
 
           <ul>
diff --git a/styles.css b/styles.css
index a57a5f4..332c6e3 100644
--- a/styles.css
+++ b/styles.css
@@ -284,10 +284,16 @@
   z-index: 10;
 }
 
-.player ul li::before {
+.player.striped ul li::before {
   background-image: linear-gradient(#fff 13%, transparent 13%, transparent 87%, #fff 13%);
+}
+
+.player.solid ul li::before {
+  background-image: none;
+}
+
+.player ul li::before {
   display: block;
-  background-color: red;
   border: 1px solid #000;
   width: 20px;
   height: 20px;
@@ -296,3 +302,40 @@
   content: '';
   margin-bottom: -20px;
 }
+
+
+.player ul li:nth-child(1) {
+  background-color: #f5c61f;
+}
+
+.player ul li:nth-child(2) {
+  background-color: #123ecd;
+}
+
+.player ul li:nth-child(3) {
+  background-color: #cd1b12;
+}
+
+.player ul li:nth-child(4) {
+  background-color: #8412cd;
+}
+
+.player ul li:nth-child(5) {
+  background-color: #ff7f00;
+}
+
+.player ul li:nth-child(6) {
+  background-color: #269c0f;
+}
+
+.player ul li:nth-child(7) {
+  background-color: #a20000;
+}
+
+.player ul li.pocketed {
+  opacity: 0.5;
+}
+
+.player.unknown ul li {
+  background-color: #3d3d3d;
+}