8: meBot [code]

Posted on May 9, 2018 by Niky


//funtions used (in order):
//searchIt (searches for a term among recent tweets)
//randomTweetGenerator (includes r value and number output)
//followedMe (mentions people who follow, random intervals)
//mentionsMe (replies when someone @iamlittleprick)



console.log('meBot is working today');

var Twit = require('twit');
var config = require('./config');
var T = new Twit(config);


//begin searchIt funtion
setInterval(searchIt, 1000*60*60);
searchIt();

function searchIt(){
  var searches = {
    q: 'new media art',
    count: 1,
    lang: 'en'
  }
  // dev.twitter.com and get search/statuses

  T.get('search/tweets', searches, getSearches);

  function getSearches(err, data, response){
    var tweets = data.statuses;
    if (tweets != undefined) {
      for (var i = 0; i < tweets.length; i++){
      console.log("HERE'S WHAT THEY RECENTLY SAID ABOUT NEW MEDIA ART: " + tweets[i].text);
      }
    }
  }
}
//end searchIt function



//THIS ONE tweets randomly, with a random number
//begin randomTweetGenerator function
// randomTweetGenerator();
// var r2 = Math.floor(Math.random()*5;
// setInterval(randomTweetGenerator, 1000*60); //how often to tweet
//1000ms=1sec *60=1min *60=1hr
randomTweetGenerator();

var rr = Math.floor(Math.random()*(53));
setInterval(randomTweetGenerator, 1000*60*rr);

function randomTweetGenerator(){

  var begin = [
  "i've been thinking about getting",
  "i'd really like",
  "thinking about",
  "lusting over"
  ];

  var noun = [
    "cookies",
    "stickers",
    "friends",
    "dollars",
    "followers",
    "flowers",
    "teacups",
    "vacations",
    "kittens",
    "cats",
    "t-shirts",
    "stickers",
    "boardgames",
    "balls of yarn",
  ];

  var end = [
    "today.",
    "in the near future.",
    "right now.",
    "soon.",
    "with a friend.",
    "for you.",
    "for myself. #treatYoSelf"
  ]

 var codingHashtags = [
    "#coderProblems",
    "#codingThisBitch",
    "#programmerProblems",
    "#syntaxError",
    "#turnDownForWhat",
    "#goOutside",
  ];

  var nostalgicHashtags = [
    "#eveninmydreams",
    "#imnotevenjoking",
    "#nostalgic",
    "#thegoodoldays",
    "#thinkingTooMuch"
  ];

  var boredHashtags = [
    "#indecisive",
    "#bored",
    "#dontknowwhattodo",
    "#idontknow"
  ];


  begin1 = begin[Math.floor(Math.random()*begin.length)];
  noun1 = noun[Math.floor(Math.random()*noun.length)];
  end1 = end[Math.floor(Math.random()*end.length)];

  codingHashtags1 = codingHashtags[Math.floor(Math.random()*codingHashtags.length)];
  nostalgicHashtags1 = nostalgicHashtags[Math.floor(Math.random()*nostalgicHashtags.length)];
  boredHashtags1 = boredHashtags[Math.floor(Math.random()*boredHashtags.length)];

  var r = Math.floor(Math.random()*50) + 2;

  var myRandomTweet = [
    "i've thought about you " + r + " times since my last tweet. " + nostalgicHashtags1,
    "i've been coding a lot lately, and i'm currently averaging " + r + " EPH (expletives per hour). " + codingHashtags1,
    "i've wanted to go outside " + r + " times since my last tweet. alas, i sit under the fluorescents. " + codingHashtags1,
    begin1 + " " + r + " " + noun1 + " " + end1,
    begin1 + " " + noun1,
    "every once in a while i ask this question, and it's just to get to know you all a little better. here's the question: how did you stumble upon my account? #hideandseek",
    "what should i do tomorrow? " + boredHashtags1,
    "what should i do today? " + boredHashtags1,
    "what should i do this weekend? " + boredHashtags1,
    "hi :)"
    ];

  myRandomTweet1 = myRandomTweet[Math.floor(Math.random()*myRandomTweet.length)];


  console.log("....... randomTweetGenerator started");

    var replyTweet = {
      status: myRandomTweet1
    }

    T.post('statuses/update', replyTweet, replyTweeted);

    function replyTweeted(err, data, response){
      if (err){
      console.log("oh, nos... error on randomTweetGenerator tweet");
      }else{
      console.log("....... randomTweetGenerator posted " + myRandomTweet1);
      }
    }
} //end of randomTweetGenerator function





//THIS FUNCTION is anytime someone follows me
//begin followedMe function

var streamFollow = T.stream('user');

streamFollow.on('follow', followedMe);


function followedMe(eventMsg){
  var name = eventMsg.source.name;
  var screenName = eventMsg.source.screen_name;
  var followedReply = [
    "how are you?",
    "what are you up to?",
    "what's up?",
    "thanks for the follow!",
    "thanks for the follow!!",
    "thanks for the follow! :)",
    "where are you from?",
    "what brings you around these parts?",
    "how did you stumble upon my account?",
    "what do you like to do for fun?",
    ":)",
    ":) :) :)",
    "thanks for following me :)",
    "thanks for following :)",
    "thanks for the follow",
    "followed me! yay! :)"
  ];

  var followedReplyBegin = [
    "hi ",
    "hi! ",
    "hi, ",
    "",
    "",
    "",
    "",
    "",
    "",
    "hey, it's ",
    "well, hello there ",
    "look who we have here :) "

  ];

  var followedReply1 = followedReply[Math.floor(Math.random()*followedReply.length)];
  var followedReplyBegin1 = followedReplyBegin[Math.floor(Math.random()*followedReplyBegin.length)];

  console.log("....... followedMe // i've been followed by " + screenName);
  // tweetBack("hi @" + screenName + " " + reply1);

  function delayedTweetBack(s) {
    tweetBack(s);
  }

  var tweetString = followedReplyBegin1 + "@" + screenName + " " + followedReply1;

  var r = Math.floor(Math.random()*37);

  setTimeout(delayedTweetBack, (1000*60*r), tweetString);

  function tweetBack(txt){

    var replyTweet = {
    status: txt
    }

  T.post('statuses/update', replyTweet, replyTweeted);

    function replyTweeted(err, data, response){
      if (err){
        console.log("followedMe FAILED");
      }else{
        console.log("followedMe // " + tweetString);
      }
    }
  }
} //end of followed funtion




