Sweep: add keyboard command - when using ctrl + directional key, the main character should face the commanded direction

[Rikezenho]

Checklist

• src/hooks/useKeyPress.js ✅ Commit 322d392
• src/components/alive/Player/index.js ✅ Commit 19aa750

[sweep-ai-deprecated]

Here's the PR! #15.

⚡ Sweep Basic Tier: I'm creating this ticket using GPT-4. You have 5 GPT-4 tickets left for the month and 3 for the day. For more GPT-4 tickets, visit our payment portal.

---

Actions (click)

• ↻ Restart Sweep

Install Sweep Configs: Pull Request

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

tibia-js-experiment/README.md

Lines 1 to 55 in f5f76d5

	# Tibia JS Experiment
	A funny experiment recreating Tibia with JavaScript and React.
	## Demo
	Use WASD keys to move character.
	
	https://tibia-js.netlify.com
	## Toggle debug mode
	With debug mode, you can see more messages and console information, and even view SQM information (x, y and z axis) when hovering mouse through the map.
	Simply execute on your DevTools console:
	```
	utils.toggleDebugMode();
	```
	## Roadmap
	- [x] Walkable player (with CSS animation!)
	- [x] CSS field animation
	- [x] Name and life bars
	- [x] Map system with z-index
	- [x] Tibia things as components (with styled-components too!)
	- [x] More ground tiles
	- [x] Water tiles
	- [x] Animated water tiles
	- [x] Tile border system
	- [x] Tile "randomizer" (e.g.: for more than one sprite for grass)
	- [ ] Buildings
	- [x] Not walkable SQMs
	- [x] Field damage when walk into it
	- [x] Game messages on screen
	- [ ] Game HUD
	- [ ] More field types
	- [ ] First monster with basic AI
	- [ ] Monster attacking player
	- [ ] Attacking monsters
	- [ ] Store items in backpack
	- [ ] Use items
	- [ ] Looting system
	- [ ] Basic map editor
	- [ ] Dying system
	- [ ] Spells
	- [ ] Chat
	- [ ] Socket connection (for more than one player)
	- [ ] Light system
	- [ ] Map following character system
	- [ ] Scripting system
	- [ ] Leveling system
	- [ ] Skills upgrade system

tibia-js-experiment/src/hooks/useKeyPress.js

