feat: Viewer instructions

2004Scape · Feb 16, 2024 · a30e62e · a30e62e
1 parent ec2e75b
commit a30e62e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/src/html/viewer.html b/src/html/viewer.html
@@ -5,6 +5,9 @@
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>2004Scape Tools - Cache Viewer</title>
 </head>
 
@@ -24,18 +27,15 @@
             <div class="large-12 cell">
                 <div class="callout">
                     <div class="grid-x grid-padding-x">
-                        <div class="small-12 cell">
-                            <canvas id="canvas" style="display: none; width: 100%;"></canvas>
-                            <a href="#" id="screenshot" style="float: right;" onclick="saveScreenshot();">Take screenshot</a><br><br>
-                        </div>
-
-                        <div class="small-12 cell">
-                            <div class="callout">
-                                <div id="leftPanel">
-                                    Drag a complete cache here<br><br>
-                                    <img src="https://media.itspazaz.com/2024/02/explorer_OeY1shht4w.gif">
-                                </div>
+                        <div class="small-12 cell" id="mainPanel">
+                            <canvas id="canvas" style="display: block; width: 100%;"></canvas>
+                            <div id="helpme" style="display: none;">
+                                You will need to load a cache. It's as easy as dragging-and-dropping right here!<br>
+                                Remember, you can load a new cache by dragging-and-dropping again at any time.<br>
+                                <br>
+                                <img src="https://media.itspazaz.com/2024/02/msedge_HprzmakbmA.gif">
                             </div>
+                            <a href="#" id="screenshot" style="float: right;" onclick="saveScreenshot();">Take screenshot</a><br><br>
                         </div>
 
                         <div class="small-6 cell">

diff --git a/src/js/viewer.ts b/src/js/viewer.ts
@@ -24,7 +24,6 @@ class Viewer extends Client {
     errorLoading: boolean = false;
     errorHost: boolean = false;
 
-    leftPanel: HTMLElement | null = null;
     rightPanel: HTMLElement | null = null;
 
     jagStore: DiskStore | null = null;
@@ -68,16 +67,16 @@ class Viewer extends Client {
             this.drawArea?.bind();
             Draw3D.init2D();
 
-            this.leftPanel = document.getElementById('leftPanel');
             this.rightPanel = document.getElementById('rightPanel');
 
-            if (this.leftPanel !== null) {
-                this.leftPanel.ondragover = (event: DragEvent): void => {
+            const mainPanel: HTMLElement = document.getElementById('mainPanel') as HTMLElement;
+            if (mainPanel) {
+                mainPanel.ondragover = (event: DragEvent): void => {
                     event.preventDefault();
                     event.stopPropagation();
                 };
 
-                this.leftPanel.ondrop = async (event: DragEvent): Promise<void> => {
+                mainPanel.ondrop = async (event: DragEvent): Promise<void> => {
                     event.preventDefault();
                     event.stopPropagation();
 
@@ -144,6 +143,9 @@ class Viewer extends Client {
     init = async (): Promise<void> => {
         const dat: Int8Array | undefined = await this.db?.cacheload('main_file_cache.dat');
         if (!dat) {
+            const helpMe: HTMLElement = document.getElementById('helpme') as HTMLElement;
+            helpMe.style.display = 'block';
+            canvas.style.display = 'none';
             return;
         }
 
@@ -154,9 +156,14 @@ class Viewer extends Client {
         const idx4: Int8Array | undefined = await this.db?.cacheload('main_file_cache.idx4');
 
         if (!idx0 || !idx1 || !idx2 || !idx3 || !idx4) {
+            const helpMe: HTMLElement = document.getElementById('helpme') as HTMLElement;
+            helpMe.style.display = 'block';
+            canvas.style.display = 'none';
             return;
         }
 
+        const helpMe: HTMLElement = document.getElementById('helpme') as HTMLElement;
+        helpMe.style.display = 'none';
         canvas.style.display = 'block';
 
         this.jagStore = new DiskStore(dat, idx0, 0);
@@ -165,10 +172,6 @@ class Viewer extends Client {
         this.midiStore = new DiskStore(dat, idx3, 3);
         this.mapStore = new DiskStore(dat, idx4, 4);
 
-        if (this.leftPanel) {
-            this.leftPanel.innerHTML = `Cache Stats<br>Jagfiles: ${this.jagStore.fileCount}<br>Models: ${this.modelStore.fileCount}<br>Animations: ${this.animStore.fileCount}<br>MIDIs: ${this.midiStore.fileCount}<br>Maps: ${this.mapStore.fileCount}<br><br>You can drag a new cache here any time.`;
-        }
-
         await this.showProgress(10, 'Unpacking textures');
         const textures: Jagfile | Uint8Array | null = this.jagStore.read(6);
         Draw3D.unpackTextures(textures as Jagfile);