styling changes

Syrilai · Apr 1, 2023 · 34bc2ff · 34bc2ff
1 parent 692630b
commit 34bc2ff
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 16 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -126,7 +126,7 @@ button:hover {
   width: 100%;
 }
 
-.place {
+.dataset {
   font-weight: 600;
   font-size: 0.8rem;
 }
@@ -142,3 +142,16 @@ button:hover {
 .place.third {
   color: #c06c84;
 }
+
+.series-exp {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: #9465c3;
+}
+
+.series-exp::after {
+  content: "EXP";
+  color: #9465c3;
+  font-weight: 600;
+  font-size: 0.45rem;
+}
diff --git a/index.html b/index.html
@@ -58,11 +58,19 @@ <h2>Crystalline Conflict</h2>
         Show / Hide
       </button>
       <div id="view-crystallineConflict">
-        <p><b>Series EXP (Victory/Defeat):</b> 900 / 700</p>
+        <p>
+          <b>Series EXP (Victory/Defeat):</b>
+          <span class="series-exp">900</span> /
+          <span class="series-exp">700</span>
+        </p>
         <p><b>Match Time:</b> 5 minutes</p>
         <p><b>Queue Time:</b> 3 minutes</p>
-        <button onclick="main.addExp(900)">Add Victory (+900 EXP)</button>
-        <button onclick="main.addExp(700)">Add Defeat (+700 EXP)</button>
+        <button onclick="main.addExp(900)">
+          Add Victory (+<span class="series-exp">900</span>)
+        </button>
+        <button onclick="main.addExp(700)">
+          Add Defeat (+<span class="series-exp">700</span>)
+        </button>
         <p class="aria-label" aria-labelledby="tbl-crystalline-conflict">
           Crystalline Conflict Data Table
         </p>
@@ -96,7 +104,9 @@ <h2>Frontline</h2>
               >2nd</span
             >/<span class="place third">3rd</span>):</b
           >
-          1500 / 1250 / 1000
+          <span class="place first series-exp">1500</span>
+          / <span class="place second series-exp">1250</span> /
+          <span class="place third series-exp">1000</span>
         </p>
         <p><b>Match Time:</b> 20 minutes</p>
         <p><b>Queue Time:</b> 7 minutes</p>
@@ -138,13 +148,13 @@ <h2>Frontline</h2>
           </div>
         </div>
         <button onclick="frontline.add1stPlaceWin()">
-          Add 1st Place (+1500 EXP)
+          Add 1st Place (+<span class="series-exp">1500</span>)
         </button>
         <button onclick="frontline.add2ndPlaceWin()">
-          Add 2nd Place (+1250 EXP)
+          Add 2nd Place (+<span class="series-exp">1250</span>)
         </button>
         <button onclick="frontline.add3rdPlaceWin()">
-          Add 3rd Place (+1000 EXP)
+          Add 3rd Place (+<span class="series-exp">1000</span>)
         </button>
         <p class="aria-label" aria-labelledby="tbl-frontline">
           Frontline Data Table
@@ -176,11 +186,19 @@ <h2>Rival Wings</h2>
         Show / Hide
       </button>
       <div id="view-rivalWings">
-        <p><b>Series EXP (Victory/Defeat):</b> 1250 / 750</p>
+        <p>
+          <b>Series EXP (Victory/Defeat):</b>
+          <span class="series-exp">1250</span> /
+          <span class="series-exp">750</span>
+        </p>
         <p><b>Match Time:</b> 15 minutes</p>
         <p><b>Queue Time:</b> 7 minutes</p>
-        <button onclick="main.addExp(1250)">Add Victory (+1250 EXP)</button>
-        <button onclick="main.addExp(750)">Add Defeat (+750 EXP)</button>
+        <button onclick="main.addExp(1250)">
+          Add Victory (+<span class="series-exp">1250</span>)
+        </button>
+        <button onclick="main.addExp(750)">
+          Add Defeat (+<span class="series-exp">750</span>)
+        </button>
         <p class="aria-label" aria-labelledby="tbl-rivalwings">
           Rival Wings Data Table
         </p>

diff --git a/js/crystallineConflict.js b/js/crystallineConflict.js
@@ -25,6 +25,8 @@ crystallineConflict.init = function () {
 		const td4 = document.createElement("td");
 		const td5 = document.createElement("td");
 
+		tr.classList.add("dataset")
+
 		td1.innerText = element[0];
 		td2.innerText = "0";
 		td3.innerText = "0";

diff --git a/js/frontline.js b/js/frontline.js
@@ -61,14 +61,14 @@ frontline.init = function () {
 		const td4 = document.createElement("td");
 		const td5 = document.createElement("td");
 
+		tr.classList.add("dataset", "default-dataset");
+
 		td1.innerHTML = element[0];
 		td2.innerText = "-";
 		td3.innerText = "-";
 		td4.innerText = "-";
 		td5.innerText = "-";
 
-		tr.classList.add("default-dataset");
-
 		tr.appendChild(td1);
 		tr.appendChild(td2);
 		tr.appendChild(td3);
@@ -91,14 +91,14 @@ frontline.init = function () {
 		const td4 = document.createElement("td");
 		const td5 = document.createElement("td");
 
+		tr.classList.add("dataset", "custom-dataset")
+
 		td1.innerHTML = "Your Win Rate";
 		td2.innerText = "-";
 		td3.innerText = "-";
 		td4.innerText = "-";
 		td5.innerText = "-";
 
-		tr.classList.add("custom-dataset");
-
 		tr.appendChild(td1);
 		tr.appendChild(td2);
 		tr.appendChild(td3);

diff --git a/js/rivalWings.js b/js/rivalWings.js
@@ -7,7 +7,7 @@ const rivalWings = {
 		["25%", 0.25, 0.75],
 		["10%", 0.1, 0.9],
 		["5%", 0.05, 0.95],
-		["1%", 0, 1]
+		["0%", 0, 1]
 	],
 	hasInit: false,
 };
@@ -25,6 +25,8 @@ rivalWings.init = function () {
 		const td4 = document.createElement("td");
 		const td5 = document.createElement("td");
 
+		tr.classList.add("dataset")
+
 		td1.innerText = element[0];
 		td2.innerText = "0";
 		td3.innerText = "0";