aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: use TextButtonSmall for KidLisp.com editor button padding

Switch from TextButton to TextButtonSmall so box sizing uses correct
MatrixChunky8 metrics (4px char width, 2px padding) instead of manual
overrides every frame.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Jeffrey Alan Scudder 4e866db4 a457cd7f

+15 -22
+15 -22
system/public/aesthetic.computer/disks/prompt.mjs
··· 5268 5268 5269 5269 // 🟢 KidLisp.com button centered at bottom (between paste and enter buttons) 5270 5270 const kidlispBtnText = "Edit on KidLisp.com"; 5271 - 5271 + 5272 5272 // Get paste and enter button positions to center between them 5273 5273 const pasteBox = $.system.prompt.input?.paste?.btn?.box; 5274 5274 const enterBox = $.system.prompt.input?.enter?.btn?.box; 5275 - 5275 + 5276 5276 // Calculate center position between paste (left) and enter (right) buttons 5277 5277 let kidlispBtnX, kidlispBtnY; 5278 + // TextButtonSmall: 4px per char + 2px left + 2px right padding 5279 + const btnWidth = kidlispBtnText.length * 4 + 4; 5278 5280 if (pasteBox && enterBox) { 5279 5281 // Position horizontally centered between paste's right edge and enter's left edge 5280 5282 const gapStart = pasteBox.x + pasteBox.w; 5281 5283 const gapEnd = enterBox.x; 5282 5284 const gapCenter = gapStart + (gapEnd - gapStart) / 2; 5283 - const btnWidth = kidlispBtnText.length * 4 + 4; // MatrixChunky8: 4px per char + 4px padding 5284 5285 kidlispBtnX = Math.floor(gapCenter - btnWidth / 2); 5285 5286 kidlispBtnY = pasteBox.y; // Same Y position as the bottom buttons 5286 5287 } else { 5287 5288 // Fallback to bottom center if buttons not available 5288 - const btnWidth = kidlispBtnText.length * 4 + 4; 5289 5289 kidlispBtnX = Math.floor(screen.width / 2 - btnWidth / 2); 5290 5290 kidlispBtnY = screen.height - 18; 5291 5291 } 5292 - 5292 + 5293 5293 if (!kidlispBtn) { 5294 - kidlispBtn = new $.ui.TextButton(kidlispBtnText, { x: kidlispBtnX, y: kidlispBtnY }); 5294 + kidlispBtn = new $.ui.TextButtonSmall(kidlispBtnText, { x: kidlispBtnX, y: kidlispBtnY }); 5295 5295 kidlispBtn.stickyScrubbing = true; 5296 5296 } else { 5297 5297 kidlispBtn.reposition({ x: kidlispBtnX, y: kidlispBtnY }, kidlispBtnText); 5298 5298 kidlispBtn.btn.disabled = false; 5299 5299 } 5300 - 5300 + 5301 5301 // Paint the button with rainbow cycling colors (like GIVE button) + blinking 5302 5302 const kidlispBtnBox = kidlispBtn.btn.box; 5303 5303 const isKidlispBtnDown = kidlispBtn.btn.down; 5304 5304 const isKidlispBtnOver = kidlispBtn.btn.over; 5305 - 5305 + 5306 5306 // 🌈 Rainbow cycling colors for attention-seeking effect 5307 5307 const klT = performance.now() / 1000; 5308 5308 const klHue = (klT * 60) % 360; // Cycle through hues 5309 5309 const klPulse = Math.sin(klT * 4) * 0.5 + 0.5; // Pulsing effect (0-1) 5310 5310 const klBlink = Math.floor(klT * 3) % 2; // Blink on/off 3 times per second 5311 - 5311 + 5312 5312 // Convert HSL to RGB 5313 5313 const klHslToRgb = (h, s, l) => { 5314 5314 h /= 360; s /= 100; l /= 100; ··· 5331 5331 } 5332 5332 return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; 5333 5333 }; 5334 - 5334 + 5335 5335 // Bright saturated fill that cycles through rainbow 5336 5336 const klFillColor = klHslToRgb(klHue, 90, 40 + klPulse * 15); 5337 5337 const klTextColor = klHslToRgb((klHue + 180) % 360, 100, 85); // Complementary color for text 5338 5338 const klOutlineColor = klHslToRgb((klHue + 120) % 360, 100, 60); // Triadic color for outline 5339 - 5340 - // Manually size the button box to fit the text tightly (reduce right padding) 5341 - const textWidth = kidlispBtnText.length * 4; // MatrixChunky8: 4px per char 5342 - const btnPadX = 2; // Tighter horizontal padding 5343 - const btnPadY = 2; // Tighter vertical padding 5344 - kidlispBtnBox.w = textWidth + btnPadX * 2; 5345 - kidlispBtnBox.h = 7 + btnPadY * 2; // MatrixChunky8 height is 7px 5346 - 5339 + 5347 5340 // Background - rainbow cycling with blink effect 5348 5341 if (klBlink || isKidlispBtnOver || isKidlispBtnDown) { 5349 5342 const bgColor = isKidlispBtnDown ? [klFillColor[0] + 40, klFillColor[1] + 40, klFillColor[2] + 40] : klFillColor; ··· 5351 5344 } else { 5352 5345 ink(20, 20, 30).box(kidlispBtnBox); // Dark background during "off" blink 5353 5346 } 5354 - 5347 + 5355 5348 // Animated outline 5356 5349 ink(...klOutlineColor).box(kidlispBtnBox, "outline"); 5357 - 5358 - // Text with complementary color (tighter positioning) 5359 - ink(...klTextColor).write(kidlispBtnText, { x: kidlispBtnBox.x + btnPadX, y: kidlispBtnBox.y + btnPadY }, undefined, undefined, false, "MatrixChunky8"); 5350 + 5351 + // Text with complementary color 5352 + ink(...klTextColor).write(kidlispBtnText, { x: kidlispBtnBox.x + 2, y: kidlispBtnBox.y + 2 }, undefined, undefined, false, "MatrixChunky8"); 5360 5353 5361 5354 // Keep animating 5362 5355 $.needsPaint();