Merge branch 'master' of https://codefirst.iut.uca.fr/git/IQBall/Application-Web into team/completing
commit
d78b51c015
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,21 @@
|
||||
import React, { RefObject } from "react"
|
||||
|
||||
import "../../style/ball.css"
|
||||
|
||||
import Ball from "../../assets/icon/ball.svg?react"
|
||||
import Draggable from "react-draggable"
|
||||
|
||||
export interface BallPieceProps {
|
||||
onDrop: () => void
|
||||
pieceRef: RefObject<HTMLDivElement>
|
||||
}
|
||||
|
||||
export function BallPiece({ onDrop, pieceRef }: BallPieceProps) {
|
||||
return (
|
||||
<Draggable onStop={onDrop} nodeRef={pieceRef} position={{ x: 0, y: 0 }}>
|
||||
<div className={`ball-div`} ref={pieceRef}>
|
||||
<Ball className={"ball"} />
|
||||
</div>
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
.ball * {
|
||||
fill: #c5520d;
|
||||
}
|
||||
|
||||
.ball-div,
|
||||
.ball {
|
||||
pointer-events: all;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -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,23 @@
|
||||
@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;
|
||||
--player-allies-color: #64e4f5;
|
||||
--player-opponents-color: #f59264;
|
||||
|
||||
--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,11 @@
|
||||
export interface Ball {
|
||||
/**
|
||||
* Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
|
||||
*/
|
||||
bottom_percentage: number
|
||||
|
||||
/**
|
||||
* Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
|
||||
*/
|
||||
right_percentage: number
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
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