feat: narrat editor updated to have a demo of themes (#172)

editor.code-workspace

@@ -0,0 +1,52 @@
+{
+  "folders": [
+    {
+      "name": "root",
+      "path": "."
+    },
+    {
+      "name": "editor",
+      "path": "packages/narrat-editor"
+    }
+  ],
+  "settings": {
+    "vitest.enable": true,
+    "editor.tabSize": 2,
+    "files.exclude": {
+      "**/dist/*": true,
+      "**/lib/*": true,
+      "node_modules/": true,
+      "packages/": true,
+      "docs/": true,
+      "demo-template": true,
+      "**/*.rpyc": true,
+      "**/*.rpa": true,
+      "**/*.rpymc": true,
+      "**/cache/": true,
+      "**/lib.ts": true
+    },
+    "search.exclude": {
+      "dist/": true,
+      "lib/": true,
+      "node_modules/": true,
+      "**/lib.ts": true
+    },
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "typescript.preferences.autoImportFileExcludePatterns": [
+      "@/lib/**",
+      "@/lib**",
+      "@/lib",
+      "src/lib",
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/lib/**"
+    ]
+  }
+}

packages/narrat-editor/src/components/NarratPreview.vue

@@ -1,14 +1,27 @@
 <template>
   <div class="narrat-preview relative">
-    <div class="controls absolute z-50">
+    <div class="controls absolute z-50 flex">
       <button
-        class="border border-cyan-400 mr-4"
+        class="border border-cyan-400 mr-4 p-2"
         v-for="control in controls"
         :key="control"
         @click="(e) => controlButtonPressed(control, e)"
       >
         {{ control }}
       </button>
+      <div class="flex flex-col w-30">
+        <span>Change Theme:</span>
+        <select name="themes" id="themes">
+          <option
+            v-for="theme in themeIds"
+            :key="theme.id"
+            @click="changeTheme(theme)"
+            :value="theme.id"
+          >
+            {{ theme.name }}
+          </option>
+        </select>
+      </div>
     </div>
     <div
       class="relative flex justify-center items-center w-full h-full"
@@ -18,13 +31,51 @@
 </template>
 
 <script setup lang="ts">
-import { startApp, handleHMR, NarratScript, stopApp, restartApp } from 'narrat';
-import { computed, onMounted, ref, watch } from 'vue';
+import {
+  startApp,
+  handleHMR,
+  NarratScript,
+  stopApp,
+  restartApp,
+  NarratThemesPlugin,
+  textOnlyTheme,
+  registerPlugin,
+} from 'narrat';
+import { computed, onMounted, ref, watch, shallowRef } from 'vue';
 import { FileState, useGameStore } from '@/stores/game-store';
+import { jrpgTheme } from '../themes/jrpg';
+
+export interface ThemeInfo {
+  name: string;
+  id: string;
+}
+const themeIds = ref<ThemeInfo[]>([
+  {
+    name: 'Default',
+    id: 'default',
+  },
+  {
+    name: 'Text Only',
+    id: 'narrat-text-only',
+  },
+  {
+    name: 'JRPG',
+    id: 'jrpg',
+  },
+]);
 
 const narratContainer = ref<HTMLDivElement | null>(null);
 const isNarratRunning = ref<boolean>(false);
+const chosenTheme = ref<string>('default');
 
+function changeTheme(theme: ThemeInfo) {
+  chosenTheme.value = theme.id;
+  if (themesPlugin.value) {
+    themesPlugin.value.changeTheme(theme.id);
+  }
+}
+
+const themesPlugin = shallowRef<NarratThemesPlugin | null>();
 const controls = ref([
   'reload',
   'stop',
@@ -47,12 +98,11 @@ const scripts = computed(() => gameStore.scripts);
 function controlButtonPressed(id: string, _event: MouseEvent) {
   switch (id) {
     case 'reload':
-      restartApp();
+      restartNarratGame();
       break;
     case 'stop':
       if (isNarratRunning.value) {
-        stopApp();
-        isNarratRunning.value = false;
+        stopNarratGame();
       }
       break;
     case 'start':
@@ -86,6 +136,13 @@ function launchNarratGame() {
   }
 }
 
+function stopNarratGame() {
+  stopApp();
+  isNarratRunning.value = false;
+}
+function restartNarratGame() {
+  restartApp();
+}
 function fileStateToNarratModule(fileState: FileState): {
   default: NarratScript;
 } {
@@ -99,6 +156,10 @@ function fileStateToNarratModule(fileState: FileState): {
 }
 
 function startNarratApp() {
+  themesPlugin.value = new NarratThemesPlugin({
+    themes: [textOnlyTheme, jrpgTheme],
+  });
+  registerPlugin(themesPlugin.value);
   startApp({
     configPath: 'data/config.yaml',
     debug: true,

packages/narrat-editor/src/style.css

@@ -1,3 +1,7 @@
+* {
+  transition: all 0.15s ease-in-out;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

packages/narrat-editor/src/themes/jrpg/index.ts

@@ -0,0 +1,31 @@
+import { Theme } from 'narrat';
+import JrpgCss from './jrpg.css?inline';
+
+export const jrpgTheme: Theme = {
+  id: 'jrpg',
+  css: JrpgCss,
+  extendedConfig: {
+    dialogPanel: {
+      width: 1200,
+      height: 300,
+      rightOffset: 50,
+      bottomOffset: 50,
+    },
+    layout: {
+      portraits: {
+        width: 200,
+        height: 300,
+        offset: {
+          landscape: {
+            right: -700,
+            bottom: 200,
+          },
+          portrait: {
+            right: 10,
+            bottom: 0,
+          },
+        },
+      },
+    },
+  },
+} as Theme;

packages/narrat-editor/src/themes/jrpg/jrpg.css

@@ -0,0 +1,79 @@
+#narrat-app {
+  --font-family: Noto Sans JP, sans-serif;
+  --text-color: white;
+  --blue-a: #0000a4;
+  --blue-b: #000028;
+  --bg-color: linear-gradient(0.5turn, #0000a4, #000028);
+  --dialog-box-bg: var(--bg-color);
+  --dialog-box-border: 0.25rem solid white;
+}
+
+.dialog {
+  overflow-y: hidden;
+}
+.dialog-box {
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+}
+
+.dialog-text {
+  font-size: 1.7rem !important;
+}
+
+.dialog-title {
+  font-size: 3rem;
+  text-decoration: underline;
+}
+
+.dialog-choices {
+  font-size: 1.5rem;
+}
+
+.dialog-box:not(:last-child) {
+  display: none;
+}
+.dialog-separator {
+  display: none;
+}
+
+.dialog-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-container {
+  padding-bottom: 10px !important;
+}
+
+.interact-button {
+  position: relative;
+  background: transparent;
+  color: transparent;
+  font-size: 1.7rem !important;
+  border: none;
+}
+.interact-button:after {
+  position: absolute;
+  right: 10px;
+  content: '>';
+  color: white;
+  font-size: 5rem;
+  animation: anim 0.5s infinite;
+}
+
+@keyframes anim {
+  0% {
+    transform: translateX(0px);
+  }
+  100% {
+    transform: translateX(10px);
+  }
+}
+.dialog-content {
+  /* text-align: center; */
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: none !important;
+}