(() => ({
+ gridTemplateColumns: `repeat(${width}, 1fr)`,
+ gridTemplateRows: `repeat(${height}, 1fr)`
+ }), []);
+
+ return cellsMatchDimension ? (
+
+ {
+ cells.map((val, index) => (
+ |
+ ))
+ }
+
+ ) : (
+
+ Amount of cells does not match Width/Height
+
+ )
+}
+
+export default CellContainer;
\ No newline at end of file
diff --git a/src/components/game/Game.tsx b/src/components/game/Game.tsx
new file mode 100644
index 0000000..b6d730c
--- /dev/null
+++ b/src/components/game/Game.tsx
@@ -0,0 +1,54 @@
+import CellContainer from './CellContainer';
+import {useCallback, useEffect, useState} from 'react';
+
+import '../../styles/game.less';
+
+interface GameProps {
+
+}
+
+interface GameOptions {
+ width: number;
+ height: number;
+}
+
+const defaultGameOptions: GameOptions = {
+ width: 25,
+ height: 25
+}
+
+const Game = ({}: GameProps) => {
+ const [gameOptions, setGameOptions] = useState(defaultGameOptions);
+ const [cells, setCells] = useState([]);
+
+ useEffect(() => {
+ const newCells: boolean[] = [];
+ const totalCells = gameOptions.width * gameOptions.height;
+
+ for(let i = 0; i < totalCells; i++) {
+ newCells.push(false);
+ }
+
+ setCells(newCells);
+ }, [gameOptions]);
+
+ const handleCellUpdate = useCallback((newVal: boolean, position: number) => {
+ setCells(prev => {
+ prev[position] = newVal;
+ return [...prev];
+ });
+ }, []);
+
+ return (
+
+
+
+ );
+}
+
+export default Game;
\ No newline at end of file
diff --git a/src/components/game/index.ts b/src/components/game/index.ts
new file mode 100644
index 0000000..c079aa6
--- /dev/null
+++ b/src/components/game/index.ts
@@ -0,0 +1,2 @@
+export {default as Game} from './Game';
+export {default as Cell} from './Cell';
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..720842f
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+
+
+)
\ No newline at end of file
diff --git a/src/styles/colors.less b/src/styles/colors.less
new file mode 100644
index 0000000..8f0dcdf
--- /dev/null
+++ b/src/styles/colors.less
@@ -0,0 +1,4 @@
+@col-dark: #171717;
+@col-dark-light: #444444;
+@col-primary: #DA0037;
+@col-light: #EDEDED;
\ No newline at end of file
diff --git a/src/styles/game.less b/src/styles/game.less
new file mode 100644
index 0000000..577dec3
--- /dev/null
+++ b/src/styles/game.less
@@ -0,0 +1,24 @@
+@import 'colors';
+
+.game-container {
+ min-width: 1000px;
+ min-height: 1000px;
+
+ display: flex;
+
+ .cell-container {
+ flex-grow: 1;
+ display: grid;
+
+ .cell {
+ background: @col-dark;
+ border: 1px solid @col-dark-light;
+ width: 100%;
+ height: 100%;
+
+ &.active {
+ background: @col-primary;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/main.less b/src/styles/main.less
new file mode 100644
index 0000000..a2fc4f3
--- /dev/null
+++ b/src/styles/main.less
@@ -0,0 +1,21 @@
+@import 'colors';
+
+body {
+ margin: 0;
+
+ font-family: sans-serif;
+ font-size: 20px;
+
+ background: @col-dark;
+ color: @col-light;
+
+
+ .main {
+ height: 100vh;
+ width: 100%;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3d0a51a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9d31e2a
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b1b5f91
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()]
+})