Skip to content
Browse files

Added initial repo.

  • Loading branch information...
0 parents commit ded792bfa6415666a46be3dd0a949e5c4877dfd0 @mmarcon committed Sep 28, 2012
Showing with 4,030 additions and 0 deletions.
  1. +16 −0 README.md
  2. +64 −0 css/normalize.css
  3. +58 −0 css/style.css
  4. +3,712 −0 data/cities.json
  5. BIN doc/right.png
  6. BIN doc/wrong.png
  7. BIN img/me.png
  8. +44 −0 index.html
  9. +136 −0 js/main.js
16 README.md
@@ -0,0 +1,16 @@
+# Find your Tile
+**Find your Tile** shows how the cool features offered by HTML5 and related standard can be leveraged to develop simple gaming experiences for the users.
+
+## The game
+In **Find your Tile** 3 map tiles (satellite view) are shown to the user. One of them is centered on the user's current location. The others are randomly generated from a list of more than 600 cities in the world.
+
+The player has to pick the tile she thinks corresponds to her location. If the answer is wrong then the game provides a link to the Wikipedia page corresponding to the city that was mistakenly selected.
+
+![image](https://raw.github.com/mmarcon/findtile/master/doc/wrong.png)
+
+## Geeky info
+The little game uses the location API (which is **not part of the HTML5 standard**) to determine the user's geolocation.
+
+When the location has been determined a map tile is retrieved and inserted as image into the DOM by using the [RESTful Maps API](http://api.maps.nokia.com/en/restmaps/api.html) provided by [Nokia Maps](http://maps.nokia.com). The other 2 tiles are generated by picking 2 cities from a static list in JSON format.
+
+The tiles are animated using only CSS3, and no jQuery has been used for this demo.
64 css/normalize.css
@@ -0,0 +1,64 @@
+/*------------------------------------*\
+ RESET
+\*------------------------------------*/
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0b1 | 201101
+ NOTE:WORK IN PROGRESS
+ USE WITH CAUTION AND TEST WITH ABANDON */
+
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+a,abbr,acronym,address,big,cite,code,
+del,dfn,em,img,ins,kbd,q,s,samp,
+small,strike,strong,sub,sup,tt,var,
+b,u,i,center,
+dl,dt,dd,ol,ul,li,
+fieldset,form,label,legend,
+table,caption,tbody,tfoot,thead,tr,th,td,
+article,aside,canvas,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section,summary,
+time,mark,audio,video{
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ font:inherit;
+ vertical-align:baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section{
+ display:block;
+}
+body{
+ line-height:1;
+}
+ol,ul{
+ list-style:none;
+}
+blockquote,q{
+ quotes:none;
+}
+blockquote:before,blockquote:after,
+q:before,q:after{
+ content:'';
+ content:none;
+}
+/* remember to define visible focus styles!
+:focus{
+ outline:?????;
+} */
+
+/* remember to highlight inserts somehow! */
+ins{
+ text-decoration:none;
+}
+del{
+ text-decoration:line-through;
+}
+
+table{
+ border-collapse:collapse;
+ border-spacing:0;
+}
58 css/style.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2012 Massimiliano Marcon (http://marcon.me)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import url(http://fonts.googleapis.com/css?family=Londrina+Outline|McLaren);
+
+body {
+ font-family: 'McLaren', cursive;
+ font-weight: 100;
+ font-size: 14px;
+ background-color: #fff;
+}
+
+h2 {
+ position: fixed;
+ right: 10px;
+ bottom: 0;
+ background-color: #222;
+ color: white;
+ line-height: 1.5;
+ padding: 5px;
+ font-size: 12px;
+}
+
+a:link,
+a:visited,
+a:active {
+ text-decoration: none;
+ color: #4169e1;
+}
+
+a:hover {
+ color: #6495ED;
+}
+
+#map {
+ width: 400px;
+ height: 400px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -205px 0 0 -205px;
+ border: 10px solid #fff;
+ box-shadow: 0 0 8px #ccc;
+ border-radius: 4px;
+}
3,712 data/cities.json
3,712 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
BIN doc/right.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN doc/wrong.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN img/me.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 index.html
@@ -0,0 +1,44 @@
+<!--
+ Copyright 2012 Massimiliano Marcon (http://marcon.me)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Find your Tile</title>
+ <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+ <link rel="stylesheet" type="text/css" href="css/style.css" />
+</head>
+
+<body>
+ <header>
+ <h1>Where is Everybody</h1>
+ <h2>Powered by <a href="http://api.maps.nokia.com" title="Nokia Maps API">Nokia Maps</a></h2>
+ </header>
+
+
+ <ul>
+ <li><a href="#" class="density">In what area your neighbors hang out the most</a></li>
+ <li><a href="#" class="value">In what place your neighbors hang out the most</a></li>
+ </ul>
+ <section id="map">
+
+ </section>
+
+<script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
+<script type="text/javascript" src="js/main.js"></script>
+</body>
+</html>
136 js/main.js
@@ -0,0 +1,136 @@
+/*
+ * Copyright 2012 Massimiliano Marcon (http://marcon.me)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function(doc){
+ 'use strict';
+
+ var init, locationFound, locationNotFound, cities, attachEventHandlers, dataReady,
+ API = {
+ id: 'C2Cse_31xwvbccaAIAaP',
+ token: 'fjFdGyRjstwqr9iJxLwQ-g'
+ },
+ FSQ = {
+ baseUrl: 'https://api.foursquare.com/v2/venues/search?radius=1500&ll={LAT},{LON}&limit=50&client_id=ORIQ5J0OX5QKKIWXFGEEADVVKI0DUKHW10QV2LCKC4KYC3SU&client_secret=4VSNLFBMRRED1ISQF5FNC4RBDSXAJJL11ZMJZP4XUMTRS51G&v=20120927&callback=fsqdata'
+ },
+ map, mapEl = doc.querySelector('#map'), density, value;
+
+
+ init = function(){
+ //app lives here
+ attachEventHandlers();
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
+ }
+ else {
+ locationNotFound();
+ }
+ };
+
+ locationFound = function(position){
+ var lat = position.coords.latitude,
+ lon = position.coords.longitude,
+ jsonp;
+
+ nokia.maps.util.ApplicationContext.set({"appId": API.id, "authenticationToken": API.token});
+ map = new nokia.maps.map.Display(mapEl,
+ {center: [lat, lon],
+ zoomLevel: 16,
+ components:[
+ new nokia.maps.map.component.ZoomBar()
+ ]});
+ map.set("baseMapType", nokia.maps.map.Display.SMARTMAP);
+
+ jsonp = doc.createElement('script');
+ doc.querySelector('head').appendChild(jsonp);
+ jsonp.src = FSQ.baseUrl.replace('{LAT}', lat).replace('{LON}', lon);
+
+ var me = new nokia.maps.map.Marker([lat, lon], {
+ icon: "../img/me.png",
+ anchor: new nokia.maps.util.Point(12, 24)
+ });
+ map.objects.add(me);
+ };
+
+ locationNotFound = function(){
+
+ };
+
+ dataReady = function(data) {
+ var normalizedData = data.map(function(place){
+ return {value: place.stats.checkinsCount,
+ latitude: place.location.lat,
+ longitude: place.location.lng,
+ name: place.name};
+ });
+
+ console.log(data);
+
+ value = new nokia.maps.heatmap.Overlay({
+ // This is the greatest zoom level for which the overlay will provide tiles
+ max: 20,
+ // This is the overall opacity applied to this overlay
+ opacity: 0.45,
+ // Defines if our heatmap is value or density based
+ type: "value",
+ // Coarseness defines the resolution with which the heat map is created.
+ coarseness: 2
+ });
+ value.addData(normalizedData);
+
+ density = new nokia.maps.heatmap.Overlay({
+ // This is the greatest zoom level for which the overlay will provide tiles
+ max: 20,
+ // This is the overall opacity applied to this overlay
+ opacity: 0.8,
+ // Defines if our heatmap is value or density based
+ type: "density",
+ // Coarseness defines the resolution with which the heat map is created.
+ coarseness: 2
+ });
+ density.addData(normalizedData);
+ };
+
+ attachEventHandlers = function(){
+ window.fsqdata = function(data){
+ if(data.meta.code === 200) {
+ dataReady(data.response.venues);
+ }
+ else {
+ alert('uhmm... something wrong with Foursquare API')
+ }
+ };
+ doc.querySelector('ul').addEventListener('click', function(e){
+ e.preventDefault();
+ if(e.target.tagName.match(/a/i)) {
+ if(e.target.classList+'' === 'value') {
+ map.overlays.remove(density);
+ map.overlays.add(value);
+ } else {
+ map.overlays.remove(value);
+ map.overlays.add(density);
+ }
+ }
+ }, true);
+ };
+
+ if(doc.addEventListener) {
+ doc.addEventListener('DOMContentLoaded', init, false);
+ }
+ else {
+ window.onload = init;
+ }
+})(document);
+

0 comments on commit ded792b

Please sign in to comment.
Something went wrong with that request. Please try again.