almost done

src/components/Crokinole.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from "svelte";
+	import { tick, onMount } from "svelte";
 	import C from "$utils/crokinole.js";
 	import * as S from "$data/specs.js";
 	import Slider from "$components/Crokinole.Slider.svelte";
@@ -19,6 +19,9 @@
 		fifteen: "15",
 		twenty: "20"
 	};
+
+	const powerDefault = 0.25;
+
 	const rangeDefault = {
 		position: {
 			value: [0.5],
@@ -42,7 +45,7 @@
 
 	let turn = 0;
 	let rangeValue = rangeDefault.position.value;
-	let power = 0.5;
+	let power = 0.25;
 	let phase = "position";
 	let degrees;
 	let disabled;
@@ -54,27 +57,24 @@
 	// just for dev
 	function onClick(event) {
 		if (!dev) return;
-		const x = event.offsetX;
-		const y = event.offsetY;
+		x = event.offsetX / width;
+		y = event.offsetY / width;
 
 		// crokinole.select({ x, y });
 	}
 
 	function onShotComplete({ scores, valid }) {
-		console.log({ scores, valid });
-
-		disabled = false;
+		power = powerDefault;
+		// console.log(scores, valid);
 
-		if (tutorial) {
-			crokinole.removeDiscs();
-			phase = "position";
+		if (tutorial && !replay) updateTutorial();
 
-			if (replay) replayDisabled = false;
-		}
+		disabled = false;
+		replayDisabled = false;
 	}
 
 	function onRelease() {
-		crokinole.flickDisc({ degrees, power });
+		crokinole.flickDisc();
 	}
 
 	function updateRange() {
@@ -83,47 +83,66 @@
 			degrees = Math.round(rangeValue[0]);
 			crokinole.aimDisc({
 				degrees,
-				power: 0.5,
+				power: 0.25,
 				visible: tutorial.includes("try")
 			});
 		}
 	}
 
 	function updatePower() {
-		crokinole.aimDisc({ degrees, power });
+		crokinole.aimDisc({ degrees, power, visible: tutorial.includes("try") });
 	}
 
 	function onPhaseClick() {
 		if (phase === "position") {
 			phase = "shoot";
 			rangeValue = rangeDefault.shoot.value;
+			power = powerDefault;
 			crokinole.setState("shoot");
 		}
 	}
 
 	function onReplay() {
 		crokinole.removeDiscs();
-		updateTutorial();
+		updateTutorial(tutorial, 1);
 	}
 
-	function updateTutorial() {
+	async function updateTutorial(_, timeout = 2000) {
 		clearTimeout(autoplayTimeout);
 		crokinole.removeDiscs();
 		replay = !tutorial.includes("try");
 		replayDisabled = true;
 		uiVisible = !["regions", "score"].includes(tutorial);
 
-		if (scenarios[tutorial]) {
-			scenarios[tutorial].forEach(crokinole.addDisc);
-			phase = scenarios[tutorial][scenarios[tutorial].length - 1].state;
+		const s = scenarios[tutorial];
+		if (s) {
+			s.forEach(crokinole.addDisc);
+			phase = s[s.length - 1].state;
 		}
 
-		if (replay) {
+		if (phase === "shoot" && !replay) crokinole.setIndicatorVisible(true);
+
+		if (replay && s) {
+			const shooter = s[s.length - 1];
+			// const d = isYou ? Math.random() * 3 + -1.5 : 184;
+			// const p = isYou ? Math.random() * 0.07 + 0.23 : 0.3;
+			const rd = shooter.random ? Math.random() * 3 - 1.5 : 0;
+			const d = shooter.degrees + rd;
+			const rp = shooter.random ? Math.random() * 0.07 - 0.035 : 0;
+			const p = shooter.power + rp;
+			console.log({ d, p });
+
 			autoplayTimeout = setTimeout(() => {
-				crokinole.aimDisc({ degrees: 0.5, power: 0.25 });
+				crokinole.aimDisc({
+					degrees: d,
+					power: p
+				});
 				crokinole.flickDisc();
-			}, 1000);
+			}, timeout);
 		}
+
+		await tick();
+		rangeValue = rangeDefault[phase].value;
 	}
 
 	$: buttonText = phase === "position" ? "Place Disc" : "";
@@ -235,6 +254,7 @@
 		--color-rim: var(--color-gray-400);
 		--color-peg: var(--color-gray-600);
 		--outline-width: 2px;
+		user-select: none;
 	}
 
 	.bg {
@@ -326,6 +346,7 @@
 		opacity: 0;
 		pointer-events: none;
 		transition: opacity 0.2s;
+		user-select: none;
 	}
 
 	.ui.visible {
@@ -392,10 +413,6 @@
 		border-color: var(--color-purple-aaa);
 	}
 
-	.tutorial-opponent .fifteen {
-		border-color: var(--color-purple-aaa);
-	}
-
 	.tutorial span {
 		color: var(--color-fg-light);
 	}

src/components/Rules.svelte

@@ -42,10 +42,6 @@
 </div>
 
 <style>
-	.rules {
-		padding-top: 16px;
-	}
-
 	figure {
 		--width: calc(min(100svw, 100svh) * 0.66);
 		width: var(--width);
@@ -54,6 +50,8 @@
 
 	.stepper {
 		display: flex;
+		padding-top: 32px;
+		padding-bottom: 16px;
 	}
 
 	button {

src/data/scenarios.json

@@ -1,8 +1,56 @@
 {
-	"open": [{ "state": "shoot" }],
-	"opentry": [{ "state": "shoot" }],
+	"open": [
+		{
+			"state": "shoot",
+			"player": "player1",
+			"random": true,
+			"power": 0.23,
+			"degrees": 0
+		}
+	],
+	"opentry": [{ "state": "shoot", "player": "player1" }],
+	"fifteen": [
+		{ "state": "shoot", "player": "player2", "power": 0.3, "degrees": 184 }
+	],
+
 	"opponent": [
-		{ "x": 0.34, "y": 0.62, "player": "player2" },
-		{ "state": "position" }
+		{
+			"x": 0.5304521798504799,
+			"y": 0.5607950399638847,
+			"player": "player2"
+		},
+		{
+			"x": 0.43462246777163904,
+			"y": 0.8876611418047882,
+
+			"state": "shoot",
+			"player": "player1",
+			"power": 0.45,
+			"degrees": 15
+		}
+	],
+	"opponenttry": [
+		{
+			"x": 0.5304521798504799,
+			"y": 0.5607950399638847,
+			"player": "player2"
+		},
+		{
+			"state": "position",
+			"player": "player1"
+		}
+	],
+	"invalid": [
+		{
+			"x": 0.5304521798504799,
+			"y": 0.5607950399638847,
+			"player": "player2"
+		},
+		{
+			"state": "shoot",
+			"player": "player1",
+			"power": 0.15,
+			"degrees": -3
+		}
 	]
 }

src/utils/crokinole.js

@@ -517,11 +517,13 @@ export default function createCrokinoleSimulation() {
 				.some((d) => d.intersect15);
 			discs.forEach((d) => {
 				// opponent on board
-				if (hasOpps.length) {
+				if (hasOpps) {
 					// same as shooter
-					if (d.player === activeDisc.player) {
+					const samePlayer = d.player === activeDisc.player;
+					if (samePlayer) {
 						// if shooter
-						if (d.id === activeDisc.id) {
+						const isShooter = d.id === activeDisc.id;
+						if (isShooter) {
 							d.valid = collidedOpp;
 						} else {
 							// if non-shooter (if it collided, one disc must have opp collided)
@@ -568,8 +570,12 @@ export default function createCrokinoleSimulation() {
 				d.in20 = undefined;
 			});
 
-			emitter.emit("shotComplete", { scores, valid });
 			setState("idle");
+			// console.log(
+			// 	discs[0].position.x / (mid * 2),
+			// 	discs[0].position.y / (mid * 2)
+			// );
+			emitter.emit("shotComplete", { scores, valid });
 		}
 		// TODO fire event that says shot all done and provide disc status
 		// discs.map(d => d)
@@ -641,7 +647,8 @@ export default function createCrokinoleSimulation() {
 				frictionAir,
 				render: {
 					fillStyle: COLOR[player],
-					strokeStyle: COLOR.active
+					strokeStyle: "#fff",
+					lineWidth: 1
 				},
 				label: "disc",
 				collisionFilter: {
@@ -731,7 +738,7 @@ export default function createCrokinoleSimulation() {
 	}
 
 	function aimDisc({ degrees, power, visible }) {
-		if (!activeDisc || !["aim", "shoot"].includes(state)) return;
+		if (!activeDisc || state !== "shoot") return;
 
 		const v = visible === undefined ? true : visible;
 		setIndicatorVisible(v);