refactor: react

app/react/components/devtools.jsx

@@ -2,8 +2,8 @@ import {useState} from 'react';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 
-import {useEcs, useEcsTick} from '@/context/ecs.js';
-import {useMainEntity} from '@/context/main-entity.js';
+import {useEcs, useEcsTick} from '@/react/context/ecs.js';
+import {useMainEntity} from '@/react/context/main-entity.js';
 
 import styles from './devtools.module.css';
 

app/react/components/devtools/tiles.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
-import {useClient} from '@/context/client.js';
-import {useEcs} from '@/context/ecs.js';
+import {useClient} from '@/react/context/client.js';
+import {useEcs} from '@/react/context/ecs.js';
 import useRect from '@/util/react-hooks/use-rect.js';
 
 import styles from './tiles.module.css';

app/react/components/dom/chat/input.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
 
-import {useClient} from '@/context/client.js';
+import {useClient} from '@/react/context/client.js';
 
 import styles from './input.module.css';
 

app/react/components/dom/chat/message.jsx

@@ -1,7 +1,7 @@
 import {memo, useEffect, useState} from 'react';
 
-import {useRadians} from '@/context/radians.js';
 import {render} from '@/dialogue.js';
+import {useRadians} from '@/react/context/radians.js';
 
 import styles from './message.module.css';
 

app/react/components/dom/dialogue.jsx

