Merge pull request #92 from gordonwoodhull/cubes

cube grid

package.json

@@ -16,8 +16,8 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/adapter-vercel": "next",
 		"@sveltejs/adapter-static": "*",
+		"@sveltejs/adapter-vercel": "next",
 		"@sveltejs/kit": "^1.0.0",
 		"@testing-library/svelte": "^3.2.1",
 		"@types/cookie": "^0.5.1",
@@ -37,6 +37,7 @@
 		"@fontsource/fira-mono": "^4.5.0",
 		"cookie": "^0.4.1",
 		"normalize-wheel": "^1.0.1",
-		"randomcolor": "0.6.2"
+		"randomcolor": "0.6.2",
+		"transformation-matrix": "^2.15.0"
 	}
 }

src/lib/header/ExampleTile.svelte

@@ -14,14 +14,18 @@
 
 	let path = grid.getPipesPath(tile, i);
 	const isSink = grid.getDirections(tile, 0, i).length === 1;
+
+	const tile_transform = grid.getTileTransformCSS(i) || ''
+
 </script>
 
 <g class="tile" transform="translate({cx},{cy})">
 	<!-- Tile background -->
-	<path d={grid.getTilePath(i)} stroke="#aaa" stroke-width="0.02" fill={bgColor} />
+	<path d={grid.getTilePath(i)} stroke="#aaa" stroke-width="0.02" 
+		fill={bgColor}  style="transform: {tile_transform}"/>
 
 	<!-- Pipe shape -->
-	<g class="pipe">
+	<g class="pipe" style="transform: {tile_transform}">
 		<!-- Pipe outline -->
 		<path
 			d={path}
@@ -47,7 +51,7 @@
 			d={path}
 			stroke="white"
 			stroke-width={pipeWidth}
-			stroke-linejoin="round"
+			stroke-linejoin={grid.lineJoin || 'round'}
 			stroke-linecap="round"
 		/>
 	</g>

src/lib/puzzle/EdgeMarks.svelte

@@ -12,11 +12,25 @@
 
 	let state = game.tileStates[i];
 
+	let tile_transform = null;
+	$: tile_transform = game.grid.getTileTransformCSS(i) || '';
 	/**
 	 *
 	 * @param {import('$lib/puzzle/game').EdgeMark[]} marks
 	 */
 	function visibleMarks(marks) {
+		let reflectMarks = null;
+		if (game.grid.EDGEMARK_REFLECTS) {
+			reflectMarks = game.grid.EDGEMARK_REFLECTS.map(direction => {
+				const {neighbour} = game.grid.find_neighbour(i, direction);
+				if (neighbour === -1) {
+					return 'none';
+				}
+				const oppositeDir = game.grid.OPPOSITE.get(direction);
+				const oppositeIndex = game.grid.EDGEMARK_DIRECTIONS.indexOf(oppositeDir);
+				return game.tileStates[neighbour].data.edgeMarks[oppositeIndex];
+			});
+		}
 		/**
 		 * @type {{x1:number, x2: number, y1: number, y2:number, state: import('$lib/puzzle/game').EdgeMark, direction:number}[]}
 		 */
@@ -26,7 +40,7 @@
 				return;
 			}
 			const direction = game.grid.EDGEMARK_DIRECTIONS[index];
-			const { x1, y1, x2, y2 } = game.grid.getEdgemarkLine(direction, i);
+			const { x1, y1, x2, y2 } = game.grid.getEdgemarkLine(direction, state === 'wall', i);
 			visible.push({
 				x1,
 				y1,
@@ -36,13 +50,30 @@
 				direction
 			});
 		});
+		if (reflectMarks) {
+			reflectMarks.forEach((state, index) => {
+				if (state === 'none' || state === 'empty' || state === 'wall') {
+					return;
+				}
+				const direction = game.grid.EDGEMARK_REFLECTS[index];
+				const { x1, y1, x2, y2 } = game.grid.getEdgemarkLine(direction, state === 'wall', i);
+				visible.push({
+					x1,
+					y1,
+					x2,
+					y2,
+					state,
+					direction
+				});
+			});
+		}
 		return visible;
 	}
 
 	$: visibleEdgeMarks = visibleMarks($state.edgeMarks);
 </script>
 
