Skip to content

Instantly share code, notes, and snippets.

@kentbrew

kentbrew/glint.html

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kentbrew/02dd8c0ee7e8bb4c5951 to your computer and use it in GitHub Desktop.
Save kentbrew/02dd8c0ee7e8bb4c5951 to your computer and use it in GitHub Desktop.
Download ZIP
Glint 1.0
Raw
glint.html
<!doctype html>
<html>
<head>
<title>Glint 1.0</title>
<style>
body {
font-family: monospace;
}
</style>
</head>
<body>
<h3><a href="index.html">~kentbrew</a>: Glint 1.0</h3>
<table bgcolor="black">
<tr>
<td>
<table id="board" border="10" bgcolor="black" bordercolor="black" cellspacing="1" cellpadding="0">
<tr>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="000" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="010" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="020" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="100" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="110" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="120" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="031" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="041" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="051" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="131" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="141" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="151" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="202" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="212" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="222" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="302" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="312" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="322" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="233" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="243" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="253" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="333" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="343" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="353" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="404" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="414" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="424" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="504" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="514" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="524" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
<td>
<table border="1" bordercolor="black" cellspacing="0">
<tr>
<td id="435" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="445" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="455" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
<tr>
<td id="535" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="545" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
<td id="555" bgcolor="black" height="36" width="32" onclick="doMove(this);">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<font color="white" face="verdana" size="-1"><p id="status"></p></font>
</td>
</tr>
</table>
<p>Glint is a toy I originally made for <a href="http://kentbrewster.com/glint-an-iphone-toy/">the iPod Touch</a>, back when there was no such thing as the App Store and Steve Jobs insisted we should all make "Web apps" out of HTML, CSS, and JavaScript. (Once again, Steve was ahead of his time.)</p>
<p>To play, fill the board completely with colors without duplicating a color in any row, column, or sub-board. If you mess up, some pieces will disappear and go back in the stack. It's like Sudoku, only hostile to color-blind people.</p>
<p>This version of Glint was specially made for tilde.club, to answer this question: <b>"If I'd made Glint in 1996, what would it have looked like?"</b></p>
<p>Answer? TABLES! And FONT tags! And lots and lots of inline JavaScript, the kind that makes Doug Crockford spit out his Diet Dr. Pepper. Turns out I have <b>an unique set of skills</b> needed to make this happen: I spent a year and a half building individual ad mantles for the front page at yahoo.com, when it had to run flawlessly on Netscape 4.79.</p>
<p><b>I loved making this.</b> LOVED. I've been sitting here cackling and rubbing my hands together all night. Which pretty much describes the entire tilde.club experience so far.</p>
<h3>Notes</h3>
<p>Unexpected consequence of 1996 technology: after I pinch to zoom, this version of Glint actually <b>seems to work better</b> on my recent-generation iPhone than the original version, which was optimized for 320px and has goofy Apple headers that blows it up out of whack.</p>
<p><b>Trigger warning for OCD.</b> Once you start trying for that perfect score you will never, ever stop.</p>
<p>Special cool thing: lurking in here is a predictably-random number generator inspired by a bug documented in <b><i><a href="http://books.google.com/books?id=7vuNLcQhg8UC&pg=PA275&lpg=PA275&dq=233280+fortran&source=bl&ots=BCYF3zKJMM&sig=6xSzZO7LWx7JYUvDTIR-n-4UN4k&hl=en&sa=X&ei=Vs40VPnlKtCmyAT9l4CACw&ved=0CB4Q6AEwAA#v=onepage&q=233280%20fortran&f=false">Numerical Recipes in Fortran 77</a></i></b>. Why this is neat: we can seed it with the Unix timestamp divided by 86,400,000 to make a special game of Glint for every day, and you should come back tomorrow for the next one. You can reload the page to try today's puzzle again, or--if you're impatient--just change the number after the hash in your URL bar.</p>
<p>Here's how the predictably-random number generator gives us the same game for every day:</p>
<p><pre><font color="brown"> if (!window.location.hash) {
window.location.hash = Math.floor(new Date().getTime() / 86400000);
}
window.onhashchange = function () {
document.location.reload();
};
var gameId = window.location.hash.split('#')[1];
var rseed = gameId;
var rnd = function (n) {
rseed = (rseed * 9301 + 49297) % 233280;
r = Math.floor(rseed / (233280.0) * n);
return r;
};</font></pre></p>
<p>Once we have this in place we call <font color="brown">rnd(n)</font> instead of <font color="brown">Math.random(n)</font>, and we get a stream of numbers that look random but are always the same for any initial seed.</p>
<p>---</p>
<p>
Games played since 10/8/2014:
<!-- hitwebcounter Code START -->
<a href="http://www.hitwebcounter.com/">
<img align="absmiddle" src="http://hitwebcounter.com/counter/counter.php?page=5803337&style=0025&nbdigits=5&type=page&initCount=0" border="0" >
</a>
</p>
<script language="JavaScript">
var board = document.getElementById("board");
var theColors = [
"red",
"yellow",
"blue",
"cyan",
"green",
"violet"
];
var moveColor;
var moves = -7;
var stack = [
"red", "red", "red", "red", "red", "red",
"yellow", "yellow", "yellow", "yellow", "yellow", "yellow",
"blue", "blue", "blue", "blue", "blue", "blue",
"green", "green", "green", "green", "green", "green",
"orange", "orange", "orange", "orange", "orange", "orange",
"purple", "purple", "purple", "purple", "purple", "purple"
];
if (!window.location.hash) {
window.location.hash = Math.floor(new Date().getTime() / 86400000);
}
window.onhashchange = function () {
document.location.reload();
};
var gameId = window.location.hash.split('#')[1];
var rseed = gameId;
var rnd = function (n) {
rseed = (rseed * 9301 + 49297) % 233280;
r = Math.floor(rseed / (233280.0) * n);
return r;
};
for (var j, x, i = stack.length; i; j = rnd(i), x = stack[--i], stack[i] = stack[j], stack[j] = x);
var showMoveColor = function (c) {
var table = document.getElementsByTagName('TABLE');
for (var i = 0; i < table.length; i = i + 1) {
if (table[i].getAttribute("bordercolor")) {
table[i].setAttribute("bordercolor", c);
}
}
};
var updateStatus = function () {
document.getElementById('status').innerHTML = 'Game: ' + gameId + ' Moves: ' + moves + ' Left: ' + (stack.length + 1);
};
var getNextMove = function() {
moves = moves + 1;
if (stack.length) {
moveColor = stack.pop();
showMoveColor(moveColor);
updateStatus();
} else {
showMoveColor('black');
updateStatus();
if (moves == 30) {
var msg = "Perfect score!";
} else {
var msg = "You win! Now see if you can do it in less than " + moves + " moves!";
}
alert(msg);
}
};
var doMove = function (cell) {
var color = cell.getAttribute("bgcolor");
if (color == "black") {
cell.setAttribute("bgcolor", moveColor);
var row = cell.id[0];
var col = cell.id[1];
var sub = cell.id[2];
var check = document.getElementsByTagName('TD');
for (var i = 0; i < check.length; i = i + 1) {
var t = check[i].id;
if (t && t != cell.id) {
var bgColor = check[i].getAttribute("bgcolor");
if (bgColor != "black") {
if (t[0] == row) {
if (bgColor == moveColor) {
for (var j = 0; j < check.length; j = j + 1) {
var k = check[j].id;
if (k && k !== cell.id) {
var kr = k[0];
if (kr == row) {
var xbg = check[j].getAttribute("bgcolor");
if (xbg !== 'black') {
stack.unshift(xbg);
check[j].setAttribute("bgcolor", "black");
}
}
}
}
}
} else {
if (t[1] == col) {
if (bgColor == moveColor) {
for (var j = 0; j < check.length; j = j + 1) {
var k = check[j].id;
if (k && k !== cell.id) {
var kc = k[1];
if (kc == col) {
var xbg = check[j].getAttribute("bgcolor");
if (xbg !== 'black') {
stack.unshift(xbg);
check[j].setAttribute("bgcolor", "black");
}
}
}
}
}
} else {
if (t[2] == sub) {
if (bgColor == moveColor) {
for (var j = 0; j < check.length; j = j + 1) {
var k = check[j].id;
if (k && k !== cell.id) {
var ks = k[2];
if (ks == sub) {
var xbg = check[j].getAttribute("bgcolor");
if (xbg !== 'black') {
stack.unshift(xbg);
check[j].setAttribute("bgcolor", "black");
}
}
}
}
}
}
}
}
}
}
}
}
console.log(stack);
getNextMove();
};
getNextMove();
doMove(document.getElementById('222'));
doMove(document.getElementById('333'));
doMove(document.getElementById('000'));
doMove(document.getElementById('555'));
doMove(document.getElementById('141'));
doMove(document.getElementById('414'));
</script>
</body>
</html>
@kentbrew
Copy link
Author

kentbrew commented Oct 8, 2014

Backed up from its home page on tilde.club, just in case things go Terribly Terribly Wrong.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment