tcyrus/index.html

## index.html
<!doctype html>
<html>
<head>
  <title>TJHSST Sysadmin Bingo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
  <script>
    origdata = ["\"Still Alive\" on piano", "polo shirt", "workstation broken", "man man", "csssuf on deadtom", "\"oooh shiny\"", "cookie clicker", "everyone is male", "fwil-", "someone hates java", "pit stains", "jcotton's ipad", "diet coke", "booting itanium", "password change", "jholtom uses music cart", "khakis", "zan mods mc", "fwilson's stuff stolen", "the ethanicorn", "hipster web tech", "FOOOOX", "crashing the san", "jholtom's plaid collared shirt", "frozen pizza", "iodine's broken", "mac in the machine room", "znc"];

    function shuffle(o) {
      for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
      return o;
    };

    document.addEventListener("DOMContentLoaded", function(event) {
      data = [], matrix = [];
      init_arr = function() {
        d = shuffle(origdata), k = 0;
        for(i=0; i<5; i++) {
          data[i] = [];
          matrix[i] = [];
          for(j=0; j<5; j++) {
            data[i][j] = d[k++];
            matrix[i][j] = 0;
          }
        }
      }

      function print_arr() {
        var bingo = document.getElementsByClassName('bingo')[0];
        for(i=0; i<5; i++) {
          var tr = document.createElement('tr');
          for(j=0; j<5; j++) {
            if(i == 2 && j == 2) {
              tr.innerHTML = tr.innerHTML + "<td class='free'>Free Space</td>";
            } else {
              tr.innerHTML = tr.innerHTML + "<td><a x="+i+" y="+j+" onclick='click()'>"+data[i][j]+"</a></td>";
            }
          }
          bingo.appendChild(tr);
        }
      }

      is_bingo = function() {
        for(var i=0; i<5; i++) {
          if(check_bingo_row(i) || check_bingo_col(i) || check_bingo_diag_bottom() || check_bingo_diag_top()) {
            return true;
          }
        }
        return false;
      }

      check_bingo = function() {
        if(is_bingo()) {
          alert('Bingo!');
        }
      }

      function check_bingo_diag_top() {
        for(var i=0; i<5; i++) {
          if(matrix[i][i]==0) {
            if(i != 2) {
              return false;
            }
          }
        }
        return true;
      }
      function check_bingo_diag_bottom() {
        for(var i = 0; i<5; i++) {
          row = i;
          col = 4-i;
          if(matrix[row][col]==0) {
            if(row != 2 || col != 2) {
              return false;
            }
          }
        }
        return true;
      }

      function check_bingo_row(row) {
        for(var col=0; col<5; col++) {
          if(matrix[row][col]==0) {
            if(row!=2 || col!=2) {
              return false;
            }
          }
        }
        return true;
      }

      function check_bingo_col(col) {
        for(var row=0; row<5; row++) {
          if(matrix[row][col]==0) {
            if(row!=2|| col!=2) {
              return false;
            }
          }
        }
        return true;
      }

      init_arr();
      print_arr();

      (document.getElementsByClassName('download')[0]).onclick=function() {
        html2canvas([document.getElementById('bingo')], {
          onrendered: function(canvas) {
            var img = canvas.toDataURL('image/png');
            window.open(img);
          },
          'allowTaint': true
        });
      };
    });

      function click() {
        console.log(this);
        x = getAttribute('x'), y = getAttribute('y');
        matrix[x][y] = 1-matrix[x][y];

        parentNode.classList.toggle('sel');
        check_bingo();
      };
  </script>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100italic,400italic,700italic,100,400,700" />
  <style>
    body {
      font-family: "Open Sans";
      background-color: #f0f0f0;
    }

    .bingo {
      position: absolute;
      /*top: 50%;
      left: 50%;
      width: 600px;
      height: 600px;
      margin-left: -300px;
      margin-top: -300px;*/
      left: 25%;
      width: 50%;
      height: 50%;
    }

    .download {
      font-size: 16px;
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 10px;
    }

    .font {
      font-size: 16px;
      position: absolute;
      bottom: 40px;
      right: 0;
      padding: 10px;
    }

    .bingo tr th {
      font-size: 30px;
      font-weight: 300;
      height: 100px;
    }

    .bingo tr td {
      width: 100px;
      height: 100px;
      max-width: 100px;
      max-height: 100px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }

    .bingo .sel {
      background-color: lightgreen;
    }

    .bingo tr td.free {
      background-image: url("data:image/jpeg;base64,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");
      background-size: cover;
      background-position: center center;
      color: white;
    }
  </style>
