Monorepo for Aesthetic.Computer
aesthetic.computer
Make prompt laptop ad bolder
+75
-20
+75
-20
system/public/aesthetic.computer/disks/prompt.mjs
+75
-20
system/public/aesthetic.computer/disks/prompt.mjs
···
5186
5186
osBtn = null;
5187
5187
}
5188
5188
5189
-
// 💻 Blank laptop ad — minimal, dark, monochrome
5189
+
// 💻 Blank laptop ad — loud, color-cycling bumper
5190
5190
if (topRightBtnChoice === "blank" && showLoginCurtain) {
5191
5191
const t = performance.now() / 1000;
5192
5192
const btnPaddingTop = 3;
5193
5193
const btnPaddingRight = 3;
5194
-
5195
-
const blankBtnText = "Need a laptop?";
5194
+
const btnGap = 5;
5195
+
const charWidth = 6;
5196
+
const blankBtnText = "AC Laptop $128";
5197
+
const blankBtnLabel = ` ${blankBtnText} `;
5196
5198
const blankBtnY = btnPaddingTop;
5197
-
const blankBtnX = screen.width - blankBtnText.length * 6 - 12 - btnPaddingRight;
5199
+
const blankBtnX = screen.width - blankBtnLabel.length * charWidth - btnGap * 2 - btnPaddingRight;
5198
5200
5199
5201
if (!blankAdBtn) {
5200
-
blankAdBtn = new $.ui.TextButton(blankBtnText, { x: blankBtnX, y: blankBtnY });
5202
+
blankAdBtn = new $.ui.TextButton(blankBtnLabel, { x: blankBtnX, y: blankBtnY }, undefined, btnGap);
5201
5203
} else {
5202
-
blankAdBtn.reposition({ x: blankBtnX, y: blankBtnY }, blankBtnText);
5204
+
blankAdBtn.reposition({ x: blankBtnX, y: blankBtnY }, blankBtnLabel);
5203
5205
}
5204
5206
5205
5207
const btnBox = blankAdBtn?.btn?.box;
5206
5208
if (btnBox) {
5207
5209
const isDown = blankAdBtn.btn.down;
5208
5210
const isHover = blankAdBtn.btn.over && !isDown;
5211
+
const adHslToRgb = (h, s, l) => {
5212
+
h /= 360;
5213
+
s /= 100;
5214
+
l /= 100;
5215
+
let r, g, b;
5216
+
if (s === 0) {
5217
+
r = g = b = l;
5218
+
} else {
5219
+
const hue2rgb = (p, q, tt) => {
5220
+
if (tt < 0) tt += 1;
5221
+
if (tt > 1) tt -= 1;
5222
+
if (tt < 1 / 6) return p + (q - p) * 6 * tt;
5223
+
if (tt < 1 / 2) return q;
5224
+
if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
5225
+
return p;
5226
+
};
5227
+
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
5228
+
const p = 2 * l - q;
5229
+
r = hue2rgb(p, q, h + 1 / 3);
5230
+
g = hue2rgb(p, q, h);
5231
+
b = hue2rgb(p, q, h - 1 / 3);
5232
+
}
5233
+
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
5234
+
};
5209
5235
5210
-
// Subtle pulse between dark grays
5211
-
const pulse = Math.sin(t * 1.5) * 0.5 + 0.5;
5212
-
let bgR = Math.floor(20 + pulse * 15);
5213
-
let bgG = bgR;
5214
-
let bgB = bgR;
5236
+
const hue = (t * (isHover ? 130 : 90)) % 360;
5237
+
const pulse = sin(t * (isHover ? 8 : 5)) * 0.5 + 0.5;
5238
+
const fillColor = isDown
5239
+
? [25, 20, 15]
5240
+
: adHslToRgb(hue, 92, 42 + pulse * (isHover ? 16 : 10));
5241
+
const stripeColor = adHslToRgb((hue + 90) % 360, 100, 55 + pulse * 12);
5242
+
const glowColor = adHslToRgb((hue + 180) % 360, 100, 72);
5243
+
const outlineColor = isDown
5244
+
? [255, 245, 130]
5245
+
: adHslToRgb((hue + 210) % 360, 100, isHover ? 84 : 72);
5215
5246
5216
-
if (isDown) { bgR = bgG = bgB = 60; }
5217
-
else if (isHover) { bgR = bgG = bgB = 45; }
5247
+
ink(...fillColor).box(btnBox, "fill");
5248
+
ink(stripeColor[0], stripeColor[1], stripeColor[2], 180).box(btnBox.x + 1, btnBox.y + 1, btnBox.w - 2, 3, "fill");
5249
+
ink(glowColor[0], glowColor[1], glowColor[2], 110).box(btnBox.x + 1, btnBox.y + btnBox.h - 4, btnBox.w - 2, 2, "fill");
5250
+
ink(...outlineColor).box(btnBox, "outline");
5251
+
ink(glowColor[0], glowColor[1], glowColor[2], isHover ? 170 : 110).box(btnBox.x + 1, btnBox.y + 1, btnBox.w - 2, btnBox.h - 2, "outline");
5218
5252
5219
-
ink(bgR, bgG, bgB).box(btnBox, "fill");
5253
+
const ornamentChars = "<>[]/\\\\*+=";
5254
+
const ornamentCount = Math.max(2, Math.floor((btnBox.w - 8) / charWidth));
5255
+
const ornamentShift = Math.floor(t * (isHover ? 18 : 10));
5256
+
const ornamentY = btnBox.y + 6;
5257
+
for (let i = 0; i < ornamentCount; i++) {
5258
+
const char = ornamentChars[(i + ornamentShift) % ornamentChars.length];
5259
+
const wobble = Math.round(sin(t * 6 + i * 0.9) * (isHover ? 2 : 1));
5260
+
const ornamentColor = adHslToRgb((hue + i * 18) % 360, 100, 66);
5261
+
ink(ornamentColor[0], ornamentColor[1], ornamentColor[2], isHover ? 95 : 72).write(char, {
5262
+
x: btnBox.x + 4 + i * charWidth,
5263
+
y: ornamentY + wobble,
5264
+
});
5265
+
}
5220
5266
5221
-
// Thin outline — faint white
5222
-
const outlineAlpha = Math.floor(60 + pulse * 40);
5223
-
ink(255, 255, 255, outlineAlpha).box(btnBox, "outline");
5267
+
const titleStartX = Math.round(btnBox.x + (btnBox.w - blankBtnText.length * charWidth) / 2);
5268
+
const titleY = btnBox.y + 5;
5269
+
const shadowY = titleY + (isDown ? 0 : 1);
5224
5270
5225
-
// Text
5226
-
const textBright = isDown ? 180 : (isHover ? 160 : Math.floor(100 + pulse * 40));
5227
-
ink(textBright, textBright, textBright).write(blankBtnText, { x: btnBox.x + 4, y: btnBox.y + 4 });
5271
+
blankBtnText.split("").forEach((char, i) => {
5272
+
const phase = t * (isHover ? 10 : 7) + i * 0.85;
5273
+
const shakeX = isDown ? 0 : Math.round(sin(phase) * (isHover ? 2 : 1));
5274
+
const shakeY = isDown ? 1 : Math.round(cos(phase * 1.3) * (isHover ? 2 : 1));
5275
+
const letterX = titleStartX + i * charWidth + shakeX;
5276
+
const letterHue = (hue + i * 20 + pulse * 30) % 360;
5277
+
const letterColor = isDown
5278
+
? [255, 240, 90]
5279
+
: adHslToRgb(letterHue, 100, isHover ? 90 : 82);
5280
+
ink(10, 0, 30, isHover ? 200 : 150).write(char, { x: letterX + 1, y: shadowY + shakeY });
5281
+
ink(...letterColor).write(char, { x: letterX, y: titleY + shakeY });
5282
+
});
5228
5283
}
5229
5284
$.needsPaint();
5230
5285
} else {