Changeset 29888 for main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js

Timestamp:

2015-05-17T11:17:31+12:00 (9 years ago)

Author:

davidb

Message:

Working popup editor, saving to localStorage. Tidy up on space-bar for global pause and start play.

File:

• main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js (modified) (3 diffs)

main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/game-on.js

@@ -1 +1 @@
 "use strict";
 
-var paper_x_dim = 920;
-var paper_y_dim = 445;
+var goDocStorage = null;
+
+var goPaper = null;
+
+var go_paper_x_dim = 920;
+var go_paper_y_dim = 445;
 
 var gameOnCurrentTimeXPos = 0;
 var gameOnCurrentTimelineRect = null;
 
+var num_midi_pitches = 128;
+
+
 function updateGameOnCurrentTimeline()
 {
-    gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  paper_x_dim;
+    gameOnCurrentTimeXPos = (mediaPlayer.currentTime / mediaPlayer.duration) *  go_paper_x_dim;
     //console.log("*** x pos = " + gameOnCurrentTimeXPos);
 
@@ -15 +22 @@
 }
 
-function initGameOn()
-{
-    console.log("initGameOn()");
-
-    var gmp_x_dim = $('#gameOnPaper').width();
-    var gmp_y_dim = $('#gameOnPaper').height();
-
-    console.log("*** gmp_x_dim = " + gmp_x_dim);
-    console.log("*** gmp_y_dim = " + gmp_y_dim);
-
-    var paper_x_dim = 920;
-    var paper_y_dim = 445;
-
-    var num_midi_pitches = 128;
-
-    //var paper = Raphael("gameOnPaper",gmp_x_dim,gmp_y_dim);
-    var paper = Raphael("gameOnPaper",paper_x_dim,paper_y_dim);
-    paper.canvas.style.backgroundColor = '#FFFFFF';
-
-    console.log("*** hasLocalStorage = " + hasLocalStorage);
-
-    if (hasLocalStorage) {
-    var docOID = gs.cgiParams.d;
+function getDocStorage(docOID)
+{
+    var docStorage = null;
+
+    if (hasLocalStorage) {
+
+    if (goDocStorage == null) {
+        var docStorageStr = localStorage.getItem(docOID);
+        //console.log("***docStorageStr = " + docStorageStr);
     
-    var docStorageStr = localStorage.getItem(docOID);
-
-    var docStorage = (docStorageStr != null) ? eval("("+docStorageStr+")") : {palTracks:{}, popTracks:{}};
+        //var docStorage = (docStorageStr != null) ? eval("("+docStorageStr+")") : {palTracks:{}, popTracks:{}};
+        docStorage = eval("("+docStorageStr+")") || {palTracks:{}, popTracks:{}};
+        goDocStorage = docStorage;
+    }
+    else {
+        docStorage = goDocStorage;
+    }
+    }
+
+    return docStorage;
+}
+
+function getActiveTrackLayers(opt_field)
+{
+    var field = opt_field || "name";
+
+    var palActiveLayers = [];
+    $('#palForm input:checked').each(function() {
+        palActiveLayers.push(this[field]);
+    });
+
+    return palActiveLayers;
+}
+
+function populatePalList(docStorage)
+{
+    // populate pal List
+    if (hasLocalStorage) {
 
     var palTracks = docStorage.palTracks || {};
 
-    // 'palTracks' for the form:
+    //console.log("*** palTracks = " + JSON.stringify(palTracks));
+    var palListKeys = Object.keys(palTracks).sort();
+
+    for (var i=0; i<palListKeys.length; i++) {
+        var key = palListKeys[i];
+        var track = palTracks[key];
+        var name = key;
+        var cb_name = name.replace(/[ -]/g,"");
+        var cb_value = name;
+
+        var opt_checked = (i==0) ? ' checked="checked"' : "";
+
+        $('#palList').append('<div id="pal'+cb_name+'"><input type="checkbox" '
+                 + '" name="'+cb_name+'" value="' + cb_value + '"'
+                 + opt_checked + '>' 
+                 + name + '</div>');
+    }
+    }
+    else {
+    // Put in some fake data for now
+    $('#palList').append('<input type="checkbox" id="palPianoHero"    name="PianoHero" value="Piano Hero" checked="checked"/>Piano Hero<br />');
+    $('#palList').append('<input type="checkbox" id="palDrumbeatHero" name="DrumbeatHero"  value="Drum-beat Hero" />Drum-beat Hero<br />');
+    }
+}
+
+function displayActiveTrackLayers(docStorage)
+{
+    console.log("displayActiveTrackLayers()");
+
+    goPaper.clear();
+
+    if (hasLocalStorage) {
+
+    // 'palTracks' have the form:
     //    palTracks[save_name] = [ { name: "my recording 1", baseCTime: 123.3, events: [ .... ] } ]
 
-    var my_recording = palTracks['My Recording'];
-
-    if (my_recording != null) {
-        var total_duration = mediaPlayer.duration;
-        console.log("*** total duration = " + total_duration);
-
-        var min_midi_pitch = num_midi_pitches-1;
-        var max_midi_pitch = 0;
-
-        // calculate range of midi pitches present
-        for (var b=0; b<my_recording.length; b++) {
-        var track_block = my_recording[b];
-        var base_ctime = track_block.baseCTime;
-        var block_events = track_block.events;
-
-        for (var ne=0; ne<block_events.length; ne++) {
-            var midi_pitch = block_events[ne].midiPitch;
-            if (midi_pitch < min_midi_pitch) {
-            min_midi_pitch = midi_pitch;
-            }
-            if (midi_pitch > max_midi_pitch) {
-            max_midi_pitch = midi_pitch;
+    var palTracks = docStorage.palTracks || {};
+
+    var total_duration = mediaPlayer.duration;
+    //console.log("*** total duration = " + total_duration);
+
+    var atl = getActiveTrackLayers("value");
+    //console.log("*** atl = " + JSON.stringify(atl));
+
+    var min_midi_pitch = num_midi_pitches-1;
+    var max_midi_pitch = 0;
+
+    for (var i=0; i<atl.length; i++) {
+        var storage_name = atl[i];
+        var track = palTracks[storage_name];
+
+        if (track != null) {
+
+        // calculate range of midi pitches present
+        for (var b=0; b<track.length; b++) {
+            var track_block = track[b];
+            var base_ctime = track_block.baseCTime;
+            var block_events = track_block.events;
+
+            for (var ne=0; ne<block_events.length; ne++) {
+            var midi_pitch = block_events[ne].midiPitch;
+            if (midi_pitch < min_midi_pitch) {
+                min_midi_pitch = midi_pitch;
+            }
+            if (midi_pitch > max_midi_pitch) {
+                max_midi_pitch = midi_pitch;
+            }
             }
         }
         }
-        console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
-
-        var raw_midi_range = max_midi_pitch - min_midi_pitch;
-        var midi_range = Math.max(4,raw_midi_range); 
-
-        var midi_y_dim_spacing = paper_y_dim / midi_range;
-
-        for (var b=0; b<my_recording.length; b++) {
-
-        var track_block = my_recording[b];
-        var base_ctime = track_block.baseCTime;
-
-        var block_events = track_block.events;
-
-        for (var ne=0; ne<block_events.length; ne++) {
-
-            var note_event = block_events[ne];
+    }
+    //console.log("*** max pitch = " + max_midi_pitch + ", min pitch = " + min_midi_pitch);
+    
+    var raw_midi_range = max_midi_pitch - min_midi_pitch;
+    var midi_range = Math.max(4,raw_midi_range); 
+    
+    var midi_y_dim_spacing = go_paper_y_dim / midi_range;
+
+    for (var i=0; i<atl.length; i++) {
+        var storage_name = atl[i];
+        var track = palTracks[storage_name];
+
+        if (track != null) {
+
+        for (var b=0; b<track.length; b++) {
+
+            var track_block = track[b];
+            var base_ctime = track_block.baseCTime;
             
-            var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
-            var rx_org = startPercTime * paper_x_dim;
-            var ry_org = paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing);
+            var block_events = track_block.events;
             
-            var rx_dim = (note_event.duration/1000)/total_duration * paper_x_dim;
-            var ry_dim = midi_y_dim_spacing;
-            
-            var rect = paper.rect(rx_org,ry_org,rx_dim,ry_dim);
-            rect.attr({stroke:"black",fill:"#2E52A4"});
+            for (var ne=0; ne<block_events.length; ne++) {
+            
+            var note_event = block_events[ne];
+            
+            var startPercTime = (base_ctime + note_event.startCurrentTime)/total_duration;
+            var rx_org = startPercTime * go_paper_x_dim;
+            var ry_org = go_paper_y_dim - ((note_event.midiPitch - min_midi_pitch) * midi_y_dim_spacing);
+            
+            var rx_dim = (note_event.duration/1000)/total_duration * go_paper_x_dim;
+            var ry_dim = midi_y_dim_spacing;
+            
+            var rect = goPaper.rect(rx_org,ry_org,rx_dim,ry_dim);
+            rect.attr({stroke:"black",fill:"#2E52A4"});
+            }
         }
         }
@@ -105 +173 @@
     }
 
-    gameOnCurrentTimelineRect = paper.rect(-2,0,1,paper_y_dim);
-    console.log("*** gameOnCurrentTimelineRect = " + gameOnCurrentTimelineRect);
-    
+    gameOnCurrentTimelineRect = goPaper.rect(-2,0,1,go_paper_y_dim);
     gameOnCurrentTimelineRect.attr({fill: "red", stroke: "red"});
-    
-}
-
-function pamDelete()
-{
-    //var pamActiveLayers = $('input[type=checkbox]:checked', '#pamForm');
-
-    var pamActiveLayers = [];
-    $('#pamForm input:checked').each(function() {
-        pamActiveLayers.push({name: this.name, value: this.value});
-    });
-
-    return false;
-}
+}
+
+function initGameOn()
+{
+    console.log("initGameOn()");
+
+    goDocStorage = getDocStorage(gs.cgiParams.d);
+
+    //var gmp_x_dim = $('#gameOnPaper').width();
+    //var gmp_y_dim = $('#gameOnPaper').height();
+
+    //console.log("*** gmp_x_dim = " + gmp_x_dim);
+    //console.log("*** gmp_y_dim = " + gmp_y_dim);
+
+
+    //var goPaper = Raphael("gameOnPaper",gmp_x_dim,gmp_y_dim);
+    goPaper = Raphael("gameOnPaper",go_paper_x_dim,go_paper_y_dim);
+    goPaper.canvas.style.backgroundColor = '#FFFFFF';
+
+    console.log("Browser supports LocalStorage: " + hasLocalStorage);
+
+    populatePalList(goDocStorage);
+    displayActiveTrackLayers(goDocStorage);
+}
+
+
+function palDeleteConfirmed()
+{
+    //var palActiveLayers = $('input[type=checkbox]:checked', '#palForm');
+
+    var palActiveLayersID   = getActiveTrackLayers("name");
+    var palActiveLayersValue = getActiveTrackLayers("value");
+
+    var palTracks = goDocStorage.palTracks || {};
+
+    for (var i=0; i<palActiveLayersID.length; i++) {
+    var id = palActiveLayersID[i];
+    $('#pal'+id).remove();
+
+    var value = palActiveLayersValue[i];
+    delete palTracks[value]; 
+    }
+}
+
+
+function palDelete()
+{
+    $('#delete-recording-popup').dialog('open');
+
+    return false;  // no need to process the event any further
+}
+
+function palDisplay()
+{
+    displayActiveTrackLayers(goDocStorage);
+
+    return false;  // no need to process the event any further
+}
+
+function palSave()
+{
+    var palTracks = goDocStorage.palTracks || {};
+
+    var json_edit_str = trackEditor.getSession().getValue();
+    console.log("**** json edit str = " + json_edit_str);
+
+    var json_edit = eval("("+json_edit_str+")");
+
+    for (var key in json_edit){
+    if (json_edit.hasOwnProperty(key)) {
+        //console.log("*** key = " + key);
+        var val = json_edit[key];
+        console.log("**** Saving under key[ " + key + "]: " + JSON.stringify(val));
+        palTracks[key] = val;       
+    }
+    }
+
+    if (hasLocalStorage) {
+    var docOID = gs.cgiParams.d;
+    console.log("Saving in Browser localStorage track data for '" + docOID + "'");
+    localStorage.setItem(docOID,JSON.stringify(goDocStorage));
+    }
+}
+
+function palEdit()
+{
+    var palTracks = goDocStorage.palTracks || {};
+
+    var palActiveLayers = getActiveTrackLayers("value");
+
+    var edit_json = {};
+
+    for (var i=0; i<palActiveLayers.length; i++) {
+    var track_name = palActiveLayers[i];
+    edit_json[track_name] = palTracks[track_name];
+    }
+
+    trackEditor.setValue(JSON.stringify(edit_json,null,'\t'));
+    trackEditor.clearSelection();
+
+    $('#edit-recording-popup').dialog('open');
+
+    return false;  // no need to process the event any further
+}
+