feat: .dat cache support + rendering 317 models

2004Scape · Feb 16, 2024 · e0256ad · e0256ad
1 parent 299a3c8
commit e0256ad
Show file tree

Hide file tree

Showing 11 changed files with 850 additions and 171 deletions.
diff --git a/src/html/viewer.html b/src/html/viewer.html
@@ -13,11 +13,6 @@
         <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>
@@ -29,22 +24,46 @@
             <div class="large-12 cell">
                 <div class="callout">
                     <div class="grid-x grid-padding-x">
-                        <div class="small-3 cell">
-                            <div id="leftPanel"></div>
+                        <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>
                         </div>
 
                         <div class="small-6 cell">
-                            <canvas id="canvas" width="512" height="334"></canvas>
+                            Press <code>r</code> to reset the camera.<br>
+                            Press <code>[</code> or <code>]</code> to adjust how much each key press affects the scene.<br>
+                            Use your arrow keys to rotate the model.<br>
+                            Use <code>w</code> and <code>s</code> to zoom in or out.<br>
+                            Use <code>q</code> and <code>e</code> to move the model up or down.<br>
+                            Use <code>a</code> and <code>d</code> to move the model left or right.<br>
+                            Use <code>.</code> and <code>/</code> to tilt the model left or right.<br>
+                            Use <code>1</code> and <code>2</code> to quickly switch to the previous or next model.<br>
                         </div>
 
-                        <div class="small-3 cell">
+                        <div class="small-6 cell">
                             <div id="rightPanel"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+
+    <script>
+        function saveScreenshot() {
+            document.getElementById('screenshot').download = 'screenshot-' + Math.floor(Date.now() / 1000) + '.png';
+            document.getElementById('screenshot').href = document.getElementById('canvas').toDataURL('image/png').replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+        }
+    </script>
 </body>
 
 </html>