From 3e06356edc3ebad40afa0d556a9d280584cffa8f Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Fri, 25 Jan 2019 15:45:46 +0100 Subject: [PATCH] Play from a specific point --- hugvey/central_command.py | 14 +++++++++ hugvey/panopticon.py | 5 ++++ www/css/styles.css | 8 ++++- www/index.html | 1 + www/js/hugvey_console.js | 61 ++++++++++++++++++++++++++++++--------- www/scss/styles.scss | 12 +++++++- 6 files changed, 85 insertions(+), 16 deletions(-) diff --git a/hugvey/central_command.py b/hugvey/central_command.py index f3fa4e4..e1c8177 100644 --- a/hugvey/central_command.py +++ b/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() diff --git a/hugvey/panopticon.py b/hugvey/panopticon.py index f280a1e..416fba3 100644 --- a/hugvey/panopticon.py +++ b/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)) @@ -96,6 +98,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 diff --git a/www/css/styles.css b/www/css/styles.css index b4bec5b..1aaa28e 100644 --- a/www/css/styles.css +++ b/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 { diff --git a/www/index.html b/www/index.html index 620f4d8..fb867df 100644 --- a/www/index.html +++ b/www/index.html @@ -64,6 +64,7 @@
+ {{selectedId}}
Save
Create message
diff --git a/www/js/hugvey_console.js b/www/js/hugvey_console.js index 6fd4dc6..4623650 100644 --- a/www/js/hugvey_console.js +++ b/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,13 +89,12 @@ class Panopticon { } updateSelectedHugvey() { - if(! this.selectedHugvey) { - return; - } - console.log('showNOW', this.selectedHugvey); - let hv = this.getHugvey(this.selectedHugvey); - if(this.graph.language_code != hv.language) { - this.loadNarrative(hv.language); + let hv = null; + if(this.hugveys.selectedId) { + hv = this.getHugvey(this.hugveys.selectedId); + if(hv.language && 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'); } diff --git a/www/scss/styles.scss b/www/scss/styles.scss index 7b8d745..b5f7298 100644 --- a/www/scss/styles.scss +++ b/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{