themeing

nakamaorg · Mar 24, 2024 · 6efb8af · 6efb8af
1 parent 7fc560c
commit 6efb8af
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 20 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -1,21 +1,47 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue';
-import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
 import { useAppStore } from '@/state/stores/app.store';
+import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
+
+const store = useAppStore();
 
-const MONACO_EDITOR_OPTIONS = {
-  automaticLayout: true
+const options = {
+  language: 'nkm',
+  automaticLayout: true,
+  smoothScrolling: true
 };
 
-const store = useAppStore();
-const editorRef = shallowRef();
-const handleMount = (editor: any) => (editorRef.value = editor);
+function ready(_: unknown, monaco: any) {
+  monaco.languages.register({
+    id: 'nkm',
+    extensions: ['.nkm'],
+    aliases: ['LangKama']
+  });
+
+  monaco.languages.setLanguageConfiguration('nkm', {
+    comments: { lineComment: 'bs' },
+  });
+
+  monaco.languages.setMonarchTokensProvider('nkm', {
+    tokenizer: {
+      root: [
+        [/bs.*/, 'comment'],
+        [/\".*?\"/, 'string'],
+        [/\b\d+(\.\d+)?\b/, 'number'],
+        [/\b(W|L)\b/, 'constant.language.boolean'],
+        [/\b(is|sike|jk|big if true|let me cook|reda|cook until|hear me out|a sa7 hear me out)\b/, 'keyword'],
+      ]
+    }
+  })
 
-function formatCode() {
-  editorRef.value?.getAction('editor.action.formatDocument').run()
+  // monaco.editor.defineTheme('langkama', {
+  //   base: 'vs-dark',
+  //   inherit: true,
+  //   rules: [{ token: 'keyword', foreground: '#000ed1', fontStyle: 'bold' }],
+  //   colors: {}
+  // });
 }
 </script>
 
 <template>
-  <vue-monaco-editor v-model:value="store.code" theme="vs-dark" :options="MONACO_EDITOR_OPTIONS" @mount="handleMount" />
+  <vue-monaco-editor v-model:value="store.code" language="nkm" theme="vs-dark" :options="options" @mount="ready" />
 </template>
diff --git a/src/components/Head.vue b/src/components/Head.vue
@@ -56,8 +56,8 @@ function run(e: MouseEvent): void {
           <Button v-tooltip.bottom="'Clear'" :disabled="isEmpty()" icon="pi pi-delete-left" severity="secondary"
             aria-label="New" @click="clear" />
 
-          <Button v-tooltip.bottom="'Run'" :disabled="isEmpty()" icon="pi pi-play" aria-label="Interpret"
-            @click="run" />
+          <Button v-tooltip.bottom="'Run'" :disabled="isEmpty()" :loading="store.interpreting" icon="pi pi-play"
+            aria-label="Interpret" class="run" @click="run" />
         </div>
       </template>
     </Menubar>
@@ -95,6 +95,15 @@ function run(e: MouseEvent): void {
     }
 
     &__end {
+      .run {
+        border-color: var(--color-primary);
+        background-color: var(--color-primary);
+
+        &:hover {
+          background-color: hsl(var(--color-primary-hsl), 30%);
+        }
+      }
+
       >* {
         margin-left: 10px;
       }

diff --git a/src/core/types/app-store.type.ts b/src/core/types/app-store.type.ts
@@ -9,6 +9,12 @@ import type { TNullable } from './nullable.type';
  */
 export type TAppStore = {
 
+  /**
+   * @description
+   * Whether the code is being interpreted at the moment
+   */
+  interpreting: boolean
+
   /**
    * @description
    * The source code

diff --git a/src/state/effects/app.effect.ts b/src/state/effects/app.effect.ts
@@ -25,6 +25,7 @@ export function initAppEffect() {
             .on(LangKamaEvent.Stdout, (stdout: string) => {
               if (!halt) {
                 const now = performance.now() - snapshot;
+
                 store.log({ time: now, type: LogType.Out, message: stdout });
                 snapshot = performance.now();
               }
@@ -35,21 +36,41 @@ export function initAppEffect() {
               if (!halt) {
                 halt = true;
                 const now = performance.now() - snapshot;
-                store.log({ time: now, type: LogType.Error, message: error.toString() });
-                store.setStatus(LogType.Error, `[ERROR] ${error.name}`);
+
+                store.onError(now, error);
                 snapshot = performance.now();
               }
             })
 
             .on(LangKamaEvent.Success, () => {
               if (!halt) {
                 const now = performance.now() - snapshot;
-                store.log({ time: now, type: LogType.Info, message: 'LangKama script interpreted successfully' })
-                store.setStatus(LogType.Info, '[Info] LangKama script interpreted successfully');
+
+                store.onSuccess(now);
                 snapshot = performance.now();
               }
             })
             .interpret(store.code);
+
+          break;
+        }
+
+        case 'onSuccess': {
+          const [time] = args;
+
+          store.log({ time, type: LogType.Info, message: 'LangKama script interpreted successfully' });
+          store.setStatus(LogType.Info, '[Info] LangKama script interpreted successfully');
+
+          break;
+        }
+
+        case 'onError': {
+          const [time, error] = args;
+
+          store.log({ time: time, type: LogType.Error, message: error.toString() });
+          store.setStatus(LogType.Error, `[ERROR] ${error.name}`);
+
+          break;
         }
       }
     });

diff --git a/src/state/stores/app.store.ts b/src/state/stores/app.store.ts
@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia';
+import type { LangKamaError } from '@nakamaorg/langkama';
+
 import type { TLog } from '@/core/types/log.type';
 import type { LogType } from '@/core/enums/log-type.enum';
 import type { TAppStore } from '@/core/types/app-store.type';
@@ -7,9 +9,21 @@ import type { TAppStore } from '@/core/types/app-store.type';
 
 export const useAppStore = defineStore('app', {
   state: (): TAppStore => ({
-    code: '',
+    code: `hear me out x is bruh;
+hear me out true is W;
+hear me out false is L;
+
+hear me out age is 30;
+hear me out minAge is 18;
+hear me out maxAge is 40;
+
+loncina("age(" + bait(age) + ") is 18: " + bait(age = 18) + ".");
+loncina("age(" + bait(age) + ") is not 18: " + bait(!(age = 18)) + ".");
+loncina("age(" + bait(age) + ") is greater than minAge(" + bait(minAge) + "): " + bait(age > minAge) + ".");
+loncina("age(" + bait(age) + ") is lower than maxAge(" + bait(maxAge) + "): " + bait(age < maxAge) + ".");`,
     logs: [],
-    status: null
+    status: null,
+    interpreting: false
   }),
 
   actions: {
@@ -48,6 +62,29 @@ export const useAppStore = defineStore('app', {
      * @description
      * Editor run notification
      */
-    onRun(): void { },
+    onRun(): void {
+      this.interpreting = true;
+    },
+
+    /**
+     * @description
+     * interpretation failure notification
+     *
+     * @param lastSnapshot The timestamp of the last execution
+     * @param error The raised error
+     */
+    onError(lastSnapshot: number, error: LangKamaError): void {
+      this.interpreting = false;
+    },
+
+    /**
+     * @description
+     * interpretation success notification
+     *
+     * @param lastSnapshot The timestamp of the last execution
+     */
+    onSuccess(lastSnapshot: number): void {
+      this.interpreting = false;
+    }
   }
 });
diff --git a/src/theme/reset/_index.scss b/src/theme/reset/_index.scss
@@ -1,4 +1,5 @@
 @use './font';
 @use './page';
 @use './color';
-@use './spacing';
+@use './spacing';
+@use './tooltip';
diff --git a/src/theme/reset/_tooltip.scss b/src/theme/reset/_tooltip.scss
@@ -0,0 +1,11 @@
+.p-tooltip {
+  font-size: 14px;
+
+  .p-tooltip-arrow {
+    border-bottom-color: hsl(var(--color-primary-hsl), 60%);
+  }
+
+  .p-tooltip-text {
+    background-color: hsl(var(--color-primary-hsl), 60%);
+  }
+}