From 8f32fd58cafe677c07d9ed9fff84f6e255156d37 Mon Sep 17 00:00:00 2001 From: darkuss Date: Sat, 22 Aug 2026 01:58:37 +0200 Subject: holy shit i'm finally done --- src/apps/audio.tsx | 27 ++++ src/apps/browser.tsx | 23 +++ src/apps/edit_rich.tsx | 28 ++++ src/apps/image.tsx | 61 ++++++++ src/apps/index.ts | 34 +++++ src/apps/music.tsx | 32 +++++ src/apps/source.ts | 33 +++++ src/apps/video.tsx | 61 ++++++++ src/desktop/apps/buttons.tsx | 0 src/desktop/apps/edit.tsx | 13 -- src/desktop/apps/index.tsx | 5 - src/desktop/apps/music.tsx | 43 ------ src/desktop/file.tsx | 62 ++++++++ src/desktop/files/about.tsx | 33 +++++ src/desktop/files/base64.tsx | 31 ++++ src/desktop/files/content.tsx | 34 +++++ src/desktop/files/freeDownload.tsx | 30 ++++ src/desktop/files/iAmNotARobot.tsx | 28 ++++ src/desktop/files/index.ts | 34 +++++ src/desktop/files/internetExploder.tsx | 54 +++++++ src/desktop/files/keygen.tsx | 25 ++++ src/desktop/files/listen.ts | 9 ++ src/desktop/files/memory.tsx | 19 +++ src/desktop/files/netpunk.tsx | 127 +++++++++++++++++ src/desktop/files/netpunkShred.tsx | 24 ++++ src/desktop/files/readme.tsx | 67 +++++++++ src/desktop/files/regex.txt | 36 +++++ src/desktop/files/robotYuri.tsx | 47 ++++++ src/desktop/files/symlink.tsx | 19 +++ src/desktop/hr.tsx | 5 + src/desktop/index.tsx | 123 +++++++++++----- src/desktop/link.tsx | 62 ++++++++ src/desktop/start.tsx | 51 +++++++ src/desktop/window.tsx | 251 +++++++++++++++++++++++++++------ src/taskbar/index.tsx | 44 ++++-- src/taskbar/start.tsx | 4 +- src/util.ts | 16 +++ 37 files changed, 1438 insertions(+), 157 deletions(-) create mode 100644 src/apps/audio.tsx create mode 100644 src/apps/browser.tsx create mode 100644 src/apps/edit_rich.tsx create mode 100644 src/apps/image.tsx create mode 100644 src/apps/index.ts create mode 100644 src/apps/music.tsx create mode 100644 src/apps/source.ts create mode 100644 src/apps/video.tsx delete mode 100644 src/desktop/apps/buttons.tsx delete mode 100644 src/desktop/apps/edit.tsx delete mode 100644 src/desktop/apps/index.tsx delete mode 100644 src/desktop/apps/music.tsx create mode 100644 src/desktop/file.tsx create mode 100644 src/desktop/files/about.tsx create mode 100644 src/desktop/files/base64.tsx create mode 100644 src/desktop/files/content.tsx create mode 100644 src/desktop/files/freeDownload.tsx create mode 100644 src/desktop/files/iAmNotARobot.tsx create mode 100644 src/desktop/files/index.ts create mode 100644 src/desktop/files/internetExploder.tsx create mode 100644 src/desktop/files/keygen.tsx create mode 100644 src/desktop/files/listen.ts create mode 100644 src/desktop/files/memory.tsx create mode 100644 src/desktop/files/netpunk.tsx create mode 100644 src/desktop/files/netpunkShred.tsx create mode 100644 src/desktop/files/readme.tsx create mode 100644 src/desktop/files/regex.txt create mode 100644 src/desktop/files/robotYuri.tsx create mode 100644 src/desktop/files/symlink.tsx create mode 100644 src/desktop/hr.tsx create mode 100644 src/desktop/link.tsx create mode 100644 src/desktop/start.tsx create mode 100644 src/util.ts (limited to 'src') diff --git a/src/apps/audio.tsx b/src/apps/audio.tsx new file mode 100644 index 0000000..45d8716 --- /dev/null +++ b/src/apps/audio.tsx @@ -0,0 +1,27 @@ +import { Signal, useSignalEffect } from "@preact/signals" +import { Address } from "$/apps/source"; +import { memo, Ref, useEffect } from "preact/compat"; + +const filenameRegex = /.*\/(.*)$/; + +export const Audio = memo(function Audio({ source, title, contentReady }: Image.Props) { + useEffect(() => { + contentReady.value = true + }, []) + + useSignalEffect(() => { + const filename = decodeURIComponent(source.value.link.pathname.match(filenameRegex)?.[1] ?? source.value.link.toString()); + title.value = `${filename} - tunez player`; + }) + + + return +}) + +namespace Image { + export type Props = { + source: Signal
, + title: Signal, + contentReady: Signal, + } +} diff --git a/src/apps/browser.tsx b/src/apps/browser.tsx new file mode 100644 index 0000000..71b2f4e --- /dev/null +++ b/src/apps/browser.tsx @@ -0,0 +1,23 @@ +import { Signal, useSignalEffect } from "@preact/signals" +import { Address } from "$/apps/source"; +import { memo, useEffect } from "preact/compat"; + +export const Browser = memo(function Browser({ source, title, contentReady }: Browser.Props) { + useEffect(() => { + contentReady.value = true + }, []) + + useSignalEffect(() => { + title.value = `${source.value.link} - internet exploder`; + }) + + return +}) + +export const Music = memo(function Music({ title }: Music.Props) { + const [userApproves, setUserApproves] = useState(false); + + useEffect(() => { + title.value = "Stream on BandCamp" + }, []) + + if (userApproves) { + return - } else { - return
-
Click here to load player from https://bandcamp.com
- -
- } -} - diff --git a/src/desktop/file.tsx b/src/desktop/file.tsx new file mode 100644 index 0000000..a3aa01b --- /dev/null +++ b/src/desktop/file.tsx @@ -0,0 +1,62 @@ +import { APP_REGISTRY } from "$/apps"; +import { Ref } from "preact"; +import { useCallback, useRef, useState } from "preact/hooks"; +import { getTaskId, taskManager } from "."; +import { signal } from "@preact/signals"; +import { SourceTypes, VirtualFile } from "$/apps/source"; + +export function File({ file }: { file: VirtualFile }) { + const [focused, setFocused] = useState(false); + const buttonRef: Ref = useRef(null); + + const handleBlur = useCallback((e: PointerEvent) => { + if (!buttonRef.current!.contains(e.target! as Node)) { + setFocused(false); + document.removeEventListener("click", handleBlur) + } + }, []) + + const handleFocus = useCallback(() => { + setFocused(true); + + document.addEventListener("click", handleBlur) + }, []) + + const handleDoubleClick = useCallback(() => { + let app = APP_REGISTRY[file.type as SourceTypes]; + if (app === undefined) { + console.error(`couldn't find app for file of type "${file.type}"`) + return + } + + setFocused(false); + taskManager.add({ + app, + source: signal(file), + window: { + minimized: signal(false), + maximized: signal(false), + height: file.height, + width: file.width, + z: signal(taskManager.tasks.value.value.length) + }, + title: signal(undefined), + id: getTaskId(), + contentReady: signal(false), + sizingFinished: signal(false) + }) + }, []) + + return +} diff --git a/src/desktop/files/about.tsx b/src/desktop/files/about.tsx new file mode 100644 index 0000000..8c4ffc8 --- /dev/null +++ b/src/desktop/files/about.tsx @@ -0,0 +1,33 @@ +import { VirtualTextFile } from "$/apps/source"; + +export default { + name: "ABOUT.txt", + type: "text", + content: <> +

Netpunk

+ +
    +

    + Tracklist: +

    +
      +
    1. Internet Exploder
      2. +
    2. Netpunk (feat. Kasane Teto)
      3. +
    3. Free Download
      4. +
    4. I am not a Robot
      5. +
    5. Content
      6. +
    6. Keygen
      7. +
    7. Base64
      8. +
    8. Readme (feat. Kasane Teto)
      9. +
    9. Symlink
      10. +
    10. Memory
      11. +
    +
+ +

An album about borrowing software forever.

+ +

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...

+, + height: "25em", + width: "50ch" +} as VirtualTextFile; diff --git a/src/desktop/files/base64.tsx b/src/desktop/files/base64.tsx new file mode 100644 index 0000000..f6acaf7 --- /dev/null +++ b/src/desktop/files/base64.tsx @@ -0,0 +1,31 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Base64.txt", + type: "text", + content: ( + <> +

Base64

+

WW91IGZvdW5kIGEgc2VjcmV0IQ==

+
+

Base64 is a binary-to-text encoding that uses 64 characters to represent sequences of byte values. It’s used for many things such as web pages, e-mail attachments or QR codes, but is also used to obfuscate links that a bot or scraper shouldn’t see (to avoid getting your website blocked).

+

In this song I interpreted it as a singer using a foreign, encoded language we can’t understand, but still enjoy.

+

For the vocal I used a free plugin called Aquestone, which is like a precursor to Vocaloid. Similar principle though, you fill in some text and it’ll sing each syllable every note you play. The words I filled in are “netpunkalbum”, but the accent makes it unrecognizable.

+ +
+

I really love the sound of this synth and I plan on doing more with it, despite it being extremely old and buggy. Here’s a video from 17 years ago showcasing it in more detail!

+ +
+

Also need to mention Base64 is heavily inspired by “Can You Feel” by Torchkas. I first heard it in a Super Mario World romhack called VLDC, known as Abstract Map there.

+ +
+

Graphics

+

A lot of the background visuals are from the Butter Churn visualizer, it’s based on the Milkdrop 2 visualizer from Winamp. Open source as well!

+ + + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/content.tsx b/src/desktop/files/content.tsx new file mode 100644 index 0000000..693be41 --- /dev/null +++ b/src/desktop/files/content.tsx @@ -0,0 +1,34 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Content.txt", + type: "text", + content: ( + <> +

Content

+

Description

+

This track is what it feels like to doomscroll until your brain turns into slime. Considering I might be consuming too much content, it’s ironic I made more.

+
+

Sound design

+

I’ve always sampled other songs in my music, but really wanted to challenge myself with this one. This song is created entirely using snippets from other music, except the drums. In the end I think I sampled around 30 tracks to make this. Heavily inspired by zeroth’s sample away the world.

+
+

sample anything and everything in life pic.twitter.com/cf9bGzIPFs

+
+

zeroth (@notzeroth) April 14, 2025

+
+

Graphics

+

For the music video I simply recorded my screen while scrolling Bluesky and Pinterest, and occasionally layered the two together with random blend modes.

+

While uploading the video to YouTube I ran into an extremely infuriating issue, the video was considered a “Short” because it has a square aspect ratio and under 3 minutes long. So I had to export the video TWO pixels wider than usual to make it stop detecting as a short. The resolution ended up becoming 2162 x 2160 px. Cursed.

+ +

“AAA” is the test file that confirmed adding two pixels to the width of the video actually prevents it from turning into a short. Thanks YouTube, great feature not having the option to say whether a video should be put in front of people with zero attention span.

+ +

WRAHHGHGHHHGHGHGH HGHGHHHHH

+

Okay rant over, it took a little longer than I’d hoped re-rendering that but it’s all good now!!

+ + + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/freeDownload.tsx b/src/desktop/files/freeDownload.tsx new file mode 100644 index 0000000..491c2fc --- /dev/null +++ b/src/desktop/files/freeDownload.tsx @@ -0,0 +1,30 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Free Download.txt", + type: "text", + content: ( + <> +

Free Download

+

100% working no virus

+
+

+ This track is a reference to infamous YouTube tutorials from the 2010s about topics like how to get Minecraft for free. One of the most popular music tracks was{" "} + + 009 Sound System Dreamscape + + . +

+ +

I still love this track and listen to it occasionally.

+

A little while ago I found out about a genre called hypertrance. It’s a movement that expands on the origins of trance music, and I immediately fell in love with it. I wanted to try making the genre myself by combining Dreamscape with hypertrance. It was a lot of fun trying to make that overly grand, almost cheesy futuristic vibe the music portrayed.

+ +
+

I was around 9 years old when I got my first laptop, and I remember being a little idiot trying to download Nintendo games for free, stuff like “free eShop gift card generator” and getting my whole computer infected with every kind of malware ever. Still funny to think about 13 years later!

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/iAmNotARobot.tsx b/src/desktop/files/iAmNotARobot.tsx new file mode 100644 index 0000000..05d23f0 --- /dev/null +++ b/src/desktop/files/iAmNotARobot.tsx @@ -0,0 +1,28 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "I am not a Robot.txt", + type: "text", + content: ( + <> +

I am not a Robot

+

Powered by reCAPTURE

+

Many websites want to prevent bots from accessing their data, so they use countermeasures such as CAPTCHAs. These typically include a piece of warbled text that you gotta copy, or a checkbox saying “I am not a bot”.

+

This track recontextualizes the phrase when it comes to robots and their journey to get closer to human behavior. Are they aware of their true nature? Should they strive to become human? Does it even matter? I wonder how Sunnexo feels about this.

+
+

Sound design

+

For this particular track I wanted to use some older sample packs like the ones by Vengeance Sound, but also even older ones such as the Zero-G CDs. They’re so cheesy but so much fun at the same time. I believe artists like Hideki Naganuma used the Zero-G ones back in the day, a notable example being Jet Set Radio’s soundtrack. Nowadays these packs are available on the Internet Archive.

+ +

I also used a bunch of resampling techniques in the track, such as the glitchy piano. I made a few random chords and chopped them up using a slicer to rearrange the sequence into something stuttery. Resampling is a recurring theme in this album, I love doing it!

+

Another thing I’d like to mention is this synth called Junior by Fors, it’s a recreation of the Game Boy’s wavetable as a modern VST plugin. I used it to create some of the old school growls and basses and love the way it sounds!

+ +

It’s DRM free and cheap, unheard of nowadays when it comes to VSTs. And the demo video goes extremely hard…

+
+

The music video contains background footage taken from a game called I’m not a robot, created by Neal.fun! I highly recommend checking it out, it runs in the browser.

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/index.ts b/src/desktop/files/index.ts new file mode 100644 index 0000000..11dbd32 --- /dev/null +++ b/src/desktop/files/index.ts @@ -0,0 +1,34 @@ +import netpunk from "./netpunk.tsx"; +import listen from "./listen"; +import { VirtualFile } from "$/apps/source"; +import readmeLyrics from "./readmeLyrics"; +import netpunkLyrics from "./netpunkLyrics"; +import about from "./about"; +import freeDownload from "./freeDownload.tsx"; +import internetExploder from "./internetExploder.tsx"; +import readme from "./readme.tsx"; +import iAmNotARobot from "./iAmNotARobot.tsx"; +import content from "./content.tsx"; +import keygen from "./keygen.tsx"; +import base64 from "./base64.tsx"; +import symlink from "./symlink.tsx"; +import memory from "./memory.tsx"; +import robotYuri from "./robotYuri.tsx"; +import netpunkShred from "./netpunkShred.tsx"; + +export const FILE_REGISTRY: VirtualFile[] = [ + about, + listen, + internetExploder, + netpunk, + freeDownload, + iAmNotARobot, + content, + keygen, + base64, + readme, + symlink, + memory, + robotYuri, + netpunkShred +] diff --git a/src/desktop/files/internetExploder.tsx b/src/desktop/files/internetExploder.tsx new file mode 100644 index 0000000..8f488c3 --- /dev/null +++ b/src/desktop/files/internetExploder.tsx @@ -0,0 +1,54 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Internet Exploder.txt", + type: "text", + content: ( + <> +

Free Download

+

100% working no virus

+
+

Sound design

+

I remember watching a GDC talk by Mick Gordon about his workflow when making the music for DOOM (2016). Mick showed how he started the sound design chain with a sine wave, because it is “the most pure representation of what sound can be”. He then started experimenting by putting different guitar pedals in series and created feedback loops.

+ +

It sounds pretty awesome and unlike anything I had heard prior to playing the game, and I liked it so much I tried creating a similar bass sound in Phase Plant. Also starting with a sine and adding different effects on top of it just to see what would happen. The end result is very different but still cool in its own way.

+

This is what the patch sounds like with and without effects:

+ + + +

I started with a simple sine and wavetable, and added a big chain of distortion after it. It’s a pretty huge difference before and after. One thing I really like about this experiment is the Multipass instance called “ring air convolver”, which is just a convolution reverb that only affects the high end. The impulse response it’s using is just the tail of a random dubstep snare I found and it works surprisingly well to add top end to the bass. I also have a frequency shifter at the end of the chain that gets automated later on in the track.

+ +
+

Rhythm

+

I kept getting samey results in my own music, and wanted to make something a little more daring and different, so I ended up taking inspiration from the way Mick tackled music production as well. He discussed how changing your process is necessary if you want to change the outcome, and that’s exactly what I did!

+

This time, I paid a lot of attention to the rhythmic pattern. I started by making an irregular rhythm, where some notes are offset by a 16th note so they hit just after the spot you expect them to be in, as if they’re lagging behind and catching up. I don’t usually make rhythms this way, and thought it would be interesting to try making an entire song around it.

+ +

As of writing this I’m in art university studying music and technology, and I’ve learned a bit about sheet music. Now I actually know how to transcribe simple rhythms, so I did this one for fun!

+ +
+

Artwork

+

For this cover art I worked together with Rokushini and humanbydefinition!

+

Rokushini is an illustrator, character designer and 3D artist, and I’ve always wondered what their artstyle would look like in pixel art. So I reached out and we decided to make something inspired by Flipnote Studio. It’s characterized by messy pixelated brush strokes, limited colors and dithering effects. They had not done pixel art prior to this project so it was a little challenging to get started, but the end result is almost exactly as I had hoped!

+ +
+

Textmode

+

Humanbydefinition is the creator of textmode.js, a creative coding library designed to make textmode graphics using JavaScript. At first I reached out to them because I had some issues with my code for an entirely unrelated project. Eventually we figured it out and I started experimenting more with the textmode.js library. Humanbydefinition actually went and made some tools for me that interpret video footage as textmode tiles, which I’ve used extensively throughout the music video. Huge thanks to them for the effort, this video wouldn’t have looked as cool without the tools.

+
+

my contribution was mostly about tooling rather than direct creative decisions. i onboarded sunnexo to textmode.js and put together a few basic sketches to convert video frames into textmode representations. to make the visuals work with the video’s palette and overall vibe, i added a small shader that remaps the source image colors to a limited palette by picking the closest match per pixel.

+

after that it was mostly just testing, tweaking, and making sure nothing got in the way. working with sunnexo was genuinely pleasant, especially because everything felt open and uncomplicated. (っ◔｡◔)♪♬

+
+

Written by @humanbydefinition

+

I used a bunch of random footage for the background, such as fluid simulations, Garry’s Mod gameplay and recordings I made using my camera.

+ +
+

Typography

+

Inspired by the art from desktopGeneration and textmode I made my logotype using a font called TES-GIGR (created by hlotvonen). I used a program called lvllvl to assemble the typography. I started by copying another logo I saw called “angel” so I could understand the way the original creator used the tiles. From there I started iterating on my own logo. It was a painstakingly long task to find each tile to place in the right spots, but I think the end result is worth it.

+ + + + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/keygen.tsx b/src/desktop/files/keygen.tsx new file mode 100644 index 0000000..b922075 --- /dev/null +++ b/src/desktop/files/keygen.tsx @@ -0,0 +1,25 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Keygen.txt", + type: "text", + content: + <> +

Keygen

+

Fine release by Sunnexo 2026

+
+

A key generator, commonly shortened as keygen, is a tool that generates a license key or serial number to unlock software. They can be made by legitimate distributors, but many of them are also made by software cracking groups. These programs often play tracker music which include genres like dubstep, drum and bass, trance and more.

+

I really enjoy keygen music and wanted to make some myself too! For the album I wanted at least one track made on my Game Boy (using Little Sound DJ).

+
+

BOOTLOOP version

+

During the production of this track I also participated in the GMTK Game Jam (2025), which is an annual event where game developers around the world try to make a video game within 4 days. The theme we settled on was a small robot fighting computer viruses in its own circuits.

+

I was the sound designer and composer for my team. We were on a tight time limit and I wanted to get a song out as quickly as possible, so I looked through my work in progress folder and decided the Keygen track fits the theme the best. I remixed the melody, added a new bassline and some modern drums, which worked out pretty well!

+

We also ended up getting into the video on the GMTK channel! Skip to 18:05 to see the game.

+ +

Check out BOOTLOOP.

+ , + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/listen.ts b/src/desktop/files/listen.ts new file mode 100644 index 0000000..59fdd8b --- /dev/null +++ b/src/desktop/files/listen.ts @@ -0,0 +1,9 @@ +import { VirtualFile } from "$/apps/source"; + +export default { + name: "Stream on Bandcamp", + type: "link", + link: new URL("https://bandcamp.com/EmbeddedPlayer/album=3374731395/size=large/bgcol=000000/linkcol=ff0047/transparent=true/"), + height: "70vh", + width: "25vw" +} as VirtualFile diff --git a/src/desktop/files/memory.tsx b/src/desktop/files/memory.tsx new file mode 100644 index 0000000..cdcbfa3 --- /dev/null +++ b/src/desktop/files/memory.tsx @@ -0,0 +1,19 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Memory.txt", + type: "text", + content: ( + <> +

Memory

+

Reconstructing human music after the singularity

+

I have been learning guitar for a year now and finally felt comfortable enough with my skill level to make a full song using it! Heavily inspired by the music from kessoku band and Sunfaded.

+

Memory is expensive nowadays, so cherish it while you can.

+ + + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/netpunk.tsx b/src/desktop/files/netpunk.tsx new file mode 100644 index 0000000..7645495 --- /dev/null +++ b/src/desktop/files/netpunk.tsx @@ -0,0 +1,127 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Netpunk.txt", + type: "text", + content: ( + <> +

Netpunk (feat. Kasane Teto)

+

I think I started working on this about 2-3 years ago? It’s been so long I don’t remember! The oldest file on my PC with “netpunk” in the name is from 2024, so it must’ve been something like that. It was around the time I got my first electric guitar, a Yamaha Pacifica 112J in light blue. I’ve been practicing guitar ever since and it’s really hard, but a lot of fun as well. My fingers sure have grown extra layers of skin from all that playing.

+ +

+ This is also the first time I’ve ever used a vocal synth! I love Teto so much… I’m kinda terrible at writing lyrics so I’m really happy I got help from retraceyoursteps! She perfectly understood the type of girlfailure energy I wanted to write about. Read the lyrics below! +

+

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…

+
+

Graphics

+

This was originally going to get a bigger music video, but the scope was a little bigger than I could handle on my own. Stellazium and I came up with a big storyboard, but unfortunately she got occupied with other work. I actually learned Blender and made a ton of assets using it, but they didn’t end up getting used this time. Maybe they’ll be useful for future projects though!

+

Eventually I decided to reduce the scope of the video and make it more manageable for one person. I think it still ended up pretty nice, despite cutting out a bunch of our ideas.

+ + + + + +
+

Character design

+

We figured out the song’s narrative, and I had to come up with a character design that reflected the clumsy idiotic nature of the protagonist. I brainstormed a bit with Avolicis and our initial iteration looked like this:

+ +

I tried modeling this in Blender. Blender however, is way more difficult than it seems. Getting the mesh right was quite a challenge already, but then getting the rig working was even worse! To animate a 3D model it needs to have a skeleton (also called a rig). That skeleton will then deform the mesh when you move the bones around. This was far more work than I first thought, as I kept running into issues like the mesh not deforming correctly.

+ +

The original design had a skirt but I had to ditch it because it wouldn’t bend the way I expected. My friend Niko has a lot of experience with Blender so he was able to help me a lot with the technical stuff. Thanks to him I gained a ton of knowledge about the type of things that are easy or hard to do in Blender, and adjusted the 2nd iteration of the character accordingly.

+

Ghosttra.in helped me a lot with the model revision, giving me feedback on the proportions, hairstyle and outfit design. This time we went for a crop top and bodysuit, along with shorter hair that’s easier to animate.

+

+ I also used{" "} + a base mesh by KeyframeChef{" "} + to make sure I would get the mesh deformation right. Using that as a starting point I sculpted the model more towards my reference. I recommend watching{" "} + their video about low poly character creation! +

+

The character looks way better than before, and it’s easier to animate as well. I’m very happy with the way this model turned out!

+ + + +
+

Textmode

+

+ Similar to{" "} + Internet Exploder’s music video + , I got help from humanbydefinition for the textmode graphics. They made{" "} + a tool{" "} + that lets me interpret videos as a grid of text symbols, also known as textmode art. I used this tool for the backgrounds in the music video, by feeding it footage from my camcorder, glitchy scenes I made in Blender and more. +

+ +
+

Netpunk papercraft

+

To celebrate the release of my debut album I’ve made something silly… This may seem random, but I’ve always wanted to design a papercraft figure from scratch. And now that I’ve learned Blender I was finally able to do it!

+

+ Big announcement: You can build one yourself too,{" "} + get the template here!! +

+ + +
+

+ Lyrics written by Sunnexo and retraceyoursteps, performed by{" "} + + Kasane Teto SV + +

+

I just woke up

+

My head in the clouds

+

I've got one shot

+

To figure it out

+

But there's one problem

+

The tickets sold out

+

What the hell am I gonna do? (Oh god)

+
+

I'm running on an empty charge

+

You know my heart is still at large

+

I can't believe I'm such a mess

+

My head is yearning for more rest

+

An anniversary forgot

+

Because I stayed in bed to rot

+

My mind is about to blow up

+

My time is running out

+
+

(♫)

+
+

Now I'm searching the internet

+

Gotta see if they have it yet

+

It's a new film, no resales found

+

Need to figure something out

+


+

So I'm trying to pirate it

+

But this website looks kinda shit

+

Now out of options, I've got no choice

+

But to take this chance

+


+

My antivirus uninstalled

+

I sense my data all dissolved

+

I can't believe I screwed this up

+

Can barely even make a sound

+

My head is feeling all abuzz

+

Because my code is all for naught

+

My mind is about to blow up

+

My time is rŗ̶̢̧͉̤̼̮͚͍̳̯̪͔̥̐̈́̄͒̌͗͆́̉́́͝ư̵̧͉͐̔̾̀͋̀̓̔̓͂͒̕͠n̷͚̬͉̦͒̐̈̈̌͌͂̉̑̃͛̒͝͠͝n̷̡̠͈̲̪͙̤͈͔̭͔̞͖̻͖̑̍́̍̒̉́̑̊̊̓͌̈̚ͅǐ̷͓n̵̢̙̉͐̆͑̈́͆͗̏̅͗̇̒̐ǵ̸͎̻̤̬͗̅̃̈̀̃̾̓ ̵̻̟̖̦̠̥̮̄͂̈́͛̉̎̌̽̒̕͘ő̵̞̯̱̼̼̭̲̘̳͑͛̆̅u̷̢͍̮̤̖̼̼̽̀́͒̆̂̃̒́̏̂̓͝͝͠͝t̶̨͇̮͓̦̯̞͍̬̮̯̞̼͖̊͌̈́̇̂̒̈́͋̚

+
+

(̵̻̱̣́♫̷̦̈́̍͝)̸̺̓͑

+
+

Alright I've got an idea

+

Think I know what I gotta do (oh yeah)

+
+

I'm thinking of a better plan

+

I know the time I have at hand

+

I may have hit my head real hard

+

That might've made me really smart

+

So tickets for the local fair

+

A dinner date with time to spare

+

Some scented candles and the rest

+

Today will be the best

+
+

(♫)

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/netpunkShred.tsx b/src/desktop/files/netpunkShred.tsx new file mode 100644 index 0000000..d943180 --- /dev/null +++ b/src/desktop/files/netpunkShred.tsx @@ -0,0 +1,24 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Netpunk (shred version).txt", + type: "text", + content: ( + <> +

Netpunk (shred version feat. death do us apart)

+
+

For art university I worked together with an artist called death do us apart! We did a guitar centric live performance using Netpunk. It was a ton of fun and we thought the guitar solo alone warranted a spot on the album.

+
+

When I was asked to play guitar on Netpunk I wasn't quite sure how to approach it. I started by just playing the lead melody interspersed with the power chords already present in the song. When the second chorus came I thought about writing a solo for it and practiced some improvisation, but was never able to make a pre written one. This performance was also my first time playing live so my improvisation ended up being an adrenaline fuelled solo, which turned out unexpectedly good.

+

Not being able to reproduce it for the recording, I had to transcribe the solo by hand in order to figure out what I was actually doing. In the end I just played the solo exactly how it was live, but slower and sped it back up for the final track.

+
+

Written by death do us apart

+

There’s a clip of the performance below, she’s cracked

+ + + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/readme.tsx b/src/desktop/files/readme.tsx new file mode 100644 index 0000000..2ef67bd --- /dev/null +++ b/src/desktop/files/readme.tsx @@ -0,0 +1,67 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Readme.txt", + type: "text", + content: ( + <> +

Readme

+

Save me, don't replace me

+
+

+ A{" "} + + README + {" "} + is a text document that contains information about the content of the directory it’s located in. It typically contains instructions on how to use or install a program. If you ever need to know what a program does, the readme file shall explain. +

+ {/* prettier-ignore */} + 
                                      ░██{"\n"}
+{"                                      "}░██{"\n"}
+░██░████  ░███████   ░██████    ░████████ ░█████████████   ░███████{"\n"}
+░███     ░██    ░██       ░██  ░██    ░██ ░██   ░██   ░██ ░██    ░██{"\n"}
+░██      ░█████████  ░███████  ░██    ░██ ░██   ░██   ░██ ░█████████{"\n"}
+░██      ░██        ░██   ░██  ░██   ░███ ░██   ░██   ░██ ░██{"\n"}
+░██       ░███████   ░█████░██  ░█████░██ ░██   ░██   ░██  ░███████{"\n"}
+
+
+

+ Lyrics written by Sunnexo and retraceyoursteps, performed by{" "} + + Kasane Teto SV + +

+

Readme

+

Save me

+

Don't replace me

+

Open secret

+

Can you keep it

+

And yet I

+

Can just

+

Always

+

Show you

+

My file system

+

Read and

+

List them

+
+

(♫)

+
+

Readme

+

Save me

+

Don't replace me

+

Open secret

+

Can you keep it

+

And yet I

+

Can just

+

Always

+

Show you

+

My file system

+

Read and

+

List them

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/regex.txt b/src/desktop/files/regex.txt new file mode 100644 index 0000000..c058f57 --- /dev/null +++ b/src/desktop/files/regex.txt @@ -0,0 +1,36 @@ + (target|style|class|data-svelte-h|controls|title|frameborder|allow|referrerpolicy|allowfullscreen)=".*?" + + ? + +(?<=img[^<]*?)> +/> + +hr> +hr/> + +(?<=(href|src)="/) +https://sunnexo.moe/ + +
+
+ +\n?\s+()\n?\s+ +$1 + +\n?\s*?(.*?)\n?\s*? +$2 + + + + +$0

+ +^$ +
\ No newline at end of file diff --git a/src/desktop/files/robotYuri.tsx b/src/desktop/files/robotYuri.tsx new file mode 100644 index 0000000..9e32d25 --- /dev/null +++ b/src/desktop/files/robotYuri.tsx @@ -0,0 +1,47 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Robot Yuri.txt", + type: "text", + content: ( + <> + +

Robot Yuri (feat. Kasane Teto)

+
+

During the Europe heat wave of summer 2026 many of us suffered terrible temperatures of 37°C (= 98°F) without access to AC. I wasn’t able to use my PC for the usual work so I was stuck on my laptop with barely anything installed.

+

On the verge of heat stroke I ended up writing a silly cheerful song about a robot singing karaoke, yearning for love. I initially didn’t think about writing lyrics at all, but m1nt_ listened to the instrumental and thought it would be awesome if it did have vocals.

+

Huge thanks to m1nt_ for helping me with the lyrics for this, it was a fun project!

+
+

When writing the lyrics for Robot Yuri, I really wanted to play into the heatwave thing. Getting hugged in the sweltering summer heat is sure to make a gay girl melt, especially if she’s a robot! I wanted to convey that she can’t think straight, not only because of the heat, but because she’s completely infatuated and maybe just a little obsessed with the girl she fell in love with.

+

The lyrics for the first and second halves of the song were written several weeks apart from each other. Initially, I actually wanted the second half to be bittersweet (even though I actually don’t like doomed yuri - I prefer silly, fluffy, happy yuri!!), but ultimately decided against it, because I felt that it didn’t fit the spirit of the song, and because I couldn’t have added that line about rings! Though, when I mentioned that to Sunnexo, they came up with the idea of the song being sung by the robot at karaoke, still yearning for love inside, which is an angle that I hadn’t considered before, but really like.

+

I’d like to thank Sunnexo for giving me the opportunity to write the lyrics for this. I’m really proud of this one and I think I did the sick instrumental justice!

+
+

Written by m1nt_

+
+

Lyrics written by Sunnexo and m1nt_, performed by Kasane Teto SV

+

Temperature so high I think I'll overheat

+

I feel my circuits failing as you're holding me

+

Sights of you are filling up my memory

+

My scanners can't detect a being happier than me

+
+

I didn't know my silicon could feel

+

My only wish is that you feel the same towards me

+

By your side is where I always want to be

+

And so I really hope that you'll keep counting on me

+
+

Temperature so high I think I'll overheat

+

I feel my circuits failing as you're holding me

+

Sights of you completely filled my memory

+

The only rings I need are those you're gonna share with me

+
+

I didn't know how silly I could be

+

And when my disk is full of junk you clear it for me

+

By your side is where I always want to be

+

No integer can hold the value you have to me

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/files/symlink.tsx b/src/desktop/files/symlink.tsx new file mode 100644 index 0000000..d697c28 --- /dev/null +++ b/src/desktop/files/symlink.tsx @@ -0,0 +1,19 @@ +import { VirtualTextFile } from "$/apps/source"; +import { Hr } from "../hr"; +import { Link } from "../link"; + +export default { + name: "Symlink.txt", + type: "text", + content: ( + <> +

Symlink

+

⸜(｡˃ ᵕ ˂ )⸝♡ ( ˶ˆᗜˆ˵ )ֶָ֢

+
+

A symbolic link, often shortened as symlink, is a special computer file that refers to another file or directory by storing a path to it. Kind of romantic…

+

I made this after watching Serial Experiments Lain, so it does have some Bôa - Duvet influences.

+ + ), + height: "70vh", + width: "70vw", +} as VirtualTextFile; diff --git a/src/desktop/hr.tsx b/src/desktop/hr.tsx new file mode 100644 index 0000000..7faa590 --- /dev/null +++ b/src/desktop/hr.tsx @@ -0,0 +1,5 @@ +import { memo } from "preact/compat"; + +export const Hr = memo(function Hr() { + return
------------------
+}) diff --git a/src/desktop/index.tsx b/src/desktop/index.tsx index 021d3a0..b47422d 100644 --- a/src/desktop/index.tsx +++ b/src/desktop/index.tsx @@ -1,43 +1,100 @@ +import "$/apps" // registers all of the apps; import { useRef } from "preact/hooks" -import { Edit } from "./apps/edit" import { Window } from "./window" -import { Music } from "./apps/music"; +import { FILE_REGISTRY } from "./files"; +import { Source } from "$/apps/source"; +import { App } from "$/apps"; +import { createModel, Signal, signal } from "@preact/signals"; +import { MutableValue } from "$/util"; +import { File } from "./file"; +import { StartMenu } from "./start"; + +export type Task = { + app: App, + source: Signal, + window: { + minimized: Signal, + maximized: Signal + width?: string | number; + height?: string | number; + position?: { + x?: string | number; + y?: string | number; + }, + z: Signal; + } + title: Signal, + id: number; + contentReady: Signal, + sizingFinished: Signal +} + +const TaskManagerModel = createModel(() => { + const tasks: Signal> = signal(new MutableValue([])) + + return { + tasks, + close(currentTask: Task) { + tasks.value = tasks.value.deriveNew(self => { + const idx = self.findIndex(task => { + return currentTask === task + }) + self.splice(idx, 1); + return self + }) + }, + focusWindow(currentTask: Task) { + const t = tasks.value.value; + const currentTaskZ = currentTask.window.z.value; + + for (const task of t) { + if (task === currentTask) { + task.window.z.value = t.length - 1 + } else if (task.window.z.value > currentTaskZ) { + task.window.z.value = task.window.z.value - 1 + } + } + }, + add(task: Task) { + tasks.value = tasks.value.deriveNew(self => { + self.push(task) + return self + }) + } + } +}) +export const taskManager = new TaskManagerModel(); + +let taskCounter = 0; +export function getTaskId(): number { + return taskCounter++; +} export function Desktop() { const ref = useRef(null); + return
-
-
-
-
-
-
+
+ { FILE_REGISTRY.map(file => )}
- - - Fine release by Sunnexo 2026 - - Tracklist: - 1. Internet Exploder - 2. Netpunk (feat. Kasane Teto) - 3. Free Download - 4. I am not a Robot - 5. Content - 6. Keygen - 7. Base64 - 8. Readme (feat. Kasane Teto) - 9. Symlink - 10. Memory - - An album about borrowing software forever. - - 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... - - - - - - + { taskManager.tasks.value.value.map(task => { + const App = task.app; + return + + + })} +
} diff --git a/src/desktop/link.tsx b/src/desktop/link.tsx new file mode 100644 index 0000000..6b31b9e --- /dev/null +++ b/src/desktop/link.tsx @@ -0,0 +1,62 @@ +import { useCallback } from "preact/hooks" +import { getTaskId, taskManager } from "."; +import { signal } from "@preact/signals"; +import { Address } from "$/apps/source"; +import { APP_REGISTRY } from "$/apps"; +import { ComponentChildren } from "preact"; + +export function Link(props: Link.Props) { + const onClick = useCallback((e: MouseEvent) => { + if (props.external) { + return + } + let app = APP_REGISTRY[props.type]; + if (app === undefined) { + console.error(`couldn't find app for file of type "${props.type}"`) + return + } + + taskManager.add({ + app, + source: signal({ + type: props.type, + link: new URL(props.link), + pixelated: props.pixelated + } as Address), + window: { + minimized: signal(false), + maximized: signal(false), + height: props.type === "link" ? "40vh" : undefined, + width: props.type === "link" ? "40vw" : undefined, + z: signal(taskManager.tasks.value.value.length) + }, + title: signal(undefined), + id: getTaskId(), + contentReady: signal(false), + sizingFinished: signal(false) + }) + e.preventDefault(); + }, []) + + const content = + { props.children ?? props.link } + + + if (props.type === "image" || props.type === "video" || props.type === "audio" || props.block) { + return
{content}
+ } else { + return content + } +} + +namespace Link { + export type Props = { + link: string, + alt?: string, + type: "video" | "image" | "link" | "audio", + block?: boolean, + pixelated?: boolean, + external?: boolean, + children?: ComponentChildren + } +} diff --git a/src/desktop/start.tsx b/src/desktop/start.tsx new file mode 100644 index 0000000..77fb2e8 --- /dev/null +++ b/src/desktop/start.tsx @@ -0,0 +1,51 @@ +import { signal } from "@preact/signals" + +export function ListenOn(props: { where: string, link: string }) { + return
  • + + Listen on {props.where} + +
    • +} + +export const startMenuOpen = signal(false) + +export function StartMenu() { + return
    +
    + + sunny xo sauce +
    +
    +
    +

    + Netpunk Credits +

    +

    + Sunnexo fumo icon taken from sunnexo.moe +

    +

    + Some elements copied from Netpunk's album cover +

    +

    + Font used: Nintendo DS BIOS +

    +

    + Source code +

    +

    + License info +

    +
    +
      + + + + +
    +
    + +
    +} diff --git a/src/desktop/window.tsx b/src/desktop/window.tsx index b2deaec..ef5cdab 100644 --- a/src/desktop/window.tsx +++ b/src/desktop/window.tsx @@ -1,63 +1,213 @@ +import { Signal, useSignal, useSignalEffect } from "@preact/signals"; +import { useLiveSignal } from "@preact/signals/utils"; import { ComponentChildren, Ref, RefObject } from "preact"; -import { useCallback, useRef, useState } from "preact/hooks"; +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, (e: MouseEvent) => void] export function Window(props: Window.Props) { + const useDrag = useCallback((onStartDrag, onUpdatePosition) => { + const dragTimeout: Ref> = useRef(null); + const dragging = useSignal(false); + + const stopDrag = useCallback((e: MouseEvent) => { + if (e.button === 0 && dragging.value && !dragTimeout.current) { + dragTimeout.current = setTimeout(() => { + dragging.value = false + dragTimeout.current = null; + props.desktop.current?.removeEventListener("mousemove", onUpdatePosition) + props.desktop.current?.removeEventListener("mouseup", stopDrag) + }, 50) // intrdouce a small delay where the user can still drag the window without actually pressing down lmb to prevent accidental drops + } + }, [onUpdatePosition]); + + const startDrag = useCallback((e: MouseEvent) => { + if (e.button === 0 && !maximized.value.value) { + if (dragTimeout.current !== null) { + clearTimeout(dragTimeout.current); + dragTimeout.current = null; + } else { + + onStartDrag(e); + dragging.value = true + props.desktop.current?.addEventListener("mousemove", onUpdatePosition) + props.desktop.current?.addEventListener("mouseleave", stopDrag, { once: true }) + props.desktop.current?.addEventListener("mouseup", stopDrag, { once: true }) + } + } + }, [onUpdatePosition, onStartDrag, stopDrag]); + + return [dragging, startDrag] + }, [props]) + const windowRef: Ref = useRef(null); - const dragTimeout: Ref> = useRef(null); - - const [x, setX] = useState(props.x ?? 0); - const [y, setY] = useState(props.y ?? 0); + + const source = useLiveSignal(props.task.source); + const title = useLiveSignal(props.task.title); + const contentReady = useLiveSignal(props.task.contentReady); + const sizingFinished = useLiveSignal(props.task.sizingFinished); + const [titleReady, setTitleReady] = useState(false); + const [titleRendered, setTitleRendered] = useState(false); + + const maximized = useLiveSignal(props.task.window.maximized); + const minimized = useLiveSignal(props.task.window.minimized); + const position = props.task.window.position; + const z = useLiveSignal(props.task.window.z); + + const x = useSignal(position?.x ?? "50%"); + const y = useSignal(position?.y ?? "50%"); const initialOffsetX = useRef(0); const initialOffsetY = useRef(0); - const updatePosition = useCallback((e: MouseEvent) => { - setX(e.clientX - initialOffsetX.current) - setY(e.clientY - initialOffsetY.current) + const onWindowUpdatePosition = useCallback((e: MouseEvent) => { + x.value = e.clientX - initialOffsetX.current + y.value = e.clientY - initialOffsetY.current }, []) - const startDrag = useCallback((e: MouseEvent) => { - if (e.button === 0) { + const onStartWindowMove = useCallback((e: MouseEvent) => { + const BORDER_WIDTH = 1; + // 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 + document.getSelection()?.empty() + }, []) - const BORDER_WIDTH = 1; - console.log(e); - // Naturally, I have to add the border width here, because offset* uses padding-edge for the calculations - initialOffsetX.current = e.offsetX + BORDER_WIDTH - initialOffsetY.current = e.offsetY + BORDER_WIDTH - windowRef.current?.classList.add("dragging") + const [dragging, startWindowMove] = useDrag(onStartWindowMove, onWindowUpdatePosition); + + const height = useSignal(props.task.window.height); + const width = useSignal(props.task.window.width); + + const onStartResize = useCallback((e: MouseEvent) => { + initialOffsetX.current = e.offsetX + initialOffsetY.current = e.offsetY + }, []) + + const onNorthResize = useCallback((e: MouseEvent) => { + const oldY = y.value as number; + y.value = e.clientY - initialOffsetY.current; + height.value = (height.value as number) - (y.value - oldY) + }, []) + + const [, startNorthResize] = useDrag(onStartResize, onNorthResize) + + + const onEastResize = useCallback((e: MouseEvent) => { + width.value = (e.clientX - (x.value as number) - initialOffsetX.current) + }, []) + + const [, startEastResize] = useDrag(onStartResize, onEastResize) + + + const onSouthResize = useCallback((e: MouseEvent) => { + height.value = (e.clientY - (y.value as number) - initialOffsetY.current) + }, []) - if (dragTimeout.current !== null) { - clearTimeout(dragTimeout.current); - dragTimeout.current = null; + const [, startSouthResize] = useDrag(onStartResize, onSouthResize) + + const onWestResize = useCallback((e: MouseEvent) => { + const oldX = x.value as number; + x.value = e.clientX - initialOffsetX.current; + width.value = (width.value as number) - (x.value - oldX) + }, []) + + const [, startWestResize] = useDrag(onStartResize, onWestResize) + + const startNEResize = useCallback((e: MouseEvent) => { + startNorthResize(e) + startEastResize(e) + }, []) + + const startNWResize = useCallback((e: MouseEvent) => { + startNorthResize(e) + startWestResize(e) + }, []) + + const startSEResize = useCallback((e: MouseEvent) => { + startSouthResize(e) + startEastResize(e) + }, []) + + const startSWResize = useCallback((e: MouseEvent) => { + startSouthResize(e) + startWestResize(e) + }, []) + + // tldr: wait until the title signal is ready, + // rerender so that the new title is rendered, calculate the position, + // and then rerender *again*, this time to reposition and show the window + + useSignalEffect(() => { + if (title.value.value !== undefined && !titleReady) { + setTitleReady(true) + } + }) + + useLayoutEffect(() => { + if (titleReady && contentReady.value.value) { + setTitleRendered(true); + // normalize position and dimensions from css values to pixels + const { height: bounding_height, width: bounding_width } = windowRef.current!.getBoundingClientRect(); + height.value = bounding_height + width.value = bounding_width + + if (position === undefined) { + // center + x.value = windowRef.current!.offsetLeft - (bounding_width / 2); + y.value = windowRef.current!.offsetTop - (bounding_height / 2); } else { - props.desktop.current?.addEventListener("mousemove", updatePosition) - props.desktop.current?.addEventListener("mouseleave", stopDrag) + x.value = windowRef.current!.offsetLeft; + y.value = windowRef.current!.offsetTop; } + sizingFinished.value.value = true } - }, []); - - const stopDrag = useCallback((e: MouseEvent) => { - if (e.button === 0) { - dragTimeout.current = setTimeout(() => { - dragTimeout.current = null; - windowRef.current?.classList.remove("dragging") - props.desktop.current?.removeEventListener("mousemove", updatePosition) - props.desktop.current?.removeEventListener("mouseleave", stopDrag) - }, 50) // intrdouce a small delay where the user can still drag the window without actually pressing down lmb to prevent accidental drops - } - }, []); + }, [titleReady, contentReady.value.value]) + + const handleMinimize = useCallback(() => { + minimized.value.value = !minimized.value.value + }, []) + + const handleMaximize = useCallback(() => { + maximized.value.value = !maximized.value.value + }, []) - return
    -
    -
    {props.title}
    -
    e.stopPropagation()}> - - -
    @@ -65,17 +215,24 @@ export function Window(props: Window.Props) {
    {props.children}
    +
    +
    +
    +
    +
    +
    +
    +
    } -namespace Window { +export namespace Window { export type Props = { - title: string; - width?: string | number; - height?: string | number; - x?: string | number; - y?: string | number; desktop: RefObject; - children: ComponentChildren + task: Task; + children: ComponentChildren; + + onClose: (task: Task) => void; + onFocus: (task: Task) => void; } } diff --git a/src/taskbar/index.tsx b/src/taskbar/index.tsx index 34377c2..3752e52 100644 --- a/src/taskbar/index.tsx +++ b/src/taskbar/index.tsx @@ -1,25 +1,39 @@ import { StartButton } from "./start" import { Time } from "./time" +import { Task, taskManager } from "$/desktop" +import { useCallback } from "preact/hooks" +import { useLiveSignal } from "@preact/signals/utils"; + +function TaskButton({ task }: TaskButton.Props) { + const source = useLiveSignal(task.source); + const title = useLiveSignal(task.title); + + const handleClick = useCallback(() => { + task.window.minimized.value = !task.window.minimized.value; + taskManager.focusWindow(task) + }, []) + + return
  • + +
    • +} + +namespace TaskButton { + export type Props = { + task: Task + } +} export function Taskbar() { + const sortedTasks = [...taskManager.tasks.value.value].sort((a, b) => a.id - b.id); + return