├── arch.png
├── example_game.gif
├── frontend
    ├── firebase.json
    ├── firebase-rules.json
    └── public
    │   ├── third_party
    │       ├── jquery.voice.min.js
    │       ├── recorderWorker.js
    │       └── recorder.js
    │   ├── config.js
    │   ├── dpad.js
    │   ├── index.html
    │   ├── dpad.html
    │   └── script.js
├── backend
    ├── game-controller
    │   ├── package.json
    │   ├── config.js
    │   └── game-controller.js
    └── bigquery
    │   └── table-schema.json
├── CONTRIBUTING.md
├── README.md
└── LICENSE


/arch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlesamples/Firebase-Plays-GCP-2016/HEAD/arch.png


--------------------------------------------------------------------------------
/example_game.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlesamples/Firebase-Plays-GCP-2016/HEAD/example_game.gif


--------------------------------------------------------------------------------
/frontend/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 |   "public": "public",
3 |   "rules": "firebase-rules.json",
4 |   "ignore": [
5 |     "firebase.json",
6 |     "**/.*",
7 |     "**/node_modules/**"
8 |   ]
9 | }


--------------------------------------------------------------------------------
/frontend/firebase-rules.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "chat": {
 4 |       ".read": true,
 5 |       ".write": "auth != null"
 6 |     },
 7 |     "commands-archive": {
 8 |       ".read": false,
 9 |       ".write": "auth != null"
10 |     },
11 |     "commands": {
12 |       ".read": "auth != null",
13 |       ".write": true
14 |     }
15 |   }
16 | }


--------------------------------------------------------------------------------
/backend/game-controller/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "game-control",
 3 |   "version": "1.0.0",
 4 |   "description": "Game controller to relay keystrokes",
 5 |   "main": "game-controller.js",
 6 |   "private": "true",
 7 |   "dependencies": {
 8 |     "@google-cloud/bigquery": "^0.11.1",
 9 |     "chance": "^1.0.3",
10 |     "firebase-admin": "^5.5.1",
11 |     "prompt": "^1.0.0",
12 |     "robotjs": "^0.4.7",
13 |     "sleep": "^3.0.1"
14 |   },
15 |   "keywords": [
16 |     "game",
17 |     "controller",
18 |     "keystrokes"
19 |   ],
20 |   "author": "Google Inc.",
21 |   "contributors": [
22 |     {
23 |       "name": "Bret McGowen",
24 |       "url": "https://twitter.com/bretmcg"
25 |     }
26 |   ],
27 |   "license": "Apache-2.0"
28 | }
29 | 


--------------------------------------------------------------------------------
/backend/bigquery/table-schema.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "mode": "NULLABLE",
 4 |     "name": "command",
 5 |     "type": "STRING"
 6 |   },
 7 |   {
 8 |     "mode": "NULLABLE",
 9 |     "name": "country",
10 |     "type": "STRING"
11 |   },
12 |   {
13 |     "mode": "NULLABLE",
14 |     "name": "city",
15 |     "type": "STRING"
16 |   },
17 |   {
18 |     "mode": "NULLABLE",
19 |     "name": "state",
20 |     "type": "STRING"
21 |   },
22 |   {
23 |     "mode": "NULLABLE",
24 |     "name": "timestamp",
25 |     "type": "TIMESTAMP"
26 |   },
27 |   {
28 |     "mode": "NULLABLE",
29 |     "name": "browser",
30 |     "type": "STRING"
31 |   },
32 |   {
33 |     "mode": "NULLABLE",
34 |     "name": "device",
35 |     "type": "STRING"
36 |   },
37 |   {
38 |     "mode": "NULLABLE",
39 |     "name": "os",
40 |     "type": "STRING"
41 |   }
42 | ]
43 | 


