title = "SAFE Game"
url = "/games2"
is_hidden = 0

[renderForm]
formCode = "sas-game-signup"
redirect = "enter-competition-thankyou"

[captcha]
==
<?php
/**
  _____                           _   _ _   _               ______
 / ____|                         | | (_) | (_)             |  ____|
| |     ___  _ __ ___  _ __   ___| |_ _| |_ _  ___  _ __   | |__ ___  _ __ _ __ ___
| |    / _ \| '_ ` _ \| '_ \ / _ \ __| | __| |/ _ \| '_ \  |  __/ _ \| '__| '_ ` _ \
| |___| (_) | | | | | | |_) |  __/ |_| | |_| | (_) | | | | | | | (_) | |  | | | | | |
 \_____\___/|_| |_| |_| .__/ \___|\__|_|\__|_|\___/|_| |_| |_|  \___/|_|  |_| |_| |_|
                      | |
                      |_|

**/


// Insert data from signup form
function dbUpdate($table, $rowData, $storyKey){
  // Make storyKey available to other pages
  $_SESSION['storyKey']=$storyKey;
  Db::table($table)
    ->where('story_id', $storyKey)
    ->update($rowData);
  //Db::table($table)->insert($rowData);
}

function mailChimpSendHelper($list, $formData){
  $url = 'https://www.safe.org.nz/services/mailchimp/index.php';
  $key="123";
  $action = "subscribe";
  $list = $list;
  $firstName = $formData['story_contributor_name'];
  $lastName = $formData['story_contributor_lastname'];
  $emailAddress = $formData['story_contributor_email'];

    $mailChimpData = array(
                      'key' => '1234', 
                      'action' => 'subscribe',
                      'list' => $list,
                      'firstname' => $firstName,
                      'lastname' => $lastName,
                      'emailaddress' => $emailAddress,
                      );
  // use key 'http' even if you send the request to https://...
  $options = array(
    'http' => array(
      'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
      'method'  => 'POST',
      'content' => http_build_query($mailChimpData),
    ),
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
var_dump($result);

}

function mailChimpSubscribe($formData){
  // echo '<pre>';
  // print_r($formData);
  // die('</pre>');
  $mailChimpLists = $formData['mailchimp_lists'];
  if(stristr($mailChimpLists,'|')){
    //More than one list
    //split into array
    $listOfLists = explode('|', $mailChimpLists);
    for ($i=0; $i < count($listOfLists); $i++ ){
      $ok = $this->mailChimpSendHelper($listOfLists[$i], $formData);
    }
    //Look through array, sending sub
  } else {
    // only one list 
    $ok = $this->mailChimpSendHelper($mailChimpLists, $formData);
  }
}


// Competition form processing
function onFormSubmit(){
// scaffold
  $rowData =[];
  $rowData['story_contributor_name'] =post('firstname'); 
  $rowData['story_contributor_lastname'] =post('lastname'); 
  $rowData['story_contributor_email'] =post('emailaddress'); 
  $rowData['story_contributor_age'] = post('age');
  $rowData['mailchimp_lists'] = post('mailchimp_lists');
  //$rowData['story_id'] = post('storykey');
  $storyKey = post('storykey');
  $ok = $this->mailChimpSubscribe($rowData);

  $this->dbUpdate('safe_game_story',$rowData ,$storyKey);

  // These variables are available inside the message as Twig
$vars = ['firstname' => post('firstname'), 'lastname' => post('lastname'), 'storyKey' => post('storykey')];

Mail::send('cloudworks.safe.sas::game.signup', $vars, function($message) {

    $message->to('alex@safe.org.nz', 'Admin Person');
    $message->bcc('support@prema.co.nz', 'Technimagician');
    $message->subject('Your game story has been received');

  });
}

// TODO Integrate into local onStart
// function onStart(){
//   $storyId = uniqid();
//   $this['storyId'] = $storyId;
// }

/*****  End of competition form ***********/


/* Page helpers */
function removeDirDots($fileList){
  $dirArr[]='.';
  $dirArr[]='..';
  $spriteArr = array_diff($fileList, $dirArr);
  return $spriteArr;
}


function getDataSet($sql){
    //Select products
    $dataSet = DB::connection('mysql')->select($sql);
    return $dataSet;
 }

/**
 * Get data for story (by UUID)
 */

function onRefreshStory(){
   $sql = "SELECT * FROM safe_game_pages ORDER BY page_id DESC LIMIT 8";
   $this['storypages'] = $this->getDataSet($sql);
}



function onGetStory($storyId){
  if(isset($storyId)){
    //TODO - deal with bad storykey
     $sql = "SELECT * FROM safe_game_pages WHERE story_uuid = '$storyId'";
     //Session:put('story.key', $storyId);

     $this['storypages'] = $this->getDataSet($sql);
     $this['storyName'] = $this['storypages'][0]->story_name;
   }
 }


function onSaveStory(){
  // block save if viewer mode
  if (get('viewer')==true){
    exit();
  }
  //die('saving story');
  // echo '<pre>';
  // print_r(json_decode(post('jsonData')));
  // die('</pre>');
// OK to here Wed 11 October 2017 04:09
// 
  $pageData = json_decode(post('jsonData'), true);
  $dataSet = [];
  $row = [];
  for($i=0; $i<8; $i++){
    //Fetch a row 
    $pageDataRow = $pageData[$i]; // one row

    // echo '<pre>';
    // print_r($pageData);
    // die('</pre>');
    // Extract data 
    //$storyId = $pageDataRow['storyid'];
    $pageId = $pageDataRow['pageid'];
    $pageName = $pageDataRow['pagelabel'];
    $pageJson = $pageDataRow['pagejson'];

// echo '<pre>';
// print_r($pageDataRow);
// die('</pre>');



    // echo '<pre>';
    // print_r($pageJson);
    // print_r($pageName);
    // print_r($pageId);

    // die('</pre>');

    //Primary Key
    $row['page_id'] = $pageId;

    // Create page array
    // $row['story_uuid'] = $storyId; 
    // $row['page_name'] = $pageLabel; 
    // $row['page_json'] =  $pageLabel
    // $row['notes'] = '';
    
    // Beam 'er up '
    Db::table('safe_game_pages')
    ->where('page_id', $pageId)
    ->update([
                // 'story_uuid' => $storyId,
                'page_name' => $pageName,
                'page_json' => $pageJson
            
                ]);
  }


  return 'story saved';
 

}

/**
 * Get the number of sprites in each category 
 * 
 */

function getSpriteCount($spriteType){
  $spriteStoragePath = storage_path()."/app/media/game/img/$spriteType";
  $svgPath = $spriteStoragePath;
  // Scan svg path for sprites
  $fileList = scandir($svgPath);
  // Remove dots
  $svgList = $this->removeDirDots($fileList);
  return count($svgList);
}





/**
 *
 * Manage palette page changes
 *
 */

function onPalettePageChange(){ 
  // Get post vars 
  $start = post('start');
  $count = post('count');
  $spriteType = post('type');
  //die($spriteType);
  
  // Set storage path
  $spriteStoragePath = storage_path()."/app/media/game/img/$spriteType";
  $svgPath = $spriteStoragePath;

  // Scan svg path for sprites
  $fileList = scandir($svgPath);

  
  // Remove dots
  $svgList = $this->removeDirDots($fileList);
  
  // Slice a segment from the list
  $svgSegment = array_slice($svgList, $start, $count);
  $listName = $spriteType."List"; // eg "bg", "sprite" etc
  $this[$listName] = $svgSegment;
}

function onCreateStory(){
  //die('create Story');
  //Get post vars
  $storyName = post('storyname');
  $storyUuid = uniqid();
  $storyContributor = post('contributorname');
  $emailAddress = post('emailaddress');
  //$response = $_POST["g-recaptcha-response"];

/*
   _____                      _       _
    |  __ \                    | |     | |
    | |__) |___  ___ __ _ _ __ | |_ ___| |__   __ _
    |  _  // _ \/ __/ _` | '_ \| __/ __| '_ \ / _` |
    | | \ \  __/ (_| (_| | |_) | || (__| | | | (_| |
    |_|  \_\___|\___\__,_| .__/ \__\___|_| |_|\__,_|
                         | |
                         |_|
*/
  // $url = 'https://www.google.com/recaptcha/api/siteverify';
  //   $data = array(
  //     'secret' => '6Lf0BzUUAAAAAHg3eRhFu-3Gx-4KSf3lX9f_BF6_', // Secret
  //     'response' => post("g-recaptcha-response")
  //   );
  //   $options = array(
  //     'http' => array (
  //       'method' => 'POST',
  //       'content' => http_build_query($data)
  //     )
  //   );
    // Create row array
    $row['story_id'] = $storyUuid;
    $row['story_name'] = $storyName;
    $row['story_contributor_name'] = $storyContributor;
    $row['story_contributor_email'] = $emailAddress;
    
    Db::table('safe_game_story')->insert($row);
    
    // Session:put('story.name', $storyName);
    // Session:put('story.key', $storyUuid);
    // Session:put('story.contributor', $storyContributor);
    // Session:put('story.emailaddress', $emailAddress);
    
    
    // Create page set (8 pages)
    $this->createPageSet($storyUuid,$storyName);
    $storyUrl = $this->currentPageUrl();
    $storyLink = $storyUrl.'?story='.$storyUuid;

    // add stuff to the data object
    $data['storyLink'] = $storyLink;
    // Save to twig var
    $this['storyLink'] = $storyLink;
    return $data;




 
  //echo $storyUuid;
}

function createPageSet($storyUuid, $storyName){
  $dataSet = [];
  $row = [];
  for($i=0; $i<8; $i++){

    $row['story_uuid'] = $storyUuid;
    $row['story_name'] = $storyName;
    $row['page_name'] = '';
    $row['page_json'] = '';
    $row['notes'] = '';
    $dataSet[]= $row;
  }
  Db::table('safe_game_pages')->insert($dataSet);
  // Load the new story
  $this->onGetStory($storyUuid);
  return 'Ok';

}

function onGameformSubmit(){

    // Grab the data 
    $formData=[];
    $formData['contributor_firstname']=post('contributor_firstname');
    $formData['contributor_lastname']=post('contributor_lastname');
    $formData['contributor_age']=post('contributor_age');
    $formData['contributor_email']=post('contributor_email');
    $formData['contributor_storykey']=post('contributor_storykey');
    $formData['contributor_notes']=post('contributor_notes');
}


function onPageUpdate(){
    //print_r(post());
    //die();
    // Disable save
    Db::table('safe_game_pages')
    ->where('page_id', post('page_id'))
    ->update(['page_name' => post('page_name'), 'page_json' => post('page_json'),]);
    //echo '<pre>';
    //print_r(post());
    //die('</pre>');
}

// /** Program **/
function onStart(){
  
  // Load default story    Thu 12 October 2017 23:12
  // $demoStoryKey = "0366888d-983d-11e7-bd29-06f5b15584a7";
  // $this->onGetStory($demoStoryKey);
  // 
  if(null !== get('viewer')){
    $this['viewerStoryDataset'] = $this->getDataSet('SELECT * FROM safe_game_story WHERE in_competition = "yes"');
  }

  // Load story from link
  if(null !==(get('story'))){
      // "story" in url
      $storyKey = get('story');  // Get story key
      $this->onGetStory($storyKey); // Grab story

      // Write the current story key
      $this['storyKey'] = $storyKey;

    }else{
      $demoStoryKey = "0366888d-983d-11e7-bd29-06f5b15584a7";
      $this['storyKey'] = $demoStoryKey;
      $this['storyUrl'] = $this->currentPageUrl();
      $this->onGetStory($demoStoryKey);
  }
  
    // Game Sign up form ??? Still used?
    $this['frm_open'] = Form::ajax('onGameformSubmit', ['confirm' => 'Thank you for your message']);
    $this['frm_firstname'] = Form::text('contributor_firstname', 'Your first name', ['class'=>'input']);
    $this['frm_lastname']= Form::text('contributor_lastname', 'Your last name ',['class'=>'input']);
    $this['frm_age']= Form::text('contributor_age', 'Your age',['class'=>'input']);
    $this['frm_email']= Form::text('contributor_email', 'Email address',['class'=>'input']);
    $this['frm_storykey']= Form::hidden('contributor_storykey','storykey',['class'=>'input']);
    $this['frm_submit']= Form::submit('Send message',['class'=>'button text is_right']) ;
    $this['frm_close']= Form::close();

    // Get sprite counts for each of the categories 
    $this['bgTotalSprites'] = $this->getSpriteCount('bg');
    $this['spriteTotalSprites'] = $this->getSpriteCount('sprite');
    $this['bubbleTotalSprites'] = $this->getSpriteCount('bubble');
    $this['natureTotalSprites'] = $this->getSpriteCount('nature');
    // End of PHP 
}
?>
==
<!DOCTYPE html>
    <html>

    <head>
       <title>SAS Game </title>
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <link rel="stylesheet" href="{{ 'assets/game/css/style.css' |theme}}"> -->

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
        <link href="{{ 'assets/css/animate.css' |theme }}" rel="stylesheet">
        <link rel="stylesheet" href="{{ 'assets/css/app.css' |theme}}">
        <link rel="stylesheet" href="{{ 'assets/game/css/style.css' |theme}}">
        <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
        <script>
        </script>
    </head>

    <body>
       <!-- <center><a href="https://base.prema.co.nz:8010/sas/games/gamedev">GameDev</a></center> -->
<!-- Top Menu -->
<div class="notification is-danger captcha-error" style="display:none">
  <button class="delete"></button>
  <p style="text-align:center; font-size:1.2em">Our system could not identify you as a site visitor. Please verify by refreshing your browser and clicking 'I am not a robot' after naming your story</p>
</div>
{% partial 'gameNav' %}

<!-- Message - best for desktop -->
<div class="container w3-center w3-hide-large">
<p style="font-size:14px; color:#64af59; padding:15px">Our game is best viewed on a late version chrome browser.<br> A mobile version will be available soon.</p>
<img style="margin-bottom:20px" src="{{'game/chrome.png' | media}}"/>
</div>

<!-- 
      __  __     __               _     __                                   __
     / / / /__  / /___     _   __(_)___/ /__  ____     ____ _   _____  _____/ /___ ___  __
    / /_/ / _ \/ / __ \   | | / / / __  / _ \/ __ \   / __ \ | / / _ \/ ___/ / __ `/ / / /
   / __  /  __/ / /_/ /   | |/ / / /_/ /  __/ /_/ /  / /_/ / |/ /  __/ /  / / /_/ / /_/ /
  /_/ /_/\___/_/ .___/    |___/_/\__,_/\___/\____/   \____/|___/\___/_/  /_/\__,_/\__, /
              /_/                                                                /____/ 
-->

<div id="videoWrapper">
<div class="container">
    <div class="w3-center" style="background-color:#ffc028; height:60px; padding-top:5px; color:white !important">
      <button class="close closeVideo">START GAME ></button>
      <button class="close galleryOpen">
              <a href="http://d01.cloudworks.co.nz/safeanimalsquad/game-gallery" 
                 style="color:#ffffff"
                 target="_blank">GALLERY</a>
<!--https://safeanimalsquad.org.nz/games?story=59fb8563cf9a0&viewer=true --->
      </button>
      <!--<h4 style="margin-top:-1px; color:purple">Thankyou for your interest.<br> The competition will open shortly. </h4> -->
    <h1 class="w3-center headerIntroVideo">Animal Tales - How to play video tips</h1>
  </div>
</div>

<div class="container">
<div class="w3-content w3-center">
   <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/li8Zh0qggh0?rel=0&ampcc_load_policy=1; controls=0&amp; showinfo=0" frameborder="0" allowfullscreen></iframe>

    <!--<iframe id="lucyVideo"  
    src="https://www.youtube.com/embed/QM2qryIw4Q0?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen>
    </iframe> -->
    </div>
   </div> 
  </div> 
</div>
<!--
  _____ _     _        _                  _              _
 / ____(_)   | |      | |                | |            | |
| (___  _  __| | ___  | |__   __ _ _ __  | |_ ___   ___ | |___
 \___ \| |/ _` |/ _ \ | '_ \ / _` | '__| | __/ _ \ / _ \| / __|
 ____) | | (_| |  __/ | |_) | (_| | |    | || (_) | (_) | \__ \
|_____/|_|\__,_|\___| |_.__/ \__,_|_|     \__\___/ \___/|_|___/

-->

<section id="game-section" class="section w3-hide-small w3-hide-medium" style="display:none">
    <div class="container story-sidebar">
        <div class="columns" style="position:relative">
            <!-- Left column -->
                          <!-- Viewer Arrow - left -->
            
            <div class="column is-narrow palette-column game-space" style="background-color:#ffca28;  max-width:117px; height:680px">
                <div class="flex-container" 
                     style="background-color:#ffca28;  max-width:90px; height:630px; display:none">
                    <img class="flex-itemx viewer-story-pager left" style="width:60px; height:60px; cursor:pointer; cursor:hand" 
                        src="{{'game/img/icons/left.svg' | media}}" />
                    <br>
                    <span style="margin-left:10px; margin-top:-10px; font-family: 'Caveat Brush', cursive; font-size:24px; color:black">
                      Back
                    </span>
                 </div>
            </div>
               <!--Viewer Arrow -left  ends -->



               <!-- Palette starts -->
            <div class="column is-narrow palette-column game-space"  style="background-color:#ffca28;  max-width:117px; height:680px">
            
            <div style="padding-top:40px"></div>
                <a class="tool-selector getTextbox  tool-button w3-ripple" href="#">
                        <img class="tool-selector-normal originalToolButton" src="{{ '/game/img/icons/bottom/text.svg' | media}}">
                        <img class="tool-selector-hover toggleToolButton" id="textHover" style="display:none" src="{{ '/game/img/icons/bottom/textHover.svg' | media}}">
                      </a>
                <a class="tool-selector deleteButton tool-button w3-ripple" href="#">
                        <img class="tool-selector-normal originalToolButton" src="{{ '/game/img/icons/bottom/delete.svg' | media}}">
                        <img class="tool-selector-hover toggleToolButton"  style="display:none" src="{{ '/game/img/icons/bottom/deleteHover.svg' | media}}">
                      </a>
                 <a class="tool-selector howToButton  tool-button  w3-ripple" href="https://www.youtube.com/embed/li8Zh0qggh0?rel=0&ampcc_load_policy=1" target="_blank">
                        <img class="tool-selector-normal originalToolButton" src="{{ '/game/img/icons/bottom/howTo.svg' | media}}">
                        <img class="tool-selector-hover toggleToolButton" style="display:none" src="{{ '/game/img/icons/bottom/howToHover.svg' | media}}">
                      </a>
                <a class="tool-selector donebutton  tool-button w3-ripple" href="#" onclick="onSaveStory(event, this)">
                        <img class="tool-selector-normal originalToolButton" src="{{ '/game/img/icons/bottom/done.svg' | media}}">
                        <img class="openMessage tool-selector-hover toggleToolButton"  style="display:none" src="{{ '/game/img/icons/bottom/doneHover.svg' | media}}">
                      </a>
            </div>

            
<!-- Done button popup -->
<div class="done-wrapper w3-center" style="display:none">
  <h3 class="w3-center">Have you finished creating<br> your story?</h3>
    <input style="width:180px; margin-top:20px" class="yesFinished submit button" type="submit" name="submitButton" value="Yes, I've finished" onsubmit="return false" /><br>
    <input style="width:180px; margin-top:20px" class="noWorking  submit button" type="submit" name="submitButton" value="No, I'm still working" onsubmit="return false" /><br>
</div>

<!-- 
   ______                           __  _ __  _                ____
  / ____/___  ____ ___  ____  ___  / /_(_) /_(_)___  ____     / __/___  _________ ___
 / /   / __ \/ __ `__ \/ __ \/ _ \/ __/ / __/ / __ \/ __ \   / /_/ __ \/ ___/ __ `__ \
/ /___/ /_/ / / / / / / /_/ /  __/ /_/ / /_/ / /_/ / / / /  / __/ /_/ / /  / / / / / /
\____/\____/_/ /_/ /_/ .___/\___/\__/_/\__/_/\____/_/ /_/  /_/  \____/_/  /_/ /_/ /_/
                    /_/

-->
<div class="tile is-child" id="story-form-wrapper-div">
   
   <div class="container w3-center">
        <div class="columns w3-center" style="position:relative">
         
          <div class="column  is-7 is-offset-3 storyform">
           <button  class="close competitionFormClose">&times;</button>
           <h1 class="w3-center headerIntro">Share your story!</h1>
          <!-- <p style="text-align:center; color:#ed1c24; margin-bottom: 10px; margin-top: 0px; font-size: 16px;">Oops! Please check your information is correct. </p> -->

            <form id="competition-form" data-request="onFormSubmit"
                  data-request-redirect="{{ url('/games/competition-thanks') }}" 
                  style="max-width:360px; margin:0 auto; display:block">


                <div class="field is-vertical">
                    <div class="control">
                         <div class="compLabel" style="height:1.0em; margin-bottom:5px">First Name</div>
                        <input name="firstname" class="input is-success compField" type="text" placeholder="First Name" required>
                    </div>
                </div>


                <div class="field is-vertical">       
                    <div class="control">
                        <div class="compLabel" style="height:1.0em; margin-bottom:5px">Last Name</div>
                        <input name="lastname" class="input is-success compField" type="text" placeholder="Last Name" required>
                    </div>
                </div>

                <div class="field is-vertical">
                    <div class="control">
                        <div class="compLabel" style="height:1.0em; margin-bottom:5px">Email Address</div>
                        <input name="emailaddress" class="input is-sucess compField" type="email" placeholder="Email address" required>
                    </div>
                </div>

                <div class="field  is-vertical">
                    <div class="control">
                        <div class="compLabel" style="height:1.0em; margin-bottom:5px">Your Age</div>
                        <input name="age" placeholder="Your Age" class="input is-success compField" type="number" min="0" max="14" style="width:90px" required>
                    </div>
                </div>

                <div style="text-align:left"><p style="color:#ed1c24; margin-bottom: 5px; margin-top: 5px; font-size: 14px">
                    We will use this information to let you know if we put your story in our gallery.</p></div>


                <div class="field  is-vertical">
                    <div class="field-label is-normal">
                        <label style="display:inline" class="label">Link to your story :</label><a 
                        class="storyClickLink" href="{{ url('/') }}/games?story={{storyKey}}" > Your story</a>
                    </div>
                </div>

                <div class="field is-vertical" style="display:flex; float:right">
                    <div class="control is-right">
                        <input class="button is-success compSubmit" type="submit" value="Done">
                    </div>
                </div>
                <div>
                  <input type="hidden" name="storykey" value="{{ storyKey }}">
                  <input type="hidden" name="storyname" value="My new story">
                  <input type="hidden" name="mailchimp_lists" value="23d3c40dc6">
                </div>
            </form>
            <div class="control">{{ signup.close |raw }}</div> 
            

          </div>
              
        </div>
    </div>  
</div><!-- end story-form-wrapper-div -->

<!--
  _____
 / ____|
| |     __ _ _ ____   ____ _ ___
| |    / _` | '_ \ \ / / _` / __|
| |___| (_| | | | \ V / (_| \__ \
 \_____\__,_|_| |_|\_/ \__,_|___/

-->


<div class="column canvas-column game-space">
    <div class="inner-canvas-wrapper">
        <canvas id="c" style="width:1020px; height:460px; top:20px; left:10px !important">
        </canvas>
    </div>
        
        <!-- below for gallery only -->
        <div class="columns is-primary galleryStoryCaption" style="width:100%; height:30x; margin-top:30px; margin-left:20px; display:none">
          <span class="storyTitle"></span>
          <span class="storyContributor"></span>
          <span class="storyAge"></span>
        </div>

        <div class="columns is-primary galleryPages" style="width:100%; height:100px; margin-top:10px; margin-left:20px; display:none">
           <div class="column" style="cursor:pointer; cursor:hand">
                <div class="w3-cell-row safelikewrapper">
                  <div class="w3-cell w3-container">
                    <img class="safelikebtn" src="storage/app/media/Blog/likeButton.svg" data-campaign="safe-youth" data-site="sas" data-page="animal-facts" data-button="Animal Facts - chickens">
                  </div>
                  <div style="display: inline-block; font-size: 1em; color: rgb(0, 0, 0);" class="w3-cell w3-container safelikebubble"></div>
                </div>
          </div>
        </div>


<!--

  _____ _                     _ _       _       __
 / ____| |                   | (_)     | |     / _|
| (___ | |_ ___  _ __ _   _  | |_ _ __ | | __ | |_ ___  _ __ _ __ ___
 \___ \| __/ _ \| '__| | | | | | | '_ \| |/ / |  _/ _ \| '__| '_ ` _ \
 ____) | || (_) | |  | |_| | | | | | | |   <  | || (_) | |  | | | | | |
|_____/ \__\___/|_|   \__, | |_|_|_| |_|_|\_\ |_| \___/|_|  |_| |_| |_|
                       __/ |
                      |___/

-->

<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content" style="width:100%; height:100%">
    
   <div class="tile is-child signup-wrapper">

  <div class="signup-inner">
      <img src="{{'game/hello.svg' | media}}"/>
       <div class="tile is-child is-horizontal  signup-form-wrapper" style=" width:inherit">
        <form   data-request="onCreateStory" 
        data-request-success="onCreateStory(event, data)"
        data-request-error = "$('.captcha-error').slideDown(200)">
          <input maxlength="70" placeholder="Name your story" class="story-title input" 
          style="width:320px; border:2px solid #ff003d; color:black" name="storyname" type="text">
          <input class="button input storyform-submit" type="submit" value="Next">
      </form>
    </div>
  </div>

    <!--<div  id="signupStoryLink" class="tile is-child is-horizontal" style="display:none; width:inherit; margin-top:110px">
       <img src="{{'game/letsgo-next.svg' | media}}"/>
    </div> -->
    
</div>


  </div>
</div>



<!--
 _____      _      _   _          _____      _           _
|  __ \    | |    | | | |        / ____|    | |         | |
| |__) |_ _| | ___| |_| |_ ___  | (___   ___| | ___  ___| |_ ___  _ __
|  ___/ _` | |/ _ \ __| __/ _ \  \___ \ / _ \ |/ _ \/ __| __/ _ \| '__|
| |  | (_| | |  __/ |_| ||  __/  ____) |  __/ |  __/ (__| || (_) | |
|_|   \__,_|_|\___|\__|\__\___| |_____/ \___|_|\___|\___|\__\___/|_|
-->

    <div class="palette-selector-wrapper" style="position:relative; height:30px">
        <div class="tabButtons" style="position:absolute; margin:auto; top:-26px; width:30%; left:40%">
            <a class="backgroundButton palette-selector has-text-centered" href="#" 
            onClick="StoryController.paletteCategorySelectorClick(event, this, 'bg'); return false;">

                  <img 
                    class="palette-selector-normal" 
                    src="{{ '/game/img/icons/background.svg' | media}}" 
                    title="Backgrounds">
                  <img 
                    class="palette-selector-hover"
                    src="{{ '/game/img/icons/backgroundHover.svg' | media}}" 
                    title="Backgrounds">
               </a>
            <a class="artifactButton palette-selector has-text-centered" href="#" 
            onClick="StoryController.paletteCategorySelectorClick(event, this, 'sprite' )">
                  <img 
                    class="palette-selector-normal" 
                    src="{{ '/game/img/icons/artifact.svg' | media}}" 
                    title="Characters">
                  <img 
                    class="palette-selector-hover" 
                    src="{{ '/game/img/icons/artifactHover.svg' | media}}" 
                    title="Characters">
                </a>
            <a class="speechButton palette-selector has-text-centered" href="#" 
            onClick="StoryController.paletteCategorySelectorClick(event, this, 'bubble' )">
                  <img 
                    class="palette-selector-normal" 
                    src="{{ '/game/img/icons/speech.svg' | media}}" 
                    title="Speech">
                  <img 
                    class="palette-selector-hover" 
                    src="{{ '/game/img/icons/speechHover.svg' | media}}" 
                    title="Speech">
                </a>
                <a 
                  class="natureButton palette-selector has-text-centered" 
                  onClick="StoryController.paletteCategorySelectorClick(event, this, 'nature' )">
                  <img 
                    class="palette-selector-normal" 
                    src="{{ '/game/img/icons/leaf.svg' | media}}" 
                    title="Nature">
                  <img 
                    class="palette-selector-hover"
                    src="{{ '/game/img/icons/leafHover.svg' | media}}" 
                    title="Nature">
                </a>
        </div>
    </div>
                    <!-- Selector buttons end -->
<!--
 _____      _      _   _
|  __ \    | |    | | | |
| |__) |_ _| | ___| |_| |_ ___
|  ___/ _` | |/ _ \ __| __/ _ \
| |  | (_| | |  __/ |_| ||  __/
|_|   \__,_|_|\___|\__|\__\___|

-->
                     <!-- Palette -->
                    <div class="columns is-centered story-palette" style="height:140px; margin-top:25px">
                        <!-- Palette - Left Arrow  -->
                        <div class="column is-narrow" style="width:120px; padding-top:25px">
                            <img data-spritetype="" onclick="StoryController.palettePrevPage(event, this)" class="palette-page-decrement palette-pager animated" src="{{'/game/img/icons/left.svg' | media}}" title="Left">
                        </div>
                        <!-- Sprite list -->
                        <div class="column is-primary paletteList" style="display:block; margin-top:20px; text-align:center">
                            {% partial 'game/paletteList' %}
                        </div>
                        <!-- Right arrow -->
                        <div class="column is-narrow" style="width:120px; padding-top:25px">
                            <img data-spritetype="" onclick="StoryController.paletteNextPage(event, this)" class="palette-page-increment palette-pager animated" src="{{'/game/img/icons/right.svg' | media}}" title="Right" />
                        </div>
                    </div>
                </div>  <!-- End of palette selector -->

        <!-- Viewer Arrow - right -->
            <div class="column is-narrow rightStoryPager" style="background-color:#ffca28;  width:90px; height:680px; display:none">
                <div class="flex-container2" style="background-color:#ffca28;  
                             max-width:90px; 
                             height:630px">
                    <img class="flex-item2 viewer-story-pager right" style="width:60px; height:60px; cursor:pointer; cursor:hand" 
                    src="{{'/game/img/icons/right.svg' | media}}" />
                    <br>
                    <span style="margin-left:13px; margin-top:-10px; font-family: 'Caveat Brush', cursive; font-size:24px; color:black">Next Story</span>
                </div>
            </div>

        <!-- End of Viewer Arrow right -->

        </div>   <!-- End of canvas column -->



        </div>
</section>
        {#% partial 'game/paletteSelector' %#} 
        {#% partial 'game/paletteSection' %i#} 

<!--
  _____ _                     _____
 / ____| |                   |  __ \
| (___ | |_ ___  _ __ _   _  | |__) |_ _  __ _  ___ _ __
 \___ \| __/ _ \| '__| | | | |  ___/ _` |/ _` |/ _ \ '__|
 ____) | || (_) | |  | |_| | | |  | (_| | (_| |  __/ |
|_____/ \__\___/|_|   \__, | |_|   \__,_|\__, |\___|_|
                       __/ |              __/ |
                      |___/              |___/ 
 -->
        {% partial 'game/storyPager' %} 
    <h5 class="w3-center viewerGalleryIntro" style="padding-top:30px">Need a break? Copy and save your personal link to return to your story anytime.</h5>

    <div class="story-name-container"style="margin:0 auto; text-align:center; width:100%; padding-top:25px">
     <form >
          <input disabled placeholder="Story name: {{ storyName }}" class="story-title input" 
          style="width:360px; border:2px solid #ff003d; color:black; font-size:1.2rem" name="storyname" type="text">

          <input class="button input w3-center copy-link-button" 
          style="margin-left: -8px;
          background-color: #ff003d;
          color: white;
          font-size: 28px;
          padding-left: 15px;
          margin-top: -1px;
          font-family: 'Caveat Brush', cursive;
          padding-bottom: 2px;
          padding-top: 0;
          height: 36px;
          width: 80px; 
          height: 43px;" 
          type="submit" 
          value="Copy"
          onclick="copyLink(); return false"
          href="{{ storyUrl |raw }}?story={{ storyKey }}">
          <i class="fa fa-check" aria-hidden="true" style="color:#64af59; font-size:30px; display:none"></i>
      </form>
      </div>

<!--

     _____ _                      _____       _ _
    / ____| |                    / ____|     | | |
   | (___ | |_ ___  _ __ _   _  | |  __  __ _| | | ___ _ __ _   _
    \___ \| __/ _ \| '__| | | | | | |_ |/ _` | | |/ _ \ '__| | | |
    ____) | || (_) | |  | |_| | | |__| | (_| | | |  __/ |  | |_| |
   |_____/ \__\___/|_|   \__, |  \_____|\__,_|_|_|\___|_|   \__, |
                          __/ |                              __/ |
                         |___/                              |___/

-->
      <section class="section">
        <div class="container">
        <div class="tile is-ancestor is-centered" style="flex-wrap:wrap; justify-content:center">
          
          {% for story in viewerStoryDataset %}
<div class="tile is-1 box storyTile" style="margin:3px; cursor:pointer; cursor:hand; min-width:98px" onclick="clickStorySelectorPad(this,'{{ story.story_id }}')">
    <div class="tile is-vertical has-text-centered tilePadHtml" data-storyid="{{ story.story_id}}" data-padnumber="{{ loop.index }}" data-contributor="{{ story.story_contributor_name}}" data-age="{{ story.story_contributor_age}}" data-storyname="{{ story.story_name }}">
        <div class="tile faIconDiv" style="margin:0 auto; text-align:center"><i class="fa fa-picture-o faPic" aria-hidden="true" style="color:#ffca28; font-size:50px"></i></div>
        <div class="tile nameTile">{{ story.story_name }}</div>
        <div class="tile openLabel" style="display:none">
            <h5 style="font-family: 'Caveat Brush', cursive; font-size:28px; color:black; margin-left:5px">Open</h5>
        </div>
        
        
        <!--Like button starts -->
         <div class="w3-cell-row safelikewrapper" style="margin-left:-60px; width:80px">
            <div class="w3-cell w3-container">
                <img 
                    class="safelikebtnGallery" 
                    src="/storage/app/media/like/likeButtonNew.svg" 
                    style="height:60px; width:60px"
                    data-campaign="safe-youth" 
                    data-site="sas" 
                    data-page="games" 
                    data-button="{{ story.story_name }}" 
                    />
            </div>
            <div class="w3-cell w3-container safelikebubbleGallery">
            </div>
        </div> 
        <!-- Like button ends -->
    </div>
</div>
          {% endfor %}
<!--           <div class="tile is-1 box" style="margin:3px">
            Story tile
          </div>
          <div class="tile is-1 box" style="max-resolution: res;:3px">
            Story tile
          </div>     -->                
        </div>
      </div>
      </section>

          <!-- <div class="level lower-storylink has-text-centered" style="margin-top:16px">
              <span class="level-item"> 
                Story name: {{ storyName }} 
                <a class="copy-link-button" 
                   href="{{ storyUrl |raw }}?story={{ storyKey }}"
                   onclick="copyLink(); return false">
                   <i class="fa fa-files-o" style="color:#ffca28" aria-hidden="true"><span style="font-family: sans-serif">&nbsp;Click to copy</span></i>
                </a>  
              </span>
          </div> -->

        {% partial 'game/introBanner' %}  
        <div style="display:none"> 
        {% partial 'game/storyForm' %}  
        </div>

        {% partial 'game/gameFooter' %}

        <script>
          StoryController.bgTotalSprites = {{ bgTotalSprites }}
          StoryController.spriteTotalSprites = {{ spriteTotalSprites }}
          StoryController.bubbleTotalSprites = {{ bubbleTotalSprites }}
          StoryController.natureTotalSprites = {{ natureTotalSprites }}
          console.log('Total bg Sprites ', StoryController.bgTotalSprites);
          console.log('Total sprite Sprites ', StoryController.spriteTotalSprites);
          console.log('Total bubble Sprites ', StoryController.bubbleTotalSprites);
          console.log('Total nature Sprites ', StoryController.natureTotalSprites);
        </script>        

<script>
var $buoop = { notify: { i: -5, f: -4, o: -4, s: -2, c: -4 }, reminder: 0, reminderClosed: 6, unsecure: true, unsupported: false, style: "corner", test:false, text: "This game works best on Chrome -<b> Get Chrome Now</b>", api: 5 };

function $buo_f() {
    var e = document.createElement("script");
    e.src = "//browser-update.org/update.min.js";
    document.body.appendChild(e);
};
try { document.addEventListener("DOMContentLoaded", $buo_f, false) } catch (e) { window.attachEvent("onload", $buo_f) }

/** Page counter **/
/*
* Modified like button
* This version counts page clicks 
*
*/
$(document).ready(function(){
    var url = window.location.href;
    var slug=url.substr(url.lastIndexOf('/')+1);
    var like_campaign = 'Campaigns';
    var like_site = 'SAFE Animal Squad';
    var like_page = 'Game'; 
    var like_button = 'Visit' ; 
    $.post('/ajax_server',
            {
             action:'like',   
             like_campaign:like_campaign,
             like_site:like_site,
             like_page:like_page,
             like_button:like_button,
             }, 
             function(data){
                 console.log('Data:',data);                          
                 //thisButton.parent().next('.safelikebubble').text(' '+data+' likes');
        });
    });

</script>









</script>