From a61bb1aa27317ac95840de43aa244fbfacde8d3d Mon Sep 17 00:00:00 2001 From: John Doknjas Date: Fri, 6 Dec 2024 08:18:13 +0000 Subject: [PATCH 1/5] Slightly increase the down-left shift for chart icons on mobile phones. --- ui/lobby/src/view/realTime/chart.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts index ab8cfb5f4298c..5a5809f5bbc6e 100644 --- a/ui/lobby/src/view/realTime/chart.ts +++ b/ui/lobby/src/view/realTime/chart.ts @@ -31,8 +31,9 @@ const clockX = (dur: number) => { }; function renderPlot(ctrl: LobbyController, hook: Hook) { - const bottom = Math.max(0, ratingY(hook.rating) - 2), - left = Math.max(0, clockX(hook.t) - 2), + const isMobilePhone = window.screen.width < 480; + const bottom = Math.max(0, ratingY(hook.rating) - (isMobilePhone ? 3 : 2)), + left = Math.max(0, clockX(hook.t) - (isMobilePhone ? 2.75 : 2)), klass = [ hook.id, 'plot.new', From 2fd9264897eff063207f3dcf0fc60ad719052233 Mon Sep 17 00:00:00 2001 From: John Doknjas Date: Fri, 6 Dec 2024 08:36:42 +0000 Subject: [PATCH 2/5] less than or equal --- ui/lobby/src/view/realTime/chart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts index 5a5809f5bbc6e..a5f08057e5703 100644 --- a/ui/lobby/src/view/realTime/chart.ts +++ b/ui/lobby/src/view/realTime/chart.ts @@ -31,7 +31,7 @@ const clockX = (dur: number) => { }; function renderPlot(ctrl: LobbyController, hook: Hook) { - const isMobilePhone = window.screen.width < 480; + const isMobilePhone = window.screen.width <= 480; const bottom = Math.max(0, ratingY(hook.rating) - (isMobilePhone ? 3 : 2)), left = Math.max(0, clockX(hook.t) - (isMobilePhone ? 2.75 : 2)), klass = [ From 89a30cb3a44537a3a509b014d6fcf68c7a3879cb Mon Sep 17 00:00:00 2001 From: johndoknjas Date: Sun, 8 Dec 2024 00:01:27 -0800 Subject: [PATCH 3/5] Calculate the adjust amounts for icons based on the proportion of the font size vs the chart dimensions. --- ui/lobby/src/view/realTime/chart.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts index a5f08057e5703..2ee350140dedb 100644 --- a/ui/lobby/src/view/realTime/chart.ts +++ b/ui/lobby/src/view/realTime/chart.ts @@ -31,9 +31,10 @@ const clockX = (dur: number) => { }; function renderPlot(ctrl: LobbyController, hook: Hook) { - const isMobilePhone = window.screen.width <= 480; - const bottom = Math.max(0, ratingY(hook.rating) - (isMobilePhone ? 3 : 2)), - left = Math.max(0, clockX(hook.t) - (isMobilePhone ? 2.75 : 2)), + const chart = document.querySelector('.hooks__chart') as HTMLElement; + const fontSize = parseFloat(window.getComputedStyle(chart).fontSize); + const bottom = Math.max(0, ratingY(hook.rating) - (fontSize / chart.clientHeight) * 75), + left = Math.max(0, clockX(hook.t) - (fontSize / chart.clientWidth) * 95), klass = [ hook.id, 'plot.new', From 6bb6be35a4daa2856260ab3f845fb921be3aa6bb Mon Sep 17 00:00:00 2001 From: johndoknjas Date: Sun, 8 Dec 2024 02:49:27 -0800 Subject: [PATCH 4/5] Only compute the icon translate amounts once. --- ui/lobby/src/view/realTime/chart.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts index 2ee350140dedb..1858d0f11e1a4 100644 --- a/ui/lobby/src/view/realTime/chart.ts +++ b/ui/lobby/src/view/realTime/chart.ts @@ -30,11 +30,21 @@ const clockX = (dur: number) => { return Math.round((durLog(Math.min(clockMax, dur || clockMax)) / durLog(clockMax)) * 100); }; -function renderPlot(ctrl: LobbyController, hook: Hook) { +let iconTranslateAmts: [number, number] | null = null; + +function getIconTranslateAmts(): [number, number] { + if (iconTranslateAmts) { + return iconTranslateAmts; + } const chart = document.querySelector('.hooks__chart') as HTMLElement; const fontSize = parseFloat(window.getComputedStyle(chart).fontSize); - const bottom = Math.max(0, ratingY(hook.rating) - (fontSize / chart.clientHeight) * 75), - left = Math.max(0, clockX(hook.t) - (fontSize / chart.clientWidth) * 95), + iconTranslateAmts = [(fontSize / chart.clientWidth) * 95, (fontSize / chart.clientHeight) * 75]; + return iconTranslateAmts; +} + +function renderPlot(ctrl: LobbyController, hook: Hook) { + const bottom = Math.max(0, ratingY(hook.rating) - getIconTranslateAmts()[1]), + left = Math.max(0, clockX(hook.t) - getIconTranslateAmts()[0]), klass = [ hook.id, 'plot.new', From 775abfb8fdd01f2c616046a8b3576d85177313ae Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Tue, 10 Dec 2024 10:00:10 +0100 Subject: [PATCH 5/5] use ui/common memoize --- ui/lobby/src/view/realTime/chart.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts index 1858d0f11e1a4..50a963df151d8 100644 --- a/ui/lobby/src/view/realTime/chart.ts +++ b/ui/lobby/src/view/realTime/chart.ts @@ -4,6 +4,7 @@ import { bind } from 'common/snabbdom'; import { h, type VNode } from 'snabbdom'; import type { Hook } from '../../interfaces'; import perfIcons from 'common/perfIcons'; +import { memoize } from 'common'; const percents = (v: number) => v + '%'; @@ -30,21 +31,15 @@ const clockX = (dur: number) => { return Math.round((durLog(Math.min(clockMax, dur || clockMax)) / durLog(clockMax)) * 100); }; -let iconTranslateAmts: [number, number] | null = null; - -function getIconTranslateAmts(): [number, number] { - if (iconTranslateAmts) { - return iconTranslateAmts; - } +const iconTranslateAmts: () => [number, number] = memoize<[number, number]>(() => { const chart = document.querySelector('.hooks__chart') as HTMLElement; const fontSize = parseFloat(window.getComputedStyle(chart).fontSize); - iconTranslateAmts = [(fontSize / chart.clientWidth) * 95, (fontSize / chart.clientHeight) * 75]; - return iconTranslateAmts; -} + return [(fontSize / chart.clientWidth) * 95, (fontSize / chart.clientHeight) * 75]; +}); function renderPlot(ctrl: LobbyController, hook: Hook) { - const bottom = Math.max(0, ratingY(hook.rating) - getIconTranslateAmts()[1]), - left = Math.max(0, clockX(hook.t) - getIconTranslateAmts()[0]), + const bottom = Math.max(0, ratingY(hook.rating) - iconTranslateAmts()[1]), + left = Math.max(0, clockX(hook.t) - iconTranslateAmts()[0]), klass = [ hook.id, 'plot.new',