iamdoubz/drawit
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Details animation does not play cont

Browse Source
This commit is contained in:
iamdoubz committed 2026-06-20 05:38:25 -05:00
1 parent bdd53f06c8
commit 27c6d86d50
1 file changed
+11 -5
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TraceRunner.tsx
+11 -5
View File
@@ -219,13 +219,19 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed
<div style={{ display: "grid", gap: 18, gridTemplateColumns: "1fr", alignItems: "start" }}> <div style={{ display: "grid", gap: 18, gridTemplateColumns: "1fr", alignItems: "start" }}>
<div> <div>
<div ref={stageRef} className="no-touch-scroll" style={{ position: "relative", width: "100%", maxWidth: 640, margin: "0 auto", aspectRatio: "4 / 3", background: "#fff", border: "2px solid var(--line)", borderRadius: 16, overflow: "hidden" }}> <div ref={stageRef} className="no-touch-scroll" style={{ position: "relative", width: "100%", maxWidth: 640, margin: "0 auto", aspectRatio: "4 / 3", background: "#fff", border: "2px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
{/* faint trace target (outline base + lines so far) */} {/* the already-drawn outline shown clearly so the child knows what they're adding to */}
<svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.28, pointerEvents: "none" }} {meta.baseSvg && (
dangerouslySetInnerHTML={{ __html: meta.baseSvg + "\n" + guideUpTo }} /> <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5, pointerEvents: "none" }}
{/* the slowly-drawn video for the current step */} dangerouslySetInnerHTML={{ __html: meta.baseSvg }} />
{playing && <LineDraw lines={step.lines} playKey={playKey} onDone={() => setPlaying(false)} />} )}
{/* faint trace target for this lesson's lines so far */}
<svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.3, pointerEvents: "none" }}
dangerouslySetInnerHTML={{ __html: guideUpTo }} />
{/* the child's drawing (transparent base so the guide + video show through) */}
<canvas ref={canvasRef} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp} <canvas ref={canvasRef} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
style={{ position: "absolute", inset: 0, width: "100%", height: "100%", touchAction: "none", cursor: "crosshair" }} /> style={{ position: "absolute", inset: 0, width: "100%", height: "100%", touchAction: "none", cursor: "crosshair" }} />
{/* the slowly-drawn video for the current step — on top so it always shows, even over the imported outline */}
{playing && <LineDraw lines={step.lines} playKey={playKey} onDone={() => setPlaying(false)} />}
</div> </div>
<div className="row" style={{ justifyContent: "center", marginTop: 12, gap: 10 }}> <div className="row" style={{ justifyContent: "center", marginTop: 12, gap: 10 }}>