Converted slideshow to react, more shifter progress

13 files changed, 198 insertions, 54 deletions

diff --git a/public/assets/fonts/cambria/Cambria-01.woff2 b/public/assets/fonts/cambria/Cambria-01.woff2
new file mode 100644
index 0000000..7622da5
--- /dev/null
+++ b/public/assets/fonts/cambria/Cambria-01.woff2
diff --git a/public/assets/fonts/cambria/cambriab.woff2 b/public/assets/fonts/cambria/cambriab.woff2
new file mode 100644
index 0000000..1e8e486
--- /dev/null
+++ b/public/assets/fonts/cambria/cambriab.woff2
diff --git a/public/assets/fonts/cambria/cambriai.woff2 b/public/assets/fonts/cambria/cambriai.woff2
new file mode 100644
index 0000000..f665dc7
--- /dev/null
+++ b/public/assets/fonts/cambria/cambriai.woff2
diff --git a/public/assets/fonts/cambria/cambriaz.woff2 b/public/assets/fonts/cambria/cambriaz.woff2
new file mode 100644
index 0000000..1796c05
--- /dev/null
+++ b/public/assets/fonts/cambria/cambriaz.woff2
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 @@
+<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>
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 (
                     <>
                         <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.
+                        <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 style={{ fontSize: 14 }}>The basic process of modifying your ShiftOS interface is very simple. You first choose a
+                            <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 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
+                            <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>
@@ -89,14 +109,19 @@ export default function Shifter() {
                 return (
                     <>
                         <div>
-                            Window Preview
+                      <div className="window" style={{ paddingBottom: 130 }}>
+                            <div className="titlebar">
+                                <div className="titlebar-text">Template</div>
+                                <div className="titlebar-buttons"></div>
+                            </div>
+                          </div>
                         </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>
+                                <a className="shifter-button" onClick={() => console.log("Title Bar")}>Title Bar</a>
+                                <a className="shifter-button" onClick={() => console.log("Title Text")}>Title Text</a>
+                                <a className="shifter-button" onClick={() => console.log("Buttons")}>Buttons</a>
+                                <a className="shifter-button" onClick={() => console.log("Borders")}>Borders</a>
                             </div>
                             <div>
                               <a onClick={() => testOption()}>Test</a>
@@ -111,7 +136,7 @@ export default function Shifter() {
                         <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>
+                        <a onClick={() => resetSettings()}>Reset All Settings</a>
                         <p><b>Warning! A Global Reset Is Irreversible!</b></p>
                     </>
                 )
@@ -123,8 +148,7 @@ export default function Shifter() {
         <>
             <div className="window draggable" style={{
                 left: `${position.x}px`,
-                top: `${position.y}px`,
-                cursor: isDragging ? 'grabbing' : 'default'
+                top: `${position.y}px`
             }}>
                 <div className="titlebar" onMouseDown={handleMouseDown}>
                     <div className="titlebar-text">Shifter</div>
@@ -135,10 +159,12 @@ export default function Shifter() {
                 <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>
+                            <a href="#windows" className="sidebar-button" onClick={() => changeSidebar(1)}>Windows</a>
+                            <div className="sep"/>
+                            <a href="#reset" className="sidebar-button" onClick={() => changeSidebar(2)}>Reset</a>
+                            <div className="sep"/>
                         </div>
-                        <a onClick={() => applyButton()}>Apply Changes</a>
+                        <a href="#apply" className="shifter-button" onClick={() => applyButton()}>Apply Changes</a>
                     </div>
                     <div className="shifter-body">
                         {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 @@
-<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/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 (
+    <div className="window">
+        <div className="titlebar">
+            <p className="titlebar-text">Screenshots</p>
+            <div className="titlebar-buttons">
+                <div className="titlebar-box"></div>
+                <div className="titlebar-box"></div>
+                <div className="titlebar-box"></div>
+            </div>
+        </div>
+      <img src={image} alt={alt}/>
+    </div>
+
+  )
+}
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 && (
+                <Shifter />
+            )}
+        </>
+    )
+}
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';
 	<script defer data-domain="shiftos.dev" src="https://stats.alee14.me/js/script.file-downloads.outbound-links.js"></script>
 </body>
 </html>
+<script>
+const titlebarColour = localStorage.getItem("--titlebar-colour");
+
+document.documentElement.style.setProperty(
+  '--titlebar-colour',
+  titlebarColour
+);
+
+</script>
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';
 ---
 
 <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>
+        <NoJSWarning />
         <div class="window-container">
             <div class="window">
                 <div class="titlebar">
@@ -47,9 +31,9 @@ import Slideshow from '../components/Slideshow.astro';
                 </div>
             </div>
         </div>
-        <div class="window-container">
-            <Slideshow />
-        </div>
+        <!-- <div class="window-container">
+            <Slideshow client:load />
+        </div> -->
         <Shifter client:only />
     </div>
     <footer>
diff --git a/src/styles/shifter.css b/src/styles/shifter.css
index f86bfba..f245ab2 100644
--- a/src/styles/shifter.css
+++ b/src/styles/shifter.css
@@ -1,3 +1,33 @@
+@media (prefers-color-scheme: dark) {
+    .window a {
+        color: var(--dark-button-text);
+    }
+
+    .sidebar-button:hover {
+        background-color: var(--dark-button-hover);
+    }
+
+    .sidebar-button:active {
+        box-shadow: inset 0 0 0 1px var(--dark-button-text);
+        color: var(--dark-button-text);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .window a {
+        color: var(--light-button-text);
+    }
+
+    .sidebar-button:hover {
+        background-color: var(--light-button-hover);
+    }
+
+    .sidebar-button:active {
+        box-shadow: inset 0 0 0 1px var(--light-button-text);
+        color: var(--light-button-text);
+    }
+}
+
 .draggable {
     position: absolute;
     top: 10px;
@@ -11,28 +41,30 @@
 }
 
 .sidebar {
+    font-family: Cambria, serif;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
 .sidebar-content {
+    padding-bottom: 200px;
     display: flex;
     flex-direction: column;
-    padding: 0 20px;
     border: 1px solid;
 }
 
 .shifter-body {
-    margin: 1em;
+    margin-left: 10px;
+    margin-right: 10px;
     width: 600px;
     height: 300px;
 }
 
-.shifter-button {
+.sidebar-button {
     font-weight: bold;
     font-style: italic;
-    border: 1px solid;
+    padding: 3px 10px;
 }
 
 .shifter-window-sidebar {
@@ -44,3 +76,31 @@
     display: flex;
     flex-direction: column;
 }
+
+.shifter-welcome h1 {
+    font-size: 1.6em;
+    margin: 0;
+}
+
+.shifter-welcome p {
+    font-size: 0.9em;
+}
+
+.shifter-codepoints h2 {
+    font-size: 1.2em;
+    margin: 0;
+}
+
+.shifter-codepoints p {
+    font-size: 0.9em;
+}
+
+.shifter-button {
+    padding: 6px 12px;
+    border: 1px solid;
+}
+
+.sep {
+    border-top: 1px solid;
+    background-color: white;
+}
diff --git a/src/styles/window.css b/src/styles/window.css
index 8718330..52de268 100644
--- a/src/styles/window.css
+++ b/src/styles/window.css
@@ -13,6 +13,33 @@
     font-weight: 400;
 }
 
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/Cambria-01.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriab.woff2') format('woff2');
+    font-style: normal;
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriai.woff2') format('woff2');
+    font-style: italic;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriaz.woff2') format('woff2');
+    font-style: italic;
+    font-weight: bold;
+}
 
 :root {
     --titlebar-colour: #808080;