update ui

Author: tfzvang

html/rps-tf/index.html

@@ -20,7 +20,7 @@
     }
 
     .score {
-        font-size: 20px;
+        font-size: 3em;
     }
 
     .last-symbol {
@@ -37,6 +37,15 @@
     .align-self-center {
         align-self: center;
     }
+
+    .scard.scard-border {
+        border-right: 3px solid #dc3545;
+    }
+
+    svg.bi {
+        width: 8em;
+        height: 8em;
+    }
     </style>
 </head>
 
@@ -74,31 +83,31 @@ <h1 class="display-4">Rock Paper Scissor++</h1>
             <div class="col-sm align-self-center">
                 <div class="row">
                     <div class="col-sm">
-                        <div class="scard" style="width: 18rem;">
+                        <div class="scard scard-border text-center" style="width: 18rem;">
                             <div class="card-img-top">
-                                <svg width="9.3em" height="9.3em" viewBox="0 0 16 16" class="bi bi-person-badge" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <svg viewBox="0 0 16 16" class="bi bi-person-badge" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                     <path fill-rule="evenodd" d="M12 1H4a1 1 0 0 0-1 1v11.755S4 12 8 12s5 1.755 5 1.755V2a1 1 0 0 0-1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z" />
                                     <path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z" />
                                 </svg>
                             </div>
                             <div class="card-body">
                                 <h5 class="card-title">Your Score</h5>
-                                <p class="card-text"><span id="youScore" class="score">0</span> <span id="youLastSymbol" class="last-symbol"></span></p>
-                                <div id="youSymbol">ready...</div>
+                                <p class="card-text"><span id="youScore" class="score text-danger">0</span><span id="youLastSymbol" class="last-symbol"></span></p>
+                                <div id="youSymbol">ready <span class="text-danger">...</span></div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm">
-                        <div class="scard" style="width: 18rem;">
+                        <div class="scard text-center" style="width: 18rem;">
                             <div class="card-img-top">
-                                <svg width="9.3em" height="9.3em" viewBox="0 0 16 16" class="bi bi-cpu-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                                <svg viewBox="0 0 16 16" class="bi bi-cpu-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                     <path fill-rule="evenodd" d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5A1.5 1.5 0 0 0 5 6.5v3A1.5 1.5 0 0 0 6.5 11h3A1.5 1.5 0 0 0 11 9.5v-3A1.5 1.5 0 0 0 9.5 5h-3zm0 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
                                 </svg>
                             </div>
                             <div class="card-body">
                                 <h5 class="card-title">CPU Score</h5>
-                                <p class="card-text"><span id="computerScore" class="score">0</span> <span id="computerLastSymbol" class="last-symbol"></span></p>
-                                <div id="computerSymbol">ready...</div>
+                                <p class="card-text"><span id="computerScore" class="score text-danger">0</span><span id="computerLastSymbol" class="last-symbol"></span></p>
+                                <div id="computerSymbol">ready <span class="text-danger">...</span></div>
                             </div>
                         </div>
                     </div>

html/rps-tf/index.js

@@ -529,13 +529,13 @@ function updateSymbols() {
     if (youSymbol) {
         you.innerHTML = youSymbol;
     } else {
-        you.innerHTML = 'ready...';
+        you.innerHTML = 'ready <span class="text-danger">...</span>';
     }
 
     if (comSymbol) {
         com.innerHTML = comSymbol;
     } else {
-        com.innerHTML = 'waiting...';
+        com.innerHTML = 'waiting <span class="text-danger">...</span>';
     }
 }
 
@@ -544,13 +544,13 @@ function updateLastSymbols() {
     const com = document.getElementById('computerLastSymbol');
 
     if (youSymbol) {
-        you.innerHTML = youSymbol;
+        you.innerHTML = `<br>You choose: ${youSymbol}`;
     } else {
         you.innerHTML = '';
     }
 
     if (comSymbol) {
-        com.innerHTML = comSymbol;
+        com.innerHTML = `<br>CPU choose: ${comSymbol}`;
     } else {
         com.innerHTML = '';
     }