From fc87372af81ae60747e7a5736a988a8b14c89049 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20K=C3=A1n=C4=9B?= <vojtech.kane@gmail.com>
Date: Fri, 18 Dec 2020 12:11:17 +0100
Subject: [PATCH] Initial commit

---
 snake.html | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 snake.html
diff --git a/snake.html b/snake.html
new file mode 100644
index 0000000..5abc304
--- /dev/null
+++ b/snake.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Pátek snake</title>
+		<style>
+			body {
+				margin: 0;
+			}
+
+			#game {
+				width: 100vmin;
+				height: 100vmin;
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 auto;
+			}
+
+			.tile {
+				width: calc(100vmin/10);
+				height: calc(100vmin/10);
+				border: 1px solid black;
+				box-sizing: border-box;
+			}
+
+			.tile.body {
+				background-color: green;
+			}
+
+			.tile.head {
+				background-color: red;
+			}
+
+			.tile.fruit {
+				background-color: gold;
+			}
+		</style>
+
+		<script>
+			document.addEventListener("DOMContentLoaded", () => {
+				const game = document.getElementById("game");
+				const tileTemplate = document.getElementById("tile-template");
+				for (let x = 0; x < 10; x++) {
+					for (let y = 0; y < 10; y++) {
+						const tile = tileTemplate.content.cloneNode(true);
+						tile.querySelector(".tile").classList.add(y + "-" + x);
+						game.appendChild(tile);
+					}
+				}
+				document.dispatchEvent(new Event("gameReady"));
+			});
+		</script>
+
+		<script>
+			document.addEventListener("gameReady", () => {
+				let snake = [{x: 0, y: 0}];
+				let fruit = null;
+
+				document.addEventListener("keydown", (e) => {
+					if (e.key === "ArrowLeft") {
+						leftPressed();
+					} else if (e.key === "ArrowRight") {
+						rightPressed();
+					} else if (e.key === "ArrowUp") {
+						upPressed();
+					} else if (e.key === "ArrowDown") {
+						downPressed();
+					}
+				});
+
+				window.setInterval(() => {
+					gameUpdate();
+
+					for (const tile of document.querySelectorAll(".body, .head, .fruit")) {
+						tile.classList.remove("body", "head", "fruit");
+					}
+
+					for (let i = 1; i < snake.length; i++) {
+						const tile = snake[i];
+						document.getElementsByClassName(tile.x + "-" + tile.y)[0].classList.add("body");
+					}
+
+					document.getElementsByClassName(snake[0].x + "-" + snake[0].y)[0].classList.add("head");
+					if (fruit !== null) {
+						document.getElementsByClassName(fruit.x + "-" + fruit.y)[0].classList.add("fruit");
+					}
+				}, 1000);
+
+				// this is where your implementation starts
+
+				function gameUpdate() {
+				}
+
+				function leftPressed() {
+				}
+
+				function rightPressed() {
+				}
+
+				function upPressed() {
+				}
+
+				function downPressed() {
+				}
+			});
+		</script>
+	</head>
+	<body>
+		<template id="tile-template">
+			<div class="tile"></div>
+		</template>
+		<div id="game">
+		</div>
+	</body>
+</html>
