diff --git a/.DS_Store b/.DS_Store index b448bc0..8ad8af9 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/prem-data/src/components/bar-chart/bar.css b/prem-data/src/components/bar-chart/bar.css index 82908fe..4a0439d 100644 --- a/prem-data/src/components/bar-chart/bar.css +++ b/prem-data/src/components/bar-chart/bar.css @@ -17,11 +17,12 @@ } .bar { width: 100%; - overflow: hidden; /* Hide overflow content */ + overflow: hidden; font-weight: 400; display: flex; align-items: center; font-style: italic; + gap: 1em; } .value{ width: 15%; diff --git a/prem-data/src/components/bar-chart/defensive-barchart.js b/prem-data/src/components/bar-chart/defensive-barchart.js new file mode 100644 index 0000000..7dc754f --- /dev/null +++ b/prem-data/src/components/bar-chart/defensive-barchart.js @@ -0,0 +1,66 @@ +import React from "react"; +import './bar.css'; +import { Bar } from "./bar"; + +export function DefensiveBars(stats, percentileGroup){ + + var statistics = stats.stats; + + return( +
+
Defensive Work
+
+
Tackles and Interceptions per 90
+ +
+
+
Tackles Attempted per 90
+ +
+
+
Tackles Won per 90
+ +
+
+
Tackles in Attacking 3rd per 90
+ +
+
+
Tackles in Middle 3rd per 90
+ +
+
+
Tackles in Defensive 3rd per 90
+ +
+
+
Interceptions per 90
+ +
+
+
Dribblers Challenged per 90
+ +
+
+
Dribblers Tackled per 90
+ +
+
+
Challenges Lost per 90
+ +
+
+
Aerials Won per 90
+ +
+
+
Aerials Lost per 90
+ +
+
+
Blocks per 90
+ +
+
+ ) +} \ No newline at end of file diff --git a/prem-data/src/components/bar-chart/involvement-barchart.js b/prem-data/src/components/bar-chart/involvement-barchart.js index 032dbe9..d1d22b6 100644 --- a/prem-data/src/components/bar-chart/involvement-barchart.js +++ b/prem-data/src/components/bar-chart/involvement-barchart.js @@ -8,27 +8,6 @@ export function InvolvementBars(stats, percentileGroup){ return(
-
Ball Security
-
-
Successful Take-ons per 90
- -
-
-
Take-ons Attempted per 90
- -
-
-
Successful Take-on percent
- -
-
-
Times dispossessed per 90
- -
-
-
Miscontrols per 90
- -
Involvement
Touches per 90
@@ -51,8 +30,36 @@ export function InvolvementBars(stats, percentileGroup){
-
Passes Received per 90
- +
Ball Recoveries per 90
+ +
+
+
Successful Take-ons per 90
+ +
+
+
Take-ons Attempted per 90
+ +
+
+
Fouls Drawn per 90
+ +
+
+
Fouls Committed per 90
+ +
+
+
Times dispossessed per 90
+ +
+
+
Miscontrols per 90
+ +
+
+
Errors per 90
+
) diff --git a/prem-data/src/components/bar-chart/passing-barchart.js b/prem-data/src/components/bar-chart/passing-barchart.js index 80db139..dd62774 100644 --- a/prem-data/src/components/bar-chart/passing-barchart.js +++ b/prem-data/src/components/bar-chart/passing-barchart.js @@ -41,6 +41,18 @@ export function PassingBars(stats, percentileGroup){
Short Passes Completed per 90
+
+
Crosses per 90
+ +
+
+
Switches per 90
+ +
+
+
Passes Offside per 90
+ +
) } \ No newline at end of file diff --git a/prem-data/src/pages/page-style.css b/prem-data/src/pages/page-style.css index 17aa868..c8e9935 100644 --- a/prem-data/src/pages/page-style.css +++ b/prem-data/src/pages/page-style.css @@ -91,6 +91,7 @@ display: flex; gap: 1em; box-sizing: border-box; + justify-content: space-between; } .chart-container{ max-height: fit-content; @@ -136,14 +137,17 @@ box-sizing: border-box; } .numbers-container{ - width: 70%; - display: grid; - grid-template-columns: repeat(2, 1fr); + width: 65%; + display: flex; + /* grid-template-columns: repeat(2, 1fr); */ box-sizing: border-box; + overflow-x: scroll; + font-size: 0.8em; } .player-statistics{ padding: 1em; box-sizing: border-box; + min-width: 45%; } @media screen and (max-width: 1023px) { @@ -175,9 +179,14 @@ height: fit-content; max-width: 80vw; } +} +@media screen and (max-width: 800px) { + .player-statistics{ + min-width: 90%; + } .numbers-container{ - grid-template-rows: repeat(5, 1fr); - grid-template-columns: none; + border-top: #C0C0C0 1px solid; + border-bottom: #C0C0C0 1px solid; } } @@ -205,4 +214,28 @@ .player-page-position{ font-size: 0.5em; } +} +@media screen and (min-width: 1800px) { + .player-name{ + font-size: 1.8em; + } + .player-page-club{ + font-size: 1em; + margin-bottom: 0.5em; + } + .player-page-position{ + font-size: 1em; + } + .numbers-container{ + font-size: 1.2em; + } + .chart-container p{ + font-size: 1em; + } + .position-tabs button{ + font-size: 1.5em; + } + .player-statistics{ + min-width: 60%; + } } \ No newline at end of file diff --git a/prem-data/src/pages/player-page-body/player-page-body.js b/prem-data/src/pages/player-page-body/player-page-body.js index 8f2791c..d10daf8 100644 --- a/prem-data/src/pages/player-page-body/player-page-body.js +++ b/prem-data/src/pages/player-page-body/player-page-body.js @@ -5,6 +5,7 @@ import { CreationBars } from '../../components/bar-chart/creation-barchart'; import { ProgressionBars } from '../../components/bar-chart/progression-barchart'; import { InvolvementBars } from '../../components/bar-chart/involvement-barchart'; import { PassingBars } from '../../components/bar-chart/passing-barchart'; +import { DefensiveBars } from '../../components/bar-chart/defensive-barchart'; import {useState} from 'react'; function PlayerPageBody(props){ @@ -33,8 +34,9 @@ function PlayerPageBody(props){
-
1
-
1
+
+ +
) diff --git a/prem-data/src/styles.css b/prem-data/src/styles.css index 8889dd3..f225b28 100644 --- a/prem-data/src/styles.css +++ b/prem-data/src/styles.css @@ -152,3 +152,11 @@ flex-direction: column; } } +@media screen and (min-width: 1800px) { + .player-card .player-info .player-name{ + font-size: 2.5em; + } + .player-card .player-info .club-name{ + font-size: 1.2em; + } +} diff --git a/server/.DS_Store b/server/.DS_Store index 74b1fc5..a98c27d 100644 Binary files a/server/.DS_Store and b/server/.DS_Store differ