@@ -1,9 +1,9 @@
 import {useEffect, useMemo, useRef, useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
-import {useDomScale} from '@/context/dom-scale.js';
-import {useRadians} from '@/context/radians.js';
 import {render} from '@/dialogue.js';
+import {useDomScale} from '@/react/context/dom-scale.js';
+import {useRadians} from '@/react/context/radians.js';
 
 import styles from './dialogue.module.css';
 

app/react/components/dom/dom.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
-import DomContext from '@/context/dom-scale.js';
+import DomContext from '@/react/context/dom-scale.js';
 
 import styles from './dom.module.css';
 

app/react/components/dom/entities.jsx

@@ -1,8 +1,8 @@
 import {useState} from 'react';
 
-import {usePacket} from '@/context/client.js';
-import {useEcs, useEcsTick} from '@/context/ecs.js';
 import {parseLetters} from '@/dialogue.js';
+import {usePacket} from '@/react/context/client.js';
+import {useEcs, useEcsTick} from '@/react/context/ecs.js';
 
 import Entity from './entity.jsx';
 

app/react/components/pixi/ecs.jsx

@@ -1,9 +1,9 @@
 import {Container} from '@pixi/react';
 import {useEffect, useState} from 'react';
 
-import {useEcs, useEcsTick} from '@/context/ecs.js';
-import {useMainEntity} from '@/context/main-entity.js';
-// import {useRadians} from '@/context/radians.js';
+import {useEcs, useEcsTick} from '@/react/context/ecs.js';
+import {useMainEntity} from '@/react/context/main-entity.js';
+// import {useRadians} from '@/react/context/radians.js';
 // import {TAU} from '@/util/math.js';
 
 import Entities from './entities.jsx';

app/react/components/pixi/entities.jsx

@@ -3,10 +3,10 @@ import {GlowFilter} from '@pixi/filter-glow';
 import {Container} from '@pixi/react';
 import {useState} from 'react';
 
-import {usePacket} from '@/context/client.js';
-import {useEcs, useEcsTick} from '@/context/ecs.js';
-import {useMainEntity} from '@/context/main-entity.js';
-import {useRadians} from '@/context/radians.js';
+import {usePacket} from '@/react/context/client.js';
+import {useEcs, useEcsTick} from '@/react/context/ecs.js';
+import {useMainEntity} from '@/react/context/main-entity.js';
+import {useRadians} from '@/react/context/radians.js';
 
 import Entity from './entity.jsx';
 

app/react/components/pixi/entity.jsx

@@ -1,8 +1,8 @@
 import {Container, Graphics} from '@pixi/react';
 import {memo, useCallback} from 'react';
 
-import {useDebug} from '@/context/debug.js';
-import {useMainEntity} from '@/context/main-entity.js';
+import {useDebug} from '@/react/context/debug.js';
+import {useMainEntity} from '@/react/context/main-entity.js';
 
 import Emitter from './emitter.jsx';
 import Light from './light.jsx';

app/react/components/pixi/pixi.jsx

@@ -4,12 +4,12 @@ import {Stage as PixiStage} from '@pixi/react';
 import {createElement, useContext} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
-import AssetsContext from '@/context/assets.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 RadiansContext from '@/context/radians.js';
+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';
 
 import Ecs from './ecs.jsx';
 import {ApplicationStageLayers, ApplicationStageLights} from './extensions.js';

app/react/components/pixi/sprite.jsx

@@ -1,7 +1,7 @@
 import {Sprite as PixiSprite} from '@pixi/react';
 import {useEffect, useState} from 'react';
 
-import {useAsset} from '@/context/assets.js';
+import {useAsset} from '@/react/context/assets.js';
 
 import {deferredLighting} from './lights.js';
 

app/react/components/pixi/targeting-ghost.jsx

@@ -2,7 +2,7 @@ import {Container} from '@pixi/display';
 import {Graphics} from '@pixi/graphics';
 import {PixiComponent} from '@pixi/react';
 
-import {useRadians} from '@/context/radians.js';
+import {useRadians} from '@/react/context/radians.js';
 
 const tileSize = {x: 16, y: 16};
 

app/react/components/pixi/targeting-grid.jsx

@@ -5,7 +5,7 @@ import {Graphics} from '@pixi/graphics';
 import {PixiComponent, useApp} from '@pixi/react';
 import {Sprite} from '@pixi/sprite';
 
-import {useRadians} from '@/context/radians.js';
+import {useRadians} from '@/react/context/radians.js';
 
 const tileSize = {x: 16, y: 16};
 const radius = 9;

app/react/components/pixi/tile-layer.jsx

@@ -6,7 +6,7 @@ import '@pixi/spritesheet'; // NECESSARY!
 import {CompositeTilemap} from '@pixi/tilemap';
 
 import {CHUNK_SIZE} from '@/constants.js';
-import {useAsset} from '@/context/assets.js';
+import {useAsset} from '@/react/context/assets.js';
 
 import {deferredLighting} from './lights.js';
 

app/react/components/ui.jsx

@@ -1,10 +1,10 @@
 import {memo, useEffect, useRef, useState} from 'react';
 
 import {RESOLUTION} from '@/constants.js';
-import {useClient, usePacket} from '@/context/client.js';
-import {useDebug} from '@/context/debug.js';
-import {useEcs, useEcsTick} from '@/context/ecs.js';
-import {useMainEntity} from '@/context/main-entity.js';
+import {useClient, usePacket} from '@/react/context/client.js';
+import {useDebug} from '@/react/context/debug.js';
+import {useEcs, useEcsTick} from '@/react/context/ecs.js';
+import {useMainEntity} from '@/react/context/main-entity.js';
 
 import addKeyListener from './add-key-listener.js';
 import ClientEcs from './client-ecs.js';

app/routes/_main-menu.play.$.$/route.jsx

@@ -2,13 +2,13 @@ import {json} from "@remix-run/node";
 import {useEffect, useState} from 'react';
 import {useOutletContext, useParams} from 'react-router-dom';
 
-import AssetsContext from '@/context/assets.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 RadiansContext from '@/context/radians.js';
-import Ui from '@/react-components/ui.jsx';
+import Ui from '@/react/components/ui.jsx';
+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';
 import {juggleSession} from '@/session.server';
 import {TAU} from '@/util/math.js';
 

stories/dom-decorator.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import Dom from '@/react-components/dom.jsx';
+import Dom from '@/react/components/dom.jsx';
 import {RESOLUTION} from '@/constants.js';
 
 function Decorator({children, style}) {

stories/hotbar.stories.js

@@ -1,7 +1,7 @@
 import {useArgs} from '@storybook/preview-api';
 import {fn} from '@storybook/test';
 
-import Hotbar from '@/react-components/hotbar.jsx';
+import Hotbar from '@/react/components/hotbar.jsx';
 
 import DomDecorator from './dom-decorator.jsx';
 

stories/slot.stories.js

@@ -1,4 +1,4 @@
-import Slot from '@/react-components/slot.jsx';
+import Slot from '@/react/components/slot.jsx';
 
 import DomDecorator from './dom-decorator.jsx';