From b2317249c6fdf8b5acc6e652ce821f947b431273 Mon Sep 17 00:00:00 2001 From: Pi Lanningham Date: Sat, 10 Aug 2024 15:44:13 -0400 Subject: [PATCH] Tweak speedometer --- src/game.ts | 12 ++++-------- src/index.html | 36 +++++++++++++++++++----------------- src/speedometer.ts | 43 +++++++++++++++++++++++++++++++------------ src/stats.ts | 7 +++++++ 4 files changed, 61 insertions(+), 37 deletions(-) diff --git a/src/game.ts b/src/game.ts index 80c72d4a..7ac17c66 100644 --- 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 index 1194f6ad..dee3cb46 100644 --- a/src/index.html +++ b/src/index.html @@ -455,26 +455,28 @@

Leaderboard

-

TPS

-
-
-
0
-
100
-
0
+

Global TPS

+
+
+
0
+
100
+
0
-
-
-

- 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). -

+
+

+ A comparison between the throughput from your game session (bottom) and all the Hydra heads in aggregate (top). +

+
+
+
+

Local TPS

+
+
+
0
+
100
+
0
diff --git a/src/speedometer.ts b/src/speedometer.ts index e6c04a49..faa43879 100644 --- 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 index 6fff860e..0c453e08 100644 --- 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(