Toonami Scrule (Sept 29-30, 2018)

by MegaScience

HTML

<table>
  <thead>
    <tr>
      <th>Time</th>
      <th>Name</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody id="fragmentHere"></tbody>
</table>

CSS

table {
  margin: 0px auto;
  border-collapse: collapse;
  border-style: hidden;
  box-shadow: 0 0 0 2px #666;
  border-radius: 5px;
}

table .time {
  text-align: right;
}

table .date {
  font-style: italic;
  font-weight: bold;
  text-align: center;
}

table thead th {
  border-bottom: 2px solid black;
}

table tbody td, table tbody th {
  vertical-align: bottom;
  border-bottom: 1px solid black;
}

table tbody td:nth-child(n + 2) {
  border-left: 1px solid black;
}

table tbody tr:not(.date) {
  cursor: pointer;
}

table tbody tr:nth-child(odd) {
  background-color: beige;
}

table tbody tr[data-watched="true"] {
  position: relative;
  background-color: grey;
  opacity: 0.7;
}

table tbody tr[data-watched="true"]::after {
	position: absolute;
	left: 0;
	paint-order: stroke fill;
	content: 'Watched';
	color: white;
	-webkit-text-stroke: 2px black;
	display: block;
	text-align: center;
	width: 100%;
  height: 100%;
  vertical-align: middle;
}

JavaScript

window.__INITIAL_STATE__ = {
    "date": "19-04-22",
    "letter": "A",
    "liveStream": {
      "19-04-22": [{
        "starttime": 1555956000,
        "title": "The Wonder Closet"
      }, {
        "starttime": 1555959600,
        "title": "Desperate Losers"
      }, {
        "starttime": 1555963200,
        "title": "Fishcenter"
      }, {
        "starttime": 1555966800,
        "title": "Williams Street Swap Shop"
      }, {
        "starttime": 1555970400,
        "title": "SMB: Evening Edition"
      }, {
        "starttime": 1555974000,
        "title": "Bloodfeast"
      }, {
        "starttime": 1555977600,
        "title": "Assembly Line Yeah!"
      }, {
        "starttime": 1555981200,
        "title": "How To Draw"
      }, {
        "starttime": 1555984800,
        "title": "Fishcenter"
      }, {
        "starttime": 1555988400,
        "title": "Dear Jono"
      }, {
        "starttime": 1555992000,
        "title": "Bloodfeast"
      }, {
        "starttime": 1555995600,
        "title": "Fishcenter"
      }],
      "19-04-23": [{
        "starttime": 1556042400,
        "title": "Assembly Line Yeah"
      }, {
        "starttime": 1556046000,
        "title": "Desperate Losers"
      }, {
        "starttime": 1556049600,
        "title": "Fishcenter"
      }, {
        "starttime": 1556053200,
        "title": "Williams Street Swap Shop"
      }, {
        "starttime": 1556056800,
        "title": "SMB: Evening Edition"
      }, {
        "starttime": 1556060400,
        "title": "Bloodfeast"
      }, {
        "starttime": 1556064000,
        "title": "Last Stream on the Left"
      }, {
        "starttime": 1556067600,
        "title": "The Sports Hole"
      }, {
        "starttime": 1556071200,
        "title": "Fishcenter"
      }, {
        "starttime": 1556074800,
        "title": "I'm Dr Rich or Am I?"
      }, {
        "starttime": 1556078400,
        "title": "Bloodfeast "
      }, {
        "starttime": 1556082000,
       ...