Commit things (#15)

Make it easier for people to get started by committing a lot of files

README.md

@@ -60,17 +60,12 @@ You need at least node v16.
 
 ## Initial Setup
 
-The initial setup is unfortunately a bit tricky, since first some images and files need to be generated and for them to be generated the app needs to be running. I could commit the images, but that's also not that elegant.
-
-I've encoded this in `setup.sh` you can run it like so:
-
 ```
-./setup.sh
+npm ci
+npm start
 ```
 
-The app is backgrounded and expected to run at port 5173, so make sure not to have another svelte app running before starting the setup. And make sure you know how to kill apps running on certain ports, because it's backgrounded.
-
-Feel free to check out the code before running it!
+Note: I chose to commit a lot of generated files, so the project can be started this easily. I thought an easy setup was more valuable than being too purist on the "don't commit generated files" dogma.
 
 ### Syncing chagnes from web to mobile
 

generators/puzzle-convert.ts

@@ -26,8 +26,8 @@ async function convertFile(
 		writeSvelteFile(filename, numCols, numRows);
 
 		if (filename === 'racoon') {
-			await writeIconFile(filename, numCols, numRows, true); // generate icon for root page
-			await writeIcon(filename, true);
+			await writeIconFile(filename, numCols, numRows); // generate icon for root page
+			await writeIcon(filename);
 		}
 
 		await writeIconFile(filename, numCols, numRows); // generate icon for /puzzle
@@ -116,6 +116,7 @@ function writeSvelteFile(filename: string, numCols: number, numRows: number) {
 
 function getIconComponent(filename: string, numCols: number, numRows: number) {
 	return `<script lang="ts">
+	// THIS FILE IS GENERATED
 	import PuzzleIcon from '../../PuzzleIcon.svelte';
 
 	const imageSrcRoot = '/assets/puzzle/${filename}';
@@ -130,6 +131,7 @@ function getIconComponent(filename: string, numCols: number, numRows: number) {
 
 function getSvelteComponent(filename: string, numCols: number, numRows: number) {
 	return `<script lang="ts">
+	// THIS FILE IS GENERATED
 	import PuzzleGame from '../PuzzleGame.svelte';
 
 	const imageSrcRoot = '/assets/puzzle/${filename}';
@@ -142,8 +144,8 @@ function getSvelteComponent(filename: string, numCols: number, numRows: number)
 }
 
 function generateItemsForOverviewPage(files: string[]) {
-	return `
-  export const PUZZLE_PAGES = [
+	return `// THIS FILE IS GENERATED
+export const PUZZLE_PAGES = [
     ${files.map((file) => {
 			const filenameWithoutExtension = file.split('.jpg')[0];
 			return `{

src/routes/puzzle/01-orangutan/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/01-orangutan';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/01-orangutan/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/01-orangutan';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/02-bee/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/02-bee';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/02-bee/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/02-bee';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/03-hedgehog/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/03-hedgehog';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/03-hedgehog/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/03-hedgehog';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/04-fox/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/04-fox';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/04-fox/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/04-fox';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/05-bear/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/05-bear';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/05-bear/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/05-bear';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/06-crocodile/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/06-crocodile';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/06-crocodile/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/06-crocodile';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/07-hippo/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/07-hippo';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/07-hippo/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/07-hippo';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/08-lion/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/08-lion';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/08-lion/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/08-lion';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/09-bulldog/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/09-bulldog';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/09-bulldog/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/09-bulldog';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/10-shark/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/10-shark';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/10-shark/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/10-shark';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/11-zebra/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/11-zebra';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/11-zebra/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/11-zebra';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/12-panda/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/12-panda';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/12-panda/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/12-panda';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/13-lama/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/13-lama';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/13-lama/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/13-lama';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+

src/routes/puzzle/14-windwheel/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleGame from '../PuzzleGame.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/14-windwheel';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleGame {imageSrcRoot} {numRows} {numCols} />

src/routes/puzzle/14-windwheel/icon/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	// THIS FILE IS GENERATED
+	import PuzzleIcon from '../../PuzzleIcon.svelte';
+
+	const imageSrcRoot = '/assets/puzzle/14-windwheel';
+	const numCols = 2;
+	const numRows = 2;
+</script>
+
+<PuzzleIcon {imageSrcRoot} {numRows} {numCols} />
+