From a1bf3bc639f0a7e41e417f4a235c30037292ddf3 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Fri, 27 Dec 2019 21:09:10 -0500 Subject: [PATCH 01/15] Make table borders one solid line --- client/src/Strategy.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 9cdc074..01c3eb0 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -63,6 +63,10 @@ th.lastRedTeam,td.lastRedTeam { border-right: 1px solid; } +table { + border-collapse: collapse; +} + .outputFilter { margin-top:1em; margin-bottom:1em; From b9c00d1599b55384ed3aaebea16772d3da95f7f6 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Fri, 27 Dec 2019 21:18:17 -0500 Subject: [PATCH 02/15] Use class 'divider' to denote columns that logically divide a table For example, before in the schedule tab there were two separate classes 'matchNumber' and 'lastRedTeam' that had a 1px solid border applied to on the right to denote a division. Now, that functionality is replaced by a 'divider' class; however, 'matchNumber' is still a class because it might prove useful later - it doesn't have any styles right now. --- client/src/Matches.js | 8 ++++---- client/src/Strategy.css | 8 ++------ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index 7738eb8..c0d23cc 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -8,10 +8,10 @@ class Matches extends React.Component { {this.props.event_code ? ( - + - + @@ -20,10 +20,10 @@ class Matches extends React.Component { {this.props.matches.map(m => ( - + - + diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 01c3eb0..36571fb 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -55,12 +55,8 @@ text-align: left; padding-right: 1em; } -th.matchNumber,td.matchNumber { - border-right: 1px solid; -} - -th.lastRedTeam,td.lastRedTeam { - border-right: 1px solid; +th.divider, td.divider { + border-right: 1px solid; } table { From a3332bf6c88abc4086e83c16e20beb89e2c39414 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 10:15:46 -0500 Subject: [PATCH 03/15] Add colouring for red and blue teams in the schedule tab I apply a 'redTeam' and 'blueTeam' class to the td's that store a red or blue team, respectively. Colours for red and blue are then in HSLA format, which allow the opacity to be changed for alternating rows and which allow the hue to be changed to create similar shades of red and blue. --- client/src/Matches.js | 12 ++++++------ client/src/Strategy.css | 18 +++++++++++++++++- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index c0d23cc..1f5ea53 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -21,12 +21,12 @@ class Matches extends React.Component { {this.props.matches.map(m => ( - - - - - - + + + + + + ))}
Number
Number red 1 red 2red 3red 3 blue 1 blue 2 blue 3
{m.match_number}{m.match_number} {m.red1} {m.red2}{m.red3}{m.red3} {m.blue1} {m.blue2} {m.blue3}
{m.match_number}{m.red1}{m.red2}{m.red3}{m.blue1}{m.blue2}{m.blue3}{m.red1}{m.red2}{m.red3}{m.blue1}{m.blue2}{m.blue3}
) :Select an event} diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 36571fb..fbf1eae 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -56,13 +56,29 @@ padding-right: 1em; } th.divider, td.divider { - border-right: 1px solid; + border-right: 2px solid; } table { border-collapse: collapse; } +td.redTeam { + background-color: hsla(0, 85%, 61%, 0.9); +} + +td.blueTeam { + background-color: hsla(210, 85%, 61%, 0.9); +} + +tr:nth-child(odd)>td.redTeam { + background-color: hsla(0, 85%, 61%, 0.7); +} + +tr:nth-child(odd)>td.blueTeam { + background-color: hsla(210, 85%, 61%, 0.7); +} + .outputFilter { margin-top:1em; margin-bottom:1em; From c958b630fb7b0988d55e7e3218e2a5676d99762e Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 10:33:26 -0500 Subject: [PATCH 04/15] Change red and blue colours to use variables --- client/src/Strategy.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/client/src/Strategy.css b/client/src/Strategy.css index fbf1eae..7650be4 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -1,3 +1,11 @@ +:root { + --red-team-colour: hsla(0, 85%, 61%, 0.9); + --blue-team-colour: hsla(210, 85%, 61%, 0.9); + /* Decrease the opacity slightly for odd numbered rows in a table for readability */ + --red-team-odd-colour: hsla(0, 85%, 61%, 0.7); + --blue-team-odd-colour: hsla(210, 85%, 61%, 0.7); +} + .Strategy { min-height: 100vh; padding-left: 1em; @@ -64,19 +72,19 @@ table { } td.redTeam { - background-color: hsla(0, 85%, 61%, 0.9); + background-color: var(--red-team-colour); } td.blueTeam { - background-color: hsla(210, 85%, 61%, 0.9); + background-color: var(--blue-team-colour); } tr:nth-child(odd)>td.redTeam { - background-color: hsla(0, 85%, 61%, 0.7); + background-color: var(--red-team-odd-colour); } tr:nth-child(odd)>td.blueTeam { - background-color: hsla(210, 85%, 61%, 0.7); + background-color: var(--blue-team-odd-colour); } .outputFilter { From fd2990b2163ef9bff717bcf5b7aa7a7585965516 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 10:51:01 -0500 Subject: [PATCH 05/15] Add team colouring to next match info --- client/src/NextMatch.js | 2 +- client/src/Strategy.css | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/NextMatch.js b/client/src/NextMatch.js index c5dedac..69a2244 100644 --- a/client/src/NextMatch.js +++ b/client/src/NextMatch.js @@ -56,7 +56,7 @@ class NextMatch extends React.Component { - {this.props.next_match_info.map(team_output => + {this.props.next_match_info.map(team_output => {team_output.match_number} {team_output.alliance_colour} {team_output.team_number} diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 7650be4..84a41a6 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -71,19 +71,19 @@ table { border-collapse: collapse; } -td.redTeam { +tr.redTeam, td.redTeam { background-color: var(--red-team-colour); } -td.blueTeam { +tr.blueTeam, td.blueTeam { background-color: var(--blue-team-colour); } -tr:nth-child(odd)>td.redTeam { +tr:nth-child(odd)>td.redTeam, tr:nth-child(odd).redTeam { background-color: var(--red-team-odd-colour); } -tr:nth-child(odd)>td.blueTeam { +tr:nth-child(odd)>td.blueTeam, tr:nth-child(odd).blueTeam { background-color: var(--blue-team-odd-colour); } From f62691c13c4446c75719a5fb74ad8b740dda0214 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 11:10:46 -0500 Subject: [PATCH 06/15] Add divider line between red and blue teams to next match info By using a new class, bottomDivider, we are able to draw a line between red and blue teams. To apply this class, we use more inline logic with ` and ${} (might change this later to be more readable). --- client/src/NextMatch.js | 4 +++- client/src/Strategy.css | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/client/src/NextMatch.js b/client/src/NextMatch.js index 69a2244..8f084a8 100644 --- a/client/src/NextMatch.js +++ b/client/src/NextMatch.js @@ -56,7 +56,9 @@ class NextMatch extends React.Component { - {this.props.next_match_info.map(team_output => + {this.props.next_match_info.map(team_output => + {team_output.match_number} {team_output.alliance_colour} {team_output.team_number} diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 84a41a6..6e7e2f7 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -67,6 +67,10 @@ th.divider, td.divider { border-right: 2px solid; } +tr.bottomDivider { + border-bottom: 2px solid; +} + table { border-collapse: collapse; } From 68f9022a4f4d0d45150c299c353e540417291215 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 11:13:14 -0500 Subject: [PATCH 07/15] Change divider class to rightDivider to differentiate from other dividers --- client/src/Matches.js | 4 ++-- client/src/Strategy.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index 1f5ea53..a5f79d0 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -8,7 +8,7 @@ class Matches extends React.Component { {this.props.event_code ? ( - + @@ -20,7 +20,7 @@ class Matches extends React.Component { {this.props.matches.map(m => ( - + diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 6e7e2f7..fdb8942 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -63,7 +63,7 @@ text-align: left; padding-right: 1em; } -th.divider, td.divider { +th.rightDivider, td.rightDivider { border-right: 2px solid; } From eb96cd6e4bed7597d2cf29e536905180942e8733 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 11:14:19 -0500 Subject: [PATCH 08/15] Make CSS variable for border style for all dividers --- client/src/Strategy.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/Strategy.css b/client/src/Strategy.css index fdb8942..802bae3 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -4,6 +4,8 @@ /* Decrease the opacity slightly for odd numbered rows in a table for readability */ --red-team-odd-colour: hsla(0, 85%, 61%, 0.7); --blue-team-odd-colour: hsla(210, 85%, 61%, 0.7); + + --divider: 2px solid; } .Strategy { @@ -64,11 +66,11 @@ padding-right: 1em; } th.rightDivider, td.rightDivider { - border-right: 2px solid; + border-right: var(--divider); } tr.bottomDivider { - border-bottom: 2px solid; + border-bottom: var(--divider); } table { From 473bb9480c351c936312afa0393129081d42b38e Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 11:15:47 -0500 Subject: [PATCH 09/15] Fix some issues with previous commits --- client/src/Matches.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index a5f79d0..0fa533b 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -11,7 +11,7 @@ class Matches extends React.Component { - + @@ -23,7 +23,7 @@ class Matches extends React.Component { - + From d83d104cf488440617de8eedae0689b8d787b96c Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 13:51:36 -0500 Subject: [PATCH 10/15] Add a green background colour for our team in schedule --- client/src/Matches.js | 12 ++++++------ client/src/Strategy.css | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index 0fa533b..3ea8d2a 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -21,12 +21,12 @@ class Matches extends React.Component { {this.props.matches.map(m => ( - - - - - - + + + + + + ))}
Number
Number red 1 red 2 red 3
{m.match_number}{m.match_number} {m.red1} {m.red2} {m.red3}
Number red 1 red 2red 3red 3 blue 1 blue 2 blue 3{m.match_number} {m.red1} {m.red2}{m.red3}{m.red3} {m.blue1} {m.blue2} {m.blue3}
{m.match_number}{m.red1}{m.red2}{m.red3}{m.blue1}{m.blue2}{m.blue3}{m.red1}{m.red2}{m.red3}{m.blue1}{m.blue2}{m.blue3}
) :Select an event} diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 802bae3..39e6279 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -89,6 +89,10 @@ tr:nth-child(odd)>td.redTeam, tr:nth-child(odd).redTeam { background-color: var(--red-team-odd-colour); } +td.ourTeam { + background-color: hsla(140, 85%, 61%, 0.9); +} + tr:nth-child(odd)>td.blueTeam, tr:nth-child(odd).blueTeam { background-color: var(--blue-team-odd-colour); } From da7893f2a7353c118d1b67d4b555fb6c08e703ef Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 13:53:44 -0500 Subject: [PATCH 11/15] Make our team colour a CSS variable --- client/src/Strategy.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 39e6279..4473778 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -5,6 +5,9 @@ --red-team-odd-colour: hsla(0, 85%, 61%, 0.7); --blue-team-odd-colour: hsla(210, 85%, 61%, 0.7); + /* A green background colour for cells that contain our team number */ + --our-team-colour: hsla(140, 85%, 61%, 0.9); + --divider: 2px solid; } @@ -90,7 +93,7 @@ tr:nth-child(odd)>td.redTeam, tr:nth-child(odd).redTeam { } td.ourTeam { - background-color: hsla(140, 85%, 61%, 0.9); + background-color: var(--our-team-colour) } tr:nth-child(odd)>td.blueTeam, tr:nth-child(odd).blueTeam { From 87c6e9228dc885dde9e62fd46550c04852febba0 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 14:19:53 -0500 Subject: [PATCH 12/15] Add colouring for our team and for a team that is searched Currently, there is no input to actually search a team. There are also some hacky things going on here, particularly with the nested ternary operators in defining classes and the usage of !important to override the more specific "odd row" selector. We might want to look into better ways to do each of these. --- client/src/Matches.js | 16 ++++++++++------ client/src/Strategy.css | 28 ++++++++++++++++++++++------ 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index 3ea8d2a..cc16e92 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -1,6 +1,10 @@ import React from 'react'; class Matches extends React.Component { + state = { + team_to_search: 1114, + } + render() { return(
@@ -21,12 +25,12 @@ class Matches extends React.Component { {this.props.matches.map(m => ( {m.match_number} - {m.red1} - {m.red2} - {m.red3} - {m.blue1} - {m.blue2} - {m.blue3} + {m.red1} + {m.red2} + {m.red3} + {m.blue1} + {m.blue2} + {m.blue3} ))} ) :Select an event} diff --git a/client/src/Strategy.css b/client/src/Strategy.css index 4473778..dab6c6e 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -5,10 +5,14 @@ --red-team-odd-colour: hsla(0, 85%, 61%, 0.7); --blue-team-odd-colour: hsla(210, 85%, 61%, 0.7); - /* A green background colour for cells that contain our team number */ - --our-team-colour: hsla(140, 85%, 61%, 0.9); + /* A green background colour for cells that contain team to search */ + --searched-team-colour: hsla(140, 85%, 61%, 0.9); - --divider: 2px solid; + /* Saturated background colours for cells that contain our team */ + --our-team-red-colour: hsla(0, 100%, 30%, 1.0); + --our-team-blue-colour: hsla(210, 100%, 30%, 1.0); + + --divider: 2px solid black; } .Strategy { @@ -92,12 +96,24 @@ tr:nth-child(odd)>td.redTeam, tr:nth-child(odd).redTeam { background-color: var(--red-team-odd-colour); } +tr:nth-child(odd)>td.blueTeam, tr:nth-child(odd).blueTeam { + background-color: var(--blue-team-odd-colour); +} + +td.searchedTeam { + background-color: var(--searched-team-colour) !important; +} + td.ourTeam { - background-color: var(--our-team-colour) + color: white; } -tr:nth-child(odd)>td.blueTeam, tr:nth-child(odd).blueTeam { - background-color: var(--blue-team-odd-colour); +td.ourTeam.redTeam { + background-color: var(--our-team-red-colour) !important; +} + +td.ourTeam.blueTeam { + background-color: var(--our-team-blue-colour) !important; } .outputFilter { From bb72a202b32ffa47beafa04dd94f719634af7b77 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 14:53:21 -0500 Subject: [PATCH 13/15] Add input to search arbitrary team --- client/src/Matches.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index cc16e92..22f9d9a 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -1,15 +1,26 @@ import React from 'react'; class Matches extends React.Component { - state = { - team_to_search: 1114, + constructor(props) { + super(props); + this.onTeamChange = this.onTeamChange.bind(this) + this.state = { + team_to_search: 1114, + } + } + + + + onTeamChange(event) { + this.setState({team_to_search: parseInt(event.target.value)}) + console.log("searching: " + event.target.value) } render() { return(

Matches

- {this.props.event_code ? ( + {this.props.event_code ? [ @@ -33,7 +44,13 @@ class Matches extends React.Component { ))} -
Number{m.blue3}
) :Select an event} + , + +
+ +
, + + ] :Select an event}
); } From 1ff9c529edb20f0f1cb3eb4b99eff49e5e8f41f9 Mon Sep 17 00:00:00 2001 From: Moeez Muhammad Date: Sat, 28 Dec 2019 15:05:41 -0500 Subject: [PATCH 14/15] Style input to be beside the table and add label --- client/src/Matches.js | 12 +++++++----- client/src/Strategy.css | 9 +++++++++ 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/client/src/Matches.js b/client/src/Matches.js index 22f9d9a..33e41f9 100644 --- a/client/src/Matches.js +++ b/client/src/Matches.js @@ -18,9 +18,15 @@ class Matches extends React.Component { render() { return( -
+

Matches

{this.props.event_code ? [ + +
+ + +
, + @@ -46,10 +52,6 @@ class Matches extends React.Component {
Number
, -
- -
, - ] :Select an event}
); diff --git a/client/src/Strategy.css b/client/src/Strategy.css index dab6c6e..f9e9284 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -72,6 +72,15 @@ text-align: left; padding-right: 1em; } +.matchesContainer { + display: inline-block; +} + +.searchTeam { + float: right; + margin-left: 1vw; +} + th.rightDivider, td.rightDivider { border-right: var(--divider); } From af4bf16ddf86b87ad30c0484539835b48d6c6787 Mon Sep 17 00:00:00 2001 From: Michal Davis Date: Sun, 29 Dec 2019 20:40:00 -0500 Subject: [PATCH 15/15] Desaturate background colours in tables Constrast between text and background was too low to be comfortable --- client/src/Strategy.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/Strategy.css b/client/src/Strategy.css index f9e9284..f1320bb 100644 --- a/client/src/Strategy.css +++ b/client/src/Strategy.css @@ -1,9 +1,9 @@ :root { - --red-team-colour: hsla(0, 85%, 61%, 0.9); - --blue-team-colour: hsla(210, 85%, 61%, 0.9); + --red-team-colour: hsla(0, 85%, 61%, 0.7); + --blue-team-colour: hsla(210, 85%, 61%, 0.7); /* Decrease the opacity slightly for odd numbered rows in a table for readability */ - --red-team-odd-colour: hsla(0, 85%, 61%, 0.7); - --blue-team-odd-colour: hsla(210, 85%, 61%, 0.7); + --red-team-odd-colour: hsla(0, 85%, 61%, 0.5); + --blue-team-odd-colour: hsla(210, 85%, 61%, 0.5); /* A green background colour for cells that contain team to search */ --searched-team-colour: hsla(140, 85%, 61%, 0.9);