BGG 10x10 2017

by lukerichison

HTML

<table id="myTable">
  <thead>
    <tr>
      <th colspan="11">Richison 10x10 Challenge 2017</th>
    </tr>
  </thead>
  <tbody>
    <tr class="BGG183394">
      <th>Viticulture</th>
      <td>2/20</td>
      <td>3/29</td>
      <td>4/3</td>
      <td>4/12</td>
      <td>4/21</td>
      <td>6/22</td>
      <td>6/28</td>
      <td>6/30</td>
      <td></td>
      <td></td>
    </tr><tr class="BGG120677">
      <th>Terra Mystica</th>
      <td>5/22</td>
      <td>5/22</td>
      <td>5/27</td>
      <td>5/27</td>
      <td>6/17</td>
      <td>6/22</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG182134">
      <th>Evolution</th>
      <td>2/14</td>
      <td>2/17</td>
      <td>3/19</td>
      <td>4/21</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG136888">
      <th>Bruges</th>
      <td>4/5</td>
      <td>4/5</td>
      <td>4/14</td>
      <td>4/18</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG">
      <th>Tzolk'in</th>
      <td>2/23</td>
      <td>2/26</td>
      <td>2/26</td>
      <td>3/31</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG185257">
      <th>Innovation</th>
      <td>7/10</td>
      <td>7/10</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG">
      <th>Deus</th>
      <td>3/1</td>
      <td>5/15</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr class="BGG19857">
      <th>Glory to Rome</th>
      <td>4/23</td>
      <td>4/23</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr...

CSS

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Lobster');
html {
  height: 100%;
}

body {
  background-color: #D6D1CD;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

table {
  background-color: white;
  border-collapse: separate;
  border: 1em solid #1f262b;
  border-radius: 1em;
  color: #1f262b;
  font-family: 'Josefin Sans', sans-serif;
  box-shadow: 0 3em 5em -2em #918881;
}

thead th {
  color: #A9BCD0;
  background-color: #435058;
  text-align: center;
  font-family: 'Lobster', cursive;
  font-size: 2.825em;
  padding: 0.25em 2em;
}

thead th span {
  font-size:0.6em;
  vertical-align: top;
  line-height: 2.1em;
  padding-left: 0.4em;
}

tbody td,
tbody th {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
tbody td {
  height: 5em;
  width: 5em;
  font-size: 0.5em;
  background-image: url(http://lukerichison.com/BGG/empty_meeple.svg);
  color: white;
  text-align: center;
  background-color: #D8DBE2;
}
tbody th {
  font-size: 1.5em;
  padding: 0.5em 0.25em 0;
}

tbody tr:last-child td {
  border-bottom: 1em solid white;
}

tbody tr:first-child td {
  border-top: 1em solid white;
}

tbody td:last-child {
  border-right: 1em solid white;
}

tbody td:not(:empty) {
  background-color: #ED6A5A;
}
/*
tbody tr th {
  width: 9em;
  height: 1em;
  padding: 0;
  text-indent: -999em;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid white;
  border-width: 0 0.25em;
}
tbody tr.BGG183394 th { background-image: url('http://lukerichison.com/BGG/viticulture.jpg');}
tbody tr.BGG177352 th { background-image: url('http://lukerichison.com/BGG/carsoncity.jpg');}
tbody tr.BGG120677 th { background-image: url('http://lukerichison.com/BGG/terramystica.jpg');}
tbody tr.BGG182134 th { background-image: url('http://lukerichison.com/BGG/evolution.jpg');}
tbody tr.BGG136888 th { background-image:...

JavaScript

function sortTable() {
  var table, rows, cols, switching, i, j, x, y, shouldSwitch, plays;
  table = document.getElementById("myTable");
  rows = table.getElementsByTagName("TR");
  cols = rows[1].getElementsByTagName("TD");
  for (j = 0; j < cols.length; j++) {
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
    while (switching) {
      //start by saying: no switching is done:
      switching = false;
      /*Loop through all table rows (except the
      first, which contains table headers):*/
      for (i = 1; i < (rows.length - 1); i++) {
        //start by saying there should be no switching:
        shouldSwitch = false;
        /*Get the two elements you want to compare,
        one from current row and one from the next:*/
        x = rows[i].getElementsByTagName("TD")[j];
        y = rows[i + 1].getElementsByTagName("TD")[j];
        //check if the two rows should switch place:
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      }
      if (shouldSwitch) {
        /*If a switch has been marked, make the switch
        and mark that a switch has been done:*/
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
      }
    }
  }
}
sortTable()


function playProgress() {
  var rows, cols, i, j, plays, node, textNode;
  rows = document.getElementById("myTable").getElementsByTagName("TR");
  cols = rows[1].getElementsByTagName("TD");
  plays = 0;
  for (i = 1; i < (rows.length - 1); i++) {
    for (j = 0; j < (cols.length); j++) {
      if (rows[i].getElementsByTagName("TD")[j].textContent.length > 0) plays++;
    }
  }
	node = document.createElement("SPAN");
	textnode = document.createTextNode('('+plays+'%)');
	node.appendChild(textnode);
	rows[0].getElementsByTagName("TH")[0].appendChild(node);
}
playProgress();