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.
64 lines
2.0 KiB
64 lines
2.0 KiB
import "../style/theme/default.css"
|
|
import "../style/new_tactic_panel.css"
|
|
|
|
import plainCourt from "../assets/court/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>Select a basket court</p>
|
|
</div>
|
|
<div id={"panel-choices"}>
|
|
<div id={"panel-buttons"}>
|
|
<CourtKindButton
|
|
name="Plain"
|
|
details="Select a plain basketball court"
|
|
image={plainCourt}
|
|
redirect="/tactic/new/plain"
|
|
/>
|
|
<CourtKindButton
|
|
name="Half"
|
|
details="Select half a basketball court"
|
|
image={halfCourt}
|
|
redirect="/tactic/new/half"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CourtKindButton({
|
|
name,
|
|
image,
|
|
details,
|
|
redirect,
|
|
}: {
|
|
name: string
|
|
image: string
|
|
details: string
|
|
redirect: string
|
|
}) {
|
|
return (
|
|
<div
|
|
className="court-kind-button"
|
|
onClick={() => location.href = BASE + redirect}>
|
|
<div className="court-kind-button-details">{details}</div>
|
|
<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>
|
|
)
|
|
}
|