From 00a841d83aeb4fa657d9dbfee58ac9b36eee3382 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Mon, 15 Dec 2025 23:54:24 -0500 Subject: Converted slideshow to react, more shifter progress --- src/components/NoJSWarning.astro | 18 +++++++++++ src/components/Shifter.tsx | 62 +++++++++++++++++++++++++----------- src/components/Slideshow.astro | 10 ------ src/components/Slideshow.tsx | 16 ++++++++++ src/components/ToggleShifter.tsx | 14 +++++++++ src/layouts/Layout.astro | 9 ++++++ src/pages/index.astro | 28 ++++------------- src/styles/shifter.css | 68 +++++++++++++++++++++++++++++++++++++--- src/styles/window.css | 27 ++++++++++++++++ 9 files changed, 198 insertions(+), 54 deletions(-) create mode 100644 src/components/NoJSWarning.astro delete mode 100644 src/components/Slideshow.astro create mode 100644 src/components/Slideshow.tsx create mode 100644 src/components/ToggleShifter.tsx (limited to 'src') diff --git a/src/components/NoJSWarning.astro b/src/components/NoJSWarning.astro new file mode 100644 index 0000000..112646d --- /dev/null +++ b/src/components/NoJSWarning.astro @@ -0,0 +1,18 @@ + diff --git a/src/components/Shifter.tsx b/src/components/Shifter.tsx index 601787a..36b2262 100644 --- a/src/components/Shifter.tsx +++ b/src/components/Shifter.tsx @@ -1,6 +1,13 @@ import React, { useState, useRef } from 'react'; 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({ @@ -18,14 +25,27 @@ export default function Shifter() { } + function resetSettings() { + cssVariables.map((x) => { + localStorage.removeItem(x); + document.documentElement.style.removeProperty(x); + }); + } + function closeButton() { } function testOption() { console.log('Colour changed to red') - var r = document.querySelector(':root'); - r.style.setProperty('--titlebar-colour', 'red'); + + document.documentElement.style.setProperty( + '--titlebar-colour', + 'red' + ); + + localStorage.setItem("--titlebar-colour", "red"); + } const handleMouseDown = (e: React.MouseEvent) => { @@ -66,19 +86,19 @@ export default function Shifter() { return ( <>
-

Welcome to the Shifter!

-

The shifter is an application that allows you to modify various features in ShiftOS. +

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 +

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 +

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!

@@ -89,14 +109,19 @@ export default function Shifter() { return ( <>
- Window Preview +
+
+
Template
+
+
+
- console.log("Title Bar")}>Title Bar - console.log("Title Text")}>Title Text - console.log("Buttons")}>Buttons - console.log("Borders")}>Borders + console.log("Title Bar")}>Title Bar + console.log("Title Text")}>Title Text + console.log("Buttons")}>Buttons + console.log("Borders")}>Borders
testOption()}>Test @@ -111,7 +136,7 @@ export default function Shifter() {

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.

- Reset All Settings + resetSettings()}>Reset All Settings

Warning! A Global Reset Is Irreversible!

) @@ -123,8 +148,7 @@ export default function Shifter() { <>
Shifter
@@ -135,10 +159,12 @@ export default function Shifter() {
- changeSidebar(1)}>Windows - changeSidebar(2)}>Reset + changeSidebar(1)}>Windows +
{sidebarContent()} diff --git a/src/components/Slideshow.astro b/src/components/Slideshow.astro deleted file mode 100644 index 8910bd8..0000000 --- a/src/components/Slideshow.astro +++ /dev/null @@ -1,10 +0,0 @@ -
-
-

Screenshots

-
-
-
-
-
-
-
diff --git a/src/components/Slideshow.tsx b/src/components/Slideshow.tsx new file mode 100644 index 0000000..8cb0d77 --- /dev/null +++ b/src/components/Slideshow.tsx @@ -0,0 +1,16 @@ +export default function Slideshow(image: string, alt: string) { + return ( +
+
+

Screenshots

+
+
+
+
+
+
+ {alt}/ +
+ + ) +} diff --git a/src/components/ToggleShifter.tsx b/src/components/ToggleShifter.tsx new file mode 100644 index 0000000..4737a6f --- /dev/null +++ b/src/components/ToggleShifter.tsx @@ -0,0 +1,14 @@ +import Shifter from './Shifter.tsx'; +import { useState } from "react"; + +export default function ToggleShifter() { + const [isShowingShifter, setShowingShifter] = useState(false); + + return ( + <> + {isShowingShifter && ( + + )} + + ) +} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index eeca534..1ad0619 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -37,3 +37,12 @@ import '../styles/window.css'; + diff --git a/src/pages/index.astro b/src/pages/index.astro index 7889cbf..b352cd0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,31 +2,15 @@ import { Image } from 'astro:assets'; import logo from "../assets/logo.png"; import Layout from '../layouts/Layout.astro'; +import NoJSWarning from '../components/NoJSWarning.astro'; import Shifter from '../components/Shifter.tsx'; -import Slideshow from '../components/Slideshow.astro'; +import Slideshow from '../components/Slideshow.tsx'; ---
- +
@@ -47,9 +31,9 @@ import Slideshow from '../components/Slideshow.astro';
-
- -
+