From 1b4c05efe6ee9019062f2b6865302ef588f42cf5 Mon Sep 17 00:00:00 2001 From: Pazaz Date: Sat, 6 Jan 2024 14:57:26 -0500 Subject: [PATCH] viewer: Searching for models by name --- src/html/viewer.html | 100 ++++++---------------------------- src/js/viewer.ts | 106 ++++++++++++++++++++++--------------- src/style/_list-group.scss | 52 ++++++++++++++++++ src/style/viewer.scss | 83 ++++++++++++++++++++++++++++- 4 files changed, 213 insertions(+), 128 deletions(-) create mode 100644 src/style/_list-group.scss diff --git a/src/html/viewer.html b/src/html/viewer.html index 865105b6..e8062ae8 100644 --- a/src/html/viewer.html +++ b/src/html/viewer.html @@ -6,94 +6,25 @@ 2004Scape Tools - Cache Viewer - - -
-
-
-

Cache Viewer

-
+
+
+
+
+
+ +
@@ -107,8 +38,7 @@

Cache Viewer

-
-
+
diff --git a/src/js/viewer.ts b/src/js/viewer.ts index a0389024..4a5597bc 100644 --- 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 new file mode 100644 index 00000000..0821107a --- /dev/null +++ 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 index 6c41f947..dbe50b63 100644 --- 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; +}