sschwei1/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
sschwei1 2022-10-24 05:47:50 +02:00
commit 2fe61bff89
17 changed files with 3069 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -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?

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

2753
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
package.json Normal file
View File

@ -0,0 +1,24 @@
{
"name": "game-of-life",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"classnames": "^2.3.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"less": "^4.1.3",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
}

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
src/App.tsx Normal file
View File

@ -0,0 +1,16 @@
import { useState } from 'react';
import './styles/main.less';
import {Game} from './components/game';
const App = () => {
const [count, setCount] = useState<Number>(0)
return (
<div className='main'>
<Game />
</div>
)
}
export default App

43
src/components/game/Cell.tsx Normal file
View File

@ -0,0 +1,43 @@
import {MouseEvent} from 'react';
import classNames from 'classnames';
interface CellProps {
value: boolean;
position: number;
updateCell: (newVal: boolean, position: number) => void
}
const defaultClasses: string[] = [
'cell'
];
let currentDragValue = true;
const Cell = ({value, position, updateCell}: CellProps) => {
const cellClasses = classNames({
'cell': true,
'active': value
});
const handleCellMouseDown = () => {
currentDragValue = !value;
updateCell(currentDragValue, position);
}
const handleCellMouseOver = (event: MouseEvent<HTMLDivElement>) => {
if(event.buttons !== 1) return;
updateCell(currentDragValue, position);
}
return (
<div
className={cellClasses}
onMouseDown={handleCellMouseDown}
// onMouseEnter={handleCellMouseEnter}
onMouseOver={handleCellMouseOver}
/>
)
}
export default Cell;

44
src/components/game/CellContainer.tsx Normal file
View File

@ -0,0 +1,44 @@
import {CSSProperties, useMemo} from 'react';
import Cell from './Cell';
interface CellContainerProps {
cells: boolean[];
width: number;
height: number;
updateCell: (newVal: boolean, position: number) => void
}
const CellContainer = ({cells, width, height, updateCell}: CellContainerProps) => {
const cellsMatchDimension: boolean = useMemo<boolean>(() => {
return cells.length === width * height;
}, [cells, width, height]);
const containerStyleProps = useMemo<CSSProperties>(() => ({
gridTemplateColumns: `repeat(${width}, 1fr)`,
gridTemplateRows: `repeat(${height}, 1fr)`
}), []);
return cellsMatchDimension ? (
<div
className='cell-container'
style={containerStyleProps}
>
{
cells.map((val, index) => (
<Cell
key={index}
value={val}
position={index}
updateCell={updateCell}
/>
))
}
</div>
) : (
<div>
Amount of cells does not match Width/Height
</div>
)
}
export default CellContainer;

54
src/components/game/Game.tsx Normal file
View File

@ -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<GameOptions>(defaultGameOptions);
const [cells, setCells] = useState<boolean[]>([]);
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 (
<div className='game-container'>
<CellContainer
cells={cells}
width={gameOptions.width}
height={gameOptions.height}
updateCell={handleCellUpdate}
/>
</div>
);
}
export default Game;

2
src/components/game/index.ts Normal file
View File

@ -0,0 +1,2 @@
export {default as Game} from './Game';
export {default as Cell} from './Cell';

9
src/main.tsx Normal file
View File

@ -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(
<React.StrictMode>
<App />
</React.StrictMode>
)

4
src/styles/colors.less Normal file
View File

@ -0,0 +1,4 @@
@col-dark: #171717;
@col-dark-light: #444444;
@col-primary: #DA0037;
@col-light: #EDEDED;

24
src/styles/game.less Normal file
View File

@ -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;
}
}
}
}

21
src/styles/main.less Normal file
View File

@ -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;
}
}

21
tsconfig.json Normal file
View File

@ -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" }]
}

9
tsconfig.node.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})