Make tables pretty

client/src/Matches.js

@@ -1,17 +1,38 @@
 import React from 'react';
 
 class Matches extends React.Component {
+	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(
-            <div>
+            <div className="matchesContainer">
                 <h2>Matches</h2>
-                {this.props.event_code ? (
+                {this.props.event_code ? [
+
+				<form className="searchTeam">
+					<label>Search Team: </label>
+					<input type="text" id="team_to_search" name="team_to_search" onChangeCapture={this.onTeamChange} />
+				</form>,
+
                 <table className='matches'>
                   <thead>
-                    <tr><th className='matchNumber'>Number</th>
+                    <tr><th className='matchNumber rightDivider'>Number</th>
                         <th>red 1</th>
                         <th>red 2</th>
-                        <th className='lastRedTeam'>red 3</th>
+                        <th className='rightDivider'>red 3</th>
                         <th>blue 1</th>
                         <th>blue 2</th>
                         <th>blue 3</th>
@@ -20,16 +41,18 @@ class Matches extends React.Component {
                 <tbody>
                 {this.props.matches.map(m => 
                     (<tr key={m.match_number}>
-                      <td className='matchNumber'>{m.match_number}</td>
-                      <td>{m.red1}</td>
-                      <td>{m.red2}</td>
-                      <td className='lastRedTeam'>{m.red3}</td>
-                      <td>{m.blue1}</td>
-                      <td>{m.blue2}</td>
-                      <td>{m.blue3}</td>
+                      <td className='matchNumber rightDivider'>{m.match_number}</td>
+                      <td className={`redTeam ${(m.red1 === 6135) ? "ourTeam" : (m.red1 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.red1}</td>
+                      <td className={`redTeam ${(m.red2 === 6135) ? "ourTeam" : (m.red2 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.red2}</td>
+                      <td className={`rightDivider redTeam ${(m.red3 === 6135) ? "ourTeam" : (m.red3 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.red3}</td>
+                      <td className={`blueTeam ${(m.blue1 === 6135) ? "ourTeam" : (m.blue1 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.blue1}</td>
+                      <td className={`blueTeam ${(m.blue2 === 6135) ? "ourTeam" : (m.blue2 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.blue2}</td>
+                      <td className={`blueTeam ${(m.blue3 === 6135) ? "ourTeam" : (m.blue3 === this.state.team_to_search) ? "searchedTeam" : ""}`}>{m.blue3}</td>
                     </tr>))}
                 </tbody>
-			</table>) :<span>Select an event</span>}
+			</table>,
+
+					 ] :<span>Select an event</span>}
                 </div>
         );
     }

client/src/NextMatch.js

@@ -56,7 +56,9 @@ class NextMatch extends React.Component {
 		  </tr>
 		    </thead>
 		    <tbody>
-		      {this.props.next_match_info.map(team_output => <tr key={team_output.team_number}>
+		      {this.props.next_match_info.map(team_output => 
+			  <tr key={team_output.team_number} className={`${(team_output.alliance_colour === 'red') ? "redTeam" : "blueTeam"}
+				  ${team_output.team_number === this.props.next_match_info[2].team_number ? "bottomDivider" : ""}`}>
 			<td>{team_output.match_number}</td>
 			<td>{team_output.alliance_colour}</td>
 			<td>{team_output.team_number}</td>

client/src/Strategy.css

@@ -1,3 +1,20 @@
+:root {
+	--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.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);
+
+	/* 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 {
   min-height: 100vh;
   padding-left: 1em;
@@ -55,12 +72,57 @@ text-align: left;
 padding-right: 1em;
 }
 
-th.matchNumber,td.matchNumber {
-  border-right: 1px solid;
+.matchesContainer {
+	display: inline-block;
+}
+
+.searchTeam {
+	float: right;
+	margin-left: 1vw;
+}
+
+th.rightDivider, td.rightDivider {
+	border-right: var(--divider);
+}
+
+tr.bottomDivider {
+	border-bottom: var(--divider);
+}
+
+table {
+	border-collapse: collapse;
+}
+
+tr.redTeam, td.redTeam {
+	background-color: var(--red-team-colour);
+}
+
+tr.blueTeam, td.blueTeam {
+	background-color: var(--blue-team-colour);
+}
+
+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 {
+	color: white;
+}
+
+td.ourTeam.redTeam {
+	background-color: var(--our-team-red-colour) !important;
 }
 
-th.lastRedTeam,td.lastRedTeam {
-  border-right: 1px solid;
+td.ourTeam.blueTeam {
+	background-color: var(--our-team-blue-colour) !important;
 }
 
 .outputFilter {