62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import {
|
|
Stage as PixiStage,
|
|
} from '@pixi/react';
|
|
import {SCALE_MODES} from '@pixi/constants';
|
|
import {BaseTexture} from '@pixi/core';
|
|
import {createElement, useContext} from 'react';
|
|
|
|
import {RESOLUTION} from '@/constants.js';
|
|
import ClientContext from '@/context/client.js';
|
|
import DebugContext from '@/context/debug.js';
|
|
import EcsContext from '@/context/ecs.js';
|
|
import MainEntityContext from '@/context/main-entity.js';
|
|
|
|
import Ecs from './ecs.jsx';
|
|
import styles from './pixi.module.css';
|
|
|
|
BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
|
|
|
|
const Contexts = [ClientContext, DebugContext, EcsContext, MainEntityContext];
|
|
|
|
const ContextBridge = ({children, render}) => {
|
|
const contexts = Contexts.map(useContext);
|
|
return render(
|
|
<>
|
|
{
|
|
Contexts.reduce(
|
|
(children, Context, i) => ([
|
|
createElement(Context.Provider, {value: contexts[i], key: Context}, children)
|
|
]),
|
|
children,
|
|
)
|
|
}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Stage = ({children, ...props}) => {
|
|
return (
|
|
<ContextBridge
|
|
render={(children) => <PixiStage {...props}>{children}</PixiStage>}
|
|
>
|
|
{children}
|
|
</ContextBridge>
|
|
);
|
|
};
|
|
|
|
export default function Pixi() {
|
|
return (
|
|
<Stage
|
|
className={styles.stage}
|
|
width={RESOLUTION.x}
|
|
height={RESOLUTION.y}
|
|
options={{
|
|
background: 0x1099bb,
|
|
}}
|
|
>
|
|
<Ecs />
|
|
</Stage>
|
|
);
|
|
}
|
|
|