Dots

index.pug

div#app
    

playground.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.js

const GameContext = React.createContext({
    size: 8,
    data:[0x0]
 });

class SVGBoard extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <GameContext.Consumer>
                {({size}) => (
                    <svg id="game" viewBox={`0 0 ${(size+1) * 32} ${(size+1) * 32}`}>
                        <g id="dots">
                            {[...Array(size*size).keys()].map(x => (
                                <>
                                    <circle className="dotring" cx={32 + (x%size * 32)} cy={32 + (Math.floor(x/size) * 32)} r="8"/>
                                    <circle className="dot" cx={32 + (x%size * 32)} cy={32 + (Math.floor(x/size) * 32)} r="4.5"/>
                                </>
                            ))}
                        </g>
                    </svg>
                )}
            </GameContext.Consumer>
        )
    }
}

/*

                            //{[...Array(size*size).keys()].map(x => (<circle className="dotring" cx={x} cy={x} r="8"/>))}
                                //<circle className="dot" cx={32 + (x%size * 32)} cy={32 + (Math.floor(x/size) * 32)} r="4.5"/>
                                /*{[...Array(size*size).keys()].map((number) =>
                                    <>
                                        <p>Test</p>
                                    </>
                            
                                  )}
*/

class App extends React.Component {
    constructor(props) {
       super(props);
       this.state = {size:8}
    }
    newgame = () => {
        this.setState({data:[...Array(this.state.size*this.state.size)].fill(0x0)});
    }

    componentDidMount() {
        this.newgame();
    }
    /*updateTheme = theme => {
       if(this.state.themes.indexOf(theme) == -1)
          throw `Theme "${theme}" not supported.`
       this.setState({theme: theme});
    }*/
    render() {
       return (
          <GameContext.Provider value={{size: this.state.size}}>
             <SVGBoard />
          </GameContext.Provider>
       );
    }
 }
 

ReactDOM.render(<App />, document.getElementById("app"));

style.scss

:root {
    --background:#1E1E1E;
    --dot-background:#F5F7FA;
    --dot-inaccessible-background:#CCD1D9;
    --player1-color:#5D9CEC;
    --player2-color:#ED5565;
    --player3-color:#2ECC71;
    --player4-color:#FFCE54;
}

body {
    #app {
        display: grid;
        place-items: center;
        min-height: 100vh;
        background: var(--background);
        #game {
            max-height: calc(100vmin - 2rem);
            max-width:  calc(100vmin - 2rem);
            .dot {
                fill:var(--dot-background);
                pointer-events: none;
            }
            .dotring {
                fill:var(--background);
            }
        }
    }
}