JSFiddle - React, Tailwind, and code Playground

by Alexander Farber

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <fieldset id="modeRadio">
    Show game tables for:
    <label>
      <input type="radio" name="modeRadio" id="twoRadio">
      2 players
    </label>
    <label>
      <input type="radio" name="modeRadio" id="threeRadio" checked>
      3 players
    </label>
  </fieldset>
</div>

<div id="tablesDiv"></div>

CSS

.my-table {
    position:           relative;
    float:              left; 
    margin:             8px;
    color:              white;
    width:              100px; 
    height:             100px; 
}

.my-table-tid {
    position:           absolute;
    font-size:          1.2em; 
    top:                20px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

JavaScript

$.widget('my.table', {
  options: {
    tid: NaN,
    max: NaN,
    players: []
  },
  _create: function() {
    this._hoverable(this.element);
    this.element.addClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
    this.tidDiv = $('<div/>', { 'class': 'my-table-tid'}).appendTo(this.element);
    this._refresh();
    },
  _destroy: function() {
    this.tidDiv.remove();
    this.element.removeClass('my-table ui-widget ui-widget-content ui-corner-all ui-widget-shadow ui-state-default');
  },
  _setOptions: function() {
    this._superApply(arguments);
    this._refresh();
  },
  _refresh: function() {
    this.element.css('background', this.options.max === 2 ? '#39C' : '#AD8');
    this.tidDiv.text('#' + this.options.tid);
  }
});

$('<div/>', {id: 'table2'}).table({ tid: 2, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table22'}).table({ tid: 22, max: 2 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table3'}).table({ tid: 3, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table13'}).table({ tid: 13, max: 3 }).appendTo($('#tablesDiv'));
$('<div/>', {id: 'table33'}).table({ tid: 30, max: 3 }).appendTo($('#tablesDiv'));

$('#twoRadio').on('change', function(ev) {
  console.log('XXX value two: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).option('max'));
  });
});

$('#threeRadio').on('change', function(ev) {
  console.log('XXX value three: ' + this.value);
  $('#tablesDiv > div').each(function(index) {
    console.log(index + ': ' + $(this).options('max'));
  });
});