Vite App

From f8c006414aec99c90558587dbe08cf1705ed44f7 Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Wed, 16 Mar 2022 22:34:43 +0100 Subject: Initial commit w/ v0.0.1 --- .gitignore | 24 +++++ favicon.svg | 15 +++ index.html | 18 ++++ package.json | 14 +++ pnpm-lock.yaml | 324 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/Ball.ts | 27 +++++ src/consts.ts | 6 ++ src/main.ts | 12 +++ src/style.css | 23 ++++ src/ui.ts | 62 +++++++++++ src/utils.ts | 9 ++ start | 3 + tsconfig.json | 18 ++++ 13 files changed, 555 insertions(+) create mode 100644 .gitignore create mode 100644 favicon.svg create mode 100644 index.html create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 src/Ball.ts create mode 100644 src/consts.ts create mode 100644 src/main.ts create mode 100644 src/style.css create mode 100644 src/ui.ts create mode 100644 src/utils.ts create mode 100755 start create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..de4aedd --- /dev/null +++ b/favicon.svg @@ -0,0 +1,15 @@ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..b70056b --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + Vite App + + + + +

+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..3fad234 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "boules", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "devDependencies": { + "typescript": "^4.5.4", + "vite": "^2.8.0" + } +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..db6a5ec --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,324 @@ +lockfileVersion: 5.3 + +specifiers: + typescript: ^4.5.4 + vite: ^2.8.0 + +devDependencies: + typescript: 4.6.2 + vite: 2.8.6 + +packages: + + /esbuild-android-64/0.14.27: + resolution: {integrity: sha512-LuEd4uPuj/16Y8j6kqy3Z2E9vNY9logfq8Tq+oTE2PZVuNs3M1kj5Qd4O95ee66yDGb3isaOCV7sOLDwtMfGaQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /esbuild-android-arm64/0.14.27: + resolution: {integrity: sha512-E8Ktwwa6vX8q7QeJmg8yepBYXaee50OdQS3BFtEHKrzbV45H4foMOeEE7uqdjGQZFBap5VAqo7pvjlyA92wznQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /esbuild-darwin-64/0.14.27: + resolution: {integrity: sha512-czw/kXl/1ZdenPWfw9jDc5iuIYxqUxgQ/Q+hRd4/3udyGGVI31r29LCViN2bAJgGvQkqyLGVcG03PJPEXQ5i2g==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /esbuild-darwin-arm64/0.14.27: + resolution: {integrity: sha512-BEsv2U2U4o672oV8+xpXNxN9bgqRCtddQC6WBh4YhXKDcSZcdNh7+6nS+DM2vu7qWIWNA4JbRG24LUUYXysimQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /esbuild-freebsd-64/0.14.27: + resolution: {integrity: sha512-7FeiFPGBo+ga+kOkDxtPmdPZdayrSzsV9pmfHxcyLKxu+3oTcajeZlOO1y9HW+t5aFZPiv7czOHM4KNd0tNwCA==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /esbuild-freebsd-arm64/0.14.27: + resolution: {integrity: sha512-8CK3++foRZJluOWXpllG5zwAVlxtv36NpHfsbWS7TYlD8S+QruXltKlXToc/5ZNzBK++l6rvRKELu/puCLc7jA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-32/0.14.27: + resolution: {integrity: sha512-qhNYIcT+EsYSBClZ5QhLzFzV5iVsP1YsITqblSaztr3+ZJUI+GoK8aXHyzKd7/CKKuK93cxEMJPpfi1dfsOfdw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-64/0.14.27: + resolution: {integrity: sha512-ESjck9+EsHoTaKWlFKJpPZRN26uiav5gkI16RuI8WBxUdLrrAlYuYSndxxKgEn1csd968BX/8yQZATYf/9+/qg==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-arm/0.14.27: + resolution: {integrity: sha512-JnnmgUBdqLQO9hoNZQqNHFWlNpSX82vzB3rYuCJMhtkuaWQEmQz6Lec1UIxJdC38ifEghNTBsF9bbe8dFilnCw==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-arm64/0.14.27: + resolution: {integrity: sha512-no6Mi17eV2tHlJnqBHRLekpZ2/VYx+NfGxKcBE/2xOMYwctsanCaXxw4zapvNrGE9X38vefVXLz6YCF8b1EHiQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-mips64le/0.14.27: + resolution: {integrity: sha512-NolWP2uOvIJpbwpsDbwfeExZOY1bZNlWE/kVfkzLMsSgqeVcl5YMen/cedRe9mKnpfLli+i0uSp7N+fkKNU27A==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-ppc64le/0.14.27: + resolution: {integrity: sha512-/7dTjDvXMdRKmsSxKXeWyonuGgblnYDn0MI1xDC7J1VQXny8k1qgNp6VmrlsawwnsymSUUiThhkJsI+rx0taNA==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-riscv64/0.14.27: + resolution: {integrity: sha512-D+aFiUzOJG13RhrSmZgrcFaF4UUHpqj7XSKrIiCXIj1dkIkFqdrmqMSOtSs78dOtObWiOrFCDDzB24UyeEiNGg==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-linux-s390x/0.14.27: + resolution: {integrity: sha512-CD/D4tj0U4UQjELkdNlZhQ8nDHU5rBn6NGp47Hiz0Y7/akAY5i0oGadhEIg0WCY/HYVXFb3CsSPPwaKcTOW3bg==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /esbuild-netbsd-64/0.14.27: + resolution: {integrity: sha512-h3mAld69SrO1VoaMpYl3a5FNdGRE/Nqc+E8VtHOag4tyBwhCQXxtvDDOAKOUQexBGca0IuR6UayQ4ntSX5ij1Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + + /esbuild-openbsd-64/0.14.27: + resolution: {integrity: sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + + /esbuild-sunos-64/0.14.27: + resolution: {integrity: sha512-/nBVpWIDjYiyMhuqIqbXXsxBc58cBVH9uztAOIfWShStxq9BNBik92oPQPJ57nzWXRNKQUEFWr4Q98utDWz7jg==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + + /esbuild-windows-32/0.14.27: + resolution: {integrity: sha512-Q9/zEjhZJ4trtWhFWIZvS/7RUzzi8rvkoaS9oiizkHTTKd8UxFwn/Mm2OywsAfYymgUYm8+y2b+BKTNEFxUekw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /esbuild-windows-64/0.14.27: + resolution: {integrity: sha512-b3y3vTSl5aEhWHK66ngtiS/c6byLf6y/ZBvODH1YkBM+MGtVL6jN38FdHUsZasCz9gFwYs/lJMVY9u7GL6wfYg==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /esbuild-windows-arm64/0.14.27: + resolution: {integrity: sha512-I/reTxr6TFMcR5qbIkwRGvldMIaiBu2+MP0LlD7sOlNXrfqIl9uNjsuxFPGEG4IRomjfQ5q8WT+xlF/ySVkqKg==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /esbuild/0.14.27: + resolution: {integrity: sha512-MZQt5SywZS3hA9fXnMhR22dv0oPGh6QtjJRIYbgL1AeqAoQZE+Qn5ppGYQAoHv/vq827flj4tIJ79Mrdiwk46Q==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + esbuild-android-64: 0.14.27 + esbuild-android-arm64: 0.14.27 + esbuild-darwin-64: 0.14.27 + esbuild-darwin-arm64: 0.14.27 + esbuild-freebsd-64: 0.14.27 + esbuild-freebsd-arm64: 0.14.27 + esbuild-linux-32: 0.14.27 + esbuild-linux-64: 0.14.27 + esbuild-linux-arm: 0.14.27 + esbuild-linux-arm64: 0.14.27 + esbuild-linux-mips64le: 0.14.27 + esbuild-linux-ppc64le: 0.14.27 + esbuild-linux-riscv64: 0.14.27 + esbuild-linux-s390x: 0.14.27 + esbuild-netbsd-64: 0.14.27 + esbuild-openbsd-64: 0.14.27 + esbuild-sunos-64: 0.14.27 + esbuild-windows-32: 0.14.27 + esbuild-windows-64: 0.14.27 + esbuild-windows-arm64: 0.14.27 + dev: true + + /fsevents/2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /function-bind/1.1.1: + resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} + dev: true + + /has/1.0.3: + resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==} + engines: {node: '>= 0.4.0'} + dependencies: + function-bind: 1.1.1 + dev: true + + /is-core-module/2.8.1: + resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==} + dependencies: + has: 1.0.3 + dev: true + + /nanoid/3.3.1: + resolution: {integrity: sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + dev: true + + /path-parse/1.0.7: + resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + dev: true + + /picocolors/1.0.0: + resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + dev: true + + /postcss/8.4.12: + resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.1 + picocolors: 1.0.0 + source-map-js: 1.0.2 + dev: true + + /resolve/1.22.0: + resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==} + hasBin: true + dependencies: + is-core-module: 2.8.1 + path-parse: 1.0.7 + supports-preserve-symlinks-flag: 1.0.0 + dev: true + + /rollup/2.70.1: + resolution: {integrity: sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==} + engines: {node: '>=10.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: true + + /source-map-js/1.0.2: + resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + engines: {node: '>=0.10.0'} + dev: true + + /supports-preserve-symlinks-flag/1.0.0: + resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} + engines: {node: '>= 0.4'} + dev: true + + /typescript/4.6.2: + resolution: {integrity: sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==} + engines: {node: '>=4.2.0'} + hasBin: true + dev: true + + /vite/2.8.6: + resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==} + engines: {node: '>=12.2.0'} + hasBin: true + peerDependencies: + less: '*' + sass: '*' + stylus: '*' + peerDependenciesMeta: + less: + optional: true + sass: + optional: true + stylus: + optional: true + dependencies: + esbuild: 0.14.27 + postcss: 8.4.12 + resolve: 1.22.0 + rollup: 2.70.1 + optionalDependencies: + fsevents: 2.3.2 + dev: true diff --git a/src/Ball.ts b/src/Ball.ts new file mode 100644 index 0000000..c520cb8 --- /dev/null +++ b/src/Ball.ts @@ -0,0 +1,27 @@ +import { START_NO_OF_BALLS, MAP_WIDTH, MAP_HEIGHT, COLORS, TD_SIZE, CIRCLE_SIZE } from "./consts"; +import { getRandomInt, getRandomEl } from "./utils"; + +export default class Ball { + x: number; + y: number; + color: string; + + constructor(x: number, y: number, color: string) { + this.x = x; + this.y = y; + this.color = color; + } + onclick(el: PointerEvent) { + } + static generateStartBalls(): Array { + const out = []; + for (let i = 0; i < START_NO_OF_BALLS; i++) { + let x: number, y: number, color: string; + do { + [x, y, color] = [getRandomInt(0, MAP_HEIGHT), getRandomInt(0, MAP_WIDTH), getRandomEl(COLORS)]; + } while (out.filter(b => b.x === x && b.y === y).length !== 0) + out.push(new Ball(x, y, color)); + } + return out; + } +} diff --git a/src/consts.ts b/src/consts.ts new file mode 100644 index 0000000..1798a45 --- /dev/null +++ b/src/consts.ts @@ -0,0 +1,6 @@ +export const COLORS = ["red", "green", "blue", "orange", "pink", "white", "cyan"]; +export const START_NO_OF_BALLS = 3; +export const MAP_HEIGHT = 9; +export const MAP_WIDTH = 9; +export const TD_SIZE = "50px"; +export const CIRCLE_SIZE = "35px"; diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..9c9636a --- /dev/null +++ b/src/main.ts @@ -0,0 +1,12 @@ +import './style.css' + +import Ball from "./Ball" +import { genGameTable, render } from "./ui"; + +const balls = Ball.generateStartBalls(); +Ball.generateStartBalls(); +// const map = <(Ball | null)[][]>[]; + +genGameTable(); + +render(balls); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..6f617ad --- /dev/null +++ b/src/style.css @@ -0,0 +1,23 @@ +:root { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #2c3e50; + background-color: black; +} + +table { + border-collapse: collapse; + margin: 20px auto; +} +td { + border: 1px solid darkred; + width: 50px; + height: 50px; +} +td div { + width: 35px; + height: 35px; + margin: auto auto; + border-radius: 50%; +} diff --git a/src/ui.ts b/src/ui.ts new file mode 100644 index 0000000..f0a0e73 --- /dev/null +++ b/src/ui.ts @@ -0,0 +1,62 @@ +import Ball from "./Ball"; +import { MAP_WIDTH, MAP_HEIGHT, TD_SIZE, CIRCLE_SIZE } from "./consts"; + +let selectedBall: Ball | null = null; +let smallerCircle = () => { }; + +export function tdOnclick(el: PointerEvent) { + if (!selectedBall) return; + // Calc which x, y is clicked + // pass to shortest path + // ui +} +export function render(balls: Ball[]) { + for (const ball of balls) { + const { x, y, color } = ball; + const td = getTd(x, y); + (td.firstChild as HTMLDivElement).style.backgroundColor = color; + + td.onclick = () => { + const circle = td.firstChild as HTMLDivElement; + + if (circle.style.width === TD_SIZE) { + smallerCircle(); + selectedBall = null; + return; + } + smallerCircle(); + + + circle.style.width = TD_SIZE; + circle.style.height = TD_SIZE; + selectedBall = ball; + + smallerCircle = () => { + circle.style.width = CIRCLE_SIZE; + circle.style.height = CIRCLE_SIZE; + } + }; + } +} +// setInterval(() => console.log(selectedBall), 1000); +export function genGameTable() { + const table = getGameMapEl(); + for (let i = 0; i < MAP_HEIGHT; i++) { + const tr = document.createElement("tr") + for (let j = 0; j < MAP_WIDTH; j++) { + const td = document.createElement("td") + //@ts-expect-error + td.onclick = tdOnclick; + td.appendChild(document.createElement("div")); + tr.appendChild(td) + } + table.appendChild(tr) + } + +} +export function getGameMapEl(): HTMLTableElement { + return document.querySelector('table')! +} +export function getTd(x: number, y: number): HTMLTableDataCellElement { + return getGameMapEl().children[x].children[y] as HTMLTableDataCellElement; +} diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..0dc0bb1 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,9 @@ +/** + * Returns a random number between min (inclusive) and max (exclusive) + */ +export function getRandomInt(min: number, max: number): number { + return Math.floor(Math.random() * (max - min) + min); +} +export function getRandomEl(arr: Array): T { + return arr[getRandomInt(0, arr.length)]; +} diff --git a/start b/start new file mode 100755 index 0000000..23832b2 --- /dev/null +++ b/start @@ -0,0 +1,3 @@ +#!/bin/sh +st -e pnpm dev & +lvim index.html diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1885c8f --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "strict": true, + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true + }, + "include": ["src"] +} -- cgit v1.3.1