[GUI] Re-Add rainbow mode

This commit is contained in:
Ben C 2023-07-29 17:52:43 -04:00
parent 65513bc646
commit a2db32b35a
No known key found for this signature in database
GPG Key ID: 556064B755159BBC
10 changed files with 74 additions and 18 deletions

View File

@ -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)
}

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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>

View File

@ -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

View File

@ -69,6 +69,7 @@ const MainApp = () => {
<BaseApp
language={guiConfig?.language}
theme={guiConfig?.theme}
usesRainbow={guiConfig?.rainbow}
isLoading={status === "Loading" && guiConfig === null}
>
<OwmlModal />

View File

@ -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}

View 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;
}

View File

@ -132,7 +132,7 @@ export interface GuiConfig {
autoEnableDeps: boolean;
noLogServer: boolean;
hideInstalledInRemote: boolean;
rainbow?: boolean;
rainbow: boolean;
}
export interface LogPayload {