+
{notice}
)}
@@ -94,17 +96,17 @@ const Loading: FunctionComponent
= ({
const AsyncLoading: FunctionComponent = ({ children }) => {
const [loadingState, dispatchLoadingAction] = useReducer(packLoadingReducer, {
- mode: "indeterminate",
+ mode: 'indeterminate',
initializing: true
})
return (
- {loadingState.mode !== "hidden" && (
+ {loadingState.mode !== 'hidden' && (
)}
{children}
diff --git a/src/ReactCanvas.tsx b/src/ReactCanvas.tsx
index 81c9bc92..c85daedd 100644
--- a/src/ReactCanvas.tsx
+++ b/src/ReactCanvas.tsx
@@ -1,64 +1,101 @@
-import * as React from "react"
+import * as React from 'react'
-import { FunctionComponent, useEffect, useRef, useState } from "react"
+import {
+ FunctionComponent,
+ useEffect,
+ useRef,
+ useState,
+ useCallback
+} from 'react'
-import { useLoading } from "./AsyncLoading"
+import { useLoading } from './AsyncLoading'
+import type { Engine } from './typings'
-export type ReactEngineProps = {
+export interface ReactEngineProps {
engine: Engine
pck: string
+ wasm?: string
width?: number
height?: number
params?: any
resize?: boolean
}
-function toFailure(err) {
- var msg = err.message || err
+function toFailure (err: any) {
+ const msg = err.message || err
console.error(msg)
- return { msg, mode: "notice", initialized: true }
+ return { msg, mode: 'notice', initialized: true }
}
const ReactCanvas: FunctionComponent = ({
engine,
pck,
+ wasm,
width = 480,
height = 300
}) => {
const canvasRef = useRef(null)
- const [instance, setInstance] = useState()
+ const [instance, setInstance] = useState(null)
const [loadingState, changeLoadingState] = useLoading()
useEffect(() => {
if (engine.isWebGLAvailable()) {
- changeLoadingState({ mode: "indeterminate" })
+ changeLoadingState({ mode: 'indeterminate' })
setInstance(new engine())
} else {
- changeLoadingState(toFailure("WebGL not available"))
+ changeLoadingState(toFailure('WebGL not available'))
}
}, [engine])
+ const progressFunc = useCallback((current: number, total: number) => {
+ if (total > 0) {
+ changeLoadingState({ mode: 'progress', percent: current / total })
+ } else {
+ changeLoadingState({ mode: 'indeterminate' })
+ }
+ }, [])
+
useEffect(() => {
- if (instance) {
+ if (instance != null) {
+ const olderGodot = typeof instance.setProgressFunc === 'function'
+ console.log('starting', canvasRef.current, instance)
+
+ if (!olderGodot && wasm == null) {
+ changeLoadingState(
+ toFailure(
+ 'You must pass in the wasm prop for newer versions of Godot!'
+ )
+ )
+ return
+ }
+
instance
- .startGame(pck)
+ .startGame(
+ olderGodot
+ ? pck
+ : {
+ executable: wasm?.replace(/\.wasm$/i, ''),
+ canvas: canvasRef.current,
+ mainPack: pck,
+ canvasResizePolicy: 0,
+ onProgress: progressFunc
+ }
+ )
.then(() => {
- changeLoadingState({ mode: "hidden", initialized: true })
+ changeLoadingState({ mode: 'hidden', initialized: true })
})
- .catch(err => changeLoadingState(toFailure(err)))
+ .catch((err: any) => changeLoadingState(toFailure(err)))
- instance.setProgressFunc((current, total) => {
- if (total > 0) {
- changeLoadingState({ mode: "progress", percent: current / total })
- } else {
- changeLoadingState({ mode: "indeterminate" })
- }
- })
+ // older versions of Godot have this callback register
+ if (olderGodot) {
+ instance.setProgressFunc(progressFunc)
+ }
}
- }, [instance, pck, changeLoadingState])
+ }, [instance, pck, wasm, changeLoadingState])
useEffect(() => {
- if (instance) {
+ // older versions of Godot use this method to set the canvas
+ if (instance && typeof instance.setCanvas === 'function') {
instance.setCanvas(canvasRef.current)
}
}, [instance, canvasRef.current])
@@ -66,10 +103,10 @@ const ReactCanvas: FunctionComponent = ({
return (