Play from a specific point

hugvey/central_command.py

@@ -349,6 +349,18 @@ class HugveyState(object):
             
             if event['event'] == 'change_language':
                 self.setLanguage(event['lang_code'])
+            if event['event'] == 'play_msg':
+                self.logger.info("DO PLAY :-)")
+                if not self.story:
+                    self.logger.critical("No story to play message in")
+                else:
+                    msg = self.story.get(event['msg_id'])
+#                     if not msg or isinstance(msg, hugvey.story.Message):
+#                         self.logger.critical("Invalid ID to play: {}".format(event['msg_id']))
+                    self.restart()
+                    await asyncio.sleep(.1)
+                    self.story.setCurrentMessage(msg)
+#                     self.resume() # don't reset a finished story
 
         self.eventQueue = None
 
@@ -375,6 +387,7 @@ class HugveyState(object):
         self.status = self.STATE_PAUSE
     
     def resume(self):
+        """ Start playing without reset"""
         self.logger.info('Resume')
         if self.google:
             self.google.resume()
@@ -384,6 +397,7 @@ class HugveyState(object):
         self.status = self.STATE_RUNNING
     
     def restart(self):
+        """ Start playing with reset"""
         self.logger.info('Restart')
         if self.story:
             self.story.stop()

hugvey/panopticon.py

@@ -55,6 +55,8 @@ def getWebSocketHandler(central_command):
                     self.msgRestart(msg['hugvey'])
                 elif msg['action'] == 'change_language':
                     self.msgChangeLanguage(msg['hugvey'], msg['lang_code'])
+                elif msg['action'] == 'play_msg':
+                    self.msgPlayMsg(msg['hugvey'], msg['msg_id'])
                 else:
                     self.send({'alert': 'Unknown request: {}'.format(message)})
                     logger.warn('Unknown request: {}'.format(message))
@@ -97,6 +99,9 @@ def getWebSocketHandler(central_command):
         def msgChangeLanguage(self, hv_id, lang_code):
             central_command.hugveys[hv_id].eventQueue.put_nowait({'event': 'change_language', 'lang_code': lang_code})
         
+        def msgPlayMsg(self, hv_id, msg_id):
+            central_command.hugveys[hv_id].eventQueue.put_nowait({'event': 'play_msg', 'msg_id': msg_id})
+
     return WebSocketHandler
 
 class NonCachingStaticFileHandler(tornado.web.StaticFileHandler):

www/css/styles.css

@@ -154,13 +154,19 @@ img.icon {
     position: absolute;
     top: 0;
     right: 0;
-    width: 30%;
+    width: 420px;
     max-height: 100%;
     overflow-y: auto; }
     #story #msg .msg__info, #story #msg .directions > div {
       padding: 10px;
       margin-bottom: 10px;
       background: lightgray; }
+    #story #msg h1 {
+      margin: 0; }
+    #story #msg .play {
+      position: absolute;
+      top: 15px;
+      right: 10px; }
     #story #msg .direction {
       position: relative; }
       #story #msg .direction h3 {

www/index.html

@@ -64,6 +64,7 @@
 		</div>
 		<div id='story'>
 			<div id="controls">
+				<span id="current_hv">{{selectedId}}</span>
 				<span id="current_lang"></span>
 				<div id="btn-save" class="btn">Save</div>
 				<div id="btn-addMsg" class="btn">Create message</div>

www/js/hugvey_console.js

