From 094388934979a42887469e09496e8d0b891e20b8 Mon Sep 17 00:00:00 2001
From: Codinget <codinget@codi.moe>
Date: Wed, 25 Mar 2020 15:57:20 +0100
Subject: [PATCH] base game working

---
 Makefile               |  20 ++++----
 assets/levelList.json  |  30 ++++++++++++
 levels/level1.json     |  15 ++++++
 public/index.html      |   7 ++-
 public/levels          |   1 +
 src/js/assets.js       |   9 ++--
 src/js/main.js         | 101 +++++++++++++++++++++++++++++++++++++++++
 src/js/snek.js         |  80 ++++++++++++++++++++++++++------
 src/less/mainMenu.less |  16 +++++++
 src/less/snek.less     |  21 +++++++++
 10 files changed, 270 insertions(+), 30 deletions(-)
 create mode 100644 assets/levelList.json
 create mode 100644 levels/level1.json
 create mode 120000 public/levels
 create mode 100644 src/js/main.js
 create mode 100644 src/less/mainMenu.less
diff --git a/Makefile b/Makefile
index c620f97..901a3f9 100644
--- a/Makefile
+++ b/Makefile
@@ -5,38 +5,40 @@ APPLE = public/assets/apple32.png
 WALL = public/assets/wall32.png
 
 SNAKE = public/assets/snake.json
+LEVEL_LIST = public/assets/levelList.json
 
 CSS = public/css/snek.css
 
 JS = public/js/snek.js
 
-OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(CSS) $(JS)
+OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(LEVEL_LIST) $(CSS) $(JS)
 
-all: icon apple wall snake css js
+all: icon apple wall snake levelList css js
 icon: $(ICON) 
 apple: $(APPLE)
 wall: $(WALL)
 
 snake: $(SNAKE)
+levelList: $(LEVEL_LIST)
 
 css: $(CSS)
 
 js: $(JS)
 
-public/assets/icon32.png: assets/icon.jpg
-	convert $^ -resize 32x $@
-public/assets/icon256.png: assets/icon.jpg
-	convert $^ -resize 256x $@
 public/favicon.ico: assets/icon.jpg
 	convert $^ -resize 32x $@
 
-public/assets/apple32.png: assets/apple.png
+public/assets/%32.png: assets/%.png
 	convert $^ -resize 32x $@
+public/assets/%256.png: assets/%.png
+	convert $^ -resize 256x $@
 
-public/assets/wall32.png: assets/wall.png
+public/assets/%32.png: assets/%.jpg
 	convert $^ -resize 32x $@
+public/assets/%256.png: assets/%.jpg
+	convert $^ -resize 256x $@
 
