You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
import "../style/theme/default.css"
|
|
import "../style/new_tactic_panel.css"
|
|
|
|
import plainCourt from "../assets/court/full_court.svg"
|
|
import halfCourt from "../assets/court/half_court.svg"
|
|
import { BASE } from "../Constants"
|
|
|
|
export default function NewTacticPanel() {
|
|
return (
|
|
<div id={"panel-root"}>
|
|
<div id={"panel-top"}>
|
|
<p>Selectionnez un terrain</p>
|
|
</div>
|
|
<div id={"panel-choices"}>
|
|
<div id={"panel-buttons"}>
|
|
<CourtKindButton
|
|
name="Terrain complet"
|
|
image={plainCourt}
|
|
redirect="/tactic/new/plain"
|
|
/>
|
|
<CourtKindButton
|
|
name="Demi-terrain"
|
|
image={halfCourt}
|
|
redirect="/tactic/new/half"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CourtKindButton({
|
|
name,
|
|
image,
|
|
redirect,
|
|
}: {
|
|
name: string
|
|
image: string
|
|
redirect: string
|
|
}) {
|
|
return (
|
|
<div
|
|
className="court-kind-button"
|
|
onClick={() => (location.href = BASE + redirect)}>
|
|
<div className="court-kind-button-top">
|
|
<div className="court-kind-button-image-div">
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
className="court-kind-button-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="court-kind-button-bottom">
|
|
<p className="court-kind-button-name">{name}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|