Skip to content

Commit

Permalink
fix issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@k2xl
k2xl committed Jan 2, 2025
1 parent 1554c93 commit 7f24378
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 12 deletions.
15 changes: 14 additions & 1 deletion components/level/basicLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,20 @@ export default function BasicLayout({ cellClassName, cellStyle, controls, hideTe
hideText={hideText}
id={id}
leastMoves={level.leastMoves}
onCellClick={(x, y, rightClick, isDragging) => onClick ? onClick(y * (level.width + 1) + x, rightClick, isDragging) : undefined}
onCellDrag={(x, y, isDragging) => {
if (onClick) {
const index = y * (level.width + 1) + x;

onClick(index, false, isDragging);
}
}}
onCellMouseDown={(x, y, rightClick) => {
if (onClick) {
const index = y * (level.width + 1) + x;

onClick(index, rightClick);
}
}}
/>
{!controls ? null : <Controls controls={controls} />}
</>
Expand Down
47 changes: 38 additions & 9 deletions components/level/grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@ interface GridProps {
id: string;
leastMoves: number;
onCellClick?: (x: number, y: number, rightClick: boolean, isDragging?: boolean) => void;
onCellDrag?: (x: number, y: number, isDragging?: boolean) => void;
onCellMouseDown?: (x: number, y: number, rightClick: boolean) => void;
optimizeDom?: boolean;
themeOverride?: Theme;
}

export default function Grid({ cellClassName, cellStyle, disableAnimation, gameOverride, gameState, hideText, id, leastMoves, onCellClick, optimizeDom, themeOverride }: GridProps) {
export default function Grid({ cellClassName, cellStyle, disableAnimation, gameOverride, gameState, hideText, id, leastMoves, onCellClick, onCellDrag, onCellMouseDown, optimizeDom, themeOverride }: GridProps) {
const { game: appGame } = useContext(AppContext);
const { theme: appTheme, resolvedTheme } = useTheme();
const game = (gameOverride || appGame);
Expand Down Expand Up @@ -88,6 +90,10 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
className={cellClassName ? cellClassName(x, y) : undefined}
disableAnimation={disableAnimation}
game={game}
handleMouseDown={onCellMouseDown ? (rightClick: boolean) => {
lastTileDragged.current = new Position(x, y);
onCellMouseDown(x, y, rightClick);
} : undefined}
handleClick={onCellClick ? (rightClick: boolean) => onCellClick(x, y, rightClick, isDragging) : undefined}
key={`tile-${y}-${x}`}
pos={new Position(x, y)}
Expand All @@ -108,6 +114,10 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
className={cellClassName ? cellClassName(x, y) : undefined}
disableAnimation={disableAnimation}
game={game}
handleMouseDown={onCellMouseDown ? (rightClick: boolean) => {
lastTileDragged.current = new Position(x, y);
onCellMouseDown(x, y, rightClick);
} : undefined}
handleClick={onCellClick ? (rightClick: boolean) => onCellClick(x, y, rightClick, isDragging) : undefined}
key={`block-${tileState.block.id}`}
onTopOf={tileAtPosition.tileType}
Expand All @@ -125,6 +135,10 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
className={cellClassName ? cellClassName(x, y) : undefined}
disableAnimation={disableAnimation}
game={game}
handleMouseDown={onCellMouseDown ? (rightClick: boolean) => {
lastTileDragged.current = new Position(x, y);
onCellMouseDown(x, y, rightClick);
} : undefined}
handleClick={onCellClick ? (rightClick: boolean, isDragging?: boolean) => onCellClick(x, y, rightClick, isDragging) : undefined}
inHole={true}
key={`block-${tileState.blockInHole.id}`}
Expand All @@ -139,7 +153,7 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
}

const [isDragging, setIsDragging] = useState(false);

const [isMouseDown, setIsMouseDown] = useState(false);
const getBackground = useCallback(() => {
if (!optimizeDom) {
return null;
Expand Down Expand Up @@ -201,7 +215,8 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO

const lastTileDragged = useRef<Position | undefined>(undefined);
const onMouseMove = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
if (isDragging) {
if (isMouseDown) {
setIsDragging(true);
const rect = e.currentTarget.getBoundingClientRect();
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
Expand All @@ -213,7 +228,7 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
}

lastTileDragged.current = new Position(tileX, tileY);
onCellClick && onCellClick(tileX, tileY, false, isDragging);
onCellDrag && onCellDrag(tileX, tileY, isDragging);
}
};

Expand All @@ -239,10 +254,20 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
width: tileSize * width,
}}

onMouseDown={() => setIsDragging(true)}
onMouseUp={() => setIsDragging(false)}
onTouchStart={() => setIsDragging(true)}
onTouchEnd={() => setIsDragging(false)}
onMouseDown={() => {
setIsMouseDown(true);
}}
onMouseUp={() => {
setIsMouseDown(false);
setIsDragging(false);
}}
onTouchStart={() => {
setIsMouseDown(true);
}}
onTouchEnd={() => {
setIsMouseDown(false);
setIsDragging(false);
}}
onTouchMove={onMouseMove}
onMouseMove={(e) => {
onMouseMove(e);
Expand All @@ -257,7 +282,11 @@ export default function Grid({ cellClassName, cellStyle, disableAnimation, gameO
className={cellClassName ? cellClassName(gameState.pos.x, gameState.pos.y) : undefined}
disableAnimation={disableAnimation}
game={game}
handleClick={onCellClick ? (rightClick: boolean) => onCellClick(gameState.pos.x, gameState.pos.y, rightClick) : undefined}
handleMouseDown={onCellMouseDown ? (rightClick: boolean) => {
lastTileDragged.current = gameState.pos;
onCellMouseDown(gameState.pos.x, gameState.pos.y, rightClick);
} : undefined}
handleClick={onCellClick ? (rightClick: boolean) => onCellClick(gameState.pos.x, gameState.pos.y, rightClick, isDragging) : undefined}
onTopOf={gameState.board[gameState.pos.y][gameState.pos.x].tileType}
pos={gameState.pos}
style={cellStyle ? cellStyle(gameState.pos.x, gameState.pos.y) : undefined}
Expand Down
20 changes: 18 additions & 2 deletions components/level/tile/tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface TileProps {
disableAnimation?: boolean;
game: Game;
handleClick?: (rightClick: boolean) => void;
handleMouseDown?: (rightClick: boolean) => void;
hideText?: boolean;
inHole?: boolean;
onTopOf?: TileType;
Expand All @@ -32,6 +33,7 @@ export default function Tile({
disableAnimation,
game,
handleClick,
handleMouseDown,
inHole,
onTopOf,
pos,
Expand All @@ -48,6 +50,18 @@ export default function Tile({

const classic = theme === Theme.Classic;

function onMouseDown(e: React.MouseEvent<HTMLDivElement>) {
if (handleMouseDown) {
handleMouseDown(e.type === 'contextmenu');
}
}

function onTouchStart(e: React.TouchEvent<HTMLDivElement>) {
if (handleMouseDown) {
handleMouseDown(false);
}
}

function onClick(e: React.MouseEvent<HTMLDivElement>) {
if (handleClick) {
handleClick(e.type === 'contextmenu');
Expand All @@ -56,7 +70,7 @@ export default function Tile({
e.preventDefault();
}

function onTouch(e: React.TouchEvent<HTMLDivElement>) {
function onTouchEnd(e: React.TouchEvent<HTMLDivElement>) {
if (handleClick) {
handleClick(false);
}
Expand Down Expand Up @@ -109,7 +123,9 @@ export default function Tile({
className={classNames(`absolute tile-${game.id} tile-type-${tileType}`, className)}
onClick={onClick}
onContextMenu={onClick}
onTouchEnd={onTouch}
onMouseDown={onMouseDown}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
style={{
backgroundColor: tileType === TileType.Player ? 'var(--bg-color)' : undefined,
height: classic ? tileSize : innerTileSize,
Expand Down

0 comments on commit 7f24378

Please sign in to comment.