Refactor and remove /bone-data endpoint usages

Author: leandrumartin

templates/js/dropdowns.js

@@ -2,6 +2,7 @@
 import { loadDescription } from "./description.js";
 import { displayBoneImages, clearImages, showPlaceholder } from "./imageDisplay.js";
 import { loadAndDrawAnnotations, clearAnnotations } from "./annotationOverlay.js";
+import {fetchBoneData} from "./api.js";
 
 // Show the placeholder ASAP
 document.addEventListener("DOMContentLoaded", () => {
@@ -40,14 +41,7 @@ async function loadBoneImages(boneId, options = {}) {
     return;
   }
   try {
-    const res = await fetch(`${API_BASE}/api/bone-data/?boneId=${encodeURIComponent(boneId)}`);
-    if (!res.ok) {
-      console.warn("bone-data API error:", res.status, boneId);
-      showPlaceholder();
-      if (stage) { clearAnnotations(stage); stage.classList.remove("with-annotations"); }
-      return;
-    }
-    const data = await res.json();
+    const data = await fetchBoneData(boneId);
     const images = Array.isArray(data.images) ? data.images : [];
     if (images.length === 0) {
       showPlaceholder();

templates/js/quiz.js

@@ -1,6 +1,6 @@
 // quiz.js - Quiz functionality for Digital Bones Box
 
-import { fetchCombinedData } from "./api.js";
+import {fetchBoneData, fetchCombinedData} from "./api.js";
 
 class QuizManager {
     constructor() {
@@ -120,7 +120,6 @@ class QuizManager {
                 itemName: correctItem.name,
                 correctAnswer: correctItem.name,
                 allAnswers: this.shuffleArray([correctItem.name, ...wrongAnswers]),
-                imageUrl: this.getImageUrl(correctItem.id)
             };
 
             this.questions.push(question);
@@ -160,26 +159,12 @@ class QuizManager {
         return shuffled;
     }
 
-    /**
-     * Get image URL for an item....
-     */
-    getImageUrl(itemId) {
-        // Use the API endpoint that serves bone images
-        return `http://127.0.0.1:8000/api/bone-data/?boneId=${encodeURIComponent(itemId)}`;
-    }
-
     /**
  * Fetch and display bone image from API
  */
 async fetchBoneImage(itemId, container) {
     try {
-        const response = await fetch(`http://127.0.0.1:8000/api/bone-data/?boneId=${encodeURIComponent(itemId)}`);
-        
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        
-        const data = await response.json();
+        const data = fetchBoneData(itemId);
 
         console.log(`Bone data for ${itemId}:`, data); // DEBUG