Add possibility to edit tactics that takes place on a semi court #37
Merged
maxime.batista
merged 6 commits from editor/half-court into master 1 year ago
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,11 +0,0 @@
|
|||||||
:root {
|
|
||||||
--main-color: #ffffff;
|
|
||||||
--second-color: #ccde54;
|
|
||||||
|
|
||||||
--background-color: #d2cdd3;
|
|
||||||
|
|
||||||
--selected-team-primarycolor: #ffffff;
|
|
||||||
--selected-team-secondarycolor: #000000;
|
|
||||||
|
|
||||||
--selection-color: #3f7fc4;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
#panel-root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel-top {
|
||||||
|
font-family: var(--text-main-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel-choices {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
background-color: var(--editor-court-selection-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
#panel-buttons {
|
||||||
|
width: 75%;
|
||||||
|
height: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: stretch;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: scale 0.5s ease-out;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-bottom,
|
||||||
|
.court-kind-button-top {
|
||||||
|
border: solid;
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
.court-kind-button-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
height: 25%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background-color: var(--editor-court-selection-buttons);
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-top {
|
||||||
|
height: 30%;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
border-width: 3px 3px 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button:hover {
|
||||||
|
scale: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-top,
|
||||||
|
.court-kind-button-image-div {
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-image {
|
||||||
|
height: 100%;
|
||||||
|
width: 150px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-image-div {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
background-color: var(--second-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-name,
|
||||||
|
.court-kind-button-details {
|
||||||
|
user-select: none;
|
||||||
|
font-family: var(--text-main-font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button-details {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 0;
|
||||||
|
transition: top 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.court-kind-button:hover .court-kind-button-details {
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
|
||||||
|
:root {
|
||||||
|
--main-color: #ffffff;
|
||||||
|
--second-color: #e8e8e8;
|
||||||
|
|
||||||
|
--background-color: #d2cdd3;
|
||||||
|
|
||||||
|
--selected-team-primarycolor: #ffffff;
|
||||||
|
--selected-team-secondarycolor: #000000;
|
||||||
|
|
||||||
|
--buttons-shadow-color: #a8a8a8;
|
||||||
|
|
||||||
|
--selection-color: #3f7fc4;
|
||||||
|
|
||||||
|
--border-color: #ffffff;
|
||||||
|
|
||||||
|
--editor-court-selection-background: #5f8fee;
|
||||||
|
--editor-court-selection-buttons: #acc4f3;
|
||||||
|
|
||||||
|
--text-main-font: "Roboto", sans-serif;
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace IQBall\Core\Data;
|
||||||
|
|
||||||
|
use InvalidArgumentException;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enumeration class workaround
|
||||||
|
* As there is no enumerations in php 7.4, this class
|
||||||
|
* encapsulates an integer value and use it as a variant discriminant
|
||||||
|
*/
|
||||||
|
final class CourtType {
|
||||||
|
private const COURT_PLAIN = 0;
|
||||||
|
private const COURT_HALF = 1;
|
||||||
|
private int $value;
|
||||||
|
|
||||||
|
private function __construct(int $val) {
|
||||||
|
if ($val < self::COURT_PLAIN || $val > self::COURT_HALF) {
|
||||||
|
throw new InvalidArgumentException("Valeur du rôle invalide");
|
||||||
|
}
|
||||||
|
$this->value = $val;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function plain(): CourtType {
|
||||||
|
return new CourtType(CourtType::COURT_PLAIN);
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function half(): CourtType {
|
||||||
|
return new CourtType(CourtType::COURT_HALF);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function name(): string {
|
||||||
|
switch ($this->value) {
|
||||||
|
case self::COURT_HALF:
|
||||||
|
return "HALF";
|
||||||
|
case self::COURT_PLAIN:
|
||||||
|
return "PLAIN";
|
||||||
|
}
|
||||||
|
die("unreachable");
|
||||||
|
}
|
||||||
|
|
||||||
|
public static function fromName(string $name): ?CourtType {
|
||||||
|
switch ($name) {
|
||||||
|
case "HALF":
|
||||||
|
return CourtType::half();
|
||||||
|
case "PLAIN":
|
||||||
|
return CourtType::plain();
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function isPlain(): bool {
|
||||||
|
return ($this->value == self::COURT_PLAIN);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function isHalf(): bool {
|
||||||
|
return ($this->value == self::COURT_HALF);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in new issue