update

3 files changed, 21 insertions, 8 deletions

diff --git a/css/index.css b/css/index.css
index bba45aa..116dce1 100644
--- a/css/index.css
+++ b/css/index.css
@@ -68,7 +68,7 @@ button {
 #netpunk,
 #netpunk_descender {
     pointer-events: none;
-    width: 25em;
+    width: min(25em, 50vw);
     display: block;
     position: absolute;
     right: 0;
diff --git a/src/desktop/files/about.tsx b/src/desktop/files/about.tsx
index 8c4ffc8..af26a2b 100644
--- a/src/desktop/files/about.tsx
+++ b/src/desktop/files/about.tsx
@@ -1,11 +1,16 @@
 import { VirtualTextFile } from "$/apps/source";
+import { Link } from "../link";
 
 export default {
     name: "ABOUT.txt",
     type: "text",
     content: <>
+<blockquote>
+    <p>this is a little fan website that i was inspired to make after i first saw netpunk's cover and thought "how would the promo website for this look like if it existed?".</p>
+    <p>hopefully, my suffering with preact was all worth it in the end and you'll enjoy it. have fun!</p>
+</blockquote>
+<p class="credit"><Link type="link" link="https://darkuss.fyi" external>darkuss</Link></p>
 <h1>Netpunk</h1>
-
 <ol>
   <h2>
     Tracklist:
@@ -28,6 +33,6 @@ export default {
 
 <p>A clumsy robot forgets about their girlfriend's anniversary, scrambling to find something to do for the date, eventually concluding they should watch a movie. Of course the movie is in high demand, so the tickets have sold out. Ultimately they resort to piracy, and things spiral out of control...</p>
 </>,
-    height: "25em",
-    width: "50ch"
+    height: "70vh",
+    width: "40vw"
 } as VirtualTextFile;
diff --git a/src/desktop/window.tsx b/src/desktop/window.tsx
index ef5cdab..a493bcf 100644
--- a/src/desktop/window.tsx
+++ b/src/desktop/window.tsx
@@ -3,8 +3,6 @@ import { useLiveSignal } from "@preact/signals/utils";
 import { ComponentChildren, Ref, RefObject } from "preact";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import { Task } from ".";
-import { flushSync } from "preact/compat";
-
 
 type UseDragFunction = (onStartDrag: (e: MouseEvent) => void, onUpdatePosition: (e: MouseEvent) => void) => [Signal<Boolean>, (e: MouseEvent) => void]
 
@@ -25,7 +23,7 @@ export function Window(props: Window.Props) {
         }, [onUpdatePosition]);
 
         const startDrag = useCallback((e: MouseEvent) => {
-            if (e.button === 0 && !maximized.value.value) {
+            if (e.button === 0) {
                 if (dragTimeout.current !== null) {
                     clearTimeout(dragTimeout.current);
                     dragTimeout.current = null;
@@ -44,6 +42,7 @@ export function Window(props: Window.Props) {
     }, [props])
 
     const windowRef: Ref<HTMLDivElement> = useRef(null);
+    const titlebarRef: Ref<HTMLDivElement> = useRef(null);
 
     const source = useLiveSignal(props.task.source);
     const title = useLiveSignal(props.task.title);
@@ -73,6 +72,15 @@ export function Window(props: Window.Props) {
         // Naturally, I have to add the border width here, because offset* uses padding-edge for the calculations
         initialOffsetX.current = e.offsetX + BORDER_WIDTH + (e.target as HTMLDivElement).offsetLeft
         initialOffsetY.current = e.offsetY + BORDER_WIDTH + (e.target as HTMLDivElement).offsetTop
+        if (maximized.value.value) {
+            maximized.value.value = false
+            const w: number = width.value as number / 2
+            const h: number = titlebarRef.current!.getBoundingClientRect().height as number / 2
+            x.value = initialOffsetX.current - w
+            y.value = initialOffsetY.current - h
+            initialOffsetX.current = w
+            initialOffsetY.current = h
+        }
         document.getSelection()?.empty()
     }, [])
 
@@ -197,7 +205,7 @@ export function Window(props: Window.Props) {
         }
         onPointerDown={onFocus}
     >
-        <div class="titlebar" onPointerDown={startWindowMove}>
+        <div ref={titlebarRef} class="titlebar" onPointerDown={startWindowMove}>
             <img src={`/assets/${source.value.value.type}.png`} />
             <div class="title">{title.value.value ?? "[404 Title Not Found]"}</div>
             <div class="buttons" onPointerDown={onPointerDownButton}>