//THIS FUNTION IS: thanks for the mention
//begin mentionsMe

var streamMentions = T.stream('user');

streamMentions.on('tweet', mentionsMe);

function mentionsMe(eventMsg){
  // var fs = require('fs');
  // var json = JSON.stringify(eventMsg,null,2);
  // fs.writeFile("tweet.json", json);

  var replyto = eventMsg.in_reply_to_screen_name;
  var text = eventMsg.text;
  var from = eventMsg.user.screen_name;

  var reply = [
    "really?",
    "so....what are you up to?",
    "nice :)",
    "...um",
    "not today..",
    "i think so",
    "huh?",
    "i see..",
    "what do you think?",
    "yeah, same here",
    "only on wednesdays lol",
    ":)",
    "well, well, well...",
    "according to the prophecy",
    "yeah..",
    "of course",
    "i'm sorry",
    "oh, really??",
    "thanks",
    ":D",
    "i'm not so sure",
    "what are your thoughts?"
  ];

  var reply1 = reply[Math.floor(Math.random()*reply.length)];

  if (replyto === 'iamlittleprick'){
    console.log(from + " says: " + text);


    function delayedTweetBack(s) {
      tweetBack(s);
    }

    var tweetString = "@" + from + " " + reply1;

    var r = Math.floor(Math.random()*23);

    setTimeout(delayedTweetBack, (1000*60*r), tweetString);

    function tweetBack(txt){

      var replyTweet = {
      status: txt
      }

  T.post('statuses/update', replyTweet, replyTweeted);

    function replyTweeted(err, data, response){
      if (err){
        console.log("mentionsMe FAILED");
        }else{
        console.log("....... yay!! mentionsMe works");
      }
    }
  }
}
} //end of mentionsMe function

Project 8 (my code)

Posted on May 7, 2018 by Kathleen D.

Im Awake Are You Awake

.site {
float:top;
}
iframe {
float:right;
margin-bottom:5px;
height:350px;
width:800px;
}
body {
position: sticky;
padding-left:30%;

padding-right:20%;
padding-bottom:2%;
background-color:black;
}

Second Set of Code:

Firebase location

body {
background-color: black;
}
#log{
color: black;
}
.dot {
background-color: red;
border-radius: 50%;
display: inline-block;
width: 70px;
height: 70px;
position: absolute;
}

var config = {
apiKey: “AIzaSyD0gBQqKpHEjzAU7Gw96OaxZ3PdmqOG5Bo”,
authDomain: “sing-for-you.firebaseapp.com”,
databaseURL: “https://sing-for-you.firebaseio.com”,
projectId: “sing-for-you”,
storageBucket: “sing-for-you.appspot.com”,
messagingSenderId: “545356361457”
};

firebase.initializeApp(config);
var j = jQuery.noConflict();

var db = firebase.database();

var dot = db.ref(“dot”);

var currentMousePos = { x: -1, y: -1 };

