From 199d7ed22c70584bf3ec9c48c912f87ccd8f7d5a Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Fri, 2 Aug 2024 13:24:00 +0200 Subject: [PATCH] fix: ClusterSettings + Launcher Disable Animations flicker --- .../src/ui/components/AnimatedRoutes.tsx | 19 +++++++++++++++---- .../src/ui/pages/cluster/ClusterRoot.tsx | 4 ++-- .../src/ui/pages/cluster/ClusterSettings.tsx | 14 +++++++------- .../src/ui/pages/settings/SettingsRoot.tsx | 1 - .../settings/launcher/SettingsAppearance.tsx | 16 +++++++++++++++- apps/frontend/src/utils/helpers.ts | 12 +++++++++++- 6 files changed, 50 insertions(+), 16 deletions(-) diff --git a/apps/frontend/src/ui/components/AnimatedRoutes.tsx b/apps/frontend/src/ui/components/AnimatedRoutes.tsx index 0b7142a1..e23d3ae9 100644 --- a/apps/frontend/src/ui/components/AnimatedRoutes.tsx +++ b/apps/frontend/src/ui/components/AnimatedRoutes.tsx @@ -1,7 +1,10 @@ -import { type ParentProps, mergeProps, splitProps } from 'solid-js'; +import { type ParentProps, Show, mergeProps, splitProps } from 'solid-js'; import { Transition, type TransitionProps } from 'solid-transition-group'; +import useSettingsContext from '~ui/hooks/useSettings'; function AnimatedRoutes(props: TransitionProps & ParentProps) { + const settings = useSettingsContext(); + const defaultProps: TransitionProps = { mode: 'outin', enterClass: 'page-animation-enter', @@ -16,9 +19,17 @@ function AnimatedRoutes(props: TransitionProps & ParentProps) { const merged = mergeProps(defaultProps, rest); return ( - - {split.children} - + {split.children} + )} + children={( + + {split.children} + + )} + /> ); } diff --git a/apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx b/apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx index a01824cc..55d51858 100644 --- a/apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx +++ b/apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx @@ -11,6 +11,7 @@ import ClusterScreenshots from './ClusterScreenshots'; import ClusterSettings from './ClusterSettings'; import ClusterGame from './ClusterGame'; import useClusterContext, { ClusterProvider } from '~ui/hooks/useCluster'; +import { supportsMods } from '~utils/helpers'; function ClusterRoutes() { return ( @@ -65,8 +66,7 @@ function ClusterSidebar() { links={{ Cluster: [ [, 'Overview', '/'], - // TODO: Better way of checking mods - (cluster()?.meta.loader !== 'vanilla' ? [, 'Mods', '/mods'] : undefined), + (supportsMods(cluster()) ? [, 'Mods', '/mods'] : undefined), [, 'Screenshots', '/screenshots'], [, 'Worlds', '/worlds'], [, 'Logs', '/logs'], diff --git a/apps/frontend/src/ui/pages/cluster/ClusterSettings.tsx b/apps/frontend/src/ui/pages/cluster/ClusterSettings.tsx index e987a21b..d2cea237 100644 --- a/apps/frontend/src/ui/pages/cluster/ClusterSettings.tsx +++ b/apps/frontend/src/ui/pages/cluster/ClusterSettings.tsx @@ -5,7 +5,7 @@ import useSettingsContext from '~ui/hooks/useSettings'; import SettingsMinecraft from '~ui/pages/settings/game/SettingsMinecraft'; function ClusterSettings() { - const cluster = useClusterContext(); + const [cluster] = useClusterContext(); const settings = useSettingsContext(); // TODO: Save cluster settings @@ -16,14 +16,14 @@ function ClusterSettings() { cluster.force_fullscreen = value, - isGlobal: cluster.force_fullscreen === null, + get: cluster()?.force_fullscreen ?? settings.force_fullscreen ?? false, + set: value => cluster() && (cluster()!.force_fullscreen = value), + isGlobal: cluster()?.force_fullscreen === null, }} resolution={{ - get: cluster.resolution ?? settings.resolution, - set: value => cluster.resolution = value, - isGlobal: cluster.resolution === undefined || cluster.resolution === null, + get: cluster()?.resolution ?? settings.resolution, + set: value => cluster() && (cluster()!.resolution = value), + isGlobal: cluster()?.resolution === undefined || cluster()?.resolution === null, }} /> diff --git a/apps/frontend/src/ui/pages/settings/SettingsRoot.tsx b/apps/frontend/src/ui/pages/settings/SettingsRoot.tsx index f6f1f5ba..179a43b1 100644 --- a/apps/frontend/src/ui/pages/settings/SettingsRoot.tsx +++ b/apps/frontend/src/ui/pages/settings/SettingsRoot.tsx @@ -40,7 +40,6 @@ function SettingsRoot(props: ParentProps) {
, 'General', '/'], diff --git a/apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx b/apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx index 5eabe453..cbd28ddf 100644 --- a/apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx +++ b/apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx @@ -1,4 +1,6 @@ import { ColorsIcon, PaintPourIcon, Speedometer04Icon } from '@untitled-theme/icons-solid'; +import { useBeforeLeave } from '@solidjs/router'; +import { createSignal } from 'solid-js'; import SettingsRow from '../../../components/SettingsRow'; import ScrollableContainer from '~ui/components/ScrollableContainer'; import Button from '~ui/components/base/Button'; @@ -8,6 +10,15 @@ import useSettingsContext from '~ui/hooks/useSettings'; function SettingsAppearance() { const settings = useSettingsContext(); + const [shouldReload, setShouldReload] = createSignal(false); + + useBeforeLeave((e) => { + if (shouldReload()) { + e.preventDefault(); + setShouldReload(false); + location.reload(); + } + }); return ( @@ -32,7 +43,10 @@ function SettingsAppearance() { > settings.disable_animations = value} + onChecked={(value) => { + settings.disable_animations = value; + setShouldReload(true); + }} /> diff --git a/apps/frontend/src/utils/helpers.ts b/apps/frontend/src/utils/helpers.ts index 7e49ab2b..9ab201e6 100644 --- a/apps/frontend/src/utils/helpers.ts +++ b/apps/frontend/src/utils/helpers.ts @@ -1,4 +1,4 @@ -import type { VersionType } from '~bindings'; +import type { Cluster, Loader, VersionType } from '~bindings'; export function formatVersionRelease(release: VersionType): string { const mapping: { [key in VersionType]: string } = { @@ -11,6 +11,16 @@ export function formatVersionRelease(release: VersionType): string { return mapping[release]; } +export function supportsMods(loader: Cluster | Loader | undefined): boolean { + if (loader === undefined) + return false; + + if (typeof loader !== 'string') + loader = loader.meta.loader; + + return loader !== 'vanilla'; +} + /** * A simple analog of Node.js's `path.join(...)`. * https://gist.github.com/creationix/7435851#gistcomment-3698888