commit

Author: alanfox2000software

bible/index.html

@@ -16,14 +16,7 @@ <h2>Books</h2>
 
         <!-- Right Content Area -->
         <div class="main-content">
-            <div id="chapters-section" style="display:none;">
-                <button onclick="showBooks()">← Back to Books</button>
-                <div id="chapters"></div>
-            </div>
-            <div id="verses-section" style="display:none;">
-                <button onclick="showChapters()">← Back to Chapters</button>
-                <div id="verses"></div>
-            </div>
+            <div id="verses"></div>
         </div>
     </div>
 

bible/script.js

@@ -1,67 +1,49 @@
 const bookManifest = [
-  { name: "Genesis", file: "genesis.json" },
-  { name: "1 Enoch", file: "enoch.json" }
+    { name: "Genesis", file: "genesis.json" },
+    { name: "1 Enoch", file: "enoch.json" }
 ];
 
-let currentBookData = null; // To store the loaded book data
+let currentBook = null;
+const bookCache = {};
 
 // Fetch book data
 async function loadBookData(bookFile) {
-  try {
-    const response = await fetch(`data/books/${bookFile}`);
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Error loading book:", error);
-  }
+    if (!bookCache[bookFile]) {
+        const response = await fetch(`data/books/${bookFile}`);
+        const data = await response.json();
+        bookCache[bookFile] = data;
+    }
+    return bookCache[bookFile];
 }
 
-// Display book list
-function showBooks() {
-  const bookList = document.getElementById('book-list');
-  bookList.innerHTML = bookManifest.map(book => `
-    <button onclick="handleBookClick('${book.file}')">
-      ${book.name}
-    </button>
-  `).join('');
+// Load chapter 1 of a book automatically
+async function loadBook(bookFile) {
+    const bookData = await loadBookData(bookFile);
+    currentBook = Object.keys(bookData)[0]; // e.g., "1 Enoch"
+    const firstChapter = Object.keys(bookData[currentBook])[0]; // Chapter 1
+    
+    // Display verses
+    const versesDiv = document.getElementById('verses');
+    versesDiv.innerHTML = `
+        <h2>${currentBook}</h2>
+        ${Object.entries(bookData[currentBook][firstChapter])
+          .map(([verse, text]) => `
+            <p class="verse"><b>${verse}:</b> ${text}</p>
+          `).join('')}
+    `;
 }
 
-// Handle book click
-async function handleBookClick(bookFile) {
-  currentBookData = await loadBookData(bookFile);
-  if (!currentBookData) return;
-
-  const bookName = Object.keys(currentBookData)[0]; // e.g., "1 Enoch"
-  const chapters = Object.keys(currentBookData[bookName]);
-
-  // Show chapters
-  document.getElementById('chapters-section').style.display = 'block';
-  document.getElementById('verses-section').style.display = 'none';
-  
-  const chaptersDiv = document.getElementById('chapters');
-  chaptersDiv.innerHTML = chapters.map(chapter => `
-    <button class="chapter-btn" onclick="handleChapterClick('${chapter}')">
-      Chapter ${chapter}
-    </button>
-  `).join('');
-}
-
-// Handle chapter click
-function handleChapterClick(chapter) {
-  const bookName = Object.keys(currentBookData)[0];
-  const verses = currentBookData[bookName][chapter];
-
-  document.getElementById('verses-section').style.display = 'block';
-  const versesDiv = document.getElementById('verses');
-  versesDiv.innerHTML = Object.entries(verses).map(([verse, text]) => `
-    <p><b>${verse}:</b> ${text}</p>
-  `).join('');
-}
-
-// Back buttons
-function showChapters() {
-  document.getElementById('verses-section').style.display = 'none';
+// Initialize book list
+function initBooks() {
+    const bookList = document.getElementById('book-list');
+    bookList.innerHTML = bookManifest
+        .map(book => `
+            <button onclick="loadBook('${book.file}')">
+                ${book.name}
+            </button>
+        `)
+        .join('');
 }
 
-// Initialize
-showBooks();
+// Start
+initBooks();

bible/styles.css

@@ -30,8 +30,6 @@ body {
     cursor: pointer;
 }
 
-.chapter-btn {
-    padding: 8px;
-    margin: 4px 0;
-    cursor: pointer;
-}
+.verse {
+    margin: 10px 0;
+}