Add feature checklist from #73

configschema.d.ts

@@ -43,4 +43,9 @@ export interface Configschema {
       key: string;
     }[];
   } | null;
+  checklist: {
+    enabled: boolean;
+    items?: string[] | null;
+    forceCheckBeforeStartTimer: boolean;
+  };
 }

configschema.json

@@ -208,12 +208,45 @@
           "type": "null"
         }
       ]
+    },
+    "checklist": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean",
+          "default": false
+        },
+        "items": {
+          "oneOf": [
+            {
+              "type": "array",
+              "uniqueItems": true,
+              "items": {
+                "type": "string"
+              }
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "forceCheckBeforeStartTimer": {
+          "type": "boolean",
+          "default": false
+        }
+      },
+      "required": [
+        "enabled",
+        "forceCheckBeforeStartTimer"
+      ]
     }
   },
   "required": [
     "language",
     "twitch",
     "schedule",
-    "oengus"
+    "oengus",
+    "checklist"
   ]
 }

package.json

@@ -173,6 +173,12 @@
         "width": 3,
         "file": "alert-dialog.html",
         "dialog": true
+      },
+      {
+        "name": "checklist",
+        "title": "Checklist",
+        "file": "checklist.html",
+        "width": 3
       }
     ]
   }

schemas/checklist.d.ts

@@ -0,0 +1,11 @@
+/* tslint:disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type Checklist = {
+    name: string;
+    complete: boolean;
+  }[];

schemas/checklist.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "http://json-schema.org/draft-04/schema",
+
+	"type": "array",
+	"items": {
+		"type": "object",
+		"additionalProperties": false,
+		"properties": {
+			"name": {"type": "string"},
+			"complete": {"type": "boolean"}
+		},
+		"required": ["name", "complete"]
+	}
+}

schemas/index.d.ts

@@ -1,3 +1,4 @@
+export * from './checklist';
 export * from './defaultSetupTime';
 export * from './horaroImportSavedOpts';
 export * from './horaroImportStatus';

src/dashboard/_misc/components/RunList/RunPanel.vue

@@ -152,6 +152,8 @@ export default class extends Vue {
           dialog.openDialog({ name: 'NoTwitchGame' });
         }
       }
+
+      await nodecg.sendMessage('resetChecklist');
     } catch (err) {
       // catch
     }

src/dashboard/checklist/main.ts

@@ -0,0 +1,17 @@
+/* eslint no-new: off, @typescript-eslint/explicit-function-return-type: off */
+
+import Vue from 'vue';
+import i18n from '../_misc/i18n';
+import vuetify from '../_misc/vuetify';
+import App from './main.vue';
+import waitForReplicants from './store';
+
+waitForReplicants().then((store) => {
+  new Vue({
+    vuetify,
+    i18n,
+    store,
+    el: '#App',
+    render: (h) => h(App),
+  });
+});

src/dashboard/checklist/main.vue

