fixed production backend url
This commit is contained in:
268
'
268
'
@@ -1,268 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Ref, computed, onMounted, ref } from 'vue';
|
||||
|
||||
const grid = ref(genGrid(30, 30))
|
||||
const currentCoin = ref(spawnCoin())
|
||||
const direction: Ref<'left' | 'right' | 'top' | 'bottom' | undefined> = ref(undefined)
|
||||
const snake = ref(spawnSnake())
|
||||
const score = ref(0)
|
||||
const lastScore: Ref<undefined | number> = ref(undefined)
|
||||
const scores: Ref<Score[]> = ref([])
|
||||
const backendUrl = import.meta.env.BACKENDURL ? import.meta.env.BACKENDURL : 'http://localhost:5000'
|
||||
|
||||
interface Cell {
|
||||
x: number
|
||||
y: number
|
||||
color: 'white' | 'yellow' | 'green'
|
||||
}
|
||||
|
||||
interface Snake {
|
||||
cell: Cell
|
||||
history: Cell[]
|
||||
length: number
|
||||
}
|
||||
|
||||
interface Score {
|
||||
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
|
||||
}
|
||||
|
||||
return grid
|
||||
}
|
||||
|
||||
|
||||
function spawnCoin() {
|
||||
const cell = randomCell()
|
||||
cell.color = 'yellow'
|
||||
return cell
|
||||
}
|
||||
|
||||
function spawnSnake(): Snake {
|
||||
const row = random(grid.value)
|
||||
const cell = random(row)
|
||||
|
||||
cell.color = 'green'
|
||||
return {
|
||||
cell: cell,
|
||||
history: [cell],
|
||||
length: 3
|
||||
}
|
||||
}
|
||||
|
||||
function random<T>(array: Array<T>) {
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
|
||||
}
|
||||
|
||||
function randomCell() {
|
||||
const randomRow = random(grid.value)
|
||||
const randomCell = random(randomRow)
|
||||
|
||||
return randomCell
|
||||
}
|
||||
|
||||
function moveSnake(x: number, y: number) {
|
||||
const current = snake.value.cell
|
||||
const newCell = getCell(current.x + x, current.y + y);
|
||||
|
||||
if (newCell === undefined || newCell.color === 'green') {
|
||||
death()
|
||||
return;
|
||||
}
|
||||
|
||||
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 (currentLength > allowedLength) {
|
||||
const toDelete = snake.value.history.shift()
|
||||
|
||||
if (toDelete !== undefined) {
|
||||
toDelete.color = 'white'
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getCell(x: number, y: number) {
|
||||
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()
|
||||
}
|
||||
|
||||
function killSnake() {
|
||||
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 speed = computed(() => {
|
||||
return 500 / (score.value + 1)
|
||||
})
|
||||
|
||||
let currentInterval = createInterval()
|
||||
|
||||
function createInterval() {
|
||||
return setInterval(() => {
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
|
||||
snake.value.length + 10
|
||||
currentCoin.value = spawnCoin()
|
||||
score.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
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
const response = await fetch(`${backendUrl}/score`)
|
||||
const data = await response.json()
|
||||
scores.value = data
|
||||
console.log('scors', data)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadDashboard()
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', keydown)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Score {{ score }}</h1>
|
||||
<h2 v-if="lastScore">Last Score {{ lastScore }}</h2>
|
||||
|
||||
<main>
|
||||
<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>
|
||||
<ul class="scoreboard">
|
||||
<li v-for="score in scores">
|
||||
{{ score.username }} : {{ score.score }}
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cell {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.scoreboard {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
|
||||
}
|
||||
</style>
|
||||
423
src/App.vue
423
src/App.vue
@@ -11,226 +11,228 @@ const lastScore: Ref<undefined | number> = ref(undefined)
|
||||
const scores: Ref<Score[]> = 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<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 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)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Score {{ score }}</h1>
|
||||
<h2 v-if="lastScore" class="p-2">Last Score {{ lastScore }}</h2>
|
||||
<h1>Score {{ score }}</h1>
|
||||
<h2 v-if="lastScore" class="p-2">Last Score {{ lastScore }}</h2>
|
||||
|
||||
<main>
|
||||
<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>
|
||||
<div class="scoreboard">
|
||||
<input type="text" placeholder="username" v-model="username">
|
||||
<main>
|
||||
<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>
|
||||
<div class="scoreboard">
|
||||
<input type="text" placeholder="username" v-model="username">
|
||||
|
||||
<ul class="scoreboard-list">
|
||||
<li v-for="score in scores">
|
||||
<span class="scoreboard-username">{{ score.username }}</span> {{ score.score }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<ul class="scoreboard-list">
|
||||
<li v-for="score in scores">
|
||||
<span class="scoreboard-username">{{ score.username }}</span> {{ score.score }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Dialog v-model="usernameDialogOpen">
|
||||
<h3>Nice Score. Do you want to share it!</h3>
|
||||
<input type="text" v-model="username" placeholder="username" class="mt-5 !w-32">
|
||||
<nav class="flex flex-row justify-center gap-10 m-10">
|
||||
<button @click="usernameDialogOpen = false">no</button>
|
||||
<button @click="() => {
|
||||
console.log(lastScore)
|
||||
if (lastScore !== undefined) {
|
||||
addScore(lastScore, true)
|
||||
usernameDialogOpen = false;
|
||||
}
|
||||
}">save</button>
|
||||
</nav>
|
||||
</Dialog>
|
||||
<Dialog v-model="usernameDialogOpen">
|
||||
<h3>Nice Score. Do you want to share it!</h3>
|
||||
<input type="text" v-model="username" placeholder="username" class="mt-5 !w-32">
|
||||
<nav class="flex flex-row justify-center gap-10 m-10">
|
||||
<button @click="usernameDialogOpen = false">no</button>
|
||||
<button @click="() => {
|
||||
console.log(lastScore)
|
||||
if (lastScore !== undefined) {
|
||||
addScore(lastScore, true)
|
||||
usernameDialogOpen = false;
|
||||
}
|
||||
}">save</button>
|
||||
</nav>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.scoreboard {
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
.scoreboard-list {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scoreboard li {
|
||||
all: unset;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
all: unset;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scoreboard-username {
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -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()],
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user