From 6c68cb168a6020e0589c99add348bb7a73f4eda6 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Thu, 5 Feb 2026 21:38:57 -0500 Subject: shifter stuff + updated downloads --- src/components/Shifter.tsx | 85 ++--------------------------- src/components/Shifter/Sidebar.tsx | 74 +++++++++++++++++++++++++ src/components/Shifter/Window/Borders.tsx | 0 src/components/Shifter/Window/Buttons.tsx | 0 src/components/Shifter/Window/TitleBar.tsx | 6 ++ src/components/Shifter/Window/TitleText.tsx | 0 src/components/ToggleShifter.tsx | 32 +++++++---- 7 files changed, 106 insertions(+), 91 deletions(-) create mode 100644 src/components/Shifter/Sidebar.tsx create mode 100644 src/components/Shifter/Window/Borders.tsx create mode 100644 src/components/Shifter/Window/Buttons.tsx create mode 100644 src/components/Shifter/Window/TitleBar.tsx create mode 100644 src/components/Shifter/Window/TitleText.tsx (limited to 'src/components') diff --git a/src/components/Shifter.tsx b/src/components/Shifter.tsx index 36b2262..940e6f0 100644 --- a/src/components/Shifter.tsx +++ b/src/components/Shifter.tsx @@ -1,13 +1,7 @@ import React, { useState, useRef } from 'react'; +import { sidebarContent } from './Shifter/Sidebar'; import '../styles/shifter.css'; -let cssVariables = ['--titlebar-colour', - '--titlebar-text-colour', - '--titlebar-control-colour', - '--titlebar-control-link', - '--window-font', - '--titlebar-font'] - export default function Shifter() { const [sidebar, setSidebar] = useState(0); const [position, setPosition] = useState({ @@ -25,13 +19,6 @@ export default function Shifter() { } - function resetSettings() { - cssVariables.map((x) => { - localStorage.removeItem(x); - document.documentElement.style.removeProperty(x); - }); - } - function closeButton() { } @@ -80,70 +67,6 @@ export default function Shifter() { } }, [isDragging]); - function sidebarContent(): React.ReactNode { - switch (sidebar) { - case 0: - return ( - <> -
-

Welcome to the Shifter!

-

The shifter is an application that allows you to modify various features in ShiftOS. - Initially the user interface of ShiftOS is very dull however you can use the Shifter and - various sub programs within the Shifter such as the "Colour Picker" to improve the - appearance of ShiftOS.

-

The basic process of modifying your ShiftOS interface is very simple. You first choose a - main category on the left which will bring up a list of sub categories. Next select a - sub category to display your list of customization options. Once you have modified the - appropriate settings click Apply Changes to confirm your choices.

-
-
-

You can earn codepoints using the Shifter!

-

That's right! Simply by customizing your ShiftOS interface you can earn as many - codepoints as you like. The amount of codepoints you earn will be calculated and - displayed the moment you press "Apply Changes". The more time you spend customizing the - more codepoints you will earn!

-
- - ) - case 1: - return ( - <> -
-
-
-
Template
-
-
-
-
-
-
- console.log("Title Bar")}>Title Bar - console.log("Title Text")}>Title Text - console.log("Buttons")}>Buttons - console.log("Borders")}>Borders -
-
- testOption()}>Test - Content -
-
- - ) - case 2: - return ( - <> -

Global Settings Reset!

-

After spending hours customizing ShiftOS you may want to reset all settings to their default values so you can have a clean slate. - Remember that once you reset your settings you can't undo your actions so only do so if you truly want to abandon all the customizations you have made to ShiftOS.

- resetSettings()}>Reset All Settings -

Warning! A Global Reset Is Irreversible!

- - ) - } - } - - return ( <>
-
+ applyButton()}>Apply Changes
- {sidebarContent()} + {sidebarContent(sidebar)}
diff --git a/src/components/Shifter/Sidebar.tsx b/src/components/Shifter/Sidebar.tsx new file mode 100644 index 0000000..adb211f --- /dev/null +++ b/src/components/Shifter/Sidebar.tsx @@ -0,0 +1,74 @@ +import { cssVariables } from '../../scripts/variables'; + +function resetSettings() { + cssVariables.map((x) => { + if (!x) return; + localStorage.removeItem(x); + document.documentElement.style.removeProperty(x); + }); +} + +export function sidebarContent(sidebar: number): React.ReactNode { + switch (sidebar) { + case 0: + return ( +
+
+

Welcome to the Shifter!

+

The shifter is an application that allows you to modify various features in ShiftOS. + Initially the user interface of ShiftOS is very dull however you can use the Shifter and + various sub programs within the Shifter such as the "Colour Picker" to improve the + appearance of ShiftOS.

+

The basic process of modifying your ShiftOS interface is very simple. You first choose a + main category on the left which will bring up a list of sub categories. Next select a + sub category to display your list of customization options. Once you have modified the + appropriate settings click Apply Changes to confirm your choices.

+
+
+

You can earn codepoints using the Shifter!

+

That's right! Simply by customizing your ShiftOS interface you can earn as many + codepoints as you like. The amount of codepoints you earn will be calculated and + displayed the moment you press "Apply Changes". The more time you spend customizing the + more codepoints you will earn!

+
+
+ ) + case 1: + return ( +
+
+
+
+
Template
+
+
+
+
+
+ +
+

Window Settings

+

Welcome to the windows settings panel. Here you can modify the appearance of the controls that are displayed on your open windows. + Just select a sub option to the left to get started!

+

The preview window above will track your modifications live until you click "Apply Changes".

+
+
+
+ ) + case 2: + return ( +
+

Global Settings Reset!

+

After spending hours customizing ShiftOS you may want to reset all settings to their default values so you can have a clean slate. + Remember that once you reset your settings you can't undo your actions so only do so if you truly want to abandon all the customizations you have made to ShiftOS.

+ resetSettings()}>Reset All Settings +

Warning! A Global Reset Is Irreversible!

+
+ ) + } +} diff --git a/src/components/Shifter/Window/Borders.tsx b/src/components/Shifter/Window/Borders.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Shifter/Window/Buttons.tsx b/src/components/Shifter/Window/Buttons.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Shifter/Window/TitleBar.tsx b/src/components/Shifter/Window/TitleBar.tsx new file mode 100644 index 0000000..6b3fa70 --- /dev/null +++ b/src/components/Shifter/Window/TitleBar.tsx @@ -0,0 +1,6 @@ +function setTitleBar(type: number, b: any) { + switch (type) { + case 0: + return localStorage.setItem("--titlebar-colour", b); + } +} diff --git a/src/components/Shifter/Window/TitleText.tsx b/src/components/Shifter/Window/TitleText.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ToggleShifter.tsx b/src/components/ToggleShifter.tsx index 4737a6f..725a8cc 100644 --- a/src/components/ToggleShifter.tsx +++ b/src/components/ToggleShifter.tsx @@ -1,14 +1,26 @@ import Shifter from './Shifter.tsx'; -import { useState } from "react"; +import { useEffect, useState } from "react"; export default function ToggleShifter() { - const [isShowingShifter, setShowingShifter] = useState(false); - - return ( - <> - {isShowingShifter && ( - - )} - - ) + const [isShowingShifter, setShowingShifter] = useState(false); + + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === "s") { + setShowingShifter(prev => !prev); + } + }; + + window.addEventListener("keydown", handleKeyDown); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, []); + + return ( + <> + {isShowingShifter && } + + ); } -- cgit v1.2.3