@@ -0,0 +1,75 @@
+<i18n>
+{
+  "en": {
+    "panelTitle": "Checklist",
+    "notEnabled": "Checklist is not enabled.",
+    "emptyItems": "Checklist is empty."
+  },
+  "ja": {
+    "panelTitle": "チェックリスト",
+    "notEnabled": "チェックリストが有効になっていません。",
+    "emptyItems": "チェックリストが空です。"
+  }
+}
+</i18n>
+
+<template>
+  <v-app>
+    <div v-if="!config.enabled">
+      {{ $t('notEnabled') }}
+    </div>
+    <div v-else>
+      <div v-if="checklist.length === 0">
+        {{ $t('emptyItems') }}
+      </div>
+      <v-switch
+        v-for="checkbox in checklist"
+        :key="checkbox.name"
+        :label="checkbox.name"
+        :value="true"
+        :input-value="checkbox.complete"
+        @change="toggleCheckbox(checkbox.name, $event !== null)"
+      />
+    </div>
+  </v-app>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { State } from 'vuex-class';
+import { CheckList } from 'types';
+import { Configschema } from 'configschema';
+
+@Component({
+  components: {
+  },
+})
+export default class extends Vue {
+  @State checklist!: CheckList;
+
+  get config(): Configschema['checklist'] {
+    return (nodecg.bundleConfig as Configschema).checklist;
+  }
+
+  async toggleCheckbox(name: string, complete: boolean): Promise<void> {
+    try {
+      await nodecg.sendMessage('toggleCheckbox', { name, complete });
+      // checklist change successful
+    } catch (err) {
+      // catch
+    }
+  }
+
+  mounted(): void {
+    if (window.frameElement?.parentElement) {
+      window.frameElement.parentElement.setAttribute(
+        'display-title',
+        this.$t('panelTitle') as string,
+      );
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/dashboard/checklist/store.ts

@@ -0,0 +1,37 @@
+import clone from 'clone';
+import type { ReplicantBrowser } from 'nodecg/types/browser';
+import type { Checklist } from 'schemas';
+import Vue from 'vue';
+import Vuex, { Store } from 'vuex';
+
+Vue.use(Vuex);
+
+// Replicants and their types
+const reps: {
+  checklist: ReplicantBrowser<Checklist>;
+  [k: string]: ReplicantBrowser<unknown>;
+} = {
+  checklist: nodecg.Replicant('checklist'),
+};
+
+const store = new Vuex.Store({
+  state: {
+    checklist: [] as Checklist,
+  },
+  mutations: {
+    setState(state, { name, val }): void {
+      Vue.set(state, name, val);
+    },
+  },
+});
+
+Object.keys(reps).forEach((key) => {
+  reps[key].on('change', (val) => {
+    store.commit('setState', { name: key, val: clone(val) });
+  });
+});
+
+export default async (): Promise<Store<Record<string, unknown>>> => {
+  await NodeCG.waitForReplicants(...Object.keys(reps).map((key) => reps[key]));
+  return store;
+};

src/dashboard/run-player/main.vue

@@ -125,6 +125,7 @@ export default class extends Vue {
     if (confirm) {
       try {
         await nodecg.sendMessage('returnToStart');
+        await nodecg.sendMessage('resetChecklist');
       } catch (err) {
         // run removal unsuccessful
       }
@@ -141,6 +142,7 @@ export default class extends Vue {
             dialog.openDialog({ name: 'NoTwitchGame' });
           }
         }
+        await nodecg.sendMessage('resetChecklist');
       } catch (err) {
         // run change unsuccessful
       }

src/dashboard/timer/components/StartButton.vue

@@ -22,7 +22,7 @@
       <template v-slot:activator="{ on }">
         <span v-on="on">
           <v-btn
-            :disabled="state === 'finished'"
+            :disabled="state === 'finished' || (isEnabledForceCheck && !checklistComplete)"
             @click="button"
           >
             <v-icon v-if="state === 'running'">
@@ -42,18 +42,41 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import { Vue, Component, Watch } from 'vue-property-decorator';
 import { State } from 'vuex-class';
-import { Timer } from 'schemas';
+import { Timer, Checklist } from 'schemas';
+import { Configschema } from 'configschema';
 
 @Component
 export default class extends Vue {
   @State timer!: Timer;
+  @State checklist!: Checklist;
+
+  checklistComplete = false;
 
   get state(): string {
     return this.timer.state;
   }
 
+  get config(): Configschema['checklist'] {
+    return (nodecg.bundleConfig as Configschema).checklist;
+  }
+
+  get isEnabledForceCheck(): boolean {
+    return this.config.enabled
+    && this.checklist.length !== 0
+    && this.config.forceCheckBeforeStartTimer;
+  }
+
+  @Watch('checklist', { immediate: true })
+  onChecklistChange(val: Checklist): void {
+    this.updateChecklistComplete(val);
+  }
+
+  updateChecklistComplete(checklist: Checklist): void {
+    this.checklistComplete = checklist.every((checkbox) => checkbox.complete);
+  }
+
   async button(): Promise<void> {
     try {
       if (this.state === 'stopped' || this.state === 'paused') {

src/dashboard/timer/store.ts

@@ -1,6 +1,6 @@
 import clone from 'clone';
 import type { ReplicantBrowser } from 'nodecg/types/browser';
-import type { RunDataActiveRun, Timer, TimerChangesDisabled } from 'schemas';
+import type { RunDataActiveRun, Timer, TimerChangesDisabled, Checklist } from 'schemas';
 import Vue from 'vue';
 import Vuex, { Store } from 'vuex';
 
@@ -11,11 +11,13 @@ const reps: {
   runDataActiveRun: ReplicantBrowser<RunDataActiveRun>;
   timer: ReplicantBrowser<Timer>;
   timerChangesDisabled: ReplicantBrowser<TimerChangesDisabled>;
+  checklist: ReplicantBrowser<Checklist>;
   [k: string]: ReplicantBrowser<unknown>;
 } = {
   runDataActiveRun: nodecg.Replicant('runDataActiveRun'),
   timer: nodecg.Replicant('timer'),
   timerChangesDisabled: nodecg.Replicant('timerChangesDisabled'),
+  checklist: nodecg.Replicant('checklist'),
 };
 
 // Types for mutations below