refactor: major improvement to room component
This commit is contained in:
cha0s
parent
6e7dde454e
commit
5a169c6e91
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable jsx-a11y/control-has-associated-label, jsx-a11y/label-has-associated-control */
|
||||
import {
|
||||
Renderer,
|
||||
Stage,
|
||||
|
|
@ -6,9 +7,6 @@ import {
|
|||
Rectangle,
|
||||
Vector,
|
||||
} from '@avocado/math';
|
||||
import {
|
||||
IconPages,
|
||||
} from '@avocado/react';
|
||||
import {
|
||||
classnames,
|
||||
hot,
|
||||
|
|
@ -22,12 +20,33 @@ import {
|
|||
} from '@flecks/react';
|
||||
import {useParams} from '@flecks/react/router';
|
||||
|
||||
import locals from './component.module.scss';
|
||||
import styles from './component.module.scss';
|
||||
|
||||
import InlineSelector from './inline-selector';
|
||||
|
||||
const renderer = new Renderer();
|
||||
|
||||
const ticker = () => {};
|
||||
|
||||
const makeButtonSelector = (key) => (
|
||||
<label className={styles[key]} key={key}>
|
||||
<button type="button" />
|
||||
<span>{key}</span>
|
||||
</label>
|
||||
);
|
||||
|
||||
const modes = [
|
||||
'move',
|
||||
'edit',
|
||||
'sample',
|
||||
]
|
||||
.map(makeButtonSelector);
|
||||
const sides = [
|
||||
'tiles',
|
||||
'entities',
|
||||
]
|
||||
.map(makeButtonSelector);
|
||||
|
||||
const RoomComponent = ({
|
||||
resource,
|
||||
// path,
|
||||
|
|
@ -37,14 +56,22 @@ const RoomComponent = ({
|
|||
const {uri} = useParams();
|
||||
const previousResource = usePrevious(resource);
|
||||
const [events, setEvents] = useState();
|
||||
const [mode, setMode] = useState(0);
|
||||
const [side, setSide] = useState(0);
|
||||
const [stageStyles, setStageStyles] = useState(styles);
|
||||
const [room, setRoom] = useState();
|
||||
const [roomRenderable, setRoomRenderable] = useState();
|
||||
const [viewport, setViewport] = useState([0, 0]);
|
||||
const roomSides = flecks.get('$avocado/topdown/persea.room-sides');
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(0);
|
||||
const onRef = useCallback((stage) => {
|
||||
setEvents(stage?.events());
|
||||
}, [setEvents]);
|
||||
useEffect(() => {
|
||||
setStageStyles({
|
||||
...styles,
|
||||
stage: classnames(styles.stage, {[styles.moving]: 0 === mode}),
|
||||
});
|
||||
}, [mode]);
|
||||
useEffect(() => {
|
||||
if (room) {
|
||||
const load = async () => {
|
||||
|
|
@ -89,45 +116,63 @@ const RoomComponent = ({
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={locals.room}>
|
||||
<Stage
|
||||
centered={false}
|
||||
ref={onRef}
|
||||
renderer={renderer}
|
||||
renderable={roomRenderable}
|
||||
size={viewport}
|
||||
ticker={ticker}
|
||||
/>
|
||||
<IconPages
|
||||
iconsAreBelow={false}
|
||||
iconPages={
|
||||
roomSides.map(({Icon, Page}, i) => ({
|
||||
Icon: <Icon className={classnames({active: i === currentPageIndex})} />,
|
||||
Page: <Page
|
||||
active={i === currentPageIndex}
|
||||
events={events}
|
||||
resource={resource}
|
||||
room={room}
|
||||
/>,
|
||||
}))
|
||||
}
|
||||
index={currentPageIndex}
|
||||
onIndexChanged={setCurrentPageIndex}
|
||||
/>
|
||||
<div className={styles.room}>
|
||||
<div className={styles.roomContainer}>
|
||||
<Stage
|
||||
centered={false}
|
||||
ref={onRef}
|
||||
renderer={renderer}
|
||||
renderable={roomRenderable}
|
||||
scalable={false}
|
||||
size={viewport}
|
||||
styles={stageStyles}
|
||||
ticker={ticker}
|
||||
/>
|
||||
<div className={styles.side}>
|
||||
{
|
||||
React.createElement(
|
||||
roomSides[side].Page,
|
||||
{
|
||||
active: true,
|
||||
events: 0 !== mode && events,
|
||||
room,
|
||||
resource,
|
||||
},
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.sidebar}>
|
||||
<div className={styles.inline}>
|
||||
<label className={styles.label}>Room Mode</label>
|
||||
<InlineSelector
|
||||
index={mode}
|
||||
onChange={setMode}
|
||||
>
|
||||
{modes}
|
||||
</InlineSelector>
|
||||
</div>
|
||||
<hr />
|
||||
<div className={styles.inline}>
|
||||
<InlineSelector
|
||||
index={side}
|
||||
onChange={setSide}
|
||||
>
|
||||
{sides}
|
||||
</InlineSelector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
RoomComponent.defaultProps = {
|
||||
// path: '/',
|
||||
};
|
||||
RoomComponent.defaultProps = {};
|
||||
|
||||
RoomComponent.displayName = 'RoomComponent';
|
||||
|
||||
RoomComponent.propTypes = {
|
||||
// eslint-disable-next-line react/forbid-prop-types
|
||||
resource: PropTypes.any.isRequired,
|
||||
// path: PropTypes.string,
|
||||
};
|
||||
|
||||
export default hot(module)(RoomComponent);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,122 @@
|
|||
.room {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> * {
|
||||
.roomContainer {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
.side, .stage {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.canvas-host) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
.side {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:global(.rc-slider) {
|
||||
display: none;
|
||||
.stage {
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 60rem) {
|
||||
display: flex;
|
||||
.side, .stage {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stage.moving {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
min-width: 3rem;
|
||||
hr {
|
||||
border-color: #777;
|
||||
margin: 0.5rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.inline {
|
||||
min-height: calc(4rem + 4px);
|
||||
button {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
height: 2rem;
|
||||
margin: 0.25rem auto 0.125rem;
|
||||
width: 2rem;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
label {
|
||||
background-color: transparent !important;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-family: var(--system-font-family);
|
||||
font-size: 0.5em;
|
||||
margin-bottom: 0.25rem;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
label.move {
|
||||
font-size: 0.5rem;
|
||||
button {
|
||||
mask-image: url('./img/scan-light.svg');
|
||||
}
|
||||
}
|
||||
|
||||
label.edit {
|
||||
font-size: 0.41rem;
|
||||
button {
|
||||
mask-image: url('./img/pencil-light.svg');
|
||||
}
|
||||
span {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
label.sample {
|
||||
font-size: 0.375rem;
|
||||
button {
|
||||
mask-image: url('./img/eyedropper-sample-light.svg');
|
||||
}
|
||||
span {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
label.tiles {
|
||||
font-size: 0.375rem;
|
||||
button {
|
||||
mask-image: url('./img/paint-brush-household-light.svg');
|
||||
}
|
||||
span {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
label.entities {
|
||||
font-size: 0.375rem;
|
||||
button {
|
||||
mask-image: url('./img/users-three-light.svg');
|
||||
}
|
||||
span {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M179.8,115.8l4.9,4.9a16.1,16.1,0,0,1,0,22.6l-7,7a8,8,0,0,1-11.4,0L105.7,89.7a8,8,0,0,1,0-11.4l7-7a16.1,16.1,0,0,1,22.6,0l4.9,4.9,27.6-27.6c10.8-10.8,28.4-11.4,39.4-.9a28,28,0,0,1,.6,40.1Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M158.6,142.6l-56,56a31.7,31.7,0,0,1-30.9,8.3L48.3,217.1a8,8,0,0,1-8.8-1.6h0a5.7,5.7,0,0,1-1.2-6.4l10.8-24.8a31.7,31.7,0,0,1,8.3-30.9l56-56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="52.3" y1="160" x2="141.3" y2="160" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
|
After Width: | Height: | Size: 780 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="72" y1="104" x2="152" y2="184" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="101.8" y1="183.4" x2="70.6" y2="214.6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="73.8" y1="155.4" x2="42.6" y2="186.6" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M136.1,92.2,191,31a24,24,0,0,1,34,34l-61.2,54.9a8,8,0,0,0-.3,11.6l9.2,9.2a16.1,16.1,0,0,1,0,22.6L96,240,16,160,92.7,83.3a16.1,16.1,0,0,1,22.6,0l9.2,9.2A8,8,0,0,0,136.1,92.2Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
|
After Width: | Height: | Size: 802 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.7,216H48a8,8,0,0,1-8-8V163.3a7.9,7.9,0,0,1,2.3-5.6l120-120a8,8,0,0,1,11.4,0l44.6,44.6a8,8,0,0,1,0,11.4l-120,120A7.9,7.9,0,0,1,92.7,216Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><line x1="95.5" y1="215.5" x2="40.5" y2="160.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
|
After Width: | Height: | Size: 759 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="176 40 216 40 216 80" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><polyline points="80 216 40 216 40 176" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><polyline points="216 176 216 216 176 216" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><polyline points="40 80 40 40 80 40" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><rect x="80" y="80" width="96" height="96" rx="8" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
|
After Width: | Height: | Size: 782 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="140" r="40" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M196,116a59.8,59.8,0,0,1,48,24" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M12,140a59.8,59.8,0,0,1,48-24" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M70.4,216a64.1,64.1,0,0,1,115.2,0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M60,116A32,32,0,1,1,91.4,78" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/><path d="M164.6,78A32,32,0,1,1,196,116" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>
|
||||
|
After Width: | Height: | Size: 900 B |
Loading…
Reference in New Issue
Block a user