init shifter + slideshow

11 files changed, 187 insertions, 40 deletions

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
--- a/bun.lockb
+++ b/bun.lockb
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 (
+            <>
+              <div className="shifter-welcome">
+                  <h1>Welcome to the Shifter!</h1>
+                  <p>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.</p>
+                  <p>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.</p>
+              </div>
+              <div className="shifter-codepoints">
+                  <h2>You can earn codepoints using the Shifter!</h2>
+                  <p>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!</p>
+              </div>
+            </>
+        )
+      case 1:
+        return (
+          <>
+            <h1>Windows Settings</h1>
+          </>
+        )
+      case 2:
+        return (
+          <>
+            <h1>Do you want to reset your settings?</h1>
+          </>
+        )
+    }
+  }
+
+
+    return (
+        <div>
+            <div className="window">
+                <div className="titlebar">
+                    <div className="titlebar-text">Shifter</div>
+                    <div className="titlebar-buttons">
+                        <div className="titlebar-box titlebar-box-link"></div>
+                    </div>
+                </div>
+                <div className="content">
+                    <div className="sidebar">
+                        <div className="sidebar-content">
+                            <a className="shifter-button" onClick={() => changeSidebar(1)}>Windows</a>
+                            <a className="shifter-button" onClick={() => changeSidebar(2)}>Reset</a>
+                        </div>
+                        <a onClick={() => applyButton()}>Apply Changes</a>
+                    </div>
+                    <div className="shifter-body">
+                      {sidebarContent()}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/slideshow.astro b/src/components/slideshow.astro
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/slideshow.astro
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;
 ---
 
 <Layout title={frontmatter.title} description={frontmatter.description}>
-    <div class="window">
-        <div class="titlebar">
-            <p class="titlebar-text">{frontmatter.title}</p>
-            <div class="titlebar-buttons">
-                <a href="/"><div class="titlebar-box titlebar-box-link"></div></a>
+    <div class="window-container">
+        <div class="window">
+            <div class="titlebar">
+                <p class="titlebar-text">{frontmatter.title}</p>
+                <div class="titlebar-buttons">
+                    <a href="/"><div class="titlebar-box titlebar-box-link"></div></a>
+                </div>
+            </div>
+            <div class="container">
+                <slot />
             </div>
-        </div>
-        <div class="container">
-            <slot />
         </div>
     </div>
 </Layout>
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';
 ---
 
 <Layout title="ShiftOS: The Archive" description="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.">
     <div class="center">
         <Image src={logo} alt="ShiftOS Logo" class="logo" width={logo.width} height={logo.height} />
-        <div class="window">
-            <div class="titlebar">
-                <p class="titlebar-text">ShiftOS: The Archive</p>
-                <div class="titlebar-buttons">
-                    <div class="titlebar-box"></div>
-                    <div class="titlebar-box"></div>
-                    <div class="titlebar-box"></div>
+        <div class="window-container">
+            <div class="window">
+                <div class="titlebar">
+                    <p class="titlebar-text">ShiftOS: The Archive</p>
+                    <div class="titlebar-buttons">
+                        <div class="titlebar-box"></div>
+                        <div class="titlebar-box"></div>
+                        <div class="titlebar-box"></div>
+                    </div>
                 </div>
-            </div>
-            <div class="container">
-                <p>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.</p>
-                <div class="nav">
-                    <a class="button" href="history">History</a>
-                    <a class="button" href="downloads">Downloads</a>
-                    <a class="button" href="https://www.youtube.com/c/ShiftOS">Videos</a>
+                <div class="container">
+                    <p>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.</p>
+                    <div class="nav">
+                        <a class="button" href="history">History</a>
+                        <a class="button" href="downloads">Downloads</a>
+                        <a class="button" href="https://www.youtube.com/c/ShiftOS">Videos</a>
+                    </div>
                 </div>
             </div>
         </div>
-        <!-- <div class="window" style="display:flex; flex-direction:column; height:80vh;">
-            <div class="titlebar">
-                <p class="titlebar-text">Screenshots</p>
-                <div class="titlebar-buttons">
-                    <div class="titlebar-box"></div>
-                    <div class="titlebar-box"></div>
-                    <div class="titlebar-box"></div>
+        <div class="window-container">
+            <div class="window" style="display:flex; flex-direction:column; height:80vh;">
+                <div class="titlebar">
+                    <p class="titlebar-text">Screenshots</p>
+                    <div class="titlebar-buttons">
+                        <div class="titlebar-box"></div>
+                        <div class="titlebar-box"></div>
+                        <div class="titlebar-box"></div>
+                    </div>
                 </div>
+                <Slideshow />
             </div>
-            <Slideshow />
-        </div> -->
+        </div>
+        <div class="window-container">
+            <Shifter client:load />
+        </div>
     </div>
     <footer>
         <p><b>&copy; Copyright 2013-2025 ShiftOS Archive. Game originally made by Philip Adams.<br/>Website made by <a href="https://alee14.me">Andrew Lee</a>. <a href="https://github.com/Alee14/shiftos-website">Website source code.</a></b></p>
diff --git a/src/styles/shifter.css b/src/styles/shifter.css
new file mode 100644
index 0000000..a37b6bf
--- /dev/null
+++ b/src/styles/shifter.css
@@ -0,0 +1,36 @@
+.draggable {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    width: fit-content;
+}
+
+
+.content {
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.sidebar-content {
+    display: flex;
+    flex-direction: column;
+    padding: 0 20px;
+    border: 1px solid;
+}
+
+.shifter-body {
+    margin: 1em;
+}
+
+.shifter-button {
+    font-weight: bold;
+    font-style: italic;
+    border: 1px solid;
+}
diff --git a/src/styles/style.css b/src/styles/style.css
index 80f49c5..5946f95 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -61,7 +61,6 @@ p {
 }
 
 footer {
-    position: fixed;
     left: 0;
     bottom: 0;
     text-align: center;
diff --git a/src/styles/window.css b/src/styles/window.css
index 77c917a..8718330 100644
--- a/src/styles/window.css
+++ b/src/styles/window.css
@@ -107,9 +107,12 @@
     background-color: var(--titlebar-control-link);
 }
 
+.window-container {
+    margin: 1em 2%;
+}
+
 .window {
     font-family: var(--window-font);
-    margin: 1em 2%;
     box-shadow:
         inset -2px -2px var(--titlebar-colour),
         inset 2px 2px var(--titlebar-colour);
@@ -134,7 +137,7 @@
         flex-direction: row;
     }
 
-    .window {
+    .window-container {
         margin: 1em 20%;
     }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 8bf91d3..69c1600 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
-}
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
\ No newline at end of file