Mercurial
diff hg-web/src/components/graph.tsx @ 194:fb28063dc490 hg-web
Adding few more images.
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 25 Jan 2026 20:19:42 -0800 |
| parents | 9f4429c49733 |
| children |
line wrap: on
line diff
--- a/hg-web/src/components/graph.tsx Sun Jan 25 20:04:55 2026 -0800 +++ b/hg-web/src/components/graph.tsx Sun Jan 25 20:19:42 2026 -0800 @@ -183,7 +183,10 @@ let pencilPattern; const img = new Image(); - img.src = "http://localhost:6970/pencil_texture.png"; + img.src = "http://localhost:6970/pencil_lines.png"; + + const pandaImg = new Image(); + pandaImg.src = "http://localhost:6970/panda.png"; useEffect(() => { const canvas = canvasRef.current; @@ -238,35 +241,11 @@ // Pass 2: Draw Commit Nodes changesets.forEach((cs, i) => { const x = getX(cs.col), y = getY(i); - const color = colors[cs.color % colors.length]; - - // Sketchy outer glow - ctx.beginPath(); - ctx.arc(x, y, nodeRadius + 2, 0, Math.PI * 2); - ctx.fillStyle = `${color}33`; - ctx.fill(); - - // Core Node - ctx.beginPath(); - ctx.arc(x, y, nodeRadius, 0, Math.PI * 2); - ctx.fillStyle = color; - ctx.fill(); - - // Sketchy border rings - for (let s = 0; s < 2; s++) { - ctx.beginPath(); - ctx.arc(x + (Math.random() - 0.5), y + (Math.random() - 0.5), nodeRadius + 0.5, 0, Math.PI * 2); - ctx.strokeStyle = '#000000'; - ctx.globalAlpha = 0.3; - ctx.lineWidth = 0.8; - ctx.stroke(); - } - ctx.globalAlpha = 1; + ctx.drawImage(pandaImg, x-10, y-10, 20, 20); }); }; img.onload = () => { - console.log("WTF"); pencilPattern = ctx.createPattern(img, "repeat")!; renderCanvas(); }; @@ -287,7 +266,7 @@ }, [onLoadMore, hasMore, loading]); return ( - <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: '#1a1a1a', fontFamily: 'monospace' }}> + <div style={{ display: 'flex', flexDirection: 'column', height: '100%', backgroundImage: 'url("/hg-web-background.jpg")', fontFamily: 'monospace' }}> <div ref={containerRef} style={{ display: 'flex', flex: 1, overflowY: 'auto', position: 'relative' }}