2024-06-10 22:42:30 -05:00
|
|
|
import {
|
|
|
|
Stage as PixiStage,
|
|
|
|
} from '@pixi/react';
|
2024-06-13 15:46:56 -05:00
|
|
|
import {SCALE_MODES} from '@pixi/constants';
|
2024-06-13 21:00:30 -05:00
|
|
|
import {BaseTexture} from '@pixi/core';
|
2024-06-21 04:50:17 -05:00
|
|
|
import {createElement, useContext} from 'react';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
|
|
|
import {RESOLUTION} from '@/constants.js';
|
2024-06-27 13:56:43 -05:00
|
|
|
import AssetsContext from '@/context/assets.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
import ClientContext from '@/context/client.js';
|
2024-06-25 08:54:19 -05:00
|
|
|
import DebugContext from '@/context/debug.js';
|
2024-06-22 23:32:57 -05:00
|
|
|
import EcsContext from '@/context/ecs.js';
|
2024-06-21 04:50:17 -05:00
|
|
|
import MainEntityContext from '@/context/main-entity.js';
|
2024-06-10 22:42:30 -05:00
|
|
|
|
|
|
|
import Ecs from './ecs.jsx';
|
|
|
|
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-06-27 13:56:43 -05:00
|
|
|
const Contexts = [AssetsContext, ClientContext, DebugContext, EcsContext, MainEntityContext];
|
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-01 13:44:52 -05:00
|
|
|
export default function Pixi({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={{
|
|
|
|
background: 0x1099bb,
|
|
|
|
}}
|
|
|
|
>
|
2024-07-01 13:44:52 -05:00
|
|
|
<Ecs scale={scale} />
|
2024-06-10 22:42:30 -05:00
|
|
|
</Stage>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|