From 829871f5373264ba2d056099df88591544b53911 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <darkicewolf50@gmail.com>
Date: Sat, 21 Jun 2025 15:55:46 -0600
Subject: [PATCH] feat(history): done, need content and mobile layout

---
 src/History/History.css | 179 ++++++++++++++++++++++++++++++++++++++++
 src/History/History.jsx | 105 +++++++++++++----------
 2 files changed, 242 insertions(+), 42 deletions(-)

diff --git a/src/History/History.css b/src/History/History.css
index e69de29..b8fae51 100644
--- a/src/History/History.css
+++ b/src/History/History.css
@@ -0,0 +1,179 @@
+#History {
+	display: flex;
+	flex-direction: column;
+	padding: 4svh 4svw;
+	row-gap: 4svh;
+	background-color: black;
+	color: white;
+}
+
+#History div {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	align-self: center;
+	padding: 2svh 2svw;
+	border: 1px solid white;
+	border-radius: 1rem;
+	row-gap: 2svh;
+}
+
+#History div p {
+	padding: 0px;
+	margin: 0px;
+}
+
+#History div a {
+	color: inherit;
+}
+
+#History div button {
+	background-color: inherit;
+	border-radius: 1rem;
+	border: 1px solid white;
+	padding: 1svh 6svw;
+	color: inherit;
+}
+
+#History div button:hover {
+	background-color: lightblue;
+	color: #a80029;
+}
+
+#History table {
+	border-collapse: collapse;
+	width: auto;
+	margin: 2svh auto;
+}
+
+#History table tbody {
+	color: inherit;
+}
+
+#History table tr {
+	position: relative;
+}
+
+#History tr td {
+	width: 300px;
+	height: 300px;
+	vertical-align: middle;
+}
+
+#History tr td img {
+	width: inherit;
+	height: inherit;
+	border-radius: 1rem;
+	display: block;
+}
+
+#History .HistoryCompInfo {
+	display: block;
+	text-align: center;
+	height: auto;
+	width: inherit;
+
+	padding: 12svh 0svw;
+
+	border: 1px solid white;
+	border-radius: 1rem;
+}
+
+:root {
+	--historyPaddingFromMiddle: 4svw;
+}
+
+#History table tr td:first-child {
+	padding-right: var(--historyPaddingFromMiddle);
+}
+
+#History table tr td:nth-child(3) {
+	padding-left: var(--historyPaddingFromMiddle);
+}
+
+#History .HistoryCompInfo h2,
+#History .HistoryCompInfo h4 {
+	margin: 2svh 0svw;
+}
+
+#History .HistoryCompInfo ul {
+	list-style-type: none;
+	display: flex;
+	flex-flow: row wrap;
+	padding: 0svh 2svw;
+	margin: 0px;
+}
+
+#History .HistoryCompInfo ul li {
+	padding: 0.5svh 0svw;
+	flex: 50%;
+}
+
+#History .HistoryCompInfo ul li:nth-child(odd) {
+	text-align: start;
+}
+
+#History .HistoryCompInfo ul li:nth-child(even) {
+	text-align: end;
+}
+
+#History .symbol {
+	position: relative;
+	width: 40px;
+	text-align: center;
+}
+
+#History .symbol::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	width: 2px;
+	background-color: rgb(120, 120, 120);
+	transform: translateX(-50%);
+	z-index: 0;
+}
+
+#History .dot {
+	display: inline-block;
+	background-color: rgb(120, 120, 120);
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	font-weight: bold;
+	position: relative;
+	z-index: 2;
+}
+
+#History tr:first-child .symbol::before {
+	top: 50%;
+}
+
+#HistoryJoin {
+	position: relative;
+	padding: 0;
+	text-align: center;
+}
+
+#History #HistoryJoin div {
+	text-wrap: nowrap;
+	margin: 0;
+	position: relative;
+	background-color: black;
+	z-index: 2; /* above line */
+}
+
+/* without this line will stop at the div */
+/* stop line at last one with these two */
+
+/* #HistoryJoin::before {
+	height: 80%;
+}
+
+
+#History tr:last-child .symbol::before {
+	bottom: 50%;
+} */
diff --git a/src/History/History.jsx b/src/History/History.jsx
index 0f964c0..e2ec7a1 100644
--- a/src/History/History.jsx
+++ b/src/History/History.jsx
@@ -2,6 +2,7 @@ import UpdateBanner from "../Header/UpdateBanner";
 import "./History.css";
 
 import { Link } from "react-router-dom";
