ajet/just-vibes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blue

Browse Source
This commit is contained in:
Adam Jeniski 2026-01-05 01:01:49 -05:00
parent 6f562d9c12
commit 5fa9948030
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
line-segment-intersection/src/App.svelte
View File

@ -33,7 +33,7 @@
function redraw() { function redraw() {
drawGrid(); drawGrid();
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)'); drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(0, 128, 255, 0.3)');
drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)'); drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
drawLineSegment(1, 1, 6, 7, '#ff3e00'); drawLineSegment(1, 1, 6, 7, '#ff3e00');
drawLabel('A', 1, 1); drawLabel('A', 1, 1);
@ -122,7 +122,7 @@
const coords = toCanvasCoords(userPoint.x, userPoint.y); const coords = toCanvasCoords(userPoint.x, userPoint.y);
// Draw point // Draw point
ctx.fillStyle = '#646cff'; ctx.fillStyle = '#0080ff';
ctx.beginPath(); ctx.beginPath();
ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2); ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
ctx.fill(); ctx.fill();
@ -203,6 +203,7 @@
</script> </script>
<main> <main>
<a href="https://ajet.fyi" class="back-button">← Back</a>
<h1>Line Segment Intersection</h1> <h1>Line Segment Intersection</h1>
<div class="canvas-container"> <div class="canvas-container">
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas> <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:click={handleCanvasClick}></canvas>
@ -236,6 +237,23 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; padding: 2rem;
position: relative;
}
.back-button {
position: absolute;
top: 1rem;
left: 1rem;
color: #0080ff;
text-decoration: none;
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.back-button:hover {
background-color: rgba(0, 128, 255, 0.1);
} }
h1 { h1 {
@ -272,7 +290,7 @@
.point-c { .point-c {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #646cff; color: #0080ff;
font-family: monospace; font-family: monospace;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
@ -288,7 +306,7 @@
} }
.rect-calc.blue { .rect-calc.blue {
border-color: #646cff; border-color: #0080ff;
} }
.rect-calc.red { .rect-calc.red {
@ -309,7 +327,7 @@
} }
.rect-calc.blue h3 { .rect-calc.blue h3 {
color: #646cff; color: #0080ff;
} }
.rect-calc.red h3 { .rect-calc.red h3 {