52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import '../../styles/field.css';
|
|
// import { useHistory } from 'react-router-dom';
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
function PlayButton() {
|
|
|
|
const history = useNavigate();
|
|
|
|
// const handleButtonClick = () => {
|
|
// let path = `play`;
|
|
// history(path);
|
|
// };
|
|
const handleButtonClick = () => {
|
|
let path = `play?`;
|
|
|
|
const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]');
|
|
if (superpowerCheckbox && superpowerCheckbox.checked) {
|
|
path += 'superpower=true&';
|
|
}
|
|
|
|
const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
|
|
if (obstacleCheckbox && obstacleCheckbox.checked) {
|
|
path += 'obstacle=true&';
|
|
}
|
|
|
|
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
|
|
if (speedCheckbox && speedCheckbox.checked) {
|
|
path += 'speed=true&';
|
|
}
|
|
|
|
// Remove the trailing '&' character
|
|
path = path.slice(0, -1);
|
|
console.log(path)
|
|
history(path);
|
|
};
|
|
|
|
return (
|
|
<div className="notClicked" id="canvas_container">
|
|
<button onClick={handleButtonClick} className="playButton">Play</button>
|
|
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
|
|
<div className='checkbox'>
|
|
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
|
|
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
|
|
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PlayButton;
|