</head>
<body>
  <table class='bingo' id='bingo' border='1'>
    <tr><th colspan='5'>TJHSST Sysadmin Bingo</th></tr>
  </table>
  <button class='download'>Download</button>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>TJHSST Sysadmin Bingo</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
	<script>
	origdata = ["\"Still Alive\" on piano", "polo shirt", "workstation broken", "man man", "csssuf on deadtom", "\"oooh shiny\"", "cookie clicker", "everyone is male", "fwil-", "someone hates java", "pit stains", "jcotton's ipad", "diet coke", "booting itanium", "password change", "jholtom uses music cart", "khakis", "zan mods mc", "fwilson's stuff stolen", "the ethanicorn", "hipster web tech", "FOOOOX", "crashing the san", "jholtom's plaid collared shirt", "frozen pizza", "iodine's broken", "mac in the machine room", "znc"];

	function shuffle(o) {
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
	};

	document.addEventListener("DOMContentLoaded", function(event) {
	data = [], matrix = [];
	init_arr = function() {
	d = shuffle(origdata), k = 0;
	for(i=0; i<5; i++) {
	data[i] = [];
	matrix[i] = [];
	for(j=0; j<5; j++) {
	data[i][j] = d[k++];
	matrix[i][j] = 0;
	}
	}
	}

	function print_arr() {
	var bingo = document.getElementsByClassName('bingo')[0];
	for(i=0; i<5; i++) {
	var tr = document.createElement('tr');
	for(j=0; j<5; j++) {
	if(i == 2 && j == 2) {
	tr.innerHTML = tr.innerHTML + "<td class='free'>Free Space</td>";
	} else {
	tr.innerHTML = tr.innerHTML + "<td><a x="+i+" y="+j+" onclick='click()'>"+data[i][j]+"</a></td>";
	}
	}
	bingo.appendChild(tr);
	}
	}

	is_bingo = function() {
	for(var i=0; i<5; i++) {
	if(check_bingo_row(i) \|\| check_bingo_col(i) \|\| check_bingo_diag_bottom() \|\| check_bingo_diag_top()) {
	return true;
	}
	}
	return false;
	}

	check_bingo = function() {
	if(is_bingo()) {
	alert('Bingo!');
	}
	}

	function check_bingo_diag_top() {
	for(var i=0; i<5; i++) {
	if(matrix[i][i]==0) {
	if(i != 2) {
	return false;
	}
	}
	}
	return true;
	}
	function check_bingo_diag_bottom() {
	for(var i = 0; i<5; i++) {
	row = i;
	col = 4-i;
	if(matrix[row][col]==0) {
	if(row != 2 \|\| col != 2) {
	return false;
	}
	}
	}
	return true;
	}

	function check_bingo_row(row) {
	for(var col=0; col<5; col++) {
	if(matrix[row][col]==0) {
	if(row!=2 \|\| col!=2) {
	return false;
	}
	}
	}
	return true;
	}

	function check_bingo_col(col) {
	for(var row=0; row<5; row++) {
	if(matrix[row][col]==0) {
	if(row!=2\|\| col!=2) {
	return false;
	}
	}
	}
	return true;
	}

	init_arr();
	print_arr();

	(document.getElementsByClassName('download')[0]).onclick=function() {
	html2canvas([document.getElementById('bingo')], {
	onrendered: function(canvas) {
	var img = canvas.toDataURL('image/png');
	window.open(img);
	},
	'allowTaint': true
	});
	};
	});

	function click() {
	console.log(this);
	x = getAttribute('x'), y = getAttribute('y');
	matrix[x][y] = 1-matrix[x][y];

	parentNode.classList.toggle('sel');
	check_bingo();
	};
	</script>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100italic,400italic,700italic,100,400,700" />
	<style>
	body {
	font-family: "Open Sans";
	background-color: #f0f0f0;
	}

	.bingo {
	position: absolute;
	/*top: 50%;
	left: 50%;
	width: 600px;
	height: 600px;
	margin-left: -300px;
	margin-top: -300px;*/
	left: 25%;
	width: 50%;
	height: 50%;
	}

	.download {
	font-size: 16px;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
	}

	.font {
	font-size: 16px;
	position: absolute;
	bottom: 40px;
	right: 0;
	padding: 10px;
	}

	.bingo tr th {
	font-size: 30px;
	font-weight: 300;
	height: 100px;
	}

	.bingo tr td {
	width: 100px;
	height: 100px;
	max-width: 100px;
	max-height: 100px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	}

	.bingo .sel {
	background-color: lightgreen;
	}

	.bingo tr td.free {
	background-image: url("data:image/jpeg;base64,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");
	background-size: cover;
	background-position: center center;
	color: white;
	}
	</style>
	</head>
	<body>
	<table class='bingo' id='bingo' border='1'>
	<tr><th colspan='5'>TJHSST Sysadmin Bingo</th></tr>
	</table>
	<button class='download'>Download</button>
	</body>
	</html>