2024-06-13 15:46:56 -05:00
|
|
|
import {SCALE_MODES} from '@pixi/constants';
|
2024-07-17 20:43:29 -05:00
|
|
|
import {BaseTexture, extensions} from '@pixi/core';
|
|
|
|
import {Stage as PixiStage} from '@pixi/react';
|
2024-06-21 04:50:17 -05:00
|
|
|
import {createElement, useContext} from 'react';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
2024-07-20 04:32:33 -05:00
|
|
|
import AssetsContext from '@/react/context/assets.js';
|
|
|
|
import ClientContext from '@/react/context/client.js';
|
|
|
|
import DebugContext from '@/react/context/debug.js';
|
|
|
|
import EcsContext from '@/react/context/ecs.js';
|
|
|
|
import MainEntityContext from '@/react/context/main-entity.js';
|
|
|
|
import RadiansContext from '@/react/context/radians.js';
|
2024-07-20 04:41:00 -05:00
|
|
|
import {RESOLUTION} from '@/util/constants.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
|
|
|
import Ecs from './ecs.jsx';
|
2024-07-17 20:43:29 -05:00
|
|
|
import {ApplicationStageLayers, ApplicationStageLights} from './extensions.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
import styles from './pixi.module.css';
|
|
|
|
|
2024-06-13 21:00:30 -05:00
|
|
|
BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
|
2024-06-13 15:46:56 -05:00
|
|
|
|
2024-07-17 20:43:29 -05:00
|
|
|
extensions.add(
|
|
|
|
ApplicationStageLayers,
|
|
|
|
ApplicationStageLights,
|
|
|
|
);
|
|
|
|
|
2024-07-14 21:07:46 -05:00
|
|
|
const Contexts = [
|
|
|
|
AssetsContext,
|
|
|
|
ClientContext,
|
|
|
|
DebugContext,
|
|
|
|
EcsContext,
|
|
|
|
MainEntityContext,
|
|
|
|
RadiansContext,
|
|
|
|
];
|
2024-06-22 23:32:57 -05:00
|
|
|
|
|
|
|
const ContextBridge = ({children, render}) => {
|
2024-06-21 04:50:17 -05:00
|
|
|
const contexts = Contexts.map(useContext);
|
|
|
|
return render(
|
|
|
|
<>
|
|
|
|
{
|
|
|
|
Contexts.reduce(
|
|
|
|
(children, Context, i) => ([
|
|
|
|
createElement(Context.Provider, {value: contexts[i], key: Context}, children)
|
|
|
|
]),
|
|
|
|
children,
|
|
|
|
)
|
2024-06-10 22:42:30 -05:00
|
|
|
}
|
2024-06-21 04:50:17 -05:00
|
|
|
</>
|
2024-06-10 22:42:30 -05:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Stage = ({children, ...props}) => {
|
|
|
|
return (
|
|
|
|
<ContextBridge
|
|
|
|
render={(children) => <PixiStage {...props}>{children}</PixiStage>}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</ContextBridge>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2024-07-30 12:31:40 -05:00
|
|
|
export default function Pixi({camera, monopolizers, particleWorker, scale}) {
|
2024-06-10 22:42:30 -05:00
|
|
|
return (
|
|
|
|
<Stage
|
|
|
|
className={styles.stage}
|
2024-06-11 02:24:45 -05:00
|
|
|
width={RESOLUTION.x}
|
|
|
|
height={RESOLUTION.y}
|
2024-06-10 22:42:30 -05:00
|
|
|
options={{
|
2024-07-17 05:07:50 -05:00
|
|
|
background: 0x0,
|
2024-06-10 22:42:30 -05:00
|
|
|
}}
|
|
|
|
>
|
2024-07-12 00:00:03 -05:00
|
|
|
<Ecs
|
|
|
|
camera={camera}
|
2024-07-13 17:08:23 -05:00
|
|
|
monopolizers={monopolizers}
|
2024-07-30 09:56:53 -05:00
|
|
|
particleWorker={particleWorker}
|
2024-07-12 00:00:03 -05:00
|
|
|
scale={scale}
|
|
|
|
/>
|
2024-06-10 22:42:30 -05:00
|
|
|
</Stage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|