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

refactor: scale

Browse Source
This commit is contained in:
cha0s 2022-04-05 09:08:27 -05:00
parent e12b1840e5
commit c1d03764c1
4 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -118,7 +118,7 @@ const RoomComponent = ({
ref={onRef} ref={onRef}
renderer={renderer} renderer={renderer}
renderable={roomRenderable} renderable={roomRenderable}
scalable={false} scale={3}
size={viewport} size={viewport}
styles={stageStyles} styles={stageStyles}
/> />

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

@ -15,19 +15,19 @@
height: 50%; height: 50%;
} }
.stage { .stage {
margin: 1rem 0 0 1rem; margin: 1rem;
overflow: hidden; overflow: hidden;
} }
@media (min-width: 60rem) { @media (min-width: 60rem) {
display: flex; display: flex;
.side, .stage { .side, .stage {
height: 100%; height: calc(100% - 2rem);
width: 50%; width: calc(50% - 2rem);
} }
} }
} }
.stage.moving > div { .stage.moving {
overflow: auto; overflow: auto;
} }

64
packages/topdown/src/persea/room-sides/tiles-side/index.jsx
View File

@ -53,6 +53,7 @@ function TilesPage({
const layerCount = resource.tiles.length; const layerCount = resource.tiles.length;
const [currentLayer, setCurrentLayer] = useState(0); const [currentLayer, setCurrentLayer] = useState(0);
const [tilesetEvents, setTilesetEvents] = useState(); const [tilesetEvents, setTilesetEvents] = useState();
const [scale, setScale] = useState(3);
const [solo, setSolo] = useState(Array(layerCount).fill(false)); const [solo, setSolo] = useState(Array(layerCount).fill(false));
const [incident, setIncident] = useState([0, 0]); const [incident, setIncident] = useState([0, 0]);
const [isHoldingPaint, setIsHoldingPaint] = useState(false); const [isHoldingPaint, setIsHoldingPaint] = useState(false);
@ -127,17 +128,14 @@ function TilesPage({
}; };
const onValue = ( const onValue = (
{ {
clientX, position,
clientY,
target,
type, type,
}, },
) => { ) => {
switch (type) { switch (type) {
case 'touchstart': case 'touchstart':
case 'mousedown': { case 'mousedown': {
const {left, top} = target.getBoundingClientRect(); const translated = Vector.floor(Vector.div(position, tileSize));
const translated = Vector.floor(Vector.div([clientX - left, clientY - top], tileSize));
stamp(translated); stamp(translated);
setIsHoldingPaint(true); setIsHoldingPaint(true);
break; break;
@ -145,8 +143,7 @@ function TilesPage({
case 'touchmove': case 'touchmove':
case 'mousemove': { case 'mousemove': {
if (isHoldingPaint) { if (isHoldingPaint) {
const {left, top} = target.getBoundingClientRect(); const translated = Vector.floor(Vector.div(position, tileSize));
const translated = Vector.floor(Vector.div([clientX - left, clientY - top], tileSize));
stamp(translated); stamp(translated);
} }
break; break;
@ -269,20 +266,43 @@ function TilesPage({
</div> </div>
<div> <div>
<div className={styles.draw}> <div className={styles.draw}>
<div className={styles.brushes}> <div className={styles.header}>
<label> <div className={styles.brushes}>
<span>Tileset mode</span> <label>
<select <span>Tileset mode</span>
defaultValue={tilesetMode} <select
onChange={(event) => { defaultValue={tilesetMode}
setTilesetMode(parseInt(event.target.value, 10)); onChange={(event) => {
}} setTilesetMode(parseInt(event.target.value, 10));
> }}
<option value={0}>Pan</option> >
<option value={1}>Draw</option> <option value={0}>Pan</option>
<option value={2}>Fill</option> <option value={1}>Draw</option>
</select> <option value={2}>Fill</option>
</label> </select>
</label>
</div>
<div className={styles.scale}>
<label>
<span>Scale</span>
<select
defaultValue={scale}
onChange={(event) => {
setScale(event.target.value);
}}
>
{
[1, 2, 3, 4, 6, 8]
.map((n) => (
<option key={n} value={n}>
{n}
x
</option>
))
}
</select>
</label>
</div>
</div> </div>
<div className={styles.tilesetWrapper}> <div className={styles.tilesetWrapper}>
<div <div
@ -293,7 +313,7 @@ function TilesPage({
ref={onRef} ref={onRef}
renderer={renderer} renderer={renderer}
renderable={container} renderable={container}
scale={1} scale={scale}
size={viewport} size={viewport}
/> />
</div> </div>

34
packages/topdown/src/persea/room-sides/tiles-side/index.module.scss
View File

@ -9,7 +9,18 @@
margin: 0.5rem; margin: 0.5rem;
} }
.label, label { .label, label {
background-color: transparent; background-color: transparent !important;
}
label span {
font-family: var(--system-font-family);
font-size: 0.6em;
font-weight: bold;
margin-bottom: 1em;
// text-align: center;
// text-orientation: mixed;
text-transform: uppercase;
// writing-mode: vertical-rl;
// width: 1rem;
} }
} }
@ -29,7 +40,6 @@
padding-right: 0.5rem; padding-right: 0.5rem;
} }
label { label {
background-color: transparent !important;
display: inline; display: inline;
} }
.visibility { .visibility {
@ -45,6 +55,14 @@
} }
} }
.header {
display: flex;
}
.brushes {
flex-grow: 100;
}
.tilesetUri { .tilesetUri {
margin: 1rem; margin: 1rem;
} }
@ -72,15 +90,3 @@
height: 3rem; height: 3rem;
width: 100%; width: 100%;
} }
.brushes label span {
font-family: var(--system-font-family);
font-size: 0.6em;
font-weight: bold;
margin-bottom: 1em;
// text-align: center;
// text-orientation: mixed;
text-transform: uppercase;
// writing-mode: vertical-rl;
// width: 1rem;
}