animairani-agent.jsx

import { useState } from 'react'
import './App.css'
import dune from './assets/dune.png'
import road from './assets/road.png'
import water from './assets/water.png'
import draza from './assets/draza.png'

const images = {
  0: dune,
  1: road,
  2: water
}

function App() {
  const [width, setWidth] = useState(4)
  const [height, setHeight] = useState(3)
  const [tiles, setTiles] = useState([0, 0, 1, 1, 1, 1, 2, 2, 0, 0, 1, 2])

  const [drazaX, setDrazaX] = useState(0)

  return (
    <div>
      <svg viewBox="0 0 400 300">
        {tiles.map((tile, i) => <image href={images[tile]} x={i * 400/ width} y={Math.floor(i / width) * 300 / height} width={400 / width} height={300 / height}/>)}
        <image
          style={{ transition: 'transform 1s', transform: `translateX(${drazaX * 100}px)` }}
          onClick={() => setDrazaX(x => x + 1)}
          href={draza} x={0} y={0} width={400 / width} height={300 / height}
        />
      </svg>
    </div>
  )


  return (
    <div style={{display: 'inline-grid', gridTemplateColumns: 'repeat(4, 1fr)'}}>
      {tiles.map(tile => <img style={{width: 120}} src={images[tile]}/>)}
    </div>
  )
}

export default App