From 66e7218f9c2e0d875a5b06dc31f66a4329cbc032 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Sun, 14 Dec 2025 23:02:07 -0500 Subject: more progress on the Shifter --- src/components/Shifter.tsx | 150 +++++++++++++++++++++++++++++++++++++++++ src/components/Slideshow.astro | 10 +++ src/components/shifter.tsx | 79 ---------------------- src/components/slideshow.astro | 0 src/pages/index.astro | 39 ++++++----- src/styles/shifter.css | 18 +++-- 6 files changed, 196 insertions(+), 100 deletions(-) create mode 100644 src/components/Shifter.tsx create mode 100644 src/components/Slideshow.astro delete mode 100644 src/components/shifter.tsx delete mode 100644 src/components/slideshow.astro (limited to 'src') diff --git a/src/components/Shifter.tsx b/src/components/Shifter.tsx new file mode 100644 index 0000000..601787a --- /dev/null +++ b/src/components/Shifter.tsx @@ -0,0 +1,150 @@ +import React, { useState, useRef } from 'react'; +import '../styles/shifter.css'; + +export default function Shifter() { + const [sidebar, setSidebar] = useState(0); + const [position, setPosition] = useState({ + x: window.innerWidth / 2 - 350, + y: window.innerHeight / 2 - 250 + }); + const [isDragging, setIsDragging] = useState(false); + const dragRef = useRef({ startX: 0, startY: 0 }); + + function changeSidebar(window: number) { + setSidebar(window); + } + + function applyButton() { + + } + + function closeButton() { + + } + + function testOption() { + console.log('Colour changed to red') + var r = document.querySelector(':root'); + r.style.setProperty('--titlebar-colour', 'red'); + } + + const handleMouseDown = (e: React.MouseEvent) => { + e.preventDefault(); + setIsDragging(true); + dragRef.current = { + startX: e.clientX - position.x, + startY: e.clientY - position.y + }; + }; + + React.useEffect(() => { + if (isDragging) { + const handleMouseMoveWrapper = (e: MouseEvent) => { + setPosition({ + x: e.clientX - dragRef.current.startX, + y: e.clientY - dragRef.current.startY + }); + }; + + const handleMouseUpWrapper = () => { + setIsDragging(false); + }; + + window.addEventListener('mousemove', handleMouseMoveWrapper); + window.addEventListener('mouseup', handleMouseUpWrapper); + + return () => { + window.removeEventListener('mousemove', handleMouseMoveWrapper); + window.removeEventListener('mouseup', handleMouseUpWrapper); + }; + } + }, [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 ( + <> +
+ Window Preview +
+
+
+ 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.

+ Reset All Settings +

Warning! A Global Reset Is Irreversible!

+ + ) + } + } + + + return ( + <> +
+
+
Shifter
+
+
closeButton()}>
+
+
+
+
+
+ changeSidebar(1)}>Windows + changeSidebar(2)}>Reset +
+ applyButton()}>Apply Changes +
+
+ {sidebarContent()} +
+
+
+ + ) +} diff --git a/src/components/Slideshow.astro b/src/components/Slideshow.astro new file mode 100644 index 0000000..8910bd8 --- /dev/null +++ b/src/components/Slideshow.astro @@ -0,0 +1,10 @@ +
+
+

Screenshots

+
+
+
+
+
+
+
diff --git a/src/components/shifter.tsx b/src/components/shifter.tsx deleted file mode 100644 index 5c62be9..0000000 --- a/src/components/shifter.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { useState } from 'react'; -import '../styles/shifter.css'; -export default function Shifter() { - const [sidebar, setSidebar] = useState(0); - - function changeSidebar(window: number) { - setSidebar(window); - } - - function applyButton() { - - } - - 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 ( - <> -

Windows Settings

- - ) - case 2: - return ( - <> -

Do you want to reset your settings?

- - ) - } - } - - - return ( -
-
-
-
Shifter
-
-
-
-
-
-
- - applyButton()}>Apply Changes -
-
- {sidebarContent()} -
-
-
-
- ) -} diff --git a/src/components/slideshow.astro b/src/components/slideshow.astro deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/index.astro b/src/pages/index.astro index 1b23b31..7889cbf 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,14 +2,31 @@ import { Image } from 'astro:assets'; import logo from "../assets/logo.png"; import Layout from '../layouts/Layout.astro'; -// import Shifter from '../components/shifter.astro'; -import Shifter from '../components/shifter.tsx'; -import Slideshow from '../components/slideshow.astro'; +import Shifter from '../components/Shifter.tsx'; +import Slideshow from '../components/Slideshow.astro'; ---
+
@@ -31,21 +48,9 @@ import Slideshow from '../components/slideshow.astro';
-
-
-

Screenshots

-
-
-
-
-
-
- -
-
-
- +
+