Tweak speedometer

cardano-scaling · Aug 10, 2024 · b231724 · b231724
1 parent 1870347
commit b231724
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 37 deletions.
diff --git a/src/game.ts b/src/game.ts
@@ -21,7 +21,7 @@ import {
 import { CBOR } from "./contract/cbor";
 import { keys } from "./keys";
 import { appendTx, session, updateUI } from "./stats";
-import { setSpeedometerValue } from "./speedometer";
+import { setLocalSpeedometerValue } from "./speedometer";
 import { Hydra } from "./hydra";
 
 let gameServerUrl = process.env.SERVER_URL;
@@ -77,7 +77,7 @@ export async function fetchNewGame() {
       total_play_time: 0,
     };
     // TODO: protocol from host
-    hydra = new Hydra(`https://${node}`);
+    hydra = new Hydra(`https://${node}`, 100);
     await hydra.populateUTxO();
     hydra.onTxSeen = (_txId, tx) => {
       const redeemer: Uint8Array | undefined = tx.txComplete
@@ -110,7 +110,7 @@ export async function fetchNewGame() {
           tps++;
         }
       }
-      setSpeedometerValue(tps);
+      setLocalSpeedometerValue(tps);
     };
     hydra.startEventLoop();
     latestUTxO = await hydra.awaitUtxo(newGameResponse.player_utxo, 5000);
@@ -164,7 +164,6 @@ export async function hydraSend(
     return;
   }
 
-  console.log("hydraSend", cmd);
 
   gameData.player = {
     ...player,
@@ -209,7 +208,7 @@ export async function hydraSend(
     collateralUTxO = utxos[0];
   }
 
-  if (frameNumber % 3 == 0) {
+  if (frameNumber % 8 !== 0 && frameNumber % 2 == 0) {
     const [newUtxo, tx] = await buildTx(
       latestUTxO!,
       encodeRedeemer(cmd),
@@ -329,10 +328,7 @@ const buildTx = async (
   auxData?.free();
   collateral.free();
   tx.txComplete = collateralTx;
-  // console.log("tx", tx);
   const signedTx = await tx.sign().complete();
-  // console.log("signed", tx);
-  console.log(toHex(signedTx.txSigned.to_bytes()));
   const body = signedTx.txSigned.body();
   const outputs = body.outputs();
   body.free();

diff --git a/src/index.html b/src/index.html
@@ -455,26 +455,28 @@ <h4 class="block__heading">Leaderboard</h4>
               </div>
             </article>
             <article class="block">
-              <h4 class="block__heading">TPS</h4>
-              <div class="speedometer">
-                <div class="speedometer__tick" data-speedometer-value="0"></div>
-                <div class="speedometer-min">0</div>
-                <div class="speedometer-max">100</div>
-                <div class="speedometer-value">0</div>
+              <h4 class="block__heading">Global TPS</h4>
+              <div class="global speedometer">
+                <div class="global speedometer__tick" data-speedometer-value="0"></div>
+                <div class="global speedometer-min">0</div>
+                <div class="global speedometer-max">100</div>
+                <div class="global speedometer-value">0</div>
               </div>
-              <!--<ul class="speedometer-labels">
-                <li class="red">Main net max throughput</li>
-                <li class="yellow">Session max throughput</li>
-              </ul>-->
             </article>
             <article class="block">
-              <div class="card card--small card--stats">
-                <p>
-                  A comparison between main net throughput (red), current
-                  throughput of this Hydra head (white needle), the highest
-                  recorded during the event (yellow) and the highest recorded
-                  during benchmarking (max value).
-                </p>
+                <div class="card--small card--stats">
+                    <p>
+                        A comparison between the throughput from your game session (bottom) and all the Hydra heads in aggregate (top).
+                    </p>
+                </div>
+            </article>
+            <article class="block">
+              <h4 class="block__heading">Local TPS</h4>
+              <div class="local speedometer">
+                <div class="local speedometer__tick" data-speedometer-value="0"></div>
+                <div class="local speedometer-min">0</div>
+                <div class="local speedometer-max">100</div>
+                <div class="local speedometer-value">0</div>
               </div>
             </article>
           </div>

diff --git a/src/speedometer.ts b/src/speedometer.ts
@@ -1,10 +1,20 @@
-const speedometerTick: HTMLDivElement | null = document.querySelector(
-  "[data-speedometer-value]",
-);
-const speedometerMax: HTMLDivElement | null =
-  document.querySelector(".speedometer-max");
-const speedometerValue: HTMLDivElement | null =
-  document.querySelector(".speedometer-value");
+interface SpeedometerElements {
+  tick: HTMLDivElement | null
+  max: HTMLDivElement | null
+  value: HTMLDivElement | null
+}
+
+const local: SpeedometerElements = {
+  tick: document.querySelector(".local.speedometer__tick"),
+  max: document.querySelector(".local.speedometer-max"),
+  value: document.querySelector(".local.speedometer-value"),
+};
+
+const global: SpeedometerElements = {
+  tick: document.querySelector(".global.speedometer__tick"),
+  max: document.querySelector(".global.speedometer-max"),
+  value: document.querySelector(".global.speedometer-value"),
+};
 
 // Map a value from one range to another
 function mapRange(
@@ -17,12 +27,21 @@ function mapRange(
   return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
 }
 
-export const MAX_SPEED = 50;
-speedometerMax!.innerText = MAX_SPEED.toString();
+export const MAX_SPEED = 40;
+export const GLOBAL_MAX_SPEED = 50 * 10;
+local.max!.innerText = MAX_SPEED.toString();
+global.max!.innerText = GLOBAL_MAX_SPEED.toString();
 
 // Set the speedometer value in the range [0, MAX_SPEED]
-export function setSpeedometerValue(value: number) {
+export function setLocalSpeedometerValue(value: number) {
   const degree = mapRange(value, 0, MAX_SPEED, 0, 180);
-  speedometerTick!.style.transform = `rotate(${degree}deg)`;
-  speedometerValue!.innerText = value.toString();
+  local.tick!.style.transform = `rotate(${degree}deg)`;
+  local.value!.innerText = value.toString();
+}
+
+
+export function setGlobalSpeedometerValue(value: number) {
+  const degree = mapRange(value, 0, GLOBAL_MAX_SPEED, 0, 180);
+  global.tick!.style.transform = `rotate(${degree}deg)`;
+  global.value!.innerText = value.toString();
 }
diff --git a/src/stats.ts b/src/stats.ts
@@ -1,3 +1,4 @@
+import { setGlobalSpeedometerValue } from './speedometer';
 let global: {
   games: HTMLDataListElement | null;
   gamesActive: HTMLDataListElement | null;
@@ -47,6 +48,7 @@ if (!gameServerUrl) {
 const TIC_RATE_MAGIC = 35; // 35 is the ticrate in DOOM WASM they use to calculate time.
 
 // Function to update UI with fetched data
+let last_query: any;
 export function updateUI(elements: any, data: any) {
   if (elements.games && data.total_games !== undefined) {
     elements.games.innerText = new Intl.NumberFormat("en").format(
@@ -58,8 +60,13 @@ export function updateUI(elements: any, data: any) {
       data.active_games,
     );
   }
+
   if (elements.txs && data.transactions !== undefined) {
     if (elements === global) {
+      if (last_query && data.transactions !== undefined) {
+        setGlobalSpeedometerValue(data.transactions - last_query.transactions);
+      }
+      last_query = data;
       elements.txs.style.setProperty("--num", data.transactions);
     } else {
       elements.txs.innerText = new Intl.NumberFormat("en").format(