-public/assets/snake.json: assets/snake.json
+public/assets/%.json: assets/%.json
 	cp $^ $@
 
 public/css/snek.css: src/less/snek.less $(wildcard src/less/*.less)
diff --git a/assets/levelList.json b/assets/levelList.json
new file mode 100644
index 0000000..6ac6f44
--- /dev/null
+++ b/assets/levelList.json
@@ -0,0 +1,30 @@
+{
+	"speedrun": {
+		"rules": {
+			"fruitRegrow": false,
+			"speedIncrease": false,
+			"worldWrap": false,
+			"winCondition": "fruit",
+			"scoreSystem": "time"
+		},
+		"levelFilename": "level<n>.json",
+		"levelDisplay": "Level <n>",
+		"levels": [
+			1, 2, 3, 4, 5
+		]
+	},
+	"arcade": {
+		"rules": {
+			"fruitRegrow": true,
+			"speedIncrease": true,
+			"worldWrap": true
+		},
+		"levelFilename": "arcade-<l>.json",
+		"levelDisplay": "<n>",
+		"levels": [
+			"Arcade",
+			"Timed",
+			"Survival"
+		]
+	}
+}
diff --git a/levels/level1.json b/levels/level1.json
new file mode 100644
index 0000000..6e468dd
--- /dev/null
+++ b/levels/level1.json
@@ -0,0 +1,15 @@
+{
+    "dimensions": [80, 40],
+    "delay": 200,
+    "walls": [
+        [5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35]
+    ],
+    "food": [
+        [10,10]
+    ],
+    "snake": [
+      [60,20],
+      [60,19],
+      [60,18]
+    ]
+}
diff --git a/public/index.html b/public/index.html
index 5beb735..ddd2742 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,9 @@
 		<link rel="favicon" href="favicon.ico">
 		<link rel="stylesheet" href="css/snek.css">
 		<script src="js/snek.js"></script>
-		<script>window.addEventListener('load', () => require('assets'));</script>
+		<script>
+			window.addEventListener('load', () => require('main'));
+		</script>
 	</head>
 	<body>
 		<header>
@@ -15,7 +17,8 @@
 			<h2>A simple Snake</h2>
 		</header>
 		<main>
-			<img src="assets/apple32.png">
+			<nav></nav>
+			<canvas class="hidden"></canvas>
 		</main>
 		<footer>
 			<img src="assets/icon32.png">
diff --git a/public/levels b/public/levels
new file mode 120000
index 0000000..13e1d9a
--- /dev/null
+++ b/public/levels
@@ -0,0 +1 @@
+../levels/
\ No newline at end of file
diff --git a/src/js/assets.js b/src/js/assets.js
index c575954..24cef2b 100644
--- a/src/js/assets.js
+++ b/src/js/assets.js
@@ -1,9 +1,10 @@
 const ProgressBar=require('progress');
 
 const assetSpecs=[
-	{ name: 'fruit', filename: 'apple32.png', type: 'image' },
-	{ name: 'wall',  filename: 'wall32.png',  type: 'image' },
-	{ name: 'snake', filename: 'snake.json',  type: 'json'  }
+	{ name: 'fruit',     filename: 'apple32.png',    type: 'image' },
+	{ name: 'wall',      filename: 'wall32.png',     type: 'image' },
+	{ name: 'snake',     filename: 'snake.json',     type: 'json'  },
+	{ name: 'levelList', filename: 'levelList.json', type: 'json'  }
 ];
 
 const cvs=document.createElement('canvas');
@@ -64,7 +65,7 @@ Promise
 
 const onReady=(fn) => {
 	if(ready) fn.bind(fn)();
-	else readyListeners.push(ready);
+	else readyListeners.push(fn);
 };
 
 const get=(name) => {
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..1e871bf
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,101 @@
+(async () => {
+	location.hash='';
+
+	const assets=require('assets');
+	await new Promise(ok => assets.onReady(ok));
+
+	const main=document.querySelector('main');
+	const nav=main.querySelector('nav');
+	const canvas=main.querySelector('canvas');
+
+	let currentGame=null;
+	let currentInputs={};
+
+	const resizeCanvas=() => {
+		if(document.fullscreenElement) {
+			canvas.width=screen.width;
+			canvas.height=screen.height;
+		} else {
+			canvas.width=main.clientWidth;
+			canvas.height=main.clientHeight;
+		}
+	};
+	resizeCanvas();
+	window.addEventListener('resize', resizeCanvas);
+
+	const levelList=assets.get('levelList');
+	Object.keys(levelList).forEach(category => {
+		const nav=document.querySelector('nav');
+		const section=nav.appendChild(document.createElement('section'));
+		const h1=section.appendChild(document.createElement('h1'));
+		h1.innerText=category[0].toUpperCase()+category.slice(1)+" Mode";
+		const ul=section.appendChild(document.createElement('ul'));
+		levelList[category].levels.forEach(level => {
+			level=''+level;
+			const cat=levelList[category];
+			const displayName=cat.levelDisplay
+				.replace(/<n>/g, level)
+				.replace(/<l>/g, level.toLowerCase());
+			const fileName=cat.levelFilename
+				.replace(/<n>/g, level)
+				.replace(/<l>/g, level.toLowerCase());
+			const li=ul.appendChild(document.createElement('li'));
+			const a=li.appendChild(document.createElement('a'));
+			a.href='#'+category+'/'+fileName;
+			a.innerText=displayName;
+		});
+	});
+
+	const handleGamepads=() => {
+		const gp=navigator.getGamepads()[0];
+		let inputs=currentInputs;
+		console.log(gp);
+		if(!gp || !gp.axes) return;
+		
+		const magnitude=Math.hypot(gp.axes[0], gp.axes[1]);
+		const angle=((Math.atan2(gp.axes[0], gp.axes[1])+2*Math.PI)%(2*Math.PI))/Math.PI;
+		if(magnitude>.5) {
+			if(angle>.25 && angle <.75) inputs.right=true;
+			else if(angle>.75 && angle<1.25) inputs.up=true;
+			else if(angle>1.25 && angle<1.75) inputs.left=true;
+			else inputs.down=true;
+		}
+	};
+
+	window.addEventListener('hashchange', async () => {
+		nav.classList.add('hidden');
+
+		const [_, category, filename]=location.hash.match(/([a-zA-Z0-9_-]+?)\/(.+)/);
+		const rules=levelList[category].rules || {};
+		const level=await (async () => {
+			const resp=await fetch('levels/'+filename);
+			return await resp.json();
+		})();
+		console.log(rules, level);
+
+		const SnekGame=require('snek');
+		const snek=new SnekGame(level, canvas, rules);
+		canvas.classList.remove('hidden');
+		snek.start();
+		snek.callback=() => {
+			if(navigator.getGamepads) handleGamepads();
+			snek.handleInputs(currentInputs);
+		};
+		currentGame=snek;
+	});
+
+	window.addEventListener('keydown', async e => {
+		if(e.key=='f' && !canvas.classList.contains('hidden')) {
+			if(document.fullscreenElement) await document.exitFullscreen();
+			else await canvas.requestFullscreen();
+			resizeCanvas();
+		}
+
+		let inputs=currentInputs;
+		if(e.key=='ArrowUp') inputs.up=true;
+		else if(e.key=='ArrowDown') inputs.down=true;
+		else if(e.key=='ArrowLeft') inputs.left=true;
+		else if(e.key=='ArrowRight') inputs.right=true;
+	});
+
+})();
diff --git a/src/js/snek.js b/src/js/snek.js
index b577f14..66b342a 100644
--- a/src/js/snek.js
+++ b/src/js/snek.js
@@ -5,11 +5,15 @@ const [EMPTY, FOOD, WALL, SNAKE]=Array(4).keys();
 const ifNaN=(v, r) => isNaN(v)?r:v;
 
 class SnekGame {
-	constructor(settings, canvas) {
+	constructor(settings, canvas, rules) {
 		// build the world
 		this.dimensions=[...settings.dimensions];
-		this.world=Array(settings.dimensions[0])
-			.forEach((_, i, a) => a[i]=Array(settings.dimensions[1]).fill(EMPTY));
+		this.world=Array(settings.dimensions[0]);
+		for(let i=0; i<settings.dimensions[0]; i++) {
+			this.world[i]=Array(settings.dimensions[1]);
+			this.world[i].fill(EMPTY);
+		}
+		console.log(this);
 		settings.walls.forEach(([x, y]) => this.world[x][y]=WALL);
 		settings.food.forEach(([x, y]) => this.world[x][y]=FOOD);
 		settings.snake.forEach(([x, y]) => this.world[x][y]=SNAKE);
@@ -20,8 +24,8 @@ class SnekGame {
 		// get the head and initial direction
 		this.head=[...settings.snake[0]];
 		this.direction=[
-			ifNaN(settings.snake[1][0]-settings.snake[0][0], 1),
-			ifNaN(settings.snake[1][1]-settings.snake[0][1], 0)
+			ifNaN(settings.snake[0][0]-settings.snake[1][0], 1),
+			ifNaN(settings.snake[0][1]-settings.snake[1][1], 0)
 		];
 
 		// get the snake and the fruits themselves
@@ -32,24 +36,40 @@ class SnekGame {
 		this.canvas=canvas;
 		this.ctx=canvas.getContext('2d');
 		//TODO this.gl=canvas.getContext('webgl');
+		
+		// load the custom rules
+		this.rules=Object.assign({
+			fruitRegrow: true,
+			speedIncrease: true,
+			worldWrap: true,
+			winCondition: 'none',
+			scoreSystem: 'fruit'
+		}, rules, settings);
 	}
 
 	draw() {
 		// clear the canvas, because it's easier than having to deal with everything
-		this.ctx.clearRect(0, 0, this.canvas.with, this.canvas.height);
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
 		// get the cell size and offset
 		const cellSize=Math.min(
-			this.canvas.with/this.dimensions[0],
+			this.canvas.width/this.dimensions[0],
 			this.canvas.height/this.dimensions[1]
 		);
 		const offsetX=(this.canvas.width-cellSize*this.dimensions[0])/2;
 		const offsetY=(this.canvas.height-cellSize*this.dimensions[1])/2;
 
+		// draw the border around our game area
+		this.ctx.fillStyle='black';
+		this.ctx.fillRect(0, 0, this.canvas.width, offsetY);
+		this.ctx.fillRect(0, 0, offsetX, this.canvas.height);
+		this.ctx.fillRect(offsetX+cellSize*this.dimensions[0], 0, offsetX, this.canvas.height);
+		this.ctx.fillRect(0, offsetY+cellSize*this.dimensions[1], this.canvas.width, offsetY);
+
 		// draw our walls
 		const wall=assets.get('wall');
 		for(let x=0; x<this.dimensions[0]; x++) {
-			for(let y=0; x<this.dimensions[1]; y++) {
+			for(let y=0; y<this.dimensions[1]; y++) {
 				switch(this.world[x][y]) {
 					case WALL:
 						this.ctx.drawImage(
@@ -95,7 +115,7 @@ class SnekGame {
 
 		// our fruit has a nice animation to it between .8 and 1.2 scale
 		const ms=Date.now();
-		const fruitScale=Math.sin(ms/1000*Math.PI)*.2+1
+		const fruitScale=Math.sin(ms/400*Math.PI)*.2+1
 		const fruit=assets.get('fruit');
 		this.fruits.forEach(([x, y]) => {
 			this.ctx.drawImage(
@@ -119,6 +139,16 @@ class SnekGame {
 		const tail=this.snake.pop();
 		this.world[tail[0]][tail[1]]=EMPTY;
 
+		// check for out of world conditions
+		if(head[0]<0 || head[0]>=this.dimensions[0] || head[1]<0 || head[1]>=this.dimensions[1]) {
+			if(this.rules.worldWrap) {
+				head[0]=(head[0]+this.dimensions[0])%this.dimensions[0];
+				head[1]=(head[1]+this.dimensions[1])%this.dimensions[1];
+			} else {
+				return this.die();
+			}
+		}
+
 		switch(this.world[head[0]][head[1]]) {
 			// you hit, you die
 			case WALL:
@@ -126,7 +156,7 @@ class SnekGame {
 				return this.die();
 
 			// you eat, you don't die
-			case FRUIT:
+			case FOOD:
 				// re-grow the snake
 				this.snake.push(tail);
 				this.world[tail[0]][tail[1]]=SNAKE;
@@ -141,7 +171,7 @@ class SnekGame {
 				);
 
 				// custom rules
-				if(this.rules.regrowFruits) {
+				if(this.rules.fruitRegrow) {
 					const emptyCells=this.world
 						.map(
 							(l, x) => l
@@ -153,7 +183,7 @@ class SnekGame {
 						).flat();
 					const cell=emptyCells[Math.floor(Math.random()*emptyCells.length)];
 					this.fruits.push(cell);
-					this.world[cell[0]][cell[1]]=FRUIT;
+					this.world[cell[0]][cell[1]]=FOOD;
 				}
 		}
 
@@ -166,12 +196,14 @@ class SnekGame {
 	}
 
 	tick() {
+		if(!this.playing) return;
 		if(!this.lastStep) this.lastStep=this.firstStep;
-		if(this.lastStep+delay<Date.now()) {
-			this.lastStep+=delay;
+		this.draw();
+		if(this.callback) this.callback();
+		if(this.lastStep+this.delay<Date.now()) {
+			this.lastStep+=this.delay;
 			this.step();
 		}
-		this.draw();
 		requestAnimationFrame(() => this.tick());
 	}
 
@@ -188,8 +220,26 @@ class SnekGame {
 		console.log("You bad lol");
 	}
 
+	handleInputs(inputs) {
+		const trySet=(dir) => {
+			if(!(this.direction[0]==-dir[0] && this.direction[1]==-dir[1])) this.direction=dir;
+		}
+		if(inputs.left) {
+			trySet([-1, 0]);
+		} else if(inputs.right) {
+			trySet([ 1, 0]);
+		} else if(inputs.up) {
+			trySet([ 0,-1]);
+		} else if(inputs.down) {
+			trySet([ 0, 1]);
+		}
+
+		Object.keys(inputs).forEach(k => delete inputs[k]);
+	}
+
 	start() {
 		this.firstStep=Date.now();
+		this.playing=true;
 		requestAnimationFrame(() => this.tick());
 	}
 }
diff --git a/src/less/mainMenu.less b/src/less/mainMenu.less
new file mode 100644
index 0000000..d7c33df
--- /dev/null
+++ b/src/less/mainMenu.less
@@ -0,0 +1,16 @@
+nav {
+	font-size: 1.6rem;
+	display: flex;
+
+	section {
+		flex: 1;
+	}
+
+	ul {
+		padding-left: 2rem;
+	}
+
+	li {
+		list-style-type: disc;
+	}
+}
diff --git a/src/less/snek.less b/src/less/snek.less
index 469f7ac..1208c04 100644
--- a/src/less/snek.less
+++ b/src/less/snek.less
@@ -28,6 +28,10 @@ h1, h2, h3, h4, h5, h6, strong, a {
 	font-weight: bold;
 }
 
+h1, h2, h3, h4, h5, h6 {
+	margin-bottom: .1em;
+}
+
 a {
 	text-decoration: inherit;
 }
@@ -68,6 +72,15 @@ header, footer, main {
 }
 main {
 	flex: 1;
+	position: relative;
+
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		background: @bg;
+	}
 }
 
 h1 {
@@ -80,5 +93,13 @@ p {
 	font-size: 1.6rem;
 }
 
+.hidden {
+	display: none !important;
+}
+
 // setup the progress bar
 @import 'progressBar';
+
+// setup the main menu
+@import 'mainMenu';
+
