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