diff --git a/front/ViewRenderer.tsx b/front/ViewRenderer.tsx index 17148dc..ffaf886 100644 --- a/front/ViewRenderer.tsx +++ b/front/ViewRenderer.tsx @@ -11,8 +11,6 @@ export function renderView(Component: FunctionComponent, args: {}) { document.getElementById('root') as HTMLElement ); - console.log(args) - root.render( diff --git a/front/assets/basketball_court.svg b/front/assets/basketball_court.svg new file mode 100644 index 0000000..c5378b9 --- /dev/null +++ b/front/assets/basketball_court.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx new file mode 100644 index 0000000..bc19f9e --- /dev/null +++ b/front/components/editor/BasketCourt.tsx @@ -0,0 +1,35 @@ +import courtSvg from '../../assets/basketball_court.svg'; +import '../../style/basket_court.css'; +import React, {MouseEvent, ReactElement, useRef, useState} from "react"; +import Player from "./Player"; + + +export function BasketCourt() { + const [players, setPlayers] = useState([]) + const divRef = useRef(null); + + return ( +
{ + let bounds = divRef.current.getBoundingClientRect(); + + const player = ( + + ); + setPlayers([...players, player]) + }}> + {players} +
+ ) +} + + diff --git a/front/components/editor/Player.tsx b/front/components/editor/Player.tsx new file mode 100644 index 0000000..62f858a --- /dev/null +++ b/front/components/editor/Player.tsx @@ -0,0 +1,34 @@ +import React, {useEffect, useRef, useState} from "react"; +import "../../style/player.css"; +import Draggable, {ControlPosition, DraggableBounds} from "react-draggable"; + +export default function Player({id, x, y, bounds}: { + id: number, + x: number, + y: number, + bounds: DraggableBounds +}) { + + const ref = useRef(); + useEffect(() => { + const playerRect = ref.current?.getBoundingClientRect(); + bounds.bottom -= playerRect.height / 2; + bounds.right -= playerRect.width / 2; + }, [ref]) + + return ( + +
+

{id}

+
+ + + ) +} \ No newline at end of file diff --git a/front/style/basket_court.css b/front/style/basket_court.css new file mode 100644 index 0000000..b1a3e10 --- /dev/null +++ b/front/style/basket_court.css @@ -0,0 +1,8 @@ + + +#court-container { + background-color: rebeccapurple; + display: flex; + width: 1000px; + height: 500px; +} \ No newline at end of file diff --git a/front/style/colors.css b/front/style/colors.css index 34bdbb5..68ccdaa 100644 --- a/front/style/colors.css +++ b/front/style/colors.css @@ -5,4 +5,9 @@ --second-color: #ccde54; --background-color: #d2cdd3; + + + + --selected-team-primarycolor: #ffffff; + --selected-team-secondarycolor: #000000; } \ No newline at end of file diff --git a/front/style/editor.css b/front/style/editor.css index 2ed88d6..62c4e9d 100644 --- a/front/style/editor.css +++ b/front/style/editor.css @@ -1,13 +1,16 @@ @import "colors.css"; -#main { +#main-div { + display: flex; height: 100%; width: 100%; background-color: var(--background-color); + + flex-direction: column; } -#topbar { +#topbar-div { display: flex; background-color: var(--main-color); @@ -17,4 +20,14 @@ .title_input { width: 25ch; -} \ No newline at end of file +} + +#court-div { + background-color: var(--background-color); + height: 100%; + + display: flex; + align-items: center; + justify-content: center; +} + diff --git a/front/style/player.css b/front/style/player.css new file mode 100644 index 0000000..4450dec --- /dev/null +++ b/front/style/player.css @@ -0,0 +1,24 @@ +.player { + font-family: monospace; + + background-color: var(--selected-team-primarycolor); + color: var(--selected-team-secondarycolor); + + + border-width: 2px; + border-radius: 100px; + border-style: solid; + + width: 20px; + height: 20px; + + display: flex; + + align-items: center; + justify-content: center; + + /*apply a translation to */ + transform: translate(-50%, -50%); + + user-select: none; +} \ No newline at end of file diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index 84d24e6..471a94d 100644 --- a/front/views/Editor.tsx +++ b/front/views/Editor.tsx @@ -2,6 +2,7 @@ import React, {CSSProperties, useState} from "react"; import "../style/editor.css"; import TitleInput from "../components/TitleInput"; import {API} from "../Constants"; +import {BasketCourt} from "../components/editor/BasketCourt"; const ERROR_STYLE: CSSProperties = { borderColor: "red" @@ -12,8 +13,8 @@ export default function Editor({id, name}: { id: number, name: string }) { const [style, setStyle] = useState({}); return ( -
-
+
+
LEFT
{ fetch(`${API}/tactic/${id}/edit/name`, { @@ -35,7 +36,9 @@ export default function Editor({id, name}: { id: number, name: string }) { }}/>
RIGHT
+
+ +
) } - diff --git a/package.json b/package.json index 0eb1e79..90209d0 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "@types/react-dom": "^18.2.14", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "typescript": "^5.2.2", "vite": "^4.5.0", - "vite-plugin-css-injected-by-js": "^3.3.0", - "web-vitals": "^2.1.4" + "vite-plugin-css-injected-by-js": "^3.3.0" }, "scripts": { "start": "vite --host", @@ -29,6 +29,8 @@ ] }, "devDependencies": { - "@vitejs/plugin-react": "^4.1.0" + "@svgr/webpack": "^8.1.0", + "@vitejs/plugin-react": "^4.1.0", + "vite-plugin-svgr": "^4.1.0" } } diff --git a/public/front b/public/front new file mode 120000 index 0000000..c1394c9 --- /dev/null +++ b/public/front @@ -0,0 +1 @@ +../front \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 03ab8f4..b81e587 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,6 +2,7 @@ import {defineConfig} from "vite"; import react from '@vitejs/plugin-react'; import fs from "fs"; import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; +import svgr from 'vite-plugin-svgr'; function resolve_entries(dirname: string): [string, string][] { @@ -38,6 +39,9 @@ export default defineConfig({ react(), cssInjectedByJsPlugin({ relativeCSSInjection: true, + }), + svgr({ + include: "**/*.svg", }) ] })