mirror of
https://github.com/ow-mods/ow-mod-man.git
synced 2025-12-11 20:15:50 +01:00
[GUI] Re-Add rainbow mode
This commit is contained in:
parent
65513bc646
commit
a2db32b35a
@ -55,16 +55,15 @@ pub struct GuiConfig {
|
||||
pub no_log_server: bool,
|
||||
#[serde(default = "_default_false")]
|
||||
pub hide_installed_in_remote: bool,
|
||||
// Old
|
||||
#[serde(skip_serializing_if = "Option::is_none")]
|
||||
rainbow: Option<bool>,
|
||||
#[serde(default = "_default_false")]
|
||||
rainbow: bool,
|
||||
}
|
||||
|
||||
impl Default for GuiConfig {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
theme: Theme::default(),
|
||||
rainbow: None,
|
||||
rainbow: false,
|
||||
language: Language::default(),
|
||||
watch_fs: true,
|
||||
no_warning: false,
|
||||
@ -82,19 +81,8 @@ impl GuiConfig {
|
||||
Ok(path)
|
||||
}
|
||||
|
||||
fn migrate(&mut self) -> bool {
|
||||
if self.rainbow.is_some() {
|
||||
self.rainbow = None;
|
||||
return true;
|
||||
}
|
||||
false
|
||||
}
|
||||
|
||||
fn read() -> Result<Self, anyhow::Error> {
|
||||
let mut conf = deserialize_from_json::<GuiConfig>(&Self::path()?)?;
|
||||
if conf.migrate() {
|
||||
conf.save()?;
|
||||
}
|
||||
let conf = deserialize_from_json::<GuiConfig>(&Self::path()?)?;
|
||||
Ok(conf)
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<script type="module" src="/src/shared.ts"></script>
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
<style id="rainbow-style"></style>
|
||||
<title>Outer Wilds Mod Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<script type="module" src="/src/logs.tsx"></script>
|
||||
<script type="module" src="/src/shared.ts"></script>
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
<style id="rainbow-style"></style>
|
||||
<title>Log Window</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -101,6 +101,7 @@
|
||||
"PRERELEASE_WARNING": "Prereleases are experimental versions of mods that may not work correctly. Are you sure you want to install?",
|
||||
"Pink": "Pink",
|
||||
"Purple": "Purple",
|
||||
"RAINBOW": "Rainbow Mode (Epilepsy Warning)",
|
||||
"REFRESH": "Refresh",
|
||||
"RESET": "Reset",
|
||||
"RUN_GAME": "Run Game",
|
||||
@ -127,6 +128,7 @@
|
||||
"TOOLTIP_LOG_MULTI_WINDOW": "Makes launching multiple instances of the game open multiple windows instead of all logging to one",
|
||||
"TOOLTIP_OWML_DEBUG_MODE": "Makes OWML log more stuff",
|
||||
"TOOLTIP_OWML_PATH": "Must be an absolute path. All mods are installed in a 'Mods' folder inside this.",
|
||||
"TOOLTIP_RAINBOW": "Adds a rainbow effect to the manager (possible epilepsy warning)",
|
||||
"TOOLTIP_WATCH_FS": "Watches OWML's Mods folder and settings for changes and refreshes if detected",
|
||||
"UNINSTALL": "Uninstall",
|
||||
"UNIQUE_NAME": "Unique Name",
|
||||
|
||||
@ -2,18 +2,31 @@ import { ThemeProvider } from "@emotion/react";
|
||||
import { CssBaseline, Box, CircularProgress } from "@mui/material";
|
||||
import { TranslationContext } from "./TranslationContext";
|
||||
import { Language, Theme } from "@types";
|
||||
import { ReactNode, memo } from "react";
|
||||
import { ReactNode, memo, useEffect } from "react";
|
||||
import StyledErrorBoundary from "./StyledErrorBoundary";
|
||||
import { getMuiTheme } from "../../theme";
|
||||
import rainbowCss from "../../rainbow.css?raw";
|
||||
|
||||
export interface BaseAppProps {
|
||||
isLoading: boolean;
|
||||
children: ReactNode;
|
||||
language?: Language;
|
||||
theme?: Theme;
|
||||
usesRainbow?: boolean;
|
||||
}
|
||||
|
||||
const BaseApp = memo(function BaseApp(props: BaseAppProps) {
|
||||
useEffect(() => {
|
||||
const rainbowElem = document.getElementById("rainbow-style");
|
||||
if (rainbowElem) {
|
||||
if (props.usesRainbow) {
|
||||
rainbowElem.innerHTML = rainbowCss;
|
||||
} else {
|
||||
rainbowElem.innerHTML = "";
|
||||
}
|
||||
}
|
||||
}, [props.usesRainbow]);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={getMuiTheme(props.theme ?? Theme.Green)}>
|
||||
<CssBaseline>
|
||||
|
||||
@ -82,6 +82,7 @@ const LogApp = ({ port }: { port: number }) => {
|
||||
<BaseApp
|
||||
language={guiConfig?.language}
|
||||
theme={guiConfig?.theme}
|
||||
usesRainbow={guiConfig?.rainbow}
|
||||
isLoading={status === "Loading" || logLines === null}
|
||||
>
|
||||
<Container
|
||||
|
||||
@ -69,6 +69,7 @@ const MainApp = () => {
|
||||
<BaseApp
|
||||
language={guiConfig?.language}
|
||||
theme={guiConfig?.theme}
|
||||
usesRainbow={guiConfig?.rainbow}
|
||||
isLoading={status === "Loading" && guiConfig === null}
|
||||
>
|
||||
<OwmlModal />
|
||||
|
||||
@ -134,6 +134,13 @@ const SettingsForm = forwardRef(function SettingsForm(props: SettingsFormProps,
|
||||
options={ThemeArr}
|
||||
id="theme"
|
||||
/>
|
||||
<SettingsCheck
|
||||
onChange={handleGui}
|
||||
value={guiConfig.rainbow}
|
||||
label={getTranslation("RAINBOW")}
|
||||
id="rainbow"
|
||||
tooltip={getTranslation("TOOLTIP_RAINBOW")}
|
||||
/>
|
||||
<SettingsCheck
|
||||
onChange={handleGui}
|
||||
value={guiConfig.watchFs}
|
||||
|
||||
42
owmods_gui/frontend/src/rainbow.css
Normal file
42
owmods_gui/frontend/src/rainbow.css
Normal file
@ -0,0 +1,42 @@
|
||||
@keyframes scroll {
|
||||
from {
|
||||
background-position: 0% 0;
|
||||
}
|
||||
to {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--white-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff,
|
||||
1px -1px #fff, -1px 1px #fff;
|
||||
}
|
||||
|
||||
.MuiChip-filledPrimary,
|
||||
.MuiButton-containedPrimary {
|
||||
--level: 45%;
|
||||
--saturation-offset: 20%;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%,
|
||||
hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%,
|
||||
hsl(64, calc(74% - var(--saturation-offset)), var(--level)) 20%,
|
||||
hsl(118, calc(68% - var(--saturation-offset)), var(--level)) 30%,
|
||||
hsl(179, calc(68% - var(--saturation-offset)), var(--level)) 40%,
|
||||
hsl(188, calc(76% - var(--saturation-offset)), var(--level)) 50%,
|
||||
hsl(212, calc(86% - var(--saturation-offset)), var(--level)) 60%,
|
||||
hsl(260, calc(89% - var(--saturation-offset)), var(--level)) 70%,
|
||||
hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%,
|
||||
hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%,
|
||||
hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100%
|
||||
) !important;
|
||||
color: black !important;
|
||||
text-shadow: var(--white-shadow);
|
||||
background-size: 200% 200% !important;
|
||||
animation: scroll 10s linear infinite forwards !important;
|
||||
}
|
||||
|
||||
.MuiButton-containedPrimary > .MuiButton-startIcon > svg {
|
||||
stroke: white !important;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
2
owmods_gui/frontend/src/types.d.ts
vendored
2
owmods_gui/frontend/src/types.d.ts
vendored
@ -132,7 +132,7 @@ export interface GuiConfig {
|
||||
autoEnableDeps: boolean;
|
||||
noLogServer: boolean;
|
||||
hideInstalledInRemote: boolean;
|
||||
rainbow?: boolean;
|
||||
rainbow: boolean;
|
||||
}
|
||||
|
||||
export interface LogPayload {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user