Add preliminary HLKZ replay support

index.html

@@ -14,77 +14,92 @@
         width: 100%;
         height: 100%;
         overflow-x: hidden;
+        background-color: #222;
       }
+
       body {
         display: flex;
         flex-flow: column;
         font-family: 'Tahoma', sans-serif;
         color: #333;
       }
+
       a {
         color: #333;
       }
+
       header {
         background: #fff;
         border-bottom: 1px solid #ddd;
         padding-bottom: 10px;
         margin-bottom: 20px;
       }
+
       header .wrapper {
         display: flex;
         flex-flow: column;
         width: 998px;
         margin: 0 auto;
       }
+
       @media (max-width: 998px) {
         header .wrapper {
           width: 95%;
         }
       }
+
       header .wrapper .line1 {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
         line-height: 80px;
       }
+
       header .wrapper .line2 {
         text-align: center;
       }
+
       header .wrapper .line1 .left {
         display: flex;
       }
+
       header .title {
         margin: 0;
         font-weight: normal;
         letter-spacing: 4px;
         margin-left: 10px;
         font-size: 30pt;
       }
+
       .nav-link {
         display: flex;
         padding: 10px;
         background: #fff;
         text-decoration: none;
         border: 1px solid #ddd;
       }
+
       .nav-link:hover {
         background: #f0f0f0;
       }
+
       .content {
         margin: 0 auto;
         width: 960px;
         height: 600px;
       }
+
       @media (max-width: 998px) {
         .content {
           width: 95%;
           height: 500px;
         }
       }
+
       #hlv-target {
-        width: 100%;
-        height: 100%;
+        width: 800px;
+        height: 600px;
       }
     </style>
   </head>
@@ -130,9 +145,18 @@ <h1 class="title">HLViewer</h1>
     <script type="module" src="/src/index.ts"></script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {
-        var viewer = HLViewer.init('#hlv-target', 'res')
-        viewer.load('kz_ea_highblock.dem')
-        viewer.setTitle('Cupe on kz_ea_highblock done in 02:32.95')
+        var viewer = HLViewer.init('#hlv-target', {
+          paths: {
+            base: '/res/',
+            replays: '/res/replays',
+            maps: '/res/maps',
+            wads: '/res/',
+            skies: '/res/skies',
+            sounds: '/res/sounds'
+          }
+        })
+        viewer.load('kzra_axn_tamlair_0_0_96712031_pure_1234.dat')
+        viewer.setTitle('begi on kzra_axn_tamlair done in 39.224')
       })
     </script>
   </body>

src/Game.ts

@@ -2,7 +2,7 @@ import { createNanoEvents, type Emitter as EventEmitter } from 'nanoevents'
 import type { Bsp } from './Bsp'
 import type { Sound } from './Sound'
 import type { Config } from './Config'
-import type { Replay } from './Replay/Replay'
+import type { Replay, ReplayType } from './Replay/Replay'
 import * as Time from './Time'
 import { Loader } from './Loader'
 import { Mouse } from './Input/Mouse'
@@ -101,6 +101,9 @@ export class Game {
   title = ''
   mode: PlayerMode
   pointerLocked = false
+  showKeys = true
+  showTimer = true
+  fullbright = false
 
   touch: Touch = new Touch()
   mouse: Mouse = new Mouse()
@@ -192,10 +195,10 @@ export class Game {
     this.camera.rotation[2] = 0
   }
 
-  changeReplay(replay: Replay) {
+  changeReplay(replay: Replay, replayType: ReplayType) {
     this.events.emit('prereplaychange', this, replay)
 
-    this.player.changeReplay(replay)
+    this.player.changeReplay(replay, replayType)
 
     this.events.emit('postreplaychange', this, replay)
   }
@@ -214,9 +217,24 @@ export class Game {
     return this.title
   }
 
+  changeShowKeys() {
+    this.showKeys = !this.showKeys
+    this.events.emit('showkeyschange', this.showKeys)
+  }
+
+  changeShowTimer() {
+    this.showTimer = !this.showTimer
+    this.events.emit('showtimerchange', this.showTimer)
+  }
+
+  changeFullbright() {
+    this.fullbright = !this.fullbright
+    this.worldScene.setFullbright(this.fullbright)
+  }
+
   onLoadAll = (loader: Loader) => {
     if (loader?.replay) {
-      this.changeReplay(loader.replay.data)
+      this.changeReplay(loader.replay.data, loader.replayType)
       this.changeMode(PlayerMode.REPLAY)
     }
 
@@ -400,8 +418,8 @@ export class Game {
 
   onMouseMove = (e: MouseEvent) => {
     if (this.pointerLocked) {
-      this.mouse.delta[0] = e.movementX * 0.5 // mul 0.5 to lower sensitivity
-      this.mouse.delta[1] = e.movementY * 0.5 //
+      this.mouse.delta[0] = e.movementX
+      this.mouse.delta[1] = e.movementY
 
       this.mouse.position[0] = e.pageX
       this.mouse.position[1] = e.pageY

src/Graphics/Camera.ts

@@ -7,9 +7,9 @@ export class Camera {
 
   projectionMatrix: mat4 = mat4.create()
   aspect: number
-  fov: number = glMatrix.toRadian(60)
+  fov: number = glMatrix.toRadian(87)
   near = 1.0
-  far = 8192.0
+  far = 16384.0
 
   viewMatrix: mat4 = mat4.create()
   position = vec3.create()