JSFiddle - React, Tailwind, and code Playground

by phollott

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 320 320" onload="initialize()">
    <defs id="defs">
        <path opacity=".8" id="Hex" style="stroke-width:2;fill:#CCCCCC" d="m 65,29 -16,28 -32,0 -16,-28 16,-28 32,0 16,28 z" />
    </defs>
    <defs id="brnz-4747-defs" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle id="c-white-4747" cx="20" cy="20" r="20" fill="white" />
        <circle id="c-black-4747" cx="20" cy="20" r="20" fill="black" />
        <filter id="f-bronze-4747" color-interpolation-filters="sRGB">
            <feGaussianBlur id="feGaussianBlur4749" stdDeviation="4" result="result8" />
            <feTurbulence id="feTurbulence4751" seed="50" result="result7" type="turbulence" numOctaves="7" baseFrequency="0.01 0.01" />
            <feColorMatrix id="feColorMatrix4753" result="result5" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.4 0 " />
            <feComposite id="feComposite4755" in2="result8" result="result6" in="result5" operator="in" />
            <feDisplacementMap id="feDisplacementMap4757" in2="result6" in="result5" xChannelSelector="A" yChannelSelector="A" scale="100" result="result4" />
            <feFlood id="feFlood4759" in="result4" flood-opacity="1" flood-color="rgb(224,224,224)" result="result9" />
            <feComposite id="feComposite4761" in2="result4" result="result2" operator="atop" />
            <feComposite id="feComposite4763" in2="SourceGraphic" in="result2" operator="atop" result="result9" />
            <feBlend id="feBlend4765" in2="result9" result="fbSourceGraphic" mode="darken" />
            <feGaussianBlur id="feGaussianBlur4767" stdDeviation="5" in="fbSourceGraphic" result="result0" />
            <feSpecularLighting id="feSpecularLighting4769" in="result0" result="result1" lighting-color="rgb(255,255,255)" surfaceScale="8" specularConstant="0.8" specularExponent="30">
                <feDistantLight id="feDistantLight4771"...

JavaScript

var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    var bag
    var d3bag

    Object.size = function (obj) {
        var size = 0,
            key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    }

    place = function (cell) {
        // d3: instead of drawCounter(0), just use:
        //  d3bag.select('.counter:last-child')       
        
        var counter = drawCounterFromBag(0)
        var p = getPolarity(counter)
        move(counter, cell)
        setPolarity(drawCounterFromBag(0), (p + 1) % 2)

        // Evaluate fusion
        var pile = []
        var sel = cell.querySelectorAll('.counter')
        
//        var d3cell = d3.select(cell)
//        var sel2 = d3cell.selectAll('.counter')

        for (var el in sel) {
            var id = sel[el].id
            if (id !== undefined) {
                var type = id.substr(0, 4)
                if (!pile[type]) {
                    pile[type] = 1;
                } else {
                    pile[type]++;
                }
            }
        }
        if (Object.size(pile) > 1) {
            doFusion(cell, pile, counter.id.substr(0, 4))
        }
    }

    move = function (counter, cell) {
        counter.parentNode.removeChild(counter);
        cell.appendChild(counter);
    }

    getPolarity = function (counter) {
        var black = counter.childNodes[3]
        var op = black.getAttributeNS(null, "opacity")
        return parseInt(op)
    }

    setPolarity = function (counter, p) {
        var black = counter.childNodes[3]
        var op = black.setAttributeNS(null, "opacity", p)
    }

    doFusion = function (cell, pile, type) {
        fuse(cell, type, pile[type])
        delete pile[type]
        for (var t in pile) {
            fuse(cell, type, pile[type])
        }
        var sel = cell.querySelectorAll('.counter')
        for (var c in sel) {
            if (sel[c].id !==...