switch from preact to solid

Author: skyrim

package-lock.json

@@ -31,15 +31,15 @@
   "dependencies": {
     "gl-matrix": "^3.4.3",
     "nanoevents": "^9.0.0",
-    "preact": "^10.23.2",
+    "solid-js": "^1.8.22",
     "typestyle": "^2.0.4"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.9.0",
     "@types/gl-matrix": "^3.2.0",
     "@types/pngjs": "^6.0.5",
     "pngjs": "^7.0.0",
     "typescript": "^5.5.4",
-    "vite": "^5.4.3"
+    "vite": "^5.4.3",
+    "vite-plugin-solid": "^2.10.2"
   }
 }

package.json

@@ -198,7 +198,7 @@ export class Loader {
       return
     }
 
-    const replay = await Replay.parseIntoChunks(buffer)
+    const replay = Replay.parseIntoChunks(buffer)
     this.replay.done(replay)
 
     this.loadMap(`${replay.maps[0].name}.bsp`)
@@ -243,7 +243,7 @@ export class Loader {
       return
     }
 
-    const map = await BspParser.parse(name, buffer)
+    const map = BspParser.parse(name, buffer)
     this.map.done(map)
 
     map.entities
@@ -360,7 +360,7 @@ export class Loader {
       return
     }
 
