/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const BED_SIZE = 450; const SCALE = 0.8; // Scale factor to fit the bed in the viewport const WOOD_TYPES = [ { name: "Pine", color: "#E8C39E", burnColor: "#8B4513" }, { name: "Oak", color: "#D4A36A", burnColor: "#5E2605" }, { name: "Maple", color: "#F3DFC1", burnColor: "#A0522D" }, { name: "Cherry", color: "#C94C4C", burnColor: "#800000" }, { name: "Walnut", color: "#5C4033", burnColor: "#321414" }, ]; const PATTERNS = { square: (size) => `M0,0 L${size},0 L${size},${size} L0,${size} Z`, circle: (size) => `M${size/2},0 A${size/2},${size/2} 0 1,1 ${size/2},${size} A${size/2},${size/2} 0 1,1 ${size/2},0 Z`, triangle: (size) => `M0,${size} L${size/2},0 L${size},${size} Z`, star: (size) => { const innerRadius = size / 5; const outerRadius = size / 2; let path = `M ${size/2},0`; for (let i = 0; i < 10; i++) { const angle = i * Math.PI / 5; const radius = i % 2 === 0 ? outerRadius : innerRadius; path += ` L${size/2 + radius * Math.sin(angle)},${size/2 - radius * Math.cos(angle)}`; } return path + ' Z'; }, // New cut sheet patterns boxJoint: (size) => { const teeth = 5; const toothSize = size / teeth; let path = `M0,0`; for (let i = 0; i < teeth; i++) { path += ` h${toothSize} v${toothSize} h${-toothSize} v${toothSize}`; } return path; }, honeycomb: (size) => { const hexSize = size / 6; const h = hexSize * Math.sqrt(3) / 2; let path = ''; for (let row = 0; row < 3; row++) { for (let col = 0; col < 3; col++) { const x = col * 3 * hexSize + (row % 2 ? 1.5 * hexSize : 0); const y = row * h * 2; path += `M${x},${y + h} l${hexSize/2},${-h} l${hexSize},0 l${hexSize/2},${h} l${-hexSize/2},${h} l${-hexSize},0 z `; } } return path; }, gears: (size) => { const gearSize = size / 3; const teeth = 8; const toothSize = gearSize / 10; let path = ''; for (let gear = 0; gear < 3; gear++) { const centerX = (gear % 2 === 0) ? gearSize : 2 * gearSize; const centerY = (gear < 2) ? gearSize : 2 * gearSize; path += `M${centerX},${centerY - gearSize/2} `; for (let i = 0; i < teeth; i++) { const angle = (i / teeth) * 2 * Math.PI; const nextAngle = ((i + 1) / teeth) * 2 * Math.PI; const outerX = centerX + (gearSize/2 + toothSize) * Math.sin(angle); const outerY = centerY - (gearSize/2 + toothSize) * Math.cos(angle); const innerX = centerX + (gearSize/2) * Math.sin(nextAngle - Math.PI/teeth); const innerY = centerY - (gearSize/2) * Math.cos(nextAngle - Math.PI/teeth); path += `L${outerX},${outerY} L${innerX},${innerY} `; } path += 'Z '; } return path; } }; function App() { const [position, setPosition] = useState({ x: 0, y: 0 }); const [isLaserOn, setIsLaserOn] = useState(false); const [burnPath, setBurnPath] = useState(""); const [selectedWood, setSelectedWood] = useState(WOOD_TYPES[0]); const [selectedPattern, setSelectedPattern] = useState(null); const animationRef = useRef(null); const pathRef = useRef(null); const [animationProgress, setAnimationProgress] = useState(0); useEffect(() => { return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, []); const moveLaser = (newX, newY) => { setPosition({ x: newX, y: newY }); if (isLaserOn) { setBurnPath((prevPath) => `${prevPath} L${newX},${newY}`); } else { setBurnPath((prevPath) => `${prevPath} M${newX},${newY}`); } }; const animatePattern = (timestamp) => { if (!pathRef.current) return; const totalLength = pathRef.current.getTotalLength(); const progress = (timestamp / 5000) % 1; // Complete cycle every 5 seconds setAnimationProgress(progress); const point = pathRef.current.getPointAtLength(totalLength * progress); setPosition({ x: point.x, y: point.y }); setBurnPath(pathRef.current.getAttribute('d')); animationRef.current = requestAnimationFrame(animatePattern); }; const toggleLaser = () => { setIsLaserOn(!isLaserOn); }; const startAnimation = () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } setIsLaserOn(true); animationRef.current = requestAnimationFrame(animatePattern); }; const stopAnimation = () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); animationRef.current = null; } setIsLaserOn(false); }; const clearPath = () => { setBurnPath(""); setPosition({ x: 0, y: 0 }); setAnimationProgress(0); }; const applyPattern = () => { if (selectedPattern) { const patternSize = BED_SIZE * 0.8; // 80% of bed size const offset = (BED_SIZE - patternSize) / 2; const patternPath = PATTERNS[selectedPattern](patternSize); setBurnPath(`M${offset},${offset} ${patternPath}`); setPosition({ x: offset, y: offset }); setAnimationProgress(0); } }; return (

Laser Cutter Simulator

X: {position.x.toFixed(2)}, Y: {position.y.toFixed(2)}

Bed Size: 450mm x 450mm

Laser Status: {isLaserOn ? "ON" : "OFF"}

Wood Type: {selectedWood.name}

Selected Pattern: {selectedPattern || "None"}

Animation Progress: {(animationProgress * 100).toFixed(1)}%

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Laser Cutter Simulator

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } .container { max-width: 800px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { text-align: center; color: #333; } .controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } button, select { padding: 10px 15px; font-size: 14px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; transition: background-color 0.3s; } button:hover, select:hover { background-color: #45a049; } select { background-color: #3498db; } select:hover { background-color: #2980b9; } svg { display: block; margin: 0 auto; border: 1px solid #ddd; } .position, .info { text-align: center; margin-top: 10px; font-size: 14px; color: #666; } a { display: block; text-align: center; margin-top: 20px; color: #4CAF50; text-decoration: none; } a:hover { text-decoration: underline; } `; export default server;

laserCutterSimulator