6 files changed, 139 insertions, 0 deletions
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<Ball> {
+    const out = <Ball[]>[];
+    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<T>(arr: Array<T>): T {
+  return arr[getRandomInt(0, arr.length)];
+}