From 0060db14a4a380d173112c3f67181a197c6bac4d Mon Sep 17 00:00:00 2001 From: FragginWagon Date: Wed, 28 Jan 2026 19:52:32 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20code=20readability=20a?= =?UTF-8?q?nd=20maintainability=20by=20reformatting=20and=20restructuring?= =?UTF-8?q?=20HTML,=20CSS,=20and=20JavaScript=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/GamemasterExplorer.vue | 284 +++++++++++++----- 1 file changed, 215 insertions(+), 69 deletions(-) diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue index 0eb5765..b6b736c 100644 --- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue +++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue @@ -16,7 +16,9 @@

No Gamemaster Files Available

Please process gamemaster data first in the Gamemaster Manager.

- Go to Gamemaster Manager + Go to Gamemaster Manager
@@ -25,11 +27,21 @@

🔍 Gamemaster Explorer

- - +
@@ -40,7 +52,10 @@
  • Ctrl+F - Focus search
  • Ctrl+C - Copy selected lines
  • Ctrl+G - Go to next search result
    • -
  • Shift+Ctrl+G - Go to previous result
    • +
  • + Shift+Ctrl+G - Go to previous + result +
  • Escape - Clear selection / Close dialogs
    • @@ -76,11 +91,19 @@ - {{ fileLines.length.toLocaleString() }} lines + {{ fileLines.length.toLocaleString() }} lines @@ -94,16 +117,38 @@ placeholder="Search in file... (Ctrl+F)" class="search-input" /> - - - -
    - {{ currentResultIndex + 1 }} / {{ searchResults.length }} - - +
    -
    +
    + {{ currentResultIndex + 1 }} / {{ searchResults.length }} + + +
    + +
    -
    -
    +
    +
    {{ operationProgress.message }}
    -
    +
    - {{ item.lineNumber }} - 
    {{ item.content }}
    + {{ + item.lineNumber + }} + 
    {{ item.content }}
    @@ -176,29 +252,42 @@ :key="line.lineNumber" :class="[ 'line', - { 'selected': selectedLines.has(line.lineNumber) }, + { selected: selectedLines.has(line.lineNumber) }, { 'highlight-match': line.hasMatch } ]" @click="toggleLineSelection(line.lineNumber, $event)" > - {{ line.lineNumber }} - 
    {{ line.content }}
    + {{ + line.lineNumber + }} + 
    {{ line.content }}
    - ⚠️ File exceeds 10,000 lines. Showing first 10,000 lines only. Use search or filters to find specific content. + ⚠️ File exceeds 10,000 lines. Showing first 10,000 lines only. Use + search or filters to find specific content.
    - - @@ -206,8 +295,12 @@
    -
    ✓ Copied to clipboard!
    -
    ✗ {{ clipboard.error.value }}
    +
    + ✓ Copied to clipboard! +
    +
    + ✗ {{ clipboard.error.value }} +
    @@ -219,9 +312,21 @@ import { GamemasterClient } from '@/utilities/gamemaster-client.js'; import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts.js'; import { useUrlState } from '@/composables/useUrlState.js'; import { useClipboard } from '@/composables/useClipboard.js'; -import { useLocalStorage, useSearchHistory } from '@/composables/useLocalStorage.js'; -import { perfMonitor, debounce, getDevicePerformance } from '@/utilities/performance-utils.js'; -import { extractJsonPaths, extractJsonPathsLazy, truncateMiddle, getValueByPath } from '@/utilities/json-utils.js'; +import { + useLocalStorage, + useSearchHistory +} from '@/composables/useLocalStorage.js'; +import { + perfMonitor, + debounce, + getDevicePerformance +} from '@/utilities/performance-utils.js'; +import { + extractJsonPaths, + extractJsonPathsLazy, + truncateMiddle, + getValueByPath +} from '@/utilities/json-utils.js'; // Core state const loading = ref(true); @@ -304,7 +409,7 @@ useKeyboardShortcuts({ 'ctrl+c': copySelected, 'ctrl+g': goToNextResult, 'shift+ctrl+g': goToPrevResult, - 'escape': () => { + escape: () => { if (showHelp.value || showSettings.value) { showHelp.value = false; showSettings.value = false; @@ -361,7 +466,7 @@ async function loadFile() { fileContent.value = JSON.stringify(data, null, 2); fileLines.value = fileContent.value.split('\n'); - + // Limit to 10K lines const linesToDisplay = fileLines.value.slice(0, 10000); displayLines.value = linesToDisplay.map((content, index) => ({ @@ -372,7 +477,7 @@ async function loadFile() { // Extract JSON paths for filtering (in background) jsonPaths.value = extractJsonPaths(data); - extractJsonPathsLazy(data, (paths) => { + extractJsonPathsLazy(data, paths => { jsonPaths.value = paths; }); @@ -402,13 +507,18 @@ function onFileChange() { const onSearchInput = debounce(async () => { if (!searchQuery.value.trim()) { searchResults.value = []; - displayLines.value.forEach(line => line.hasMatch = false); + displayLines.value.forEach(line => (line.hasMatch = false)); return; } // Show progress for long searches const searchTerm = searchQuery.value.toLowerCase(); - operationProgress.value = { active: true, percent: 0, message: 'Searching...', complete: false }; + operationProgress.value = { + active: true, + percent: 0, + message: 'Searching...', + complete: false + }; await perfMonitor('Search', async () => { const results = []; @@ -418,20 +528,23 @@ const onSearchInput = debounce(async () => { // Process in chunks for (let i = 0; i < displayLines.value.length; i += chunkSize) { const chunk = displayLines.value.slice(i, i + chunkSize); - + chunk.forEach((line, idx) => { const actualIndex = i + idx; const matches = line.content.toLowerCase().includes(searchTerm); displayLines.value[actualIndex].hasMatch = matches; - + if (matches) { results.push(actualIndex); } }); // Update progress - operationProgress.value.percent = Math.min(((i + chunkSize) / displayLines.value.length) * 100, 100); - + operationProgress.value.percent = Math.min( + ((i + chunkSize) / displayLines.value.length) * 100, + 100 + ); + // Yield to browser if (i % (chunkSize * 3) === 0) { await new Promise(resolve => setTimeout(resolve, 0)); @@ -455,18 +568,21 @@ const onSearchInput = debounce(async () => { function clearSearch() { searchQuery.value = ''; searchResults.value = []; - displayLines.value.forEach(line => line.hasMatch = false); + displayLines.value.forEach(line => (line.hasMatch = false)); } function goToNextResult() { if (searchResults.value.length === 0) return; - currentResultIndex.value = (currentResultIndex.value + 1) % searchResults.value.length; + currentResultIndex.value = + (currentResultIndex.value + 1) % searchResults.value.length; scrollToResult(); } function goToPrevResult() { if (searchResults.value.length === 0) return; - currentResultIndex.value = (currentResultIndex.value - 1 + searchResults.value.length) % searchResults.value.length; + currentResultIndex.value = + (currentResultIndex.value - 1 + searchResults.value.length) % + searchResults.value.length; scrollToResult(); } @@ -484,7 +600,12 @@ function applyHistoryItem(item) { function onFilterChange() { // Implement property filtering // This is complex - needs to parse JSON and filter based on property paths - console.log('Filter change:', filterProperty.value, filterValue.value, filterMode.value); + console.log( + 'Filter change:', + filterProperty.value, + filterValue.value, + filterMode.value + ); } function toggleLineSelection(lineNumber, event) { @@ -493,7 +614,7 @@ function toggleLineSelection(lineNumber, event) { const lastSelected = Math.max(...selectedLines.value); const start = Math.min(lastSelected, lineNumber); const end = Math.max(lastSelected, lineNumber); - + for (let i = start; i <= end; i++) { selectedLines.value.add(i); } @@ -515,9 +636,13 @@ async function copySelected() { if (selectedLines.value.size === 0) return; const lines = [...selectedLines.value].sort((a, b) => a - b); - const content = lines.map(lineNum => { - return displayLines.value.find(l => l.lineNumber === lineNum)?.content || ''; - }).join('\n'); + const content = lines + .map(lineNum => { + return ( + displayLines.value.find(l => l.lineNumber === lineNum)?.content || '' + ); + }) + .join('\n'); await clipboard.copyToClipboard(content); } @@ -528,11 +653,15 @@ async function copyAll() { function exportSelected() { if (selectedLines.value.size === 0) return; - + const lines = [...selectedLines.value].sort((a, b) => a - b); - const content = lines.map(lineNum => { - return displayLines.value.find(l => l.lineNumber === lineNum)?.content || ''; - }).join('\n'); + const content = lines + .map(lineNum => { + return ( + displayLines.value.find(l => l.lineNumber === lineNum)?.content || '' + ); + }) + .join('\n'); downloadFile(content, `${selectedFile.value}-selected-${Date.now()}.json`); } @@ -563,7 +692,7 @@ function formatSize(bytes) { const k = 1024; const sizes = ['B', 'KB', 'MB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); - return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]; + return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]; } // Lifecycle @@ -581,7 +710,9 @@ onMounted(() => { } /* Loading & Error States */ -.loading-state, .error-state, .no-files-state { +.loading-state, +.error-state, +.no-files-state { display: flex; flex-direction: column; align-items: center; @@ -601,8 +732,12 @@ onMounted(() => { } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } /* Header */ @@ -643,7 +778,8 @@ onMounted(() => { } /* Help & Settings Panels */ -.help-panel, .settings-panel { +.help-panel, +.settings-panel { background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; @@ -651,7 +787,8 @@ onMounted(() => { margin-bottom: 1rem; } -.help-panel h3, .settings-panel h3 { +.help-panel h3, +.settings-panel h3 { margin-top: 0; } @@ -785,7 +922,8 @@ onMounted(() => { flex-wrap: wrap; } -.property-filter select, .filter-value-input { +.property-filter select, +.filter-value-input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; @@ -821,8 +959,13 @@ onMounted(() => { } @keyframes blink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } } .progress-text { @@ -978,7 +1121,8 @@ onMounted(() => { font-size: 1.25rem; } - .file-selector, .property-filter { + .file-selector, + .property-filter { flex-direction: column; align-items: stretch; } @@ -993,7 +1137,8 @@ onMounted(() => { } /* Primary button styles */ -.btn-primary, .btn-retry { +.btn-primary, +.btn-retry { display: inline-block; padding: 0.75rem 1.5rem; background: #3498db; @@ -1006,7 +1151,8 @@ onMounted(() => { min-height: 44px; } -.btn-primary:hover, .btn-retry:hover { +.btn-primary:hover, +.btn-retry:hover { background: #2980b9; }