DAN ZEN EXPO - CODE EXHIBIT -
PIECES
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Pieces</title> <!-- by Dan Zen 2014 - http://danzen.com - free to modify -->
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<!-- for Google -->
<meta name="description" content="Describe App" />
<meta name="keywords" content="keyword 1, keyword 2" />
<meta name="author" content="App Creator" />
<meta name="copyright" content="App Company" />
<!-- for Facebook -->
<meta property="og:title" content="App Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="url_to-image_for_facebook" />
<meta property="og:url" content="url_of_app" />
<meta property="og:description" content="Describe App - shows in share" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" /> <!-- do not edit this line (must say "summary") -->
<meta name="twitter:title" content="App Title" />
<meta name="twitter:description" content="Describe App - shows on Twitter" />
<meta name="twitter:image" content="url_to-image" />
<!-- for Apple -->
<!-- found user-scalable=no worked best for full screen auto scaling -->
<meta name="viewport" content="user-scalable=no, minimal-ui" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon-precomposed" href="url_to_icon_57x57" />
<script>var zon = true; // true for comments from zim code</script>
<script src="http://d309knd7es5f10.cloudfront.net/zim_1.4.3.js"></script>
<script src="ajax.js"></script>
<style>
body {margin:0px; padding:0px; background-color:#000;}
#myCanvas {position:absolute; background-color:#000;}
#myExtra {position:absolute; display:none; z-index:2;}
@font-face {
font-family: wildwoodBold;
src: url(ChurchintheWildwood-Bold.ttf);
}
@font-face {
font-family: wildwood;
src: url(ChurchintheWildwood-Regular.ttf);
}
@font-face {
font-family: zebrawood;
src: url(Zebrawood-Fill.otf);
}
#fpCodeWord, #hpMakeCodeWord, #hpMakePassWord, #hpCodeWord, #hpPassWord, #hpStoryTitle, #hpStoryText, #hpSponsorUrl1, #hpSponsorUrl2 {
padding:5px;
color:#666;
background-color:#ddd;
font-family:verdana;
position:relative;
resize:none;
}
input[type="file"] {
position:relative;
cursor:pointer;
}
#message {
z-index:200;
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
display:none;
}
#box {
/*display:none;*/
position:absolute;
width:80%;
margin:10%;
background-color:#444;
height:80%;
display:block;
-moz-box-shadow: 0 0 20px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
#close {
padding:30px;
background-color:#CCC;
color:#333;
font-family:verdana, sans-serif;
font-size:40px;
position:relative;
float:right;
cursor:pointer;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
-o-user-select: none;
user-select: none;
}
#words {
clear:right;
color:#CCC;
text-align:center;
font-family:verdana, sans-serif;
font-size:30px;
position:relative;
width:90%;
top:10%;
padding:5%;
background-color:#0b8d95; /*#44f;*/
}
</style>
<!-- include the complete createJS suite
or can go to createjs.com for individual code
EaselJS - working with Canvas - drawing and objects
TweenJS - animation with code
SoundJS - working with Sound
PreloadJS - preload images to work with
-->
<script src="http://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="mvc/model.js"></script>
<script src="mvc/view_main.js"></script>
<script src="mvc/view_hide.js"></script>
<script src="mvc/view_find.js"></script>
<script src="mvc/controller.js"></script>
<script>
// META - this code was made before ZIM Template (should now use ZIM Template)
// ------------------ TOP TEMPLATE ------------------ (APP STARTS AT START APP)
// SCALING OPTIONS
// "none" no scaling and uses the stageW and stageH dimensions
// "fit" scales canvas dimensions to fit inside window size
// "outside" scales canvas dimensions to fit outside window size
// "full" no scaling, just sets canvas to screen size
// for full, the stageW and stageH will be automatically adjusted
// to match window size - so do not bother setting them below
// for all the others, the stageW and stageH do not change
// and will be the values you put below
// COMBINED
// you can combine full and fit - set scaling to full
// then put a createjs Container with bounds set as your "workArea"
// then zim.fit(workArea, 0, 0, stageW, stageH);
// all your dimensions will be relative to the workArea bounds
// yet your content will be able to go everywhere on the screen
// there will be no bounding edges like in fit scaling mode
// WARNING
// have found that on mobile apple in full mode
// we need to set the viewport to content="user-scalable=no" (but who really knows)
var scaling = "full";
var stageW = 500; // ignored if scaling is full
var stageH = 500;
var largest; // automatically set
var appOrientation; // watch out - orientation keyword is used by apple - sigh
var lastOrientation; // used to detect orientation change
var cjs = createjs; // shorter namespace if desired
var stage;
var preload;
var progress;
var zilEvents; // events to stop page from moving
var appReady = false; // check variable - set true when ready ;-) (watch - "ready" is reserved)
window.addEventListener('load', init);
if (scaling != "none") window.addEventListener('resize', sizeCanvas);
function init() {
/*
var dd = {
code:"corners",
title:"Creatures in Corners!",
story:"In this building, there are creatures that transmorph in corners. Go to the corners of the rooms and press the look button to see if a creature is there and collect its image. Find all six creatures and bring your device to the Creature Creator booth to win a prize!\n\nBig thanks to our sponsors - please visit their sites.\n\nHave fun!\nThe Creature Creator Team - 2014.",
pic:"jpg",
arrangement:"a6H",
tile:6,
spacing:true,
tilePics:["jpg","jpg","jpg","jpg","jpg","jpg"],
sponsor1Pic:null,
sponsor1Url:"http://danzen.com",
sponsor2Pic:null,
sponsor2Url:"http://tilty.mobi",
odds:.7,
time:1000
}
*/
// zog(JSON.stringify(dd));
//'{"code":"corners","title":"Creatures in Corners!","story":"In this building, there are creatures that transmorph in corners. Go to the corners of the rooms and press the look button to see if a creature is there and collect its image. Find all six creatures and bring your device to the Creature Creator booth to win a prize!\n\nBig thanks to our sponsors - please visit their sites.\n\nHave fun!\nThe Creature Creator Team - 2014.","pic":"jpg","arrangement":"a6H","tile":6,"spacing":true,"tilePics":["jpg","jpg","jpg","jpg","jpg","jpg"],"sponsor1Pic":null,"sponsor1Url":"http://danzen.com","sponsor2Pic":null,"sponsor2Url":"http://tilty.mobi","odds":0.7,"time":1000}'
// for mobile - pan to the bottom, hides the location bar
// need to set a delay though
// setTimeout(function() {window.scrollTo(0, 1);}, 100);
if (scaling != "none") sizeCanvas();
if (scaling == "full") zilEvents = zil(); // keep canvas still (from arrows, scrollwheel, etc.)
stage = new createjs.Stage("myCanvas");
stage.setBounds(0, 0, stageW, stageH);
stage.enableMouseOver(10); // if you need mouse rollover
createjs.Touch.enable(stage,true); // added for mobile
makeProgress();
// activate these at end to add images and sound
var contentPath = "content/";
manifest = [{src:"home_s.jpg", id:"home"},{src:"homeT_s.jpg", id:"homeT"}, {src:"find_s.jpg", id:"find"}, {src:"hide_s.jpg", id:"hide"}, {src:"alert.png", id:"alert"}]; // array of objects
for (var i=1; i<=9; i++) {
manifest.push({src:"b"+i+".jpg", id:"b"+i});
manifest.push({src:"h"+i+".jpg", id:"h"+i});
}
preload = new createjs.LoadQueue(false, contentPath); // use true if on the same server
// preload.installPlugin(createjs.Sound); // sound requires this plugin call
preload.on("progress", animateProgress); // this will update the progress
preload.on("complete", pieces); // call the main code when ready
preload.loadManifest(manifest);
// pieces(); // comment this out when you have preload going
}
function makeProgress() {
progress = new createjs.Container();
// more code in here to make bar or text or whatever, etc.
// we do not animate the progress here - we do that in preloadProgress()
stage.addChild(progress);
stage.update();
}
function animateProgress(e) {
// zog("progress " + e.target.progress);
// this event runs quite quickly and often
// e.target is the preload object in this case
// the progress property gives a number from 0-1 representing progress
// in percent we would multiply by 100
// we would operate on the progress object we established in makeProgress()
}
// ------------------ END TOP TEMPLATE ------------------
// there are a few things to do above
// such as set scale mode, perhaps stageW and stageH, preload things
// and adjust the appName() function in the init() call above
// ------------------ START APP ------------------
// app global variables here (such as layoutManager, guideManager, gridManager, pages)
var data;
var layoutManager;
var guideManager;
var gridManager;
var mainPages; // holds the ZIM Pages objects direct navigation and handle swipes
var hidePages;
var findPages;
var mp; var hp; var fp; // holds all laid out page assets for main pages, hide and find pages
var waiter;
var backings = [];
var overlays; // holds things like pop Panes and Waiters
function pieces() {
zog("hi from Pieces");
// INTRODUCTION
// the strategy is to start with a central page
// swiping down shows the Hide page which comes from above (up)
// or swiping up shows the Find page which comes from below (down)
// once on the hide or find page we swipe left to show the page on the right
// we continue to swipe left to show more pages in that section
// at any time, we can swipe back to the middle page
// PAGE SWIPING
// this is more complicated than simply a linear path horizontally or vertically
// it is also more complicated than a grid
// ZIM has a Pages class that lets you swipe between pages with a Pages object
// both linear and a grid can be accomplished with one Pages class
// to handle our current strategy we will use three Pages objects
// the first Pages object will handle three pages that swipe vertically
// Hide at top, the main menu page in the middle and Find at bottom
// we then nest a second Pages object as the Hide page
// the second Pages object swipes horizontally
// however, any vertical swipe acts on the first Pages object
// so on any Hide pages we can swipe up to reveal the main menu page
// the third Pages object goes on the Find page and swipes horizontally
// the Pages objects handle navigation and transitions automatically
// a "page" event is also triggered for extra functionality
// HOTSPOTS
// instead of having buttons all over the place we define them centrally
// with the ZIM HotSpots class which puts hotSpots on pages in certain locations
// you specify a rectangle or an object to put the hotSpot on
// each hotSpot has an associated page object and a string id
// and a callback function for when the spot is clicked
// the functions generally call the Pages objects' go() method
// but some hotSpots also do things other than navigation
// ASSET HANDLING
// basically we preload the initial images and make the first three pages
// and then call a function for creating all the Hide pages
// these are stored in a hp object
// and then we call a function for creating all the Find pages
// these are stored in a fp object
// we use the ZIM Grid class to make a layout grid to position elements
// use the G key to toggle the grid
// DATA HANDLING
// the Hide section has data and image uploads
// that get stored on the server and in a database
// the Find section has assets that come from the database
// these get loaded once a code word is submitted
// this makes the app a little trickier as we do not have all the assets at start
// so various asyncronous data occurs through AJAX calls
//////////////////////////////////////////////////////////////////////////////
// PART 0 - INIT
// pages will have assets positioned with ZIM Layout objects
// these can be stored and managed with LayoutManagers
layoutManager = new zim.LayoutManager();
// ZIM Grids show either percentage or pixel lines to help layout
// sometimes we might want specific grids for scaled content regions
// these can be stored and managed with the GridManager
gridManager = new zim.GridManager();
// ZIM Guides show a horizontal or vertical dragable line
// then a text field shows the distance of your cursor from the line
// handy for measuring the distance between things in percent or pixels
// these can be stored and managed with the GuideManager
guideManager = new zim.GuideManager();
// make a ZIM Waiter object to show page is loading
// the controller will waiter.show() and waiter.hide() as needed
waiter = new zim.Waiter(stage); // other parameters available
// PART 1 - DATA (MODEL.JS)
// app is the namespace set out for the current application
// see the model.js for an example
// NOTE: would really put the data call up in the init function
// but wanted to separate from template for demonstration
data = new app.Data(); // in model.js - go get initial data
// PART 2 - CREATE ASSETS (VIEW JS PAGES)
// call functions in the view_main, view_hide and view_find js files
// to prepare asset pages stored in containers with name properties
// for example fp.code, fp.intro, fp.story, etc.
// they will have buttons and input fields exposed
// for example hp.codeNext is the next button on the code page
// these are all laid out with Layout objects stored in layoutManager
mp = app.mLayouts(); // main pages layouts (home, hide and find backings);
hp = app.hLayouts(); // hide pages layouts;
fp = app.fLayouts(); // find pages layouts;
// organize the Hide pages with a ZIM Pages object
// which handles transitions and swipe control
// any buttons and hotspots are handled with the HotSpots class
// the HotSpots object is created later but calls hidePages.go()
// create Pages and pass in the names of pages and directions
// to the left, right, up, and down
// pages with a save button will not get swipes to the next screen
// same with any pages with code verification
// they get only the click on the save HotSpot
hidePages = new zim.Pages(stage,[
{page:hp.first, swipe:[null,null,null,null]},
{page:hp.code, swipe:[hp.first,null,null,null]},
{page:hp.edit, swipe:[hp.first,null,null,null]},
{page:hp.intro, swipe:[hp.code,null,null,null]},
{page:hp.story, swipe:[hp.intro,null,null,null]},
{page:hp.pieces, swipe:[hp.story,null,null,null]},
{page:hp.tile, swipe:[hp.pieces,null,null,null]},
{page:hp.game, swipe:[hp.tile,null,null,null]},
{page:hp.sponsor, swipe:[hp.game,null,null,null]}
], "none", 200);
/*
hidePages.transitionTable = [
[fp.first,fp.code,"none"],[fp.code,fp.first,"none"],
[fp.story,fp.tile,"none"],[fp.tile,fp.story,"none"],
[fp.tile,fp.look,"none"],[fp.look,fp.tile,"none"]
];
*/
// all these pages get added to the hide page
// this allows us to swipe sideways through the pages
// but at any time, swipe down to go back to the main page
mp.hide.addChild(hidePages);
// organize the Find pages with a ZIM Pages object
// which handles transitions and swipe control
// any buttons and hotspots are handled with the HotSpots class
// the HotSpots object is created later but calls findPages.go()
// create Pages and pass in the names of pages and directions
// to the left, right, up, and down
findPages = new zim.Pages(stage,[
{page:fp.code, swipe:[null,null,null,null]},
{page:fp.intro, swipe:[fp.code,fp.story,null,null]},
{page:fp.story, swipe:[fp.intro,fp.tile,null,null]},
{page:fp.tile, swipe:[fp.story,fp.look,null,null]},
{page:fp.look, swipe:[fp.tile,null,null,null]}
], "fade", 200);
// if we want to override transitions we can do so like so
// in this case we do, because consecutive pages have the same title
// and we do not want to transition the same title in and out
findPages.transitionTable = [
[fp.intro,fp.story,"none"],[fp.story,fp.intro,"none"],
[fp.story,fp.tile,"none"],[fp.tile,fp.story,"none"],
[fp.tile,fp.look,"none"],[fp.look,fp.tile,"none"]
];
mp.find.addChild(findPages);
// organize main pages with a ZIM Pages object
// this gives vertical swiping between the Hide, Main Menu and Find sections
// names of pages in directions to the left, right, up, and down
mainPages = new zim.Pages(stage,[
{page:mp.home, swipe:[null,"info",mp.hide,mp.find]},
{page:mp.hide, swipe:[null,null,null,mp.home]},
{page:mp.find, swipe:[null,null,mp.home,null]}
], "reveal", 200); // "reveal" // "slide" // default is "instant"
stage.addChild(mainPages);
overlays = new cjs.Container();
stage.addChild(overlays);
overlays.setBounds(0,0,640,640); // will scale to center fit stage
// PART 3 - ADD FUNCTIONALITY (CONTROLLER.JS)
// this handles all ZIM hotSpots press navigation and interface
// and any swipe code not automatically handled by Pages objects
var hs = app.makeFunctionality();
// forcing nav to page being worked on
// hidePages.go(hp.sponsor, "right");
// mainPages.go(mp.hide, "up");
layoutManager.dispose();
// keep at end of main function
// for the fit scale mode you will probably need to code below
// to scale things as the screen size varies
appReady = true;
zss("myExtra").display = "block";
fullResize();
stage.update();
}
// used in full scaling mode to resize content (not needed for none, fit and outside modes)
// resize layoutManagers, guideManagers, gridManagers, pages
// handle orientation changes by disabling and enabling layoutManagers and pages
// see ZIM Pages live example
function fullResize() { // called from the sizeCanvas() function below if in full mode
if (!appReady) return;
// do any custom scaling
// here is a guideline for using the ZIM Pages module
// if orientation change then swap Pages objects
// puff new pages and resize before puff settles ;-)
/*
if (appOrientation != lastOrientation) {
lastOrientation = appOrientation;
if (appOrientation == "horizontal") {
// disable and enable appropriate pages and layoutManager
} else {
// disable and enable appropriate pages and layoutManager
}
} else {
if (appOrientation == "horizontal") {
// just update appropriate layoutManager
} else {
// just update appropriate layoutManager
}
}
if (appOrientation == "horizontal") {
// resize appropriate pages (because of transition)
} else {
// resize appropriate pages (because of transition)
}
// if no orientation change, just resize the pages
*/
// if no orientation change, just resize the layoutManager
layoutManager.resize();
// if no orientation change, just resize the pages
mainPages.resize();
hidePages.resize();
findPages.resize();
// resize the guideManager
guideManager.resize();
// resize the gridManager
gridManager.resize();
// scale overlays
if (overlays) zim.fit(overlays, 0,0,stageW,stageH);
// resize any extra HTML content like input fields
// I had some problems scaling DOMElement so here is what I did:
// this code would go down in your HTML
// you may want to display:none initially
// and once your app is ready and resized, display:block
// or store all the input fields in a div and set display:none on that
// <input type="text" width="400" id="fieldID" />
// this code would go where you make your content:
// var dField = new cjs.DOMElement(zid("fieldID"));
// stage.addChild(dField);
// dField.alpha = 0; // ready field for tween
// var textShape = new createjs.Shape;
// textShape.graphics.f("white").r(0,0,200,50); // or whatever
// textShape.setBounds(0,0,200,50);
// and add this to the content - positioned and scaled it, etc.
// this code would go here in the scaling function:
// get the rectangle of the textShape relative to the stage
// var b = zim.boundsToGlobal(textShape);
// and position and scale the HTML input tag to those bounds
// var field = zss("fieldID");
// field.left = (b.x)+"px";
// field.top = (b.y)+"px";
// field.width = (b.width)+"px";
// field.fontSize = (b.height/2)+"px";
// note we let the HTML figure out the height of the rectangle
// based in a tweaked fontSize scale
// then finally, when you are ready to show your input field
// use this code to fade the text in and similar code to fade out
// zim.animate(dField, {alpha:1}, 400);
// anytime you want to know what is in your text field
// use zid("fieldID").value
// the Dan Zen Pieces app uses this technique http://pieces.mobi
// move the extra container to the stage position
// unfortunately, scaling the container does not scale the contents
var can = zss("myCanvas");
var extra = zss("myExtra");
extra.left = can.left;
extra.top = can.top;
// for the hp code page (create new pieces)
var hpMakeCodeWord = zss("hpMakeCodeWord");
var hpMakePassWord = zss("hpMakePassWord");
// for the hp edit page (edit existing pieces)
var hpCodeWord = zss("hpCodeWord");
var hpPassWord = zss("hpPassWord");
// for the hp intro upload button
var hpIntroUpload = zss("hpIntroUpload");
// for the hp sponsor1 upload button
var hpSponsorUpload1 = zss("hpSponsorUpload1");
var hpSponsorUpload2 = zss("hpSponsorUpload2");
var hpSponsorUrl1 = zss("hpSponsorUrl1");
var hpSponsorUrl2 = zss("hpSponsorUrl2");
// for the hp story page
var hpStoryTitle = zss("hpStoryTitle");
var hpStoryText = zss("hpStoryText");
var b;
if (hp) {
b = zim.boundsToGlobal(hp.codeWordShape);
if (b) {
hpMakeCodeWord.left = (b.x)+"px";
hpMakeCodeWord.top = (b.y)+"px";
hpMakeCodeWord.width = (b.width)+"px";
hpMakeCodeWord.fontSize = (b.height/2)+"px";
}
// now we scale input fields to fit bounds
// the bounds are made in the hide.js and find.js
b = zim.boundsToGlobal(hp.codePassShape);
if (b) {
hpMakePassWord.left = (b.x)+"px";
hpMakePassWord.top = (b.y)+"px";
hpMakePassWord.width = (b.width)+"px";
hpMakePassWord.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.editWordShape);
if (b) {
hpCodeWord.left = (b.x)+"px";
hpCodeWord.top = (b.y)+"px";
hpCodeWord.width = (b.width)+"px";
hpCodeWord.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.editPassShape);
if (b) {
hpPassWord.left = (b.x)+"px";
hpPassWord.top = (b.y)+"px";
hpPassWord.width = (b.width)+"px";
hpPassWord.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.introContent);
if (b) {
hpIntroUpload.left = (b.x)+"px";
hpIntroUpload.top = (b.y)+"px";
hpIntroUpload.width = (b.width)+"px";
hpIntroUpload.height = (b.height)+"px";
}
b = zim.boundsToGlobal(hp.sponsorTile1);
if (b) {
hpSponsorUpload1.left = (b.x)+"px";
hpSponsorUpload1.top = (b.y)+"px";
hpSponsorUpload1.width = (b.width)+"px";
hpSponsorUpload1.height = (b.height)+"px";
}
b = zim.boundsToGlobal(hp.sponsorTile2);
if (b) {
hpSponsorUpload2.left = (b.x)+"px";
hpSponsorUpload2.top = (b.y)+"px";
hpSponsorUpload2.width = (b.width)+"px";
hpSponsorUpload2.height = (b.height)+"px";
}
b = zim.boundsToGlobal(hp.sponsorUrlShape1);
if (b) {
hpSponsorUrl1.left = (b.x)+"px";
hpSponsorUrl1.top = (b.y)+"px";
hpSponsorUrl1.width = (b.width)+"px";
hpSponsorUrl1.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.sponsorUrlShape2);
if (b) {
hpSponsorUrl2.left = (b.x)+"px";
hpSponsorUrl2.top = (b.y)+"px";
hpSponsorUrl2.width = (b.width)+"px";
hpSponsorUrl2.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.storyTitleShape);
if (b) {
hpStoryTitle.left = (b.x)+"px";
hpStoryTitle.top = (b.y)+"px";
hpStoryTitle.width = (b.width)+"px";
hpStoryTitle.fontSize = (b.height/2)+"px";
}
b = zim.boundsToGlobal(hp.storyTextShape);
if (b) {
hpStoryText.left = (b.x)+"px";
hpStoryText.top = (b.y)+"px";
hpStoryText.width = (b.width)+"px";
hpStoryText.height = (b.height)+"px";
}
for (var i=0; i<backings.length; i++) {
b = backings[i];
b.x = stageW / 2;
zim.scale(b,stageH/b.getBounds().height);
}
if (app.positionTileButtons) app.positionTileButtons();
}
// for the fp code page
var fpCodeWord = zss("fpCodeWord");
if (fp) {
b = zim.boundsToGlobal(fp.codeWordShape);
if (b) {
fpCodeWord.left = (b.x)+"px";
fpCodeWord.top = (b.y)+"px";
fpCodeWord.width = (b.width)+"px";
fpCodeWord.fontSize = (b.height/2)+"px";
}
}
// and update the stage
if (stage) stage.update();
}
// ------------------ END APP ------------------
// ------------------ BOTTOM TEMPLATE ------------------
// should not have to do anything below here
// unless you need HTML code (such as input fields)
function sizeCanvas() {
var can = zid("myCanvas");
var w = window.innerWidth;
var h = window.innerHeight;
var newH;
var newW;
appOrientation = (w > h) ? "horizontal" : "vertical";
if (scaling == "fit") {
// scales canvas to fit dimensions inside screen
if (w/h >= stageW/stageH) {
newH = h;
newW = newH*stageW/stageH;
} else {
newW = w;
newH = newW*stageH/stageW;
}
} else if (scaling == "outside") {
// scales canvas so screen inside dimensions
document.body.style.overflow = "hidden";
if (w/h >= stageW/stageH) {
newW = w;
newH = newW*stageH/stageW;
} else {
newH = h;
newW = newH*stageW/stageH;
}
} else if (scaling == "full") {
// does not scale canvas but sets width and height to screen
document.body.style.overflow = "hidden";
can.style.left = can.style.top = "0px";
stageW = w;
stageH = h;
if (stage) stage.setBounds(0,0,stageW,stageH);
fullResize();
return;
}
can.style.width = newW + "px";
can.style.height = newH + "px";
// horizontal center
can.style.left = ((w-newW)/2) + "px";
// vertical center
can.style.top = ((h-newH)/2) + "px";
}
function makeCanvas() {
// note the width and height of a canvas
// are separate from from the width and height styles
// so beware of unintentionally stretching the canvas with styles
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "myCanvas");
largest = Math.max(window.innerWidth, screen.width, window.innerHeight, screen.height);
// does not work on iOS6 in full screen if loading from icon unless keep canvas at device size
// thank you apple for this and many other days of hell
if (scaling == "full") {
canvas.setAttribute("width", largest);
canvas.setAttribute("height", largest);
} else {
canvas.setAttribute("width", stageW);
canvas.setAttribute("height", stageH);
}
document.body.appendChild(canvas);
}
function closeMessage() {
zss("message").display = "none";
}
</script>
</head>
<body>
<script>makeCanvas();</script>
<div id="myExtra">
<input type="text" width="380" id="fpCodeWord" />
<input type="text" width="380" id="hpMakeCodeWord" />
<input type="text" width="380" id="hpMakePassWord" />
<input type="text" width="380" id="hpCodeWord" />
<input type="text" width="380" id="hpPassWord" />
<input type="text" width="380" id="hpStoryTitle" />
<textarea width="380" id="hpStoryText" rows="3"></textarea>
<input type="file" id="hpIntroUpload" onchange="app.uploadIntro()" accept="image/*" />
<input type="file" id="hpSponsorUpload1" onchange="app.uploadSponsor(1)" accept="image/*" />
<input type="text" width="380" id="hpSponsorUrl1" />
<input type="file" id="hpSponsorUpload2" onchange="app.uploadSponsor(2)" accept="image/*" />
<input type="text" width="380" id="hpSponsorUrl2" />
<input type="file" id="hpTileUpload1" onchange="app.uploadTile(1)" accept="image/*" />
<input type="file" id="hpTileUpload2" onchange="app.uploadTile(2)" accept="image/*" />
<input type="file" id="hpTileUpload3" onchange="app.uploadTile(3)" accept="image/*" />
<input type="file" id="hpTileUpload4" onchange="app.uploadTile(4)" accept="image/*" />
<input type="file" id="hpTileUpload5" onchange="app.uploadTile(5)" accept="image/*" />
<input type="file" id="hpTileUpload6" onchange="app.uploadTile(6)" accept="image/*" />
<input type="file" id="hpTileUpload7" onchange="app.uploadTile(7)" accept="image/*" />
<input type="file" id="hpTileUpload8" onchange="app.uploadTile(8)" accept="image/*" />
<input type="file" id="hpTileUpload9" onchange="app.uploadTile(9)" accept="image/*" />
</div>
<div id="message">
<div id="box">
<div id="close" onclick="closeMessage();">X</div>
<div id="words">Hide pieces for others to find or find pieces that others have hidden</div>
</div>
</div>
</body>
</html>
<script>
// these are not really in script tags but for sake of syntax coloring engine, so be it.
// model.js - for data handling
var app = function(app) {
app.Data = function () {
zog("hi from Data");
var that = this; // give access to object inside functions
this.hideData = {};
this.findData = {};
this.newFindData = true;
// if data changes set to true
// however, find data will only update if start at code word entry
// perhaps not optimal but should be okay
// read in from database so I can change them
this.defaultSponsor1Pic = "danzen.png";
this.defaultSponsor1Url = "http://danzen.com";
this.defaultSponsor2Pic = "tilty.png";
this.defaultSponsor2Url = "http://tilty.mobi";
this.defaultDataDirectory = "https://s3.amazonaws.com/piecesmobi/";
//--------------------------------- AJAX
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (result) {
var initData = JSON.parse(result);
that.defaultSponsor1Pic = initData.defaultSponsor1Pic;
that.defaultSponsor1Url = initData.defaultSponsor1Url;
that.defaultSponsor2Pic = initData.defaultSponsor2Pic;
that.defaultSponsor2Url = initData.defaultSponsor2Url;
that.defaultDataDirectory = initData.defaultDataDirectory;
}
}
var string = 'code=start';
client.makeRequest('http://danzen.com/pieces/app/ajax_start.php', string);
//----------------------------------
// general error message
this.codeError = function(t) {
app.showMessage(t, "#cc0000");
}
// hp.code
this.addCode = function(codeWord, passWord) {
// go to database with ajax and find
// if code word is taken - if not, add it to database return true
// otherwise return false
//--------------------------------- AJAX
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (!result || result == 0) {
that.addResult = false;
} else {
that.hideData = {code:codeWord, pass:passWord, status:0, tilePics:[]};
that.addResult = true;
}
that.dispatchEvent("addResult");
}
var string = 'command=add&code='+codeWord+"&pass="+passWord;
client.makeRequest('http://danzen.com/pieces/app/ajax_data.php', string);
//----------------------------------
}
var lastHideData = "";
var lastHidePublish = false;
function generalUpdate(publish) {
// send type to database with ajax to update json object for codeword
// do not bother responding
//--------------------------------- AJAX
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
zog(result);
}
var json = JSON.stringify(that.hideData);
if (json == lastHideData && publish == lastHidePublish) {
that.newFindData = false;
return;
} // no point in updating
lastHideData = json;
lastHidePublish = publish;
that.newFindData = true;
var added = "";
if (!zot(publish)) added = "&status="+((publish)?1:0);
var string = 'command=update&json='+json+'&code='+that.hideData.code+"&pass="+that.hideData.pass+added;
zog(string);
client.makeRequest('http://danzen.com/pieces/app/ajax_data.php', string);
//----------------------------------
}
this.updateIntro = function(type) {
that.hideData.pic = type;
generalUpdate();
}
this.updateStory = function(title, story) {
that.hideData.title = title;
that.hideData.story = story;
generalUpdate();
}
this.updateLayout = function(tile, arrangement, spacing, numTiles) {
that.hideData.tile = tile; // the tile arrangement index
that.hideData.arrangement = arrangement;
that.hideData.spacing = spacing;
that.hideData.numTiles = numTiles;
generalUpdate();
}
this.updateTilePic = function(type, num) {
that.hideData.tilePics[(num-1)] = type;
generalUpdate();
}
this.updateGame = function(odds, time) {
that.hideData.odds = Number(odds.split("%")[0]) / 100;
var timeA = time.split(" ");
var t = Number(timeA[0]);
if (timeA[1] == "min") {
t = t * 60;
} else if (timeA[1] == "day") {
t = t * 60 * 60 * 24;
}
that.hideData.time = t * 1000;
zog(that.hideData.odds, that.hideData.time);
generalUpdate();
}
this.updateSponsorPic = function(type, num) {
that.hideData["sponsor"+num+"Pic"] = type;
generalUpdate();
}
this.updatePublish = function(sponsor1Url, sponsor2Url, publish) {
that.hideData.sponsor1Url = sponsor1Url;
that.hideData.sponsor2Url = sponsor2Url;
generalUpdate(publish);
}
// hp.edit
this.editCode = function(codeWord, passWord) {
// go to database with ajax and find
// if codeword and password match
// otherwise return false
//--------------------------------- AJAX
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (!result || result == 0) {
that.editResult = false;
} else {
var temp = result.split("|");
var publish = temp.shift();
var ddd = temp.join("|");
that.hideData = JSON.parse(ddd);
that.hideData.publish = Number(publish);
that.hideData.code = codeWord;
that.hideData.pass = passWord;
that.editResult = true;
}
that.dispatchEvent("editResult");
}
var string = 'command=edit&code='+codeWord+"&pass="+passWord;
client.makeRequest('http://danzen.com/pieces/app/ajax_data.php', string);
//----------------------------------
/*
that.hideData = {
code:codeWord,
pass:passWord,
title:"Creatures in Corners!",
story:"In this building, there are creatures that transmorph in corners. Go to the corners of the rooms and press the look button to see if a creature is there and collect its image. Find all six creatures and bring your device to the Creature Creator booth to win a prize!\n\nBig thanks to our sponsors - please visit their sites.\n\nHave fun!\nThe Creature Creator Team - 2014.",
pic:"jpg",
arrangement:"a6H",
tile:6,
spacing:true,
tilePics:["jpg","jpg","jpg","jpg","jpg","jpg"],
sponsor1Pic:"jpg",
sponsor1Url:"http://danzen.com",
sponsor2Pic:"jpg",
sponsor2Url:"http://tilty.mobi",
odds:.7,
time:5000
}
*/
}
//tilePics:["c_1.jpg","c_2.jpg","c_3.jpg","c_4.jpg","c_5.jpg","c_6.jpg"],
this.checkCode = function(codeWord) {
//AJAX to go to database and check code phrase
//--------------------------------- AJAX
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (!result || result == 0) {
that.checkResult = false;
} else {
that.findData = JSON.parse(result);
that.findData.code = codeWord;
that.checkResult = true;
}
that.dispatchEvent("checkResult");
}
var string = 'code='+codeWord;
client.makeRequest('http://danzen.com/pieces/app/ajax_data.php', string);
//----------------------------------
/*
that.findData = {
code:codeWord,
title:"Creatures in Corners!",
story:"In this building, there are creatures that transmorph in corners. Go to the corners of the rooms and press the look button to see if a creature is there and collect its image. Find all six creatures and bring your device to the Creature Creator booth to win a prize!\n\nBig thanks to our sponsors - please visit their sites.\n\nHave fun!\nThe Creature Creator Team - 2014.",
pic:"jpg",
arrangement:"a6H",
tile:6,
spacing:true,
tilePics:["jpg","jpg","jpg","jpg","jpg","jpg"],
sponsor1Pic:null,
sponsor1Url:"http://danzen.com",
sponsor2Pic:null,
sponsor2Url:"http://tilty.mobi",
odds:.7,
time:1000
}
*/
}
}
app.Data.prototype = new createjs.EventDispatcher();
app.Data.prototype.constructor = app.Data;
return app;
} (app || {});
// view_main.js for main pages assets
var app = function(app) {
app.mLayouts = function () {
// all the page layouts are stored in containers with name properties
// add any properties we want in the main file to the mp object
// otherwise keep variables local
var mp = {};
// ------------- home page ---------------
mp.home = new cjs.Container();
mp.home.name = "home";
var homeContainer = mp.home.container = new cjs.Container();
mp.home.addChild(homeContainer);
var homePic = new cjs.Bitmap(preload.getResult("home"));
homeContainer.addChild(homePic);
homeContainer.regX = homeContainer.getBounds().width/2;
backings.push(homeContainer);
// zog (homeContainer.getBounds().width/2);
// preload fonts by calling them on first page
// these will not be needed until later as first page is only an image
var preloadText1 = new cjs.Text("1", "30px wildwood", "orange");
mp.home.addChild(preloadText1);
preloadText1.alpha = .01;
preloadText1.x = 630;
preloadText1.y = 950;
var preloadText2 = new cjs.Text("0", "30px wildwoodBold", "orange");
mp.home.addChild(preloadText2);
preloadText2.alpha = .01;
preloadText2.x = 635;
preloadText2.y = 950;
var preloadText3 = new cjs.Text("0", "30px zebrawood", "orange");
mp.home.addChild(preloadText3);
preloadText3.alpha = .01;
preloadText3.x = 635;
preloadText3.y = 950;
// ------------- hide page ---------------
// this acts as backing for the real hide pages
mp.hide = new cjs.Container();
mp.hide.name = "hide";
var hideContainer = mp.hide.container = new cjs.Container();
mp.hide.addChild(hideContainer);
var hidePic = new cjs.Bitmap(preload.getResult("hide"));
hideContainer.addChild(hidePic);
hideContainer.regX = hideContainer.getBounds().width/2;
backings.push(hideContainer);
// ------------- find page ---------------
// this acts as backing for the real find pages
mp.find = new cjs.Container();
mp.find.name = "find";
var findContainer = mp.find.container = new cjs.Container();
mp.find.addChild(findContainer);
var findPic = new cjs.Bitmap(preload.getResult("find"));
findContainer.addChild(findPic);
findContainer.regX = findContainer.getBounds().width/2;
backings.push(findContainer);
return mp;
}
return app;
} (app || {});
// view_hide.js assets for hiding pieces
var app = function(app) {
app.hLayouts = function () {
// all the page layouts are stored in containers with name properties
// add any properties we want in the main file to the hp object
// otherwise keep variables local
var hp = {};
var hideNextLabel = new zim.Label("NEXT",60,"wildwoodBold","white","white");
var hideSaveLabel = new zim.Label("SAVE",60,"wildwoodBold","white","white");
// hide page :: first ------------------------------------------
hp.first = new cjs.Container(); // code word page
hp.first.name = "hpFirst";
var firstTop = new createjs.Container();
hp.first.addChild(firstTop);
// would recommend always adding content to a container
// for using the layout - makes it easier to conceptualize positioning
var firstTitle = new createjs.Text("HIDE PIECES", "70px wildwoodBold", "#913322");
firstTitle.textAlign = "left";
firstTitle.textBaseline = "alphabetic";
firstTitle.y = 50; // uppercase height
firstTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
firstTop.addChild(firstTitle);
var firstContent = new createjs.Container();
firstContent.setBounds(0,0,400,400);
hp.first.addChild(firstContent);
// labelText, fontSize, font, textColor, textRollColor, shadowColor, shadowBlur
var firstNewLabel = new zim.Label("NEW",60,"wildwoodBold","white","white");
// width, height, label,
// backingColor, backingRollColor, borderColor, borderThickness,
// corner, shadowColor, shadowBlur
hp.firstNew = new zim.Button(230,110,firstNewLabel,"#918100","#ac9900","#ddd",4,30,"#776a00",20);
firstContent.addChild(hp.firstNew);
var firstTextH = new createjs.Container();
firstContent.addChild(firstTextH);
var firstText = new createjs.Text("create new hunt\n or edit existing", "70px wildwoodBold", "white");
firstText.textAlign = "left";
firstText.textBaseline = "alphabetic";
firstText.y = 60; // lowercase height
firstText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
firstTextH.addChild(firstText);
var firstEditLabel = new zim.Label("EDIT",60,"wildwoodBold","white","white");
hp.firstEdit = new zim.Button(230,110,firstEditLabel,"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.firstEdit.y = 200;
firstContent.addChild(hp.firstEdit);
// gridManager.add(new zim.Grid(firstContent, "black", false));
// holder, region1, region2, region3, lastMargin, backgroundColor, vertical, regionShape, scalingObject
layoutManager.add(new zim.Layout(hp.first,
[{object:firstTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:firstContent, marginTop:9, height:50, maxWidth:90, align:"middle", valign:"middle"}],
25, null, true, new createjs.Shape(), stage));
layoutManager.add(new zim.Layout(firstContent,
[{object:hp.firstNew, maxWidth:50, minHeight:30, align:"left"},
{object:firstTextH, maxWidth:100, marginTop:5, valign:"top"},
{object:hp.firstEdit, maxWidth:50, marginTop:5, minHeight:30, valign:"top"}],
0, null, true, new createjs.Shape()));
// zim.outline(firstContent, new createjs.Shape());
/*
// custom-font bounding box is quite different in different browsers
// this means could not use centered text - only left aligned
zim.outline(firstTextH, new createjs.Shape());
*/
// hide page :: code ------------------------------------------
hp.code = new cjs.Container(); // code word page
hp.code.name = "hpCode";
var codeTop = new createjs.Container();
hp.code.addChild(codeTop);
var codeTitle = new createjs.Text("HIDE PIECES", "70px wildwoodBold", "#913322");
codeTitle.textAlign = "left";
codeTitle.textBaseline = "alphabetic";
codeTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
codeTitle.y = 50;
codeTop.addChild(codeTitle);
hp.codeContent = new createjs.Container();
hp.code.addChild(hp.codeContent);
hp.codeContent.setBounds(0,0,640,400);
var w = hp.codeContent.getBounds().width;
var codeText = new createjs.Text("make code word", "60px wildwoodBold", "white");
codeText.textAlign = "center";
codeText.textBaseline = "alphabetic";
codeText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
codeText.x = w/2;
codeText.y = 0;
hp.codeContent.addChild(codeText);
var codeText2 = new createjs.Text("for hunters", "60px wildwoodBold", "white");
codeText2.textAlign = "center";
codeText2.textBaseline = "alphabetic";
codeText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
codeText2.x = w/2;
codeText2.y = 52;
hp.codeContent.addChild(codeText2);
var codeText3 = new createjs.Text("and your password", "60px wildwoodBold", "white");
codeText3.textAlign = "center";
codeText3.textBaseline = "alphabetic";
codeText3.shadow = new createjs.Shadow("#999999", 3, 3, 10);
codeText3.x = w/2;
codeText3.y = 250;
hp.codeContent.addChild(codeText3);
// add the input field which sits on top of everything
// addChild will give us some c ontrol in createJS like alpha and tweening
// do not rely on position and scale because the scaled canvas messes it up
// because if this, would suggest only tweening alpha
// warning: if you removeChild the field then it shows up again in HTML
// and unfortunately, even with alpha=0 the cursor shows up
// so the best way to avoid this is display=none until you need it
hp.codeWord = new cjs.DOMElement(zid("hpMakeCodeWord"));
stage.addChild(hp.codeWord);
// hp.codeWord.alpha = 0;
zss("hpMakeCodeWord").display = "none";
hp.codePass = new cjs.DOMElement(zid("hpMakePassWord"));
stage.addChild(hp.codePass);
// hp.codePass.alpha = 0;
zss("hpMakePassWord").display = "none";
// these are place holders for the input text fields
// the input fields get scaled in the main code resizing functions
hp.codeWordShape = new createjs.Shape();
hp.codeWordShape.graphics.f("white").r(88,100,0,0);
hp.codeWordShape.setBounds(88,100,390,76);
hp.codeContent.addChild(hp.codeWordShape);
hp.codePassShape = new createjs.Shape();
hp.codePassShape.graphics.f("white").r(88,298,0,0);
hp.codePassShape.setBounds(88,298,390,76);
hp.codeContent.addChild(hp.codePassShape);
// gridManager.add(new zim.Grid(hp.codeContent, "black", false));
// note, will handle button events in ZIM HotSpot
var codeInfoLabel = new zim.Label("?",60,"wildwoodBold","white","white");
hp.codeInfo = new zim.Button(80,80,codeInfoLabel,"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.codeInfo.x = 522;
hp.codeInfo.y = 92;
hp.codeInfo.alpha = .7;
hp.codeContent.addChild(hp.codeInfo);
hp.codeInfo2 = new zim.Button(80,80,codeInfoLabel.clone(),"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.codeInfo2.x = 522;
hp.codeInfo2.y = 291;
hp.codeInfo2.alpha = .7;
hp.codeContent.addChild(hp.codeInfo2);
var codeBot = new createjs.Container();
w = 500;
h = 110
codeBot.setBounds(0,0,w,h);
hp.code.addChild(codeBot);
hp.codeBack = makeBackButton(0, (h-80)/2);
codeBot.addChild(hp.codeBack);
hp.codeNext = new zim.Button(230,110,hideNextLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.codeNext.x = (w-hp.codeNext.width)/2;
hp.codeNext.y = 0;
codeBot.addChild(hp.codeNext);
layoutManager.add(new zim.Layout(hp.code,
[{object:codeTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.codeContent, marginTop:10, maxWidth:100, align:"middle", valign:"middle"},
{object:codeBot, marginTop:5, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: edit ------------------------------------------
hp.edit = new cjs.Container(); // edit word page
hp.edit.name = "hpEdit";
var editTop = new createjs.Container();
hp.edit.addChild(editTop);
var editTitle = new createjs.Text("HIDE PIECES", "70px wildwoodBold", "#913322");
editTitle.textAlign = "left";
editTitle.textBaseline = "alphabetic";
editTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
editTitle.y = 50;
editTop.addChild(editTitle);
hp.editContent = new createjs.Container();
hp.edit.addChild(hp.editContent);
hp.editContent.setBounds(0,0,640,400);
var w = hp.editContent.getBounds().width;
var editText = new createjs.Text("enter existing", "60px wildwoodBold", "white");
editText.textAlign = "center";
editText.textBaseline = "alphabetic";
editText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
editText.x = w/2;
editText.y = 0;
hp.editContent.addChild(editText);
var editText2 = new createjs.Text("code word", "60px wildwoodBold", "white");
editText2.textAlign = "center";
editText2.textBaseline = "alphabetic";
editText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
editText2.x = w/2;
editText2.y = 52;
hp.editContent.addChild(editText2);
var editText3 = new createjs.Text("and your password", "60px wildwoodBold", "white");
editText3.textAlign = "center";
editText3.textBaseline = "alphabetic";
editText3.shadow = new createjs.Shadow("#999999", 3, 3, 10);
editText3.x = w/2;
editText3.y = 250;
hp.editContent.addChild(editText3);
// add the input field which sits on top of everything
// addChild will give us some control in createJS like alpha and tweening
// do not rely on position and scale because the scaled content messes it up
// because if this, would suggest only tweening alpha
// warning: if you removeChild the field then it shows up again in HTML
// and unfortunately, even with alpha=0 the cursor shows up
// so the best way to avoid this is display=none until you need it
hp.editWord = new cjs.DOMElement(zid("hpCodeWord"));
stage.addChild(hp.editWord);
//hp.editWord.alpha = 0;
zss("hpCodeWord").display = "none";
hp.editPass = new cjs.DOMElement(zid("hpPassWord"));
stage.addChild(hp.editPass);
//hp.editPass.alpha = 0;
zss("hpPassWord").display = "none";
// these are place holders for the input text fields
// the input fields get scaled in the main code resizing functions
hp.editWordShape = new createjs.Shape();
hp.editWordShape.graphics.f("white").r(88,100,0,0);
hp.editWordShape.setBounds(88,100,390,76);
hp.editContent.addChild(hp.editWordShape);
hp.editPassShape = new createjs.Shape();
hp.editPassShape.graphics.f("white").r(88,298,0,0);
hp.editPassShape.setBounds(88,298,390,76);
hp.editContent.addChild(hp.editPassShape);
// gridManager.add(new zim.Grid(hp.editContent, "black", false));
// note, will handle button events in ZIM HotSpots
var editInfoLabel = new zim.Label("?",60,"wildwoodBold","white","white");
hp.editInfo = new zim.Button(80,80,editInfoLabel,"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.editInfo.x = 522;
hp.editInfo.y = 92;
hp.editInfo.alpha = .7;
hp.editContent.addChild(hp.editInfo);
hp.editInfo2 = new zim.Button(80,80,editInfoLabel.clone(),"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.editInfo2.x = 522;
hp.editInfo2.y = 291;
hp.editInfo2.alpha = .7;
hp.editContent.addChild(hp.editInfo2);
var editBot = new createjs.Container();
w = 500;
h = 110
editBot.setBounds(0,0,w,h);
hp.edit.addChild(editBot);
hp.editBack = makeBackButton(0, (h-80)/2);
editBot.addChild(hp.editBack);
hp.editNext = new zim.Button(230,110,hideNextLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.editNext.x = (w-hp.editNext.width)/2;
hp.editNext.y = 0;
editBot.addChild(hp.editNext);
layoutManager.add(new zim.Layout(hp.edit,
[{object:editTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.editContent, marginTop:10, maxWidth:100, align:"middle", valign:"middle"},
{object:editBot, marginTop:5, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: intro ------------------------------------------
hp.intro = new cjs.Container(); // code word page
hp.intro.name = "hpIntro";
var introTop = new createjs.Container();
hp.intro.addChild(introTop);
var introTitle = new createjs.Text("INTRO", "70px wildwoodBold", "#913322");
introTitle.textAlign = "left";
introTitle.textBaseline = "alphabetic";
introTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
introTitle.y = 50;
introTop.addChild(introTitle);
hp.introContent = new createjs.Container();
hp.intro.addChild(hp.introContent);
hp.introContent.setBounds(0,0,640,640);
var w = hp.introContent.getBounds().width;
var introText = new createjs.Text("upload intro picture", "60px wildwoodBold", "white");
introText.textAlign = "center";
introText.textBaseline = "alphabetic";
introText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
introText.x = w/2;
introText.y = 100;
hp.introContent.addChild(introText);
var introText2 = new createjs.Text("at least 600x600 px", "60px wildwoodBold", "white");
introText2.textAlign = "center";
introText2.textBaseline = "alphabetic";
introText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
introText2.x = w/2;
introText2.y = 180;
hp.introContent.addChild(introText2);
hp.introTile = app.drawTile("X");
hp.introTile.cursor = "pointer";
hp.introTile.mouseChildren = false;
hp.introTile.shadow = new createjs.Shadow("#333333", 3, 3, 10);
var introTileScale = .8;
hp.introTile.x = (w-hp.introTile.getBounds().width*introTileScale)/2;
hp.introTile.y = 240;
zim.scale(hp.introTile,introTileScale);
hp.introContent.addChild(hp.introTile);
hp.introUploadBut = new cjs.DOMElement(zid("hpIntroUpload"));
stage.addChild(hp.introUploadBut);
hp.introUploadBut.alpha = 0;
zss("hpIntroUpload").display = "none";
var introText3 = new createjs.Text("story text is next", "60px wildwoodBold", "#913322");
introText3.textAlign = "center";
introText3.textBaseline = "alphabetic";
introText3.shadow = new createjs.Shadow("#999999", 3, 3, 10);
introText3.x = w/2;
introText3.y = 580;
hp.introContent.addChild(introText3);
hp.introPic = new cjs.Container(); // will fill with intros from data later
hp.introContent.addChild(hp.introPic);
// intros come from controller getting data from data
var introBot = new createjs.Container();
w = 500;
h = 110
introBot.setBounds(0,0,w,h);
hp.intro.addChild(introBot);
//new zim.Grid(introBot,null,false);
hp.introBack = makeBackButton(0, (h-80)/2);
introBot.addChild(hp.introBack);
hp.introNext = new zim.Button(230,110,hideNextLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.introNext.x = (w-hp.introNext.width)/2;
hp.introNext.y = 0;
introBot.addChild(hp.introNext);
layoutManager.add(new zim.Layout(hp.intro,
[{object:introTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.introContent, backgroundColor:"rgba(0,0,0,.1)", marginTop:3, maxWidth:100, align:"middle", valign:"top"},
{object:introBot, marginTop:3, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: story (and Title) -------------------------------
hp.story = new cjs.Container(); // story word page
hp.story.name = "hpStory";
var storyTop = new createjs.Container();
hp.story.addChild(storyTop);
var storyTitle = new createjs.Text("STORY", "70px wildwoodBold", "#913322");
storyTitle.textAlign = "left";
storyTitle.textBaseline = "alphabetic";
storyTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
storyTitle.y = 50;
storyTop.addChild(storyTitle);
hp.storyContent = new createjs.Container();
hp.story.addChild(hp.storyContent);
hp.storyContent.setBounds(0,0,640,450);
var w = hp.storyContent.getBounds().width;
var storyText = new createjs.Text("enter title", "60px wildwoodBold", "white");
storyText.textAlign = "center";
storyText.textBaseline = "alphabetic";
storyText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
storyText.x = w/2;
storyText.y = 0;
hp.storyContent.addChild(storyText);
var storyText2 = new createjs.Text("enter story", "60px wildwoodBold", "white");
storyText2.textAlign = "center";
storyText2.textBaseline = "alphabetic";
storyText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
storyText2.x = w/2;
storyText2.y = 180;
hp.storyContent.addChild(storyText2);
// add the input field which sits on top of everything
// addChild will give us some control in createJS like alpha and tweening
// do not rely on position and scale because the scaled content messes it up
// because if this, would suggest only tweening alpha
// warning: if you removeChild the field then it shows up again in HTML
// and unfortunately, even with alpha=0 the cursor shows up
// so the best way to avoid this is display=none until you need it
hp.storyTitle = new cjs.DOMElement(zid("hpStoryTitle"));
stage.addChild(hp.storyTitle);
//hp.storyTitle.alpha = 0;
zss("hpStoryTitle").display = "none";
hp.storyText = new cjs.DOMElement(zid("hpStoryText"));
stage.addChild(hp.storyText);
//hp.storyText.alpha = 0;
zss("hpStoryText").display = "none";
// these are place holders for the input text fields
// the input fields get scaled in the main code resizing functions
hp.storyTitleShape = new createjs.Shape();
hp.storyTitleShape.graphics.f("white").r(88,30,0,0);
hp.storyTitleShape.setBounds(88,30,450,76);
hp.storyContent.addChild(hp.storyTitleShape);
hp.storyTextShape = new createjs.Shape();
hp.storyTextShape.graphics.f("white").r(88,208,0,0);
hp.storyTextShape.setBounds(88,208,450,196);
hp.storyContent.addChild(hp.storyTextShape);
// gridManager.add(new zim.Grid(hp.storyContent, "black", false));
// note, will handle button events in ZIM HotSpots
/*
var storyInfoLabel = new zim.Label("?",60,"wildwoodBold","white","white");
hp.storyInfo = new zim.Button(80,80,storyInfoLabel,"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.storyInfo.x = 522;
hp.storyInfo.y = 23;
hp.storyInfo.alpha = .7;
hp.storyContent.addChild(hp.storyInfo);
hp.storyInfo2 = new zim.Button(80,80,storyInfoLabel.clone(),"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.storyInfo2.x = 522;
hp.storyInfo2.y = 210;
hp.storyInfo2.alpha = .7;
hp.storyContent.addChild(hp.storyInfo2);
*/
var storyBot = new createjs.Container();
w = 500;
h = 110
storyBot.setBounds(0,0,w,h);
hp.story.addChild(storyBot);
hp.storyBack = makeBackButton(0, (h-80)/2);
storyBot.addChild(hp.storyBack);
hp.storySave = new zim.Button(230,110,hideSaveLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.storySave.x = (w-hp.storySave.width)/2;
hp.storySave.y = 0;
storyBot.addChild(hp.storySave);
layoutManager.add(new zim.Layout(hp.story,
[{object:storyTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.storyContent, marginTop:8, maxWidth:100, align:"middle", valign:"middle"},
{object:storyBot, marginTop:5, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// new zim.Grid(hp.storyContent);
// zim.outline(hp.storyContent);
// hide page :: pieces ------------------------------------------
hp.pieces = new cjs.Container(); // code word page
hp.pieces.name = "hpPieces";
var piecesTop = new createjs.Container();
hp.pieces.addChild(piecesTop);
var piecesTitle = new createjs.Text("LAYOUT", "70px wildwoodBold", "#913322");
piecesTitle.textAlign = "left";
piecesTitle.textBaseline = "alphabetic";
piecesTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
piecesTitle.y = 50;
piecesTop.addChild(piecesTitle);
hp.piecesContent = new createjs.Container();
hp.pieces.addChild(hp.piecesContent);
hp.piecesTiles = new cjs.Container();
var count = 1;
var spacing = 20;
var tileSize = 144;
var bitmap; var bitmap2;
var checkLabel = new zim.Label("spacing",70,"wildwoodBold","#913322");
// size, label, startChecked, color, margin
hp.piecesCheckBox = new zim.CheckBox(50, checkLabel, true, "black", 30);
var checkWidth = hp.piecesCheckBox.getBounds().width;
var checkHeight = hp.piecesCheckBox.getBounds().height;
hp.piecesContent.setBounds(0,0,tileSize*3+spacing*2,tileSize*3+spacing*2+checkHeight);
var w = hp.piecesContent.getBounds().width;
hp.piecesOriginals = [];
hp.piecesLights = [];
for (var i=0; i<3; i++) {
for (var j=0; j<3; j++) {
bitmap = new cjs.Bitmap(preload.getResult("b"+count));
bitmap.num = count;
bitmap.x = j*(bitmap.getBounds().width+spacing);
bitmap.y = i*(bitmap.getBounds().height+spacing);
bitmap.alpha = .8;
hp.piecesTiles.addChild(bitmap);
hp.piecesOriginals.push(bitmap);
bitmap2 = new cjs.Bitmap(preload.getResult("h"+count));
bitmap2.num = count;
bitmap2.x = j*(bitmap.getBounds().width+spacing);
bitmap2.y = i*(bitmap.getBounds().height+spacing);
bitmap2.alpha = .9;
hp.piecesLights.push(bitmap2);
count++;
}
}
hp.currentTile = 7;
hp.piecesTiles.removeChildAt(hp.currentTile);
hp.piecesTiles.addChildAt(hp.piecesLights[hp.currentTile],hp.currentTile);
hp.piecesTiles.cursor = "pointer";
hp.setTile = function(num) {
hp.piecesTiles.removeChildAt(hp.currentTile);
hp.piecesTiles.addChildAt(hp.piecesOriginals[hp.currentTile],hp.currentTile);
hp.currentTile = num;
hp.piecesTiles.removeChildAt(hp.currentTile);
hp.piecesTiles.addChildAt(hp.piecesLights[hp.currentTile],hp.currentTile);
stage.update();
}
hp.piecesTiles.on("click", function(e) {
hp.setTile(e.target.num-1);
});
hp.piecesContent.addChild(hp.piecesTiles);
hp.piecesCheckBox.x = 50;
hp.piecesCheckBox.y = tileSize*3+spacing*3;
hp.piecesCheckBox.alpha = .8;
hp.piecesCheckBox.label.x -= 20;
hp.piecesCheckBox.label.y -= 20;
hp.piecesContent.addChild(hp.piecesCheckBox);
var piecesBot = new createjs.Container();
w = 500;
h = 110
piecesBot.setBounds(0,0,w,h);
hp.pieces.addChild(piecesBot);
//new zim.Grid(piecesBot,null,false);
hp.piecesBack = makeBackButton(0, (h-80)/2);
piecesBot.addChild(hp.piecesBack);
hp.piecesSave = new zim.Button(230,110,hideSaveLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.piecesSave.x = (w-hp.piecesSave.width)/2;
hp.piecesSave.y = 0;
piecesBot.addChild(hp.piecesSave);
layoutManager.add(new zim.Layout(hp.pieces,
[{object:piecesTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.piecesContent, marginTop:3, maxWidth:100, align:"middle", valign:"top"},
{object:piecesBot, marginTop:0, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: tile ------------------------------------------
hp.tile = new cjs.Container(); // code word page
hp.tile.name = "hpTile";
var tileTop = new createjs.Container();
hp.tile.addChild(tileTop);
var tileTitle = new createjs.Text("UPLOAD", "70px wildwoodBold", "#913322");
tileTitle.textAlign = "left";
tileTitle.textBaseline = "alphabetic";
tileTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
tileTitle.y = 50;
tileTop.addChild(tileTitle);
hp.tileContent = new createjs.Container();
hp.tile.addChild(hp.tileContent);
hp.tileContent.setBounds(0,0,640,640);
var w = hp.tileContent.getBounds().width;
hp.tileBacking = new cjs.Shape();
hp.tileBacking.graphics.f("black").ss(1).s("white").rr(0,0,w,w,30);
hp.tileBacking.alpha = .5;
hp.tileBacking.setBounds(0,0,w,w)
hp.tileContent.addChild(hp.tileBacking);
hp.tilePics = new cjs.Container(); // will fill with tiles from data later
hp.tiles = new cjs.Container();
// tiles come from controller getting data from data
for (var i=1; i<=9; i++) {
hp["tileUploadBut"+i] = new cjs.DOMElement(zid("hpTileUpload"+i));
stage.addChild(hp["tileUploadBut"+i]);
hp["tileUploadBut"+i].alpha = 0;
zss("hpTileUpload"+i).display = "none";
}
var tileBot = new createjs.Container();
w = 500;
h = 110
tileBot.setBounds(0,0,w,h);
hp.tile.addChild(tileBot);
//new zim.Grid(tileBot,null,false);
hp.tileBack = makeBackButton(0, (h-80)/2);
tileBot.addChild(hp.tileBack);
hp.tileNext = new zim.Button(230,110,hideNextLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.tileNext.x = (w-hp.tileNext.width)/2;
hp.tileNext.y = 0;
tileBot.addChild(hp.tileNext);
hp.tileInfo = new zim.Button(80,80,codeInfoLabel.clone(),"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.tileInfo.x = 418;
hp.tileInfo.y = 16;
hp.tileInfo.alpha = .7;
tileBot.addChild(hp.tileInfo);
layoutManager.add(new zim.Layout(hp.tile,
[{object:tileTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.tileContent, marginTop:3, maxWidth:100, align:"middle", valign:"top"},
{object:tileBot, marginTop:3, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: game ------------------------------------------
hp.game = new cjs.Container(); // game page that shows constraints
hp.game.name = "hpGame";
var gameTop = new createjs.Container();
hp.game.addChild(gameTop);
var gameTitle = new createjs.Text("GAME", "70px wildwoodBold", "#913322");
gameTitle.textAlign = "left";
gameTitle.textBaseline = "alphabetic";
gameTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
gameTitle.y = 50;
gameTop.addChild(gameTitle);
hp.gameContent = new createjs.Container();
hp.game.addChild(hp.gameContent);
hp.gameContent.setBounds(0,0,640,500);
var w = hp.gameContent.getBounds().width;
var gameText = new createjs.Text("odds of finding pieces", "60px wildwoodBold", "white");
gameText.textAlign = "center";
gameText.textBaseline = "alphabetic";
gameText.shadow = new createjs.Shadow("#999999", 3, 3, 10);
gameText.x = w/2;
gameText.y = 0;
hp.gameContent.addChild(gameText);
var oddsList = [".001%", ".01%", ".1%", "1%", "5%","10%","15%","20%","25%","30%","35%","40%","45%","50%","55%","60%","65%","70%","75%","80%","85%","90%","95%","100%"];
var oddsLabel = new zim.Label("", 64, "arial", "#70423a");
var odds = hp.gameOdds = new zim.Stepper(oddsList, 250, "#dddddd", "#70423a", oddsLabel, false, false);
odds.currentValue = "80%";
hp.gameContent.addChild(odds);
odds.x = (hp.gameContent.getBounds().width - odds.getBounds().width)/2;
odds.y = 60;
var gameText2 = new createjs.Text("time between looks", "60px wildwoodBold", "white");
gameText2.textAlign = "center";
gameText2.textBaseline = "alphabetic";
gameText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
gameText2.x = w/2;
gameText2.y = 290;
hp.gameContent.addChild(gameText2);
var timeList = ["0 sec", "5 sec", "10 sec", "15 sec", "20 sec", "30 sec", "45 sec", "1 min", "1.5 min", "2 min", "3 min", "4 min", "5 min", "10 min", "20 min", "30 min", "60 min", "1 day"];
var timeLabel = new zim.Label("", 64, "arial", "#70423a");
var time = hp.gameTime = new zim.Stepper(timeList, 250, "#dddddd", "#70423a", timeLabel, false, false);
time.currentValue = "20 sec";
hp.gameContent.addChild(time);
time.x = (hp.gameContent.getBounds().width - time.getBounds().width)/2;
time.y = 350;
// zim.outline(odds);
var gameBot = new createjs.Container();
w = 500;
h = 110
gameBot.setBounds(0,0,w,h);
hp.game.addChild(gameBot);
hp.gameBack = makeBackButton(0, (h-80)/2);
gameBot.addChild(hp.gameBack);
hp.gameSave = new zim.Button(230,110,hideSaveLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.gameSave.x = (w-hp.gameSave.width)/2;
hp.gameSave.y = 0;
gameBot.addChild(hp.gameSave);
layoutManager.add(new zim.Layout(hp.game,
[{object:gameTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.gameContent, marginTop:8, maxWidth:100, align:"middle", valign:"middle"},
{object:gameBot, marginTop:5, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
// hide page :: sponsor (and Publish) ------------------------------------------
hp.sponsor = new cjs.Container(); // code word page
hp.sponsor.name = "hpSponsor";
var sponsorTop = new createjs.Container();
hp.sponsor.addChild(sponsorTop);
var sponsorTitle = new createjs.Text("SPONSORS", "70px wildwoodBold", "#913322");
sponsorTitle.textAlign = "left";
sponsorTitle.textBaseline = "alphabetic";
sponsorTitle.shadow = new createjs.Shadow("#999999", 3, 3, 10);
sponsorTitle.y = 50;
sponsorTop.addChild(sponsorTitle);
hp.sponsorContent = new createjs.Container();
hp.sponsor.addChild(hp.sponsorContent);
hp.sponsorContent.setBounds(0,0,480,480);
var w = hp.sponsorContent.getBounds().width;
var sponsorTileScale = .5;
var sponsorText1 = new createjs.Text("pic and url", "60px wildwoodBold", "white");
sponsorText1.textAlign = "left";
sponsorText1.textBaseline = "alphabetic";
sponsorText1.shadow = new createjs.Shadow("#999999", 3, 3, 10);
sponsorText1.x = 180;
sponsorText1.y = 40;
hp.sponsorContent.addChild(sponsorText1);
hp.sponsorTile1 = app.drawTile("X");
hp.sponsorTile1.cursor = "pointer";
hp.sponsorTile1.mouseChildren = false;
hp.sponsorTile1.shadow = new createjs.Shadow("#333333", 3, 3, 10);
hp.sponsorTile1.x = 0;
hp.sponsorTile1.y = 0;
zim.scale(hp.sponsorTile1,sponsorTileScale);
hp.sponsorContent.addChild(hp.sponsorTile1);
hp.sponsorPic1 = new cjs.Container(); // will fill with sponsors from data later
hp.sponsorContent.addChild(hp.sponsorPic1);
hp.sponsorPic1.setBounds(0,0,hp.sponsorTile1.getBounds().width*sponsorTileScale,hp.sponsorTile1.getBounds().height*sponsorTileScale);
hp.sponsorPic1.x = hp.sponsorTile1.x;
hp.sponsorPic1.y = hp.sponsorTile1.y;
hp.sponsorUploadBut1 = new cjs.DOMElement(zid("hpSponsorUpload1"));
stage.addChild(hp.sponsorUploadBut1);
hp.sponsorUploadBut1.alpha = 0;
zss("hpSponsorUpload1").display = "none";
hp.sponsorUrl1 = new cjs.DOMElement(zid("hpSponsorUrl1"));
stage.addChild(hp.sponsorUrl1);
zss("hpSponsorUrl1").display = "none";
// these are place holders for the input text fields
// the input fields get scaled in the main code resizing functions
hp.sponsorUrlShape1 = new createjs.Shape();
hp.sponsorUrlShape1.graphics.f("white").r(180,70,0,0);
hp.sponsorUrlShape1.setBounds(180,70,270,76);
hp.sponsorContent.addChild(hp.sponsorUrlShape1);
var sponsorText2 = new createjs.Text("pic and url", "60px wildwoodBold", "white");
sponsorText2.textAlign = "left";
sponsorText2.textBaseline = "alphabetic";
sponsorText2.shadow = new createjs.Shadow("#999999", 3, 3, 10);
sponsorText2.x = 180;
sponsorText2.y = 240;
hp.sponsorContent.addChild(sponsorText2);
hp.sponsorTile2 = app.drawTile("X");
hp.sponsorTile2.cursor = "pointer";
hp.sponsorTile2.mouseChildren = false;
hp.sponsorTile2.shadow = new createjs.Shadow("#333333", 3, 3, 10);
hp.sponsorTile2.x = 0;
hp.sponsorTile2.y = 200;
zim.scale(hp.sponsorTile2,sponsorTileScale);
hp.sponsorContent.addChild(hp.sponsorTile2);
hp.sponsorPic2 = new cjs.Container(); // will fill with sponsors from data later
hp.sponsorContent.addChild(hp.sponsorPic2);
hp.sponsorPic2.setBounds(0,0,hp.sponsorTile2.getBounds().width*sponsorTileScale,hp.sponsorTile2.getBounds().height*sponsorTileScale);
hp.sponsorPic2.x = hp.sponsorTile2.x;
hp.sponsorPic2.y = hp.sponsorTile2.y;
hp.sponsorUploadBut2 = new cjs.DOMElement(zid("hpSponsorUpload2"));
stage.addChild(hp.sponsorUploadBut2);
hp.sponsorUploadBut2.alpha = 0;
zss("hpSponsorUpload2").display = "none";
hp.sponsorUrl2 = new cjs.DOMElement(zid("hpSponsorUrl2"));
stage.addChild(hp.sponsorUrl2);
zss("hpSponsorUrl2").display = "none";
// these are place holders for the input text fields
// the input fields get scaled in the main code resizing functions
hp.sponsorUrlShape2 = new createjs.Shape();
hp.sponsorUrlShape2.graphics.f("white").r(180,270,0,0);
hp.sponsorUrlShape2.setBounds(180,270,270,76);
hp.sponsorContent.addChild(hp.sponsorUrlShape2);
// new zim.Grid(hp.sponsorContent,null,false);
// new zim.Guide(hp.sponsorContent);
var sponsorCheckLabel = new zim.Label("publish",70,"wildwoodBold","#913322");
// size, label, startChecked, color, margin
hp.sponsorCheckBox = new zim.CheckBox(50, sponsorCheckLabel, true, "black", 30);
var checkWidth = hp.sponsorCheckBox.getBounds().width;
var checkHeight = hp.sponsorCheckBox.getBounds().height;
hp.sponsorCheckBox.x = 50;
hp.sponsorCheckBox.y = 400;
hp.sponsorCheckBox.alpha = .8;
hp.sponsorCheckBox.label.x -= 20;
hp.sponsorCheckBox.label.y -= 20;
hp.sponsorContent.addChild(hp.sponsorCheckBox);
var sponsorBot = new createjs.Container();
w = 500;
h = 110
sponsorBot.setBounds(0,0,w,h);
hp.sponsor.addChild(sponsorBot);
//new zim.Grid(sponsorBot,null,false);
hp.sponsorBack = makeBackButton(0, (h-80)/2);
sponsorBot.addChild(hp.sponsorBack);
hp.sponsorSave = new zim.Button(230,110,hideSaveLabel.clone(),"#918100","#ac9900","#ddd",4,30,"#776a00",20);
hp.sponsorSave.x = (w-hp.sponsorSave.width)/2;
hp.sponsorSave.y = 0;
sponsorBot.addChild(hp.sponsorSave);
hp.sponsorInfo = new zim.Button(80,80,codeInfoLabel.clone(),"#918100","#ac9900","#ddd",4,40,"#776a00",20);
hp.sponsorInfo.x = 418;
hp.sponsorInfo.y = 16;
hp.sponsorInfo.alpha = .7;
sponsorBot.addChild(hp.sponsorInfo);
layoutManager.add(new zim.Layout(hp.sponsor,
[{object:sponsorTop, marginTop:8, maxWidth:100, height:8, align:"middle", valign:"top"},
{object:hp.sponsorContent, marginTop:3.5, maxWidth:100, align:"middle", valign:"top"},
{object:sponsorBot, marginTop:0, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
20, null, true, new createjs.Shape(), stage));
////////////////////////////////////////////////
function makeBackButton(xPos, yPos) {
var bbLabel = new zim.Label("",60,"wildwoodBold","white","white");
var bb = new zim.Button(80,80,bbLabel,"#918100","#ac9900","#ddd",4,40,"#776a00",20);
bb.x = xPos;
bb.y = yPos;
bb.alpha = .7;
var bt = new zim.Triangle(46,44,44,"white",null,null,true,5);
bt.rotation = -90;
bt.alpha = .6;
bt.x = bb.width/2;
bt.y = bb.height/2;
bt.mouseChildren = false;
bt.mouseEnabled = false;
bb.addChild(bt);
return bb;
}
return hp;
}
return app;
} (app || {});
// view_find.js assets for finding pieces
var app = function(app) {
var gutter = 50;
var sponsorW = 150;
app.fLayouts = function () {
// all the find sub pages stored in containers with name properties
// add any properties we want in the main file to the fp object
// otherwise keep variables local
var fp = {};
fp.titles = [];
var findNextLabel = new zim.Label("NEXT",60,"wildwoodBold","white","white");
var findInfoLabel = new zim.Label("?",60,"wildwoodBold","white","white");
// find page :: code ------------------------------------------
fp.code = new cjs.Container(); // code word page
fp.code.name = "fpCode";
fp.codeContent = new cjs.Container();
fp.code.addChild(fp.codeContent);
fp.codeContent.setBounds(0,0,640,250);
var w = fp.codeContent.getBounds().width;
var myText = new cjs.Text("enter\nCODE WORD", "70px wildwoodBold", "white");
myText.textAlign = "center";
myText.textBaseline = "alphabetic";
myText.x = w/2;
myText.y = 0;
fp.codeContent.addChild(myText);
// add the input field which sits on top of everything
// addChild will give us some control in cjs like alpha and tweening
// do not rely on position and scale because the scaled canvas messes it up
// because if this, would suggest only tweening alpha
// warning: if you removeChild the field then it shows up again in HTML
// and unfortunately, even with alpha=0 the cursor shows up
// so the best way to avoid this is display=none until you need it
fp.codeWord = new cjs.DOMElement(zid("fpCodeWord"));
stage.addChild(fp.codeWord);
fp.codeWord.alpha = 0;
zss("fpCodeWord").display = "none";
// this is a place holder for the input text field
// the input field gets scaled in the main code resizing functions
fp.codeWordShape = new createjs.Shape();
fp.codeWordShape.graphics.f("white").r(88,150,0,0);
fp.codeWordShape.setBounds(88,150,390,76);
fp.codeContent.addChild(fp.codeWordShape);
fp.codeInfo = new zim.Button(80,80,findInfoLabel,"#812818","#913322","#ddd",4,40,"#812818",20);
fp.codeInfo.x = 522;
fp.codeInfo.y = 142;
fp.codeInfo.alpha = .7;
fp.codeContent.addChild(fp.codeInfo);
// note, will handle button events in ZIM HotSpots
var codeBot = new createjs.Container();
w = 500;
var h = 110
codeBot.setBounds(0,0,w,h);
fp.code.addChild(codeBot);
// fp.codeBack = makeBackButton(0, (h-80)/2);
// codeBot.addChild(hp.codeBack);
fp.codeNext = new zim.Button(230,110,findNextLabel,"#812818","#913322","#ddd",4,30,"#812818",20);
fp.codeNext.x = (w-fp.codeNext.width)/2;
fp.codeNext.y = 0;
codeBot.addChild(fp.codeNext);
layoutManager.add(new zim.Layout(fp.code,
[{object:fp.codeContent, marginTop:35, height:35, maxWidth:100, align:"middle", valign:"middle"},
{object:codeBot, marginTop:5, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
5, null, true, new createjs.Shape(), stage));
// find page :: intro ------------------------------------------
fp.intro = new cjs.Container(); // intro page
fp.intro.name = "fpIntro";
// intro pic goes in here from the load event at the bottom
fp.introContent = new cjs.Container();
fp.intro.addChild(fp.introContent);
fp.introContent.setBounds(0,0,640,640);
var w = fp.introContent.getBounds().width;
var introBot = new createjs.Container();
w = 500;
var h = 110
introBot.setBounds(0,0,w,h);
fp.intro.addChild(introBot);
fp.introBack = makeBackButton(0, (h-80)/2);
introBot.addChild(fp.introBack);
fp.introNext = new zim.Button(230,110,findNextLabel.clone(),"#812818","#913322","#ddd",4,30,"#812818",20);
fp.introNext.x = (w-fp.introNext.width)/2;
fp.introNext.y = 0;
introBot.addChild(fp.introNext);
layoutManager.add(new zim.Layout(fp.intro,
[{object:fp.introContent, marginTop:20, height:62, maxWidth:100, align:"middle", valign:"middle"},
{object:introBot, marginTop:3, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
5, null, true, new createjs.Shape(), stage));
// find page :: story ------------------------------------------
fp.story = new cjs.Container(); // intro page
fp.story.name = "fpStory";
var storyTop = new createjs.Container();
fp.story.addChild(storyTop);
storyTop.setBounds(0,0,stageW,stageH*.08);
var storyTitle = new cjs.Text("", "40px wildwood", "white");
fp.titles.push(storyTitle);
storyTitle.textBaseline = "bottom";
storyTitle.textAlign = "left";
storyTitle.y = 45;
storyTitle.shadow = new cjs.Shadow("black", 3, 3, 10);
storyTop.addChild(storyTitle);
fp.storyContent = new cjs.Container();
fp.story.addChild(fp.storyContent);
fp.storyContent.setBounds(0,0,640,640);
var w = fp.storyContent.getBounds().width;
var storyBacking = new cjs.Shape();
storyBacking.graphics.f("black").ss(1).s("white").rr(0,0,w,w,30);
storyBacking.alpha = .5;
fp.storyContent.addChild(storyBacking);
fp.storyText = new cjs.Text("", "34px wildwood", "white");
var newWidth = w-gutter*2;
fp.storyText.lineWidth = newWidth; // from above page
fp.storyText.textBaseline = "top";
fp.storyText.textAlign = "left";
fp.storyText.alpha = .85;
fp.storyText.x = gutter;
fp.storyText.y = gutter;
fp.storyContent.addChild(fp.storyText);
var storyBot = new createjs.Container();
w = 500;
var h = 110
storyBot.setBounds(0,0,w,h);
fp.story.addChild(storyBot);
fp.storyBack = makeBackButton(0, (h-80)/2);
storyBot.addChild(fp.storyBack);
fp.storyNext = new zim.Button(230,110,findNextLabel.clone(),"#812818","#913322","#ddd",4,30,"#812818",20);
fp.storyNext.x = (w-fp.storyNext.width)/2;
fp.storyNext.y = 0;
storyBot.addChild(fp.storyNext);
layoutManager.add(new zim.Layout(fp.story,
[{object:storyTop, marginTop:20, maxWidth:90, height:8, align:"middle", valign:"top"},
{object:fp.storyContent, marginTop:3, maxWidth:90, align:"middle", valign:"middle"},
{object:storyBot, marginTop:3, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
5, null, true, new createjs.Shape(), stage));
// tile page :: tile ------------------------------------------
fp.tile = new cjs.Container(); // intro page
fp.tile.name = "fpTile";
var tileTop = new createjs.Container();
fp.tile.addChild(tileTop);
tileTop.setBounds(0,0,stageW,stageH*.08);
var tileTitle = new cjs.Text("", "40px wildwood", "white");
fp.titles.push(tileTitle);
tileTitle.textBaseline = "bottom";
tileTitle.textAlign = "left";
tileTitle.y = 45;
tileTitle.shadow = new cjs.Shadow("black", 3, 3, 10);
tileTop.addChild(tileTitle);
fp.tileContent = new cjs.Container();
fp.tile.addChild(fp.tileContent);
fp.tileContent.setBounds(0,0,640,640);
var w = fp.tileContent.getBounds().width;
fp.tileBacking = new cjs.Shape();
fp.tileBacking.graphics.f("black").ss(1).s("white").rr(0,0,w,w,30);
fp.tileBacking.alpha = .5;
fp.tileBacking.setBounds(0,0,w,w)
fp.tileContent.addChild(fp.tileBacking);
fp.tilePics = new cjs.Container(); // will fill with tiles from data later
fp.tiles = new cjs.Container();
// tiles come from controller getting data from data
var tileBot = new createjs.Container();
w = 500;
var h = 110
tileBot.setBounds(0,0,w,h);
fp.tile.addChild(tileBot);
fp.tileBack = makeBackButton(0, (h-80)/2);
tileBot.addChild(fp.tileBack);
var findTileLabel = new zim.Label("FIND",60,"wildwoodBold","white","white");
fp.tileFind = new zim.Button(230,110,findTileLabel,"#812818","#913322","#ddd",4,30,"#812818",20);
fp.tileFind.x = (w-fp.tileFind.width)/2;
fp.tileFind.y = 0;
tileBot.addChild(fp.tileFind);
layoutManager.add(new zim.Layout(fp.tile,
[{object:tileTop, marginTop:20, maxWidth:90, height:8, align:"middle", valign:"top"},
{object:fp.tileContent, marginTop:3, maxWidth:90, align:"middle", valign:"middle"},
{object:tileBot, marginTop:3, maxWidth:75, height:10, align:"middle", valign:"bottom"}],
5, null, true, new createjs.Shape(), stage));
// find page :: look ------------------------------------------
fp.look = new cjs.Container(); // intro page
fp.look.name = "fpLook";
var lookTop = new createjs.Container();
fp.look.addChild(lookTop);
lookTop.setBounds(0,0,stageW,stageH*.08);
var lookTitle = new cjs.Text("", "40px wildwood", "white");
fp.titles.push(lookTitle);
lookTitle.textBaseline = "bottom";
lookTitle.textAlign = "left";
lookTitle.y = 45;
lookTitle.shadow = new cjs.Shadow("black", 3, 3, 10);
lookTop.addChild(lookTitle);
fp.lookContent = new cjs.Container();
fp.look.addChild(fp.lookContent);
fp.lookContent.setBounds(0,0,400,400);
var w = fp.lookContent.getBounds().width;
var findLookLabel = new zim.Label("LOOK",100,"wildwoodBold","white","white");
fp.lookButton = new zim.Button(w,w,findLookLabel,"#812818","#913322","#ddd",6,200,"#812818",40);
fp.lookContent.addChild(fp.lookButton);
var lookBot = fp.lookBot = new createjs.Container();
var w = sponsorW*3+gutter*2;
var h = sponsorW+gutter;
lookBot.setBounds(0,0,w,h);
fp.look.addChild(lookBot);
fp.sponsorBacking = new cjs.Shape();
fp.sponsorBacking.graphics.f("black").ss(1).s("white").rr(0,0,w,h,30);
fp.sponsorBacking.alpha = .5;
fp.sponsorBacking.setBounds(0,0,stageW-gutter, sponsorW+gutter);
lookBot.addChild(fp.sponsorBacking);
// put sponsor images here once they load at bottom
var theText = "Please\nvisit our\nSponsors";
var sponsorText = new cjs.Text(theText, "30px wildwood", "white");
sponsorText.textBaseline = "top";
sponsorText.textAlign = "left";
sponsorText.alpha = .85;
sponsorText.x = 2 * (gutter + sponsorW);
lookBot.addChild(sponsorText);
sponsorText.y = 50;
layoutManager.add(new zim.Layout(fp.look,
[{object:lookTop, marginTop:20, maxWidth:90, height:8, align:"middle", valign:"top"},
{object:fp.lookContent, marginTop:5, maxWidth:90, align:"middle", valign:"middle"},
{object:lookBot, marginTop:5, maxWidth:90, height:20, align:"middle", valign:"bottom"}],
5, null, true, new createjs.Shape(), stage));
function makeBackButton(xPos, yPos) {
var bbLabel = new zim.Label("",60,"wildwoodBold","white","white");
var bb = new zim.Button(80,80,bbLabel,"#812818","#913322","#ddd",4,40,"#812818",20);
bb.x = xPos;
bb.y = yPos;
bb.alpha = .7;
var bt = new zim.Triangle(46,44,44,"white",null,null,true,5);
bt.rotation = -90;
bt.alpha = .6;
bt.x = bb.width/2;
bt.y = bb.height/2;
bt.mouseChildren = false;
bt.mouseEnabled = false;
bb.addChild(bt);
return bb;
}
return fp;
}
return app;
} (app || {});
// controller.js for interactivity
var app = function(app) {
app.tileW = 300;
app.spacing = 20;
app.gutter = 50;
app.sponsorW = 150;
app.tilesMade = false;
app.arrangements = {
a1 : [1,0,0,0,0,0,0,0,0],
a2V : [1,0,0,1,0,0,0,0,0],
a2H : [1,1,0,0,0,0,0,0,0],
a3V : [1,0,0,1,0,0,1,0,0],
a3H : [1,1,1,0,0,0,0,0,0],
a4 : [1,1,0,1,1,0,0,0,0],
a6V : [1,1,0,1,1,0,1,1,0],
a6H : [1,1,1,1,1,1,0,0,0],
a9 : [1,1,1,1,1,1,1,1,1]
};
app.arrLookup = ["a1", "a2V", "a2H", "a3V", "a3H", "a4", "a6V", "a6H", "a9"];
app.arrNums = [1, 2, 2, 3, 3, 4, 6, 6, 9];
app.showMessage = function(message, color) {
if (zot(color)) color = "#0b8d95";
zid("words").innerHTML = message;
zss("message").display = "block";
zss("message").display = "block";
zss("words").backgroundColor = color;
}
// pre pic tiles
app.drawTile = function(char) {
if (zot(char)) char = "?";
var tile = new cjs.Container();
var backing = new cjs.Shape();
var g = backing.graphics;
g.f("black").ss(10).s("#edda27").r(0,0,app.tileW,app.tileW);
tile.addChild(backing);
var q = new cjs.Text(char, "300px wildwoodBold", "#edda27");
q.textBaseline = "middle";
q.textAlign = "center";
q.x = app.tileW/2;
q.y = app.tileW/2;
tile.addChild(q);
tile.setBounds(0,0,app.tileW,app.tileW);
return tile;
}
app.setTiles = function(d, type, char) {
// set up tiles
// tile the pieces in their arrangement max 3 across or down:
// 1, 2H, 2V, 3H, 3V, 4, 6H, 6V, 9
// could be together (one picture) or spaced (individual pictures)
// squares get ? before they are found and fill in with images when found
// arrangements below handle relative positioning, scaling is done after
zog("setTiles");
var a = app.arrangements[d.arrangement];
d.tiles = 0;
d.numShowing = 0;
d.tileOrder = [];
for (i=0; i<a.length; i++) {
if (a[i] == 1) {
d.tileOrder.push(d.tiles++);
}
}
zim.shuffle(d.tileOrder);
if (type.tiles) {
type.tiles.removeAllChildren();
type.tileContent.removeChild(type.tiles);
}
if (type.tilePics) {
type.tilePics.removeAllChildren();
type.tileContent.removeChild(type.tilePics);
}
var count = 0;
var countAdded = 1;
var spacing = (d.spacing) ? app.spacing : 0;
for (var i=0; i<3; i++) {
for (var j=0; j<3; j++) {
if (a[count] == 1) {
var tile = app.drawTile(char);
tile.num = count;
tile.mouseChildren = false;
tile.x = j * (tile.getBounds().width + spacing);
tile.y = i * (tile.getBounds().height + spacing);
type.tiles.addChild(tile);
countAdded++
}
count++;
}
}
type.tiles.x = app.gutter;
type.tiles.y = app.gutter;
var padding = app.gutter / 2;
var f = zim.fit(
type.tiles,
type.tileBacking.x+padding,
type.tileBacking.y+padding,
type.tileBacking.getBounds().width-padding*2,
type.tileBacking.getBounds().height-padding*2
);
type.tiles.alpha = 1;
type.tilePics.x = f.x;
type.tilePics.y = f.y;
zim.scale(type.tilePics, f.scale);
type.tileContent.addChild(type.tilePics); // for non-spaced pics only
type.tileContent.addChild(type.tiles);
}
app.uploadIntro = function() {
var fileName = zid("hpIntroUpload").value;
var file = zid("hpIntroUpload").files[0];
var type = file.type.split("/")[1];
if (type == "jpeg") type = "jpg";
data.updateIntro(type);
waiter.show();
if (!FileReader) { // will not work on earlier IE
waiter.hide();
alert("Please update your Browser - Sorry");
return;
}
var reader = new FileReader();
reader.onloadend = function () {
// the AJAX code
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (result == "error=0") {
if (data.hideData.pic) {
// app.hidePicsLoader.reset();
app.hidePicsLoader.removeAll();
var hidePicsManifest = [];
hidePicsManifest.push({id:"intro", src:data.hideData.code+"_i."+data.hideData.pic});
app.hidePicsLoader.loadManifest(hidePicsManifest);
} else {
waiter.hide();
}
} else {
waiter.hide();
}
}
var string = data.hideData.code + "_i,800," + type + "," + reader.result;
client.makeRequest('image.php', string, "application/upload");
}
if (file) reader.readAsDataURL(file);
}
app.uploadSponsor = function(num) {
zog("loading " + num);
var fileName = zid("hpSponsorUpload"+num).value;
var file = zid("hpSponsorUpload"+num).files[0];
var type = file.type.split("/")[1];
if (type == "jpeg") type = "jpg";
data.updateSponsorPic(type, num);
waiter.show();
if (!FileReader) { // will not work on earlier IE
waiter.hide();
alert("Please update your Browser - Sorry");
return;
}
var reader = new FileReader();
reader.num = num;
reader.onloadend = function () {
// the AJAX code
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (result == "error=0") {
//if (data.hideData.sponsor1Pic) {
var hidePicsManifest = [];
hidePicsManifest.push({id:"sponsor"+num, src:data.hideData.code+"_s"+num+"."+data.hideData["sponsor"+num+"Pic"]+"?rand="+Math.random()});
zog(hidePicsManifest);
// app.hidePicsLoader.reset();
app.hidePicsLoader.removeAll();
app.hidePicsLoader.loadManifest(hidePicsManifest);
//} else {
//waiter.hide();
//}
} else {
app.showMessage("Sorry, there was a file error", "#cc0000");
waiter.hide();
}
}
var string = data.hideData.code + "_s"+num+",300," + type + "," + reader.result;
client.makeRequest('image.php', string, "application/upload");
}
if (file) reader.readAsDataURL(file);
}
app.uploadTile = function(num) {
zog(num);
var fileName = zid("hpTileUpload"+num).value;
var file = zid("hpTileUpload"+num).files[0];
var type = file.type.split("/")[1];
if (type == "jpeg") type = "jpg";
data.updateTilePic(type, num);
waiter.show();
if (!FileReader) { // will not work on earlier IE
waiter.hide();
app.showMessage("Please update your Browser - Sorry", "#cc0000");
return;
}
var reader = new FileReader();
reader.num = num;
reader.onloadend = function () {
// the AJAX code
var client = new HttpClient();
client.isAsync = true;
client.callback = function(result) {
if (result == "error=0") {
//if (data.hideData.sponsor1Pic) {
var hidePicsManifest = [];
hidePicsManifest.push({id:"tile"+num, src:data.hideData.code+"_t"+num+"."+data.hideData.tilePics[(num-1)]+"?rand="+Math.random()});
zog(hidePicsManifest);
// app.hidePicsLoader.reset();
app.hidePicsLoader.removeAll();
app.hidePicsLoader.loadManifest(hidePicsManifest);
//} else {
//waiter.hide();
//}
} else {
app.showMessage("Sorry, there was a file error", "#cc0000");
waiter.hide();
}
}
var string = data.hideData.code + "_t"+num+",300," + type + "," + reader.result;
client.makeRequest('image.php', string, "application/upload");
}
if (file) reader.readAsDataURL(file);
}
app.positionTileButtons = function() {
// gets called from resize and from going to tile page
// zog("tiles Made: " + app.tilesMade);
if (!app.tilesMade) return;
var d = data.hideData;
var b; var t;
for (var i=0; i<d.numTiles; i++) {
t = zss("hpTileUpload"+(i+1));
b = zim.boundsToGlobal(hp.tiles.getChildAt(i));
if (b) {
t.left = (b.x)+"px";
t.top = (b.y)+"px";
t.width = (b.width)+"px";
t.height = (b.height)+"px";
}
}
}
app.showTileButtons = function() {
var d = data.hideData;
var t;
for (var i=1; i<=d.numTiles; i++) {
t = zss("hpTileUpload"+i);
t.display = "block";
}
}
app.hideTileButtons = function() {
var t;
for (var i=1; i<=9; i++) {
t = zss("hpTileUpload"+i);
t.display = "none";
}
}
app.makeFunctionality = function () {
////////////////////////////////////////////////
// EXTRA SWIPE FUNCTIONALITY
var countMe=0;
mainPages.on("page", function(e) {
// swap Pages objects depending on location
if (e.target.page == mp.home) {
findPages.active = false;
hidePages.active = false;
}
if (e.target.page == mp.find) {
findPages.active = true;
}
if (e.target.page == mp.hide) {
hidePages.active = true;
}
// handle pesky input fields
if (e.target.page == mp.find && findPages.page == fp.code) {
zss("fpCodeWord").display = "block";
zim.animate(fp.codeWord, {alpha:1}, 400);
}
if (e.target.lastPage == mp.find) {
zim.animate(fp.codeWord, {alpha:0}, 200, null, function(){
zss("fpCodeWord").display = "none";
});
}
if (e.target.page == mp.hide && hidePages.page == hp.code) {
zss("hpMakeCodeWord").display = "block";
zss("hpMakePassWord").display = "block";
zim.animate(hp.codeWord, {alpha:1}, 400);
zim.animate(hp.codePass, {alpha:1}, 400);
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.code) {
zim.animate(hp.codeWord, {alpha:0}, 200, null, function(){
zss("hpMakeCodeWord").display = "none";
});
zim.animate(hp.codePass, {alpha:0}, 200, null, function(){
zss("hpMakePassWord").display = "none";
});
}
if (e.target.page == mp.hide && hidePages.page == hp.edit) {
zss("hpCodeWord").display = "block";
zss("hpPassWord").display = "block";
zim.animate(hp.editWord, {alpha:1}, 400);
zim.animate(hp.editPass, {alpha:1}, 400);
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.edit) {
zim.animate(hp.editWord, {alpha:0}, 200, null, function(){
zss("hpCodeWord").display = "none";
});
zim.animate(hp.editPass, {alpha:0}, 200, null, function(){
zss("hpPassWord").display = "none";
});
}
if (e.target.page == mp.hide && hidePages.page == hp.intro) {
zss("hpIntroUpload").display = "block";
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.intro) {
zss("hpIntroUpload").display = "none";
}
if (e.target.page == mp.hide && hidePages.page == hp.tile) {
app.showTileButtons();
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.tile) {
app.hideTileButtons();
}
if (e.target.page == mp.hide && hidePages.page == hp.sponsor) {
zss("hpSponsorUpload1").display = "block";
zss("hpSponsorUpload2").display = "block";
zss("hpSponsorUrl1").display = "block";
zss("hpSponsorUrl2").display = "block";
zim.animate(hp.sponsorUrl1, {alpha:1}, 400);
zim.animate(hp.sponsorUrl2, {alpha:1}, 400);
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.sponsor) {
zss("hpSponsorUpload1").display = "none";
zss("hpSponsorUpload2").display = "none";
zim.animate(hp.sponsorUrl1, {alpha:0}, 200, null, function(){
zss("hpSponsorUrl1").display = "none";
});
zim.animate(hp.sponsorUrl2, {alpha:0}, 200, null, function(){
zss("hpSponsorUrl2").display = "none";
});
}
if (e.target.page == mp.hide && hidePages.page == hp.story) {
zss("hpStoryTitle").display = "block";
zss("hpStoryText").display = "block";
zim.animate(hp.storyTitle, {alpha:1}, 400);
zim.animate(hp.storyText, {alpha:1}, 400);
}
if (e.target.lastPage == mp.hide && hidePages.page == hp.story) {
zim.animate(hp.storyTitle, {alpha:0}, 200, null, function(){
zss("hpStoryTitle").display = "none";
});
zim.animate(hp.storyText, {alpha:0}, 200, null, function(){
zss("hpStoryText").display = "none";
});
}
});
hidePages.on("page", function(e) {
// handle pesky input fields
if (e.target.page == hp.code) {
zss("hpMakeCodeWord").display = "block";
//zim.animate(hp.codeWord, {alpha:1}, 400);
zss("hpMakePassWord").display = "block";
//zim.animate(hp.codePass, {alpha:1}, 400);
}
if (e.target.lastPage == hp.code) {
//zim.animate(hp.codeWord, {alpha:0}, 200, null, function(){
zss("hpMakeCodeWord").display = "none";
//});
//zim.animate(hp.codePass, {alpha:0}, 200, null, function(){
zss("hpMakePassWord").display = "none";
//});
}
if (e.target.page == hp.edit) {
zss("hpCodeWord").display = "block";
//zim.animate(hp.editWord, {alpha:1}, 400);
zss("hpPassWord").display = "block";
//zim.animate(hp.editPass, {alpha:1}, 400);
}
if (e.target.lastPage == hp.edit) {
//zim.animate(hp.editWord, {alpha:0}, 200, null, function(){
zss("hpCodeWord").display = "none";
//});
//zim.animate(hp.editPass, {alpha:0}, 200, null, function(){
zss("hpPassWord").display = "none";
//});
}
if (e.target.page == hp.intro) {
zss("hpIntroUpload").display = "block";
}
if (e.target.lastPage == hp.intro) {
zss("hpIntroUpload").display = "none";
}
if (e.target.page == hp.tile) {
app.showTileButtons();
}
if (e.target.lastPage == hp.tile) {
app.hideTileButtons();
}
if (e.target.page == hp.sponsor) {
zss("hpSponsorUpload1").display = "block";
zss("hpSponsorUpload2").display = "block";
zss("hpSponsorUrl1").display = "block";
zss("hpSponsorUrl2").display = "block";
}
if (e.target.lastPage == hp.sponsor) {
zss("hpSponsorUpload1").display = "none";
zss("hpSponsorUpload2").display = "none";
zss("hpSponsorUrl1").display = "none";
zss("hpSponsorUrl2").display = "none";
}
if (e.target.page == hp.tile && e.target.lastPage == e.layout) {
var d = data.hideData
app.setTiles(data.hideData, hp, "X");
}
if (e.target.page == hp.story) {
zss("hpStoryTitle").display = "block";
zss("hpStoryText").display = "block";
}
if (e.target.lastPage == hp.story) {
zss("hpStoryTitle").display = "none";
zss("hpStoryText").display = "none";
}
});
findPages.on("page", function(e) {
// this is the automatic paging system
// sometimes extra things have to happen
// zog(e.target.page.name, e.target.lastPage.name, e.target.direction);
if (e.target.page == fp.code) {
zss("fpCodeWord").display = "block";
zim.animate(fp.codeWord, {alpha:1}, 400);
}
if (e.target.lastPage == fp.code) {
zim.animate(fp.codeWord, {alpha:0}, 200, null, function(){
zss("fpCodeWord").display = "none";
if (message.words.text == "Scattering...") {
message.pane.show();
}
});
}
});
//////////////////////////////////////////////////////////////////////////////
// make the HOTSPOTS
// we can add these to rectangles (like image maps)
// this is handle for making graphical pages clickable in parts
// or pass in an object like a button
// and then the function to call
var hs = new zim.HotSpots([
{page:mp.home.container, rect:[350,50,260,260], call:function() {mainPages.go(mp.hide,"up");}},
{page:mp.home.container, rect:[220,405,500,150], call:function() {app.showMessage("Hide pieces for others to find or find pieces that others have hidden");}},
{page:mp.home.container, rect:[350,650,260,260], call:function() {mainPages.go(mp.find,"down");}},
{page:mp.hide.container, rect:[230,800,500,150], call:function() {mainPages.go(mp.home,"down");}},
{page:mp.find.container, rect:[230,10,500,150], call:function() {mainPages.go(mp.home,"up");}},
{page:fp.code, rect:fp.codeNext, call:function() {checkCode();}},
{page:fp.code, rect:fp.codeInfo, call:function() {app.showMessage("This is an already-existing word that someone who has hidden pieces needs to tell you");}},
{page:fp.intro, rect:fp.introNext, call:function() {findPages.go(fp.story,"right");}},
{page:fp.intro, rect:fp.introBack, call:function() {findPages.go(fp.code,"left");}},
{page:fp.story, rect:fp.storyNext, call:function() {findPages.go(fp.tile,"right");}},
{page:fp.story, rect:fp.storyBack, call:function() {findPages.go(fp.intro,"left");}},
{page:fp.tile, rect:fp.tileFind, call:function() {findPages.go(fp.look,"right");}},
{page:fp.tile, rect:fp.tileBack, call:function() {findPages.go(fp.story,"left");}},
{page:fp.look, rect:fp.lookButton, call:function() {look();}},
{page:hp.first, rect:hp.firstNew, call:function() {hidePages.go(hp.code,"right");}},
{page:hp.first, rect:hp.firstEdit, call:function() {hidePages.go(hp.edit,"right");}},
{page:hp.code, rect:hp.codeNext, call:function() {addCode();}},
{page:hp.code, rect:hp.codeBack, call:function() {hidePages.go(hp.first,"left");}},
{page:hp.code, rect:hp.codeInfo, call:function() {app.showMessage("This is a single word that you tell others to use to find the pieces you will hide");}},
{page:hp.code, rect:hp.codeInfo2, call:function() {app.showMessage("This is your password so that you can edit your pieces later");}},
{page:hp.edit, rect:hp.editNext, call:function() {editCode();}},
{page:hp.edit, rect:hp.editBack, call:function() {hidePages.go(hp.first,"left");}},
{page:hp.edit, rect:hp.editInfo, call:function() {app.showMessage("This is the already-existing code word used when creating the game");}},
{page:hp.edit, rect:hp.editInfo2, call:function() {app.showMessage("This is the already-existing password set up to edit the game");}},
{page:hp.intro, rect:hp.introNext, call:function() {showStory();}},
{page:hp.intro, rect:hp.introBack, call:function() {hidePages.go(hp.code,"left");}},
{page:hp.story, rect:hp.storySave, call:function() {saveStory();}},
{page:hp.story, rect:hp.storyBack, call:function() {hidePages.go(hp.intro,"left");}},
{page:hp.pieces,rect:hp.piecesBack, call:function() {hidePages.go(hp.story,"left");}},
{page:hp.pieces,rect:hp.piecesSave, call:function() {saveLayout();}},
{page:hp.tile, rect:hp.tileBack, call:function() {hidePages.go(hp.pieces,"left");}},
{page:hp.tile, rect:hp.tileNext, call:function() {showGame();}},
{page:hp.tile, rect:hp.tileInfo, call:function() {app.showMessage("These are the pieces that players will find. They will be resized to 300x300 px");}},
{page:hp.game, rect:hp.gameBack, call:function() {hidePages.go(hp.tile,"left");}},
{page:hp.game, rect:hp.gameSave, call:function() {saveGame();}},
{page:hp.sponsor, rect:hp.sponsorBack, call:function() {hidePages.go(hp.game,"left");}},
{page:hp.sponsor, rect:hp.sponsorSave, call:function() {savePublish();}},
{page:hp.sponsor, rect:hp.sponsorInfo, call:function() {app.showMessage("Optional. If provided, the sponsor graphics will be resized to 300x300 px. Will show default sponsors if no URLs are given.");}}
]);
// hs.show();
////////////////////////////////////////////////
// EXTRA HOTSPOT FUNCTIONALITY
// hp.code
data.on("addResult", function(e) {
//waiter.hide();
if (data.addResult) {
//pages.unpause(); // in case it comes from swipe
hp.introContent.removeChild(hp.introPic);
hp.introTile.removeAllEventListeners();
hp.introTile.on("click", app.uploadIntro);
hidePages.go(hp.intro,"right");
hidePages.setSwipe(hp.intro, [hp.code,null,null,null]);
hs.removeHotSpots(hp.intro, hp.introBack);
hs.addHotSpot(hp.intro, hp.introBack, function() {hidePages.go(hp.code,"left");});
} else {
data.codeError("That code word is taken, please try another"); return;
}
});
function addCode() {
var codeWord = zid("hpMakeCodeWord").value;
var passWord = zid("hpMakePassWord").value;
if (codeWord == "") {data.codeError("Please enter a code word"); return;}
if (passWord == "") {data.codeError("Please enter a password"); return;}
data.addCode(codeWord, passWord);
app.dataChanged = true;
// waiter.show();
}
// hp.edit - but sets up the rest of the hp pages as well
data.on("editResult", function(e) {
//waiter.hide();
if (data.editResult) {
//pages.unpause(); // in case it comes from swipe
hidePages.setSwipe(hp.intro, [hp.edit,null,null,null]);
hs.removeHotSpots(hp.intro, hp.introBack);
hs.addHotSpot(hp.intro, hp.introBack, function() {hidePages.go(hp.edit,"left");});
// SET UP HIDE PAGES
var d = data.hideData;
zog(d);
// hp.pieces
hp.setTile(d.tile);
if (d.spacing) {
hp.piecesCheckBox.checked = true;
} else {
hp.piecesCheckBox.checked = false;
}
// get images for rest of hide section
// load pictures
var hidePicsManifest = [];
if (d.pic) hidePicsManifest.push({id:"intro", src:d.code+"_i."+d.pic});
if (d.sponsor1Pic) {
hidePicsManifest.push({id:"sponsor1", src:d.code+"_s1."+d.sponsor1Pic});
} else {
hidePicsManifest.push({id:"sponsor1", src:data.defaultSponsor1Pic});
}
if (d.sponsor2Pic) {
hidePicsManifest.push({id:"sponsor2", src:d.code+"_s2."+d.sponsor2Pic});
} else {
hidePicsManifest.push({id:"sponsor2", src:data.defaultSponsor2Pic});
}
if (d.tilePics) {
for (i=1; i<=d.tilePics.length; i++) {
if (d.tilePics[i-1]) {
hidePicsManifest.push({id:"tile"+i, src:d.code+"_t"+i+"."+d.tilePics[i-1]});
}
}
}
// hp.sponsor
if (d.publish == 1) {
hp.sponsorCheckBox.checked = true;
} else {
hp.sponsorCheckBox.checked = false;
}
if (d.sponsor1Url) zid("hpSponsorUrl1").value = d.sponsor1Url;
if (d.sponsor2Url) zid("hpSponsorUrl2").value = d.sponsor2Url;
// set tiles
app.setTiles(d, hp);
// app.hidePicsLoader.reset();
zog (hidePicsManifest);
app.hidePicsLoader.loadManifest(hidePicsManifest);
// go to intro once pictures loaded
} else {
data.codeError("Sorry, incorrect code and pass");
}
});
app.dataChanged = true;
function editCode() {
var codeWord = zid("hpCodeWord").value;
var passWord = zid("hpPassWord").value;
if (codeWord == "") {data.codeError("Please enter a code word"); return;}
if (passWord == "") {data.codeError("Please enter a password"); return;}
// if data changed else just go to intro
if (app.dataChanged) {
app.dataChanged = false; // cheating - fix this in final
data.editCode(codeWord, passWord);
} else {
hidePages.go(hp.intro,"right");
}
}
function showStory() {
var d = data.hideData;
if (d.title) zid("hpStoryTitle").value = d.title;
if (d.story) zid("hpStoryText").value = d.story;
hidePages.go(hp.story,"right");
}
function saveStory() {
data.updateStory(zid("hpStoryTitle").value, zid("hpStoryText").value);
hidePages.go(hp.pieces,"right");
}
// hp.pieces -> hp.tile
function saveLayout() {
data.updateLayout(
hp.currentTile,
app.arrLookup[hp.currentTile],
hp.piecesCheckBox.checked,
app.arrNums[hp.currentTile]
);
// prepare pic upload tiles
app.setTiles(data.hideData, hp, "X");
hp.tiles.cursor = "pointer";
// apply any saved pictures
loopTiles();
app.tilesMade = true;
app.positionTileButtons();
hidePages.go(hp.tile,"right");
}
function showGame() {
var d = data.hideData;
if (d.odds) hp.gameOdds.currentValue = Math.round(d.odds*100) + "%";
if (d.time) {
d.time = Number(d.time);
var t;
if (d.time <= 60*1000) {
t = Math.round(d.time/1000) + " sec";
} else if (d.time > 60*60*1000) {
t = "1 day";
} else {
t = (Math.round(d.time/60/1000)) + " min";
}
hp.gameTime.currentValue = t;
zog("setting time to " + t);
}
hidePages.go(hp.game,"right");
}
function saveGame() {
data.updateGame(hp.gameOdds.currentValue, hp.gameTime.currentValue);
var d = data.hideData;
// prepare sponsor data if any
hidePages.go(hp.sponsor,"right");
}
function savePublish() {
if (hp.sponsorCheckBox.checked) {
var d = data.hideData;
var count = 0;
for (var i=0; i<d.numTiles; i++) {
if (d.tilePics[i] != null) {
count++;
}
}
if (count < d.numTiles || !d.pic) {
var t = "Must upload intro pic and all tile pics to publish";
app.showMessage(t, "#cc0000");
hp.sponsorCheckBox.checked = false;
return;
} else {
var t = "Your pieces have been published. Tell hunters your code word!";
app.showMessage(t);
}
} else {
var t = "Your pieces have been saved but not published.";
app.showMessage(t);
}
data.updatePublish(
zid("hpSponsorUrl1").value,
zid("hpSponsorUrl2").value,
hp.sponsorCheckBox.checked
);
}
// perhaps clearing app.hidePicsLoader properties each time picture is loaded?
// so would need to store pictures on another object rather than the loader?
function loopTiles() {
var d = data.hideData;
zog(d);
zog(hp.tiles.numChildren);
var currentTile;
if (d.tilePics && d.tilePics.length>0) {
for (var i=1; i<=d.numTiles; i++) {
if (d.tilePics[i-1]) {
if (app.hidePicsLoader["tile"+i] && app.hidePicsLoader["tile"+i].getBounds() && app.hidePicsLoader["tile"+i].getBounds().width > 0) {
currentTile = hp.tiles.getChildAt(i-1);
if (d.spacing) {
scale = (app.tileW-10) / app.hidePicsLoader["tile"+i].getBounds().width;
app.hidePicsLoader["tile"+i].x = app.hidePicsLoader["tile"+i].y = 5;
currentTile.addChild(app.hidePicsLoader["tile"+i]);
} else {
scale = (app.tileW) / app.hidePicsLoader["tile"+i].getBounds().width;
app.hidePicsLoader["tile"+i].x = app.hidePicsLoader["tile"+i].y = 0;
currentTile.alpha = .01;
hp.tilePics.addChild(app.hidePicsLoader["tile"+i]);
app.hidePicsLoader["tile"+i].x = currentTile.x;
app.hidePicsLoader["tile"+i].y = currentTile.y;
}
zim.scale(app.hidePicsLoader["tile"+i], scale);
currentTile.removeAllEventListeners();
}
}
}
}
}
// fp.code
var lastCodeValue = "";
function checkCode() {
var codeWord = zid("fpCodeWord").value;
if (codeWord == "") {data.codeError("Please enter a code word"); return;}
zog(codeWord,lastCodeValue,data.newFindData);
if (codeWord == lastCodeValue && data.newFindData == false) {
findPages.go(fp.intro,"right");
zog("bypass");
return;
}
data.on("checkResult", function(e) {
// waiter.hide();
// does not seem to get triggered if images already cached (even with reset)
if (data.checkResult) {
lastCodeValue = codeWord;
data.newFindData = false;
var d = data.findData;
message.words.text = "Scattering...";
findPages.go(fp.intro,"right");
time = false;
// set titles and information
for (var i=0; i<fp.titles.length; i++) {
fp.titles[i].text = d.title;
fp.titles[i].parent.setBounds(0,0,fp.titles[i].getBounds().width, fp.titles[i].getBounds().height)
}
// set story text description
fp.storyText.text = d.story;
// set tiles
app.setTiles(d, fp);
// load pictures
var findPicsManifest = [];
if (d.pic) findPicsManifest.push({id:"intro", src:d.code+"_i."+d.pic});
if (d.sponsor1Pic && d.sponsor1Url != "") {
findPicsManifest.push({id:"sponsor1", src:d.code+"_s1."+d.sponsor1Pic});
} else {
findPicsManifest.push({id:"sponsor1", src:data.defaultSponsor1Pic});
}
if (d.sponsor2Pic && d.sponsor2Url != "") {
findPicsManifest.push({id:"sponsor2", src:d.code+"_s2."+d.sponsor2Pic});
} else {
findPicsManifest.push({id:"sponsor2", src:data.defaultSponsor2Pic});
}
if (d.tilePics) {
for (i=1; i<=d.tilePics.length; i++) {
if (d.tilePics[i-1]) {
findPicsManifest.push({id:"tile"+i, src:d.code+"_t"+i+"."+d.tilePics[i-1]});
}
}
}
findPicsLoader.reset();
findPicsLoader.loadManifest(findPicsManifest);
lastCodeValue = codeWord;
layoutManager.resize();
} else {
data.codeError("Sorry, could not find code word"); return;
}
}, null, true); // event gets made each click - so remove the listener after using
data.checkCode(codeWord);
// waiter.show();
}
// fp.look
function look() {
// if already found them then keep saying found all
// else if enough time has passed start the clock
// otherwise show time message
// if we beat the odds then show found message
// show a new tile based on shuffled array
// otherwise show try again message
// if we have found all then show found all message
var d = data.findData;
if (message.words.text == "Found All!") {
findPages.go(fp.tile,"left");
message.pane.show();
return;
}
if (time == false) {
time = true;
setInterval(function() {
time = false;
if (message.words.text == "Please Wait") message.pane.hide();
}, d.time);
} else {
message.words.text = "Please Wait";
message.pane.show();
return;
}
if (d.odds < Math.random()) {
message.words.text = "Try Again!";
} else {
if (d.numShowing == d.tiles-1) {
message.words.text = "Found All!";
} else {
message.words.text = "Found One!";
}
findPages.go(fp.tile,"left");
var showTile = d.tileOrder[d.numShowing];
d.numShowing++;
d.numShowing = Math.min(d.numShowing, d.tiles-1);
if (findPicsLoader["tile"+(showTile+1)].getBounds() && findPicsLoader["tile"+(showTile+1)].getBounds().width > 0) {
if (d.spacing) {
fp.tiles.getChildAt(showTile).addChild(findPicsLoader["tile"+(showTile+1)]);
} else {
fp.tiles.getChildAt(showTile).alpha = 0;
fp.tilePics.addChild(findPicsLoader["tile"+(showTile+1)]);
findPicsLoader["tile"+(showTile+1)].x = fp.tiles.getChildAt(showTile).x;
findPicsLoader["tile"+(showTile+1)].y = fp.tiles.getChildAt(showTile).y;
}
stage.update();
}
}
message.pane.show();
}
////////////////////////////////////////////////
// PIC LOADING
// set up queue for loading images specified by database for matching code phrase in Hide section
var dataPicsPath = data.defaultDataDirectory;
app.hidePicsLoader = new cjs.LoadQueue(true, dataPicsPath);
app.hidePicsLoader.on("complete", hidePicsLoaded);
app.hidePicsLoader.on("error", hidePicsError);
var findPicsLoader = new cjs.LoadQueue(true, dataPicsPath);
findPicsLoader.on("complete", findPicsLoaded);
var time = false;
function hidePicsError(e) {
app.showMessage("Error " + e, "#cc0000");
}
var tryCount = 0;
function hidePicsLoaded(e) {
zog("doing load");
var d = data.hideData;
var results = [];
var scale;
// create and place intro pic (remove any old pics first)
if (app.hidePicsLoader.getResult("intro")) {
zog("doing intro");
hp.introContent.removeChild(hp.introPic);
hp.introPic = new cjs.Bitmap(app.hidePicsLoader.getResult("intro"));
results = [hp.introPic];
}
// create and place sponsor pics (remove any old pics first)
if (app.hidePicsLoader.getResult("sponsor1")) {
zog("doing sponsor1");
hp.sponsorPic1.removeAllChildren();
hp.sponsorBitmap1 = new cjs.Bitmap(app.hidePicsLoader.getResult("sponsor1"));
results.push(hp.sponsorBitmap1);
}
if (app.hidePicsLoader.getResult("sponsor2")) {
zog("doing sponsor2");
hp.sponsorPic2.removeAllChildren();
hp.sponsorBitmap2 = new cjs.Bitmap(app.hidePicsLoader.getResult("sponsor2"));
results.push(hp.sponsorBitmap2);
}
/*
fp.sponsor1Pic = new cjs.Bitmap(findPicsLoader.getResult("sp1"));
fp.sponsor2Pic = new cjs.Bitmap(findPicsLoader.getResult("sp2"));
var results = [fp.introPic,fp.sponsor1Pic,fp.sponsor2Pic];
*/
if (d.tilePics && d.tilePics.length>0) {
for (var i=1; i<=d.tilePics.length; i++) {
if (app.hidePicsLoader.getResult("tile"+i)) {
zog("doing tile");
app.hidePicsLoader["tile"+i] = new cjs.Bitmap(app.hidePicsLoader.getResult("tile"+i));
results.push(app.hidePicsLoader["tile"+i]);
}
}
}
for (var i=0; i<results.length; i++) {
if (!results[i].getBounds()) {
setTimeout(function() {
if (tryCount > 50) {
app.showMessage("Sorry, could not load pictures");
tryCount = 0;
hidePages.go(hp.first,"left");
// app.dataChanged = true;
} else {
hidePicsLoaded(null);
}
}, 200);
zog("trying again " + tryCount);
tryCount++;
return;
}
}
// message.pane.hide();
// message.words.text = "";
if (app.hidePicsLoader.getResult("intro")) {
zog("doing intro 2");
zim.fit(
hp.introPic, 0,0,
hp.introContent.getBounds().width,
hp.introContent.getBounds().height);
hp.introContent.addChild(hp.introPic);
}
zog("looping tiles here:");
loopTiles();
if (app.hidePicsLoader.getResult("sponsor1")) {
zog("doing sponsor 1 part 2");
zim.fit(
hp.sponsorBitmap1, 0,0,
hp.sponsorPic1.getBounds().width,
hp.sponsorPic1.getBounds().height);
hp.sponsorPic1.addChild(hp.sponsorBitmap1);
}
if (app.hidePicsLoader.getResult("sponsor2")) {
zog("doing sponsor 2 part 2");
zim.fit(
hp.sponsorBitmap2, 0,0,
hp.sponsorPic2.getBounds().width,
hp.sponsorPic2.getBounds().height);
hp.sponsorPic2.addChild(hp.sponsorBitmap2);
}
waiter.hide();
if (hidePages.page == hp.edit) hidePages.go(hp.intro,"right");
stage.update();
//findPages.go(fp.intro,"right");
//findPages.go(fp.look,"right");
}
function findPicsLoaded(e) {
var d = data.findData;
// create and place intro pic (remove any old pics first)
fp.introContent.removeChild(fp.introPic);
fp.introPic = new cjs.Bitmap(findPicsLoader.getResult("intro"));
fp.sponsor1Pic = new cjs.Bitmap(findPicsLoader.getResult("sponsor1"));
fp.sponsor2Pic = new cjs.Bitmap(findPicsLoader.getResult("sponsor2"));
var results = [fp.introPic,fp.sponsor1Pic,fp.sponsor2Pic];
for (var i=1; i<=d.tiles; i++) {
findPicsLoader["tile"+i] = new cjs.Bitmap(findPicsLoader.getResult("tile"+i));
results.push(findPicsLoader["tile"+i]);
}
for (var i=0; i<results.length; i++) {
if (!results[i].getBounds()) {
setTimeout(function() {
if (tryCount > 50) {
app.showMessage("Sorry, could not load pictures", "#CC0000");
tryCount = 0;
message.pane.hide();
message.words.text = "";
findPages.go(fp.code,"left");
lastCodeValue = null;
} else {
findPicsLoaded(null);
}
}, 200);
zog("trying again " + tryCount);
tryCount++;
return;
}
}
message.pane.hide();
message.words.text = "";
zim.fit(
fp.introPic, 0,0,
fp.introContent.getBounds().width,
fp.introContent.getBounds().height);
fp.introContent.addChild(fp.introPic);
// create the sponsor pics
// should always be a sponsor as there are default sponsor graphics provided
// remove old sponsor pics
hs.removeHotSpots(fp.lookBot, fp.sponsor1Pic);
hs.removeHotSpots(fp.lookBot, fp.sponsor2Pic);
fp.lookBot.removeChild(fp.sponsor1Pic);
fp.lookBot.removeChild(fp.sponsor2Pic);
var scale = app.sponsorW/fp.sponsor1Pic.getBounds().width;
zim.scale(fp.sponsor1Pic, scale);
fp.sponsor1Pic.x = app.gutter;
fp.sponsor1Pic.y = fp.sponsorBacking.y + app.gutter/2;
fp.lookBot.addChild(fp.sponsor1Pic);
var u1 = (d.sponsor1Url) ? d.sponsor1Url : data.defaultSponsor1Url;
hs.addHotSpot(fp.lookBot, fp.sponsor1Pic, function(){zgo(u1,"sp1");});
scale = app.sponsorW/fp.sponsor2Pic.getBounds().width;
zim.scale(fp.sponsor2Pic, scale);
fp.sponsor2Pic.x = fp.sponsor1Pic.x + app.sponsorW + app.gutter/2;
fp.sponsor2Pic.y = fp.sponsorBacking.y + app.gutter/2;
fp.lookBot.addChild(fp.sponsor2Pic);
var u2 = (d.sponsor2Url) ? d.sponsor2Url : data.defaultSponsor2Url;
hs.addHotSpot(fp.lookBot, fp.sponsor2Pic, function(){zgo(u2,"sp2");});
// create the tile graphics
for (var i=1; i<=d.tiles; i++) {
//findPicsLoader["tile"+i] = new cjs.Bitmap(findPicsLoader.getItem("tile"+i).src);
if (findPicsLoader["tile"+i].getBounds() && findPicsLoader["tile"+i].getBounds().width > 0) {
if (d.spacing) {
scale = (app.tileW-10) / findPicsLoader["tile"+i].getBounds().width;
findPicsLoader["tile"+i].x = findPicsLoader["tile"+i].y = 5;
} else {
scale = (app.tileW) / findPicsLoader["tile"+i].getBounds().width;
findPicsLoader["tile"+i].x = findPicsLoader["tile"+i].y = 0;
}
zim.scale(findPicsLoader["tile"+i], scale);
zog("hide scale: " + scale);
}
}
stage.update();
//findPages.go(fp.intro,"right");
//findPages.go(fp.look,"right");
}
////////////////////////////////////////////////
// HELPERS
// wraps a zim.Pane() object and adds a text field
// makes a pane with text that can be used as an alert window, etc.
// can add to stage via message.pane.show();
// can change the text via message.words.text = "message";
// (actually added a label to ZIM Pane class but just left this the old way)
var message = new Message();
// stage, width, height, label, color, drag, resets, modal, corner, backingAlpha, shadowColor, shadowBlur
function Message() {
//stage, width, height, color, drag, resets, modal, corner, backingAlpha
this.pane = new zim.Pane(
overlays,
overlays.getBounds().width*.7,
overlays.getBounds().width*.7/3,
null,"#cccccc",false,false,true,20,.8);
var alertPic = new cjs.Bitmap(preload.getResult("alert"));
alertPic.alpha = .8;
alertPic.regX = alertPic.getBounds().width/2;
alertPic.regY = alertPic.getBounds().height/2;
this.pane.addChild(alertPic);
alertPic.mask = this.pane.display;
this.pane.display.on("click",function(){this.pane.hide();})
this.words = new createjs.Text(" ", (overlays.getBounds().width*.1) +"px zebrawood", "#913322");
this.words.shadow = new createjs.Shadow("#999999", 3, 3, 10);
this.words.textAlign = "center";
this.words.textBaseline = "middle";
this.pane.addChild(this.words);
}
// handle turning off zil when text is in focus
var textList = [zid("hpMakeCodeWord"),zid("hpMakePassWord"),zid("hpCodeWord"),zid("hpStoryTitle"),zid("hpStoryText")];
for (var i=0; i<textList.length; i++) {
textList[i].addEventListener("focus", function() {
window.removeEventListener("keydown", zilEvents[0]);
});
textList[i].addEventListener("blur", function() {
window.addEventListener("keydown", zilEvents[0]);
});
}
}
return app;
} (app || {});
</script>