From 9a8a9f215403d58e703e15a90c74f245db948a59 Mon Sep 17 00:00:00 2001
From: Gordon Woodhull <gordon@woodhull.com>
Date: Fri, 11 Aug 2023 22:30:13 -0400
Subject: [PATCH] clip pipes to tile polygons

this addresses #91 but it has its own glitches
---
 src/lib/puzzle/ClipPolygon.svelte    | 17 +++++++++++++++++
 src/lib/puzzle/Puzzle.svelte         | 11 +++++++++++
 src/lib/puzzle/Tile.svelte           |  1 +
 src/lib/puzzle/grids/abstractgrid.js |  9 +++++++++
 src/lib/puzzle/grids/polygonutils.js | 26 ++++++++++++++++----------
 5 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/puzzle/ClipPolygon.svelte

diff --git a/src/lib/puzzle/ClipPolygon.svelte b/src/lib/puzzle/ClipPolygon.svelte
new file mode 100644
index 00000000..084b7342
--- /dev/null
+++ b/src/lib/puzzle/ClipPolygon.svelte
@@ -0,0 +1,17 @@
+<script>
+    /** @type {Number} i*/
+    export let i;
+
+    /**
+     * @type {import('$lib/puzzle/game').PipesGame} game
+     */
+    export let game;
+    export let cx = 0;
+    export let cy = 0;
+</script>
+
+<clipPath id="clip-path-{i}">
+    <path
+        d={game.grid.getClipPath(i)}
+    />
+</clipPath>
\ No newline at end of file
diff --git a/src/lib/puzzle/Puzzle.svelte b/src/lib/puzzle/Puzzle.svelte
index d10defe0..5e6688eb 100644
--- a/src/lib/puzzle/Puzzle.svelte
+++ b/src/lib/puzzle/Puzzle.svelte
@@ -2,6 +2,7 @@
 	import { settings } from '$lib/stores';
 	import { controls } from '$lib/puzzle/controls';
 	import Tile from '$lib/puzzle/Tile.svelte';
+	import ClipPolygon from '$lib/puzzle/ClipPolygon.svelte';
 	import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
 	import { PipesGame } from '$lib/puzzle/game';
 	import { Solver } from './solver';
@@ -330,6 +331,16 @@
 		on:contextmenu|preventDefault={() => {}}
 		on:save={save.soon}
 	>
+		<defs> 
+			{#each $visibleTiles as visibleTile, i (visibleTile.key)}
+				<ClipPolygon
+					i={visibleTile.index}
+					{game}
+					cx={visibleTile.x}
+					cy={visibleTile.y}
+				/>
+			{/each}
+		</defs>
 		{#each $visibleTiles as visibleTile, i (visibleTile.key)}
 			<Tile
 				i={visibleTile.index}
diff --git a/src/lib/puzzle/Tile.svelte b/src/lib/puzzle/Tile.svelte
index 808c3497..89acc125 100644
--- a/src/lib/puzzle/Tile.svelte
+++ b/src/lib/puzzle/Tile.svelte
@@ -75,6 +75,7 @@
 	<g
 		class="pipe"
 		style="transform: {tile_transform} rotate({game.grid.getAngle($state.rotations, i)}rad)"
+		clip-path="url(#clip-path-{i})"
 	>
 		<!-- Pipe outline -->
 		<path
diff --git a/src/lib/puzzle/grids/abstractgrid.js b/src/lib/puzzle/grids/abstractgrid.js
index 5b0e734d..5c6ddd39 100644
--- a/src/lib/puzzle/grids/abstractgrid.js
+++ b/src/lib/puzzle/grids/abstractgrid.js
@@ -159,6 +159,15 @@ export class AbstractGrid {
 		return this.polygon_at(index).contour_path;
 	}
 
+	/**
+	 * Clipping path for svg pipes
+	 * @param {Number} index
+	 * @returns {String}
+	 */
+	getClipPath(index) {
+		return this.polygon_at(index).clip_path;
+	}
+
 	/**
 	 * Pipes lines path
 	 * @param {Number} tile
diff --git a/src/lib/puzzle/grids/polygonutils.js b/src/lib/puzzle/grids/polygonutils.js
index b3ae5cd4..6c085c81 100644
--- a/src/lib/puzzle/grids/polygonutils.js
+++ b/src/lib/puzzle/grids/polygonutils.js
@@ -92,14 +92,8 @@ export class RegularPolygonTile {
 		}
 
 		// draw tile contour
-		let angle = angle_offset - this.angle_unit / 2;
-		const r = this.radius_out - border_width;
-		this.contour_path = `m ${r * Math.cos(angle)} ${-r * Math.sin(angle)}`;
-		for (let i = 1; i <= this.num_directions; i++) {
-			angle += this.angle_unit;
-			this.contour_path += ` L ${r * Math.cos(angle)} ${-r * Math.sin(angle)}`;
-		}
-		this.contour_path += ' z';
+		this.contour_path = this.polygon_path(this.radius_out - border_width);
+		this.clip_path = this.polygon_path(this.radius_out + border_width/2);
 
 		// caches for frequently recomputed values
 		this.cache = {
@@ -111,6 +105,17 @@ export class RegularPolygonTile {
 		};
 	}
 
+	polygon_path(r) {
+		let angle = this.angle_offset - this.angle_unit / 2;
+		let path = `m ${r * Math.cos(angle)} ${-r * Math.sin(angle)}`;
+		for (let i = 1; i <= this.num_directions; i++) {
+			angle += this.angle_unit;
+			path += ` L ${r * Math.cos(angle)} ${-r * Math.sin(angle)}`;
+		}
+		path += ' z';
+		return path;
+	}
+
 	/**
 	 * Return mininum equivalent number of rotations
 	 * In case of 4 directions rotating +3 is the same as rotating -1
@@ -189,8 +194,9 @@ export class RegularPolygonTile {
 		this.directions.forEach((direction, index) => {
 			if ((direction & tile) > 0) {
 				const angle = this.angle_offset + this.angle_unit * index;
-				const dx = this.radius_in * Math.cos(angle);
-				const dy = this.radius_in * Math.sin(angle);
+				const radius = this.radius_in * 1.2;
+				const dx = radius * Math.cos(angle);
+				const dy = radius * Math.sin(angle);
 				path += ` l ${dx} ${-dy} L 0 0`;
 			}
 		});