From 8b680990b0bb4fe3212a4f632519320191065f67 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Sun, 14 Dec 2025 15:57:36 -0500 Subject: init shifter + slideshow --- astro.config.mjs | 6 +++- bun.lockb | Bin 151633 -> 173269 bytes package.json | 8 ++++- src/components/shifter.tsx | 79 +++++++++++++++++++++++++++++++++++++++++ src/components/slideshow.astro | 0 src/layouts/Page.astro | 18 +++++----- src/pages/index.astro | 57 ++++++++++++++++------------- src/styles/shifter.css | 36 +++++++++++++++++++ src/styles/style.css | 1 - src/styles/window.css | 7 ++-- tsconfig.json | 15 ++++++-- 11 files changed, 187 insertions(+), 40 deletions(-) create mode 100644 src/components/shifter.tsx create mode 100644 src/components/slideshow.astro create mode 100644 src/styles/shifter.css diff --git a/astro.config.mjs b/astro.config.mjs index e762ba5..53e49de 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,5 +1,9 @@ // @ts-check import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; + // https://astro.build/config -export default defineConfig({}); +export default defineConfig({ + integrations: [react()] +}); \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index fefa024..cb1a46a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index cfb20c2..2761903 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,12 @@ "astro": "astro" }, "dependencies": { - "astro": "5.16.5" + "@astrojs/react": "^4.4.2", + "@types/react": "^19.2.7", + "@types/react-dom": "^19.2.3", + "astro": "5.16.5", + "react": "^19.2.3", + "react-dom": "^19.2.3", + "react-draggable": "^4.5.0" } } \ No newline at end of file diff --git a/src/components/shifter.tsx b/src/components/shifter.tsx new file mode 100644 index 0000000..5c62be9 --- /dev/null +++ b/src/components/shifter.tsx @@ -0,0 +1,79 @@ +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 new file mode 100644 index 0000000..e69de29 diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 780bc8d..1d6573f 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -4,15 +4,17 @@ const { frontmatter } = Astro.props; --- -
-
-

{frontmatter.title}

-
-
+
+
+
+

{frontmatter.title}

+
+
+
+
+
+
-
-
-
diff --git a/src/pages/index.astro b/src/pages/index.astro index 3f93d26..1b23b31 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,41 +2,50 @@ import { Image } from 'astro:assets'; import logo from "../assets/logo.png"; import Layout from '../layouts/Layout.astro'; -import Slideshow from '../components/Slideshow.astro'; +// import Shifter from '../components/shifter.astro'; +import Shifter from '../components/shifter.tsx'; +import Slideshow from '../components/slideshow.astro'; ---
-
-
-

ShiftOS: The Archive

-
-
-
-
+
+
+
+

ShiftOS: The Archive

+
+
+
+
+
-
-
-

ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.

-
- History - Downloads - Videos +
+

ShiftOS was a game developed by Philip Adams and other developers. The original goal was to go from a bare terminal to a graphical user interface with full desktop features.

+
+ History + Downloads + Videos +
- +
+
+ +