Final Project Code | ARTS 445: Net Art

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;