various TS build error/warning fixes

NiloCK · NiloCK · commit aed701553967 · 2025-03-25T13:07:06.000-03:00
diff --git a/packages/courses/package.json b/packages/courses/package.json
@@ -1,11 +1,13 @@
 {
     "name": "@vue-skuilder/courses",
     "version": "0.1.0",
+    "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "src/assets"
     ],
     "scripts": {
         "build": "yarn clean && vite build",
diff --git a/packages/courses/src/chess/chessground/chessground.ts b/packages/courses/src/chess/chessground/chessground.ts
@@ -45,7 +45,7 @@ export function Chessground(element: HTMLElement, config?: Config): Api {
     state.drawable.prevSvgHash = '';
     updateBounds(state);
     redrawNow(false);
-    events.bindBoard(state, onResize);
+    events.bindBoard(state);
     if (!prevUnbind) state.dom.unbind = events.bindDocument(state, onResize);
     state.events.insert && state.events.insert(elements);
     return state;
diff --git a/packages/courses/src/chess/chessground/events.ts b/packages/courses/src/chess/chessground/events.ts
@@ -8,13 +8,13 @@ import * as cg from './types';
 type MouchBind = (e: cg.MouchEvent) => void;
 type StateMouchBind = (d: State, e: cg.MouchEvent) => void;
 
-export function bindBoard(s: State, onResize: () => void): void {
+export function bindBoard(s: State): void {
   const boardEl = s.dom.elements.board;
 
   // if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(s.dom.elements.wrap);
 
   if (s.disableContextMenu || s.drawable.enabled) {
-    boardEl.addEventListener('contextmenu', e => e.preventDefault());
+    boardEl.addEventListener('contextmenu', (e) => e.preventDefault());
   }
 
   if (s.viewOnly) return;
@@ -36,51 +36,53 @@ export function bindDocument(s: State, onResize: () => void): cg.Unbind {
 
   // Old versions of Edge and Safari do not support ResizeObserver. Send
   // chessground.resize if a user action has changed the bounds of the board.
-  if (!('ResizeObserver' in window)) unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
+  if (!('ResizeObserver' in window))
+    unbinds.push(unbindable(document.body, 'chessground.resize', onResize));
 
   if (!s.viewOnly) {
     const onmove = dragOrDraw(s, drag.move, draw.move);
     const onend = dragOrDraw(s, drag.end, draw.end);
 
     for (const ev of ['touchmove', 'mousemove'])
       unbinds.push(unbindable(document, ev, onmove as EventListener));
-    for (const ev of ['touchend', 'mouseup']) unbinds.push(unbindable(document, ev, onend as EventListener));
+    for (const ev of ['touchend', 'mouseup'])
+      unbinds.push(unbindable(document, ev, onend as EventListener));
 
     const onScroll = () => s.dom.bounds.clear();
     unbinds.push(unbindable(document, 'scroll', onScroll, { capture: true, passive: true }));
     unbinds.push(unbindable(window, 'resize', onScroll, { passive: true }));
   }
 
-  return () => unbinds.forEach(f => f());
+  return () => unbinds.forEach((f) => f());
 }
 
 function unbindable(
   el: EventTarget,
   eventName: string,
   callback: EventListener,
-  options?: AddEventListenerOptions,
+  options?: AddEventListenerOptions
 ): cg.Unbind {
   el.addEventListener(eventName, callback, options);
   return () => el.removeEventListener(eventName, callback, options);
 }
 
 const startDragOrDraw =
   (s: State): MouchBind =>
-    e => {
-      if (s.draggable.current) drag.cancel(s);
-      else if (s.drawable.current) draw.cancel(s);
-      else if (e.shiftKey || isRightButton(e)) {
-        if (s.drawable.enabled) draw.start(s, e);
-      } else if (!s.viewOnly) {
-        if (s.dropmode.active) drop(s, e);
-        else drag.start(s, e);
-      }
-    };
+  (e) => {
+    if (s.draggable.current) drag.cancel(s);
+    else if (s.drawable.current) draw.cancel(s);
+    else if (e.shiftKey || isRightButton(e)) {
+      if (s.drawable.enabled) draw.start(s, e);
+    } else if (!s.viewOnly) {
+      if (s.dropmode.active) drop(s, e);
+      else drag.start(s, e);
+    }
+  };
 
 const dragOrDraw =
   (s: State, withDrag: StateMouchBind, withDraw: StateMouchBind): MouchBind =>
-    e => {
-      if (s.drawable.current) {
-        if (s.drawable.enabled) withDraw(s, e);
-      } else if (!s.viewOnly) withDrag(s, e);
-    };
+  (e) => {
+    if (s.drawable.current) {
+      if (s.drawable.enabled) withDraw(s, e);
+    } else if (!s.viewOnly) withDrag(s, e);
+  };
diff --git a/packages/courses/src/chess/questions/puzzle/puzzle.vue b/packages/courses/src/chess/questions/puzzle/puzzle.vue
@@ -145,7 +145,11 @@ export default defineComponent({
       });
     };
 
-    const handlePromotion = (promotionPiece: PromotionPiece) => {
+    const handlePromotion = (promotionPiece: PromotionPiece | string) => {
+      if (promotionPiece !== 'q' && promotionPiece !== 'r' && promotionPiece !== 'b' && promotionPiece !== 'n') {
+        viewableUtils.logger.error(`Invalid promotion piece: ${promotionPiece}`);
+        return;
+      }
       if (!promotionMove.value) return;
 
       viewableUtils.logger.log(`promoting to ${promotionPiece}`);
diff --git a/packages/courses/src/default/questions/fillIn/fillIn.vue b/packages/courses/src/default/questions/fillIn/fillIn.vue
@@ -1,7 +1,9 @@
 <template>
   <div data-viewable="FillInView">
     <audio-auto-player v-if="hasAudio" :src="audioURL" />
-    <img v-if="hasImage" :src="imageURL" />
+    <template v-if="hasImage">
+      <img v-for="(url, index) in imageURLs" :key="index" :src="url" />
+    </template>
     <!-- Add v-if to prevent undefined markdown -->
     <markdown-renderer v-if="markdownText" :md="markdownText" />
     <radio-multiple-choice v-if="question?.options" :choice-list="truncatedOptions" />
@@ -20,13 +22,7 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, ref, computed, PropType, onMounted, onUnmounted, watch } from 'vue';
-import {
-  useViewable,
-  useQuestionView,
-  AudioAutoPlayer,
-  RadioMultipleChoice,
-  MarkdownRenderer,
-} from '@vue-skuilder/common-ui';
+import { useViewable, useQuestionView, AudioAutoPlayer, RadioMultipleChoice } from '@vue-skuilder/common-ui';
 import _ from 'lodash';
 import { BlanksCard } from './index';
 import gradeSpellingAttempt from './blanksCorrection';
@@ -100,7 +96,7 @@ export default defineComponent({
 
     const hasImage = computed(() => !!props.data[0]['image-1']);
 
-    const imageURL = computed(() => {
+    const imageURLs = computed(() => {
       if (!hasImage.value) return [''];
 
       const urls: string[] = [];
@@ -236,7 +232,7 @@ export default defineComponent({
       question,
       truncatedOptions,
       hasImage,
-      imageURL,
+      imageURLs,
       hasAudio,
       audioURL,
       obscuredAnswer,
diff --git a/packages/courses/src/default/questions/fillIn/index.ts b/packages/courses/src/default/questions/fillIn/index.ts
@@ -1,4 +1,4 @@
-import { Question, splitByDelimiters } from '@vue-skuilder/common-ui';
+import { Question, splitByDelimiters, containsComponent } from '@vue-skuilder/common-ui';
 import { Answer, RadioMultipleChoiceAnswer, DataShape } from '@vue-skuilder/common';
 import { Validator, ViewData } from '@vue-skuilder/common';
 import { randomInt } from '@/math/utility';
@@ -24,6 +24,7 @@ export const BlanksCardDataShapes: DataShape[] = [
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-expect-error
 const val: Validator = {
   test: (input) => {
     console.log(`Testing md input: ${input}`);
@@ -56,6 +57,25 @@ export interface FillInSection {
   text: string;
 }
 
+function splitText(
+  text: string,
+  leftBound: string,
+  rightBound: string
+): {
+  left: string;
+  middle: string;
+  right: string;
+} {
+  const leftSplit = text.split(leftBound);
+  const left = leftSplit[0];
+
+  const rightSplit = leftSplit[1].split(rightBound);
+  const middle = rightSplit[0];
+  const right = rightSplit[1];
+
+  return { left, middle, right };
+}
+
 export class BlanksCard extends Question {
   public static dataShapes = BlanksCardDataShapes;
   public static views = [FillInView];
diff --git a/packages/courses/src/math/questions/addition/horizontal.vue b/packages/courses/src/math/questions/addition/horizontal.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const viewableUtils = useViewable(props, emit, 'AdditionHorizontal');
-    const questionUtils = useQuestionView<SingleDigitAdditionQuestion>(viewableUtils, props.modifyDifficulty);
+    const questionUtils = useQuestionView<SingleDigitAdditionQuestion>(viewableUtils);
 
     const answer = ref('');
 
diff --git a/packages/courses/src/math/questions/addition/verbal.vue b/packages/courses/src/math/questions/addition/verbal.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const viewableUtils = useViewable(props, emit, 'VerbalAddition');
-    const questionUtils = useQuestionView<SingleDigitAdditionQuestion>(viewableUtils, props.modifyDifficulty);
+    const questionUtils = useQuestionView<SingleDigitAdditionQuestion>(viewableUtils);
 
     const answer = ref('');
 
diff --git a/packages/courses/src/math/questions/angleCategorize/angleCategorize.vue b/packages/courses/src/math/questions/angleCategorize/angleCategorize.vue
@@ -4,7 +4,7 @@
       <h2>What kind of angle is this?</h2>
       <canvas ref="canvasRef" width="300" height="300"> </canvas>
 
-      <radio-multiple-choice :choice-list="question.answers" :mouse-trap="mouseTrap" />
+      <radio-multiple-choice :choice-list="question.answers" />
     </template>
   </div>
 </template>
@@ -13,7 +13,7 @@
 import { defineComponent, ref, computed, onMounted, PropType } from 'vue';
 import { RadioMultipleChoice, useViewable, useQuestionView } from '@vue-skuilder/common-ui';
 import { AngleCategorize, AngleCategories } from './index';
-import { ViewData } from '@/base-course/Interfaces/ViewData';
+import { ViewData } from '@vue-skuilder/common';
 import { randomInt } from '../../utility';
 
 export default defineComponent({
@@ -37,7 +37,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const viewableUtils = useViewable(props, emit, 'AngleCategorizeV');
-    const questionUtils = useQuestionView<AngleCategorize>(viewableUtils, props.modifyDifficulty);
+    const questionUtils = useQuestionView<AngleCategorize>(viewableUtils);
     const canvasRef = ref<HTMLCanvasElement | null>(null);
 
     // Initialize question immediately
diff --git a/packages/courses/src/math/questions/countBy/default.vue b/packages/courses/src/math/questions/countBy/default.vue
@@ -5,9 +5,9 @@
       >s:
     </div>
 
-    <input type="text" disabled class="correct" :value="question?.answer[0] - question?.n" />,
+    <input type="text" disabled class="correct" :value="question.answer[0] - question.n" />,
 
-    <span v-for="(a, i) in question?.answer" :key="i">
+    <span v-for="(a, i) in question.answer" :key="i">
       <input
         :id="`input${i}`"
         :ref="`input${i}`"
@@ -17,7 +17,7 @@
         :autofocus="i === 0"
         @keyup="track(i)"
       />
-      <span v-if="i !== question?.answer.length - 1">, </span>
+      <span v-if="i !== question.answer.length - 1">, </span>
     </span>
   </div>
 </template>
@@ -53,7 +53,9 @@ export default defineComponent({
     questionUtils.question.value = new CountBy(props.data);
 
     // Expose the question directly for template access
-    const question = computed(() => questionUtils.question.value);
+    const question = computed(() =>
+      questionUtils.question.value ? questionUtils.question.value : new CountBy(props.data)
+    );
 
     const track = (n: number): void => {
       console.log(`change in ${n}!
diff --git a/packages/courses/src/math/questions/supplementaryAngles/index.ts b/packages/courses/src/math/questions/supplementaryAngles/index.ts
@@ -48,7 +48,6 @@ export class SupplementaryAngles extends Question {
   public angles: number[] = [];
   public targetAngleIndex: number;
   public angleCount: number;
-  public answers: string[];
 
   constructor(data: ViewData[]) {
     super(data);
diff --git a/packages/courses/src/pitch/questions/indentify/index.ts b/packages/courses/src/pitch/questions/indentify/index.ts
@@ -20,26 +20,19 @@ const fields: FieldDefinition[] = [
     type: FieldType.STRING,
     validator: {
       test: (value) => {
-        const e = new Enumerator(Chroma);
-        e.moveFirst();
-        while (!e.atEnd()) {
-          const c = e.item();
-
-          if (c === value) {
-            return {
-              status: Status.ok,
-              msg: '',
-            };
-          }
-
-          e.moveNext();
+        // Check if the value is a valid Chroma enum value
+        if (Object.values(Chroma).includes(value as Chroma)) {
+          return {
+            status: Status.ok,
+            msg: '',
+          };
         }
         return {
           status: Status.error,
           msg: "That's not a chroma!",
         };
       },
-      instructions: 'Awefjiop',
+      instructions: 'Enter a valid musical note (A-G)',
     },
   },
 ];
diff --git a/packages/courses/src/sightsing/questions/IdentifyKey/IdentifyKey.vue b/packages/courses/src/sightsing/questions/IdentifyKey/IdentifyKey.vue
@@ -1,7 +1,7 @@
 <template>
   <div data-viewable="IdentifyKeyView">
     <template v-if="question">
-      <MusicScoreRenderer :key-signature="`X:1\nK:${question.key}\n||`" />
+      <MusicScoreRenderer :key-signature="`X:1\nK:${question.key}\n||`" abc-string="''" />
       This signature is for the major key: _____
       <RadioMultipleChoice :choice-list="choices" />
     </template>
diff --git a/packages/courses/src/typing/questions/falling-letters/FallingLetters.vue b/packages/courses/src/typing/questions/falling-letters/FallingLetters.vue
@@ -63,21 +63,7 @@ import { defineComponent, ref, onMounted, onUnmounted, PropType } from 'vue';
 import { useViewable, useQuestionView } from '@vue-skuilder/common-ui';
 import { FallingLettersQuestion } from './index';
 import { ViewData } from '@vue-skuilder/common';
-
-// Types
-interface Letter {
-  id: number;
-  char: string;
-  x: number;
-  y: number;
-}
-
-interface TreePosition {
-  id: number;
-  left: number;
-  height: number;
-  scale: number;
-}
+import { Letter, TreePosition } from './types';
 
 // Internal game state type
 interface GameStateInternal {
diff --git a/packages/courses/src/typing/questions/falling-letters/index.ts b/packages/courses/src/typing/questions/falling-letters/index.ts
@@ -87,7 +87,7 @@ export class FallingLettersQuestion extends Question {
     this.spawnInterval = data[0].spawnInterval as number;
   }
 
-  evaluate(a: Answer, t: number) {
+  evaluate(a: Answer) {
     return {
       isCorrect: this.isCorrect(a as Score),
       performance: this.displayedSkill(a as Score),
diff --git a/packages/courses/src/typing/questions/falling-letters/types.ts b/packages/courses/src/typing/questions/falling-letters/types.ts
@@ -0,0 +1,13 @@
+export interface Letter {
+  id: number;
+  char: string;
+  x: number;
+  y: number;
+}
+
+export interface TreePosition {
+  id: number;
+  left: number;
+  height: number;
+  scale: number;
+}
diff --git a/packages/courses/src/vite-env.d.ts b/packages/courses/src/vite-env.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+// other asset types if needed (png, jpg, ...)
diff --git a/packages/courses/src/word-work/questions/spelling/textBox.vue b/packages/courses/src/word-work/questions/spelling/textBox.vue
diff --git a/packages/courses/vite.config.ts b/packages/courses/vite.config.ts
