UI Improvements

stogacs · Dec 5, 2023 · 69714e0 · 69714e0
1 parent 97bf30c
commit 69714e0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 29 deletions.
diff --git a/leaderboard/trading.html b/leaderboard/trading.html
@@ -56,26 +56,35 @@
         <h1 class="pure-u-1 center-text"> Currency Exchange </h1>
         <h2 class="center-text error-text" id="error-display" style="display: none"></h2>
         <div class="info-card">
-          <h2>Exchange Rate</h2>
           <div class="convert-container">
+            <div class="left-section" style="margin-right: 30px; margin-bottom: 50px">
+              <div class="labels">
+                <h2>I Own</h2>
+                <p id="shekel-bal">0 Sharick Shekels</p>
+                <hr />
+                <p id="dd-bal">0 Dewees Dollars</p>
+              </div>
+              <div class="vertical-line"></div>
+            </div>
             <div class="left-section">
               <div class="labels">
-                <p id="shekel-masteer">1 Sharick Shekel</p>
+                <h2>Exchange Rate</h2>
+                <p id="shekel-master">1 Sharick Shekel</p>
                 <hr />
                 <p id="dd-conv">1 Dewees Dollar</p>
+                <div style="display: inline-flex; margin-top: 1em; align-items: center">
+                  <img
+                    src="/media/misc/logo-ftx.png"
+                    height="28px"
+                    style="margin-top: -2px; margin-right: 3px"
+                  /><p style="margin-right: 5px">Real-Time Quote</p>
+                  <span>
+                    <div class="indicator"> </div>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-          <div style="display: inline-flex; margin-top: 1em; align-items: center">
-            <img
-              src="/media/misc/logo-ftx.png"
-              height="28px"
-              style="margin-top: -2px; margin-right: 3px"
-            /><p style="margin-right: 5px">Real-Time Quote</p>
-            <span>
-              <div class="indicator"> </div>
-            </span>
-          </div>
         </div>
 
         <div class="info-card">

diff --git a/scripts/trading.js b/scripts/trading.js
@@ -18,6 +18,8 @@ document.addEventListener('DOMContentLoaded', async function () {
     if (userInfo.name == null) {
       window.location.href = '/leaderboard/onboarding/claim.html';
     }
+    const bal = document.getElementById('shekel-bal');
+    bal.textContent = bal.textContent.replace('0', userInfo.shekels);
   }
   sseSubscribe();
   document.getElementById('conv-quantity').addEventListener('input', convert);
@@ -50,5 +52,8 @@ function convert() {
 
 function toggleCurrency() {
   shekelsOnTop = !shekelsOnTop;
+  document.getElementById('conv-quantity').value = Math.round(
+    document.getElementById('conv-result').textContent.split(' ')[0],
+  );
   convert();
 }
diff --git a/style/leaderboard/trade.css b/style/leaderboard/trade.css
@@ -18,19 +18,35 @@
   border-radius: 1em;
   color: var(--light);
   width: 50%;
-  max-width: 800px;
-  min-width: 400px;
+  max-width: 850px;
+  min-width: 450px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
 
+.info-card input {
+  border: none;
+  border-radius: 0.5em;
+  padding: 0.5em;
+  margin-right: 0.25em;
+  background-color: var(--dark);
+  color: var(--light);
+}
+
 .info-card h1,
 h2,
 h3 {
   margin-bottom: 1em;
 }
 
+div.vertical-line {
+  width: 1px;
+  background-color: #808080;
+  height: 100%;
+  float: left;
+}
+
 .convert-container {
   display: flex;
   align-items: center;
@@ -70,7 +86,7 @@ h3 {
 
 .sponsor-container {
   display: inline-flex;
-  align-items: flex-end; /* Aligns items to the bottom */
+  align-items: flex-end;
   margin-left: 55%;
 }
 
@@ -80,16 +96,16 @@ h3 {
 
 .sponsor-container p {
   color: white;
-  margin-bottom: 0; /* Optional: Removes default margin */
+  margin-bottom: 0;
 }
 
 .indicator {
   position: relative;
-  width: 20px; /* Size of the central circle */
-  height: 20px; /* Size of the central circle */
-  background-color: #008000; /* Dark green color */
-  border-radius: 50%; /* Makes it a circle */
-  z-index: 1; /* Stack the central circle above the radiating ones */
+  width: 20px;
+  height: 20px;
+  background-color: #008000;
+  border-radius: 50%;
+  z-index: 1;
 }
 
 .indicator::before,
@@ -98,18 +114,18 @@ h3 {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 100%; /* Start width the same as the central circle */
-  height: 100%; /* Start height same as the central circle */
-  border-radius: 50%; /* Circular shape */
-  background-color: rgba(0, 255, 0, 0.5); /* Lighter green with transparency */
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 255, 0, 0.5);
   -webkit-transform: translate(-50%, -50%) scale(0.5);
-  transform: translate(-50%, -50%) scale(0.5); /* Center the circles and set the initial scale */
-  opacity: 0; /* Start fully transparent */
-  animation: radiate 2s infinite ease-in-out; /* Animation applied to both */
+  transform: translate(-50%, -50%) scale(0.5);
+  opacity: 0;
+  animation: radiate 2s infinite ease-in-out;
 }
 
 .indicator::after {
-  animation-delay: 1s; /* Delay the second animation to create the continuous effect */
+  animation-delay: 1s;
 }
 
 /* Radiate animation */