More fixes more code more stuff

auto-imports.d.ts

@@ -5,24 +5,7 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const DComponent: typeof import('vue-facing-decorator')['Component']
-  const DRef: typeof import('vue-facing-decorator')['Ref']
-  const EditorComponent: typeof import('./src/components/EditorComponent.vue')['default']
   const EffectScope: typeof import('vue')['EffectScope']
-  const Emit: typeof import('vue-facing-decorator')['Emit']
-  const Hook: typeof import('vue-facing-decorator')['Hook']
-  const Inject: typeof import('vue-facing-decorator')['Inject']
-  const MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
-  const Model: typeof import('vue-facing-decorator')['Model']
-  const NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default']
-  const Prop: typeof import('vue-facing-decorator')['Prop']
-  const Provide: typeof import('vue-facing-decorator')['Provide']
-  const Setup: typeof import('vue-facing-decorator')['Setup']
-  const SidebarComponent: typeof import('./src/components/SidebarComponent.vue')['default']
-  const VModel: typeof import('vue-facing-decorator')['VModel']
-  const Vanilla: typeof import('vue-facing-decorator')['Vanilla']
-  const Vue: typeof import('vue-facing-decorator')['Vue']
-  const Watch: typeof import('vue-facing-decorator')['Watch']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
@@ -62,7 +45,6 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
-  const toNative: typeof import('vue-facing-decorator')['toNative']
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
@@ -90,24 +72,7 @@ declare global {
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
-    readonly DComponent: UnwrapRef<typeof import('vue-facing-decorator')['Component']>
-    readonly DRef: UnwrapRef<typeof import('vue-facing-decorator')['Ref']>
-    readonly EditorComponent: UnwrapRef<typeof import('./src/components/EditorComponent.vue')['default']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly Emit: UnwrapRef<typeof import('vue-facing-decorator')['Emit']>
-    readonly Hook: UnwrapRef<typeof import('vue-facing-decorator')['Hook']>
-    readonly Inject: UnwrapRef<typeof import('vue-facing-decorator')['Inject']>
-    readonly MarkdownRenderer: UnwrapRef<typeof import('./src/components/MarkdownRenderer.vue')['default']>
-    readonly Model: UnwrapRef<typeof import('vue-facing-decorator')['Model']>
-    readonly NavbarComponent: UnwrapRef<typeof import('./src/components/NavbarComponent.vue')['default']>
-    readonly Prop: UnwrapRef<typeof import('vue-facing-decorator')['Prop']>
-    readonly Provide: UnwrapRef<typeof import('vue-facing-decorator')['Provide']>
-    readonly Setup: UnwrapRef<typeof import('vue-facing-decorator')['Setup']>
-    readonly SidebarComponent: UnwrapRef<typeof import('./src/components/SidebarComponent.vue')['default']>
-    readonly VModel: UnwrapRef<typeof import('vue-facing-decorator')['VModel']>
-    readonly Vanilla: UnwrapRef<typeof import('vue-facing-decorator')['Vanilla']>
-    readonly Vue: UnwrapRef<typeof import('vue-facing-decorator')['Vue']>
-    readonly Watch: UnwrapRef<typeof import('vue-facing-decorator')['Watch']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
@@ -147,7 +112,6 @@ declare module 'vue' {
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly toNative: UnwrapRef<typeof import('vue-facing-decorator')['toNative']>
     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
@@ -169,24 +133,7 @@ declare module 'vue' {
 }
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
-    readonly DComponent: UnwrapRef<typeof import('vue-facing-decorator')['Component']>
-    readonly DRef: UnwrapRef<typeof import('vue-facing-decorator')['Ref']>
-    readonly EditorComponent: UnwrapRef<typeof import('./src/components/EditorComponent.vue')['default']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly Emit: UnwrapRef<typeof import('vue-facing-decorator')['Emit']>
-    readonly Hook: UnwrapRef<typeof import('vue-facing-decorator')['Hook']>
-    readonly Inject: UnwrapRef<typeof import('vue-facing-decorator')['Inject']>
-    readonly MarkdownRenderer: UnwrapRef<typeof import('./src/components/MarkdownRenderer.vue')['default']>
-    readonly Model: UnwrapRef<typeof import('vue-facing-decorator')['Model']>
-    readonly NavbarComponent: UnwrapRef<typeof import('./src/components/NavbarComponent.vue')['default']>
-    readonly Prop: UnwrapRef<typeof import('vue-facing-decorator')['Prop']>
-    readonly Provide: UnwrapRef<typeof import('vue-facing-decorator')['Provide']>
-    readonly Setup: UnwrapRef<typeof import('vue-facing-decorator')['Setup']>
-    readonly SidebarComponent: UnwrapRef<typeof import('./src/components/SidebarComponent.vue')['default']>
-    readonly VModel: UnwrapRef<typeof import('vue-facing-decorator')['VModel']>
-    readonly Vanilla: UnwrapRef<typeof import('vue-facing-decorator')['Vanilla']>
-    readonly Vue: UnwrapRef<typeof import('vue-facing-decorator')['Vue']>
-    readonly Watch: UnwrapRef<typeof import('vue-facing-decorator')['Watch']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
@@ -226,7 +173,6 @@ declare module '@vue/runtime-core' {
     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly toNative: UnwrapRef<typeof import('vue-facing-decorator')['toNative']>
     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     EditorComponent: typeof import('./src/components/EditorComponent.vue')['default']
+    GeneratorComponent: typeof import('./src/components/GeneratorComponent.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
     NavbarComponent: typeof import('./src/components/NavbarComponent.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

package.json

@@ -20,7 +20,6 @@
 		"quasar": "^2.13.1",
 		"reflect-metadata": "^0.1.13",
 		"vue": "^3.3.4",
-		"vue-facing-decorator": "^3.0.4",
 		"vue-router": "^4.2.5"
 	},
 	"devDependencies": {

pnpm-lock.yaml

@@ -29,9 +29,6 @@ dependencies:
   vue:
     specifier: ^3.3.4
     version: 3.3.8(typescript@5.2.2)
-  vue-facing-decorator:
-    specifier: ^3.0.4
-    version: 3.0.4(vue@3.3.8)
   vue-router:
     specifier: ^4.2.5
     version: 4.2.5(vue@3.3.8)
@@ -3326,14 +3323,6 @@ packages:
       - supports-color
     dev: true
 
-  /vue-facing-decorator@3.0.4(vue@3.3.8):
-    resolution: {integrity: sha512-Lk90PevJllB6qRRdLvLFjATZrv00nof1Ob6afavKL7Pc7V3eEin3vhdvEDRORdWKVvNoXhJbHejngWVuT0Pt0g==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      vue: 3.3.8(typescript@5.2.2)
-    dev: false
-
   /vue-router@4.2.5(vue@3.3.8):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:

src/App.vue

@@ -10,13 +10,10 @@
   </q-layout>
 </template>
 
-<script lang="ts">
-@DComponent
-export default class MainPage extends Vue {
-	leftDrawerOpen = false;
+<script setup lang="ts">
+const leftDrawerOpen = ref(false);
 
-	toggleLeftDrawer() {
-		this.leftDrawerOpen = !this.leftDrawerOpen;
-	}
-}
+const toggleLeftDrawer = () => {
+	leftDrawerOpen.value = !leftDrawerOpen.value;
+};
 </script>

src/components/EditorComponent.vue

@@ -118,36 +118,38 @@
   </q-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
-	games
+	games as parsed_games
 } from '@/js/ParseGamesJSON.js';
-import type BingoGame from '@/js/lib/BingoGame.ts';
+import BingoGame from '@/js/lib/BingoGame.ts';
 
-@DComponent
-export default class EditorComponent extends Vue {
-	games: BingoGame[] = Array.from(games.values());
+// All games
+const games = ref<BingoGame[]>(Array.from(parsed_games.values()));
 
-	selected_game: BingoGame | undefined = undefined;
+// Selected game
+const selected_game = ref<BingoGame | undefined>(undefined);
 
-	@Watch('selected_game')
-	onSelectedGameChange(newGame: BingoGame | undefined) {
-		if (newGame)
-			this.learn_more = true;
-	}
+// Popup open state
+const learn_more = ref<boolean>(false);
 
-	learn_more: boolean = false;
+// Search query
+const search = ref<string>('');
 
-	@Watch('learn_more')
-	onPopupClose(newValue: boolean) {
-		if (!newValue)
-			this.selected_game = undefined;
-	}
+// Filter games by search
+const filtered_games = computed(() => {
+	return games.value.filter(game => game.name.toLocaleLowerCase().includes(search.value.toLocaleLowerCase()));
+});
 
-	search: string = '';
+// On selected game change, open popup
+watch(selected_game, newGame => {
+	if (newGame)
+		learn_more.value = true;
+});
 
-	get filtered_games(): BingoGame[] {
-		return this.games.filter(game => game.name.toLocaleLowerCase().includes(this.search.toLocaleLowerCase()));
-	}
-}
+// On popup close, reset selected game
+watch(learn_more, newValue => {
+	if (!newValue)
+		selected_game.value = undefined;
+});
 </script>

src/components/GeneratorComponent.vue

@@ -0,0 +1,102 @@
+<template>
+  <q-tree
+    :nodes="nodes"
+    node-key="label"
+    tick-strategy="leaf"
+    v-model:selected="selected"
+    v-model:ticked="ticked"
+    v-model:expanded="expanded"
+  >
+    <template v-slot:header-goal="prop">
+      <div class="row items-center">
+        <div>{{ prop.node.label }}</div>
+        <q-badge outline v-for="tag in prop.node.goal.tags" :key="tag" :color="getColorForTag(tag)" class="q-ml-sm">
+          <div class="text-weight-bold">{{ tag }}</div>
+        </q-badge>
+      </div>
+    </template>
+  </q-tree>
+</template>
+
+<script setup lang="ts">
+import {
+	games
+} from '@/js/ParseGamesJSON.ts';
+import BingoCategory from '@/js/lib/BingoCategory.ts';
+import type BingoGoal from '@/js/lib/BingoGoal.ts';
+import BingoGoalList from '@/js/lib/BingoGoalList.ts';
+
+interface Node {
+	label: string;
+	header?: string;
+	children?: Node[];
+	goal?: BingoGoal;
+}
+
+const selected = ref([]);
+const ticked = ref([]);
+const expanded = ref([]);
+
+const getColorForTag = (tag: string) => {
+	switch (tag) {
+		case 'Easy':
+			return 'green';
+		case 'Normal':
+			return 'orange';
+		case 'Hard':
+			return 'red';
+		default:
+			return 'primary';
+	}
+};
+
+const nodes = computed(() => {
+	return games.map(game => {
+		const game_node: Node = {
+			label: game.name,
+			children: []
+		};
+
+		game_node.children = game.items.map(item => {
+			const group_node: Node = {
+				label: item.name,
+				children: []
+			};
+
+			if (item instanceof BingoCategory) {
+				group_node.children = item.goal_lists.map(goal_list => {
+					const goal_list_node: Node = {
+						label: goal_list.name,
+						children: goal_list.goals.map(goal => {
+							const goal_node: Node = {
+								label: goal.name,
+								header: 'goal',
+								goal
+							};
+
+							return goal_node;
+						})
+					};
+
+					return goal_list_node;
+				});
+			}
+			else if (item instanceof BingoGoalList) {
+				group_node.children = item.goals.map(goal => {
+					const goal_node: Node = {
+						label: goal.name,
+						header: 'goal',
+						goal
+					};
+
+					return goal_node;
+				});
+			}
+
+			return group_node;
+		});
+
+		return game_node;
+	});
+});
+</script>

src/components/MarkdownRenderer.vue

@@ -2,20 +2,21 @@
   <div v-html="markdown"></div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import MarkdownIt from 'markdown-it';
 const md = new MarkdownIt();
 
-@DComponent
-export default class MarkdownRenderer extends Vue {
-	@Prop({
-		default: false,
-		required: true
-	})
-		text!: string;
-
-	get markdown(): string {
-		return md.render(this.text);
+const {
+	text
+} = defineProps({
+	text: {
+		type: String,
+		required: true,
+		default: ''
 	}
-}
+});
+
+const markdown = computed(() => {
+	return md.render(text);
+});
 </script>

src/components/NavbarComponent.vue

@@ -13,12 +13,10 @@
   </q-header>
 </template>
 
-<script lang="ts">
-@DComponent({
-	emits: [ 'toggleLeftDrawer' ]
-})
-export default class NavbarComponent extends Vue {
-	@Emit
-	toggleLeftDrawer() {}
-}
+<script setup lang="ts">
+const emit = defineEmits([ 'toggleLeftDrawer' ]);
+
+const toggleLeftDrawer = () => {
+	emit('toggleLeftDrawer');
+};
 </script>

src/components/SidebarComponent.vue

@@ -20,63 +20,35 @@
   </q-drawer>
 </template>
 
-<script lang="ts">
-@DComponent
-export default class SidebarComponent extends Vue {
-	@Prop({
-		default: false,
-		required: true
-	})
-		drawer!: boolean;
+<script setup lang="ts">
+const {
+	drawer
+} = defineProps({
+	drawer: {
+		type: Boolean,
+		required: true,
+		default: false
+	}
+});
 
-	menuList = [
-		{
-			icon: 'home',
-			label: 'Home',
-			separator: true,
-			to: 'home'
-		},
-		{
-			icon: 'replay',
-			label: 'Generator',
-			separator: false,
-			to: 'generator'
-		},
-		{
-			icon: 'edit',
-			label: 'Editor',
-			separator: false,
-			to: 'editor'
-		}
-		// {
-		// 	icon: 'delete',
-		// 	label: 'Trash',
-		// 	separator: false
-		// },
-		// {
-		// 	icon: 'error',
-		// 	label: 'Spam',
-		// 	separator: true
-		// },
-		// {
-		// 	type: 'spacer'
-		// },
-		// {
-		// 	icon: 'settings',
-		// 	label: 'Settings',
-		// 	separator: false
-		// },
-		// {
-		// 	icon: 'feedback',
-		// 	label: 'Send Feedback',
-		// 	separator: false
-		// },
-		// {
-		// 	icon: 'help',
-		// 	iconColor: 'primary',
-		// 	label: 'Help',
-		// 	separator: false
-		// }
-	];
-}
+const menuList = [
+	{
+		icon: 'home',
+		label: 'Home',
+		separator: true,
+		to: 'home'
+	},
+	{
+		icon: 'replay',
+		label: 'Generator',
+		separator: false,
+		to: 'generator'
+	},
+	{
+		icon: 'edit',
+		label: 'Editor',
+		separator: false,
+		to: 'editor'
+	}
+];
 </script>

src/js/ParseGamesJSON.ts

@@ -7,7 +7,8 @@ import BingoGoal from '@/js/lib/BingoGoal.ts';
 import BingoCategory from '@/js/lib/BingoCategory.ts';
 import BingoGoalList from '@/js/lib/BingoGoalList.ts';
 
-export const games: Map<string, BingoGame> = new Map;
+export const games: BingoGame[] = [];
+// export const games: Map<string, BingoGame> = new Map;
 
 function run_old_format() {
 	for (const j_game of json) {
@@ -34,7 +35,8 @@ function run_old_format() {
 			}
 		}
 
-		games.set(game.name, game);
+		games.push(game);
+		// games.set(game.name, game);
 
 		// for (let i = 0; i < 3; i++)
 		// 	games.set(`${ game.name }-${ i }`, game);

src/js/lib/Test.ts

@@ -45,14 +45,14 @@ function test() {
 
 
 	// console.log(game);
-	const plain = Parser.to_json(game);
-	console.log('plain', plain);
+	// const plain = Parser.to_json(game);
+	// console.log('plain', plain);
 	// const plain = instanceToPlain(game);
 	// const text = JSON.stringify(plain);
 	// console.log(text);
 
-	const parsed = Parser.from_json(JSON.stringify(plain));
-	console.log('parsed', parsed);
+	// const parsed = Parser.from_json(JSON.stringify(plain));
+	// console.log('parsed', parsed);
 }
 
 test();

src/router/index.ts

@@ -4,6 +4,7 @@ import {
 // import HomeView from '../views/HomeView.vue'
 import MainPage from '@/views/MainPage.vue';
 import EditorPage from '@/views/EditorPage.vue';
+import GeneratorPage from '@/views/GeneratorPage.vue';
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,7 +22,7 @@ const router = createRouter({
 		{
 			path: '/generator',
 			name: 'generator',
-			component: EditorPage
+			component: GeneratorPage
 		}
 		// {
 		//   path: '/about',

src/views/GeneratorPage.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="q-pa-md q-gutter-md">
+    <q-card class="q-mx-auto" style="max-width: 800px; height: 800px;">
+      <q-scroll-area style="height: 100%;">
+        <GeneratorComponent />
+      </q-scroll-area>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/MainPage.vue

@@ -3,6 +3,4 @@
 </template>
 
 <script setup lang="ts">
-import '@/js/lib/Test.ts';
-import '@/js/ParseGamesJSON.ts';
 </script>

tsconfig.app.json

@@ -2,12 +2,11 @@
 	"extends": "@vue/tsconfig/tsconfig.dom.json",
 	"include": [
 		"env.d.ts",
-		"auto-imports.d.ts",
 		"components.d.ts",
+		"auto-imports.d.ts",
 		"src/**/*",
 		"src/**/*.vue",
-		"src/**/*.json",
-		"src/**/*.md"
+		"src/**/*.json"
 	],
 	"exclude": [
 		"src/**/__tests__/*"
@@ -23,6 +22,7 @@
 		"target": "ESNext",
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-		"allowImportingTsExtensions": true
+		"allowImportingTsExtensions": true,
+		"emitDeclarationOnly": true
 	},
 }

vite.config.ts

@@ -37,32 +37,7 @@ export default defineConfig({
 			imports: [
 				// presets
 				'vue',
-				'vue-router',
-				{
-					'vue-facing-decorator': [
-						[
-							'Component',
-							'DComponent'
-						],
-						[
-							'Ref',
-							'DRef'
-						],
-						'Setup',
-						'Watch',
-						'Prop',
-						'Provide',
-						'Inject',
-						'Emit',
-						'VModel',
-						'Model',
-						'Vanilla',
-						'Hook',
-
-						'toNative',
-						'Vue'
-					]
-				}
+				'vue-router'
 			],
 			dirs: [ './src/components/**' ],
 			dts: true,