feat: auto button in oars pocket

Signed-off-by: Richard Lea <chigix@zoho.com>

src/app/modules/oars-pocket/oars-pocket.component.html

@@ -1,4 +1,4 @@
-<mat-list [class.mat-action-list]="!horizontal">
+<mat-list class="ren-oars-pocket" [class.mat-action-list]="!horizontal">
   <button mat-button [class.mat-list-item]="!horizontal" [disabled]="!prevScene"
     (click)="simulation.sceneFromIRI(prevScene, 'prevScene')"> {{ i18n.back }}
   </button>
@@ -8,8 +8,9 @@
   <button mat-button [class.mat-list-item]="!horizontal" [disabled]="!nextScene"
     (click)="simulation.sceneFromIRI(nextScene, 'nextScene')">
     {{ i18n.skip }} </button>
-  <!-- TODO: `Auto` Need new Feature Design on SimulationService -->
-  <!-- <button mat-button [class.mat-list-item]="!horizontal"> Auto </button> -->
+  <button mat-button [class.mat-list-item]="!horizontal"
+    [class.disabled]="!autoContext.active" (click)="toggleAutoAcitve()">
+    Auto </button>
   <!-- TODO: Save Feature Design on SimulationService -->
   <!-- <button mat-button [class.mat-list-item]="!horizontal"> Save </button>
   <button mat-button [class.mat-list-item]="!horizontal"> Q.Save </button>

src/app/modules/oars-pocket/oars-pocket.component.scss-theme.scss

@@ -0,0 +1,10 @@
+@import '~@angular/material/theming';
+
+@mixin oars-pocket-component-theme($theme) {
+  $primary: map-get($theme, 'primary');
+  $foreground: map-get($theme, foreground);
+
+  .ren-oars-pocket .mat-button.disabled {
+    color: mat-color($foreground, disabled);
+  }
+}

src/app/modules/oars-pocket/oars-pocket.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { SimulationServiceBase as SimulationService } from 'app/renpi/services';
+import {
+  SimulationServiceBase as SimulationService,
+  StaticSessionService,
+} from 'app/renpi/services';
 
 @Component({
   selector: 'ren-oars-pocket',
@@ -28,9 +31,38 @@ export class OarsPocketComponent implements OnInit {
 
   constructor(
     public simulation: SimulationService,
+    private staticSession: StaticSessionService,
   ) { }
 
+  public autoContext = {
+    active: false,
+    timeOutId: 0,
+  };
+
   ngOnInit() {
+    this.autoContext.active = this.staticSession.config(this, 'auto') || false;
+    this.tryStartAuto();
+  }
+
+  toggleAutoAcitve() {
+    this.autoContext.active = !this.autoContext.active;
+    this.staticSession.config(this, 'auto', this.autoContext.active);
+    this.tryStartAuto();
+  }
+
+  private tryStartAuto() {
+    if (!this.autoContext.active) { return; }
+    const seconds = this.staticSession.config(this, 'auto-delay') || 0;
+    if (this.autoContext.active && seconds > 9) {
+      const currentTimeOutId = ++this.autoContext.timeOutId;
+      setTimeout(() => {
+        if (this.autoContext.active
+          && currentTimeOutId === this.autoContext.timeOutId
+          && this.nextScene) {
+          this.simulation.sceneFromIRI(this.nextScene, 'nextScene');
+        }
+      }, seconds);
+    }
   }
 
 }

src/app/renpi/rdf-schema.d.ts

@@ -13,9 +13,6 @@ export type CssLd = {
 };
 
 export type StaticSessionConfigLd = {
-  '@context': {
-    'targetType': { '@id': 'ren:targetType', '@type': '@id' },
-  },
   '@type': 'http://rengular.js.org/schema/StaticSessionAction',
   name: string,
   value: any,

src/app/shared/simple-quest-script.db.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 import {
-  GekijoLd, SceneLd, SimulationContextLd, CssLd,
+  GekijoLd, SceneLd, SimulationContextLd, CssLd, StaticSessionConfigLd,
 } from 'app/renpi/rdf-schema';
 import { SimpleEntry, SimpleNavi } from 'app/renpi';
 import { ChoiceMenuLd } from 'app/modules/choice-menu';
@@ -16,6 +16,7 @@ interface SimpleEntryLd extends SimpleEntry {
     '@type': 'http://rengular.js.org/schema/SimpleNavi';
     '@context': 'https://rengular.js.org/context/simple-navi.jsonld';
   };
+  staticSession: StaticSessionConfigLd[];
 }
 
 const TRANSLATION = {
@@ -50,7 +51,7 @@ const STYLES = {
     '@context': 'https://rengular.js.org/context/css.jsonld',
     '@type': 'StyleAction',
     matchMedia: 'ALL',
-    width: '330px',
+    width: '390px',
     position: 'absolute',
     marginTop: '-45px',
     right: '0',
@@ -86,6 +87,12 @@ const scene = [
       startScene: '/renpi/simple-quest/scene/2',
       labels: JSON.stringify(TRANSLATION.simpleEntry),
     },
+    staticSession: [{
+      '@type': 'http://rengular.js.org/schema/StaticSessionAction',
+      name: 'auto-delay',
+      value: '4000',
+      targetType: 'http://rengular.js.org/schema/OarsPocket',
+    }],
     '@reverse': {
       'schema:target': [{
         '@context': 'https://rengular.js.org/context/css.jsonld',

src/context/common.jsonld

@@ -46,7 +46,7 @@
     "Scene": {"@id": "ren:Scene"},
     "Gekijo": {"@id": "ren:Gekijo"},
     "program": {"@id": "ren:program"},
-    "staticSessions": {"@id": "ren:staticSessionConfig"},
+    "staticSession": {"@id": "ren:staticSessionConfig"},
     "GekijoDirective": {"@id": "ren:GekijoAction"},
     "3DModel": {"@id": "schema:3DModel"},
     "AMRadioChannel": {"@id": "schema:AMRadioChannel"},

src/context/simple-entry.jsonld

@@ -11,6 +11,10 @@
     "styleList": {"@id": "ren:styleList"},
     "matchMedia": {"@id": "ren:matchMedia"},
     "stylingTo": { "@id": "schema:target"},
-    "css": {"@id": "ren:CssStyle#"}
+    "css": {"@id": "ren:CssStyle#"},
+    "StaticSessionAction": {"@id": "ren:StaticSessionAction"},
+    "targetType": {"@id": "ren:targetType", "@type": "@id"},
+    "staticSession": {"@id": "ren:staticSessionConfig"},
+    "@vocab": "http://schema.org/"
   }
 }

src/styles.scss

@@ -6,6 +6,7 @@
 @import 'app/modules/choice-menu/choice-menu.component.scss-theme.scss';
 @import 'app/modules/scene/scene.component.scss-theme.scss';
 @import 'app/modules/simple-entry/simple-entry.component.scss-theme.scss';
+@import 'app/modules/oars-pocket/oars-pocket.component.scss-theme.scss';
 
 .homepage {
   // Include the common styles for Angular Material. We include this here so that you only
@@ -59,6 +60,7 @@
   @include choice-menu-component-theme($rengular-theme);
   @include scene-component-theme($rengular-theme);
   @include simple-entry-component-theme($rengular-theme);
+  @include oars-pocket-component-theme($rengular-theme);
 }
 
 /* You can add global styles to this file, and also import other style files */