JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="main" width=500 height=500></canvas>

CSS

body{
    background: #1b1b1d;
}

JavaScript

class Point {
    constructor(row, col) {
        this.row = row;
        this.col = col;
        this.adjacents = [];
        this.isEdge = false;
        this.height = 0.0;
        this.waterAmount = 0.0;
    }

    coord(scale) {
        return [this.col * scale, this.row * scale * Math.sqrt(0.75)];
    }
    
    waterLevel() {
    	return this.height + this.waterAmount;
    }
}

class Edge {
    constructor(p1, p2) {
        this.p1 = p1;
        this.p2 = p2;
        this.flow = 0;
    }
}

class Face {
    constructor(...points) {
        this.points = points;
    }
    
    averageHeight() {
    	return (
        	this.points[0].height
            + this.points[1].height
            + this.points[2].height
        ) / 3.0;
    }
}


let points = [];
let edges = [];
let faces = [];


const r = 10;

function initMap(r) {
    let pointsByRowCol = new Map();

    function putPoint(r, c, p) {
        if (!pointsByRowCol.has(r)) pointsByRowCol.set(r, new Map());
        pointsByRowCol.get(r).set(c, p);
    }

    function getPoint(r, c) {
        if (!pointsByRowCol.has(r)) return null;
        return pointsByRowCol.get(r).get(c) || null;
    }

    for (let row = -r; row <= r; row++) {
        const colRadius = r - 0.5 * Math.abs(row);
        for (let col = -colRadius; col <= colRadius; col++) {
            let p = new Point(row, col);
            points.push(p);
            putPoint(row, col, p);
        }
    }

    points.forEach(p => {
        p.adjacents = [
            getPoint(p.row - 1, p.col - 0.5),
            getPoint(p.row - 1, p.col + 0.5),
            getPoint(p.row, p.col - 1),
            getPoint(p.row, p.col + 1),
            getPoint(p.row + 1, p.col - 0.5),
            getPoint(p.row + 1, p.col + 0.5),
        ].filter(_ => _);
        p.isEdge = p.adjacents.length != 6;

        const sw = getPoint(p.row - 1, p.col - 0.5);
        const se = getPoint(p.row - 1, p.col + 0.5);
        const w = getPoint(p.row, p.col - 1);

        if (sw)...