Lines 1 to 31 in f5f76d5

	import { useState, useEffect } from 'react';
	export default function useKeyPress(targetKey) {
	// State for keeping track of whether key is pressed
	const [keyPressed, setKeyPressed] = useState(false);
	// If pressed key is our target key then set to true
	function downHandler({ key }) {
	if (key === targetKey) {
	setKeyPressed(true);
	}
	}
	// If released key is our target key then set to false
	const upHandler = ({ key }) => {
	if (key === targetKey) {
	setKeyPressed(false);
	}
	};
	// Add event listeners
	useEffect(() => {
	window.addEventListener('keydown', downHandler);
	window.addEventListener('keyup', upHandler);
	// Remove event listeners on cleanup
	return () => {
	window.removeEventListener('keydown', downHandler);
	window.removeEventListener('keyup', upHandler);
	};
	}, []); // Empty array ensures that effect is only run on mount and unmount

tibia-js-experiment/src/components/alive/Player/index.js

Lines 13 to 169 in f5f76d5

	const useWalkWithKeyboard = () => {
	const { state: globalState, dispatch } = React.useContext(store);
	const {
	player: {
	baseSpeed,
	pos,
	},
	developer: {
	debugMode
	},
	} = globalState;
	const [direction, setDirection] = React.useState('down');
	const [walking, setWalking] = React.useState(false);
	const [speed, setSpeed] = React.useState(baseSpeed);
	const [effects, setEffects] = React.useState({});
	const calculatedSpeed = React.useMemo(() => {
	const finalSpeed = calculateSpeed(speed);
	if (debugMode) {
	log('player', `Changed speed from ${baseSpeed} to ${speed} - animation/transition time: ${finalSpeed}s`);
	}
	return finalSpeed;
	}, [speed]);
	React.useEffect(() => {
	const fn = (event) => {
	if (walking) {
	return;
	}
	let newDirection;
	let newPos = {};
	switch (`${event.key}`.toLowerCase()) {
	case 'w':
	newDirection = 'up';
	newPos = { x: pos.x, y: pos.y - 1 };
	break;
	case 's':
	newDirection = 'down';
	newPos = { x: pos.x, y: pos.y + 1 };
	break;
	case 'a':
	newDirection = 'left';
	newPos = { x: pos.x - 1, y: pos.y };
	break;
	case 'd':
	newDirection = 'right';
	newPos = { x: pos.x + 1, y: pos.y };
	break;
	}
	setDirection(newDirection);
	setWalking(true);
	if (shouldNotCompleteMove(parsedMap.map, newPos)) {
	setWalking(false);
	return;
	}
	const { effects: sqmEffects, slow } = getFutureSqmInfo(parsedMap.map, newPos);
	const finalEffects = { ...effects } || {};
	sqmEffects.forEach((item) => {
	dispatch(setMessage(item.metadata.message));
	// if (finalEffects[item.name]) {
	// clearTimeout(finalEffects[item.name].wipeTimeout);
	// delete state.effects[item.name];
	// setState(state => ({ ...state, effects: state.effects }));
	// }
	finalEffects[item.name] = {
	component: item.component,
	wipeTimeout: setTimeout(() => {
	delete effects[item.name];
	setEffects(effects);
	}, item.metadata.duration)
	};
	}, {});
	const speedTime = slow ? baseSpeed - (baseSpeed * slow) : baseSpeed;
	setSpeed(speedTime);
	setEffects(finalEffects);
	dispatch(setPlayerPos(newPos));
	};
	window.addEventListener('keypress', fn);
	return () => {
	window.removeEventListener('keypress', fn);
	};
	}, [pos, walking]);
	React.useEffect(() => {
	if (walking === true) {
	setTimeout(() => {
	setWalking(false);
	}, calculatedSpeed * 1000);
	}
	}, [walking]);
	return {
	direction,
	walking,
	calculatedSpeed,
	effects,
	}
	};
	const Player = (props = {}) => {
	const { state: globalState } = React.useContext(store);
	const {
	player: {
	name,
	maxHealth,
	maxMana,
	currentHealth,
	currentMana,
	pos,
	},
	map: {
	tileWidth
	},
	} = globalState;
	const {
	walking,
	calculatedSpeed,
	direction,
	effects,
	} = useWalkWithKeyboard();
	const cssPosition = React.useMemo(() => ({
	left: pos.x * tileWidth,
	top: pos.y * tileWidth,
	}), [pos]);
	return <div style={{ position: 'relative' }}>
	<VisualElement {...{
	walking,
	direction,
	left: cssPosition.left,
	top: cssPosition.top,
	speed: calculatedSpeed,
	}}>
	{
	Object.values(effects).length
	? Object.values(effects).map((item, index) => React.createElement(item.component, {
	key: `effect-${index}`,
	}))
	: null
	}
	<NameBar { ...{ name, maxHealth, maxMana, currentHealth, currentMana }} />
	</VisualElement>
	</div>;
	};

tibia-js-experiment/src/components/alive/Player/visual/index.js

Lines 1 to 73 in f5f76d5

	import styled, { keyframes, css } from 'styled-components';
	import Base from '../../../../styles/alive';
	import idleImg from './idle.png';
	import walkingImg from './walking.png';
	const walkingKeyFramesMap = {
	up: {
	from: {
	left: '-32px',
	top: '-32px',
	},
	to: {
	left: '-32px',
	top: '-100%',
	},
	},
	down: {
	from: {
	left: '-288px',
	top: '-32px',
	},
	to: {
	left: '-288px',
	top: '-100%',
	},
	},
	left: {
	from: {
	left: '-416px',
	top: '-32px',
	},
	to: {
	left: '-416px',
	top: '-100%',
	},
	},
	right: {
	from: {
	left: '-160px',
	top: '-32px',
	},
	to: {
	left: '-160px',
	top: '-100%',
	},
	},
	};
	const walkingKeyFrameBuilder = (direction) => keyframes`
	0% {
	background-position: ${walkingKeyFramesMap[direction].from.left} ${walkingKeyFramesMap[direction].from.top};
	}
	100% {
	background-position: ${walkingKeyFramesMap[direction].to.left} ${walkingKeyFramesMap[direction].to.top};
	}
	`;
	const walkingAnimations = css`
	animation: ${({ direction }) => walkingKeyFrameBuilder(direction)} ${({ speed }) => speed ? speed : '0.25'}s steps(8);
	`;
	const backgrounds = css`
	background-position: ${({ direction }) => {
	if (direction === 'up') return `-32px -32px;`;
	if (direction === 'down') return `-288px -32px;`;
	if (direction === 'left') return `-416px -32px;`;
	if (direction === 'right') return `-160px -32px;`;
	}};
	`;
	export default styled(Base)`
	background-image: url(${({ walking }) => walking ? walkingImg : idleImg});
	${backgrounds}

tibia-js-experiment/package.json

Lines 1 to 23 in f5f76d5

	{
	"name": "tibia-js",
	"version": "1.0.0",
	"main": "index.js",
	"license": "MIT",
	"scripts": {
	"start": "cross-env NODE_ENV=development parcel index.html",
	"build": "cross-env NODE_ENV=production parcel build index.html"
	},
	"dependencies": {
	"@babel/plugin-syntax-dynamic-import": "^7.8.3",
	"@babel/polyfill": "^7.8.3",
	"cross-env": "^7.0.0",
	"parcel-bundler": "^1.12.4",
	"react": ">= 16.8.0",
	"react-dom": ">= 16.8.0",
	"react-is": ">= 16.8.0",
	"styled-components": "^5.0.0"
	},
	"devDependencies": {
	"@babel/core": "^7.8.4",
	"sass": "^1.25.0"
	}

---

Step 2: ⌨️ Coding

• src/hooks/useKeyPress.js ✅ Commit 322d392

Modify src/hooks/useKeyPress.js with contents:
• Modify the useKeyPress function to accept an additional parameter 'modifierKey' which will be the key that modifies the target key (in this case, the ctrl key).
• In the downHandler function, check if the pressed key is the target key and the modifier key is also pressed. You can check if the modifier key is pressed by checking event.ctrlKey.
• In the upHandler function, check if the released key is the target key and the modifier key is also pressed. You can check if the modifier key is pressed by checking event.ctrlKey.

• src/components/alive/Player/index.js ✅ Commit 19aa750

Modify src/components/alive/Player/index.js with contents:
• Import the modified useKeyPress hook at the top of the file.
• In the useWalkWithKeyboard function, use the modified useKeyPress hook to listen for the ctrl + directional key combinations. Set the 'direction' state variable to the corresponding direction when a ctrl + directional key combination is detected.
• Ensure that the 'direction' state variable is only updated when the player is not walking. This can be done by checking the 'walking' state variable before updating 'direction'.

---

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/add-keyboard-command.

---

🎉 Latest improvements to Sweep:

• Sweep can now passively improve your repository! Check out Rules to learn more.

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}