refactor: remove FACTOR
This commit is contained in:
parent
9b6224a0f8
commit
e389e49c18
|
@ -11,6 +11,7 @@ import {
|
||||||
import {
|
import {
|
||||||
React,
|
React,
|
||||||
useEffect,
|
useEffect,
|
||||||
|
useFlecks,
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from '@flecks/react';
|
} from '@flecks/react';
|
||||||
|
@ -20,10 +21,9 @@ import {useSocket} from '@flecks/socket';
|
||||||
|
|
||||||
import Hotbar from './hotbar';
|
import Hotbar from './hotbar';
|
||||||
|
|
||||||
const FACTOR = 5;
|
|
||||||
|
|
||||||
const PlayUi = () => {
|
const PlayUi = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
const flecks = useFlecks();
|
||||||
const {uuid} = useParams();
|
const {uuid} = useParams();
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
const room = useRoom();
|
const room = useRoom();
|
||||||
|
@ -31,6 +31,7 @@ const PlayUi = () => {
|
||||||
const socket = useSocket();
|
const socket = useSocket();
|
||||||
const [left, setLeft] = useState(0);
|
const [left, setLeft] = useState(0);
|
||||||
const [top, setTop] = useState(0);
|
const [top, setTop] = useState(0);
|
||||||
|
const [domScale, setDomScale] = useState([1, 1]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!room || !selfEntity) {
|
if (!room || !selfEntity) {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
@ -38,8 +39,10 @@ const PlayUi = () => {
|
||||||
selfEntity.camera.realPosition = selfEntity.camera.position;
|
selfEntity.camera.realPosition = selfEntity.camera.position;
|
||||||
const onCameraRealOffsetChanged = () => {
|
const onCameraRealOffsetChanged = () => {
|
||||||
const [left, top] = Vector.scale(selfEntity.camera.realOffset, -1);
|
const [left, top] = Vector.scale(selfEntity.camera.realOffset, -1);
|
||||||
setLeft(FACTOR * left);
|
const {resolution} = flecks.get('@humus/app');
|
||||||
setTop(FACTOR * top);
|
setDomScale(Vector.div(resolution, selfEntity.camera.viewSize));
|
||||||
|
setLeft(left);
|
||||||
|
setTop(top);
|
||||||
};
|
};
|
||||||
onCameraRealOffsetChanged();
|
onCameraRealOffsetChanged();
|
||||||
selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
|
selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
|
||||||
|
@ -49,7 +52,7 @@ const PlayUi = () => {
|
||||||
camera.off('realOffsetChanged', onCameraRealOffsetChanged);
|
camera.off('realOffsetChanged', onCameraRealOffsetChanged);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [room, selfEntity]);
|
}, [flecks, room, selfEntity]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const join = async () => {
|
const join = async () => {
|
||||||
dispatch(setSelfEntity(await socket.send(['Join', uuid])));
|
dispatch(setSelfEntity(await socket.send(['Join', uuid])));
|
||||||
|
@ -96,7 +99,7 @@ const PlayUi = () => {
|
||||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
>
|
>
|
||||||
<Room left={left} room={room} top={top} />
|
<Room domScale={domScale} left={left} room={room} top={top} />
|
||||||
{selfEntity && <Hotbar selfEntity={selfEntity} />}
|
{selfEntity && <Hotbar selfEntity={selfEntity} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user