JSFiddle - React, Tailwind, and code Playground

by alicemunro

HTML

<body>
    <h1>Poker Test Page</h1>
<div id='button-field'></div>
<div id='write-action'></div>
</body>

JavaScript

/*
 * A button knows it's own parent list, and notifies it's parent when it is clicked.
 * The parent list decides what to do at that point
 */ 
var Button = function(parentList, buttonText) {
    var self = {}; // The object we'll return
    
    var createDomInput = function() {
        newButton = document.createElement('input');
        newButton.type = 'button';
        newButton.value = buttonText;
        newButton.addEventListener("click", function() { parentList.buttonClicked(self) } );
        return newButton;
    };
    var addSelfToDom = function() {
        parentList.domNode().appendChild(createDomInput());
    };
    
    // The public API of a Button: 
    self.text = function() { return buttonText }
    self.addSelfToDom = addSelfToDom;
    return self;
}

var ButtonList = function(domId, values) {
    var self = {};
    var buttons = values.map(function(text) { return Button(self, text) })
    var domNode = function() { return document.getElementById(domId) }
    var displaySelf = function() {
        domNode().innerHTML = '' //clear out anything already there
        buttons.forEach( function(button) {button.addSelfToDom() } )
    }
    
    var clickCallback;
    var onClick = function(callback) { clickCallback = callback }
    var buttonClicked = function(button) { clickCallback(button) }
   
    // Public API:
    self.domNode = domNode
    self.displaySelf = displaySelf
    self.onClick = onClick // sets the onClick callback
    self.buttonClicked = buttonClicked // invokes the onClick callback
    return self
}

var buttonList1 = ButtonList('button-field', ["call", "raise", "fold"])
var buttonList2 = ButtonList('button-field', ["check", "call"])

// Since each list has the same behavior (swap with other list, output text of clicked button)
// we put it into a helper function, then we add it to each buttonList's listener
var swapListAndLog = function(swapToList) {
    return function(button) {
        swapToList.displaySelf()
       ...