cha0s/avocado
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: major improvement to room component

Browse Source
This commit is contained in:
cha0s 2022-04-03 04:44:04 -05:00
parent 6e7dde454e
commit 5a169c6e91
7 changed files with 198 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
packages/topdown/src/persea/controllers/room/component.jsx
View File

@ -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}>
<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}
/>
<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}
/>,
}))
<div className={styles.side}>
{
React.createElement(
roomSides[side].Page,
{
active: true,
events: 0 !== mode && events,
room,
resource,
},
)
}
index={currentPageIndex}
onIndexChanged={setCurrentPageIndex}
/>
</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);

129
packages/topdown/src/persea/controllers/room/component.module.scss
View File

@ -1,23 +1,122 @@
.room {
height: 100%;
width: 100%;
align-items: flex-start;
display: flex;
flex-direction: column;
> * {
height: 50%;
width: 100%;
}
:global(.canvas-host) {
display: block;
height: 100%;
overflow: scroll;
justify-content: flex-start;
overflow: hidden;
justify-content: space-between;
width: 100%;
}
:global(.rc-slider) {
display: none;
.roomContainer {
height: 100%;
min-width: 0;
width: 100%;
.side, .stage {
height: 50%;
}
.side {
overflow: auto;
}
.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);
}
}

1
packages/topdown/src/persea/controllers/room/img/eyedropper-sample-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

1
packages/topdown/src/persea/controllers/room/img/paint-brush-household-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 802 B

1
packages/topdown/src/persea/controllers/room/img/pencil-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

1
packages/topdown/src/persea/controllers/room/img/scan-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 782 B

1
packages/topdown/src/persea/controllers/room/img/users-three-light.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 900 B