-<g class="edgemarks" transform="translate({cx},{cy})">
+<g class="edgemarks" style="transform: translate({cx}px,{cy}px) {tile_transform}">
 	{#each visibleEdgeMarks as { x1, y1, x2, y2, state, direction } (direction)}
 		<line
 			transition:fade|local={{ duration: 100 }}

src/lib/puzzle/Puzzle.svelte

@@ -164,7 +164,8 @@
 				rotations: data.rotations,
 				locked: data.locked,
 				color: data.color,
-				edgeMarks: data.edgeMarks
+				edgeMarks: data.edgeMarks,
+				reflectEdgeMarks: data.reflectEdgeMarks
 			};
 		});
 		dispatch('progress', {

src/lib/puzzle/Tile.svelte

@@ -29,6 +29,7 @@
 	let path = game.grid.getPipesPath($state.tile, i);
 	const isSink = myDirections.length === 1;
 
+	const tile_transform = game.grid.getTileTransformCSS(i) || '';
 	/**
 	 * Choose tile background color
 	 * @param {Boolean} locked
@@ -41,6 +42,7 @@
 			bgColor = locked ? '#bbb' : '#ddd';
 		}
 	}
+
 	$: if ($state.hasDisconnects) {
 		strokeColor = $disconnectStrokeColor;
 		strokeWidth = game.grid.STROKE_WIDTH * $disconnectStrokeWidthScale;
@@ -51,16 +53,18 @@
 		strokeColor = '#888';
 		strokeWidth = game.grid.STROKE_WIDTH;
 	}
+	$: angle = game.grid.getAngle($state.rotations, i);
 	$: chooseBgColor($state.locked, $state.isPartOfLoop);
 	$: outlineWidth = 2 * strokeWidth + game.grid.PIPE_WIDTH;
 </script>
 
 <g class="tile" transform="translate({cx},{cy})">
 	<!-- Tile hexagon -->
-	<path d={game.grid.getTilePath(i)} stroke="#aaa" stroke-width="0.02" fill={bgColor} />
+	<path d={game.grid.getTilePath(i)} stroke="#aaa" stroke-width="0.02" fill={bgColor}
+	 style="transform: {tile_transform}"/>
 
 	<!-- Pipe shape -->
-	<g class="pipe" style="transform:rotate({game.grid.getAngle($state.rotations, i)}rad)">
+	<g class="pipe" style="transform: {tile_transform} rotate({game.grid.getAngle($state.rotations, i)}rad)">
 		<!-- Pipe outline -->
 		<path
 			d={path}
@@ -87,7 +91,7 @@
 			d={path}
 			stroke={$state.color}
 			stroke-width={pipeWidth}
-			stroke-linejoin="round"
+			stroke-linejoin={game.grid.lineJoin || 'round'}
 			stroke-linecap="round"
 		/>
 		{#if controlMode === 'orient_lock' && !$state.locked && !solved}

src/lib/puzzle/controls.js

@@ -265,11 +265,10 @@ export function controls(node, game) {
 			} else if (currentSettings.controlMode === 'orient_lock') {
 				if (leftButton) {
 					const { tileX, tileY } = mouseDownOrigin;
-					const angle = Math.atan2(tileY - y, x - tileX);
 					const timesRotate = game.grid.clickOrientTile(
 						tileState.data.tile,
 						tileState.data.rotations,
-						angle,
+						x - tileX, y - tileY,
 						tileIndex
 					);
 					game.rotateTile(tileIndex, timesRotate);

src/lib/puzzle/game.js

@@ -402,6 +402,12 @@ export function PipesGame(grid, tiles, savedProgress) {
 			tileState.data.edgeMarks[index] = mark;
 		}
 		tileState.set(tileState.data);
+		if (self.grid.EDGEMARK_REFLECTS) {
+			// force redraw of the neighbour because drawing of connection edgemarks
+			// is driven partly by neighbours' state
+			const neighbourState = self.tileStates[neighbour];
+			neighbourState.set(neighbourState.data);
+		}
 		if (tileState.data.edgeMarks[index] !== 'empty' && assistant) {
 			self.rotateToMatchMarks(tileIndex);
 			self.rotateToMatchMarks(neighbour);