Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
213 lines (166 sloc) 7.29 KB
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Garkov</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/Strip.js"></script>
<script type="text/javascript" src="js/TextGenerator.js"></script>
<script type="text/javascript" src="js/sourcetext.js"></script>
</head>
<body>
<header>
<h1>Garkov</h1>
<p>2015, by WYE</p>
<p>Inspiration and source text files by Josh Millard (<a href="http://www.joshmillard.com/garkov">www.joshmillard.com/garkov</a>)
</p>
</header>
<div id="strip-container"></div>
<form>
<input type="button" id="generate-btn" value="Generate"/>
<table>
<tr>
<td class="prompt">
<strong>Strip:</strong>
</td>
<td id="strip-options">
<input type="radio" name="strip" value="random" id="strip-random" checked="checked"/><label
for="strip-random">random</label>
</td>
</tr>
<tr>
<td class="prompt">
<strong>Order:</strong><br/>
<small>When generating text, this determines how many characters are looked at to decide the
next character.<br/>Greater value = more coherent results.
</small>
</td>
<td>
<input type="number" id="order" min="0" value="5"/>
</td>
</tr>
</table>
</form>
<div id="info">
<div style="text-align: center;">
<a href="results.html" style="font-size: 24px;">&rarr; results</a>
</div>
<p>&nbsp;</p>
<p>Some of the more interesting strips that were generated. If you come across a good one, <a
href="https://www.eric-kaiser.net/contact">let me know</a> and I'll add it!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
Strips used:<br/>
(1)&nbsp;<a href="http://images.ucomics.com/comics/ga/2015/ga150124.gif">2015-24-01</a>,
(2)&nbsp;<a href="http://images.ucomics.com/comics/ga/2006/ga060719.gif">2006-07-19</a>,
(3)&nbsp;<a href="http://images.ucomics.com/comics/ga/2014/ga141004.gif">2014-10-04</a>,
(4)&nbsp;<a href="http://images.ucomics.com/comics/ga/2004/ga040122.gif">2004-01-22</a>,
(5)&nbsp;<a href="http://images.ucomics.com/comics/ga/1991/ga910803.gif">1991-08-03</a>,
(6)&nbsp;<a href="http://images.ucomics.com/comics/ga/2014/ga141201.gif">2014-12-01</a>,
(7)&nbsp;<a href="http://images.ucomics.com/comics/ga/2014/ga140606.gif">2014-06-06</a>
</p>
</div>
<script type="text/javascript">
var strips = [
new Strip('img/strip1.png', [
{jon: true, maxLength: 40, top: 7, left: 50, width: 110, height: 30},
{jon: true, maxLength: 30, top: 7, left: 250, width: 100, height: 30},
{jon: false, maxLength: 80, top: 7, left: 425, width: 155, height: 42}
]),
new Strip('img/strip2.png', [
{jon: true, maxLength: 80, top: 12, left: 14, width: 187, height: 30},
{jon: true, maxLength: 30, top: 11, left: 220, width: 81, height: 30},
{jon: true, maxLength: 40, top: 10, left: 406, width: 124, height: 30},
{jon: false, maxLength: 40, top: 42, left: 506, width: 91, height: 46}
]),
new Strip('img/strip3.png', [
{jon: true, maxLength: 70, top: 7, left: 33, width: 160, height: 42},
{jon: true, maxLength: 80, top: 6, left: 225, width: 167, height: 42},
{jon: true, maxLength: 80, top: 6, left: 421, width: 151, height: 42},
{jon: false, maxLength: 20, top: 60, left: 544, width: 60, height: 53}
]),
new Strip('img/strip4.png', [
{jon: true, maxLength: 50, top: 12, left: 21, width: 167, height: 30},
{jon: true, maxLength: 30, top: 11, left: 464, width: 92, height: 30},
{jon: false, maxLength: 30, top: 55, left: 531, width: 67, height: 32}
]),
new Strip('img/strip5.png', [
{jon: true, maxLength: 60, top: 12, left: 13, width: 190, height: 30},
{jon: false, maxLength: 40, top: 10, left: 409, width: 84, height: 47},
{jon: true, maxLength: 10, top: 10, left: 516, width: 67, height: 30}
]),
new Strip('img/strip6.png', [
{jon: false, maxLength: 80, top: 7, left: 28, width: 164, height: 42},
{jon: false, maxLength: 50, top: 8, left: 251, width: 115, height: 33},
{jon: false, maxLength: 10, top: 8, left: 415, width: 79, height: 30},
{jon: true, maxLength: 10, top: 53, left: 477, width: 57, height: 30}
]),
new Strip('img/strip7.png', [
{jon: true, maxLength: 60, top: 7, left: 20, width: 162, height: 43},
{jon: true, maxLength: 60, top: 7, left: 224, width: 157, height: 43},
{jon: true, maxLength: 40, top: 8, left: 418, width: 171, height: 33},
{jon: false, maxLength: 20, top: 47, left: 517, width: 79, height: 32}
])
];
var order = parseInt(document.getElementById('order').value);
var jonGarkov = new TextGenerator(getJonText(), order);
var garfieldGarkov = new TextGenerator(getGarfieldText(), order);
function recalculateOrder() {
// how does it feel
// to treat me like you do
// when you've laid your hands upon me
// and told me who you are
var newOrder = parseInt(document.getElementById('order').value);
if (order !== newOrder) {
order = newOrder;
jonGarkov = new TextGenerator(getJonText(), order);
garfieldGarkov = new TextGenerator(getGarfieldText(), order);
}
}
function renderRadioButtons() {
document.getElementById('strip-random').checked = true;
for (var i = 0, length = strips.length; i < length; i++) {
var stripNumber = i + 1;
var id = 'strip-' + stripNumber;
var radioButton = document.createElement('input');
radioButton.type = 'radio';
radioButton.id = id;
radioButton.name = 'strip';
radioButton.value = i;
radioButton.checked = false;
var label = document.createElement('label');
label.htmlFor = id;
label.innerHTML = stripNumber.toString();
var optionCell = document.getElementById('strip-options');
optionCell.appendChild(radioButton);
optionCell.appendChild(label);
}
}
function chooseStrip() {
var radioButtons = document.getElementsByName('strip');
if (radioButtons[0].checked) {
var numStrips = strips.length;
var randIndex = Math.floor(Math.random() * numStrips);
return strips[randIndex];
}
for (var i = 1, length = radioButtons.length; i < length; i++) {
if (radioButtons[i].checked) {
var index = radioButtons[i].value;
return strips[index];
}
}
}
function generateStrip() {
recalculateOrder();
var strip = chooseStrip();
strip.render();
}
document.body.onload = function () {
renderRadioButtons();
generateStrip();
};
document.getElementById('generate-btn').onclick = generateStrip;
</script>
</body>
</html>