diff --git a/' b/' deleted file mode 100644 index 0c2e97c..0000000 --- a/' +++ /dev/null @@ -1,268 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.env.dev b/.env.dev deleted file mode 100644 index 4828f1b..0000000 --- a/.env.dev +++ /dev/null @@ -1 +0,0 @@ -BACKENDURL=localhost:5000 \ No newline at end of file diff --git a/.env.prod b/.env.prod deleted file mode 100644 index ce383b2..0000000 --- a/.env.prod +++ /dev/null @@ -1 +0,0 @@ -BACKENDURL=quirinecker.pythonanywhere.com \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 98a0ae9..668c782 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,226 +11,228 @@ const lastScore: Ref = ref(undefined) const scores: Ref = ref([]) const username = ref('') const usernameDialogOpen = ref(false) -const backendUrl = import.meta.env.BACKENDURL ? import.meta.env.BACKENDURL : 'http://localhost:5000' +const backendUrl = import.meta.env.MODE === "production" + ? 'http://quirinecker.pythonanywhere.com' + : 'http://localhost:5000' 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 } interface Score { - username: String - score: number + username: String + score: 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 + } - 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(array: Array) { - 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 newCell = getCell(current.x + x, current.y + y); + const current = snake.value.cell + const newCell = getCell(current.x + x, current.y + y); - if (newCell === undefined || newCell.color === 'green') { - death() - return; - } + if (newCell === undefined || newCell.color === 'green') { + death() + 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 + 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 (currentLength > allowedLength) { + const toDelete = snake.value.history.shift() - if (toDelete !== undefined) { - toDelete.color = 'white' - } + if (toDelete !== undefined) { + toDelete.color = 'white' + } - } - } + } + } } function getCell(x: number, y: number) { - try { - return grid.value[x][y] - } catch { - return undefined - } + try { + return grid.value[x][y] + } catch { + return undefined + } } function death() { - killSnake() - killCoin() - currentCoin.value = spawnCoin() - snake.value = spawnSnake() - direction.value = undefined; - lastScore.value = score.value - score.value = 0 - clearInterval(currentInterval) - currentInterval = createInterval() - addScore(lastScore.value) + killSnake() + killCoin() + currentCoin.value = spawnCoin() + snake.value = spawnSnake() + direction.value = undefined; + lastScore.value = score.value + score.value = 0 + clearInterval(currentInterval) + currentInterval = createInterval() + addScore(lastScore.value) } function killSnake() { - snake.value.history - for (const cell of snake.value.history) { - cell.color = 'white' - } + snake.value.history + for (const cell of snake.value.history) { + cell.color = 'white' + } } function killCoin() { - const coinCell = grid.value[currentCoin.value.x][currentCoin.value.y] - coinCell.color = 'white' + const coinCell = grid.value[currentCoin.value.x][currentCoin.value.y] + coinCell.color = 'white' } const speed = computed(() => { - return 500 / (score.value + 1) + return 500 / (score.value + 1) }) let currentInterval = createInterval() function createInterval() { - return setInterval(() => { + return 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() - score.value++ + if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) { + snake.value.length++ + currentCoin.value = spawnCoin() + score.value++ - if (currentInterval) { - clearInterval(currentInterval) - currentInterval = createInterval() - } - } - }, speed.value); + if (currentInterval) { + clearInterval(currentInterval) + currentInterval = createInterval() + } + } + }, speed.value); } function keydown(event: KeyboardEvent) { - switch (event.key) { - case 'ArrowRight': direction.value = direction.value !== 'left' ? 'right' : 'left' - break - case 'ArrowLeft': direction.value = direction.value !== 'right' ? 'left' : 'right' - break - case 'ArrowUp': direction.value = direction.value !== 'bottom' ? 'top' : 'bottom' - break - case 'ArrowDown': direction.value = direction.value !== 'top' ? 'bottom' : 'top' - break - } + switch (event.key) { + case 'ArrowRight': direction.value = direction.value !== 'left' ? 'right' : 'left' + break + case 'ArrowLeft': direction.value = direction.value !== 'right' ? 'left' : 'right' + break + case 'ArrowUp': direction.value = direction.value !== 'bottom' ? 'top' : 'bottom' + break + case 'ArrowDown': direction.value = direction.value !== 'top' ? 'bottom' : 'top' + break + } } async function loadDashboard() { - const response = await fetch(`${backendUrl}/score`) - const data = await response.json() - scores.value = data - console.log('scors', data) + const response = await fetch(`${backendUrl}/score`) + const data = await response.json() + scores.value = data + console.log('scors', data) } async function addScore(scoreToAdd: number, force: boolean = false) { - if (username.value.trim() === '' && !force) { - if (scores.value.length === 0 || scoreToAdd > scores.value[Math.min(3, scores.value.length) - 1].score) { - usernameDialogOpen.value = true - } + if (username.value.trim() === '' && !force) { + if (scores.value.length === 0 || scoreToAdd > scores.value[Math.min(3, scores.value.length) - 1].score) { + usernameDialogOpen.value = true + } - return - } + return + } - const scoreObject: Score = { - username: username.value, - score: scoreToAdd - } + const scoreObject: Score = { + username: username.value, + score: scoreToAdd + } - await fetch(`${backendUrl}/score`, { - method: 'POST', - body: JSON.stringify(scoreObject), - headers: { - "Content-Type": "application/json" - } - }) + await fetch(`${backendUrl}/score`, { + method: 'POST', + body: JSON.stringify(scoreObject), + headers: { + "Content-Type": "application/json" + } + }) - scores.value = [] - await loadDashboard() + scores.value = [] + await loadDashboard() } onMounted(async () => { - await loadDashboard() + await loadDashboard() }) window.addEventListener('keydown', keydown) @@ -238,107 +240,106 @@ window.addEventListener('keydown', keydown) \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 05c1740..225cfff 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,11 @@ -import { defineConfig } from 'vite' +import { defineConfig, loadEnv } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vue()], -}) +export default defineConfig(({mode}) => { + Object.assign(process.env, loadEnv(mode, process.cwd())); + + return { + plugins: [vue()], + } +}) \ No newline at end of file