dot.on(‘value’,function(dataSnapshot) {
var rawData = dataSnapshot.val(); // “300,”100″
var xyData = rawData.split(‘,’);
var x = xyData[0];
var y = xyData[1];
x = x – 35;
y = y – 35;
j(‘#log’).text(x+”,”+y);
var newDot = j(“

“);
newDot.css(“left”, x+”px”);
newDot.css(“top”, y+”px”);
newDot.css(“background-color”,”red”);
j(“.dot”).remove();
//j(‘#draggable’).append(newDot);
j(‘#container’).append(newDot);
});
/*
dbCount.on(‘value’)
//
*/
j(document).ready(function() {

j(document).click(function(e) {
var position = e.pageX+”,”+e.pageY;
dot.transaction(function() {
return position;
})
})
})

776,456

‘undefined’=== typeof _trfq || (window._trfq = []);’undefined’=== typeof _trfd && (window._trfd=[]),_trfd.push({‘tccl.baseHost’:’secureserver.net’}),_trfd.push({‘ap’:’cpsh’},{‘server’:’a2plcpnl0097′}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.

Project 8 Chrome Extension

Posted on May 7, 2018 by Jayson M.

Chrome Download Link

Video Explanation


//javascript

var j;


function main() {

    // setup jQuery on j to avoid any possible conflicts
    j = jQuery.noConflict();

    // outlines all existing <a> tags in red
    // running .each() on a jQuery search executes the included function
    // individually for each element it finds that matches the search
    // (e.g. in this case, it runs the function redBorder() for each 'a'
    // tag). the parameter name 'e' refers to the found element
    //
    // j('a').each(function() { redBorder(this); });
    setInterval(function() {
      var x = getRandomInt(12)+9;
      var newsize = x+"px";
      j('*').animate( {
          "font-size":newsize
      },400);
  }, 200);

  function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
  }




//css


}

body, span, p, a, div,::before, body, span, p, a, div::after{
  content: 'WATCHING';
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: scroll;
  color: black;

}
img{
  position:relative;
  top: 0;
  left: 0;
  right: 0;
}

img::before, img::after{

  animation: effect 3s infinite linear;
}
body, span, p, a, div::before{
  right: 45px;
  text-shadow: 5px 0 #00ffea;
  animation: effect 1s infinite linear;

}

body, span, p, a, div::after{
  left: 4px;
  text-shadow: -2px 0 #fe3a7f;
  animation: effect 2s infinite linear
}

*{
      position: relative;
      top: 40%;
      margin: 0 auto;
      color: black;
}

*::before, *::after{
  content: 'TRACKING';
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
overflow: hidden;
  color: black;

}

*::before{
  right: 45px;
  text-shadow: 5px 0 #00ffea;
  animation: effect 2s infinite linear;

}

*::after{
  left: 4px;
  text-shadow: -2px 0 #fe3a7f;
  animation: effect 3s infinite linear
}
@-webkit-keyframes effect {
      0% {
          clip: rect(55px,9999px,56px,0);
      }
      5% {
        clip: rect(47px,9999px,30px,0);
      }
      10% {
        clip: rect(33px,9999px,36px,0);
      }
      15% {
        clip: rect(35px,9999px,9px,0);
      }
      20% {
            clip: rect(63px,9999px,59px,0);
      }
      25% {
            clip: rect(96px,9999px,98px,0);
      }
      30% {
        clip: rect(48px,9999px,78px,0);
      }
      35% {
        clip: rect(50px,9999px,34px,0);
      }
      40% {
            clip: rect(60px,9999px,72px,0);
      }
      45% {
            clip: rect(60px,9999px,72px,0);
      }
      50% {
            clip: rect(2px,9999px,60px,0);
      }
      55% {
            clip: rect(23px,9999px,89px,0);
      }
      60% {
            clip: rect(76px,9999px,91px,0);
      }
      65% {
            clip: rect(62px,9999px,30px,0);
      }
      70% {
            clip: rect(60px,9999px,75px,0);
      }
      75% {
            clip: rect(60px,9999px,87px,0);
      }
    80% {
            clip: rect(2px,9999px,14px,0);
      }
      85% {
            clip: rect(28px,9999px,87px,0);
      }
      90% {
            clip: rect(73px,9999px,50px,0);
      }
    95% {
            clip: rect(79px,9999px,70px,0);
      }

      100% {
          clip: rect(17px,9999px,79px,0);

      }
}

Project 8

Posted on April 30, 2018 by Alyssa S.

Project 8: I’m Awake! Are You Awake?

Posted on April 30, 2018 by Kathleen D.

First Iteration of I’m Awake, Are You Awake?

My Website

Here is my projection Website:

dot dot

Code I reference or am still wrestling with:

Your iframe code

Still playing with dragging

Video Documentation:

Video Documentation

Project 8: User

Posted on April 30, 2018 by Maddie W.

Chrome Download: Link

Video: LInk


// ==UserScript==
// @name User
// @namespace http://arts445.courses.bengrosser.com/
// @version 0.1
// @description Remove names from popular sites and replace them with numbers
// @author M. K. Wall
// @match https://twitter.com/*
// @grant none
// @require http://arts445.courses.bengrosser.com/files/ready-vanilla.js
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @run-at document-start
// ==/UserScript==

(function() {
&lt;%%KEEPWHITESPACE%%&gt; 'use strict';

var j;

function main() {

j = jQuery.noConflict();

&lt;%%KEEPWHITESPACE%%&gt; j('.fullname, .u-textInheritColor').each(function() { newNumber(this); });

ready('.fullname, .u-textInheritColor', function(n) { newNumber(n); });

&lt;%%KEEPWHITESPACE%%&gt; function newNumber(n){
&lt;%%KEEPWHITESPACE%%&gt; j( '.UserBadges, .username, .ProfileAvatar-image, .avatar, .js-action-profile-avatar, .Icon--verified, .ProfileCardMini-avatarImage, .ProfileCanopy-header, .u-bgUserColor, .Avatar, .Avatar--size48, .avatar--circular, .size24, .context ' ).remove();
&lt;%%KEEPWHITESPACE%%&gt; j( '.fullname, .u-textInheritColor, .QuoteTweet-fullname, .js-user-profile-link, .tweet-context, .twitter-atreply ' ).replaceWith( 'User' );
&lt;%%KEEPWHITESPACE%%&gt; }

}

main();

String.prototype.contains = function(it) { return this.indexOf(it) != -1; };

})();

Rachel Final Project

Posted on April 30, 2018 by Rachel K.

// ** CHANGE @NAME, @NAMESPACE, and @DESCRIPTION
//
// ** If using for Tampermonkey, you can just paste this into
// ** the Tampermonkey editor
//
// ** If using for Chrome, CHANGE FIRST PART OF FILENAME
// ** (before the .user.js) and edit in a code editor like Atom
//
// ** EVERYTHING BETWEEN ==UserScript== lines is read by the browser
//    as configuration information for the userscript
//
// **
// ** USERSCRIPT CODE IS IGNORED BY CHROME, ESP. @REQUIRE
// ** BUT KEEP FOR BACKWARDS COMPATIBILITY!
// **
//
// ==UserScript==
// @name Basic Extension
// @version 1.0
// @namespace basic-extension
// @description The Happiest News of All
// @require http://arts445.courses.bengrosser.com/files/ready-vanilla.js
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @run-at document-start
//
// **WRITE MATCH STATEMENTS TO MATCH WEBSITE URLS (FOLLOW MY EXAMPLE)
//
// @match *://*.buzzfeed.com/*
// @include *://*buzzfeed.com/*
//
// ==/UserScript==// -----------------------------------------

(function() {
var j;
function main() {
    j = jQuery.noConflict();

j('h1').text("Newborn puppies who already have their degrees!");
j('h2').text("O.J Simpson? More like N.O. J Simpson!");
j('p').text("A Brief Look Into the Life of a Competitive Fly Fisher");
j("span").text('Go Outside!');
j("span.xs-ml05").text("For Real, Though");
j('a.link-gray').text("Ted Cruz opens brand new Theme Park Just Cruzin");
j("img").attr("src",'https://i.pinimg.com/736x/d7/a4/54/d7a454199acacd2d1795c312545a25eb--golden-retriever-puppies-retriever-dog.jpg');
j('li').text("Damn, I really miss Obama.");
j('ul').text("The truth behind why Buzzfeed brings you the best stories");
j('h4').text("Spicy");
j("h5").text('The Government Rocks!');
j('h2.xs-px05').text("12 struggles everyone faces when it’s TOO nice outside!");
j('ul.list-unstyled').text("Look in the Mirror and Say, Dayum!");
j("h3").text('Happy Thoughts For Today');
j('a.top-link.xs-pr2').text('quiz');
j('img.buzzblock-package-visual__main-story-image').attr('src', 'https://i.imgflip.com/f4voo.jpg');
j('video.video-player').attr('src','https://www.youtube.com/watch?v=dQw4w9WgXcQ');
j('a.xs-block.link-gray').text('Kim Jong Un finally makes his first friend');
j('span.xs-col-12').text('The real reason that ‘Joey from Alpha Sigs’ won’t call you back');
j('img.xs-relative').attr('src','https://amp.businessinsider.com/images/54b445de69bedd3d4332504c-750-562.jpg');
j('h4.bold').text("yall gotta read this");
j('p.js-card__description.xs-hide').text("read this article and you'll have the best day!");
j('img.wire-frame__avatar.card__avatar.xs-mr1.circle.fill-gray-darker').attr('src', 'http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-11/256/ok-hand.png');
j('h2.wire-frame__title.bold.xs-text-3.sm-text-2.xs-pr2').text('Obama’s 10 favorite friends episodes!');
j('div.js-sidebar-content.card.sidebar-card.xs-relative.xs-border-top-none.xs-p2.clearfix').css("backgroundColor", "#98ff98");
j('div.xs-px05.sm-pl05').css("backgroundColor", "#9370DB");
j('h1.link-gray.xs-text-2.bold.xs-mb05').text("Mark Zuckerberg Doesn't Exist");
j('p.text-gray-lightest.xs-text-5').text("The news we've all been waiting for! ");
j('div').css("font-family", "courier");
j('div').css("backgroundColor", "yellow");
j ('h1').css("backgroundColor", "blue");
j ('h2').css("backgroundColor", "pink");
j ('h3').css("backgroundColor", "green");

main();
String.prototype.contains = function(it) { return this.indexOf(it) != -1; };
})()

Project 8 Presentation

Posted on April 30, 2018 by Jordan M.

Few screenshots of my friends chat for example

ZIP file—- TrueChat

Project 8: 3 Names, 1 User (An Internet Adventure)

Posted on April 30, 2018 by Eva M.

Video: https://www.youtube.com/watch?v=2t7i-TAyaC4

Presentation: https://docs.google.com/presentation/d/15cpFRIzGsV7wwYDXe-vEjsqyTXLCNVhnbag3V9ZO7-4/edit?usp=sharing

Optional Evaluation Questions

Posted on April 30, 2018 by Ben

What is one thing you would most like to change to improve this class? This could be something about the content, structure, instruction, environment, or anything else.
Now that you’re near the end, what advice would you give to a student who is considering taking this course in the future?

8: meBot

Posted on April 30, 2018 by Niky

For the final project, I created a twitter bot. Now, this isn’t just any twitter bot — it’s me! You can follow my meBot on twitter at @iamlittleprick

I have too much going on to spend a bunch of time on social media, and often it’s just downright exhausting. However, I realize that being active on social media is important in how we network these days.

meBot is programmed to tweet like I would tweet, reply like I’d reply, and more! Check out the news segment featuring meBot:

If you’re curious as to how meBot is performing as far as not being noticeably a bot, here’s meBot’s current stats against other (real) people:

If you’re interested in checking out my meBot code, and other tidbits, see my next post.

Project 8 code

Posted on April 30, 2018 by Alyssa S.

 
// ** CHANGE @NAME, @NAMESPACE, and @DESCRIPTION
//
// ** If using for Tampermonkey, you can just paste this into 
// ** the Tampermonkey editor
//
// ** If using for Chrome, CHANGE FIRST PART OF FILENAME
// ** (before the .user.js) and edit in a code editor like Atom
//
// ** EVERYTHING BETWEEN ==UserScript== lines is read by the browser
//    as configuration information for the userscript
//
// **
// ** USERSCRIPT CODE IS IGNORED BY CHROME, ESP. @REQUIRE
// ** BUT KEEP FOR BACKWARDS COMPATIBILITY!
// **
//
// ==UserScript==
// @name Basic Extension
// @version 1.0
// @namespace basic-extension
// @description The Zuck is always watching
// @require http://arts445.courses.bengrosser.com/files/ready-vanilla.js
// @require http://code.jquery.com/jquery-3.3.1.min.js
// @run-at document-start
//
// **WRITE MATCH STATEMENTS TO MATCH WEBSITE URLS (FOLLOW MY EXAMPLE)
//
// @match *://*.facebook.com/*
// @include *://*facebook.com/*
//
// ==/UserScript==// -----------------------------------------

(function() {

// jQuery on 'j' to avoid conflicts with page jQuery
var j;

// PUT YOUR CODE within main() below
function main() {

    // setup jQuery on j to avoid any possible conflicts
    j = jQuery.noConflict();
 	ready('span._nbt', function(e) { Story(e); });
  	ready('a.UFICommentActorName', function(e) { Comment(e); });
	ready('a.profileLink', function(e) { Profile(e); });
    ready('div.a_y49u-4y9m', function(e) { zuck(e); });
    ready('div._3653', function(e) { zuckk(e); });
    ready('img._46-i.img', function(e) { big(e); });
    ready('img.scaledImageFitWidth.img', function(e) { lil(e); });
	ready('div.fsl.fwb.fcb', function(e) {friend(e);});
	
	function friend(e) {
		j(e).prepend('Senator ');
	}
	function Story(e) {
		j(e).prepend('Senator ');
	}
	function Comment(e) {
		j(e).prepend('Senator ');
	}
	function Profile(e) {
		j(e).prepend('Senator ');
	}
	
    function zuck(e) {
        j(e).text('Mark Zuckerberg is always watching.');
    }
     function zuckk(e) {
        j(e).text('YOUR DATA IS NOT SAFE');
    }
     function big(e) {
        j(e).attr('src', "https://i0.wp.com/news.harvard.edu/wp-content/uploads/2017/03/mark-zuckerberg-headshot-11.jpg?resize=605%2C403&ssl=1");
    } 
    function lil(e) {
        j(e).attr('src', "https://i0.wp.com/news.harvard.edu/wp-content/uploads/2017/03/mark-zuckerberg-headshot-11.jpg?resize=605%2C403&ssl=1");
    }
}



// run the main function
main();


// cleaner syntax than match()
String.prototype.contains = function(it) { return this.indexOf(it) != -1; };


// close the opening invoked function
})();

Project 8 video

Posted on April 30, 2018 by Alyssa S.

Project 8 (mitch)

Posted on April 30, 2018 by Mitchell O.

video: vimeo.com/267273841

live page: mitchelloliver.com/drift

zipped code: DRIFT9.html

sound generators and effects are based off of examples in the Tone.JS API
draggable thingies are based off of examples in the Interact.JS documentation
Transit JS is also used very basically
also uses JSON IP

Project 8 Video

Link

https://vimeo.com/267194231

Project 8 Code

Posted on April 30, 2018 by Nick C.

<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <style>
    body {
        font-size:180%;
        font-family:"Open Sans";
        width:1000px;
        height:1000px;
    }
  .background img{
    position:absolute;
    width:1000px;
    height:1000px;
  }
  #container {
    width:1000px;
    height:1000px;

  }
  .snowball img{
  width:100px;
  height:100px;
  position:absolute;
  left:400px;
  top:400px;
  transform: rotate(90deg);
}
  </style>

  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<script>

  var j = jQuery.noConflict();

  var config = {
    apiKey: "AIzaSyA4V-hTAdF4HxJnwDZ_I_o_hVHFYnK8hA4",
    authDomain: "fir-7691f.firebaseapp.com",
    databaseURL: "https://fir-7691f.firebaseio.com",
    projectId: "fir-7691f",
    storageBucket: "",
    messagingSenderId: "426083234669"
  };

  firebase.initializeApp(config);

  var db = firebase.database();
  var mydir = db.ref("dir");
  var imgsize = db.ref("size");
  var dbCount = db.ref('count');
  var height = db.ref("height");
  var width = db.ref("width");
  var rotation = db.ref("rotation");

  height.transaction(function(current) {
    if(current < 100){
    return current = 100;
}
 });
 var myVar = setInterval(function(){ setColor2() }, 5000);

 function setColor2() {
   width.transaction(function(current) {
     if(current < 110){
       return current = 100
     }
     if(current > 300){
       return current -40;
     }
     if(current > 500){
       return current -80;
     }
     if(current > 700){
       return current -150;
     }
     if(current > 900){
       return current -250;
     }
     if(current > 1100){
       return current -450;
     }
     return current -10;

   });
}

  var myVar = setInterval(function(){ setColor() }, 5000);

  function setColor() {
    height.transaction(function(current) {
      if(current < 110){
        return current = 100
      }
      if(current > 300){
        return current -40;
      }
      if(current > 500){
        return current -80;
      }
      if(current > 700){
        return current -150;
      }
      if(current > 900){
        return current -250;
      }
      if(current > 1100){
        return current -450;
      }
      return current -10;

    });
}

  height.on('value',function(dataSnapshot) {
    var newHeight = dataSnapshot.val();
    j('.snowball img').css("height", parseInt(newHeight)+"px");
  });

  width.on('value',function(dataSnapshot) {
    var newWidth = dataSnapshot.val();
    j('.snowball img').css("width", parseInt(newWidth)+"px");
  });
  rotation.on('value',function(dataSnapshot) {
    var newRotation = dataSnapshot.val();
    j('.snowball img').css("transform", parseInt(newRotation)+"deg");
  });


  j(document).ready(function() {

    j(document).keyup(function(e) {

      if(e.keyCode == 39) {
        height.transaction(function(current) {
          return current + 1;
        });
      }
      // if(e.keyCode == 39) {
       // myFunction();
        // }
      if(e.keyCode == 39) {
        width.transaction(function(current) {
          return current + 1;
        });
      }

     width.transaction(function(current) {
       if(current < 100){
       return current = 100;
       }
    });

});


    // function myTimer(){
    //   var d = new Date();
    //   var t = d.toLocaleTimeString();
    //   document.getElementById("demo").innerHTML = t;
    // }

  });




 // });
// });
  //  }
  //        }
</script>

  <div id="container">
    <div class="snowball">
    <img src="https://vignette.wikia.nocookie.net/object-ultraverse/images/0/04/Snowball.png/revision/latest?cb=20170303202629" alt = "snowball" height="200px" width="200px">
    </div>
    <div id =  "background">
      <img src="https://i.imgur.com/7xkeu5z.png" alt = "background" height="1000px" width="1000px">
    </div>
    <div id = "picture"></div>
    <div id = "timer"></div>


  </div>

</body>
</html>

Project 8

Posted on April 30, 2018 by Stephanie G.

Link to video | Link to data

Project 8

Posted on April 29, 2018 by Jess G.

My final project is called Thoughtful Shopping. Here is the logo I’ve created for the extension store.

This is the extension .

This is the video.

The code is on my previous post

Project 8 Code

Posted on April 29, 2018 by Jess G.

 

<%%KEEPWHITESPACE%%>    ready('button.css-1a34p0v', function(e) {
<%%KEEPWHITESPACE%%>      j(e).html("ADD TO BASKET&lt;br/&gt;do you need really need this item?");
<%%KEEPWHITESPACE%%>    });

<%%KEEPWHITESPACE%%>    ready('button.css-18f6p7u', function(e) {
<%%KEEPWHITESPACE%%>      j(e).html("CHECKOUT &lt;br/&gt; should you be spending money on this?");
<%%KEEPWHITESPACE%%>    });

<%%KEEPWHITESPACE%%>    ready('button.css-xtpcv7', function(e) {
<%%KEEPWHITESPACE%%>      j(e).html("CHECKOUT &lt;br/&gt; should you be spending money on this?");
<%%KEEPWHITESPACE%%>    });

Final Project Code

Posted on April 29, 2018 by Connie S.

https://developers.google.com/maps/documentation/javascript/firebase

https://developers.google.com/maps/documentation/javascript/mysql-to-maps

 &lt;!DOCTYPE html&gt;
&lt;html&gt;
<%%KEEPWHITESPACE%%>  &lt;head&gt;
<%%KEEPWHITESPACE%%>    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
<%%KEEPWHITESPACE%%>    &lt;meta charset="utf-8"&gt;
<%%KEEPWHITESPACE%%>    &lt;title&gt;Map Puzzle&lt;/title&gt;
<%%KEEPWHITESPACE%%>    &lt;style&gt;

<%%KEEPWHITESPACE%%>      #map {
<%%KEEPWHITESPACE%%>        height: 100%;
<%%KEEPWHITESPACE%%>      }

<%%KEEPWHITESPACE%%>      html, body {
<%%KEEPWHITESPACE%%>        height: 100%;
<%%KEEPWHITESPACE%%>        margin: 0;
<%%KEEPWHITESPACE%%>        padding: 0;
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    &lt;/style&gt;
<%%KEEPWHITESPACE%%>  &lt;/head&gt;
<%%KEEPWHITESPACE%%>  &lt;body&gt;
<%%KEEPWHITESPACE%%>    &lt;div id="map"&gt;&lt;/div&gt;
<%%KEEPWHITESPACE%%>    &lt;script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"&gt;&lt;/script&gt;
&lt;script&gt;
<%%KEEPWHITESPACE%%>  // Initialize Firebase
<%%KEEPWHITESPACE%%>  var config = {
<%%KEEPWHITESPACE%%>    apiKey: "AIzaSyCdUZeJTXzbqEXfVzskUFOoY-Mqh9TnyvU",
<%%KEEPWHITESPACE%%>    authDomain: "click-function-test.firebaseapp.com",
<%%KEEPWHITESPACE%%>    databaseURL: "https://click-function-test.firebaseio.com",
<%%KEEPWHITESPACE%%>    projectId: "click-function-test",
<%%KEEPWHITESPACE%%>    storageBucket: "click-function-test.appspot.com",
<%%KEEPWHITESPACE%%>    messagingSenderId: "257165968755"
<%%KEEPWHITESPACE%%>  };
<%%KEEPWHITESPACE%%>  firebase.initializeApp(config);
&lt;/script&gt;
<%%KEEPWHITESPACE%%>    &lt;script&gt;

function PuzzleDemo() {

<%%KEEPWHITESPACE%%>  this.polys_ = [];

<%%KEEPWHITESPACE%%>  this.difficulty_ = 'easy';

<%%KEEPWHITESPACE%%>  this.count_ = 0;

<%%KEEPWHITESPACE%%>  this.pieceDiv_ = null;

<%%KEEPWHITESPACE%%>  this.timeDiv_ = null;
}

PuzzleDemo.NUM_PIECES_ = 10;

PuzzleDemo.START_COLOR_ = '#3c79de';

PuzzleDemo.END_COLOR_ = '#037e29';

PuzzleDemo.prototype.init = function(map) {
<%%KEEPWHITESPACE%%>  this.map_ = map;
<%%KEEPWHITESPACE%%>  this.createMenu_(map);
<%%KEEPWHITESPACE%%>  this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%> this.loadData_();
};

PuzzleDemo.prototype.createMenu_ = function(map) {
<%%KEEPWHITESPACE%%>  var menuDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  menuDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'margin: 40px 10px; border-radius: 8px; height: 320px; width: 180px;' +
<%%KEEPWHITESPACE%%>      'background-color: white; font-size: 14px; font-family: Roboto;' +
<%%KEEPWHITESPACE%%>      'text-align: center; color: grey;line-height: 32px; overflow: hidden';
<%%KEEPWHITESPACE%%>  var titleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  titleDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'width: 100%; background-color: #4285f4; color: white; font-size: 20px;' +
<%%KEEPWHITESPACE%%>      'line-height: 40px;margin-bottom: 24px';
<%%KEEPWHITESPACE%%>  titleDiv.innerText = 'Game Options';
<%%KEEPWHITESPACE%%>  var pieceTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  pieceTitleDiv.innerText = 'PIECE:';
<%%KEEPWHITESPACE%%>  pieceTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var pieceDiv = this.pieceDiv_ = document.createElement('div');
<%%KEEPWHITESPACE%%>  pieceDiv.innerText = '0 / ' + PuzzleDemo.NUM_PIECES_;
<%%KEEPWHITESPACE%%>  var timeTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  timeTitleDiv.innerText = 'TIME:';
<%%KEEPWHITESPACE%%>  timeTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var timeDiv = this.timeDiv_ = document.createElement('div');
<%%KEEPWHITESPACE%%>  timeDiv.innerText = '0.0 seconds';
<%%KEEPWHITESPACE%%>  var difficultyTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  difficultyTitleDiv.innerText = 'DIFFICULTY:';
<%%KEEPWHITESPACE%%>  difficultyTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var difficultySelect = document.createElement('select');
<%%KEEPWHITESPACE%%>  ['Easy', 'Moderate', 'Hard', 'Extreme'].forEach(function(level) {
<%%KEEPWHITESPACE%%>    var option = document.createElement('option');
<%%KEEPWHITESPACE%%>    option.value = level.toLowerCase();
<%%KEEPWHITESPACE%%>    option.innerText = level;
<%%KEEPWHITESPACE%%>    difficultySelect.appendChild(option);
<%%KEEPWHITESPACE%%>  });
<%%KEEPWHITESPACE%%>  difficultySelect.style.cssText =
<%%KEEPWHITESPACE%%>      'border: 2px solid lightgrey; background-color: white; color: #4275f4;' +
<%%KEEPWHITESPACE%%>      'padding: 6px;';
<%%KEEPWHITESPACE%%>  difficultySelect.onchange = function() {
<%%KEEPWHITESPACE%%>    this.setDifficulty_(difficultySelect.value);
<%%KEEPWHITESPACE%%>    this.resetGame_();
<%%KEEPWHITESPACE%%>  }.bind(this);
<%%KEEPWHITESPACE%%>  var resetDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  resetDiv.innerText = 'Reset';
<%%KEEPWHITESPACE%%>  resetDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'cursor: pointer; border-top: 1px solid lightgrey; margin-top: 18px;' +
<%%KEEPWHITESPACE%%>      'color: #4275f4; line-height: 40px; font-weight: 800';
<%%KEEPWHITESPACE%%>  resetDiv.onclick = this.resetGame_.bind(this);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(titleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(pieceTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(pieceDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(timeTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(timeDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(difficultyTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(difficultySelect);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(resetDiv);
<%%KEEPWHITESPACE%%>  map.controls[google.maps.ControlPosition.TOP_LEFT].push(menuDiv);
};

PuzzleDemo.prototype.render = function(map) {

<%%KEEPWHITESPACE%%>  if (!this.dataLoaded_) {
<%%KEEPWHITESPACE%%>    return;
<%%KEEPWHITESPACE%%>  }
<%%KEEPWHITESPACE%%>  this.start_();
};

PuzzleDemo.prototype.loadData_ = function() {
<%%KEEPWHITESPACE%%>  var xmlhttpRequest = new XMLHttpRequest;
<%%KEEPWHITESPACE%%>  xmlhttpRequest.onreadystatechange = function() {
<%%KEEPWHITESPACE%%>    if (xmlhttpRequest.status != 200 ||
<%%KEEPWHITESPACE%%>        xmlhttpRequest.readyState != XMLHttpRequest.DONE) return;
<%%KEEPWHITESPACE%%>    this.loadDataComplete_(JSON.parse(xmlhttpRequest.responseText));
<%%KEEPWHITESPACE%%>  }.bind(this);
<%%KEEPWHITESPACE%%>  xmlhttpRequest.open(
<%%KEEPWHITESPACE%%>      'GET', 'https://storage.googleapis.com/mapsdevsite/json/puzzle.json',
<%%KEEPWHITESPACE%%>      true);
<%%KEEPWHITESPACE%%>  xmlhttpRequest.send(null);
};

PuzzleDemo.prototype.loadDataComplete_ = function(data) {
<%%KEEPWHITESPACE%%>  this.dataLoaded_ = true;
<%%KEEPWHITESPACE%%>  this.countries_ = data;
<%%KEEPWHITESPACE%%>  this.start_();
};

PuzzleDemo.prototype.setDifficulty_ = function(difficulty) {
<%%KEEPWHITESPACE%%>  this.difficulty_ = difficulty;

<%%KEEPWHITESPACE%%>  if (this.map_) {
<%%KEEPWHITESPACE%%>    this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.setDifficultyStyle_ = function() {
<%%KEEPWHITESPACE%%>  var styles = {
<%%KEEPWHITESPACE%%>    'easy': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'labels',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'geometry',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' },
<%%KEEPWHITESPACE%%>         { weight: 1.3 }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'moderate': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'labels',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'hard': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'extreme': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        elementType: 'geometry',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ]
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  this.map_.set('styles', styles[this.difficulty_]);
};

PuzzleDemo.prototype.resetGame_ = function() {
<%%KEEPWHITESPACE%%>  this.removeCountries_();
<%%KEEPWHITESPACE%%>  this.count_ = 0;
<%%KEEPWHITESPACE%%>  this.setCount_();
<%%KEEPWHITESPACE%%>  this.startClock_();

<%%KEEPWHITESPACE%%>  this.addRandomCountries_();
};

PuzzleDemo.prototype.setCount_ = function() {
<%%KEEPWHITESPACE%%>  this.pieceDiv_.innerText = this.count_ + ' / ' + PuzzleDemo.NUM_PIECES_;

<%%KEEPWHITESPACE%%>  if (this.count_ == PuzzleDemo.NUM_PIECES_) {
<%%KEEPWHITESPACE%%>    this.stopClock_();
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.stopClock_ = function() {
<%%KEEPWHITESPACE%%>  window.clearInterval(this.timer_);
};

PuzzleDemo.prototype.startClock_ = function() {
<%%KEEPWHITESPACE%%>  this.stopClock_();

<%%KEEPWHITESPACE%%>  var timeDiv = this.timeDiv_;
<%%KEEPWHITESPACE%%>  if (timeDiv) timeDiv.textContent = '0.0 seconds';
<%%KEEPWHITESPACE%%>  var t = new Date;

<%%KEEPWHITESPACE%%>  this.timer_ = window.setInterval(function() {
<%%KEEPWHITESPACE%%>    var diff = new Date - t;
<%%KEEPWHITESPACE%%>    if (timeDiv) timeDiv.textContent = (diff / 1000).toFixed(2) + ' seconds';
<%%KEEPWHITESPACE%%>  }, 100);
};

PuzzleDemo.prototype.addRandomCountries_ = function() {
<%%KEEPWHITESPACE%%>  // Shuffle countries
<%%KEEPWHITESPACE%%>  this.countries_.sort(function() {
<%%KEEPWHITESPACE%%>    return Math.round(Math.random()) - 0.5;
<%%KEEPWHITESPACE%%>  });

<%%KEEPWHITESPACE%%>  var countries = this.countries_.slice(0, PuzzleDemo.NUM_PIECES_);
<%%KEEPWHITESPACE%%>  for (var i = 0, country; country = countries[i]; i++) {
<%%KEEPWHITESPACE%%>    this.addCountry_(country);
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.addCountry_ = function(country) {
<%%KEEPWHITESPACE%%>  var options = {
<%%KEEPWHITESPACE%%>    strokeColor: PuzzleDemo.START_COLOR_,
<%%KEEPWHITESPACE%%>    strokeOpacity: 0.8,
<%%KEEPWHITESPACE%%>    strokeWeight: 2,
<%%KEEPWHITESPACE%%>    fillColor: PuzzleDemo.START_COLOR_,
<%%KEEPWHITESPACE%%>    fillOpacity: 0.35,
<%%KEEPWHITESPACE%%>    geodesic: true,
<%%KEEPWHITESPACE%%>    map: this.map_,
<%%KEEPWHITESPACE%%>    draggable: true,
<%%KEEPWHITESPACE%%>    zIndex: 2,
<%%KEEPWHITESPACE%%>    paths: country.start.map(google.maps.geometry.encoding.decodePath),
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  var poly = new google.maps.Polygon(options);
<%%KEEPWHITESPACE%%>  google.maps.event.addListener(poly, 'dragend', function() {
<%%KEEPWHITESPACE%%>    this.checkPosition_(poly, country);
<%%KEEPWHITESPACE%%>  }.bind(this));

<%%KEEPWHITESPACE%%>  this.polys_.push(poly);
};

PuzzleDemo.prototype.boundsContainsPoly_ = function(bounds, poly) {
<%%KEEPWHITESPACE%%>  var b = new google.maps.LatLngBounds(
<%%KEEPWHITESPACE%%>      new google.maps.LatLng(bounds[0][0], bounds[0][1]),
<%%KEEPWHITESPACE%%>      new google.maps.LatLng(bounds[1][0], bounds[1][1]));
<%%KEEPWHITESPACE%%>  var paths = poly.getPaths().getArray();
<%%KEEPWHITESPACE%%>  for (var i = 0; i &lt; paths.length; i++) {
<%%KEEPWHITESPACE%%>    var p = paths[i].getArray();
<%%KEEPWHITESPACE%%>    for (var j = 0; j &lt; p.length; j++) {
<%%KEEPWHITESPACE%%>      if (!b.contains(p[j])) {
<%%KEEPWHITESPACE%%>        return false;
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    }
<%%KEEPWHITESPACE%%>  }
<%%KEEPWHITESPACE%%>  return true;
};

PuzzleDemo.prototype.replacePiece_ = function(poly, country) {
<%%KEEPWHITESPACE%%>  var options = {
<%%KEEPWHITESPACE%%>    strokeColor: PuzzleDemo.END_COLOR_,
<%%KEEPWHITESPACE%%>    fillColor: PuzzleDemo.END_COLOR_,
<%%KEEPWHITESPACE%%>    draggable: false,
<%%KEEPWHITESPACE%%>    zIndex: 1,
<%%KEEPWHITESPACE%%>    paths: country.end.map(google.maps.geometry.encoding.decodePath),
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  poly.setOptions(options);
<%%KEEPWHITESPACE%%>  this.count_++;
<%%KEEPWHITESPACE%%>  this.setCount_();
};

PuzzleDemo.prototype.checkPosition_ = function(poly, country) {
<%%KEEPWHITESPACE%%>  if (this.boundsContainsPoly_(country.bounds, poly)) {
<%%KEEPWHITESPACE%%>    this.replacePiece_(poly, country);
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.start_ = function() {
<%%KEEPWHITESPACE%%>  this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%>  this.resetGame_();
};

PuzzleDemo.prototype.removeCountries_ = function() {
<%%KEEPWHITESPACE%%>  for (var i = 0, poly; poly = this.polys_[i]; i++) {
<%%KEEPWHITESPACE%%>    poly.setMap(null);
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  this.polys_ = [];
};

function initMap() {
<%%KEEPWHITESPACE%%>  var map = new google.maps.Map(document.getElementById('map'), {
<%%KEEPWHITESPACE%%>    disableDefaultUI: true,
<%%KEEPWHITESPACE%%>    center: {lat: 10, lng: 60},
<%%KEEPWHITESPACE%%>    zoom: 2
<%%KEEPWHITESPACE%%>  });

<%%KEEPWHITESPACE%%>  (new PuzzleDemo).init(map);
}
<%%KEEPWHITESPACE%%>    &lt;/script&gt;
<%%KEEPWHITESPACE%%>    &lt;script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyB6O25GLEFd5l6wYeEgmLzMWZS7bs-IyU8&amp;libraries=geometry&amp;callback=initMap"
<%%KEEPWHITESPACE%%>        async defer&gt;&lt;/script&gt;
<%%KEEPWHITESPACE%%>  &lt;/body&gt;
&lt;/html&gt;