--------------------------------------------------------------------------------
/backend/game-controller/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * 	Copyright 2016, Google, Inc.
 4 |  * Licensed under the Apache License, Version 2.0 (the 'License');
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  *   http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an 'AS IS' BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 
17 | 'use strict';
18 | 
19 | module.exports = {
20 |   firebase: {
21 |     apiKey: '',
22 |     authDomain: '',
23 |     databaseUrl: '',
24 |     commandsQueueNode: 'commands',
25 |     commandsArchiveNode: 'commands-archive',
26 |     serviceAccountFilePath: './firebase-plays.json'
27 |   },
28 |   projectId: '',
29 |   dataset: 'firebase_plays',
30 |   table: 'commands'
31 | };
32 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | Want to contribute? Great! First, read this page (including the small print at the end).
 2 | 
 3 | ### Before you contribute
 4 | Before we can use your code, you must sign the
 5 | [Google Individual Contributor License Agreement]
 6 | (https://cla.developers.google.com/about/google-individual)
 7 | (CLA), which you can do online. The CLA is necessary mainly because you own the
 8 | copyright to your changes, even after your contribution becomes part of our
 9 | codebase, so we need your permission to use and distribute your code. We also
10 | need to be sure of various other things—for instance that you'll tell us if you
11 | know that your code infringes on other people's patents. You don't have to sign
12 | the CLA until after you've submitted your code for review and a member has
13 | approved it, but you must do it before we can put your code into our codebase.
14 | Before you start working on a larger contribution, you should get in touch with
15 | us first through the issue tracker with your idea so that we can help out and
16 | possibly guide you. Coordinating up front makes it much easier to avoid
17 | frustration later on.
18 | 
19 | ### Code reviews
20 | All submissions, including submissions by project members, require review. We
21 | use Github pull requests for this purpose.
22 | 
23 | ### The small print
24 | Contributions made by corporations are covered by a different agreement than
25 | the one above, the
26 | [Software Grant and Corporate Contributor License Agreement]
27 | (https://cla.developers.google.com/about/google-corporate).


--------------------------------------------------------------------------------
/frontend/public/third_party/jquery.voice.min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * jQuery Voice plugin 0.3 (31st May 2015)
 3 |  * Copyright Subin Siby - http://subinsb.com
 4 |  * 
 5 |  * ------------------
 6 |  * Licensed under MIT
 7 |  * ------------------
 8 |  * 
 9 |  * A jQuery plugin to record, play & download microphone input sound from the user.
10 |  * NEEDS recorder.js and recorderWorker.js to work - https://github.com/mattdiamond/Recorderjs
11 |  * 
12 |  * To use MP3 conversion, NEEDS mp3Worker.js, libmp3lame.min.js and recorder.js from https://github.com/nusofthq/Recordmp3js/tree/master/js
13 |  *
14 |  * Full Documentation & Support - http://subinsb.com/html5-record-mic-voice
15 | */
16 | window.Fr=window.Fr||{},function(){Fr.voice={workerPath:"third_party/recorderWorker.js",mp3WorkerPath:"third_party/mp3Worker.js",stream:!1,init_called:!1,init:function(){try{window.AudioContext=window.AudioContext||window.webkitAudioContext,navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia,window.URL=window.URL||window.webkitURL,navigator.getUserMedia===!1&&alert("getUserMedia() is not supported in your browser"),this.context=new AudioContext}catch(t){alert("Web Audio API is not supported in this browser")}},record:function(t,e){this.init_called===!1&&(this.init(),this.init_called=!0),$that=this,navigator.getUserMedia({audio:!0},function(r){var i=$that.context.createMediaStreamSource(r);t===!0&&i.connect($that.context.destination),$that.recorder=new Recorder(i,{workerPath:$that.workerPath,mp3WorkerPath:$that.mp3WorkerPath}),$that.stream=r,$that.recorder.record(),e(r)},function(){alert("No live audio input")})},stop:function(){return this.recorder.stop(),this.recorder.clear(),this.stream.stop(),this},"export":function(t,e){"mp3"==e?this.recorder.exportMP3(t):this.recorder.exportWAV(function(r){if(""==e||"blob"==e)t(r);else if("base64"==e){var i=new window.FileReader;i.readAsDataURL(r),i.onloadend=function(){base64data=i.result,t(base64data)}}else if("URL"==e){var o=URL.createObjectURL(r);t(o)}})}}}(jQuery);
17 | 


--------------------------------------------------------------------------------
/frontend/public/third_party/recorderWorker.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2014 nusofthq
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 9 | 
10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 | function init(e){sampleRate=e.sampleRate}function record(e){recBuffersL.push(e[0]),recLength+=e[0].length}function exportWAV(e){var t=mergeBuffers(recBuffersL,recLength),r=encodeWAV(t),n=new Blob([r],{type:e});this.postMessage(n)}function getBuffer(){var e=[];e.push(mergeBuffers(recBuffersL,recLength)),e.push(mergeBuffers(recBuffersR,recLength)),this.postMessage(e)}function clear(){recLength=0,recBuffersL=[],recBuffersR=[]}function mergeBuffers(e,t){for(var r=new Float32Array(t),n=0,a=0;a<e.length;a++)r.set(e[a],n),n+=e[a].length;return r}function interleave(e,t){for(var r=e.length+t.length,n=new Float32Array(r),a=0,f=0;r>a;)n[a++]=e[f],n[a++]=t[f],f++;return n}function floatTo16BitPCM(e,t,r){for(var n=0;n<r.length;n++,t+=2){var a=Math.max(-1,Math.min(1,r[n]));e.setInt16(t,0>a?32768*a:32767*a,!0)}}function writeString(e,t,r){for(var n=0;n<r.length;n++)e.setUint8(t+n,r.charCodeAt(n))}function encodeWAV(e){var t=new ArrayBuffer(44+2*e.length),r=new DataView(t);return writeString(r,0,"RIFF"),r.setUint32(4,32+2*e.length,!0),writeString(r,8,"WAVE"),writeString(r,12,"fmt "),r.setUint32(16,16,!0),r.setUint16(20,1,!0),r.setUint16(22,1,!0),r.setUint32(24,sampleRate,!0),r.setUint32(28,2*sampleRate,!0),r.setUint16(32,2,!0),r.setUint16(34,16,!0),writeString(r,36,"data"),r.setUint32(40,2*e.length,!0),floatTo16BitPCM(r,44,e),r}var recLength=0,recBuffersL=[],recBuffersR=[],bits=16,sampleRate;this.onmessage=function(e){switch(e.data.command){case"init":init(e.data.config);break;case"record":record(e.data.buffer);break;case"exportWAV":exportWAV(e.data.type);break;case"getBuffer":getBuffer();break;case"clear":clear()}};


--------------------------------------------------------------------------------
/backend/game-controller/game-controller.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * 	Copyright 2016, Google, Inc.
 4 |  * Licensed under the Apache License, Version 2.0 (the 'License');
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  *   http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an 'AS IS' BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 
17 | 'use strict';
18 | 
19 | var config = require('./config.js');
20 | var bigquery = require('@google-cloud/bigquery')({
21 |   keyFilename: config.firebase.serviceAccountFilePath,
22 |   projectId: config.projectId
23 | });
24 | var admin = require("firebase-admin");
25 | var robot = require('robotjs');
26 | 
27 | // Configure BigQuery settings.
28 | var table = bigquery.dataset(config.dataset).table(config.table);
29 | 
30 | console.log('Connecting to ' + config.firebase.databaseUrl);
31 | var serviceAccount = require(config.firebase.serviceAccountFilePath);
32 | admin.initializeApp({
33 |   credential: admin.credential.cert(serviceAccount),
34 |   databaseURL: config.firebase.databaseUrl
35 | });
36 | var db = admin.database();
37 | 
38 | var commandsRef = db.ref(config.firebase.commandsQueueNode);
39 | var commandsArchiveRef = db.ref(config.firebase.commandsArchiveNode);
40 | var validCommands = ['up', 'down', 'left', 'right'];
41 | 
42 | // Take a command, simulate the corresponding key press, and log to stderr and BigQuery.
43 | commandsRef.on('child_added', function(snapshot) {
44 |   var commandMetadata = snapshot.val();
45 |   snapshot.ref.remove();
46 |   // Update the timestamp with server time, rather than client timestamp.
47 |   commandMetadata.timestamp = Math.round(Date.now() / 1000);
48 |   var cmd = commandMetadata.command.toLowerCase();
49 |   if (validCommands.indexOf(cmd) !== -1) {
50 |     commandsArchiveRef.push(commandMetadata);
51 |     console.log('Tapping: ' + cmd);
52 |     robot.keyTap(cmd);
53 | 
54 |     // Save record of the command to BigQuery.
55 |     table.insert(commandMetadata, function(err, insertErrors, apiResponse) {
56 |       console.log('Inserting with timestamp: ' + commandMetadata.timestamp);
57 |       if (err) {
58 |         console.error('BigQuery API failed on insert: ' + err);
59 |         console.error('API response: ' + JSON.stringify(apiResponse, null, '\t'));
60 |       }
61 |       if (insertErrors && insertErrors.length) {
62 |         console.error('BigQuery insert failed: ' + insertErrors[0].errors[0].message);
63 |       }
64 |     });
65 |   } else {
66 |     console.warn('Invalid input: ' + cmd);
67 |   }
68 | });
69 | 


--------------------------------------------------------------------------------
/frontend/public/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * 	Copyright 2016, Google, Inc.
 4 |  * Licensed under the Apache License, Version 2.0 (the 'License');
 5 |  * you may not use this file except in compliance with the License.
 6 |  * You may obtain a copy of the License at
 7 |  *
 8 |  *   http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  * Unless required by applicable law or agreed to in writing, software
11 |  * distributed under the License is distributed on an 'AS IS' BASIS,
12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  * See the License for the specific language governing permissions and
14 |  * limitations under the License.
15 |  */
16 | 
17 | // Set up Firebase
18 | var config = {
19 |   apiKey: '',
20 |   databaseURL: '',
21 |   projectId: ''
22 | };
23 | 
24 | // Firebase initialization
25 | var app = firebase.initializeApp(config);
26 | var auth = app.auth();
27 | var db = firebase.database();
28 | var commands = db.ref('commands');
29 | var chat = db.ref('chat');
30 | var userName = '';
31 | var arrows = [];
32 | 
33 | // Commands
34 | var commandList = ['up', 'down', 'left', 'right'];
35 | 
36 | // User Information
37 | var userInfo = {
38 |   country: '',
39 |   state: '',
40 |   city: '',
41 |   browser: navigator.userAgent,
42 |   device: WURFL.form_factor,
43 |   os: navigator.platform,
44 |   timestamp: ''
45 | };
46 | 
47 | // Get GeoLocation
48 | if ('geolocation' in navigator) {
49 |   var options = {
50 |     enableHighAccuracy: true,
51 |     timeout: 5000,
52 |     maximumAge: 0
53 |   };
54 | 
55 |   function success(pos) {
56 |     var crd = pos.coords;
57 |     // Get Location Details from Google Maps
58 |     fetch('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + crd.latitude + ',' + crd.longitude)
59 |     .then(function(response) {
60 |       return response.json();
61 |     }).then(function(response) {
62 |       if (response.status != 'OK') {
63 |         console.error('Response from Google Maps not OK - ' + response.status);
64 |         return;
65 |       }
66 |       else if (response.status == 'OK') {
67 |         var addrs = response.results[0].address_components;
68 |         for (var i = 0; i < addrs.length; i++) {
69 |           // Country
70 |           if (addrs[i].types.indexOf('country') != -1) {
71 |             userInfo.country = addrs[i].long_name;
72 |           }
73 |           // State
74 |           if (addrs[i].types.indexOf('administrative_area_level_1') != -1) {
75 |             userInfo.state = addrs[i].long_name;
76 |           }
77 |           // City
78 |           if (addrs[i].types.indexOf('locality') != -1) {
79 |             userInfo.city = addrs[i].long_name;
80 |           }
81 |         }
82 |       }
83 |     });
84 |   }
85 | 
86 |   function error(err) {
87 |     console.warn('GEO ERROR(' + err.code + '): ' + err.message);
88 |   }
89 | 
90 |   navigator.geolocation.getCurrentPosition(success, error, options);
91 | }
92 | 


--------------------------------------------------------------------------------
/frontend/public/third_party/recorder.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright Subin Siby - http://subinsb.com
 3 |  * 
 4 |  * ------------------
 5 |  * Licensed under MIT
 6 |  * ------------------
 7 |  *
 8 | */
 9 | (function(window){var WORKER_PATH='http://lab.subinsb.com/projects/jquery/voice/recorderWorker.js';var mp3WorkerPath='http://lab.subinsb.com/projects/jquery/voice/mp3Worker.js';var Recorder=function(source,cfg){var config=cfg||{};var bufferLen=config.bufferLen||4096;this.context=source.context;this.node=(this.context.createScriptProcessor||this.context.createJavaScriptNode).call(this.context,bufferLen,2,2);var worker=new Worker(config.workerPath||WORKER_PATH);worker.postMessage({command:'init',config:{sampleRate:this.context.sampleRate}});var recording=false,currCallback;this.node.onaudioprocess=function(e){if(!recording)return;worker.postMessage({command:'record',buffer:[e.inputBuffer.getChannelData(0),e.inputBuffer.getChannelData(1)]});}
10 | this.configure=function(cfg){for(var prop in cfg){if(cfg.hasOwnProperty(prop)){config[prop]=cfg[prop];}}}
11 | this.record=function(){recording=true;}
12 | this.stop=function(){recording=false;}
13 | this.clear=function(){worker.postMessage({command:'clear'});}
14 | this.getBuffer=function(cb){currCallback=cb||config.callback;worker.postMessage({command:'getBuffer'})}
15 | this.exportWAV=function(cb,type){currCallback=cb||config.callback;type=type||config.type||'audio/wav';if(!currCallback)throw new Error('Callback not set');worker.postMessage({command:'exportWAV',type:type});worker.onmessage=function(e){var blob=e.data;currCallback(blob);}}
16 | this.exportMP3=function(cb){this.exportWAV(function(){});currCallback=cb||config.callback;var encoderWorker=new Worker(config.mp3WorkerPath||mp3WorkerPath);worker.onmessage=function(e){var blob=e.data;var arrayBuffer;var fileReader=new FileReader();fileReader.onload=function(){arrayBuffer=this.result;var buffer=new Uint8Array(arrayBuffer),data=parseWav(buffer);encoderWorker.postMessage({cmd:'init',config:{mode:3,channels:1,samplerate:data.sampleRate,bitrate:data.bitsPerSample}});encoderWorker.postMessage({cmd:'encode',buf:Uint8ArrayToFloat32Array(data.samples)});encoderWorker.onmessage=function(e){if(e.data.cmd=='data'){var url='data:audio/mp3;base64,'+ encode64(e.data.buf);currCallback(url);console.log("Done converting to Mp3");}};};fileReader.readAsArrayBuffer(blob);}}
17 | source.connect(this.node);this.node.connect(this.context.destination);}
18 | function parseWav(wav){function readInt(i,bytes){var ret=0,shft=0;while(bytes){ret+=wav[i]<<shft;shft+=8;i++;bytes--;}
19 | return ret;}
20 | if(readInt(20,2)!=1)throw'Invalid compression code, not PCM';return{sampleRate:readInt(24,4),bitsPerSample:readInt(34,2),samples:wav.subarray(44)};}
21 | function Uint8ArrayToFloat32Array(u8a){var f32Buffer=new Float32Array(u8a.length);for(var i=0;i<u8a.length;i++){var value=u8a[i<<1]+(u8a[(i<<1)+1]<<8);if(value>=0x8000)value|=~0x7FFF;f32Buffer[i]=value/0x8000;}
22 | return f32Buffer;}
23 | function encode64(buffer){var binary='',bytes=new Uint8Array(buffer),len=bytes.byteLength;for(var i=0;i<len;i++){binary+=String.fromCharCode(bytes[i]);}
24 | return window.btoa(binary);}
25 | Recorder.forceDownload=function(blob,filename){var url=(window.URL||window.webkitURL).createObjectURL(blob);var link=window.document.createElement('a');link.href=url;link.download=filename||'output.wav';var click=document.createEvent("Event");click.initEvent("click",true,true);link.dispatchEvent(click);}
26 | window.Recorder=Recorder;})(window);


--------------------------------------------------------------------------------
/frontend/public/dpad.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * 	Copyright 2016, Google, Inc.
  4 |  * Licensed under the Apache License, Version 2.0 (the 'License');
  5 |  * you may not use this file except in compliance with the License.
  6 |  * You may obtain a copy of the License at
  7 |  *
  8 |  *   http://www.apache.org/licenses/LICENSE-2.0
  9 |  *
 10 |  * Unless required by applicable law or agreed to in writing, software
 11 |  * distributed under the License is distributed on an 'AS IS' BASIS,
 12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |  * See the License for the specific language governing permissions and
 14 |  * limitations under the License.
 15 |  */
 16 | 
 17 | // Walkie-Talkie mode
 18 | // While the user is holding down the "Talk button," Speech is recorded.
 19 | // Once the User let's go, the audio is sent to the Cloud Speech API for processing
 20 | $(document).on('ready', function() {
 21 |   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 22 |   if (navigator.getUserMedia) {
 23 |     $('#nomic').hide();
 24 |     $('#start').on('mousedown touchstart', function() {
 25 |       setTimeout(function() {
 26 |         $('#start').addClass('btn-success');
 27 |         $('#btnText').text('Listening');
 28 |       }, 500);
 29 |       Fr.voice.record(false, function() {});
 30 |     });
 31 |     $('#start').on('mouseup touchend', function() {
 32 |       $('#start').removeClass('btn-success');
 33 |       $('#start').prop('disabled', true);
 34 |       $('#btnText').text('Processing');
 35 |       Fr.voice.export(function(f) {postToSpeechAPI('LINEAR16', f);}, 'base64');
 36 |       Fr.voice.stop();
 37 |     });
 38 |   }else {
 39 |     $('#start').hide();
 40 |     $('#sapicont').hide();
 41 |   }
 42 | });
 43 | 
 44 | // Manual Buttons
 45 | $('#dpad_up').click(function() {
 46 |   postToFirebase('up');
 47 | });
 48 | $('#dpad_left').click(function() {
 49 |   postToFirebase('left');
 50 | });
 51 | $('#dpad_right').click(function() {
 52 |   postToFirebase('right');
 53 | });
 54 | $('#dpad_down').click(function() {
 55 |   postToFirebase('down');
 56 | });
 57 | 
 58 | function postToFirebase(cmd) {
 59 |   userInfo.command = cmd;
 60 |   arrows.push(cmd);
 61 |   commands.push(userInfo);
 62 | }
 63 | 
 64 | // Send audio to Speech API for transcription
 65 | // Sends resulting commands to Firebase as well
 66 | function postToSpeechAPI(format, url) {
 67 |   var speechData = {
 68 |     config: {
 69 |       encoding: format,
 70 |       sampleRate: 44100,
 71 |       profanityFilter: true
 72 |     },
 73 |     audio: {
 74 |       content: url.substring(url.indexOf('base64,') + 7)
 75 |     }
 76 |   };
 77 |   $.ajax({
 78 |     url: 'https://speech.googleapis.com/v1beta1/speech:syncrecognize?key=' + config.apiKey,
 79 |     type: 'POST',
 80 |     data: JSON.stringify(speechData),
 81 |     contentType: 'application/json',
 82 |     dataType: 'json',
 83 |     success: function(data) {
 84 |       $('#start').prop('disabled', false);
 85 |       $('#btnText').text('Hold to speak');
 86 |       var text = '';
 87 |       if (!(data.results &&
 88 |             data.results[0] &&
 89 |             data.results[0].alternatives &&
 90 |             data.results[0].alternatives[0] &&
 91 |             data.results[0].alternatives[0].transcript)) {
 92 |         console.log('No Text Recieved from Speech API');
 93 |         return;
 94 |       }
 95 |       text = data.results[0].alternatives[0].transcript;
 96 |       // Display Text
 97 |       $('#sapiout').text(text);
 98 |       text = text.split(' ');
 99 |       for (var j = 0; j < text.length; j++) {
100 |         // If we find a command, send it to the commnd list in Firebase
101 |         var lowerCommand = text[j].toLowerCase();
102 |         if (commandList.indexOf(lowerCommand) != -1) {
103 |           postToFirebase(lowerCommand);
104 |         }
105 |       }
106 |     }
107 |   });
108 | }
109 | 
110 | function displayArrows() {
111 |   // Hide all the arrows
112 |   for (var w = 0; w < commandList.length; w++) {
113 |     document.getElementById(commandList[w]).style.display = 'none';
114 |   }
115 |   // If there are arrows in the queue, pop one off and display it
116 |   if (arrows.length > 0) {
117 |     var arrow = arrows.shift();
118 |     document.getElementById(arrow).style.display = 'block';
119 |     $('#command-list').prepend('<i class="fa fa-arrow-' + arrow + '"></i>');
120 |   }
121 | }
122 | 
123 | // Every 200ms, check the arrow queue for commands to display
124 | setInterval(displayArrows, 200);
125 | 
126 | // Show commands from all users playing the game
127 | commands.on('child_added', function(snap) {
128 |   var arrow = snap.val().command;
129 |   $('#all-command-list').prepend('<i class="fa fa-arrow-' + arrow + '"></i>');
130 | });
131 | 


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |   Copyright 2016, Google, Inc.
  3 |  Licensed under the Apache License, Version 2.0 (the "License");
  4 |  you may not use this file except in compliance with the License.
  5 |  You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 |  Unless required by applicable law or agreed to in writing, software
 10 |  distributed under the License is distributed on an "AS IS" BASIS,
 11 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 |  See the License for the specific language governing permissions and
 13 |  limitations under the License.
 14 | -->
 15 | <!DOCTYPE html>
 16 | <html lang="en">
 17 |   <head>
 18 |     <meta charset="utf-8">
 19 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 20 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 21 |     <meta name="google-signin-scope" content="profile email">
 22 |     <meta name="google-signin-cookiepolicy" content="single_host_origin">
 23 |     <meta name="google-signin-client_id" content="35073302773-5dfeotcivdh8jnelq7ahrp6ee79n5n5s.apps.googleusercontent.com">
 24 |     <title>Firebase Plays with Google Cloud</title>
 25 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 26 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 27 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.8/css/bootstrap-material-design.min.css">
 28 |     <style>
 29 |     .well {
 30 |       margin-bottom: 5px !important;
 31 |     }
 32 |     .overlay {
 33 |         position:absolute;
 34 |         top:50%;
 35 |         left:0;
 36 |         width:100%;
 37 |         height:100%;
 38 |         z-index:1000;
 39 |         display:none;
 40 |       }
 41 |     </style>
 42 |     </head>
 43 |   <body>
 44 |     <div class="container">
 45 |       <div class="row">
 46 |         <div class="col-md-12 text-center" style="margin-top:30px;">
 47 |           <div style="width:120px;display: block; margin-left: auto; margin-right: auto;">
 48 |             <div id="signIn" class="g-signin2" data-onsuccess="signIn" data-theme="dark"></div>
 49 |           </div>
 50 |           <button class="btn btn-success btn-raised hidden" id="btn" onclick="startListening(event)">
 51 |             <span class="fa-stack fa-lg">
 52 |               <i class="fa fa-square-o fa-stack-2x"></i>
 53 |               <i class="fa fa-microphone" aria-hidden="true"></i>
 54 |             </span>
 55 |             <span id="btnText">Start</span>
 56 |           </button>
 57 |           <button id="signOut" class="btn btn-default btn-raised hidden" onclick="signOut()">
 58 |             <span class="fa-stack fa-lg">
 59 |               <i class="fa fa-square-o fa-stack-2x"></i>
 60 |               <i class="fa fa-sign-out" aria-hidden="true"></i>
 61 |             </span>
 62 |             Sign Out
 63 |           </button>
 64 |         </div>
 65 |       </div>
 66 |       <div class="row">
 67 |         <div class="col-md-12 text-center h5" id="interm"></div>
 68 |       </div>
 69 |       <div class="row" style="margin-bottom:5px;">
 70 |         <div id="div_language" class="col-md-12 text-center">
 71 |           <select id="select_language" onchange="updateCountry()"></select>
 72 |           &nbsp;&nbsp;
 73 |           <select id="select_dialect"></select>
 74 |         </div>
 75 |       </div>
 76 |       <div class="row">
 77 |         <div class="col-md-8">
 78 |           <div class="embed-responsive embed-responsive-16by9">
 79 |             <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WX8n_rSJQc4?autoplay=1"></iframe>
 80 |           </div>
 81 |         </div>
 82 |         <div class="col-md-4">
 83 |           <div class="col-md-12 text-center h4" style="border-bottom: 1px solid black;">
 84 |             Chat
 85 |           </div>
 86 |           <div class="col-md-12" style="overflow-y:scroll;height:400px;" id="chat"></div>
 87 |         </div>
 88 |       </div>
 89 |     </div>
 90 |     <div id="up" class="overlay text-center"><i class="fa fa-arrow-up fa-5x text-danger" aria-hidden="true"></i></div>
 91 |     <div id="down" class="overlay text-center"><i class="fa fa-arrow-down fa-5x text-danger" aria-hidden="true"></i></div>
 92 |     <div id="left" class="overlay text-center"><i class="fa fa-arrow-left fa-5x text-danger" aria-hidden="true"></i></div>
 93 |     <div id="right" class="overlay text-center"><i class="fa fa-arrow-right fa-5x text-danger" aria-hidden="true"></i></div>
 94 |     <script src="https://apis.google.com/js/platform.js"></script>
 95 |     <script src="https://www.gstatic.com/firebasejs/3.0.0-eap.5/firebase.js"></script>
 96 |     <script type='text/javascript' src="https://wurfl.io/wurfl.js"></script>
 97 |     <script src="config.js"></script>
 98 |     <script src="script.js"></script>
 99 |   </body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/frontend/public/dpad.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 |   Copyright 2016, Google, Inc.
  3 |  Licensed under the Apache License, Version 2.0 (the "License");
  4 |  you may not use this file except in compliance with the License.
  5 |  You may obtain a copy of the License at
  6 | 
  7 |     http://www.apache.org/licenses/LICENSE-2.0
  8 | 
  9 |  Unless required by applicable law or agreed to in writing, software
 10 |  distributed under the License is distributed on an "AS IS" BASIS,
 11 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 |  See the License for the specific language governing permissions and
 13 |  limitations under the License.
 14 | -->
 15 | <!DOCTYPE html>
 16 | <html lang="en">
 17 |   <head>
 18 |     <meta charset="utf-8">
 19 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 20 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 21 |     <title>Firebase + Google Cloud Platform</title>
 22 |     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
 23 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 24 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 25 |     <link rel="stylesheet"" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.8/css/bootstrap-material-design.min.css">
 26 |     <style>
 27 |     .well {
 28 |       margin-bottom: 5px !important;
 29 |     }
 30 |     .overlay {  
 31 |         position:absolute;
 32 |         top:50%;
 33 |         left:0;
 34 |         width:100%;
 35 |         height:100%;
 36 |         z-index:1000;
 37 |         display:none;
 38 |     }
 39 |     .cmd-list-item {
 40 |       margin:10px;
 41 |       opacity: 0.4;
 42 |     }
 43 |     .cmd-list-item.new {
 44 |       opacity: 1.0;
 45 |     }
 46 |     .dpadcontainer {
 47 |       width:140px;
 48 |       margin:auto;
 49 |     }
 50 |     .dpadbtn{
 51 |       border:1px black solid;
 52 |       margin:0px;
 53 |     }
 54 |     </style>
 55 |     </head>
 56 |   <body>
 57 |     <div class="container">
 58 |       <div class="row">
 59 |         <div class="col-xs-12" style="margin-top:30px">
 60 |           <p class="text-muted">Firebase <i class="fa fa-plus"></i> Google Cloud Platform</p>
 61 |         </div>
 62 |       </div>
 63 |     </div>
 64 |     <div class="container">
 65 |       <div class="row">
 66 |         <div class="text-center" style="margin:auto;">
 67 |           <button class="btn btn-default btn-raised" id="start">
 68 |             <span class="fa-stack fa-lg">
 69 |               <i class="fa fa-square-o fa-stack-2x"></i>
 70 |               <i class="fa fa-microphone" aria-hidden="true"></i>
 71 |             </span>
 72 |             <span id="btnText">Hold to speak</span>
 73 |           </button>
 74 |           <span id="nomic" style="margin:10px;">Your browser doesn't support audio capture.</span>
 75 |         </div>
 76 |       </div>
 77 |     </div>
 78 |     <div class="dpadcontainer">
 79 |       <button id="dpad_up" style="margin-left:34px;margin-bottom:1px;" class="btn btn-default dpadbtn">
 80 |         <i class="fa fa-caret-up" aria-label="up"></i>
 81 |       </button>
 82 |       <br>
 83 |       <button id="dpad_left" class="btn btn-default dpadbtn">
 84 |         <i class="fa fa-caret-left" aria-label="left"></i>
 85 |       </button>
 86 |       <button id="dpad_right" class="btn btn-default dpadbtn">
 87 |         <i class="fa fa-caret-right" aria-label="right"></i>
 88 |       </button>
 89 |       <br>
 90 |       <button id="dpad_down" style="margin-left:34px;margin-top:1px;" class="btn btn-default dpadbtn">
 91 |         <i class="fa fa-caret-down" aria-label="down"></i>
 92 |       </button>
 93 |     </div> <!-- /container -->
 94 |     <div class="container" id="sapicont" style="margin-top:10px">
 95 |       <div class="row">
 96 |         <div class="col-xs-12">
 97 |           <div class="panel">
 98 |             <div class="panel-heading">
 99 |               <h3 class="panel-title">Speech API Output</h3>
100 |             </div>
101 |             <div class="panel-body">
102 |               <div id="sapiout"></div>
103 |             </div>
104 |           </div>
105 |         </div>
106 |       </div>
107 |     </div>
108 |     <div class="container" style="margin-top:10px">
109 |       <div class="row">
110 |         <div class="col-xs-12">
111 |           <div class="panel">
112 |             <div class="panel-heading">
113 |               <h3 class="panel-title">Your Commands</h3>
114 |             </div>
115 |             <div class="panel-body">
116 |               <div id="command-list"></div>
117 |             </div>
118 |           </div>
119 |         </div>
120 |       </div>
121 |     </div>
122 |     <div class="container" style="margin-top:10px">
123 |       <div class="row">
124 |         <div class="col-xs-12">
125 |           <div class="panel">
126 |             <div class="panel-heading">
127 |               <h3 class="panel-title">All Commands</h3>
128 |             </div>
129 |             <div class="panel-body">
130 |               <div id="all-command-list"></div>
131 |             </div>
132 |           </div>
133 |         </div>
134 |       </div>
135 |     </div>
136 |     <div id="up" class="overlay text-center"><i class="fa fa-arrow-up fa-5x text-danger" aria-hidden="true"></i></div>
137 |     <div id="down" class="overlay text-center"><i class="fa fa-arrow-down fa-5x text-danger" aria-hidden="true"></i></div>
138 |     <div id="left" class="overlay text-center"><i class="fa fa-arrow-left fa-5x text-danger" aria-hidden="true"></i></div>
139 |     <div id="right" class="overlay text-center"><i class="fa fa-arrow-right fa-5x text-danger" aria-hidden="true"></i></div>
140 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
141 |     <script src="https://apis.google.com/js/platform.js"></script>
142 |     <script src="https://www.gstatic.com/firebasejs/3.0.0-eap.5/firebase.js"></script>
143 |     <script type='text/javascript' src="https://wurfl.io/wurfl.js"></script>
144 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
145 |     <script src="third_party/recorder.js"></script>
146 |     <script src="third_party/jquery.voice.min.js"></script>
147 |     <script src="config.js"></script>
148 |     <script src="dpad.js"></script>
149 |   </body>
150 | </html>
151 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | This is not an official Google product.
  2 | 
  3 | # Crowdsourced Realtime Gaming
  4 | 
  5 | We decided to get a little crazy and build a real time, crowdsourced, and live streamed gaming platform.
  6 | 
  7 | Imagine players all over the world shouting "up! down! left! right!" into their computers and phones to control a common character while chatting in different languages.
  8 | 
  9 | Inspired by [Twitch Plays Pokémon](https://en.wikipedia.org/wiki/Twitch_Plays_Pok%C3%A9mon), this game uses [Firebase](https://firebase.google.com) to crowdsource input from thousands of players in real time, then a Node.js process running on a [Google Compute Engine](https://cloud.google.com/compute/) Windows VM sends these crowdsourced commands to a game, and live streams it all to YouTube.
 10 | 
 11 | ![Realtime Game Example](example_game.gif)
 12 | 
 13 | The game's web front end uses the power of [Google Cloud Machine Learning](https://cloud.google.com/products/machine-learning/) to enable realtime voice transcription and translation.
 14 | 
 15 | Finally, [BigQuery](https://cloud.google.com/bigquery/) gives us the power of big data to analyse all the commands and find interesting patterns.
 16 | 
 17 | ![Architecture](arch.png)
 18 | 
 19 | This is originally presented at Google I/O 2016. You can watch the talk here:
 20 | 
 21 | ![YouTube Video](http://img.youtube.com/vi/wOGfZ_aLGqM/maxresdefault.jpg)
 22 | 
 23 | # Setup
 24 | 
 25 | There are three components of this demo that run in the cloud:
 26 | - **Firebase** handles all of the real-time data syncing between multiple players and the game server. Firebase will handle relaying commands from every player to the server, as well as syncing chat messages between players.
 27 | - **The game server** is a Windows virtual machine running on [Google Compute Engine](https://cloud.google.com/compute/). It runs the game natively, relays user commands to the game, and streams everything to YouTube Live.
 28 | - **BigQuery** is the cloud data analytics platform that will receive all game events, and supports using SQL to query various reports.
 29 | 
 30 | ## Set up your Firebase and Google Cloud Platform project
 31 | 
 32 | 1. Create a new [Firebase project](https://firebase.google.com).
 33 | 2. Click **Add Firebase to your web app** to get the Firebase and Google Cloud Platform connection settings:
 34 |     - API key
 35 |     - Database URL
 36 |     - Project ID.
 37 | 
 38 | Follow the instructions [here](https://firebase.google.com/docs/web/setup) to extract your project ID.
 39 | 
 40 | The settings should look something like:
 41 | ```js
 42 | var config = {
 43 |   apiKey: '...',
 44 |   databaseURL: '...',
 45 |   projectId: '...'
 46 | };
 47 | ```
 48 | Replace the placeholders in [frontend/public/config.js](frontend/public/config.js) with these values.
 49 | 
 50 | ### Firebase security settings
 51 | We require users to be authenticated to write messages to the chat node or read from the
 52 | commands queue. These rules will be automatically deployed as they are included in the [firebase.json](frontend/firebase.json) file.
 53 | ```json
 54 | {
 55 |   "rules": {
 56 |         "chat": {
 57 |           ".read": true,
 58 |           ".write": "auth != null"
 59 |         },
 60 |         "commands-archive": {
 61 |           ".read": false,
 62 |           ".write": "auth != null"
 63 |         },
 64 |         "commands": {
 65 |         	".read": "auth != null",
 66 |         	".write": true
 67 |         }
 68 |     }
 69 | }
 70 | ```
 71 | 
 72 | ### Firebase service account
 73 | Create a service account that you'll upload to your game server created in the
 74 | next step.
 75 | 1. [Create a service account](https://console.firebase.google.com/iam-admin/serviceaccounts)
 76 | for your Firebase project.
 77 | 2. Select **Furnish a new private key** and select type JSON. Rename this file
 78 | to ```firebase-plays.json```. Save this file; you'll upload it to your game
 79 | server in the next section.
 80 | 
 81 | ## Enable Speech and Translate APIs
 82 | 
 83 | - [Click here](https://console.cloud.google.com/apis/library/speech.googleapis.com) to make sure the Cloud Speech API is enabled for your project.
 84 | - [Click here](https://console.cloud.google.com/apis/api/translate/overview) to make sure the Cloud Translate API is enabled for your project.
 85 | 
 86 | ## Create the game server
 87 | [Create a Windows virtual machine](https://console.cloud.google.com/launcher/details/windows-cloud/windows-server-2016?q=windows%20server%202016) using the Cloud Launcher. Click **Launch on Compute Engine** and then click **Create** on the next page.
 88 | 
 89 |  Install the following on the Windows virtual machine:
 90 |   - [Google Chrome](https://www.google.com/chrome/browser)
 91 |   - [gcloud](https://cloud.google.com/sdk/downloads#windows) - the Cloud SDK for Google Cloud Platform. Should already be preinstalled on your Windows virtual machine.
 92 |   - [Node.js](https://nodejs.org/en/download/)
 93 |   - [Python](https://www.python.org/downloads/windows/) (and add to PATH)
 94 |   - As administrator run ```npm install --global --production windows-build-tools``` and then ```npm config set msvs_version 2015 --global``` to address [this MSBUILD issue](https://github.com/chjj/pty.js/issues/60).
 95 |   - [Install git](https://git-scm.com/download/win)
 96 | 
 97 | ### Optional: YouTube live streaming
 98 | 1. Set up [YouTube live streaming](https://support.google.com/youtube/answer/2474026?hl=en) on your YouTube channel, and install an encoder on your [Windows virtual machine](https://support.google.com/youtube/answer/2907883).
 99 | 1. Get your YouTube live stream channel URL and paste it into [frontend/index.html](frontend/index.html).
100 | 
101 | ## Set up BigQuery
102 | 1. [Go to the BigQuery page](https://bigquery.cloud.google.com) for your project.
103 | 1. Create a **new dataset** named ```firebase_plays```.
104 | 2. Create a **new table** named ```commands```. Choose **Empty Data source**, and then under schema, click **Edit as Text** and paste in the contents of the [table-schema.json](backend/bigquery/table-schema.json) file.
105 | 
106 | ## Deploy the web app
107 | 
108 | Make sure you have the [Firebase SDK](https://firebase.google.com/docs/cli/) installed. You can install it with this command:
109 | 
110 | `npm install -g firebase-tools`
111 | 
112 | To deploy, run the following command in the `frontend` folder:
113 |  
114 |  `firebase deploy --project <YOUR-PROJECT-ID>`
115 | 
116 | ## Run the game and Node.js game-controller app
117 | 1. Install and run whatever game you'd like to run on your game server. The script only supports the arrow keys on the keyboard by default.
118 | 1. On the Windows game server, run the following commands in the **git bash** terminal:
119 |       1. ```git clone https://github.com/googlesamples/Firebase-Plays-GCP-2016```
120 |       1. ```cd backend/game-controller```
121 |       1. Copy the Firebase service account ```firebase-plays.json``` that you created in a previous step to ```backend/game-controller``` on the Windows game server.
122 |       1. Edit ```config.js``` to include the API key, Project ID, Auth Domain, and Database URL values from your Firebase project.
123 |       1. ```npm install```
124 |       1. ```node game-controller.js```
125 | 3. Click the running game to ensure it has focus so game-controller.js can relay keystrokes into the game.
126 | 
127 | ### Sample BigQuery queries:
128 | 
129 | #### Most common game commands
130 | ```sql
131 | SELECT command, count(command) FROM [social_gaming.game_commands] GROUP BY command
132 | ```
133 | 
134 | #### Commands by city
135 | ```sql
136 | SELECT city, count(*) AS count FROM [social_gaming.game_commands] GROUP BY city
137 | ```
138 | 
139 | #### Commands by time of day
140 | ```sql
141 | SELECT
142 |   STRFTIME_UTC_USEC([timestamp], '%I %p') AS hour, count(*) AS count
143 | FROM
144 |   [social_gaming.game_commands]
145 | GROUP BY
146 |   hour
147 | ```
148 | 


--------------------------------------------------------------------------------
/frontend/public/script.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license
  3 |  * 	Copyright 2016, Google, Inc.
  4 |  * Licensed under the Apache License, Version 2.0 (the 'License');
  5 |  * you may not use this file except in compliance with the License.
  6 |  * You may obtain a copy of the License at
  7 |  *
  8 |  *   http://www.apache.org/licenses/LICENSE-2.0
  9 |  *
 10 |  * Unless required by applicable law or agreed to in writing, software
 11 |  * distributed under the License is distributed on an 'AS IS' BASIS,
 12 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |  * See the License for the specific language governing permissions and
 14 |  * limitations under the License.
 15 |  */
 16 | 
 17 | // Firebase User Auth
 18 | function signIn(googleUser) {
 19 |   var credential = firebase.auth.GoogleAuthProvider.credential({
 20 |     'idToken' : googleUser.getAuthResponse().id_token
 21 |   });
 22 |   auth.signInWithCredential(credential).then(function(user) {
 23 |     console.log('Sign In Success', user);
 24 |     userName = user.displayName;
 25 |     document.getElementById('btn').className = 'btn btn-success btn-raised';
 26 |     document.getElementById('signOut').className = 'btn btn-default btn-raised';
 27 |     document.getElementById('signIn').className = 'g-signin2 hidden';
 28 |     document.getElementById('interm').textContent = 'Click "Start" and say some commands: Up, Down, Left, Right. Talk for chat!';
 29 |   }, function(error) {
 30 |     console.error('Sign In Error', error);
 31 |   });
 32 | }
 33 | 
 34 | function signOut() {
 35 |   var auth2 = gapi.auth2.getAuthInstance();
 36 |   auth2.signOut().then(function() {
 37 |     console.log('User signed out.');
 38 |     document.getElementById('btn').className = 'btn btn-success btn-raised hidden';
 39 |     document.getElementById('signOut').className = 'btn btn-default btn-raised hidden';
 40 |     document.getElementById('signIn').className = 'g-signin2';
 41 |     document.getElementById('interm').textContent = '';
 42 |   });
 43 | }
 44 | 
 45 | // Add Message to Chat Box
 46 | chat.on('child_added', function(snap) {
 47 |   var userName = document.createElement('b');
 48 |   var text = document.createElement('span');
 49 |   var msg = document.createElement('div');
 50 |   msg.className = 'well well-sm';
 51 |   msg.style.cursor = 'pointer';
 52 | 
 53 |   userName.textContent = snap.val().name + ': ';
 54 |   text.textContent = snap.val().text;
 55 | 
 56 |   msg.appendChild(userName);
 57 |   msg.appendChild(text);
 58 | 
 59 |   objDiv = document.getElementById('chat');
 60 |   objDiv.insertBefore(msg, objDiv.firstChild);
 61 |   objDiv.scrollTop = 0;
 62 | 
 63 |   // Flip between original text and translated text on click
 64 |   var original = false;
 65 |   msg.addEventListener('click', function() {
 66 |     if (original) {
 67 |       translate();
 68 |       text.style.color = 'black';
 69 |     } else {
 70 |       text.textContent = snap.val().text;
 71 |       text.style.color = 'red';
 72 |     }
 73 |     original = !original;
 74 |   });
 75 | 
 76 |   // Call the Translate API
 77 |   function translate() {
 78 |     fetch('https://www.googleapis.com/language/translate/v2?key=' +
 79 |              config.apiKey +
 80 |              '&q=' + snap.val().text +
 81 |              '&target=' + select_dialect.value.substring(0, 2),
 82 |     {
 83 |       method: 'get'
 84 |     }).then(function(response) {
 85 |       return response.json();
 86 |     }).then(function(response) {
 87 |       text.textContent = response.data.translations[0].translatedText;
 88 |     });
 89 |   };
 90 |   translate();
 91 | 
 92 |   // Re-translate when language is changed
 93 |   window.addEventListener('country_change', function() {
 94 |     translate();
 95 |   });
 96 | 
 97 | });
 98 | 
 99 | // Check if browser supports WebSpeech API
100 | if (!('webkitSpeechRecognition' in window)) {
101 |   alert("Your browser doesn't support the Web Speech API :(");
102 | } else {
103 |   var recognizing = false;
104 |   var recognition = new webkitSpeechRecognition();
105 |   recognition.continuous = true;
106 |   recognition.interimResults = false;
107 | 
108 |   function startListening(event) {
109 |     if (recognizing) {
110 |       document.getElementById('select_language').disabled = false;
111 |       document.getElementById('select_dialect').disabled = false;
112 |       recognition.stop();
113 |     }else {
114 |       document.getElementById('select_language').disabled = true;
115 |       document.getElementById('select_dialect').disabled = true;
116 |       recognition.lang = select_dialect.value;
117 |       recognition.start();
118 |     }
119 |   }
120 | 
121 |   // Create Stop Button once WebSpeech API starts
122 |   recognition.onstart = function() {
123 |     recognizing = true;
124 |     document.getElementById('btnText').textContent = 'Stop';
125 |     document.getElementById('btn').className = 'btn btn-danger btn-raised';
126 |   };
127 | 
128 |   // Create Start Button once WebSpeech API ends
129 |   recognition.onend = function() {
130 |     recognizing = false;
131 |     document.getElementById('btnText').textContent = 'Start';
132 |     document.getElementById('btn').className = 'btn btn-success btn-raised';
133 |   };
134 | 
135 |   // Display WebSpeech API errors
136 |   recognition.onerror = function(event) {
137 |     if (event.error == 'no-speech') {
138 |       alert('No speech was detected');
139 |     }
140 |     else if (event.error == 'audio-capture') {
141 |       alert('Could not detect a microphone on your device');
142 |     }
143 |     else if (event.error == 'not-allowed') {
144 |       alert('Cannot access your microphone. Did you grant permissions?');
145 |     }
146 |     else {
147 |       alert('Unknown Error with Speech Recognition - ' + event.error);
148 |     }
149 |   };
150 | 
151 |   // Handle WebSpeech API results
152 |   recognition.onresult = function(event) {
153 |     for (var i = event.resultIndex; i < event.results.length; ++i) {
154 |       // Only parse text when we get the final results
155 |       if (!(event.results[i].isFinal)) {return;}
156 |       // Split text into individual words
157 |       var text = event.results[i][0].transcript.split(' ');
158 |       // Output to hold the comments
159 |       var output = '';
160 |       var other = false;
161 |       for (var j = 0; j < text.length; j++) {
162 |         // If we find a command, send it to the command list in Firebase
163 |         var lowerCommand = text[j].toLowerCase();
164 |         if (commandList.indexOf(lowerCommand) != -1) {
165 |           userInfo.command = lowerCommand;
166 |           arrows.push(lowerCommand);
167 |           commands.push(userInfo);
168 |         // Otherwise, add it to the chat
169 |         } else if (text[j] != '') {
170 |           other = true;
171 |         }
172 |         output += text[j] + ' ';
173 |       }
174 |       if (other) {
175 |         // Push chat messages up once everything is compiled
176 |         chat.push({name: userName, text: output});
177 |       }
178 |     }
179 |   };
180 | 
181 |   // Flash directional arrows on the screen
182 |   var arrows = [];
183 |   function displayArrows() {
184 |     for (var w = 0; w < commandList.length; w++) {
185 |       document.getElementById(commandList[w]).style.display = 'none';
186 |     }
187 |     if (arrows.length > 0) {
188 |       document.getElementById(arrows.shift()).style.display = 'block';
189 |     }
190 |   }
191 |   setInterval(function() { displayArrows(); }, 200);
192 | 
193 | }
194 | 
195 | // Language Selector
196 | var langs =
197 | [['Afrikaans', 'af', ['af-ZA']],
198 |  ['Bahasa Indonesia', 'id', ['id-ID']],
199 |  ['Bahasa Melayu', 'ms', ['ms-MY']],
200 |  ['Català', ['ca-ES']],
201 |  ['Čeština', ['cs-CZ']],
202 |  ['Deutsch', ['de-DE']],
203 |  ['English', ['en-AU', 'Australia'],
204 |                      ['en-CA', 'Canada'],
205 |                      ['en-IN', 'India'],
206 |                      ['en-NZ', 'New Zealand'],
207 |                      ['en-ZA', 'South Africa'],
208 |                      ['en-GB', 'United Kingdom'],
209 |                      ['en-US', 'United States']],
210 |  ['Español', ['es-AR', 'Argentina'],
211 |                      ['es-BO', 'Bolivia'],
212 |                      ['es-CL', 'Chile'],
213 |                      ['es-CO', 'Colombia'],
214 |                      ['es-CR', 'Costa Rica'],
215 |                      ['es-EC', 'Ecuador'],
216 |                      ['es-SV', 'El Salvador'],
217 |                      ['es-ES', 'España'],
218 |                      ['es-US', 'Estados Unidos'],
219 |                      ['es-GT', 'Guatemala'],
220 |                      ['es-HN', 'Honduras'],
221 |                      ['es-MX', 'México'],
222 |                      ['es-NI', 'Nicaragua'],
223 |                      ['es-PA', 'Panamá'],
224 |                      ['es-PY', 'Paraguay'],
225 |                      ['es-PE', 'Perú'],
226 |                      ['es-PR', 'Puerto Rico'],
227 |                      ['es-DO', 'República Dominicana'],
228 |                      ['es-UY', 'Uruguay'],
229 |                      ['es-VE', 'Venezuela']],
230 |  ['Euskara', ['eu-ES']],
231 |  ['Français', ['fr-FR']],
232 |  ['Galego', ['gl-ES']],
233 |  ['Hrvatski', ['hr_HR']],
234 |  ['IsiZulu', ['zu-ZA']],
235 |  ['Íslenska', ['is-IS']],
236 |  ['Italiano', ['it-IT', 'Italia'],
237 |                      ['it-CH', 'Svizzera']],
238 |  ['Magyar', ['hu-HU']],
239 |  ['Nederlands', ['nl-NL']],
240 |  ['Norsk bokmål', ['nb-NO']],
241 |  ['Polski', ['pl-PL']],
242 |  ['Português', ['pt-BR', 'Brasil'],
243 |                      ['pt-PT', 'Portugal']],
244 |  ['Română', ['ro-RO']],
245 |  ['Slovenčina', ['sk-SK']],
246 |  ['Suomi', ['fi-FI']],
247 |  ['Svenska', ['sv-SE']],
248 |  ['Türkçe', ['tr-TR']],
249 |  ['български', ['bg-BG']],
250 |  ['Pусский', ['ru-RU']],
251 |  ['Српски', ['sr-RS']],
252 |  ['한국어', ['ko-KR']],
253 |  ['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'],
254 |                      ['cmn-Hans-HK', '普通话 (香港)'],
255 |                      ['cmn-Hant-TW', '中文 (台灣)'],
256 |                      ['yue-Hant-HK', '粵語 (香港)']],
257 |  ['日本語', ['ja-JP']],
258 |  ['Lingua latīna', ['la']],
259 |  ['Hebrew', ['he-IL']]];
260 | 
261 | var country_change = new Event('country_change');
262 | 
263 | for (var i = 0; i < langs.length; i++) {
264 |   select_language.options[i] = new Option(langs[i][0], i);
265 | }
266 | select_language.selectedIndex = 6;
267 | updateCountry();
268 | select_dialect.selectedIndex = 6;
269 | 
270 | function updateCountry() {
271 |   for (var i = select_dialect.options.length - 1; i >= 0; i--) {
272 |     select_dialect.remove(i);
273 |   }
274 |   var list = langs[select_language.selectedIndex];
275 |   for (var i = 1; i < list.length; i++) {
276 |     select_dialect.options.add(new Option(list[i][1], list[i][0]));
277 |   }
278 |   select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
279 |   window.dispatchEvent(country_change);
280 | }
281 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.


--------------------------------------------------------------------------------