+import React from "react";
 
 export default function History() {
 	let historyTimeLineInfo = [
@@ -34,52 +35,74 @@ export default function History() {
 				<p>
 					The history of our cars are below. They include overall competition
 					results (as well as old competition stats if u wanna include that).
-					Learn more about what we do at competitoin here.
+					Learn more about what we do at competition here.
 				</p>
 				<Link to={"/AboutUs"}>
 					<button>Learn More</button>
 				</Link>
 			</div>
 			<table>
-				{historyTimeLineInfo.map((yearInfo, index) => {
-					return (
-						<tr key={index}>
-							{index % 2 === 0 ? (
-								<>
-									<td>
-										<img
-											src={yearInfo.competitionCarImg}
-											alt={yearInfo.year + "'s Car"}
-										/>
-									</td>
-									<td>{/* Star or circle spot */}*</td>
-									<td>
-										<CompetitionInfo
-											year={yearInfo.year}
-											competitions={yearInfo.competitions}
-										/>
-									</td>
-								</>
-							) : (
-								<>
-									<td>
-										<CompetitionInfo
-											year={yearInfo.year}
-											competitions={yearInfo.competitions}
-										/>
-										<td>{/* Star or circle spot */}*</td>
+				{/* <colgroup>
+					<col />
+					<col class="symbol" />
+					<col />
+				</colgroup> */}
+				<tbody>
+					{historyTimeLineInfo.map((yearInfo, index) => {
+						return (
+							<tr key={index}>
+								{index % 2 === 0 ? (
+									<>
 										<td>
 											<img
 												src={yearInfo.competitionCarImg}
 												alt={yearInfo.year + "'s Car"}
 											/>
 										</td>
-									</td>
-								</>
-							)}
-						</tr>
-					);
-				})}
+
+										<td className="symbol">
+											<span className="dot">{/* Star or circle spot */}</span>
+										</td>
+										<td>
+											<CompetitionInfo
+												year={yearInfo.year}
+												competitions={yearInfo.competitions}
+											/>
+										</td>
+									</>
+								) : (
+									<>
+										<td>
+											<CompetitionInfo
+												year={yearInfo.year}
+												competitions={yearInfo.competitions}
+											/>
+										</td>
+
+										<td className="symbol">
+											<span className="dot">{/* Star or circle spot */}</span>
+										</td>
+										<td>
+											<img
+												src={yearInfo.competitionCarImg}
+												alt={yearInfo.year + "'s Car"}
+											/>
+										</td>
+									</>
+								)}
+							</tr>
+						);
+					})}
+					<tr>
+						<td></td>
+						<td
+							className="symbol"
+							id="HistoryJoin">
+							<div>Where You Join!</div>
+						</td>
+						<td></td>
+					</tr>
+				</tbody>
 			</table>
 		</div>
 	);
@@ -87,23 +110,21 @@ export default function History() {
 
 function CompetitionInfo({ year, competitions }) {
 	return (
-		<>
+		<div
+			key={year + competitions}
+			className="HistoryCompInfo">
 			<h2>{year}</h2>
 			<h4>Overall Competition Results</h4>
 			<ul>
 				{competitions.map((comp, index) => {
 					return (
-						<>
+						<React.Fragment key={comp + index}>
 							<li key={index + "location"}>{comp.location}</li>
 							<li key={index + "place"}>{comp.placement} place</li>
-						</>
+						</React.Fragment>
 					);
 				})}
-				{/* <li>{competitions[0].location}</li>
-				<li>{competitions[0].placement} place</li>
-				<li>{competitions[1].location}</li>
-				<li>{competitions[1].placement} place</li> */}
 			</ul>
-		</>
+		</div>
 	);
 }