Robotics

import React, { useState } from "react";

const RobotControl = () => {

  const [position, setPosition] = useState({ x: 0, y: 0 });

  // Movement handlers

  const moveUp = () => {

    setPosition((prev) => ({ ...prev, y: prev.y - 1 }));

  };

  const moveDown = () => {

    setPosition((prev) => ({ ...prev, y: prev.y + 1 }));

  };

  const moveLeft = () => {

    setPosition((prev) => ({ ...prev, x: prev.x - 1 }));

  };

  const moveRight = () => {

    setPosition((prev) => ({ ...prev, x: prev.x + 1 }));

  };

  return (

    <div style={{ textAlign: "center", padding: "20px" }}>

      <h1>Robot Control</h1>

      <div

        style={{

          width: "200px",

          height: "200px",

          border: "2px solid black",

          position: "relative",

          margin: "20px auto",

        }}

      >

        <div

          style={{

            width: "20px",

            height: "20px",

            backgroundColor: "red",

            position: "absolute",

            top: `${position.y * 20 + 90}px`,

            left: `${position.x * 20 + 90}px`,

            transition: "0.2s",

          }}

        ></div>

      </div>

      <div>

        <button onClick={moveUp} style={{ margin: "5px" }}>

          Move Up

        </button>

        <div>

          <button onClick={moveLeft} style={{ margin: "5px" }}>

            Move Left

          </button>

          <button onClick={moveRight} style={{ margin: "5px" }}>

            Move Right

          </button>

        </div>

        <button onClick={moveDown} style={{ margin: "5px" }}>

          Move Down

        </button>

      </div>

      <h3>Position: (X: {position.x}, Y: {position.y})</h3>

    </div>

  );

};

export default RobotControl