From 4ae67b1e0841edfdc33c2c7d2cc895482aa1b4c0 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Sun, 28 Jan 2024 11:47:51 +0100
Subject: [PATCH] fixed holes in snake

---
 src/App.vue | 199 +++++++++++++++++++++++++++-------------------------
 1 file changed, 102 insertions(+), 97 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f5293ee..45a554b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,70 +8,70 @@ const snake = ref(spawnSnake())
 const score = ref(0)
 
 interface Cell {
-    x: number
-    y: number
-    color: 'white' | 'yellow' | 'green'
+	x: number
+	y: number
+	color: 'white' | 'yellow' | 'green'
 }
 
 interface Snake {
-    cell: Cell
-    history: Cell[]
-    length: number
+	cell: Cell
+	history: Cell[]
+	length: number
 }
 
 function genGrid(length: number, height: number) {
-    const grid: Cell[][] = []
-    for (let i = 0; i < length; i++) {
-        const currentRow: Cell[] = []
-        for (let j = 0; j < height; j++) {
-            currentRow[j] = {
-                x: i,
-                y: j,
-                color: 'white'
-            }
-        }
-        grid[i] = currentRow
-    }
+	const grid: Cell[][] = []
+	for (let i = 0; i < length; i++) {
+		const currentRow: Cell[] = []
+		for (let j = 0; j < height; j++) {
+			currentRow[j] = {
+				x: i,
+				y: j,
+				color: 'white'
+			}
+		}
+		grid[i] = currentRow
+	}
 
 
-    console.log(grid)
+	console.log(grid)
 
-    return grid
+	return grid
 }
 
 
 function spawnCoin() {
-    const cell = randomCell()
-    cell.color = 'yellow'
-    return cell
+	const cell = randomCell()
+	cell.color = 'yellow'
+	return cell
 }
 
 function spawnSnake(): Snake {
-    const row = random(grid.value)
-    const cell = random(row)
+	const row = random(grid.value)
+	const cell = random(row)
 
-    cell.color = 'green'
-    return {
-        cell: cell,
-        history: [cell],
-        length: 3
-    }
+	cell.color = 'green'
+	return {
+		cell: cell,
+		history: [cell],
+		length: 3
+	}
 }
 
 function random<T>(array: Array<T>) {
-    return array[Math.floor(Math.random() * array.length)]
+	return array[Math.floor(Math.random() * array.length)]
 
 }
 
 function randomCell() {
-    const randomRow = random(grid.value)
-    const randomCell = random(randomRow)
+	const randomRow = random(grid.value)
+	const randomCell = random(randomRow)
 
-    return randomCell
+	return randomCell
 }
 
 function moveSnake(x: number, y: number) {
-    const current = snake.value.cell
+	const current = snake.value.cell
 	const newCell = getCell(current.x + x, current.y + y);
 
 	if (newCell === undefined || newCell.color === 'green') {
@@ -79,18 +79,23 @@ function moveSnake(x: number, y: number) {
 		return;
 	}
 
-    newCell.color = 'green'
-    snake.value.cell = newCell
-    snake.value.history.push(newCell)
+	newCell.color = 'green'
+	snake.value.cell = newCell
+	snake.value.history.push(newCell)
 
-    if (snake.value.history.length > length) {
-        const currentLength = snake.value.history.length
-        const allowedLength = snake.value.length
-        const toDelete = snake.value.history.slice(0, currentLength - allowedLength)
-        for (const cell of toDelete) {
-            cell.color = 'white'
-        }
-    }
+	if (snake.value.history.length > length) {
+		const currentLength = snake.value.history.length
+		const allowedLength = snake.value.length
+
+		if (currentLength > allowedLength) {
+			const toDelete = snake.value.history.shift()
+
+			if (toDelete !== undefined) {
+				toDelete.color = 'white'
+			}
+
+		}
+	}
 }
 
 
@@ -126,45 +131,45 @@ function killCoin() {
 
 setInterval(() => {
 
-    if (direction.value === undefined) {
-        return
-    }
+	if (direction.value === undefined) {
+		return
+	}
 
-    switch (direction.value) {
-        case 'left':
-            moveSnake(-1, 0)
-            break
-        case 'right':
-            moveSnake(1, 0)
-            break
-        case 'top':
-            moveSnake(0, -1)
-            break
-        case 'bottom':
-            moveSnake(0, 1)
-            break
-    }
+	switch (direction.value) {
+		case 'left':
+			moveSnake(-1, 0)
+			break
+		case 'right':
+			moveSnake(1, 0)
+			break
+		case 'top':
+			moveSnake(0, -1)
+			break
+		case 'bottom':
+			moveSnake(0, 1)
+			break
+	}
 
 
-    if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
-        snake.value.length++
-        currentCoin.value = spawnCoin()
+	if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
+		snake.value.length++
+		currentCoin.value = spawnCoin()
 		score.value++
-    }
+	}
 }, 500);
 
 
 function keydown(event: KeyboardEvent) {
-    switch (event.key) {
-        case 'ArrowRight': direction.value = 'right'
-            break
-        case 'ArrowLeft': direction.value = 'left'
-            break
-        case 'ArrowUp': direction.value = 'top'
-            break
-        case 'ArrowDown': direction.value = 'bottom'
-            break
-    }
+	switch (event.key) {
+		case 'ArrowRight': direction.value = 'right'
+			break
+		case 'ArrowLeft': direction.value = 'left'
+			break
+		case 'ArrowUp': direction.value = 'top'
+			break
+		case 'ArrowDown': direction.value = 'bottom'
+			break
+	}
 }
 
 window.addEventListener('keydown', keydown)
@@ -172,35 +177,35 @@ window.addEventListener('keydown', keydown)
 </script>
 
 <template>
-	<h1>Score {{  score  }}</h1>
-    <div class="grid" @keyup="keydown($event)">
-        <div class="row" v-for="row in grid">
-            <div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
-                :style="{ backgroundColor: cell.color }">
-            </div>
-        </div>
-    </div>
+	<h1>Score {{ score }}</h1>
+	<div class="grid" @keyup="keydown($event)">
+		<div class="row" v-for="row in grid">
+			<div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
+				:style="{ backgroundColor: cell.color }">
+			</div>
+		</div>
+	</div>
 </template>
 
 <style scoped>
 .grid {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid white;
 
 }
 
 .row {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
 }
 
 .cell {
-    height: 10px;
-    width: 10px;
-    overflow: hidden;
+	height: 10px;
+	width: 10px;
+	overflow: hidden;
 }
 </style>
\ No newline at end of file