/*
Paint Canvas
Author: Johna Latouf
Author URL: http://www.johnalatouf.com
Description: javascript and CSS style for SugarCube 1.0.26 Twine Format
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This generic design is free for all use. It was designed for Twine Version 2.0.8
SugarCube format version 1.0.26. Copyright Johna Latouf © 2015
*/
//constants
var MAXBGPAINTS = 20;
var MAX_PASSAGE_PAINTS = 20;
var cardThere = false;
var c = 0; //counts cards
$(document).ready(function(){
//make an array of paint daubs
var daubs = ['YOUR_DOMAIN/img/DaubGold.png', 'YOUR_DOMAIN/img/DaubOrange.png', 'YOUR_DOMAIN/img/DaubBlue.png', 'YOUR_DOMAIN/img/DaubSplatter.png', 'YOUR_DOMAIN/img/DaubBrush.png'];
//random number between 1 and 20 for number of daubs
var paintAmt = Math.floor((Math.random() * MAXBGPAINTS) + 1);
//set up bg paint
for (i = 0; i < paintAmt; i++) {
//append background stuff
var paintDiv = document.createElement( "div" );
paintDiv.setAttribute("id", ("daub" + i));
paintDiv.setAttribute("class", "daub");
$( "body" ).append( $(paintDiv ) );
//choose the image at random
var daubIndex = Math.floor(Math.random()*daubs.length);
var daubBG = "url('" + daubs[daubIndex] + "') no-repeat center top";
//set up the appearance
//$(("#daub" + i)).css("background", "url('YOUR_DOMAIN/img/DaubBlue.png') no-repeat center top");
$(("#daub" + i)).css("background", daubBG);
// $("#newdiv").css("position", "absolute");
$(("#daub" + i)).css("left", (""+ (Math.floor(Math.random()*70) + 1) + "%"));
$(("#daub" + i)).css("top", (""+ (Math.floor(Math.random()*60) + 1) + "%"));
$(("#daub" + i)).css("background-size", (""+ (Math.floor(Math.random()*100 + 10) + 1) + "% " + (Math.floor(Math.random()*100 + 10) + 1) + "%"));
$(("#daub" + i)).css("opacity", ""+ (Math.random() + 0.3));
//rotate the div
var degrees = (Math.floor(Math.random()*360));
$(("#daub" + i)).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
}
//call functions
paintOnCard(daubs);
cardPile();
/////////////////////mutation observer
// select the target node
var target = document.querySelector('#passages');
var h = $('#passages').height();
//observe for mutations in the passages div
var observer = new MutationObserver(function(mutations) {
var newH = $('#passages').height();
//if the div height has changed, update the paint and card
if (newH != h) {
paintOnCard(daubs);
cardPile();
h = newH;
}
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration for the observer
var config = { attributes: true, childList: true, characterData: true, attributeFilter : ['style'] };
observer.observe(target, config);
});
//random paint on cards. d = array of images
function paintOnCard(d) {
//how many paints?
var cardAmt = Math.floor((Math.random() * MAX_PASSAGE_PAINTS) + 1);
//if passages div width hasn't shown up yet, fake it
if ($("#passages").width() < 300 && $(window).width()>786) {
pasWidth = "100%";
var pasHeight = $("#passages").height() + parseFloat($("#passages").css("padding-top")) + parseFloat($("#passages").css("padding-bottom"));
} else if ($("#passages").width() < 300 && $(window).width()<=786) {
pasWidth = "100%";
var pasHeight = $("#passages").height() + parseFloat($("#passages").css("padding-top")) + parseFloat($("#passages").css("padding-bottom"));
} else {
var pasHeight = $("#passages").height() + parseFloat($("#passages").css("padding-top")) + parseFloat($("#passages").css("padding-bottom"));
var pasWidth = $("#passages").width() + parseFloat($("#passages").css("padding-left")) + parseFloat($("#passages").css("padding-right"));
}
var cardWrap = document.createElement( "div" ); //wrapper element
cardWrap.setAttribute("id", "cardWrap");
$( "#passages" ).append( $( cardWrap ) );
$("#cardWrap").css("height", pasHeight);
$("#cardWrap").css("width", pasWidth);
$("#cardWrap").css("top", 0);
$("#cardWrap").css("left", 0);
$("#cardWrap").css("overflow", "hidden");
$("#cardWrap").css("position", "absolute");
$("#cardWrap").css("z-index", "11");
//loop through the paints
for (i = 0; i < cardAmt; i++) {
//append background stuff
var paintDiv = document.createElement( "div" );
paintDiv.setAttribute("id", ("daubCard" + i));
paintDiv.setAttribute("class", "daubCard");
$( "#cardWrap" ).append( $(paintDiv ) );
//choose the image at random
var daubIndex = Math.floor(Math.random()*d.length);
var daubBG = "url('" + d[daubIndex] + "') no-repeat center top";
//set up the appearance
$(("#daubCard" + i)).css("background", daubBG);
$(("#daubCard" + i)).css("left", (""+ (Math.floor(Math.random()*100) + 1) + "%"));
$(("#daubCard" + i)).css("top", (""+ (Math.floor(Math.random()*40) + 1) + "%"));
$(("#daubCard" + i)).css("background-size", (""+ (Math.floor(Math.random()*80 + 10) + 1) + "% " + (Math.floor(Math.random()*80 + 10) + 1) + "%"));
//opacity
$(("#daubCard" + i)).css("opacity", ""+ (Math.random() + 0.1));
//rotate the div
var degrees = (Math.floor(Math.random()*360));
$(("#daubCard" + i)).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
var negDeg = (-1)*(degrees);
$(('#daubCard' + i + ':before')).css({'-webkit-transform' : 'rotate(' + negDeg +'deg)',
'-moz-transform' : 'rotate(' + negDeg +'deg)',
'-ms-transform' : 'rotate(' + negDeg +'deg)',
'transform' : 'rotate(' + negDeg +'deg)'});
/* $('').appendTo('head');
var negDeg = (-1)*(degrees);
$('').appendTo('head');*/
}
}
function cardPile() {
//if there's already a fake card, just resize it
if (cardThere)
{
//make some fake cards
var fakeCardDiv = document.createElement( "div" );
fakeCardDiv.setAttribute("class", ("fakeCard"));
fakeCardDiv.setAttribute("id", ("c" + c));
$( "body" ).append( $(fakeCardDiv ) );
$("#c" + c).css("height", $("#passages").height());
$("#c" + c).css("width", $("#passages").width());
var position = $("#passages").position();
$("#c" + c).css("top", position.top);
var degrees = (Math.random()*5) - 2.5;
$("#c" + c).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
} else if ($(window).width()<=786) {
//make some fake cards
var fakeCardDiv = document.createElement( "div" );
fakeCardDiv.setAttribute("class", ("fakeCard"));
fakeCardDiv.setAttribute("id", ("c" + c));
$( "body" ).append( $(fakeCardDiv ) );
$("#c" + c).css("height", $("#passages").height());
$("#c" + c).css("width", "80%");
var position = $("#passages").position();
$(".fakeCard").css("top", "77px");
$(".fakeCard").css("left", "10px");
cardThere = true;
} else if ($(window).width()>786) {
//make some fake cards
var fakeCardDiv = document.createElement( "div" );
fakeCardDiv.setAttribute("class", ("fakeCard"));
fakeCardDiv.setAttribute("id", ("c" + c));
$( "body" ).append( $(fakeCardDiv ) );
$("#c" + c).css("height", $("#passages").height());
$("#c" + c).css("width", "60%");
var position = $("#passages").position();
$(".fakeCard").css("top", "32px");
//$(".fakeCard").css("left", "0");
cardThere = true;
} else {
//make some fake cards
var fakeCardDiv = document.createElement( "div" );
fakeCardDiv.setAttribute("class", ("fakeCard"));
fakeCardDiv.setAttribute("id", ("c" + c));
$( "body" ).append( $(fakeCardDiv ) );
$("#c" + c).css("height", $("#passages").height());
$("#c" + c).css("width", $("#passages").width());
var position = $("#passages").position();
$("#c" + c).css("top", position.top);
cardThere = true;
}
c++;
}
//resize the background card appropriately
$( window ).resize(function() {
//follow card size
var pasHeight = $("#passages").height() + parseFloat($("#passages").css("padding-top")) + parseFloat($("#passages").css("padding-bottom"));
var pasWidth = $("#passages").width() + parseFloat($("#passages").css("padding-left")) + parseFloat($("#passages").css("padding-right"));
$("#cardWrap").css("height", pasHeight);
$("#cardWrap").css("width", pasWidth);
$("#cardWrap").css("top", 0);
$("#cardWrap").css("left", 0);
cardPile();
});