IQBall
/
Application-Web
6
0
Fork 0
Code Issues 49 Pull Requests Packages Projects 5 Releases Wiki Activity

fix basket court

Browse Source
pull/11/head
Override-6 1 year ago committed by maxime.batista
parent 712f27dac9
commit a7ddad4c67
4 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File

81
front/assets/basketball_court.svg
Unescape View File

@ -1,39 +1,44 @@
<svg width="995" height="500" viewBox="0 0 995 500" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class=".basketball-court-svg" width="995" height="500" viewBox="0 0 995 500" fill="white" xmlns="http://www.w3.org/2000/svg">
<rect x="992" y="497" width="494" height="494" transform="rotate(180 992 497)" fill="white" stroke="black" stroke-width="6"/> <rect x="992" y="497" width="494" height="494" transform="rotate(180 992 497)" stroke="black"
<rect x="3" y="3" width="494" height="494" fill="white" stroke="black" stroke-width="6"/> stroke-width="6"/>
<circle cx="496.5" cy="245.5" r="134.5" stroke="black" stroke-width="6"/> <rect x="3" y="3" width="494" height="494" stroke="black" stroke-width="6"/>
<path d="M137 337C184.496 337 223 298.496 223 251C223 203.504 184.496 165 137 165" stroke="black" stroke-width="6"/> <circle cx="496.5" cy="245.5" r="134.5" stroke="black" stroke-width="6"/>
<path d="M858 163C810.504 163 772 201.504 772 249C772 296.496 810.504 335 858 335" stroke="black" stroke-width="6"/> <path d="M137 337C184.496 337 223 298.496 223 251C223 203.504 184.496 165 137 165" stroke="black" stroke-width="6"/>
<g filter="url(#filter0_d_4_24)"> <path d="M858 163C810.504 163 772 201.504 772 249C772 296.496 810.504 335 858 335" stroke="black" stroke-width="6"/>
<circle cx="39" cy="251" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/> <g filter="url(#filter0_d_4_24)">
</g> <circle cx="39" cy="251" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
<g filter="url(#filter1_d_4_24)"> </g>
<circle cx="956" cy="250" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/> <g filter="url(#filter1_d_4_24)">
</g> <circle cx="956" cy="250" r="19.5" stroke="black" stroke-width="3" shape-rendering="crispEdges"/>
<line x1="137" y1="165" x2="6" y2="165" stroke="black" stroke-width="6"/> </g>
<line x1="137" y1="337" x2="6" y2="337" stroke="black" stroke-width="6"/> <line x1="137" y1="165" x2="6" y2="165" stroke="black" stroke-width="6"/>
<line x1="989" y1="335" x2="858" y2="335" stroke="black" stroke-width="6"/> <line x1="137" y1="337" x2="6" y2="337" stroke="black" stroke-width="6"/>
<line x1="989" y1="163" x2="858" y2="163" stroke="black" stroke-width="6"/> <line x1="989" y1="335" x2="858" y2="335" stroke="black" stroke-width="6"/>
<defs> <line x1="989" y1="163" x2="858" y2="163" stroke="black" stroke-width="6"/>
<filter id="filter0_d_4_24" x="14" y="230" width="50" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <defs>
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <filter id="filter0_d_4_24" x="14" y="230" width="50" height="50" filterUnits="userSpaceOnUse"
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> color-interpolation-filters="sRGB">
<feOffset dy="4"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur stdDeviation="2"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
<feComposite in2="hardAlpha" operator="out"/> result="hardAlpha"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> <feOffset dy="4"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/> <feGaussianBlur stdDeviation="2"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/> <feComposite in2="hardAlpha" operator="out"/>
</filter> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<filter id="filter1_d_4_24" x="931" y="229" width="50" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/>
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> </filter>
<feOffset dy="4"/> <filter id="filter1_d_4_24" x="931" y="229" width="50" height="50" filterUnits="userSpaceOnUse"
<feGaussianBlur stdDeviation="2"/> color-interpolation-filters="sRGB">
<feComposite in2="hardAlpha" operator="out"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/> result="hardAlpha"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/> <feOffset dy="4"/>
</filter> <feGaussianBlur stdDeviation="2"/>
</defs> <feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_24"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_24" result="shape"/>
</filter>
</defs>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

46
front/components/editor/BasketCourt.tsx
Unescape View File

@ -1,7 +1,8 @@
import courtSvg from '../../assets/basketball_court.svg'; import CourtSvg from '../../assets/basketball_court.svg';
import '../../style/basket_court.css'; import '../../style/basket_court.css';
import React, {MouseEvent, ReactElement, useRef, useState} from "react"; import React, {MouseEvent, ReactElement, useRef, useState} from "react";
import Player from "./Player"; import Player from "./Player";
import Draggable from "react-draggable";
const TEAM_MAX_PLAYER = 5; const TEAM_MAX_PLAYER = 5;
@ -10,31 +11,28 @@ export function BasketCourt() {
const divRef = useRef<HTMLDivElement>(null); const divRef = useRef<HTMLDivElement>(null);
return ( return (
<div id="court-container" <div id="court-container" ref={divRef}>
ref={divRef} <CourtSvg
style={{ id="court-svg"
backgroundImage: `url(${courtSvg})` onClick={(e: MouseEvent) => {
}} console.log(e.target)
onClick={(e: MouseEvent) => { let bounds = divRef.current!.getBoundingClientRect();
if (e.target != divRef.current) let playerCount = players.length;
return
let bounds = divRef.current!.getBoundingClientRect();
let playerCount = players.length;
if (playerCount >= TEAM_MAX_PLAYER) { if (playerCount >= TEAM_MAX_PLAYER) {
return; return;
} }
const player = ( const player = (
<Player key={playerCount} <Player key={playerCount}
id={playerCount + 1} id={playerCount + 1}
x={e.clientX - bounds.x} x={e.clientX - bounds.x}
y={e.clientY - bounds.y} y={e.clientY - bounds.y}
bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}} bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}
/> />
); );
setPlayers([...players, player]) setPlayers([...players, player])
}}> }}/>
{players} {players}
</div> </div>
) )

12
front/style/basket_court.css
Unescape View File

@ -1,8 +1,14 @@
#court-container { #court-container {
background-color: rebeccapurple;
display: flex; display: flex;
width: 1000px; }
height: 500px;
#court-svg {
user-select: none;
-webkit-user-drag: none;
}
#court-svg * {
stroke: var(--selected-team-secondarycolor);
} }

4
vite.config.ts
Unescape View File

@ -2,6 +2,7 @@ import {defineConfig} from "vite";
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import fs from "fs"; import fs from "fs";
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
import svgr from "vite-plugin-svgr";
function resolve_entries(dirname: string): [string, string][] { function resolve_entries(dirname: string): [string, string][] {
@ -39,5 +40,8 @@ export default defineConfig({
cssInjectedByJsPlugin({ cssInjectedByJsPlugin({
relativeCSSInjection: true, relativeCSSInjection: true,
}), }),
svgr({
include: "**/*.svg"
})
] ]
}) })

Write Preview
Loading…
Cancel
Save