viewer: Searching for models by name

2004Scape · Jan 6, 2024 · 1b4c05e · 1b4c05e
1 parent dc6523e
commit 1b4c05e
Show file tree

Hide file tree

Showing 4 changed files with 213 additions and 128 deletions.
diff --git a/src/html/viewer.html b/src/html/viewer.html
@@ -6,94 +6,25 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>2004Scape Tools - Cache Viewer</title>
-
-    <style>
-        canvas {
-            image-rendering: pixelated;
-            touch-action: none;
-            -webkit-touch-callout: none;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            outline: none;
-            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-            z-index: -1;
-        }
-
-        #leftPanel {
-            height: 334px;
-            overflow: auto;
-        }
-
-        #rightPanel {
-            height: 334px;
-            overflow: auto;
-        }
-
-        .list-group {
-            margin-bottom: 1rem;
-            border: 1px solid #e6e6e6;
-            border-radius: 0;
-            background: #fefefe;
-            box-shadow: none;
-            overflow: hidden;
-            color: #0a0a0a;
-        }
-
-        .list-group> :last-child {
-            margin-bottom: 0;
-        }
-
-        .list-group-item {
-            padding: 1rem;
-            border-bottom: 1px solid #e6e6e6;
-        }
-
-        .list-group-item> :last-child {
-            margin-bottom: 0;
-            border-bottom: none;
-        }
-
-        .list-group-item.active {
-            color: #fefefe;
-            background-color: #1779ba;
-            border-color: 1px solid #1779ba;
-        }
-
-        .list-group-item:hover,
-        .list-group-item:focus {
-            cursor: pointer;
-            background-color: #e6e6e6;
-        }
-
-        .list-group-item:hover.active,
-        .list-group-item:focus.active {
-            background-color: #1779ba;
-        }
-
-        .list-group-item.disabled,
-        .list-group-item.disabled:hover,
-        .list-group-item.disabled:focus,
-        .list-group-item[disabled],
-        .list-group-item[disabled]:hover,
-        .list-group-item[disabled]:focus {
-            color: #8a8a8a;
-            cursor: not-allowed;
-            background-color: #fefefe;
-        }
-    </style>
 </head>
 
 <body>
-    <div class="grid-container">
-        <div class="grid-x grid-padding-x">
-            <div class="large-12 cell">
-                <h1>Cache Viewer</h1>
-            </div>
+    <div class="top-bar">
+        <div class="top-bar-left">
+            <ul class="dropdown menu" data-dropdown-menu>
+                <li class="menu-text">Cache Viewer</li>
+                <li class="active"><a href="">Models</a></li>
+                <li><a href="">NPCs</a></li>
+                <li><a href="">Objects</a></li>
+                <li><a href="">Locations</a></li>
+                <li><a href="">Spot Animations</a></li>
+            </ul>
         </div>
+    </div>
 
+    <br>
+
+    <div class="grid-container">
         <div class="grid-x grid-padding-x">
             <div class="large-12 cell">
                 <div class="callout">
@@ -107,8 +38,7 @@ <h1>Cache Viewer</h1>
                         </div>
 
                         <div class="small-3 cell">
-                            <div id="rightPanel">
-                            </div>
+                            <div id="rightPanel"></div>
                         </div>
                     </div>
                 </div>