-    const wad = await Wad.parse(buffer)
+    const wad = Wad.parse(buffer)
     wadItem.done(wad)
 
     if (!this.map || !this.map.data) {

src/Loader.ts

@@ -206,7 +206,7 @@ export interface BspLumpTexInfo {
 export type BspLumpLightmap = Uint8Array
 
 export const BspParser = {
-  parse(name: string, buffer: ArrayBuffer): Bsp {
+  parse(name: string, buffer: ArrayBuffer) {
     const r = new Reader(buffer)
     const version = r.ui()
     if (version !== 30) {

src/Parsers/BspParser.ts

@@ -1,60 +1,45 @@
-import { h, Component } from 'preact'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import { classes } from 'typestyle'
 import { Fullscreen } from '../../../Fullscreen'
 import { FullscreenButtonStyle as s } from './style'
 import { ControlsStyle as cs } from '../../Controls.style'
 
-interface FullscreenButtonProps {
-  active: boolean
-  root: Element
-}
-
-interface FullscreenButtonState {
-  isInFullscreen: boolean
-}
-
-export class FullscreenButton extends Component<FullscreenButtonProps, FullscreenButtonState> {
-  state: FullscreenButtonState = {
-    isInFullscreen: false
-  }
+export function FullscreenButton(props: { active: boolean; root: Element }) {
+  const [isInFullscreen, setIsInFullscreen] = createSignal(Fullscreen.isInFullscreen())
 
-  componentDidMount() {
-    Fullscreen.onChange(this.onFullscreen)
-  }
+  onMount(() => {
+    Fullscreen.onChange(onFullscreen)
+  })
 
-  componentWillUnmount() {
-    Fullscreen.onChangeRemove(this.onFullscreen)
-  }
+  onCleanup(() => {
+    Fullscreen.onChangeRemove(onFullscreen)
+  })
 
-  onClick = () => {
+  const onClick = () => {
     if (Fullscreen.isInFullscreen()) {
       Fullscreen.exit()
     } else {
-      Fullscreen.enter(this.props.root)
+      Fullscreen.enter(props.root)
     }
   }
 
-  onFullscreen = () => {
-    this.setState({
-      isInFullscreen: Fullscreen.isInFullscreen()
-    })
+  const onFullscreen = () => {
+    setIsInFullscreen(Fullscreen.isInFullscreen())
   }
 
-  render() {
-    return (
-      <button type="button" class={classes(cs.button, s.button)} onClick={this.onClick}>
-        {this.state.isInFullscreen ? (
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
-            <title>Exit fullscreen</title>
-            <path d="M0 22 L22 22 L22 0 L14 0 L14 14 L0 14 M42 0 L42 22 L64 22 L64 14 L50 14 L50 0 M14 50 L0 50 L0 42 L22 42 L22 64 L14 64 M42 64 L42 42 L64 42 L64 50 L50 50 L50 64 Z" />
-          </svg>
-        ) : (
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
-            <title>Fullscreen</title>
-            <path d="M0 22 L8 22 L8 8 L22 8 L22 0 L0 0 M42 0 L42 8 L56 8 L56 22 L64 22 L64 0 M0 64 L0 42 L8 42 L8 56 L22 56 L22 64 M64 64 L42 64 L42 56 L56 56 L56 42 L64 42 Z" />
-          </svg>
-        )}
-      </button>
-    )
-  }
+  return (
+    <button type="button" class={classes(cs.button, s.button)} onClick={onClick}>
+      {isInFullscreen() ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
+          <title>Exit fullscreen</title>
+          <path d="M0 22 L22 22 L22 0 L14 0 L14 14 L0 14 M42 0 L42 22 L64 22 L64 14 L50 14 L50 0 M14 50 L0 50 L0 42 L22 42 L22 64 L14 64 M42 64 L42 42 L64 42 L64 50 L50 50 L50 64 Z" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
+          <title>Fullscreen</title>
+          <path d="M0 22 L8 22 L8 8 L22 8 L22 0 L0 0 M42 0 L42 8 L56 8 L56 22 L64 22 L64 0 M0 64 L0 42 L8 42 L8 56 L22 56 L22 64 M64 64 L42 64 L42 56 L56 56 L56 42 L64 42 Z" />
+        </svg>
+      )}
+    </button>
+  )
 }

src/PlayerInterface/Buttons/FullscreenButton/index.tsx

@@ -1,4 +1,3 @@
-import { h } from 'preact'
 import { ControlsStyle as cs } from '../../Controls.style'
 
 export function PauseButton(props: { onClick(): void }) {

src/PlayerInterface/Buttons/PauseButton/index.tsx

@@ -1,9 +1,8 @@
-import { h } from 'preact'
 import { ControlsStyle as cs } from '../../Controls.style'
 
 export function PlayButton(props: { onClick(): void }) {
   return (
-    <button type="button" class={cs.button} onClick={props.onClick}>
+    <button type="button" class={cs.button} onClick={() => props.onClick()}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
         <title>Play</title>
         <path d="M0 0 L0 64 L64 32 Z" />

src/PlayerInterface/Buttons/PlayButton/index.tsx

@@ -1,78 +1,65 @@
-import { h, Component } from 'preact'
+import { createSignal } from 'solid-js'
 import { classes } from 'typestyle'
 import { type Game, PlayerMode } from '../../../Game'
-import { SettingsButtonStyle as s } from './style'
 import { ControlsStyle as cs } from '../../Controls.style'
+import { SettingsButtonStyle as s } from './style'
 
-interface SettingsButtonProps {
-  game: Game
-}
-
-interface SettingsButtonState {
-  isOpen: boolean
-}
+export function SettingsButton(props: { game: Game }) {
+  const [isOpen, setIsOpen] = createSignal(false)
+  const hasReplay = !!props.game.player.replay
 
-export class SettingsButton extends Component<SettingsButtonProps, SettingsButtonState> {
-  onFreeModeClick = () => {
-    if (this.props.game.mode === PlayerMode.FREE) {
+  const onFreeModeClick = () => {
+    if (props.game.mode === PlayerMode.FREE) {
       return
     }
 
-    this.props.game.changeMode(PlayerMode.FREE)
-    this.props.game.player.pause()
+    props.game.changeMode(PlayerMode.FREE)
+    props.game.player.pause()
   }
 
-  onReplayModeClick = () => {
-    if (this.props.game.mode === PlayerMode.REPLAY) {
+  const onReplayModeClick = () => {
+    if (props.game.mode === PlayerMode.REPLAY) {
       return
     }
 
-    this.props.game.changeMode(PlayerMode.REPLAY)
+    props.game.changeMode(PlayerMode.REPLAY)
   }
 
-  toggleMenu = () => {
-    this.setState({ isOpen: !this.state.isOpen })
-  }
+  return (
+    <div class={s.settings}>
+      <button type="button" class={classes(cs.button, s.button)} onClick={() => setIsOpen(!isOpen())}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <title>Toggle</title>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            fill="#ffffff"
+            d="M23.9 10.7c0-0.3-0.4-0.6-0.8-0.6 -1.1 0-2.1-0.6-2.5-1.6 -0.4-1-0.1-2.2 0.7-3 0.3-0.2 0.3-0.6 0.1-0.9 -0.6-0.7-1.2-1.4-1.9-1.9 -0.3-0.2-0.7-0.2-0.9 0.1 -0.7 0.8-2 1.1-3 0.7 -1-0.4-1.7-1.5-1.6-2.6 0-0.4-0.2-0.7-0.6-0.7 -0.9-0.1-1.8-0.1-2.7 0C10.4 0.1 10.1 0.4 10.1 0.8 10.1 1.9 9.5 2.9 8.5 3.3 7.5 3.7 6.2 3.4 5.5 2.6c-0.2-0.3-0.6-0.3-0.9-0.1 -0.7 0.6-1.4 1.2-1.9 1.9C2.4 4.8 2.5 5.2 2.7 5.4c0.8 0.8 1.1 2 0.7 3 -0.4 1-1.4 1.6-2.6 1.6 -0.4 0-0.7 0.2-0.7 0.6 -0.1 0.9-0.1 1.8 0 2.7 0 0.3 0.4 0.6 0.8 0.6 1 0 2 0.6 2.5 1.6 0.4 1 0.2 2.2-0.7 3 -0.3 0.2-0.3 0.6-0.1 0.9 0.6 0.7 1.2 1.4 1.9 1.9 0.3 0.2 0.7 0.2 0.9-0.1 0.7-0.8 2-1.1 3-0.7 1 0.4 1.7 1.5 1.6 2.6 0 0.4 0.2 0.7 0.6 0.7C11.1 24 11.5 24 12 24c0.4 0 0.9 0 1.3-0.1 0.3 0 0.6-0.3 0.6-0.7 0-1.1 0.6-2.1 1.6-2.6 1-0.4 2.3-0.1 3 0.7 0.2 0.3 0.6 0.3 0.9 0.1 0.7-0.6 1.4-1.2 1.9-1.9 0.2-0.3 0.2-0.7-0.1-0.9 -0.8-0.8-1.1-2-0.7-3 0.4-1 1.4-1.6 2.5-1.6l0.1 0c0.3 0 0.7-0.2 0.7-0.6C24 12.5 24 11.6 23.9 10.7zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6c3.3 0 6 2.7 6 6S15.3 18 12 18zM12 16"
+          />
+        </svg>
+      </button>
 
-  render() {
-    const hasReplay = !!this.props.game.player.replay
-
-    return (
-      <div class={s.settings}>
-        <button type="button" class={classes(cs.button, s.button)} onClick={this.toggleMenu}>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <title>Toggle</title>
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              fill="#ffffff"
-              d="M23.9 10.7c0-0.3-0.4-0.6-0.8-0.6 -1.1 0-2.1-0.6-2.5-1.6 -0.4-1-0.1-2.2 0.7-3 0.3-0.2 0.3-0.6 0.1-0.9 -0.6-0.7-1.2-1.4-1.9-1.9 -0.3-0.2-0.7-0.2-0.9 0.1 -0.7 0.8-2 1.1-3 0.7 -1-0.4-1.7-1.5-1.6-2.6 0-0.4-0.2-0.7-0.6-0.7 -0.9-0.1-1.8-0.1-2.7 0C10.4 0.1 10.1 0.4 10.1 0.8 10.1 1.9 9.5 2.9 8.5 3.3 7.5 3.7 6.2 3.4 5.5 2.6c-0.2-0.3-0.6-0.3-0.9-0.1 -0.7 0.6-1.4 1.2-1.9 1.9C2.4 4.8 2.5 5.2 2.7 5.4c0.8 0.8 1.1 2 0.7 3 -0.4 1-1.4 1.6-2.6 1.6 -0.4 0-0.7 0.2-0.7 0.6 -0.1 0.9-0.1 1.8 0 2.7 0 0.3 0.4 0.6 0.8 0.6 1 0 2 0.6 2.5 1.6 0.4 1 0.2 2.2-0.7 3 -0.3 0.2-0.3 0.6-0.1 0.9 0.6 0.7 1.2 1.4 1.9 1.9 0.3 0.2 0.7 0.2 0.9-0.1 0.7-0.8 2-1.1 3-0.7 1 0.4 1.7 1.5 1.6 2.6 0 0.4 0.2 0.7 0.6 0.7C11.1 24 11.5 24 12 24c0.4 0 0.9 0 1.3-0.1 0.3 0 0.6-0.3 0.6-0.7 0-1.1 0.6-2.1 1.6-2.6 1-0.4 2.3-0.1 3 0.7 0.2 0.3 0.6 0.3 0.9 0.1 0.7-0.6 1.4-1.2 1.9-1.9 0.2-0.3 0.2-0.7-0.1-0.9 -0.8-0.8-1.1-2-0.7-3 0.4-1 1.4-1.6 2.5-1.6l0.1 0c0.3 0 0.7-0.2 0.7-0.6C24 12.5 24 11.6 23.9 10.7zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6c3.3 0 6 2.7 6 6S15.3 18 12 18zM12 16"
-            />
-          </svg>
-        </button>
-
-        <div class={this.state.isOpen ? s.menuOpen : s.menu}>
-          <span class={s.menuItemTitle}>Mode</span>
-          {hasReplay ? (
-            <button
-              type="button"
-              class={this.props.game.mode === PlayerMode.REPLAY ? s.menuItemSelected : s.menuItem}
-              onClick={this.onReplayModeClick}
-            >
-              Replay
-            </button>
-          ) : (
-            <span />
-          )}
+      <div class={isOpen() ? s.menuOpen : s.menu}>
+        <span class={s.menuItemTitle}>Mode</span>
+        {hasReplay ? (
           <button
             type="button"
-            class={this.props.game.mode === PlayerMode.FREE ? s.menuItemSelected : s.menuItem}
-            onClick={this.onFreeModeClick}
+            class={props.game.mode === PlayerMode.REPLAY ? s.menuItemSelected : s.menuItem}
+            onClick={() => onReplayModeClick()}
           >
-            Free
+            Replay
           </button>
-        </div>
+        ) : (
+          <span />
+        )}
+        <button
+          type="button"
+          class={props.game.mode === PlayerMode.FREE ? s.menuItemSelected : s.menuItem}
+          onClick={() => onFreeModeClick()}
+        >
+          Free
+        </button>
       </div>
-    )
-  }
+    </div>
+  )
 }

src/PlayerInterface/Buttons/SettingsButton/index.tsx

@@ -1,11 +1,10 @@
-import { h } from 'preact'
 import { classes } from 'typestyle'
 import { SpeedDownButtonStyle as s } from './style'
 import { ControlsStyle as cs } from '../../Controls.style'
 
 export function SpeedDownButton(props: { onClick(): void }) {
   return (
-    <button type="button" class={classes(cs.button, s.button)} onClick={props.onClick}>
+    <button type="button" class={classes(cs.button, s.button)} onClick={() => props.onClick()}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
         <title>Speed Down</title>
         <path d="M0 0 L0 64 L32 32 L32 64 L64 32 L32 0 L32 32 Z" />

src/PlayerInterface/Buttons/SpeedDownButton/index.tsx

@@ -1,9 +1,8 @@
-import { h } from 'preact'
 import { ControlsStyle as cs } from '../../Controls.style'
 
 export function SpeedUpButton(props: { onClick(): void }) {
   return (
-    <button type="button" class={cs.button} onClick={props.onClick}>
+    <button type="button" class={cs.button} onClick={() => props.onClick()}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
         <title>Speed Up</title>
         <path d="M0 0 L0 64 L32 32 L32 64 L64 32 L32 0 L32 32 Z" />