test a bit more
This commit is contained in:
parent
ff93e13675
commit
33fb6e0cfe
|
@ -39,6 +39,7 @@
|
|||
"react-hooks/rules-of-hooks": "error",
|
||||
"jsx-a11y/click-events-have-key-events":"off",
|
||||
"jsx-a11y/no-static-element-interactions":"off",
|
||||
"jsx-a11y/control-has-associated-label": "off",
|
||||
"no-continue": "off",
|
||||
"no-multiple-empty-lines": "off",
|
||||
"react/function-component-definition": "off",
|
||||
|
|
|
@ -20,10 +20,14 @@ const UI = () => {
|
|||
isHistoricalView,
|
||||
is3D,
|
||||
isOnMobile,
|
||||
showMvmCtrls,
|
||||
holdPaint,
|
||||
] = useSelector((state) => [
|
||||
state.canvas.isHistoricalView,
|
||||
state.canvas.is3D,
|
||||
state.user.isOnMobile,
|
||||
state.gui.showMvmCtrls,
|
||||
state.gui.holdPaint,
|
||||
], shallowEqual);
|
||||
|
||||
return (
|
||||
|
@ -36,10 +40,9 @@ const UI = () => {
|
|||
<PalselButton />
|
||||
<Palette />
|
||||
{(!is3D) && <GlobeButton />}
|
||||
{// (isOnMobile) && <MovementControls />
|
||||
}
|
||||
<MovementControls />
|
||||
{(!is3D) && <PencilButton />}
|
||||
{(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
|
||||
&& <MovementControls />}
|
||||
{(!is3D && isOnMobile) && <PencilButton />}
|
||||
<CoolDownBox />
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -8,7 +8,6 @@ import React, {
|
|||
} from 'react';
|
||||
import {
|
||||
useSelector,
|
||||
shallowEqual,
|
||||
useDispatch,
|
||||
} from 'react-redux';
|
||||
import {
|
||||
|
@ -20,7 +19,7 @@ import {
|
|||
PiArrowFatDown,
|
||||
PiCaretDoubleUp,
|
||||
PiCaretDoubleDown,
|
||||
} from "react-icons/pi";
|
||||
} from 'react-icons/pi';
|
||||
|
||||
import {
|
||||
setMoveU,
|
||||
|
@ -34,10 +33,7 @@ const btnStyle = {
|
|||
};
|
||||
|
||||
const MovementControls = () => {
|
||||
const [holdPaint, is3D] = useSelector((state) => [
|
||||
state.gui.holdPaint,
|
||||
state.canvas.is3D,
|
||||
], shallowEqual);
|
||||
const is3D = useSelector((state) => state.canvas.is3D);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onPressStart = useCallback((event) => {
|
||||
|
@ -92,7 +88,7 @@ const MovementControls = () => {
|
|||
|
||||
const onCancel = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
dispatch(cancelMove());
|
||||
// dispatch(cancelMove());
|
||||
}, []);
|
||||
|
||||
const refCallBack = useCallback((node) => {
|
||||
|
@ -107,10 +103,6 @@ const MovementControls = () => {
|
|||
node.addEventListener('touchcancel', onCancel, { passive: false });
|
||||
}, [onPressStart, onPressStop, onCancel]);
|
||||
|
||||
if (!holdPaint && !is3D) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
||||
import { TbPencil, TbPencilMinus } from 'react-icons/tb';
|
||||
import { t } from 'ttag';
|
||||
|
||||
|
@ -11,7 +11,13 @@ import { HOLD_PAINT } from '../../core/constants';
|
|||
import { selectHoldPaint } from '../../store/actions';
|
||||
|
||||
const PencilButton = () => {
|
||||
const holdPaint = useSelector((state) => state.gui.holdPaint);
|
||||
const [
|
||||
holdPaint,
|
||||
showMvmCtrls,
|
||||
] = useSelector((state) => [
|
||||
state.gui.holdPaint,
|
||||
state.gui.showMvmCtrls,
|
||||
], shallowEqual);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
|
@ -20,6 +26,9 @@ const PencilButton = () => {
|
|||
className={
|
||||
`actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}`
|
||||
}
|
||||
style={{
|
||||
bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98,
|
||||
}}
|
||||
role="button"
|
||||
title={(holdPaint === HOLD_PAINT.PENCIL)
|
||||
? t`Disable Pencil`
|
||||
|
|
|
@ -11,6 +11,7 @@ import LanguageSelect from '../LanguageSelect';
|
|||
import {
|
||||
toggleGrid,
|
||||
togglePixelNotify,
|
||||
toggleMvmCtrls,
|
||||
toggleMute,
|
||||
toggleAutoZoomIn,
|
||||
toggleCompactPalette,
|
||||
|
@ -56,6 +57,7 @@ function Settings() {
|
|||
const [
|
||||
isGridShown,
|
||||
isPixelNotifyShown,
|
||||
isMvmCtrlsShown,
|
||||
autoZoomIn,
|
||||
compactPalette,
|
||||
isPotato,
|
||||
|
@ -67,6 +69,7 @@ function Settings() {
|
|||
] = useSelector((state) => [
|
||||
state.gui.showGrid,
|
||||
state.gui.showPixelNotify,
|
||||
state.gui.showMvmCtrls,
|
||||
state.gui.autoZoomIn,
|
||||
state.gui.compactPalette,
|
||||
state.gui.isPotato,
|
||||
|
@ -98,6 +101,14 @@ function Settings() {
|
|||
>
|
||||
{t`Show circles where pixels are placed.`}
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={t`Always show Movement Controls`}
|
||||
keyBind={c('keybinds').t`N`}
|
||||
value={isMvmCtrlsShown}
|
||||
onToggle={() => dispatch(toggleMvmCtrls())}
|
||||
>
|
||||
{t`Always show movement control buttons`}
|
||||
</SettingsItem>
|
||||
<SettingsItem
|
||||
title={t`Disable Game Sounds`}
|
||||
keyBind={c('keybinds').t`M`}
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
toggleHistoricalView,
|
||||
toggleHiddenCanvases,
|
||||
togglePixelNotify,
|
||||
toggleMvmCtrls,
|
||||
toggleMute,
|
||||
selectCanvas,
|
||||
selectHoverColor,
|
||||
|
@ -197,6 +198,9 @@ export function createKeyDownHandler(store) {
|
|||
? t`Muted Sound`
|
||||
: t`Unmuted Sound`));
|
||||
return;
|
||||
case 'n':
|
||||
store.dispatch(toggleMvmCtrls());
|
||||
return;
|
||||
case 'r': {
|
||||
const { hover } = store.getState().canvas;
|
||||
const text = hover.join('_');
|
||||
|
|
|
@ -45,6 +45,12 @@ export function togglePixelNotify() {
|
|||
};
|
||||
}
|
||||
|
||||
export function toggleMvmCtrls() {
|
||||
return {
|
||||
type: 's/TGL_MVM_CTRLS',
|
||||
};
|
||||
}
|
||||
|
||||
export function toggleAutoZoomIn() {
|
||||
return {
|
||||
type: 's/TGL_AUTO_ZOOM_IN',
|
||||
|
|
|
@ -3,6 +3,7 @@ import { HOLD_PAINT } from '../../core/constants';
|
|||
const initialState = {
|
||||
showGrid: false,
|
||||
showPixelNotify: false,
|
||||
showMvmCtrls: false,
|
||||
autoZoomIn: false,
|
||||
isPotato: false,
|
||||
isLightGrid: false,
|
||||
|
@ -43,6 +44,13 @@ export default function gui(
|
|||
};
|
||||
}
|
||||
|
||||
case 's/TGL_MVM_CTRLS': {
|
||||
return {
|
||||
...state,
|
||||
showMvmCtrls: !state.showMvmCtrls,
|
||||
};
|
||||
}
|
||||
|
||||
case 's/TGL_AUTO_ZOOM_IN': {
|
||||
return {
|
||||
...state,
|
||||
|
@ -136,23 +144,29 @@ export default function gui(
|
|||
}
|
||||
|
||||
case 's/SET_MOVE_U': {
|
||||
const { value } = action;
|
||||
const moveU = state.moveU + value;
|
||||
return {
|
||||
...state,
|
||||
moveU: action.value,
|
||||
moveU,
|
||||
};
|
||||
}
|
||||
|
||||
case 's/SET_MOVE_V': {
|
||||
const { value } = action;
|
||||
const moveV = state.moveV + value;
|
||||
return {
|
||||
...state,
|
||||
moveV: action.value,
|
||||
moveV,
|
||||
};
|
||||
}
|
||||
|
||||
case 's/SET_MOVE_W': {
|
||||
const { value } = action;
|
||||
const moveW = state.moveW + value;
|
||||
return {
|
||||
...state,
|
||||
moveW: action.value,
|
||||
moveW,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -461,13 +461,9 @@ tr:nth-child(even) {
|
|||
right: 57px;
|
||||
}
|
||||
#pencilbutton {
|
||||
bottom: 98px;
|
||||
left: 16px;
|
||||
transition: bottom 300ms ease-in-out;
|
||||
}
|
||||
#pencilbutton.pressed {
|
||||
bottom: 180px;
|
||||
}
|
||||
|
||||
#historyselect {
|
||||
position: fixed;
|
||||
|
|
|
@ -16,7 +16,8 @@ class Chunk2D extends Chunk {
|
|||
super(zoom, cx, cy);
|
||||
this.palette = palette;
|
||||
this.image = document.createElement('canvas');
|
||||
this.image.getContext('2d', { willReadFrequently: true, alpha: false });
|
||||
// do NOT use willReadFrequently, it massively trashes Render2D.renderChunks
|
||||
this.image.getContext('2d', { alpha: false });
|
||||
this.image.width = TILE_SIZE;
|
||||
this.image.height = TILE_SIZE;
|
||||
this.ready = false;
|
||||
|
|
Loading…
Reference in New Issue
Block a user