more progress on the Shifter

6 files changed, 196 insertions, 100 deletions

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 (
+                    <>
+                        <div className="shifter-welcome">
+                        <h1 style={{ fontSize: 30, margin: 0 }}>Welcome to the Shifter!</h1>
+                            <p style={{ fontSize: 14 }}>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 style={{ fontSize: 14 }}>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 style={{ fontSize: 20, margin: 0 }}>You can earn codepoints using the Shifter!</h2>
+                            <p style={{ fontSize: 15 }}>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 (
+                    <>
+                        <div>
+                            Window Preview
+                        </div>
+                        <div className="shifter-window-sidebar">
+                            <div className="shifter-window-buttons">
+                                <a onClick={() => console.log("Title Bar")}>Title Bar</a>
+                                <a onClick={() => console.log("Title Text")}>Title Text</a>
+                                <a onClick={() => console.log("Buttons")}>Buttons</a>
+                                <a onClick={() => console.log("Borders")}>Borders</a>
+                            </div>
+                            <div>
+                              <a onClick={() => testOption()}>Test</a>
+                              Content
+                            </div>
+                        </div>
+                    </>
+                )
+            case 2:
+                return (
+                    <>
+                        <h1>Global Settings Reset!</h1>
+                        <p>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.</p>
+                        <a>Reset All Settings</a>
+                        <p><b>Warning! A Global Reset Is Irreversible!</b></p>
+                    </>
+                )
+        }
+    }
+
+
+    return (
+        <>
+            <div className="window draggable" style={{
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                cursor: isDragging ? 'grabbing' : 'default'
+            }}>
+                <div className="titlebar" onMouseDown={handleMouseDown}>
+                    <div className="titlebar-text">Shifter</div>
+                    <div className="titlebar-buttons">
+                        <div className="titlebar-box titlebar-box-link" onClick={() => closeButton()}></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>
+        </>
+    )
+}
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 @@
+<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>
+</div>
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 (
-            <>
-              <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
deleted file mode 100644
index e69de29..0000000
--- a/src/components/slideshow.astro
+++ /dev/null
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';
 ---
 
 <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} />
+        <noscript>
+            <div class="window-container">
+                <div class="window">
+                    <div class="titlebar">
+                        <p class="titlebar-text">Warning</p>
+                        <div class="titlebar-buttons">
+                            <div class="titlebar-box"></div>
+                            <div class="titlebar-box"></div>
+                            <div class="titlebar-box"></div>
+                        </div>
+                    </div>
+                    <div class="container">
+                        <h1>You have disabled JavaScript.</h1>
+                        <p>Certain features may not work.</p>
+                    </div>
+                </div>
+            </div>
+        </noscript>
         <div class="window-container">
             <div class="window">
                 <div class="titlebar">
@@ -31,21 +48,9 @@ import Slideshow from '../components/slideshow.astro';
             </div>
         </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>
-        </div>
-        <div class="window-container">
-            <Shifter client:load />
+            <Slideshow />
         </div>
+        <Shifter client:only />
     </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
index a37b6bf..f86bfba 100644
--- a/src/styles/shifter.css
+++ b/src/styles/shifter.css
@@ -1,11 +1,9 @@
 .draggable {
     position: absolute;
-    top: 50px;
-    left: 50px;
-    width: fit-content;
+    top: 10px;
+    left: 10px;
 }
 
-
 .content {
     padding: 10px;
     display: flex;
@@ -27,6 +25,8 @@
 
 .shifter-body {
     margin: 1em;
+    width: 600px;
+    height: 300px;
 }
 
 .shifter-button {
@@ -34,3 +34,13 @@
     font-style: italic;
     border: 1px solid;
 }
+
+.shifter-window-sidebar {
+    display: flex;
+    flex-direction: row;
+}
+
+.shifter-window-buttons {
+    display: flex;
+    flex-direction: column;
+}