k0yukichang.png
layer-viewer.tsx - Notepad
1
// current window state + layer sync2
"use client";3
4
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";5
import { Fragment, useCallback, useEffect, useRef, useState } from "react";6
7
type CropWindowConfig = {8
id: string;9
title: string;10
className: string;11
startX: string;12
startY: string;13
width: string;14
height: string;15
};16
17
type DragState = {18
id: string;19
win: HTMLElement;20
copyLayers: DragCopyLayer[];21
pointerId: number;22
offsetX: number;23
offsetY: number;24
stageLeft: number;25
stageTop: number;26
originX: number;27
originY: number;28
frame: number;29
nextX: number;30
nextY: number;31
minX: number;32
minY: number;33
maxX: number;34
maxY: number;35
perf: DragPerformanceStats | null;36
};37
38
type DragCopyLayer = {39
element: HTMLElement;40
};41
42
type DragPerformanceStats = {43
id: string;44
pointerMoves: number;45
rafUpdates: number;46
maxFrameGap: number;47
lastFrameAt: number;48
pointerUpAt: number;49
postUpLongFrames: number;50
postUpMaxGap: number;51
};52
53
type WindowPosition = {54
baseX: number;55
baseY: number;56
x: number;57
y: number;58
transformX: number;59
transformY: number;60
};61
62
type WindowLayerSyncOptions = {63
geometry?: "visual" | "logical";64
};65
66
type TaskWindow = {67
id: string;68
title: string;69
};70
71
const mainWindowId = "k0yukichang";72
const sceneAssetUrls = ["/assets/a9f3c1d8e2.png", "/assets/q7b2m6v0n4.png"];73
74
const cropWindows: CropWindowConfig[] = [75
{76
id: "main",77
title: "layer-viewer.exe",78
className: "crop-window-main",79
startX: "21%",80
startY: "13%",81
width: "42vw",82
height: "52svh"83
},84
{85
id: "face",86
title: "layer-viewer (2).exe",87
className: "crop-window-face",88
startX: "8.5%",89
startY: "23%",90
width: "18rem",91
height: "13rem"92
},93
{94
id: "background",95
title: "layer-viewer (3).exe",96
className: "crop-window-lower",97
startX: "25%",98
startY: "58%",99
width: "17rem",100
height: "11rem"101
},102
{103
id: "mouth",104
title: "layer-viewer (4).exe",105
className: "crop-window-spot",106
startX: "44%",107
startY: "68%",108
width: "14rem",109
height: "9rem"110
}111
];112
113
const taskWindows: TaskWindow[] = [114
...cropWindows.map((windowConfig) => ({115
id: windowConfig.id,116
title: windowConfig.title117
})),118
{ id: mainWindowId, title: "k0yukichang.png" }119
];120
121
const taskWindowIds = taskWindows.map((windowConfig) => windowConfig.id);122
const taskButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});123
const restoringWindowIds = useRef<Set<string>>(new Set());124
const restoreWindowRef = useRef<((id: string) => void) | null>(null);125
const desktopStarted = useRef(false);126
127
const [minimizedWindows, setMinimizedWindows] = useState<Set<string>>(128
() => new Set(taskWindowIds)129
);130
const [minimizingWindows, setMinimizingWindows] = useState<Set<string>>(() => new Set());131
132
const syncWindowLayers = useCallback((id: string, options: WindowLayerSyncOptions = {}) => {133
const stage = stageRef.current;134
const win = windowRefs.current[id];135
if (!stage || !win) return;136
137
const geometry = options.geometry ?? "visual";138
const stageRect = stage.getBoundingClientRect();139
const position = readWindowPosition(win);140
141
win.querySelectorAll<HTMLElement>('[data-js="glass-copy"]').forEach((copy) => {142
const header = copy.closest<HTMLElement>(".window-header");143
if (!header) return;144
const headerOffset = readOffsetWithinWindow(header, win);145
copy.style.width = `${stageRect.width}px`;146
copy.style.height = `${stageRect.height}px`;147
copy.style.left = `${-(position.baseX + headerOffset.left)}px`;148
copy.style.top = `${-(position.baseY + headerOffset.top)}px`;149
applyCopyCounterTransform(copy, position.transformX, position.transformY);150
});151
152
const viewport = win.querySelector<HTMLElement>(".crop-viewport");153
const glassTargets = Array.from(win.querySelectorAll<HTMLElement>(".crop-glass-filter-target"));154
if (!viewport || glassTargets.length === 0) return;155
156
glassTargets.forEach((glassTarget) => {157
const copy = glassTarget.querySelector<HTMLElement>('[data-js="stage-copy"]');158
if (!copy) return;159
160
const targetOffset = readOffsetWithinWindow(glassTarget, win);161
const targetRect = geometry === "visual" ? glassTarget.getBoundingClientRect() : null;162
const targetBaseLeft =163
geometry === "logical"164
? stageRect.left + position.baseX + targetOffset.left165
: (targetRect?.left ?? stageRect.left) - position.transformX;166
const targetBaseTop =167
geometry === "logical"168
? stageRect.top + position.baseY + targetOffset.top169
: (targetRect?.top ?? stageRect.top) - position.transformY;170
copy.style.width = `${stageRect.width}px`;171
copy.style.height = `${stageRect.height}px`;172
copy.style.left = `${stageRect.left - targetBaseLeft}px`;173
copy.style.top = `${stageRect.top - targetBaseTop}px`;174
applyCopyCounterTransform(copy, position.transformX, position.transformY);175
});176
}, []);177
178
const initializeWindows = useCallback(() => {179
const stage = stageRef.current;180
if (!stage) return;181
182
document.documentElement.style.setProperty("--desktop-rem", `${getDesktopRemSize()}px`);183
184
const stageRect = stage.getBoundingClientRect();185
cropWindows.forEach((config) => {186
const win = windowRefs.current[config.id];187
if (!win) return;188
189
if (win.dataset.userPositioned === "true") {190
const position = readWindowPosition(win);191
setWindowTransformPositionWithinBounds(win, position.x, position.y);192
return;193
}194
195
setWindowPosition(196
win,197
parseStart(config.startX, stageRect.width),198
parseStart(config.startY, stageRect.height)199
);200
win.dataset.positioned = "true";201
});202
203
syncCropLayers();204
}, [setWindowPosition, setWindowTransformPositionWithinBounds, syncCropLayers]);205
206
const setMinimizeTarget = useCallback((id: string) => {207
const stage = stageRef.current;208
const win = windowRefs.current[id];209
const taskButton = taskButtonRefs.current[id];210
if (!stage || !win || !taskButton) return false;211
212
const stageRect = stage.getBoundingClientRect();213
const taskRect = taskButton.getBoundingClientRect();214
const position = readWindowPosition(win);215
const winWidth = win.offsetWidth || win.getBoundingClientRect().width;216
const winHeight = win.offsetHeight || win.getBoundingClientRect().height;217
const winLeft = stageRect.left + position.x;218
const winTop = stageRect.top + position.y;219
const x = taskRect.left + taskRect.width / 2 - (winLeft + winWidth / 2);220
const y = taskRect.top + taskRect.height / 2 - (winTop + winHeight / 2);221
const scaleX = clamp(taskRect.width / winWidth, .12, .42);222
const scaleY = clamp(taskRect.height / winHeight, .12, .42);223
const originX = clamp(taskRect.left + taskRect.width / 2 - winLeft, 0, winWidth);224
const originY = clamp(taskRect.top + taskRect.height / 2 - winTop, -winHeight, winHeight);225
226
win.style.setProperty("--minimize-x", `${x}px`);227
win.style.setProperty("--minimize-y", `${y}px`);228
win.style.setProperty("--minimize-scale-x", String(scaleX));229
win.style.setProperty("--minimize-scale-y", String(scaleY));230
win.style.setProperty("--minimize-origin-x", `${originX}px`);231
win.style.setProperty("--minimize-origin-y", `${originY}px`);232
return true;233
}, []);234
235
const minimizeWindow = useCallback((id: string) => {236
const win = windowRefs.current[id];237
if (!win) return;238
if (minimizingWindows.has(id) || minimizedWindows.has(id)) return;239
240
restoringWindowIds.current.delete(id);241
win.dataset.restoring = "false";242
if (!setMinimizeTarget(id)) return;243
244
setMinimizingWindows((current) => {245
if (current.has(id)) return current;246
const next = new Set(current);247
next.add(id);248
return next;249
});250
251
let completed = false;252
const completeMinimize = () => {253
if (completed) return;254
completed = true;255
win.removeEventListener("animationend", handleAnimationEnd);256
win.removeEventListener("transitionend", handleTransitionEnd);257
setMinimizedWindows((current) => new Set(current).add(id));258
setMinimizingWindows((current) => {259
const next = new Set(current);260
next.delete(id);261
return next;262
});263
};264
265
const handleTransitionEnd = (event: TransitionEvent) => {266
if (event.target !== win || event.propertyName !== "transform") return;267
completeMinimize();268
};269
270
const handleAnimationEnd = (event: AnimationEvent) => {271
const animationName = id === mainWindowId ? "main-minimize-to-task" : "crop-minimize-to-task";272
if (event.target !== win || event.animationName !== animationName) return;273
completeMinimize();274
};275
276
win.addEventListener("animationend", handleAnimationEnd);277
win.addEventListener("transitionend", handleTransitionEnd);278
window.setTimeout(completeMinimize, id === mainWindowId ? mainMinimizeFallbackMs : cropMinimizeFallbackMs);279
}, [minimizingWindows, minimizedWindows, setMinimizeTarget]);280
281
const restoreWindow = useCallback((id: string) => {282
const win = windowRefs.current[id];283
if (restoringWindowIds.current.has(id)) return;284
if (minimizingWindows.has(id)) return;285
286
if (!minimizedWindows.has(id)) {287
requestCropSync();288
return;289
}290
291
syncWindowLayers(id, { geometry: "logical" });292
restoringWindowIds.current.add(id);293
if (win) win.dataset.restoring = "true";294
295
setMinimizedWindows((current) => {296
const next = new Set(current);297
next.delete(id);298
return next;299
});300
301
const syncAfterRestore = () => {302
restoringWindowIds.current.delete(id);303
if (win) win.dataset.restoring = "false";304
requestCropSync();305
requestAnimationFrame(() => {306
syncWindowLayers(id);307
requestAnimationFrame(requestCropSync);308
});309
};310
}, [minimizingWindows, minimizedWindows, requestCropSync, syncWindowLayers]);311
312
useEffect(() => {313
sceneAssetUrls.forEach((src) => {314
const image = new Image();315
image.decoding = "sync";316
image.loading = "eager";317
image.src = src;318
void image.decode?.().catch(() => undefined);319
});320
}, []);321
322
useEffect(() => {323
if (bootVisible || desktopStarted.current) return;324
325
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;326
const startDelay = reduceMotion ? 40 : 180;327
const staggerDelay = reduceMotion ? 35 : 135;328
desktopStarted.current = true;329
330
requestAnimationFrame(() => {331
initializeWindows();332
taskWindowIds.forEach(syncWindowLayers);333
taskWindowIds.forEach(setMinimizeTarget);334
taskWindowIds.forEach((id, index) => {335
window.setTimeout(() => restoreWindowRef.current?.(id), startDelay + index * staggerDelay);336
});337
});338
}, [bootVisible, initializeWindows, setMinimizeTarget, syncWindowLayers]);339
340
const startDrag = useCallback((event: ReactPointerEvent<HTMLElement>, id: string) => {341
const stage = stageRef.current;342
const win = windowRefs.current[id];343
if (!stage || !win || minimizingWindows.has(id) || minimizedWindows.has(id)) return;344
if (!event.isPrimary || event.button !== 0) return;345
346
event.preventDefault();347
syncWindowLayers(id);348
349
const stageRect = stage.getBoundingClientRect();350
const bounds = getWindowBounds(win);351
if (!bounds) return;352
353
const position = readWindowPosition(win);354
const originX = clamp(position.x, bounds.minX, bounds.maxX);355
const originY = clamp(position.y, bounds.minY, bounds.maxY);356
if (originX !== position.x || originY !== position.y) {357
setWindowTransformPosition(win, originX, originY);358
}359
360
win.dataset.active = "true";361
win.dataset.dragging = "true";362
win.dataset.pressed = "true";363
win.setPointerCapture?.(event.pointerId);364
365
activeDrag.current = {366
id,367
win,368
copyLayers: getDragCopyLayers(win),369
pointerId: event.pointerId,370
offsetX: event.clientX - (stageRect.left + originX),371
offsetY: event.clientY - (stageRect.top + originY),372
stageLeft: stageRect.left,373
stageTop: stageRect.top,374
originX,375
originY,376
frame: 0,377
nextX: originX,378
nextY: originY,379
minX: bounds.minX,380
minY: bounds.minY,381
maxX: bounds.maxX,382
maxY: bounds.maxY,383
perf: dragPerformanceOverlayRef.current ? createDragPerformanceStats(id) : null384
};385
}, [getWindowBounds, minimizingWindows, minimizedWindows, syncWindowLayers]);386
387
window.addEventListener("pointermove", (event) => {388
const drag = activeDrag.current;389
if (!drag) return;390
event.preventDefault();391
drag.nextX = event.clientX - drag.stageLeft - drag.offsetX;392
drag.nextY = event.clientY - drag.stageTop - drag.offsetY;393
if (drag.perf) drag.perf.pointerMoves += 1;394
395
if (drag.frame) return;396
drag.frame = requestAnimationFrame(() => {397
drag.frame = 0;398
const nextX = clamp(drag.nextX, drag.minX, drag.maxX);399
const nextY = clamp(drag.nextY, drag.minY, drag.maxY);400
401
recordDragFrame(drag.perf);402
applyDragTransform(drag, nextX, nextY);403
});404
});405
406
function HeaderGlassBackdrop({ mainIllustrationHidden, windowId }: HeaderGlassBackdropProps) {407
return <div className="window-header-glass-copy" data-main-hidden={mainIllustrationHidden ? "true" : "false"} data-js="glass-copy" data-window-id={windowId} />;408
}409
410
function MainImageWindow({ minimized, minimizing, restoring, onMinimize }: MainImageWindowProps) {411
return (412
<article className="main-window main-scene" data-minimized={minimized ? "true" : "false"}>413
<div className="window-header main-window-header glass-window-header">414
<HeaderGlassBackdrop mainIllustrationHidden={minimized || minimizing} windowId={mainWindowId} />415
<span className="window-title">k0yukichang.png</span>416
<WindowControls canMinimize onMinimize={onMinimize} />417
</div>418
<div className="main-window-viewport">419
<img className="main-composite" src="/assets/a9f3c1d8e2.png" alt="" loading="eager" decoding="sync" />420
</div>421
</article>422
);423
}424
425
{cropWindows.map((config) => (426
<article className={`crop-window ${config.className}`} data-js="crop-window">427
<div className="window-header glass-window-header" onPointerDown={(event) => startDrag(event, config.id)}>428
<HeaderGlassBackdrop mainIllustrationHidden={mainIllustrationHidden} windowId={config.id} />429
<span className="window-title">{config.title}</span>430
<WindowControls canMinimize onMinimize={() => minimizeWindow(config.id)} />431
</div>432
<div className="crop-viewport">433
<div className="crop-glass-filter-target crop-glass-base">434
<div className="stage-copy" data-js="stage-copy" aria-hidden="true">435
<LayerScene />436
</div>437
</div>438
</div>439
</article>440
))}441
442
[data-image-guard="true"] img {443
-webkit-touch-callout: none;444
-webkit-user-drag: none;445
user-select: none;446
}447
448
.window-header-glass-copy {449
filter: url("#xp-liquid-glass-refraction") saturate(1.42);450
opacity: .4;451
}452
453
:root { --desktop-rem: 16px; }454
@media (min-width: 901px), (hover: hover) and (pointer: fine) { :root { font-size: var(--desktop-rem); } }455
.desktop-canvas { width: 100%; height: 100%; }456
.xp-taskbar { position: absolute; top: 0; }457
.main-window { width: min(64svh, 47vw, 44rem); }458
.copy-scene { width: min(116vw, 78rem); }459
@media (min-width: 901px), (hover: hover) and (pointer: fine) { .glass-window-header { backdrop-filter: blur(7px) saturate(1.35); } }460
.crop-window[data-minimizing="true"] .window-header-glass-copy { opacity: .52; }461
.window-header-glass-copy[data-main-hidden="true"] .glass-stage-main { display: none; }462
@media (min-width: 901px), (hover: hover) and (pointer: fine) { .crop-window[data-minimizing="true"] { animation: crop-minimize-to-task .72s linear forwards; } }463
@media (max-width: 900px) and (pointer: coarse) { .window-header-glass-copy { filter: saturate(1.16); } }464
.crop-window[data-dragging="true"] { transition: none; }465
.crop-window[data-dragging="true"] .stage-copy,466
.crop-window[data-dragging="true"] .window-header-glass-copy { will-change: transform; }467
.xp-social-button { background: linear-gradient(180deg, #79e870, #0b6515); }468
.workbench-window { border: 1px solid #0a3fa3; }469
.editor-body { font-family: "Lucida Console", "Consolas", monospace; }470
.editor-scroll-track { animation: editor-scroll 104s linear infinite; }471
.editor-body[data-glitching="true"] .editor-line code { color: rgba(101, 255, 190, .88); }assets
BackSearchFoldersC:\project\assets
| Name | Type | Size |
|---|---|---|
| a9f3c1d8e2.png | PNG File | 1,157 KB |
| q7b2m6v0n4.png | PNG File | 2,832 KB |
| n8c2v5k1.svg | SVG File | 1 KB |
| t6p9a3d7.svg | SVG File | 1 KB |
| k9d4x2m7.svg | SVG File | 3 KB |
cmd.exe
>> loaded layer-viewer.exe>> loaded k0yukichang.png>> crop sync complete>> window state restored>> taskbar item added>> render complete> _











loading personal entrance
