<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Battlelibs</title>

<meta name="description" content="A mad libs-like helper for creating a battledecks experience.">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="reveal.js/css/reveal.min.css">

<link rel="stylesheet" href="reveal.js/css/theme/default.css" id="theme">

<style>

body {

padding: 0;

margin: 0;

}

header {

padding: 4px 10px 10px 10px;

}

header input {

font-size: 10px;

}

#templatediv, #getwordsdiv {

margin: 2em;

}

#template {

width: 90%;

height: 10em;

font-size: 18px;

}

#templatediv, #getwordsdiv {

color: white;

max-height: 75%;

overflow: auto;

font-family: sans-serif;

}

#wordsdiv tr {

text-align: right;

}

#wordsdiv input, #wordsdiv label {

font-size: 30px;

}

#wordsdiv label {

color: #AAA;

}

#wordsdiv .active label {

color: white;

font-weight: bold;

}

#wordsdiv input {

padding: 4px;

background-color: transparent;

border-top: none;

border-left: none;

border-right: none;

color: #FF4;

}

#slides img {

max-height: 70vh

}

.reveal h2 {

text-transform: none !important;

}

</style>

<!--[if lt IE 9]>

</head>

<body>

<header>

<input type="button" value="Edit Template" onclick="$('header, #slides, #getwordsdiv').hide(); $('#templatediv').show()"/>

<input type="button" value="Get Words" onclick="$('header, #slides').hide(); $('#getwordsdiv').show()"/>

</header>

<div id="templatediv" style="display: none">

<h2>Template</h2>

<textarea id="template" wrap="virtual"></textarea>

<div><input type="button" value="OK" onclick="$('#templatediv').hide(); $('#getwordsdiv').show(); update_form(); "/></div>

</div>

<div id="getwordsdiv" style="display: none">

<h2>Okay, I need some words from the audience!</h2>

<table id="wordsdiv">

</table>

<input type="button" value="OK" onclick="$('#getwordsdiv').hide(); update_slides();"/>

</div>

<div class="reveal">

<div id="slides" class="slides" style="display: none">

</div>

</div>

<footer id="branding">

</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="assets/jquery-1.10.1.min.js"><\/script>')</script>

<script language="javascript" src="js/lz-string-1.3.3-min.js"></script>

<script src="https://www.google.com/jsapi"></script>

<script src="reveal.js/lib/js/head.min.js"></script>

<script src="reveal.js/js/reveal.min.js"></script>

<script>

google.load('search', '1');

var imageSearch;

$(function() {

// parse any user data stored in the location fragment

var user_data = null;

if (window.location.hash.length > 1)

user_data = JSON.parse(LZString.decompressFromBase64(window.location.hash.substring(1)));

// fill in the template text

if (user_data)

$('#template').val(user_data.tmpl);

// create the input to fill in the blanks

update_form();

// fill in any words

if (user_data) {

for (var id in user_data.wds)

$('#' + id).val(user_data.wds[id]);

}

// update the window hash as user data is entered

$('#template, #wordsdiv input').change(function() {

// collect the words

var words = { };

$('#wordsdiv input').each(function() {

var v = $(this).val();

if (v.length > 0)

words[this.getAttribute('id')] = v;

});

// make a JSON string encoding all of the user info

var data = JSON.stringify({

v: 1,

tmpl: $('#template').val(),

wds: words

});

// compress and store it in the location fragment

window.location.hash = LZString.compressToBase64(data);

});

// prepare google image search

imageSearch = new google.search.ImageSearch();

google.search.Search.getBranding('branding');

imageSearch.setRestriction(

google.search.Search.RESTRICT_SAFESEARCH,

google.search.Search.SAFESEARCH_STRICT

);

imageSearch.setRestriction(

google.search.ImageSearch.RESTRICT_IMAGESIZE,

google.search.ImageSearch.IMAGESIZE_LARGE);

});

String.prototype.splice = function(index, count, add) {

var str = this;

return str.slice(0, index) + add + str.slice(index + count);

}

function iterate_prompts(callback) {

var lines = $('#template').val().split(/[\n\r]+/);

for (var j = 0; j < lines.length; j++) {

var line = lines[j];

var i = 0;

var dx = 0;

var regex = /\[\[([^\]]+)\]\]/g, result, indices = [];

while ( (result = regex.exec(line)) ) {

var prompt = result[1];

var replacement = callback(j, i, prompt);

if (replacement) {

lines[j] = lines[j].splice(result.index+dx, result[0].length, replacement);

dx += (replacement.length - result[0].length)

}

i++;

}

}

return lines;

}

function update_form() {

// clear and create new inputs

$('#wordsdiv').html('');

iterate_prompts(function(line, index, prompt) {

var id = 'input_' + line + '_' + index;

var n = $('<tr><td><label for="' + id + '"> </label><td> <td><input id="' + id + '"></tr>');

n.find('label').text(prompt);

$('#wordsdiv').append(n);

});

$('#wordsdiv input').on('focus', function() {

$('#wordsdiv tr').removeClass('active');

$(this).parents("tr").addClass("active");

})

}

function update_slides() {

// do substitutions

var lines = iterate_prompts(function(line, index, prompt) {

var text = "";

var w = $('#input_' + line + '_' + index).val().split(" ");

for (var i = 0; i < w.length; i++)

text += " +" + w[i];

return text;

});

// clear and make new slides

$('#slides').html('');

var loading = $('<section>Loading...</section>');

$('#slides').append(loading);

var slides = [];

for (var i = 0; i < lines.length; i++) {

// remove +'s that we added earlier for Google'

var text = lines[i].replace(/\+/g, '');

// make slide HTML

var n = $('<section class="slide"><h2/><img/></section>');

n.find("h2").text(text);

$("#slides").append(n);

slides.push(n);

}

// unfortunately we can only call image search once at a time,

// so make serial async calls.

$('#slides, header').show();

Reveal.initialize();

function add_image(index) {

if (index == lines.length) {

// FINISHED

loading.text("Ready!")

Reveal.initialize();

return;

}

image_search(lines[index], function(url) {

slides[index].find('img').attr('src', url);

loading.text(lines.length - index);

add_image(index+1);

});

}

add_image(0);

}

function image_search(query, callback) {

imageSearch.setSearchCompleteCallback(this, function() {

if (imageSearch.results && imageSearch.results.length > 0) {

callback(imageSearch.results[0].url)

} else {

callback(null);

}

}, null);

imageSearch.execute(query);

}

</script>

</body>