clip pipes to tile polygons

this addresses gereleth#91 but it has its own glitches

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>

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}

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

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

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`;
 			}
 		});