diff --git a/src/js/viewer.ts b/src/js/viewer.ts
@@ -112,47 +112,6 @@ export default class Client extends GameShell {
             let wordenc = await this.loadArchive('wordenc', 'chat system', this.archiveChecksums[7], 65);
             let sounds = await this.loadArchive('sounds', 'sound effects', this.archiveChecksums[8], 70);
 
-            this.packfiles[0] = await this.loadPack(`${Client.REPO}/data/pack/model.pack`);
-
-            const leftPanel = document.getElementById('leftPanel');
-            if (leftPanel) {
-                leftPanel.innerHTML = '';
-
-                // add header
-                const header = document.createElement('h3');
-                header.innerText = 'Models';
-                leftPanel.appendChild(header);
-
-                // create a clickable list of all the files in the pack, that sets this.model.id on click
-                const ul = document.createElement('ul');
-                ul.className = 'list-group';
-                leftPanel.appendChild(ul);
-
-                for (const [id, name] of this.packfiles[0]) {
-                    const li = document.createElement('li');
-                    li.id = name;
-                    li.className = 'list-group-item';
-                    if (id == 0) {
-                        li.className += ' active';
-                    }
-                    li.innerText = name;
-                    li.onclick = () => {
-                        // unmark the last selected item
-                        const last = ul.querySelector('.active');
-                        if (last) {
-                            last.className = 'list-group-item';
-                        }
-
-                        // mark the new selected item
-                        li.className = 'list-group-item active';
-
-                        this.model.id = id;
-                        this.model.built = new Model(this.model.id);
-                    };
-                    ul.appendChild(li);
-                }
-            }
-
             await this.showProgress(75, 'Unpacking media');
 
             await this.showProgress(80, 'Unpacking textures');
@@ -184,8 +143,12 @@ export default class Client extends GameShell {
             await this.showProgress(97, 'Preparing game engine');
             Censor.unpack(wordenc);
 
+            await this.showProgress(100, 'Getting ready to start...');
+
             this.drawArea?.bind();
             Draw3D.init2D();
+
+            await this.showModels();
         } catch (err) {
             this.errorLoading = true;
             console.error(err);
@@ -217,7 +180,8 @@ export default class Client extends GameShell {
         this.model.built.drawSimple(this.model.pitch, this.model.yaw, this.model.roll, this.camera.pitch, this.camera.x, this.camera.y, this.camera.z);
 
         // debug
-        this.fontBold12?.drawRight(this.width - 2, this.fontBold12.fontHeight, `FPS: ${this.fps}`, 0xFFFF00);
+        this.fontBold12?.drawRight(this.width - 1, this.fontBold12.fontHeight, `FPS: ${this.fps}`, 0xFFFF00);
+        this.fontBold12?.draw(1, this.fontBold12.fontHeight, `ID: ${this.model.id}`, 0xFFFF00);
 
         this.drawArea?.draw(0, 0);
     }
@@ -309,6 +273,64 @@ export default class Client extends GameShell {
             this.ctx.fillText('2: Try rebooting your computer, and reloading', 30, y);
         }
     }
+
+    async showModels() {
+        this.packfiles[0] = await this.loadPack(`${Client.REPO}/data/pack/model.pack`);
+
+        const leftPanel = document.getElementById('leftPanel');
+        if (leftPanel) {
+            leftPanel.innerHTML = '';
+
+            {
+                const input = document.createElement('input');
+                input.type = 'search';
+                input.placeholder = 'Search';
+                input.oninput = () => {
+                    const filter = input.value.toLowerCase().replaceAll(' ', '_');
+
+                    for (let i = 0; i < ul.children.length; i++) {
+                        const child = ul.children[i] as HTMLElement;
+
+                        if (child.id.indexOf(filter) > -1) {
+                            child.style.display = '';
+                        } else {
+                            child.style.display = 'none';
+                        }
+                    }
+                };
+                leftPanel.appendChild(input);
+            }
+
+            // create a clickable list of all the files in the pack, that sets this.model.id on click
+            const ul = document.createElement('ul');
+            ul.className = 'list-group';
+            leftPanel.appendChild(ul);
+
+            for (const [id, name] of this.packfiles[0]) {
+                const li = document.createElement('li');
+                li.id = name;
+                li.className = 'list-group-item';
+                if (id == 0) {
+                    li.className += ' active';
+                }
+                li.innerText = name;
+                li.onclick = () => {
+                    // unmark the last selected item
+                    const last = ul.querySelector('.active');
+                    if (last) {
+                        last.className = 'list-group-item';
+                    }
+
+                    // mark the new selected item
+                    li.className = 'list-group-item active';
+
+                    this.model.id = id;
+                    this.model.built = new Model(this.model.id);
+                };
+                ul.appendChild(li);
+            }
+        }
+    }
 }
 
 const client = new Client();

diff --git a/src/style/_list-group.scss b/src/style/_list-group.scss
@@ -0,0 +1,52 @@
+.list-group {
+    margin-left: 0;
+    margin-bottom: 1rem;
+    border: 1px solid #e6e6e6;
+    border-radius: 0;
+    background: #fefefe;
+    box-shadow: none;
+    overflow: hidden;
+    color: #0a0a0a;
+}
+
+.list-group> :last-child {
+    margin-bottom: 0;
+}
+
+.list-group-item {
+    padding: 1rem;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.list-group-item> :last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
+.list-group-item.active {
+    color: #fefefe;
+    background-color: #1779ba;
+    border-color: 1px solid #1779ba;
+}
+
+.list-group-item:hover,
+.list-group-item:focus {
+    cursor: pointer;
+    background-color: #e6e6e6;
+}
+
+.list-group-item:hover.active,
+.list-group-item:focus.active {
+    background-color: #1779ba;
+}
+
+.list-group-item.disabled,
+.list-group-item.disabled:hover,
+.list-group-item.disabled:focus,
+.list-group-item[disabled],
+.list-group-item[disabled]:hover,
+.list-group-item[disabled]:focus {
+    color: #8a8a8a;
+    cursor: not-allowed;
+    background-color: #fefefe;
+}
diff --git a/src/style/viewer.scss b/src/style/viewer.scss
@@ -1,4 +1,85 @@
 @import '_settings';
 @import 'foundation';
 
-@include foundation-everything;
+// Global styles
+@include foundation-global-styles;
+@include foundation-forms;
+@include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
+@include foundation-button;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-switch;
+@include foundation-table;
+// Basic components
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
+@include foundation-title-bar;
+@include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+// @include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
+
+// ----
+
+@import '_list-group';
+
+canvas {
+    image-rendering: pixelated;
+    touch-action: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    z-index: -1;
+}
+
+#leftPanel {
+    height: 334px;
+    overflow: auto;
+}
+
+#rightPanel {
+    height: 334px;
+    overflow: auto;
+}