Skip to content

Chart icon positions on mobile phones #16533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Dec 10, 2024
Merged

Chart icon positions on mobile phones #16533

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a61bb1a
Slightly increase the down-left shift for chart icons on mobile phones.
johndoknjas Dec 6, 2024
090f57a
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 6, 2024
2fd9264
less than or equal
johndoknjas Dec 6, 2024
6ac8100
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 7, 2024
b7fb5a2
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 8, 2024
89a30cb
Calculate the adjust amounts for icons based on the proportion of the…
johndoknjas Dec 8, 2024
6bb6be3
Only compute the icon translate amounts once.
johndoknjas Dec 8, 2024
6943d15
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 8, 2024
d0dd899
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 9, 2024
791e3c5
Merge branch 'master' into chart-icons-mobile-phones
johndoknjas Dec 10, 2024
d2a6749
Merge branch 'master' into chart-icons-mobile-phones
ornicar Dec 10, 2024
775abfb
use ui/common memoize
ornicar Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions ui/lobby/src/view/realTime/chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 + '%';

Expand All @@ -30,9 +31,15 @@ const clockX = (dur: number) => {
return Math.round((durLog(Math.min(clockMax, dur || clockMax)) / durLog(clockMax)) * 100);
};

const iconTranslateAmts: () => [number, number] = memoize<[number, number]>(() => {
const chart = document.querySelector('.hooks__chart') as HTMLElement;
const fontSize = parseFloat(window.getComputedStyle(chart).fontSize);
return [(fontSize / chart.clientWidth) * 95, (fontSize / chart.clientHeight) * 75];
});

function renderPlot(ctrl: LobbyController, hook: Hook) {
const bottom = Math.max(0, ratingY(hook.rating) - 2),
left = Math.max(0, clockX(hook.t) - 2),
const bottom = Math.max(0, ratingY(hook.rating) - iconTranslateAmts()[1]),
left = Math.max(0, clockX(hook.t) - iconTranslateAmts()[0]),
klass = [
hook.id,
'plot.new',
Expand Down
Loading