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="bagger.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...

CSS

/* Release notes:
 * Two types of counter: iron and bronze; in two colors: black and white
 * Black and white take turns placing counters on the grid
 * When iron and bronze fuse, effects take place:
    - iron counters are tallied for each iron counter in hex
    - counters in adjacent counters are flipped
    - all counters in hex are removed
 * Play continues until one player reaches prearranged score */

JavaScript

var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    var bag
    var black = 0,
        white = 0;

    Object.size = function (obj) {
        var size = 0,
            key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    }
    
    var scorer = {
        showScore: function () {
            alert('white: ' + white + ' black: ' + black)
        }
    }

    var fuser = {
        doFusion: function (cell, pile, type) {
            this.fuse(cell, type, pile[type])
            delete pile[type]
            for (var t in pile) {
                this.fuse(cell, t, pile[t])
                delete pile[t]
            }
            var top = bagger.drawCounter()
            var sel = cell.querySelectorAll('.counter')
            for (var c in sel) {
                if (sel[c].id !== undefined) {
                    tracker.move(sel[c], bag)
                }
            }
            bagger.shuffle(2)
            tracker.move(top, bag)
            scorer.showScore()
        },
        fuse: function (cell, type, count) {
            if (type === 'iron') {
                var counters = cell.querySelectorAll('.iron')
                for (var c in counters) {
                    if (counters[c].id !== undefined) {
                        if (tracker.getPolarity(counters[c]) === 1) {
                            black = black + 1
                        } else {
                            white = white + 1
                        }
                    }
                }
            }
            if (type === 'brnz') {
    //            if (count === 1) {
                    grid.flipPeer(cell)
    //            }
            }
        }
    }

    var tracker = {
        move: function (counter, cell) {
            counter.parentNode.removeChild(counter);
            cell.appendChild(counter);
        },
        getPolarity: function (counter) {
            var black...