☰

JPDB Immersion Kit Examples

Embeds anime images & audio examples into JPDB review and vocabulary pages using Immersion Kit's API. Compatible only with TamperMonkey.

  1. // ==UserScript==
  2. // @name         JPDB Immersion Kit Examples
  3. // @version      1.22
  4. // @description  Embeds anime images & audio examples into JPDB review and vocabulary pages using Immersion Kit's API. Compatible only with TamperMonkey.
  5. // @author       awoo
  6. // @namespace    jpdb-immersion-kit-examples
  7. // @match        https://jpdb.io/review*
  8. // @match        https://jpdb.io/vocabulary/*
  9. // @match        https://jpdb.io/kanji/*
  10. // @match        https://jpdb.io/search*
  11. // @connect      immersionkit.com
  12. // @connect      linodeobjects.com
  13. // @grant        GM_addElement
  14. // @grant        GM_xmlhttpRequest
  15. // @license      MIT
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.  
  21.     // to use custom hotkeys just add them into this array following the same format. Any single keys except space
  22.     // should work. If you want to use special keys, check the linked page for how to represent them in the array
  23.     // (link leads to the arrow keys part so you can compare with the array and be sure which part to write):
  24.     // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
  25.     const hotkeyOptions = ['None', 'ArrowLeft ArrowRight', ', .', '[ ]', 'Q W'];
  26.  
  27.     const CONFIG = {
  28.         IMAGE_WIDTH: '400px',
  29.         WIDE_MODE: true,
  30.         DEFINITIONS_ON_RIGHT_IN_WIDE_MODE: false,
  31.         ARROW_WIDTH: '75px',
  32.         ARROW_HEIGHT: '45px',
  33.         PAGE_WIDTH: '75rem',
  34.         SOUND_VOLUME: 80,
  35.         ENABLE_EXAMPLE_TRANSLATION: true,
  36.         SENTENCE_FONT_SIZE: '120%',
  37.         TRANSLATION_FONT_SIZE: '85%',
  38.         COLORED_SENTENCE_TEXT: true,
  39.         AUTO_PLAY_SOUND: true,
  40.         NUMBER_OF_PRELOADS: 1,
  41.         VOCAB_SIZE: '250%',
  42.         MINIMUM_EXAMPLE_LENGTH: 0,
  43.         HOTKEYS: ['None'],
  44.         DEFAULT_TO_EXACT_SEARCH: true
  45.         // On changing this config option, the icons change but the sentences don't, so you
  46.         // have to click once to match up the icons and again to actually change the sentences
  47.     };
  48.  
  49.     const state = {
  50.         currentExampleIndex: 0,
  51.         examples: [],
  52.         apiDataFetched: false,
  53.         vocab: '',
  54.         embedAboveSubsectionMeanings: false,
  55.         preloadedIndices: new Set(),
  56.         currentAudio: null,
  57.         exactSearch: true,
  58.         error: false,
  59.         currentlyPlayingAudio: false
  60.     };
  61.  
  62.     // Prefixing
  63.     const scriptPrefix = 'JPDBImmersionKitExamples-';
  64.     const configPrefix = 'CONFIG.'; // additional prefix for config variables to go after the scriptPrefix
  65.     // do not change either of the above without adding code to handle the change
  66.  
  67.     const setItem = (key, value) => { localStorage.setItem(scriptPrefix + key, value) }
  68.     const getItem = (key) => {
  69.         const prefixedValue = localStorage.getItem(scriptPrefix + key);
  70.         if (prefixedValue !== null) { return prefixedValue }
  71.         const nonPrefixedValue = localStorage.getItem(key);
  72.         // to move away from non-prefixed values as fast as possible
  73.         if (nonPrefixedValue !== null) { setItem(key, nonPrefixedValue) }
  74.         return nonPrefixedValue
  75.     }
  76.     const removeItem = (key) => {
  77.         localStorage.removeItem(scriptPrefix + key);
  78.         localStorage.removeItem(key)
  79.     }
  80.  
  81.     // Helper for transitioning to fully script-prefixed config state
  82.     // Deletes all localStorage variables starting with configPrefix and re-adds them with scriptPrefix and configPrefix
  83.     // Danger of other scripts also having localStorage variables starting with configPrefix, so we add a flag showing that
  84.     // we have run this function and make sure it is not set when running it
  85.  
  86.     // Check for Prefixed flag
  87.     if (localStorage.getItem(`JPDBImmersionKit*Examples-CONFIG_VARIABLES_PREFIXED`) !== 'true') {
  88.         const keysToModify = [];
  89.  
  90.         // Collect keys that need to be modified
  91.         for (let i = 0; i < localStorage.length; i++) {
  92.             const key = localStorage.key(i);
  93.             if (key.startsWith(configPrefix)) {
  94.                 keysToModify.push(key);
  95.             }
  96.         }
  97.  
  98.         // Modify the collected keys
  99.         keysToModify.forEach((key) => {
  100.             const value = localStorage.getItem(key);
  101.             localStorage.removeItem(key);
  102.             const newKey = scriptPrefix + key;
  103.             localStorage.setItem(newKey, value);
  104.         });
  105.         // Set flag so this only runs once
  106.         // Flag has * in name to place at top in alphabetical sorting,
  107.         // and most importantly, to ensure the flag is never removed or modified
  108.         // by the other script functions that check for the script prefix
  109.         localStorage.setItem(`JPDBImmersionKit*Examples-CONFIG_VARIABLES_PREFIXED`, 'true');
  110.     }
  111.  
  112.     // IndexedDB Manager
  113.     const IndexedDBManager = {
  114.         MAX_ENTRIES: 100000000,
  115.         EXPIRATION_TIME: 30 * 24 * 60 * 60 * 1000 * 12 * 10000, // 10000 years in milliseconds
  116.  
  117.         open() {
  118.             return new Promise((resolve, reject) => {
  119.                 const request = indexedDB.open('ImmersionKitDB', 1);
  120.                 request.onupgradeneeded = function(event) {
  121.                     const db = event.target.result;
  122.                     if (!db.objectStoreNames.contains('dataStore')) {
  123.                         db.createObjectStore('dataStore', { keyPath: 'keyword' });
  124.                     }
  125.                 };
  126.                 request.onsuccess = function(event) {
  127.                     resolve(event.target.result);
  128.                 };
  129.                 request.onerror = function(event) {
  130.                     reject('IndexedDB error: ' + event.target.errorCode);
  131.                 };
  132.             });
  133.         },
  134.  
  135.         get(db, keyword) {
  136.             return new Promise((resolve, reject) => {
  137.                 const transaction = db.transaction(['dataStore'], 'readonly');
  138.                 const store = transaction.objectStore('dataStore');
  139.                 const request = store.get(keyword);
  140.                 request.onsuccess = async function(event) {
  141.                     const result = event.target.result;
  142.                     if (result) {
  143.                         const isExpired = Date.now() - result.timestamp >= this.EXPIRATION_TIME;
  144.                         const validationError = validateApiResponse(result.data);
  145.  
  146.                         if (isExpired) {
  147.                             console.log(`Deleting entry for keyword "${keyword}" because it is expired.`);
  148.                             await this.deleteEntry(db, keyword);
  149.                             resolve(null);
  150.                         } else if (validationError) {
  151.                             console.log(`Deleting entry for keyword "${keyword}" due to validation error: ${validationError}`);
  152.                             await this.deleteEntry(db, keyword);
  153.                             resolve(null);
  154.                         } else {
  155.                             resolve(result.data);
  156.                         }
  157.                     } else {
  158.                         resolve(null);
  159.                     }
  160.                 }.bind(this);
  161.                 request.onerror = function(event) {
  162.                     reject('IndexedDB get error: ' + event.target.errorCode);
  163.                 };
  164.             });
  165.         },
  166.  
  167.         deleteEntry(db, keyword) {
  168.             return new Promise((resolve, reject) => {
  169.                 const transaction = db.transaction(['dataStore'], 'readwrite');
  170.                 const store = transaction.objectStore('dataStore');
  171.                 const request = store.delete(keyword);
  172.                 request.onsuccess = () => resolve();
  173.                 request.onerror = (e) => reject('IndexedDB delete error: ' + e.target.errorCode);
  174.             });
  175.         },
  176.  
  177.  
  178.         getAll(db) {
  179.             return new Promise((resolve, reject) => {
  180.                 const transaction = db.transaction(['dataStore'], 'readonly');
  181.                 const store = transaction.objectStore('dataStore');
  182.                 const entries = [];
  183.                 store.openCursor().onsuccess = function(event) {
  184.                     const cursor = event.target.result;
  185.                     if (cursor) {
  186.                         entries.push(cursor.value);
  187.                         cursor.continue();
  188.                     } else {
  189.                         resolve(entries);
  190.                     }
  191.                 };
  192.                 store.openCursor().onerror = function(event) {
  193.                     reject('Failed to retrieve entries via cursor: ' + event.target.errorCode);
  194.                 };
  195.             });
  196.         },
  197.  
  198.         save(db, keyword, data) {
  199.             return new Promise(async (resolve, reject) => {
  200.                 try {
  201.                     const validationError = validateApiResponse(data);
  202.                     if (validationError) {
  203.                         console.log(`Invalid data detected: ${validationError}. Not saving to IndexedDB.`);
  204.                         resolve();
  205.                         return;
  206.                     }
  207.  
  208.                     // Transform the JSON object to slim it down
  209.                     let slimData = {};
  210.                     if (data && data.data) {
  211.                         slimData.data = data.data.map(item => {
  212.                             const slimItem = {};
  213.  
  214.                             // Keep the category_count section
  215.                             if (item.category_count) {
  216.                                 slimItem.category_count = item.category_count;
  217.                             }
  218.  
  219.                             // Slim down the examples section
  220.                             if (item.examples && Array.isArray(item.examples)) {
  221.                                 const slimExamples = item.examples.map(example => ({
  222.                                     image_url: example.image_url,
  223.                                     sound_url: example.sound_url,
  224.                                     sentence: example.sentence,
  225.                                     translation: example.translation,
  226.                                     deck_name: example.deck_name
  227.                                 }));
  228.                                 slimItem.examples = slimExamples;
  229.                             }
  230.  
  231.                             return slimItem;
  232.                         });
  233.                     } else {
  234.                         console.error('Data does not contain expected structure. Cannot slim down.');
  235.                         resolve();
  236.                         return;
  237.                     }
  238.  
  239.                     const entries = await this.getAll(db);
  240.                     const transaction = db.transaction(['dataStore'], 'readwrite');
  241.                     const store = transaction.objectStore('dataStore');
  242.  
  243.                     if (entries.length >= this.MAX_ENTRIES) {
  244.                         // Sort entries by timestamp and delete oldest ones
  245.                         entries.sort((a, b) => a.timestamp - b.timestamp);
  246.                         const entriesToDelete = entries.slice(0, entries.length - this.MAX_ENTRIES + 1);
  247.  
  248.                         // Delete old entries
  249.                         entriesToDelete.forEach(entry => {
  250.                             store.delete(entry.keyword).onerror = function() {
  251.                                 console.error('Failed to delete entry:', entry.keyword);
  252.                             };
  253.                         });
  254.                     }
  255.  
  256.                     // Add the new slimmed entry
  257.                     const addRequest = store.put({ keyword, data: slimData, timestamp: Date.now() });
  258.                     addRequest.onsuccess = () => resolve();
  259.                     addRequest.onerror = (e) => reject('IndexedDB save error: ' + e.target.errorCode);
  260.  
  261.                     transaction.oncomplete = function() {
  262.                         console.log('IndexedDB updated successfully.');
  263.                     };
  264.  
  265.                     transaction.onerror = function(event) {
  266.                         reject('IndexedDB update failed: ' + event.target.errorCode);
  267.                     };
  268.  
  269.                 } catch (error) {
  270.                     reject(`Error in saveToIndexedDB: ${error}`);
  271.                 }
  272.             });
  273.         },
  274.  
  275.         delete() {
  276.             return new Promise((resolve, reject) => {
  277.                 const request = indexedDB.deleteDatabase('ImmersionKitDB');
  278.                 request.onsuccess = function() {
  279.                     console.log('IndexedDB deleted successfully');
  280.                     resolve();
  281.                 };
  282.                 request.onerror = function(event) {
  283.                     console.error('Error deleting IndexedDB:', event.target.errorCode);
  284.                     reject('Error deleting IndexedDB: ' + event.target.errorCode);
  285.                 };
  286.                 request.onblocked = function() {
  287.                     console.warn('Delete operation blocked. Please close all other tabs with this site open and try again.');
  288.                     reject('Delete operation blocked');
  289.                 };
  290.             });
  291.         }
  292.     };
  293.  
  294.  
  295.     // API FUNCTIONS=====================================================================================================================
  296.     function getImmersionKitData(vocab, exactSearch) {
  297.  
  298.  
  299.         return new Promise(async (resolve, reject) => {
  300.             const searchVocab = exactSearch ? `「${vocab}」` : vocab;
  301.             const url = `https://api.immersionkit.com/look_up_dictionary?keyword=${encodeURIComponent(searchVocab)}&sort=shortness&min_length=${CONFIG.MINIMUM_EXAMPLE_LENGTH}`;
  302.             const maxRetries = 5;
  303.             let attempt = 0;
  304.  
  305.             const storedValue = getItem(state.vocab);
  306.             const isBlacklisted = storedValue && storedValue.split(',').length > 1 && parseInt(storedValue.split(',')[1], 10) === 2;
  307.  
  308.             // Return early if not blacklisted
  309.             if (isBlacklisted) {
  310.                 resolve();
  311.                 return;
  312.             }
  313.  
  314.             async function fetchData() {
  315.                 try {
  316.                     const db = await IndexedDBManager.open();
  317.                     const cachedData = await IndexedDBManager.get(db, searchVocab);
  318.                     if (cachedData && Array.isArray(cachedData.data) && cachedData.data.length > 0) {
  319.                         console.log('Data retrieved from IndexedDB');
  320.                         state.examples = cachedData.data[0].examples;
  321.                         state.apiDataFetched = true;
  322.                         resolve();
  323.                     } else {
  324.                         console.log(`Calling API for: ${searchVocab}`);
  325.                         GM_xmlhttpRequest({
  326.                             method: "GET",
  327.                             url: url,
  328.                             onload: async function(response) {
  329.                                 if (response.status === 200) {
  330.                                     const jsonData = parseJSON(response.responseText);
  331.                                     console.log("API JSON Received");
  332.                                     console.log(url);
  333.                                     const validationError = validateApiResponse(jsonData);
  334.                                     if (!validationError) {
  335.                                         state.examples = jsonData.data[0].examples;
  336.                                         state.apiDataFetched = true;
  337.                                         await IndexedDBManager.save(db, searchVocab, jsonData);
  338.                                         resolve();
  339.                                     } else {
  340.                                         attempt++;
  341.                                         if (attempt < maxRetries) {
  342.                                             console.log(`Validation error: ${validationError}. Retrying... (${attempt}/${maxRetries})`);
  343.                                             setTimeout(fetchData, 2000); // Add a 2-second delay before retrying
  344.                                         } else {
  345.                                             reject(`Invalid API response after ${maxRetries} attempts: ${validationError}`);
  346.                                             state.error = true;
  347.                                             embedImageAndPlayAudio(); //update displayed text
  348.                                         }
  349.                                     }
  350.                                 } else {
  351.                                     reject(`API call failed with status: ${response.status}`);
  352.                                 }
  353.                             },
  354.                             onerror: function(error) {
  355.                                 reject(`An error occurred: ${error}`);
  356.                             }
  357.                         });
  358.                     }
  359.                 } catch (error) {
  360.                     reject(`Error: ${error}`);
  361.                 }
  362.             }
  363.  
  364.             fetchData();
  365.         });
  366.     }
  367.  
  368.     function parseJSON(responseText) {
  369.         try {
  370.             return JSON.parse(responseText);
  371.         } catch (e) {
  372.             console.error('Error parsing JSON:', e);
  373.             return null;
  374.         }
  375.     }
  376.  
  377.     function validateApiResponse(jsonData) {
  378.         state.error = false;
  379.         if (!jsonData) {
  380.             return 'Not a valid JSON';
  381.         }
  382.         if (!jsonData.data || !jsonData.data[0] || !jsonData.data[0].examples) {
  383.             return 'Missing required data fields';
  384.         }
  385.  
  386.         const categoryCount = jsonData.data[0].category_count;
  387.         if (!categoryCount) {
  388.             return 'Missing category count';
  389.         }
  390.  
  391.         // Check if all category counts are zero
  392.         const allZero = Object.values(categoryCount).every(count => count === 0);
  393.         if (allZero) {
  394.             return 'Blank API';
  395.         }
  396.  
  397.         return null; // No error
  398.     }
  399.  
  400.  
  401.     //FAVORITE DATA FUNCTIONS=====================================================================================================================
  402.     function getStoredData(key) {
  403.         // Retrieve the stored value from localStorage using the provided key
  404.         const storedValue = getItem(key);
  405.  
  406.         // If a stored value exists, split it into index and exactState
  407.         if (storedValue) {
  408.             const [index, exactState] = storedValue.split(',');
  409.             return {
  410.                 index: parseInt(index, 10), // Convert index to an integer
  411.                 exactState: exactState === '1' // Convert exactState to a boolean
  412.             };
  413.         }
  414.  
  415.         // Return default values if no stored value exists
  416.         return { index: 0, exactState: state.exactSearch };
  417.     }
  418.  
  419.     function storeData(key, index, exactState) {
  420.         // Create a string value from index and exactState to store in localStorage
  421.         const value = `${index},${exactState ? 1 : 0}`;
  422.  
  423.         // Store the value in localStorage using the provided key
  424.         setItem(key, value);
  425.     }
  426.  
  427.  
  428.     // PARSE VOCAB FUNCTIONS =====================================================================================================================
  429.     function parseVocabFromAnswer() {
  430.         // Select all links containing "/kanji/" or "/vocabulary/" in the href attribute
  431.         const elements = document.querySelectorAll('a[href*="/kanji/"], a[href*="/vocabulary/"]');
  432.         console.log("Parsing Answer Page");
  433.  
  434.         // Iterate through the matched elements
  435.         for (const element of elements) {
  436.             const href = element.getAttribute('href');
  437.             const text = element.textContent.trim();
  438.  
  439.             // Match the href to extract kanji or vocabulary (ignoring ID if present)
  440.             const match = href.match(/\/(kanji|vocabulary)\/(?:\d+\/)?([^\#]*)#/);
  441.             if (match) return match[2].trim();
  442.             if (text) return text.trim();
  443.         }
  444.         return '';
  445.     }
  446.  
  447.     function parseVocabFromReview() {
  448.         console.log("Parsing Review Page");
  449.  
  450.         // Select the element with class 'kind' to determine the type of content
  451.         const kindElement = document.querySelector('.kind');
  452.  
  453.         // If kindElement doesn't exist, set kindText to null
  454.         const kindText = kindElement ? kindElement.textContent.trim() : null;
  455.  
  456.         // Accept 'Kanji' or 'Vocabulary' kindText
  457.         if (kindText !== 'Kanji' && kindText !== 'Vocabulary') {
  458.             console.log("Not Kanji or existing Vocabulary. Attempting to parse New Vocab.");
  459.  
  460.             // Attempt to parse from <a> tag with specific pattern
  461.             const anchorElement = document.querySelector('a.plain[href*="/vocabulary/"]');
  462.  
  463.             if (anchorElement) {
  464.                 const href = anchorElement.getAttribute('href');
  465.  
  466.                 const match = href.match(/\/vocabulary\/\d+\/([^#]+)#a/);
  467.  
  468.                 if (match && match[1]) {
  469.                     const new_vocab = match[1];
  470.                     console.log("Found New Vocab:", new_vocab);
  471.                     return new_vocab;
  472.                 }
  473.             }
  474.  
  475.             console.log("No Vocabulary found.");
  476.             return '';
  477.         }
  478.  
  479.         if (kindText === 'Vocabulary') {
  480.             // Select the element with class 'plain' to extract vocabulary
  481.             const plainElement = document.querySelector('.plain');
  482.             if (!plainElement) {
  483.                 return '';
  484.             }
  485.  
  486.             let vocabulary = plainElement.textContent.trim();
  487.  
  488.             const nestedVocabularyElement = plainElement.querySelector('div:not([style])');
  489.  
  490.             if (nestedVocabularyElement) {
  491.                 vocabulary = nestedVocabularyElement.textContent.trim();
  492.             }
  493.  
  494.             const specificVocabularyElement = plainElement.querySelector('div:nth-child(3)');
  495.  
  496.             if (specificVocabularyElement) {
  497.                 vocabulary = specificVocabularyElement.textContent.trim();
  498.             }
  499.  
  500.             // Regular expression to check if the vocabulary contains kanji characters
  501.             const kanjiRegex = /[\u4e00-\u9faf\u3400-\u4dbf]/;
  502.             if (kanjiRegex.test(vocabulary) || vocabulary) {
  503.                 console.log("Found Vocabulary:", vocabulary);
  504.                 return vocabulary;
  505.             }
  506.         } else if (kindText === 'Kanji') {
  507.             // Select the hidden input element to extract kanji
  508.             const hiddenInput = document.querySelector('input[name="c"]');
  509.             if (!hiddenInput) {
  510.                 return '';
  511.             }
  512.  
  513.             const vocab = hiddenInput.value.split(',')[1];
  514.             const kanjiRegex = /[\u4e00-\u9faf\u3400-\u4dbf]/;
  515.             if (kanjiRegex.test(vocab)) {
  516.                 console.log("Found Kanji:", vocab);
  517.                 return vocab;
  518.             }
  519.         }
  520.  
  521.         console.log("No Vocabulary or Kanji found.");
  522.         return '';
  523.     }
  524.  
  525.     function parseVocabFromVocabulary() {
  526.         // Get the current URL
  527.         let url = window.location.href;
  528.  
  529.         // Remove query parameters (e.g., ?lang=english) and fragment identifiers (#)
  530.         url = url.split('?')[0].split('#')[0];
  531.  
  532.         // Match the URL structure for a vocabulary page
  533.         const match = url.match(/https:\/\/jpdb\.io\/vocabulary\/(\d+)\/([^\#\/]*)/);
  534.         console.log("Parsing Vocabulary Page");
  535.  
  536.         if (match) {
  537.             // Extract and decode the vocabulary part from the URL
  538.             let vocab = match[2];
  539.             state.embedAboveSubsectionMeanings = true; // Set state flag
  540.             return decodeURIComponent(vocab);
  541.         }
  542.  
  543.         // Return empty string if no match
  544.         return '';
  545.     }
  546.  
  547.     function parseVocabFromKanji() {
  548.         // Get the current URL
  549.         const url = window.location.href;
  550.  
  551.         // Match the URL structure for a kanji page
  552.         const match = url.match(/https:\/\/jpdb\.io\/kanji\/(\d+)\/([^\#]*)#a/);
  553.         console.log("Parsing Kanji Page");
  554.  
  555.         if (match) {
  556.             // Extract and decode the kanji part from the URL
  557.             let kanji = match[2];
  558.             state.embedAboveSubsectionMeanings = true; // Set state flag
  559.             kanji = kanji.split('/')[0];
  560.             return decodeURIComponent(kanji);
  561.         }
  562.  
  563.         // Return empty string if no match
  564.         return '';
  565.     }
  566.  
  567.     function parseVocabFromSearch() {
  568.         // Get the current URL
  569.         let url = window.location.href;
  570.  
  571.         // Match the URL structure for a search query, capturing the vocab between `?q=` and either `&` or `+`
  572.         const match = url.match(/https:\/\/jpdb\.io\/search\?q=([^&+]*)/);
  573.         console.log("Parsing Search Page");
  574.  
  575.         if (match) {
  576.             // Extract and decode the vocabulary part from the URL
  577.             let vocab = match[1];
  578.             return decodeURIComponent(vocab);
  579.         }
  580.  
  581.         // Return empty string if no match
  582.         return '';
  583.     }
  584.  
  585.  
  586.     //EMBED FUNCTIONS=====================================================================================================================
  587.     function createAnchor(marginLeft) {
  588.         // Create and style an anchor element
  589.         const anchor = document.createElement('a');
  590.         anchor.href = '#';
  591.         anchor.style.border = '0';
  592.         anchor.style.display = 'inline-flex';
  593.         anchor.style.verticalAlign = 'middle';
  594.         anchor.style.marginLeft = marginLeft;
  595.         return anchor;
  596.     }
  597.  
  598.     function createIcon(iconClass, fontSize = '1.4rem', color = '#3d81ff') {
  599.         // Create and style an icon element
  600.         const icon = document.createElement('i');
  601.         icon.className = iconClass;
  602.         icon.style.fontSize = fontSize;
  603.         icon.style.opacity = '1.0';
  604.         icon.style.verticalAlign = 'baseline';
  605.         icon.style.color = color;
  606.         return icon;
  607.     }
  608.  
  609.     function createSpeakerButton(soundUrl) {
  610.         // Create a speaker button with an icon and click event for audio playback
  611.         const anchor = createAnchor('0.5rem');
  612.         const icon = createIcon('ti ti-volume');
  613.         anchor.appendChild(icon);
  614.         anchor.addEventListener('click', (event) => {
  615.             event.preventDefault();
  616.             playAudio(soundUrl);
  617.         });
  618.         return anchor;
  619.     }
  620.  
  621.     function createStarButton() {
  622.         // Create a star button with an icon and click event for toggling favorite state
  623.         const anchor = createAnchor('0.5rem');
  624.         const starIcon = document.createElement('span');
  625.         const storedValue = getItem(state.vocab);
  626.         // console.log(storedValue);
  627.  
  628.         // Determine the star icon (filled or empty) based on stored value
  629.         if (storedValue) {
  630.             const [storedIndex, storedExactState] = storedValue.split(',');
  631.             const index = parseInt(storedIndex, 10);
  632.             const exactState = Boolean(parseInt(storedExactState, 10));
  633.             starIcon.textContent = (state.currentExampleIndex === index && state.exactSearch === exactState) ? '★' : '☆';
  634.         } else {
  635.             starIcon.textContent = '☆';
  636.         }
  637.  
  638.  
  639.         // Style the star icon
  640.         starIcon.style.fontSize = '1.4rem';
  641.         starIcon.style.color = '#3D8DFF';
  642.         starIcon.style.verticalAlign = 'middle';
  643.         starIcon.style.position = 'relative';
  644.         starIcon.style.top = '-2px';
  645.  
  646.         // Append the star icon to the anchor and set up the click event to toggle star state
  647.         anchor.appendChild(starIcon);
  648.         anchor.addEventListener('click', (event) => {
  649.             event.preventDefault();
  650.             toggleStarState(starIcon);
  651.         });
  652.  
  653.         return anchor;
  654.     }
  655.  
  656.     function toggleStarState(starIcon) {
  657.         const storedValue = getItem(state.vocab);
  658.         const isBlacklisted = storedValue && storedValue.split(',').length > 1 && parseInt(storedValue.split(',')[1], 10) === 2;
  659.  
  660.         // Return early if blacklisted
  661.         if (isBlacklisted) {
  662.             starIcon.textContent = '☆';
  663.             return;
  664.         }
  665.  
  666.         // Toggle the star state between filled and empty
  667.         if (storedValue) {
  668.             const [storedIndex, storedExactState] = storedValue.split(',');
  669.             const index = parseInt(storedIndex, 10);
  670.             const exactState = storedExactState === '1';
  671.             if (index === state.currentExampleIndex && exactState === state.exactSearch) {
  672.                 removeItem(state.vocab);
  673.                 starIcon.textContent = '☆';
  674.             } else {
  675.                 setItem(state.vocab, `${state.currentExampleIndex},${state.exactSearch ? 1 : 0}`);
  676.                 starIcon.textContent = '★';
  677.             }
  678.         } else {
  679.             setItem(state.vocab, `${state.currentExampleIndex},${state.exactSearch ? 1 : 0}`);
  680.             starIcon.textContent = '★';
  681.         }
  682.     }
  683.  
  684.     function createQuoteButton() {
  685.         // Create a quote button with an icon and click event for toggling quote style
  686.         const anchor = createAnchor('0rem');
  687.         const quoteIcon = document.createElement('span');
  688.  
  689.         // Set the icon based on exact search state
  690.         quoteIcon.innerHTML = state.exactSearch ? '<b>「」</b>' : '『』';
  691.  
  692.         // Style the quote icon
  693.         quoteIcon.style.fontSize = '1.1rem';
  694.         quoteIcon.style.color = '#3D8DFF';
  695.         quoteIcon.style.verticalAlign = 'middle';
  696.         quoteIcon.style.position = 'relative';
  697.         quoteIcon.style.top = '0px';
  698.  
  699.         // Append the quote icon to the anchor and set up the click event to toggle quote state
  700.         anchor.appendChild(quoteIcon);
  701.         anchor.addEventListener('click', (event) => {
  702.             event.preventDefault();
  703.             toggleQuoteState(quoteIcon);
  704.         });
  705.  
  706.         return anchor;
  707.     }
  708.  
  709.     function toggleQuoteState(quoteIcon) {
  710.         const storedValue = getItem(state.vocab);
  711.         const isBlacklisted = storedValue && storedValue.split(',').length > 1 && parseInt(storedValue.split(',')[1], 10) === 2;
  712.  
  713.         // Return early if blacklisted
  714.         if (isBlacklisted) {
  715.             return;
  716.         }
  717.  
  718.         // Toggle between single and double quote styles
  719.         state.exactSearch = !state.exactSearch;
  720.         quoteIcon.innerHTML = state.exactSearch ? '<b>「」</b>' : '『』';
  721.  
  722.         // Update state based on stored data
  723.         const storedData = getStoredData(state.vocab);
  724.         if (storedData && storedData.exactState === state.exactSearch) {
  725.             state.currentExampleIndex = storedData.index;
  726.         } else {
  727.             state.currentExampleIndex = 0;
  728.         }
  729.  
  730.         state.apiDataFetched = false;
  731.         embedImageAndPlayAudio();
  732.         getImmersionKitData(state.vocab, state.exactSearch)
  733.             .then(() => {
  734.             embedImageAndPlayAudio();
  735.         })
  736.             .catch(error => {
  737.             console.error(error);
  738.         });
  739.     }
  740.  
  741.     function createMenuButton() {
  742.         // Create a menu button with a dropdown menu
  743.         const anchor = createAnchor('0.5rem');
  744.         const menuIcon = document.createElement('span');
  745.         menuIcon.innerHTML = '☰';
  746.  
  747.         // Style the menu icon
  748.         menuIcon.style.fontSize = '1.4rem';
  749.         menuIcon.style.color = '#3D8DFF';
  750.         menuIcon.style.verticalAlign = 'middle';
  751.         menuIcon.style.position = 'relative';
  752.         menuIcon.style.top = '-2px';
  753.  
  754.         // Append the menu icon to the anchor and set up the click event to show the overlay menu
  755.         anchor.appendChild(menuIcon);
  756.         anchor.addEventListener('click', (event) => {
  757.             event.preventDefault();
  758.             const overlay = createOverlayMenu();
  759.             document.body.appendChild(overlay);
  760.         });
  761.  
  762.         return anchor;
  763.     }
  764.  
  765.     function createTextButton(vocab, exact) {
  766.         // Create a text button for the Immersion Kit
  767.         const textButton = document.createElement('a');
  768.         textButton.textContent = 'Immersion Kit';
  769.         textButton.style.color = 'var(--subsection-label-color)';
  770.         textButton.style.fontSize = '85%';
  771.         textButton.style.marginRight = '0.5rem';
  772.         textButton.style.verticalAlign = 'middle';
  773.         textButton.href = `https://www.immersionkit.com/dictionary?keyword=${encodeURIComponent(vocab)}&sort=shortness${exact ? '&exact=true' : ''}`;
  774.         textButton.target = '_blank';
  775.         return textButton;
  776.     }
  777.  
  778.     function createButtonContainer(soundUrl, vocab, exact) {
  779.         // Create a container for all buttons
  780.         const buttonContainer = document.createElement('div');
  781.         buttonContainer.className = 'button-container';
  782.         buttonContainer.style.display = 'flex';
  783.         buttonContainer.style.justifyContent = 'space-between';
  784.         buttonContainer.style.alignItems = 'center';
  785.         buttonContainer.style.marginBottom = '5px';
  786.         buttonContainer.style.lineHeight = '1.4rem';
  787.  
  788.         // Create individual buttons
  789.         const menuButton = createMenuButton();
  790.         const textButton = createTextButton(vocab, exact);
  791.         const speakerButton = createSpeakerButton(soundUrl);
  792.         const starButton = createStarButton();
  793.         const quoteButton = createQuoteButton();
  794.  
  795.         // Center the buttons within the container
  796.         const centeredButtonsWrapper = document.createElement('div');
  797.         centeredButtonsWrapper.style.display = 'flex';
  798.         centeredButtonsWrapper.style.justifyContent = 'center';
  799.         centeredButtonsWrapper.style.flex = '1';
  800.  
  801.         centeredButtonsWrapper.append(textButton, speakerButton, starButton, quoteButton);
  802.         buttonContainer.append(centeredButtonsWrapper, menuButton);
  803.  
  804.         return buttonContainer;
  805.     }
  806.  
  807.     function stopCurrentAudio() {
  808.         // Stop any currently playing audio
  809.         if (state.currentAudio) {
  810.             state.currentAudio.source.stop();
  811.             state.currentAudio.context.close();
  812.             state.currentAudio = null;
  813.         }
  814.     }
  815.  
  816.     function playAudio(soundUrl) {
  817.         // Skip playing audio if it is already playing
  818.         if (state.currentlyPlayingAudio) {
  819.             //console.log('Duplicate audio was skipped.');
  820.             return;
  821.         }
  822.  
  823.         if (soundUrl) {
  824.             state.currentlyPlayingAudio = true;
  825.             stopCurrentAudio();
  826.  
  827.             GM_xmlhttpRequest({
  828.                 method: 'GET',
  829.                 url: soundUrl,
  830.                 responseType: 'arraybuffer',
  831.                 onload: function(response) {
  832.                     const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  833.                     audioContext.decodeAudioData(response.response, function(buffer) {
  834.                         const source = audioContext.createBufferSource();
  835.                         source.buffer = buffer;
  836.  
  837.                         const gainNode = audioContext.createGain();
  838.  
  839.                         // Connect the source to the gain node and the gain node to the destination
  840.                         source.connect(gainNode);
  841.                         gainNode.connect(audioContext.destination);
  842.  
  843.                         // Mute the first part and then ramp up the volume
  844.                         gainNode.gain.setValueAtTime(0, audioContext.currentTime);
  845.                         gainNode.gain.linearRampToValueAtTime(CONFIG.SOUND_VOLUME / 100, audioContext.currentTime + 0.1);
  846.  
  847.                         // Play the audio, skip the first part to avoid any "pop"
  848.                         source.start(0, 0.05);
  849.  
  850.                         // Log when the audio starts playing
  851.                         //console.log('Audio has started playing.');
  852.  
  853.                         // Save the current audio context and source for stopping later
  854.                         state.currentAudio = {
  855.                             context: audioContext,
  856.                             source: source
  857.                         };
  858.  
  859.                         // Set currentlyPlayingAudio to false when the audio ends
  860.                         source.onended = function() {
  861.                             state.currentlyPlayingAudio = false;
  862.                         };
  863.                     }, function(error) {
  864.                         console.error('Error decoding audio:', error);
  865.                         state.currentlyPlayingAudio = false;
  866.                     });
  867.                 },
  868.                 onerror: function(error) {
  869.                     console.error('Error fetching audio:', error);
  870.                     state.currentlyPlayingAudio = false;
  871.                 }
  872.             });
  873.         }
  874.     }
  875.  
  876.     // has to be declared (referenced in multiple functions but definition requires variables local to one function)
  877.     let hotkeysListener;
  878.  
  879.     function renderImageAndPlayAudio(vocab, shouldAutoPlaySound) {
  880.         const example = state.examples[state.currentExampleIndex] || {};
  881.         const imageUrl = example.image_url || null;
  882.         const soundUrl = example.sound_url || null;
  883.         const sentence = example.sentence || null;
  884.         const translation = example.translation || null;
  885.         const deck_name = example.deck_name || null;
  886.         const storedValue = getItem(state.vocab);
  887.         const isBlacklisted = storedValue && storedValue.split(',').length > 1 && parseInt(storedValue.split(',')[1], 10) === 2;
  888.  
  889.         // Remove any existing container
  890.         removeExistingContainer();
  891.         if (!shouldRenderContainer()) return;
  892.  
  893.         // Create and append the main wrapper and text button container
  894.         const wrapperDiv = createWrapperDiv();
  895.         const textDiv = createButtonContainer(soundUrl, vocab, state.exactSearch);
  896.         wrapperDiv.appendChild(textDiv);
  897.  
  898.  
  899.  
  900.         const createTextElement = (text) => {
  901.             const textElement = document.createElement('div');
  902.             textElement.textContent = text;
  903.             textElement.style.padding = '100px 0';
  904.             textElement.style.whiteSpace = 'pre'; // Ensures newlines are respected
  905.             return textElement;
  906.         };
  907.  
  908.         if (isBlacklisted) {
  909.             wrapperDiv.appendChild(createTextElement('BLACKLISTED'));
  910.             shouldAutoPlaySound = false;
  911.         } else if (state.apiDataFetched) {
  912.             if (imageUrl) {
  913.                 const imageElement = createImageElement(wrapperDiv, imageUrl, vocab, state.exactSearch);
  914.                 if (imageElement) {
  915.                     imageElement.addEventListener('click', () => playAudio(soundUrl));
  916.                 }
  917.             } else {
  918.                 wrapperDiv.appendChild(createTextElement(`NO IMAGE\n(${deck_name})`));
  919.             }
  920.             // Append sentence and translation or a placeholder text
  921.             sentence ? appendSentenceAndTranslation(wrapperDiv, sentence, translation) : appendNoneText(wrapperDiv);
  922.         } else if (state.error) {
  923.             wrapperDiv.appendChild(createTextElement('ERROR\nNO EXAMPLES FOUND\n\nRARE WORD OR\nIMMERSIONKIT API IS TEMPORARILY DOWN'));
  924.         } else {
  925.             wrapperDiv.appendChild(createTextElement('LOADING'));
  926.         }
  927.  
  928.  
  929.  
  930.         // Create navigation elements
  931.         const navigationDiv = createNavigationDiv();
  932.         const leftArrow = createLeftArrow(vocab, shouldAutoPlaySound);
  933.         const rightArrow = createRightArrow(vocab, shouldAutoPlaySound);
  934.  
  935.         // Create and append the main container
  936.         const containerDiv = createContainerDiv(leftArrow, wrapperDiv, rightArrow, navigationDiv);
  937.         appendContainer(containerDiv);
  938.  
  939.         // Auto-play sound if configured
  940.         if (CONFIG.AUTO_PLAY_SOUND && shouldAutoPlaySound) {
  941.             playAudio(soundUrl);
  942.         }
  943.  
  944.         // Link hotkeys
  945.         if (CONFIG.HOTKEYS.indexOf("None") === -1) {
  946.         const leftHotkey = CONFIG.HOTKEYS[0];
  947.         const rightHotkey = CONFIG.HOTKEYS[1];
  948.     
  949.             hotkeysListener = (event) => {
  950.                 if (event.repeat) return;
  951.                 switch (event.key.toLowerCase()) {
  952.                     case leftHotkey.toLowerCase():
  953.                         if (leftArrow.disabled) {
  954.                             // listener gets removed, so need to re-add
  955.                             window.addEventListener('keydown', hotkeysListener, {once: true});
  956.                         } else {
  957.                             leftArrow.click(); // don't need to re-add listener because renderImageAndPlayAudio() will run again
  958.                         }
  959.                         break;
  960.                     case rightHotkey.toLowerCase():
  961.                         if (rightArrow.disabled) {
  962.                             // listener gets removed, so need to re-add
  963.                             window.addEventListener('keydown', hotkeysListener, {once: true});
  964.                         } else {
  965.                             rightArrow.click(); // don't need to re-add listener because renderImageAndPlayAudio() will run again
  966.                         }
  967.                         break;
  968.                     default:
  969.                         // listener gets removed, so need to re-add
  970.                         window.addEventListener('keydown', hotkeysListener, {once: true});
  971.                 }
  972.             }
  973.             
  974.             window.addEventListener('keydown', hotkeysListener, {once: true});
  975.         }
  976.     }
  977.  
  978.     function removeExistingContainer() {
  979.         // Remove the existing container if it exists
  980.         const existingContainer = document.getElementById('immersion-kit-container');
  981.         if (existingContainer) {
  982.             existingContainer.remove();
  983.         }
  984.         window.removeEventListener('keydown', hotkeysListener);
  985.     }
  986.  
  987.     function shouldRenderContainer() {
  988.         // Determine if the container should be rendered based on the presence of certain elements
  989.         const resultVocabularySection = document.querySelector('.result.vocabulary');
  990.         const hboxWrapSection = document.querySelector('.hbox.wrap');
  991.         const subsectionMeanings = document.querySelector('.subsection-meanings');
  992.         const subsectionLabels = document.querySelectorAll('h6.subsection-label');
  993.         return resultVocabularySection || hboxWrapSection || subsectionMeanings || subsectionLabels.length >= 3;
  994.     }
  995.  
  996.     function createWrapperDiv() {
  997.         // Create and style the wrapper div
  998.         const wrapperDiv = document.createElement('div');
  999.         wrapperDiv.id = 'image-wrapper';
  1000.         wrapperDiv.style.textAlign = 'center';
  1001.         wrapperDiv.style.padding = '5px 0';
  1002.         return wrapperDiv;
  1003.     }
  1004.  
  1005.     function createImageElement(wrapperDiv, imageUrl, vocab, exactSearch) {
  1006.         // Create and return an image element with specified attributes
  1007.         const searchVocab = exactSearch ? `「${vocab}」` : vocab;
  1008.         const example = state.examples[state.currentExampleIndex] || {};
  1009.         const deck_name = example.deck_name || null;
  1010.  
  1011.         // Extract the file name from the URL
  1012.         let file_name = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);
  1013.  
  1014.         // Remove prefixes "Anime_", "A_", or "Z" from the file name
  1015.         file_name = file_name.replace(/^(Anime_|A_|Z)/, '');
  1016.  
  1017.         const titleText = `${searchVocab} #${state.currentExampleIndex + 1} \n${deck_name} \n${file_name}`;
  1018.  
  1019.         return GM_addElement(wrapperDiv, 'img', {
  1020.             src: imageUrl,
  1021.             alt: 'Embedded Image',
  1022.             title: titleText,
  1023.             style: `max-width: ${CONFIG.IMAGE_WIDTH}; margin-top: 10px; cursor: pointer;`
  1024.         });
  1025.     }
  1026.  
  1027.     function highlightVocab(sentence, vocab) {
  1028.         // Highlight vocabulary in the sentence based on configuration
  1029.         if (!CONFIG.COLORED_SENTENCE_TEXT) return sentence;
  1030.  
  1031.         if (state.exactSearch) {
  1032.             const regex = new RegExp(`(${vocab})`, 'g');
  1033.             return sentence.replace(regex, '<span style="color: var(--outline-input-color);">$1</span>');
  1034.         } else {
  1035.             return vocab.split('').reduce((acc, char) => {
  1036.                 const regex = new RegExp(char, 'g');
  1037.                 return acc.replace(regex, `<span style="color: var(--outline-input-color);">${char}</span>`);
  1038.             }, sentence);
  1039.         }
  1040.     }
  1041.  
  1042.     function appendSentenceAndTranslation(wrapperDiv, sentence, translation) {
  1043.         // Append sentence and translation to the wrapper div
  1044.         const sentenceText = document.createElement('div');
  1045.         sentenceText.innerHTML = highlightVocab(sentence, state.vocab);
  1046.         sentenceText.style.marginTop = '10px';
  1047.         sentenceText.style.fontSize = CONFIG.SENTENCE_FONT_SIZE;
  1048.         sentenceText.style.color = 'lightgray';
  1049.         sentenceText.style.maxWidth = CONFIG.IMAGE_WIDTH;
  1050.         sentenceText.style.whiteSpace = 'pre-wrap';
  1051.         wrapperDiv.appendChild(sentenceText);
  1052.  
  1053.         if (CONFIG.ENABLE_EXAMPLE_TRANSLATION && translation) {
  1054.             const translationText = document.createElement('div');
  1055.             translationText.innerHTML = replaceSpecialCharacters(translation);
  1056.             translationText.style.marginTop = '5px';
  1057.             translationText.style.fontSize = CONFIG.TRANSLATION_FONT_SIZE;
  1058.             translationText.style.color = 'var(--subsection-label-color)';
  1059.             translationText.style.maxWidth = CONFIG.IMAGE_WIDTH;
  1060.             translationText.style.whiteSpace = 'pre-wrap';
  1061.             wrapperDiv.appendChild(translationText);
  1062.         }
  1063.     }
  1064.  
  1065.     function appendNoneText(wrapperDiv) {
  1066.         // Append a "None" text to the wrapper div
  1067.         const noneText = document.createElement('div');
  1068.         noneText.textContent = 'None';
  1069.         noneText.style.marginTop = '10px';
  1070.         noneText.style.fontSize = '85%';
  1071.         noneText.style.color = 'var(--subsection-label-color)';
  1072.         wrapperDiv.appendChild(noneText);
  1073.     }
  1074.  
  1075.     function createNavigationDiv() {
  1076.         // Create and style the navigation div
  1077.         const navigationDiv = document.createElement('div');
  1078.         navigationDiv.id = 'immersion-kit-embed';
  1079.         navigationDiv.style.display = 'flex';
  1080.         navigationDiv.style.justifyContent = 'center';
  1081.         navigationDiv.style.alignItems = 'center';
  1082.         navigationDiv.style.maxWidth = CONFIG.IMAGE_WIDTH;
  1083.         navigationDiv.style.margin = '0 auto';
  1084.         return navigationDiv;
  1085.     }
  1086.  
  1087.     function createLeftArrow(vocab, shouldAutoPlaySound) {
  1088.         // Create and configure the left arrow button
  1089.         const leftArrow = document.createElement('button');
  1090.         leftArrow.textContent = '<';
  1091.         leftArrow.style.marginRight = '10px';
  1092.         leftArrow.style.width = CONFIG.ARROW_WIDTH;
  1093.         leftArrow.style.height = CONFIG.ARROW_HEIGHT;
  1094.         leftArrow.style.lineHeight = '25px';
  1095.         leftArrow.style.textAlign = 'center';
  1096.         leftArrow.style.display = 'flex';
  1097.         leftArrow.style.justifyContent = 'center';
  1098.         leftArrow.style.alignItems = 'center';
  1099.         leftArrow.style.padding = '0'; // Remove padding
  1100.         leftArrow.disabled = state.currentExampleIndex === 0;
  1101.         leftArrow.addEventListener('click', () => {
  1102.             if (state.currentExampleIndex > 0) {
  1103.                 state.currentExampleIndex--;
  1104.                 state.currentlyPlayingAudio = false;
  1105.                 renderImageAndPlayAudio(vocab, shouldAutoPlaySound);
  1106.                 preloadImages();
  1107.             }
  1108.         });
  1109.         return leftArrow;
  1110.     }
  1111.  
  1112.     function createRightArrow(vocab, shouldAutoPlaySound) {
  1113.         // Create and configure the right arrow button
  1114.         const rightArrow = document.createElement('button');
  1115.         rightArrow.textContent = '>';
  1116.         rightArrow.style.marginLeft = '10px';
  1117.         rightArrow.style.width = CONFIG.ARROW_WIDTH;
  1118.         rightArrow.style.height = CONFIG.ARROW_HEIGHT;
  1119.         rightArrow.style.lineHeight = '25px';
  1120.         rightArrow.style.textAlign = 'center';
  1121.         rightArrow.style.display = 'flex';
  1122.         rightArrow.style.justifyContent = 'center';
  1123.         rightArrow.style.alignItems = 'center';
  1124.         rightArrow.style.padding = '0'; // Remove padding
  1125.         rightArrow.disabled = state.currentExampleIndex >= state.examples.length - 1;
  1126.         rightArrow.addEventListener('click', () => {
  1127.             if (state.currentExampleIndex < state.examples.length - 1) {
  1128.                 state.currentExampleIndex++;
  1129.                 state.currentlyPlayingAudio = false;
  1130.                 renderImageAndPlayAudio(vocab, shouldAutoPlaySound);
  1131.                 preloadImages();
  1132.             }
  1133.         });
  1134.         return rightArrow;
  1135.     }
  1136.  
  1137.     function createContainerDiv(leftArrow, wrapperDiv, rightArrow, navigationDiv) {
  1138.         // Create and configure the main container div
  1139.         const containerDiv = document.createElement('div');
  1140.         containerDiv.id = 'immersion-kit-container';
  1141.         containerDiv.style.display = 'flex';
  1142.         containerDiv.style.alignItems = 'center';
  1143.         containerDiv.style.justifyContent = 'center';
  1144.         containerDiv.style.flexDirection = 'column';
  1145.  
  1146.         const arrowWrapperDiv = document.createElement('div');
  1147.         arrowWrapperDiv.style.display = 'flex';
  1148.         arrowWrapperDiv.style.alignItems = 'center';
  1149.         arrowWrapperDiv.style.justifyContent = 'center';
  1150.  
  1151.         arrowWrapperDiv.append(leftArrow, wrapperDiv, rightArrow);
  1152.         containerDiv.append(arrowWrapperDiv, navigationDiv);
  1153.  
  1154.         return containerDiv;
  1155.     }
  1156.  
  1157.     function appendContainer(containerDiv) {
  1158.         // Append the container div to the appropriate section based on configuration
  1159.         const resultVocabularySection = document.querySelector('.result.vocabulary');
  1160.         const hboxWrapSection = document.querySelector('.hbox.wrap');
  1161.         const subsectionMeanings = document.querySelector('.subsection-meanings');
  1162.         const subsectionComposedOfKanji = document.querySelector('.subsection-composed-of-kanji');
  1163.         const subsectionPitchAccent = document.querySelector('.subsection-pitch-accent');
  1164.         const subsectionLabels = document.querySelectorAll('h6.subsection-label');
  1165.         const vboxGap = document.querySelector('.vbox.gap');
  1166.         const styleSheet = document.querySelector('link[rel="stylesheet"]').sheet;
  1167.  
  1168.         if (CONFIG.WIDE_MODE && subsectionMeanings) {
  1169.             const wrapper = document.createElement('div');
  1170.             wrapper.style.display = 'flex';
  1171.             wrapper.style.alignItems = 'flex-start';
  1172.             styleSheet.insertRule('.subsection-meanings { max-width: none !important; }', styleSheet.cssRules.length);
  1173.  
  1174.             const originalContentWrapper = document.createElement('div');
  1175.             originalContentWrapper.style.flex = '1';
  1176.             originalContentWrapper.appendChild(subsectionMeanings);
  1177.  
  1178.             if (subsectionComposedOfKanji) {
  1179.                 const newline1 = document.createElement('br');
  1180.                 originalContentWrapper.appendChild(newline1);
  1181.                 originalContentWrapper.appendChild(subsectionComposedOfKanji);
  1182.             }
  1183.             if (subsectionPitchAccent) {
  1184.                 const newline2 = document.createElement('br');
  1185.                 originalContentWrapper.appendChild(newline2);
  1186.                 originalContentWrapper.appendChild(subsectionPitchAccent);
  1187.             }
  1188.  
  1189.             if (CONFIG.DEFINITIONS_ON_RIGHT_IN_WIDE_MODE) {
  1190.                 wrapper.appendChild(containerDiv);
  1191.                 wrapper.appendChild(originalContentWrapper);
  1192.             } else {
  1193.                 wrapper.appendChild(originalContentWrapper);
  1194.                 wrapper.appendChild(containerDiv);
  1195.             }
  1196.             
  1197.             if (vboxGap) {
  1198.                 const existingDynamicDiv = vboxGap.querySelector('#dynamic-content');
  1199.                 if (existingDynamicDiv) {
  1200.                     existingDynamicDiv.remove();
  1201.                 }
  1202.  
  1203.                 const dynamicDiv = document.createElement('div');
  1204.                 dynamicDiv.id = 'dynamic-content';
  1205.                 dynamicDiv.appendChild(wrapper);
  1206.  
  1207.                 if (window.location.href.includes('vocabulary')) {
  1208.                     vboxGap.insertBefore(dynamicDiv, vboxGap.children[1]);
  1209.                 } else {
  1210.                     vboxGap.insertBefore(dynamicDiv, vboxGap.firstChild);
  1211.                 }
  1212.             }
  1213.         } else {
  1214.             if (state.embedAboveSubsectionMeanings && subsectionMeanings) {
  1215.                 subsectionMeanings.parentNode.insertBefore(containerDiv, subsectionMeanings);
  1216.             } else if (resultVocabularySection) {
  1217.                 resultVocabularySection.parentNode.insertBefore(containerDiv, resultVocabularySection);
  1218.             } else if (hboxWrapSection) {
  1219.                 hboxWrapSection.parentNode.insertBefore(containerDiv, hboxWrapSection);
  1220.             } else if (subsectionLabels.length >= 4) {
  1221.                 subsectionLabels[3].parentNode.insertBefore(containerDiv, subsectionLabels[3]);
  1222.             }
  1223.         }
  1224.     }
  1225.  
  1226.     function embedImageAndPlayAudio() {
  1227.         // Embed the image and play audio, removing existing navigation div if present
  1228.         const existingNavigationDiv = document.getElementById('immersion-kit-embed');
  1229.         if (existingNavigationDiv) existingNavigationDiv.remove();
  1230.  
  1231.         renderImageAndPlayAudio(state.vocab, CONFIG.AUTO_PLAY_SOUND);
  1232.         preloadImages();
  1233.     }
  1234.  
  1235.     function replaceSpecialCharacters(text) {
  1236.         // Replace special characters in the text
  1237.         return text.replace(/<br>/g, '\n').replace(/&quot;/g, '"').replace(/\n/g, '<br>');
  1238.     }
  1239.  
  1240.     function preloadImages() {
  1241.         // Preload images around the current example index
  1242.         const preloadDiv = GM_addElement(document.body, 'div', { style: 'display: none;' });
  1243.         const startIndex = Math.max(0, state.currentExampleIndex - CONFIG.NUMBER_OF_PRELOADS);
  1244.         const endIndex = Math.min(state.examples.length - 1, state.currentExampleIndex + CONFIG.NUMBER_OF_PRELOADS);
  1245.  
  1246.         for (let i = startIndex; i <= endIndex; i++) {
  1247.             if (!state.preloadedIndices.has(i) && state.examples[i].image_url) {
  1248.                 GM_addElement(preloadDiv, 'img', { src: state.examples[i].image_url });
  1249.                 state.preloadedIndices.add(i);
  1250.             }
  1251.         }
  1252.     }
  1253.  
  1254.  
  1255.     //MENU FUNCTIONS=====================================================================================================================
  1256.     ////FILE OPERATIONS=====================================================================================================================
  1257.     function handleImportButtonClick() {
  1258.         handleFileInput('application/json', importFavorites);
  1259.     }
  1260.  
  1261.     function handleImportDButtonClick() {
  1262.         handleFileInput('application/json', importData);
  1263.     }
  1264.  
  1265.     function handleFileInput(acceptType, callback) {
  1266.         const fileInput = document.createElement('input');
  1267.         fileInput.type = 'file';
  1268.         fileInput.accept = acceptType;
  1269.         fileInput.addEventListener('change', callback);
  1270.         fileInput.click();
  1271.     }
  1272.  
  1273.     function createBlobAndDownload(data, filename, type) {
  1274.         const blob = new Blob([data], { type });
  1275.         const url = URL.createObjectURL(blob);
  1276.         const a = document.createElement('a');
  1277.         a.href = url;
  1278.         a.download = filename;
  1279.         document.body.appendChild(a);
  1280.         a.click();
  1281.         document.body.removeChild(a);
  1282.         URL.revokeObjectURL(url);
  1283.     }
  1284.  
  1285.     function addBlacklist() {
  1286.         setItem(state.vocab, `0,2`);
  1287.         location.reload();
  1288.     }
  1289.  
  1290.     function remBlacklist() {
  1291.         removeItem(state.vocab);
  1292.         location.reload();
  1293.     }
  1294.  
  1295.     function exportFavorites() {
  1296.         const favorites = {};
  1297.         for (let i = 0; i < localStorage.length; i++) {
  1298.             const key = localStorage.key(i);
  1299.             if (key.startsWith(scriptPrefix)) {
  1300.                 const keyPrefixless = key.substring(scriptPrefix.length); // chop off the script prefix
  1301.                 if (!keyPrefixless.startsWith(configPrefix)) {
  1302.                     favorites[keyPrefixless] = localStorage.getItem(key);
  1303.                     // For backwards compatibility keep the exported keys prefixless
  1304.                 }
  1305.             }
  1306.         }
  1307.         const data = JSON.stringify(favorites, null, 2);
  1308.         createBlobAndDownload(data, 'favorites.json', 'application/json');
  1309.     }
  1310.  
  1311.     function importFavorites(event) {
  1312.         const file = event.target.files[0];
  1313.         if (!file) return;
  1314.  
  1315.         const reader = new FileReader();
  1316.         reader.onload = function(e) {
  1317.             try {
  1318.                 const favorites = JSON.parse(e.target.result);
  1319.                 for (const key in favorites) {
  1320.                     setItem(key, favorites[key]);
  1321.                 }
  1322.                 alert('Favorites imported successfully!');
  1323.                 location.reload();
  1324.             } catch (error) {
  1325.                 alert('Error importing favorites:', error);
  1326.             }
  1327.         };
  1328.         reader.readAsText(file);
  1329.     }
  1330.  
  1331.     async function exportData() {
  1332.         const dataEntries = {};
  1333.  
  1334.         try {
  1335.             const db = await IndexedDBManager.open();
  1336.             const indexedDBData = await IndexedDBManager.getAll(db);
  1337.             indexedDBData.forEach(item => {
  1338.                 dataEntries[item.keyword] = item.data;
  1339.             });
  1340.  
  1341.             const data = JSON.stringify(dataEntries, null, 2);
  1342.             createBlobAndDownload(data, 'data.json', 'application/json');
  1343.         } catch (error) {
  1344.             console.error('Error exporting data from IndexedDB:', error);
  1345.         }
  1346.     }
  1347.  
  1348.     async function importData(event) {
  1349.         const file = event.target.files[0];
  1350.         if (!file) return;
  1351.  
  1352.         const reader = new FileReader();
  1353.         reader.onload = async function(e) {
  1354.             try {
  1355.                 const dataEntries = JSON.parse(e.target.result);
  1356.  
  1357.                 const db = await IndexedDBManager.open();
  1358.                 for (const key in dataEntries) {
  1359.                     await IndexedDBManager.save(db, key, dataEntries[key]);
  1360.                 }
  1361.  
  1362.                 alert('Data imported successfully!');
  1363.                 location.reload();
  1364.             } catch (error) {
  1365.                 alert('Error importing data:', error);
  1366.             }
  1367.         };
  1368.         reader.readAsText(file);
  1369.     }
  1370.  
  1371.  
  1372.     ////CONFIRMATION
  1373.     function createConfirmationPopup(messageText, onYes, onNo) {
  1374.         // Create a confirmation popup with Yes and No buttons
  1375.         const popupOverlay = document.createElement('div');
  1376.         popupOverlay.style.position = 'fixed';
  1377.         popupOverlay.style.top = '0';
  1378.         popupOverlay.style.left = '0';
  1379.         popupOverlay.style.width = '100%';
  1380.         popupOverlay.style.height = '100%';
  1381.         popupOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
  1382.         popupOverlay.style.zIndex = '1001';
  1383.         popupOverlay.style.display = 'flex';
  1384.         popupOverlay.style.justifyContent = 'center';
  1385.         popupOverlay.style.alignItems = 'center';
  1386.  
  1387.         const popupContent = document.createElement('div');
  1388.         popupContent.style.backgroundColor = 'var(--background-color)';
  1389.         popupContent.style.padding = '20px';
  1390.         popupContent.style.borderRadius = '5px';
  1391.         popupContent.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  1392.         popupContent.style.textAlign = 'center';
  1393.  
  1394.         const message = document.createElement('p');
  1395.         message.textContent = messageText;
  1396.  
  1397.         const yesButton = document.createElement('button');
  1398.         yesButton.textContent = 'Yes';
  1399.         yesButton.style.backgroundColor = '#C82800';
  1400.         yesButton.style.marginRight = '10px';
  1401.         yesButton.addEventListener('click', () => {
  1402.             onYes();
  1403.             document.body.removeChild(popupOverlay);
  1404.         });
  1405.  
  1406.         const noButton = document.createElement('button');
  1407.         noButton.textContent = 'No';
  1408.         noButton.addEventListener('click', () => {
  1409.             onNo();
  1410.             document.body.removeChild(popupOverlay);
  1411.         });
  1412.  
  1413.         popupContent.appendChild(message);
  1414.         popupContent.appendChild(yesButton);
  1415.         popupContent.appendChild(noButton);
  1416.         popupOverlay.appendChild(popupContent);
  1417.  
  1418.         document.body.appendChild(popupOverlay);
  1419.     }
  1420.  
  1421.     ////BUTTONS
  1422.     function createActionButtonsContainer() {
  1423.         const actionButtonWidth = '100px';
  1424.  
  1425.         const closeButton = createButton('Close', '10px', closeOverlayMenu, actionButtonWidth);
  1426.         const saveButton = createButton('Save', '10px', saveConfig, actionButtonWidth);
  1427.         const defaultButton = createDefaultButton(actionButtonWidth);
  1428.         const deleteButton = createDeleteButton(actionButtonWidth);
  1429.  
  1430.         const actionButtonsContainer = document.createElement('div');
  1431.         actionButtonsContainer.style.textAlign = 'center';
  1432.         actionButtonsContainer.style.marginTop = '10px';
  1433.         actionButtonsContainer.append(closeButton, saveButton, defaultButton, deleteButton);
  1434.  
  1435.         return actionButtonsContainer;
  1436.     }
  1437.  
  1438.     function createMenuButtons() {
  1439.         const blacklistContainer = createBlacklistContainer();
  1440.         const favoritesContainer = createFavoritesContainer();
  1441.         const dataContainer = createDataContainer();
  1442.         const actionButtonsContainer = createActionButtonsContainer();
  1443.  
  1444.         const buttonContainer = document.createElement('div');
  1445.         buttonContainer.append(blacklistContainer,favoritesContainer,dataContainer,actionButtonsContainer);
  1446.  
  1447.         return buttonContainer;
  1448.     }
  1449.  
  1450.     function createButton(text, margin, onClick, width) {
  1451.         // Create a button element with specified properties
  1452.         const button = document.createElement('button');
  1453.         button.textContent = text;
  1454.         button.style.margin = margin;
  1455.         button.style.width = width;
  1456.         button.style.textAlign = 'center';
  1457.         button.style.display = 'inline-block';
  1458.         button.style.lineHeight = '30px';
  1459.         button.style.padding = '5px 0';
  1460.         button.addEventListener('click', onClick);
  1461.         return button;
  1462.     }
  1463.  
  1464.     ////BLACKLIST BUTTONS
  1465.     function createBlacklistContainer() {
  1466.         const blacklistButtonWidth = '200px';
  1467.  
  1468.         const addBlacklistButton = createButton('Add to Blacklist', '10px', addBlacklist, blacklistButtonWidth);
  1469.         const remBlacklistButton = createButton('Remove from Blacklist', '10px', remBlacklist, blacklistButtonWidth);
  1470.  
  1471.         const blacklistContainer = document.createElement('div');
  1472.         blacklistContainer.style.textAlign = 'center';
  1473.         blacklistContainer.style.marginTop = '10px';
  1474.         blacklistContainer.append(addBlacklistButton, remBlacklistButton);
  1475.  
  1476.         return blacklistContainer;
  1477.     }
  1478.     ////FAVORITE BUTTONS
  1479.     function createFavoritesContainer() {
  1480.         const favoritesButtonWidth = '200px';
  1481.  
  1482.         const exportButton = createButton('Export Favorites', '10px', exportFavorites, favoritesButtonWidth);
  1483.         const importButton = createButton('Import Favorites', '10px', handleImportButtonClick, favoritesButtonWidth);
  1484.  
  1485.         const favoritesContainer = document.createElement('div');
  1486.         favoritesContainer.style.textAlign = 'center';
  1487.         favoritesContainer.style.marginTop = '10px';
  1488.         favoritesContainer.append(exportButton, importButton);
  1489.  
  1490.         return favoritesContainer;
  1491.  
  1492.     }
  1493.     ////DATA BUTTONS
  1494.     function createDataContainer() {
  1495.         const dataButtonWidth = '200px';
  1496.  
  1497.         const exportButton = createButton('Export Data', '10px', exportData, dataButtonWidth);
  1498.         const importButton = createButton('Import Data', '10px', handleImportDButtonClick, dataButtonWidth);
  1499.  
  1500.         const dataContainer = document.createElement('div');
  1501.         dataContainer.style.textAlign = 'center';
  1502.         dataContainer.style.marginTop = '10px';
  1503.         dataContainer.append(exportButton, importButton);
  1504.  
  1505.         return dataContainer;
  1506.     }
  1507.  
  1508.     ////CLOSE BUTTON
  1509.     function closeOverlayMenu() {
  1510.         loadConfig();
  1511.         document.body.removeChild(document.getElementById('overlayMenu'));
  1512.     }
  1513.  
  1514.     ////SAVE BUTTON
  1515.     function saveConfig() {
  1516.         const overlay = document.getElementById('overlayMenu');
  1517.         if (!overlay) return;
  1518.  
  1519.         const inputs = overlay.querySelectorAll('input, span');
  1520.         const { changes, minimumExampleLengthChanged, newMinimumExampleLength } = gatherChanges(inputs);
  1521.  
  1522.         if (minimumExampleLengthChanged) {
  1523.             handleMinimumExampleLengthChange(newMinimumExampleLength, changes);
  1524.         } else {
  1525.             applyChanges(changes);
  1526.             finalizeSaveConfig();
  1527.             setVocabSize();
  1528.             setPageWidth();
  1529.         }
  1530.     }
  1531.  
  1532.     function gatherChanges(inputs) {
  1533.         let minimumExampleLengthChanged = false;
  1534.         let newMinimumExampleLength;
  1535.         const changes = {};
  1536.  
  1537.         inputs.forEach(input => {
  1538.             const key = input.getAttribute('data-key');
  1539.             const type = input.getAttribute('data-type');
  1540.             let value;
  1541.  
  1542.             if (type === 'boolean') {
  1543.                 value = input.checked;
  1544.             } else if (type === 'number') {
  1545.                 value = parseFloat(input.textContent);
  1546.             } else if (type === 'string') {
  1547.                 value = input.textContent;
  1548.             } else if (type === 'object' && key === 'HOTKEYS') {
  1549.                 value = input.textContent.replace(' and ', ' ');
  1550.             }
  1551.  
  1552.             if (key && type) {
  1553.                 const typePart = input.getAttribute('data-type-part');
  1554.                 const originalFormattedType = typePart.slice(1, -1);
  1555.  
  1556.                 if (key === 'MINIMUM_EXAMPLE_LENGTH' && CONFIG.MINIMUM_EXAMPLE_LENGTH !== value) {
  1557.                     minimumExampleLengthChanged = true;
  1558.                     newMinimumExampleLength = value;
  1559.                 }
  1560.  
  1561.                 changes[configPrefix + key] = value + originalFormattedType;
  1562.             }
  1563.         });
  1564.  
  1565.         return { changes, minimumExampleLengthChanged, newMinimumExampleLength };
  1566.     }
  1567.  
  1568.     function handleMinimumExampleLengthChange(newMinimumExampleLength, changes) {
  1569.         createConfirmationPopup(
  1570.             'Changing Minimum Example Length will break your current favorites. They will all be deleted. Are you sure?',
  1571.             async () => {
  1572.                 await IndexedDBManager.delete();
  1573.                 CONFIG.MINIMUM_EXAMPLE_LENGTH = newMinimumExampleLength;
  1574.                 setItem(`${configPrefix}MINIMUM_EXAMPLE_LENGTH`, newMinimumExampleLength);
  1575.                 applyChanges(changes);
  1576.                 clearNonConfigLocalStorage();
  1577.                 finalizeSaveConfig();
  1578.                 location.reload();
  1579.             },
  1580.             () => {
  1581.                 const overlay = document.getElementById('overlayMenu');
  1582.                 document.body.removeChild(overlay);
  1583.                 document.body.appendChild(createOverlayMenu());
  1584.             }
  1585.         );
  1586.     }
  1587.  
  1588.     function clearNonConfigLocalStorage() {
  1589.         for (let i = 0; i < localStorage.length; i++) {
  1590.             const key = localStorage.key(i);
  1591.             if (key && key.startsWith(scriptPrefix) && !key.startsWith(scriptPrefix + configPrefix)) {
  1592.                 localStorage.removeItem(key);
  1593.                 i--; // Adjust index after removal
  1594.             }
  1595.         }
  1596.     }
  1597.  
  1598.     function applyChanges(changes) {
  1599.         for (const key in changes) {
  1600.             setItem(key, changes[key]);
  1601.         }
  1602.     }
  1603.  
  1604.     function finalizeSaveConfig() {
  1605.         loadConfig();
  1606.         window.removeEventListener('keydown', hotkeysListener);
  1607.         renderImageAndPlayAudio(state.vocab, CONFIG.AUTO_PLAY_SOUND);
  1608.         const overlay = document.getElementById('overlayMenu');
  1609.         if (overlay) {
  1610.             document.body.removeChild(overlay);
  1611.         }
  1612.     }
  1613.  
  1614.  
  1615.     ////DEFAULT BUTTON
  1616.     function createDefaultButton(width) {
  1617.         const defaultButton = createButton('Default', '10px', () => {
  1618.             createConfirmationPopup(
  1619.                 'This will reset all your settings to default. Are you sure?',
  1620.                 () => {
  1621.                     Object.keys(localStorage).forEach(key => {
  1622.                         if (key.startsWith(scriptPrefix + configPrefix)) {
  1623.                             localStorage.removeItem(key);
  1624.                         }
  1625.                     });
  1626.                     location.reload();
  1627.                 },
  1628.                 () => {
  1629.                     const overlay = document.getElementById('overlayMenu');
  1630.                     if (overlay) {
  1631.                         document.body.removeChild(overlay);
  1632.                     }
  1633.                     loadConfig();
  1634.                     document.body.appendChild(createOverlayMenu());
  1635.                 }
  1636.             );
  1637.         }, width);
  1638.         defaultButton.style.backgroundColor = '#C82800';
  1639.         defaultButton.style.color = 'white';
  1640.         return defaultButton;
  1641.     }
  1642.  
  1643.  
  1644.     ////DELETE BUTTON
  1645.     function createDeleteButton(width) {
  1646.         const deleteButton = createButton('DELETE', '10px', () => {
  1647.             createConfirmationPopup(
  1648.                 'This will delete all your favorites and cached data. Are you sure?',
  1649.                 async () => {
  1650.                     await IndexedDBManager.delete();
  1651.                     Object.keys(localStorage).forEach(key => {
  1652.                         if (key.startsWith(scriptPrefix) && !key.startsWith(scriptPrefix + configPrefix)) {
  1653.                             localStorage.removeItem(key);
  1654.                         }
  1655.                     });
  1656.                     location.reload();
  1657.                 },
  1658.                 () => {
  1659.                     const overlay = document.getElementById('overlayMenu');
  1660.                     if (overlay) {
  1661.                         document.body.removeChild(overlay);
  1662.                     }
  1663.                     loadConfig();
  1664.                     document.body.appendChild(createOverlayMenu());
  1665.                 }
  1666.             );
  1667.         }, width);
  1668.         deleteButton.style.backgroundColor = '#C82800';
  1669.         deleteButton.style.color = 'white';
  1670.         return deleteButton;
  1671.     }
  1672.  
  1673.     function createOverlayMenu() {
  1674.         // Create and return the overlay menu for configuration settings
  1675.         const overlay = document.createElement('div');
  1676.         overlay.id = 'overlayMenu';
  1677.         overlay.style.position = 'fixed';
  1678.         overlay.style.top = '0';
  1679.         overlay.style.left = '0';
  1680.         overlay.style.width = '100%';
  1681.         overlay.style.height = '100%';
  1682.         overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
  1683.         overlay.style.zIndex = '1000';
  1684.         overlay.style.display = 'flex';
  1685.         overlay.style.justifyContent = 'center';
  1686.         overlay.style.alignItems = 'center';
  1687.  
  1688.         const menuContent = document.createElement('div');
  1689.         menuContent.style.backgroundColor = 'var(--background-color)';
  1690.         menuContent.style.color = 'var(--text-color)';
  1691.         menuContent.style.padding = '20px';
  1692.         menuContent.style.borderRadius = '5px';
  1693.         menuContent.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  1694.         menuContent.style.width = '80%';
  1695.         menuContent.style.maxWidth = '550px';
  1696.         menuContent.style.maxHeight = '80%';
  1697.         menuContent.style.overflowY = 'auto';
  1698.  
  1699.         for (const [key, value] of Object.entries(CONFIG)) {
  1700.             const optionContainer = document.createElement('div');
  1701.             optionContainer.style.marginBottom = '10px';
  1702.             optionContainer.style.display = 'flex';
  1703.             optionContainer.style.alignItems = 'center';
  1704.  
  1705.             const leftContainer = document.createElement('div');
  1706.             leftContainer.style.flex = '1';
  1707.             leftContainer.style.display = 'flex';
  1708.             leftContainer.style.alignItems = 'center';
  1709.  
  1710.             const rightContainer = document.createElement('div');
  1711.             rightContainer.style.flex = '1';
  1712.             rightContainer.style.display = 'flex';
  1713.             rightContainer.style.alignItems = 'center';
  1714.             rightContainer.style.justifyContent = 'center';
  1715.  
  1716.             const label = document.createElement('label');
  1717.             label.textContent = key.replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
  1718.             label.style.marginRight = '10px';
  1719.  
  1720.             leftContainer.appendChild(label);
  1721.  
  1722.             if (typeof value === 'boolean') {
  1723.                 const checkboxContainer = document.createElement('div');
  1724.                 checkboxContainer.style.display = 'flex';
  1725.                 checkboxContainer.style.alignItems = 'center';
  1726.                 checkboxContainer.style.justifyContent = 'center';
  1727.  
  1728.                 const checkbox = document.createElement('input');
  1729.                 checkbox.type = 'checkbox';
  1730.                 checkbox.checked = value;
  1731.                 checkbox.setAttribute('data-key', key);
  1732.                 checkbox.setAttribute('data-type', 'boolean');
  1733.                 checkbox.setAttribute('data-type-part', '');
  1734.                 checkboxContainer.appendChild(checkbox);
  1735.  
  1736.                 rightContainer.appendChild(checkboxContainer);
  1737.             } else if (typeof value === 'number') {
  1738.                 const numberContainer = document.createElement('div');
  1739.                 numberContainer.style.display = 'flex';
  1740.                 numberContainer.style.alignItems = 'center';
  1741.                 numberContainer.style.justifyContent = 'center';
  1742.  
  1743.                 const decrementButton = document.createElement('button');
  1744.                 decrementButton.textContent = '-';
  1745.                 decrementButton.style.marginRight = '5px';
  1746.  
  1747.                 const input = document.createElement('span');
  1748.                 input.textContent = value;
  1749.                 input.style.margin = '0 10px';
  1750.                 input.style.minWidth = '3ch';
  1751.                 input.style.textAlign = 'center';
  1752.                 input.setAttribute('data-key', key);
  1753.                 input.setAttribute('data-type', 'number');
  1754.                 input.setAttribute('data-type-part', '');
  1755.  
  1756.                 const incrementButton = document.createElement('button');
  1757.                 incrementButton.textContent = '+';
  1758.                 incrementButton.style.marginLeft = '5px';
  1759.  
  1760.                 const updateButtonStates = () => {
  1761.                     let currentValue = parseFloat(input.textContent);
  1762.                     if (currentValue <= 0) {
  1763.                         decrementButton.disabled = true;
  1764.                         decrementButton.style.color = 'grey';
  1765.                     } else {
  1766.                         decrementButton.disabled = false;
  1767.                         decrementButton.style.color = '';
  1768.                     }
  1769.                     if (key === 'SOUND_VOLUME' && currentValue >= 100) {
  1770.                         incrementButton.disabled = true;
  1771.                         incrementButton.style.color = 'grey';
  1772.                     } else {
  1773.                         incrementButton.disabled = false;
  1774.                         incrementButton.style.color = '';
  1775.                     }
  1776.                 };
  1777.  
  1778.                 decrementButton.addEventListener('click', () => {
  1779.                     let currentValue = parseFloat(input.textContent);
  1780.                     if (currentValue > 0) {
  1781.                         if (currentValue > 200) {
  1782.                             input.textContent = currentValue - 25;
  1783.                         } else if (currentValue > 20) {
  1784.                             input.textContent = currentValue - 5;
  1785.                         } else {
  1786.                             input.textContent = currentValue - 1;
  1787.                         }
  1788.                         updateButtonStates();
  1789.                     }
  1790.                 });
  1791.  
  1792.                 incrementButton.addEventListener('click', () => {
  1793.                     let currentValue = parseFloat(input.textContent);
  1794.                     if (key === 'SOUND_VOLUME' && currentValue >= 100) {
  1795.                         return;
  1796.                     }
  1797.                     if (currentValue >= 200) {
  1798.                         input.textContent = currentValue + 25;
  1799.                     } else if (currentValue >= 20) {
  1800.                         input.textContent = currentValue + 5;
  1801.                     } else {
  1802.                         input.textContent = currentValue + 1;
  1803.                     }
  1804.                     updateButtonStates();
  1805.                 });
  1806.  
  1807.                 numberContainer.appendChild(decrementButton);
  1808.                 numberContainer.appendChild(input);
  1809.                 numberContainer.appendChild(incrementButton);
  1810.  
  1811.                 rightContainer.appendChild(numberContainer);
  1812.  
  1813.                 // Initialize button states
  1814.                 updateButtonStates();
  1815.             } else if (typeof value === 'string') {
  1816.                 const typeParts = value.split(/(\d+)/).filter(Boolean);
  1817.                 const numberParts = typeParts.filter(part => !isNaN(part)).map(Number);
  1818.  
  1819.                 const numberContainer = document.createElement('div');
  1820.                 numberContainer.style.display = 'flex';
  1821.                 numberContainer.style.alignItems = 'center';
  1822.                 numberContainer.style.justifyContent = 'center';
  1823.  
  1824.                 const typeSpan = document.createElement('span');
  1825.                 const formattedType = '(' + typeParts.filter(part => isNaN(part)).join('').replace(/_/g, ' ').toLowerCase() + ')';
  1826.                 typeSpan.textContent = formattedType;
  1827.                 typeSpan.style.marginRight = '10px';
  1828.  
  1829.                 leftContainer.appendChild(typeSpan);
  1830.  
  1831.                 typeParts.forEach(part => {
  1832.                     if (!isNaN(part)) {
  1833.                         const decrementButton = document.createElement('button');
  1834.                         decrementButton.textContent = '-';
  1835.                         decrementButton.style.marginRight = '5px';
  1836.  
  1837.                         const input = document.createElement('span');
  1838.                         input.textContent = part;
  1839.                         input.style.margin = '0 10px';
  1840.                         input.style.minWidth = '3ch';
  1841.                         input.style.textAlign = 'center';
  1842.                         input.setAttribute('data-key', key);
  1843.                         input.setAttribute('data-type', 'string');
  1844.                         input.setAttribute('data-type-part', formattedType);
  1845.  
  1846.                         const incrementButton = document.createElement('button');
  1847.                         incrementButton.textContent = '+';
  1848.                         incrementButton.style.marginLeft = '5px';
  1849.  
  1850.                         const updateButtonStates = () => {
  1851.                             let currentValue = parseFloat(input.textContent);
  1852.                             if (currentValue <= 0) {
  1853.                                 decrementButton.disabled = true;
  1854.                                 decrementButton.style.color = 'grey';
  1855.                             } else {
  1856.                                 decrementButton.disabled = false;
  1857.                                 decrementButton.style.color = '';
  1858.                             }
  1859.                             if (key === 'SOUND_VOLUME' && currentValue >= 100) {
  1860.                                 incrementButton.disabled = true;
  1861.                                 incrementButton.style.color = 'grey';
  1862.                             } else {
  1863.                                 incrementButton.disabled = false;
  1864.                                 incrementButton.style.color = '';
  1865.                             }
  1866.                         };
  1867.  
  1868.                         decrementButton.addEventListener('click', () => {
  1869.                             let currentValue = parseFloat(input.textContent);
  1870.                             if (currentValue > 0) {
  1871.                                 if (currentValue > 200) {
  1872.                                     input.textContent = currentValue - 25;
  1873.                                 } else if (currentValue > 20) {
  1874.                                     input.textContent = currentValue - 5;
  1875.                                 } else {
  1876.                                     input.textContent = currentValue - 1;
  1877.                                 }
  1878.                                 updateButtonStates();
  1879.                             }
  1880.                         });
  1881.  
  1882.                         incrementButton.addEventListener('click', () => {
  1883.                             let currentValue = parseFloat(input.textContent);
  1884.                             if (key === 'SOUND_VOLUME' && currentValue >= 100) {
  1885.                                 return;
  1886.                             }
  1887.                             if (currentValue >= 200) {
  1888.                                 input.textContent = currentValue + 25;
  1889.                             } else if (currentValue >= 20) {
  1890.                                 input.textContent = currentValue + 5;
  1891.                             } else {
  1892.                                 input.textContent = currentValue + 1;
  1893.                             }
  1894.                             updateButtonStates();
  1895.                         });
  1896.  
  1897.                         numberContainer.appendChild(decrementButton);
  1898.                         numberContainer.appendChild(input);
  1899.                         numberContainer.appendChild(incrementButton);
  1900.  
  1901.                         // Initialize button states
  1902.                         updateButtonStates();
  1903.                     }
  1904.                 });
  1905.  
  1906.                 rightContainer.appendChild(numberContainer);
  1907.             } else if (typeof value === 'object') {
  1908.                 const maxAllowedIndex = hotkeyOptions.length - 1
  1909.                 
  1910.                 let currentValue = value;
  1911.                 let choiceIndex = hotkeyOptions.indexOf(currentValue.join(' '));
  1912.                 if (choiceIndex === -1) {
  1913.                     currentValue = hotkeyOptions[0].split(' ');
  1914.                     choiceIndex = 0;
  1915.                 }
  1916.                 const textContainer = document.createElement('div');
  1917.                 textContainer.style.display = 'flex';
  1918.                 textContainer.style.alignItems = 'center';
  1919.                 textContainer.style.justifyContent = 'center';
  1920.  
  1921.                 const decrementButton = document.createElement('button');
  1922.                 decrementButton.textContent = '<';
  1923.                 decrementButton.style.marginRight = '5px';
  1924.  
  1925.                 const input = document.createElement('span');
  1926.                 input.textContent = currentValue.join(' and ');
  1927.                 input.style.margin = '0 10px';
  1928.                 input.style.minWidth = '3ch';
  1929.                 input.style.textAlign = 'center';
  1930.                 input.setAttribute('data-key', key);
  1931.                 input.setAttribute('data-type', 'object');
  1932.                 input.setAttribute('data-type-part', '');
  1933.  
  1934.                 const incrementButton = document.createElement('button');
  1935.                 incrementButton.textContent = '>';
  1936.                 incrementButton.style.marginLeft = '5px';
  1937.  
  1938.                 const updateButtonStates = () => {
  1939.                     if (choiceIndex <= 0) {
  1940.                         decrementButton.disabled = true;
  1941.                         decrementButton.style.color = 'grey';
  1942.                     } else {
  1943.                         decrementButton.disabled = false;
  1944.                         decrementButton.style.color = '';
  1945.                     }
  1946.                     if (choiceIndex >= maxAllowedIndex) {
  1947.                         incrementButton.disabled = true;
  1948.                         incrementButton.style.color = 'grey';
  1949.                     } else {
  1950.                         incrementButton.disabled = false;
  1951.                         incrementButton.style.color = '';
  1952.                     }
  1953.                 };
  1954.  
  1955.                 decrementButton.addEventListener('click', () => {
  1956.                     if (choiceIndex > 0) {
  1957.                         choiceIndex -= 1;
  1958.                         currentValue = hotkeyOptions[choiceIndex].split(' ');
  1959.                         input.textContent = currentValue.join(' and ');
  1960.                         updateButtonStates();
  1961.                     }
  1962.                 });
  1963.  
  1964.                 incrementButton.addEventListener('click', () => {
  1965.                     if (choiceIndex < maxAllowedIndex) {
  1966.                         choiceIndex += 1;
  1967.                         currentValue = hotkeyOptions[choiceIndex].split(' ');
  1968.                         input.textContent = currentValue.join(' and ');
  1969.                         updateButtonStates();
  1970.                     }
  1971.                 });
  1972.  
  1973.                 textContainer.appendChild(decrementButton);
  1974.                 textContainer.appendChild(input);
  1975.                 textContainer.appendChild(incrementButton);
  1976.  
  1977.                 // Initialize button states
  1978.                 updateButtonStates();
  1979.     
  1980.                 rightContainer.appendChild(textContainer);
  1981.             }
  1982.  
  1983.             optionContainer.appendChild(leftContainer);
  1984.             optionContainer.appendChild(rightContainer);
  1985.             menuContent.appendChild(optionContainer);
  1986.         }
  1987.  
  1988.         const menuButtons = createMenuButtons();
  1989.         menuContent.appendChild(menuButtons);
  1990.  
  1991.         overlay.appendChild(menuContent);
  1992.  
  1993.         return overlay;
  1994.     }
  1995.  
  1996.     function loadConfig() {
  1997.         for (const key in localStorage) {
  1998.             if (!key.startsWith(scriptPrefix + configPrefix) || !localStorage.hasOwnProperty(key)) {continue};
  1999.  
  2000.             const configKey = key.substring((scriptPrefix + configPrefix).length); // chop off script prefix and config prefix
  2001.             if (!CONFIG.hasOwnProperty(configKey)) {continue};
  2002.  
  2003.             const savedValue = localStorage.getItem(key);
  2004.             if (savedValue === null) {continue};
  2005.  
  2006.             const valueType = typeof CONFIG[configKey];
  2007.             if (configKey === 'HOTKEYS') {
  2008.                 CONFIG[configKey] = savedValue.split(' ')
  2009.             } else if (valueType === 'boolean') {
  2010.                 CONFIG[configKey] = savedValue === 'true';
  2011.                 if (configKey === 'DEFAULT_TO_EXACT_SEARCH') { state.exactSearch = CONFIG.DEFAULT_TO_EXACT_SEARCH }
  2012.                 // I wonder if this is the best way to do this...
  2013.                 // Probably not because we could just have a single variable to store both, but it would have to be in config and
  2014.                 // it would be a bit weird to have the program modifying config when the actual config settings aren't changing
  2015.             } else if (valueType === 'number') {
  2016.                 CONFIG[configKey] = parseFloat(savedValue);
  2017.             } else if (valueType === 'string') {
  2018.                 CONFIG[configKey] = savedValue;
  2019.             }
  2020.         }
  2021.     }
  2022.  
  2023.  
  2024.     //MAIN FUNCTIONS=====================================================================================================================
  2025.     function onPageLoad() {
  2026.         // Initialize state and determine vocabulary based on URL
  2027.         state.embedAboveSubsectionMeanings = false;
  2028.  
  2029.         const url = window.location.href;
  2030.         const machineTranslationFrame = document.getElementById('machine-translation-frame');
  2031.  
  2032.         // Proceed only if the machine translation frame is not present
  2033.         if (!machineTranslationFrame) {
  2034.  
  2035.             //display embed for first time with loading text
  2036.             embedImageAndPlayAudio();
  2037.             setPageWidth();
  2038.  
  2039.             if (url.includes('/vocabulary/')) {
  2040.                 state.vocab = parseVocabFromVocabulary();
  2041.             } else if (url.includes('/search?q=')) {
  2042.                 state.vocab = parseVocabFromSearch();
  2043.             } else if (url.includes('c=')) {
  2044.                 state.vocab = parseVocabFromAnswer();
  2045.             } else if (url.includes('/kanji/')) {
  2046.                 state.vocab = parseVocabFromKanji();
  2047.             } else {
  2048.                 state.vocab = parseVocabFromReview();
  2049.             }
  2050.         } else {
  2051.             console.log('Machine translation frame detected, skipping vocabulary parsing.');
  2052.         }
  2053.  
  2054.         // Retrieve stored data for the current vocabulary
  2055.         const { index, exactState } = getStoredData(state.vocab);
  2056.         state.currentExampleIndex = index;
  2057.         state.exactSearch = exactState;
  2058.  
  2059.         // Fetch data and embed image/audio if necessary
  2060.         if (state.vocab && !state.apiDataFetched) {
  2061.             getImmersionKitData(state.vocab, state.exactSearch)
  2062.                 .then(() => {
  2063.                 preloadImages();
  2064.                 embedImageAndPlayAudio();
  2065.             })
  2066.                 .catch(console.error);
  2067.         } else if (state.apiDataFetched) {
  2068.             embedImageAndPlayAudio();
  2069.             //preloadImages();
  2070.             setVocabSize();
  2071.             setPageWidth();
  2072.         }
  2073.     }
  2074.  
  2075.     function setPageWidth() {
  2076.         // Set the maximum width of the page
  2077.         document.body.style.maxWidth = CONFIG.PAGE_WIDTH;
  2078.     }
  2079.  
  2080.     // Observe URL changes and reload the page content accordingly
  2081.     const observer = new MutationObserver(() => {
  2082.         if (window.location.href !== observer.lastUrl) {
  2083.             observer.lastUrl = window.location.href;
  2084.             onPageLoad();
  2085.         }
  2086.     });
  2087.  
  2088.     // Function to apply styles
  2089.     function setVocabSize() {
  2090.         // Create a new style element
  2091.         const style = document.createElement('style');
  2092.         style.type = 'text/css';
  2093.         style.innerHTML = `
  2094.             .answer-box > .plain {
  2095.                 font-size: ${CONFIG.VOCAB_SIZE} !important; /* Use the configurable font size */
  2096.                 padding-bottom: 0.1rem !important; /* Retain padding */
  2097.             }
  2098.         `;
  2099.  
  2100.         // Append the new style to the document head
  2101.         document.head.appendChild(style);
  2102.     }
  2103.     observer.lastUrl = window.location.href;
  2104.     observer.observe(document, { subtree: true, childList: true });
  2105.  
  2106.     // Add event listeners for page load and URL changes
  2107.     window.addEventListener('load', onPageLoad);
  2108.     window.addEventListener('popstate', onPageLoad);
  2109.     window.addEventListener('hashchange', onPageLoad);
  2110.  
  2111.     // Initial configuration and preloading
  2112.     loadConfig();
  2113.     setPageWidth();
  2114.     setVocabSize();
  2115.     //preloadImages();
  2116.  
  2117. })();