@@ -4,13 +4,14 @@ class Panopticon {
     constructor() {
         console.log( "Init panopticon" );
         this.languages = []
-        this.selectedHugvey = null;
+//        this.selectedHugvey = null;
         this.hugveys = new Vue( {
-            el: "#status",
+            el: "#interface",
             data: {
                 uptime: 0,
                 languages: [],
-                hugveys: []
+                hugveys: [],
+                selectedId: null,
             },
             methods: {
                 time_passed: function( hugvey, property ) {
@@ -21,6 +22,7 @@ class Panopticon {
                     return panopticon.stringToHHMMSS( hugvey[property] );
                 },
                 loadNarrative: function( code, file ) {
+                    panopticon.hugveys.selectedId = null;
                     return panopticon.loadNarrative( code, file );
                 },
                 pause: function(hv) {
@@ -40,7 +42,7 @@ class Panopticon {
                     return panopticon.change_language(hv.id, lang_code);
                 },
                 showHugvey: function(hv) {
-                    panopticon.selectedHugvey = hv.id;
+                    panopticon.hugveys.selectedId = hv.language ? hv.id : null;
                     panopticon.updateSelectedHugvey();
                 }
             }
@@ -78,7 +80,7 @@ class Panopticon {
                     this.hugveys.languages = msg['languages'];
                     this.languages = msg['languages'];
                     this.hugveys.hugveys = msg['hugveys'];
-                    if(this.selectedHugvey) {
+                    if(this.hugveys.selectedId) {
                         this.updateSelectedHugvey();
                     }
                     break;
@@ -87,14 +89,13 @@ class Panopticon {
     }
     
     updateSelectedHugvey() {
-        if(! this.selectedHugvey) {
+        let hv = null;
-            return;
+        if(this.hugveys.selectedId) {
-        }
+            hv = this.getHugvey(this.hugveys.selectedId);
-        console.log('showNOW', this.selectedHugvey);
+            if(hv.language && this.graph.language_code != hv.language) {
-        let hv = this.getHugvey(this.selectedHugvey);
-        if(this.graph.language_code != hv.language) {
                 this.loadNarrative(hv.language);
             }
+        }
         this.graph.updateHugveyStatus(hv);
     }
     
@@ -166,6 +167,14 @@ class Panopticon {
     change_language( hv_id, lang_code ) {
         this.send( { action: 'change_language', hugvey: hv_id, lang_code: lang_code } );
     }
+    
+    playFromSelected(msg_id) {
+        if(!this.hugveys.selectedId) {
+            alert('No hugvey selected');
+        } else {
+            this.send({ action: 'play_msg', hugvey: this.hugveys.selectedId, msg_id: msg_id })
+        }
+    }
 }
 
 
@@ -264,6 +273,28 @@ class Graph {
     showMsg( msg ) {
         let msgEl = document.getElementById( 'msg' );
         msgEl.innerHTML = "";
+        
+        if(panopticon.hugveys.selectedId) {
+            let playEl = crel(
+                'div',
+                {'class': 'play'},
+                crel(
+                    'div', {
+                        'class': 'btn btn--play',
+                        'on': {
+                            'click': function (e) {
+                                panopticon.playFromSelected(msg['@id']);
+                            }
+                        }
+                    },
+                    "Save & play on #" + panopticon.hugveys.selectedId
+                )
+            );
+            msgEl.appendChild(playEl);
+        }
+        
+        
+        
         let startAttributes = {
             'name': msg['@id'] + '-start',
             'disabled': true,
@@ -359,12 +390,10 @@ class Graph {
                     'class': 'direction ' + (direction['source'] == msg ? 'dir-to' : 'dir-from'),
                     'on': {
                         'mouseover': function(e) {
-                            console.log('over', direction['@id']);
                             directionEl.classList.add('dir-highlight');
                             document.getElementById(direction['@id']).classList.add('dir-highlight');
                         },
                         'mouseout': function(e) {
-                            console.log('& out  ', direction['@id']);
                             directionEl.classList.remove('dir-highlight');
                             document.getElementById(direction['@id']).classList.remove('dir-highlight');
                         }
@@ -752,6 +781,10 @@ class Graph {
         while(els.length > 0) {
             els[0].classList.remove('beenHit');
         }
+        if(!hv || typeof  hv['history'] == 'undefined') {
+            return;
+        }
+        
         for(let msg of hv['history']['messages']) {
             document.getElementById(msg[0]['id']).classList.add('beenHit');
         }

www/scss/styles.scss

@@ -255,7 +255,7 @@ img.icon{
         position: absolute;
         top:0;
         right:0;
-        width: 30%;
+        width: 420px;
         max-height:100%;
         overflow-y: auto;
         
@@ -265,6 +265,16 @@ img.icon{
             background:lightgray;
         }
        
+       h1{
+       	margin:0;
+       }
+       
+       .play {
+			position:absolute;
+			top: 15px;
+			right: 10px;
+       }
+       
        .direction{
        		position: relative;
        		h3{