pull/13/head
Override-6
parent
582a623576
commit
2e4f2eb10c
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$finder = (new PhpCsFixer\Finder())->in(__DIR__);
|
||||||
|
|
||||||
|
return (new PhpCsFixer\Config())
|
||||||
|
->setRules([
|
||||||
|
'@PER-CS' => true,
|
||||||
|
'@PHP82Migration' => true,
|
||||||
|
'array_syntax' => ['syntax' => 'short'],
|
||||||
|
'braces_position' => [
|
||||||
|
'classes_opening_brace' => 'same_line',
|
||||||
|
'functions_opening_brace' => 'same_line'
|
||||||
|
]
|
||||||
|
])
|
||||||
|
->setIndent(" ")
|
||||||
|
->setFinder($finder);
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"bracketSameLine": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"printWidth": 80,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": false
|
||||||
|
}
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@startuml
|
|
||||||
|
|
||||||
class Connexion
|
|
||||||
|
|
||||||
class Modele
|
|
||||||
|
|
||||||
class Account
|
|
||||||
|
|
||||||
class AccountGateway
|
|
||||||
|
|
||||||
|
|
||||||
@enduml
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
|
||||||
|
## verify php and typescript types
|
||||||
|
|
||||||
|
echo "formatting php typechecking"
|
||||||
|
vendor/bin/php-cs-fixer fix
|
||||||
|
|
||||||
|
echo "formatting typescript typechecking"
|
||||||
|
npm run format
|
||||||
@ -1,4 +1,4 @@
|
|||||||
/**
|
/**
|
||||||
* This constant defines the API endpoint.
|
* This constant defines the API endpoint.
|
||||||
*/
|
*/
|
||||||
export const API = import.meta.env.VITE_API_ENDPOINT;
|
export const API = import.meta.env.VITE_API_ENDPOINT
|
||||||
|
|||||||
@ -1,58 +1,72 @@
|
|||||||
import {ReactElement, useRef} from "react";
|
import { ReactElement, useRef } from "react"
|
||||||
import Draggable from "react-draggable";
|
import Draggable from "react-draggable"
|
||||||
|
|
||||||
export interface RackProps<E extends {key: string | number}> {
|
export interface RackProps<E extends { key: string | number }> {
|
||||||
id: string,
|
id: string
|
||||||
objects: E[],
|
objects: E[]
|
||||||
onChange: (objects: E[]) => void,
|
onChange: (objects: E[]) => void
|
||||||
canDetach: (ref: HTMLDivElement) => boolean,
|
canDetach: (ref: HTMLDivElement) => boolean
|
||||||
onElementDetached: (ref: HTMLDivElement, el: E) => void,
|
onElementDetached: (ref: HTMLDivElement, el: E) => void
|
||||||
render: (e: E) => ReactElement,
|
render: (e: E) => ReactElement
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RackItemProps<E extends {key: string | number}> {
|
interface RackItemProps<E extends { key: string | number }> {
|
||||||
item: E,
|
item: E
|
||||||
onTryDetach: (ref: HTMLDivElement, el: E) => void,
|
onTryDetach: (ref: HTMLDivElement, el: E) => void
|
||||||
render: (e: E) => ReactElement,
|
render: (e: E) => ReactElement
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A container of draggable objects
|
* A container of draggable objects
|
||||||
* */
|
* */
|
||||||
export function Rack<E extends {key: string | number}>({id, objects, onChange, canDetach, onElementDetached, render}: RackProps<E>) {
|
export function Rack<E extends { key: string | number }>({
|
||||||
|
id,
|
||||||
|
objects,
|
||||||
|
onChange,
|
||||||
|
canDetach,
|
||||||
|
onElementDetached,
|
||||||
|
render,
|
||||||
|
}: RackProps<E>) {
|
||||||
return (
|
return (
|
||||||
<div id={id} style={{
|
<div
|
||||||
display: "flex"
|
id={id}
|
||||||
}}>
|
style={{
|
||||||
{objects.map(element => (
|
display: "flex",
|
||||||
<RackItem key={element.key}
|
}}>
|
||||||
item={element}
|
{objects.map((element) => (
|
||||||
render={render}
|
<RackItem
|
||||||
onTryDetach={(ref, element) => {
|
key={element.key}
|
||||||
if (!canDetach(ref))
|
item={element}
|
||||||
return
|
render={render}
|
||||||
|
onTryDetach={(ref, element) => {
|
||||||
|
if (!canDetach(ref)) return
|
||||||
|
|
||||||
const index = objects.findIndex(o => o.key === element.key)
|
const index = objects.findIndex(
|
||||||
onChange(objects.toSpliced(index, 1))
|
(o) => o.key === element.key,
|
||||||
|
)
|
||||||
|
onChange(objects.toSpliced(index, 1))
|
||||||
|
|
||||||
onElementDetached(ref, element)
|
onElementDetached(ref, element)
|
||||||
}}/>
|
}}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function RackItem<E extends {key: string | number}>({item, onTryDetach, render}: RackItemProps<E>) {
|
function RackItem<E extends { key: string | number }>({
|
||||||
const divRef = useRef<HTMLDivElement>(null);
|
item,
|
||||||
|
onTryDetach,
|
||||||
|
render,
|
||||||
|
}: RackItemProps<E>) {
|
||||||
|
const divRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Draggable
|
<Draggable
|
||||||
position={{x: 0, y: 0}}
|
position={{ x: 0, y: 0 }}
|
||||||
nodeRef={divRef}
|
nodeRef={divRef}
|
||||||
onStop={() => onTryDetach(divRef.current!, item)}>
|
onStop={() => onTryDetach(divRef.current!, item)}>
|
||||||
<div ref={divRef}>
|
<div ref={divRef}>{render(item)}</div>
|
||||||
{render(item)}
|
|
||||||
</div>
|
|
||||||
</Draggable>
|
</Draggable>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,28 +1,32 @@
|
|||||||
import React, {CSSProperties, useRef, useState} from "react";
|
import React, { CSSProperties, useRef, useState } from "react"
|
||||||
import "../style/title_input.css";
|
import "../style/title_input.css"
|
||||||
|
|
||||||
export interface TitleInputOptions {
|
export interface TitleInputOptions {
|
||||||
style: CSSProperties,
|
style: CSSProperties
|
||||||
default_value: string,
|
default_value: string
|
||||||
on_validated: (a: string) => void
|
on_validated: (a: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function TitleInput({style, default_value, on_validated}: TitleInputOptions) {
|
export default function TitleInput({
|
||||||
const [value, setValue] = useState(default_value);
|
style,
|
||||||
const ref = useRef<HTMLInputElement>(null);
|
default_value,
|
||||||
|
on_validated,
|
||||||
|
}: TitleInputOptions) {
|
||||||
|
const [value, setValue] = useState(default_value)
|
||||||
|
const ref = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input className="title_input"
|
<input
|
||||||
ref={ref}
|
className="title_input"
|
||||||
style={style}
|
ref={ref}
|
||||||
type="text"
|
style={style}
|
||||||
value={value}
|
type="text"
|
||||||
onChange={event => setValue(event.target.value)}
|
value={value}
|
||||||
onBlur={_ => on_validated(value)}
|
onChange={(event) => setValue(event.target.value)}
|
||||||
onKeyDown={event => {
|
onBlur={(_) => on_validated(value)}
|
||||||
if (event.key == 'Enter')
|
onKeyDown={(event) => {
|
||||||
ref.current?.blur();
|
if (event.key == "Enter") ref.current?.blur()
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,55 +1,49 @@
|
|||||||
import {useRef} from "react";
|
import { useRef } from "react"
|
||||||
import "../../style/player.css";
|
import "../../style/player.css"
|
||||||
import RemoveIcon from "../../assets/icon/remove.svg?react";
|
import RemoveIcon from "../../assets/icon/remove.svg?react"
|
||||||
import Draggable from "react-draggable";
|
import Draggable from "react-draggable"
|
||||||
import {PlayerPiece} from "./PlayerPiece";
|
import { PlayerPiece } from "./PlayerPiece"
|
||||||
import {Player} from "../../data/Player";
|
import { Player } from "../../data/Player"
|
||||||
|
|
||||||
export interface PlayerProps {
|
export interface PlayerProps {
|
||||||
player: Player,
|
player: Player
|
||||||
onRemove: () => void
|
onRemove: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
* A player that is placed on the court, which can be selected, and moved in the associated bounds
|
||||||
* */
|
* */
|
||||||
export default function CourtPlayer({player, onRemove}: PlayerProps) {
|
export default function CourtPlayer({ player, onRemove }: PlayerProps) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const x = player.rightRatio
|
||||||
|
const y = player.bottomRatio
|
||||||
const x = player.rightRatio;
|
|
||||||
const y = player.bottomRatio;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Draggable
|
<Draggable handle={".player-piece"} nodeRef={ref} bounds="parent">
|
||||||
handle={".player-piece"}
|
<div
|
||||||
nodeRef={ref}
|
ref={ref}
|
||||||
bounds="parent"
|
className={"player"}
|
||||||
>
|
style={{
|
||||||
<div ref={ref}
|
position: "absolute",
|
||||||
className={"player"}
|
left: `${x * 100}%`,
|
||||||
style={{
|
top: `${y * 100}%`,
|
||||||
position: "absolute",
|
}}>
|
||||||
left: `${x * 100}%`,
|
<div
|
||||||
top: `${y * 100}%`,
|
tabIndex={0}
|
||||||
}}>
|
className="player-content"
|
||||||
|
onKeyUp={(e) => {
|
||||||
<div tabIndex={0}
|
if (e.key == "Delete") onRemove()
|
||||||
className="player-content"
|
}}>
|
||||||
onKeyUp={e => {
|
|
||||||
if (e.key == "Delete")
|
|
||||||
onRemove()
|
|
||||||
}}>
|
|
||||||
<div className="player-selection-tab">
|
<div className="player-selection-tab">
|
||||||
<RemoveIcon
|
<RemoveIcon
|
||||||
className="player-selection-tab-remove"
|
className="player-selection-tab-remove"
|
||||||
onClick={onRemove}/>
|
onClick={onRemove}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<PlayerPiece team={player.team} text={player.role}/>
|
<PlayerPiece team={player.team} text={player.role} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Draggable>
|
</Draggable>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
import React from "react";
|
import React from "react"
|
||||||
import '../../style/player.css'
|
import "../../style/player.css"
|
||||||
import {Team} from "../../data/Team";
|
import { Team } from "../../data/Team"
|
||||||
|
|
||||||
|
export function PlayerPiece({ team, text }: { team: Team; text: string }) {
|
||||||
export function PlayerPiece({team, text}: { team: Team, text: string }) {
|
|
||||||
return (
|
return (
|
||||||
<div className={`player-piece ${team}`}>
|
<div className={`player-piece ${team}`}>
|
||||||
<p>{text}</p>
|
<p>{text}</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
export enum Team {
|
export enum Team {
|
||||||
Allies = "allies",
|
Allies = "allies",
|
||||||
Opponents = "opponents"
|
Opponents = "opponents",
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,13 @@
|
|||||||
|
|
||||||
interface DisplayResultsProps {
|
interface DisplayResultsProps {
|
||||||
results: readonly { name: string, description: string}[]
|
results: readonly { name: string; description: string }[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function DisplayResults({results}: DisplayResultsProps) {
|
export default function DisplayResults({ results }: DisplayResultsProps) {
|
||||||
const list = results
|
const list = results.map(({ name, description }) => (
|
||||||
.map(({name, description}) =>
|
|
||||||
<div>
|
<div>
|
||||||
<p>username: {name}</p>
|
<p>username: {name}</p>
|
||||||
<p>description: {description}</p>
|
<p>description: {description}</p>
|
||||||
</div>
|
</div>
|
||||||
)
|
))
|
||||||
return (
|
return <div>{list}</div>
|
||||||
<div>
|
|
||||||
{list}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,15 @@
|
|||||||
|
parameters:
|
||||||
|
phpVersion: 70400
|
||||||
|
level: 6
|
||||||
|
paths:
|
||||||
|
- src
|
||||||
|
- public
|
||||||
|
- sql
|
||||||
|
ignoreErrors:
|
||||||
|
-
|
||||||
|
message: '#.*#'
|
||||||
|
path: sql/database.php
|
||||||
|
-
|
||||||
|
message: '#.*#'
|
||||||
|
path: src/react-display-file.php
|
||||||
|
|
||||||
Loading…
Reference in new issue