added final match details per issue #13, added values to hover titles…

… per #14, made k/d/a whole numbers for matches, looks really good! probably 99% done now, maybe some minor tweaks here and there. if there's a large enough demand, maybe team gold over time, but I think it's in a really good spot rn
peggalex · Jun 27, 2021 · 3f7d48b · 3f7d48b
1 parent 756dfe5
commit 3f7d48b
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 170 deletions.
diff --git a/react_app/src/App.css b/react_app/src/App.css
@@ -115,7 +115,7 @@ footer {
 .circle {
   width: var(--radius);
   height: var(--radius);
-  border-radius: calc(var(--radius)/2);
+  border-radius: calc(100%);
 }
 
 .fullLength {

diff --git a/react_app/src/App.tsx b/react_app/src/App.tsx
@@ -48,7 +48,7 @@ function App() {
 		const disclaimerCookie = 'shownDisclaimer';
 		if (!document.cookie.split('; ').find(row => row.startsWith(disclaimerCookie))) {
 			alert(disclaimer);
-			document.cookie = `${disclaimerCookie}=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; Secure`;
+			document.cookie = `${disclaimerCookie}=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Lax; Secure`;
 		}
 	}, [])
 

diff --git a/react_app/src/Icons.tsx b/react_app/src/Icons.tsx
@@ -51,8 +51,10 @@ const Icons = {
     </svg>,
     FirstBlood: <svg width={25} height={30} viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M21.3359 8.78941L12.4922 0L3.66407 8.78941C1.91509 10.5265 0.723769 12.7401 0.240789 15.1502C-0.24219 17.5603 0.00487314 20.0586 0.950727 22.3291C1.89658 24.5996 3.49873 26.5403 5.55452 27.9058C7.61031 29.2712 10.0274 30 12.5 30C14.9726 30 17.3897 29.2712 19.4455 27.9058C21.5013 26.5403 23.1034 24.5996 24.0493 22.3291C24.9951 20.0586 25.2422 17.5603 24.7592 15.1502C24.2762 12.7401 23.0849 10.5265 21.3359 8.78941ZM19.3068 15.9191C19.5188 16.1228 19.8288 16.2246 20.2369 16.2246H20.9364V15.3238H20.1733V13.0131H21V12.1123H20.1733V11H19.116V11.6736C19.116 11.8146 19.0869 11.9243 19.0286 12.0026C18.9703 12.0757 18.8617 12.1123 18.7027 12.1123H18.4086V13.0131H18.9968V15.0261C18.9968 15.4178 19.1001 15.7154 19.3068 15.9191ZM16.1513 16.2246C15.7486 16.2246 15.4094 16.162 15.1338 16.0366C14.8582 15.9061 14.6118 15.7233 14.3945 15.4883L15.0861 14.799C15.2345 14.9609 15.3988 15.0888 15.579 15.1828C15.7592 15.2768 15.9632 15.3238 16.1911 15.3238C16.4242 15.3238 16.5859 15.2899 16.676 15.222C16.7661 15.1489 16.8111 15.0523 16.8111 14.9322C16.8111 14.739 16.6707 14.6241 16.3898 14.5875L15.9367 14.5327C14.9987 14.4178 14.5297 13.9948 14.5297 13.2638C14.5297 13.0653 14.5668 12.8852 14.641 12.7233C14.7205 12.5562 14.8291 12.4152 14.9669 12.3003C15.11 12.1802 15.2795 12.0888 15.4756 12.0262C15.677 11.9583 15.9022 11.9243 16.1513 11.9243C16.3686 11.9243 16.5594 11.94 16.7237 11.9713C16.8932 11.9974 17.0416 12.0392 17.1688 12.0967C17.3013 12.1489 17.4205 12.2168 17.5265 12.3003C17.6378 12.3786 17.7465 12.4674 17.8524 12.5666L17.1768 13.2481C17.0443 13.1176 16.8932 13.0157 16.7237 12.9426C16.5594 12.8643 16.3898 12.8251 16.2149 12.8251C16.0135 12.8251 15.8704 12.8565 15.7856 12.9191C15.7009 12.9818 15.6585 13.0653 15.6585 13.1698C15.6585 13.2794 15.6876 13.3656 15.7459 13.4283C15.8095 13.4857 15.9261 13.5275 16.0957 13.5536L16.5647 13.6162C17.4815 13.7364 17.9399 14.1489 17.9399 14.8539C17.9399 15.0523 17.8975 15.2351 17.8127 15.4022C17.7279 15.5693 17.606 15.7155 17.447 15.8408C17.2934 15.9609 17.1052 16.0549 16.8826 16.1228C16.6654 16.1907 16.4216 16.2246 16.1513 16.2246ZM7.93801 23.0001V21.1045H10.9269V13.7728H10.7838L8.52625 16.6867L7 15.5118L9.65505 12.0652H13.3117V21.1045H15.6647V23.0001H7.93801Z" fill="currentColor" />
-    </svg>              
-
+    </svg>,
+    Ban: <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="feather feather-x"><line x1={6} y1={6} x2={18} y2={18} /></svg>,
+    Clock: <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="feather feather-clock"><circle cx={12} cy={12} r={10} /><polyline points="12 6 12 12 16 14" /></svg>,
+
 }
 
 export default Icons;
diff --git a/react_app/src/Matches.css b/react_app/src/Matches.css
@@ -1,6 +1,7 @@
 .match {
     background-color: var(--grey100);
-    height: 3rem;
+    height: 8rem;
+    position: relative;
 }
 
 .teamsContainer {
@@ -47,6 +48,7 @@
     padding: 0 0.75rem;
     font-size: 0.8rem;
     margin-right: 0.5rem;
+    z-index: 1;
 }
 
 .matchHistory:hover {
@@ -65,17 +67,20 @@
     margin-right: -0.5rem;
 }
 
+h2.matchMonth {
+    margin: 0;
+    color: var(--grey800);
+}
+
 .matchTime, .matchYear {
     margin-top: 0;
     margin-bottom: 0;
-    padding-top: 0.6rem;
     margin-left: 0.25rem;
     font-size: 0.8rem;
 }
 
 .matchTime {
     color: var(--grey700);
-    margin-left: 0.4rem;
 }
 
 .matchYear {
@@ -91,9 +96,8 @@
 }
 
 .teamPlayerChampionIcon {
-    --radius: 2rem;
-    margin-left: 0.5rem;
-    margin-right: 0;
+    --radius: 2.3rem;
+    position: absolute;
 }
 
 .matchHistory:hover:before {
@@ -104,7 +108,10 @@
 .items {
     margin-left: auto;
     height: 1.25rem;
-    margin-right: 0.5rem;
+}
+
+.items, .medalsContainer{
+    margin-right: .5rem;
 }
 
 .item + .item {
@@ -148,6 +155,7 @@
     height: 1.25rem;
     margin-left: -0.85rem;
     margin-top: 1.5rem;
+    z-index: 1;
 }
 
 .teamPlayer .totalKda {
@@ -221,4 +229,154 @@ p.matchIndex:after {
 
 .medalContainer > p:before {
     content: "x";
+}
+
+.teamPlayerChampionIconContainer {
+    --radius: 2rem;
+    margin-left: .5rem;
+    margin-right: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.teamMiddle.blueSide, .teamMiddle.redSide .medalsContainer {
+    flex-direction: row-reverse;
+}
+
+.teamMiddle.redSide .medalContainer:before{
+    margin-left: 0;
+}
+
+.teamMiddle.redSide .medalContainer:after{
+    margin-right: 0;
+}
+
+.matchMiddle {
+    position: absolute;
+    width: 100%;
+}
+
+.teamMiddle {
+    width: 15rem;
+    justify-content: flex-end;
+}
+
+.teamMiddle .medalContainer {
+    margin-top: 0;
+}
+
+.teamMiddle .medals {
+    margin: 0 0.5rem;
+}
+
+.teamMiddle .medalsContainer {
+    margin-right: 0;
+}
+
+h2.teamScore.lose {
+    font-weight: 200;
+}
+
+.teamMiddle + .teamMiddle:after {
+    content: "•";
+    position: absolute;
+    width: 0.5rem;
+    left: calc(50% - 0.25rem);
+}
+
+.redSide.teamMiddle .teamScore {
+    text-align: end;
+}
+
+h2.teamScore {
+    font-size: 2rem;
+    color: var(--grey900);
+    margin: 0;
+}
+
+.gameLength {
+    position: absolute;
+    top: -0.75rem;
+    color: var(--grey600);
+    font-size: 0.6rem;
+    font-weight: 200;
+}
+
+.gameLength > p {
+    margin: 0;
+    margin-left: 0.25rem;
+}
+
+.clockContainer > svg {
+    width: 0.6rem;
+    height: 0.6rem;
+    color: var(--grey500)
+}
+
+h2.teamScore {
+    font-size: 2rem;
+    color: var(--grey900);
+    margin: 0 0.6rem;
+}
+
+.generalChampIconTeams {
+    margin: 0 0.5rem;
+}
+
+.generalChampIcons {
+    position: absolute;
+    top: 3rem;
+}
+
+.generalChampIcon {
+    border: solid 2px;
+}
+
+.banIconContainer, .generalChampIcon {
+    --radius: 1.2rem;
+}
+
+.generalChampIcon + .generalChampIcon, .banContainer + .banContainer{
+    margin-left: 0.4rem;
+}
+
+.redSide.generalChampIconTeams .generalChampIcon {
+    border-color: var(--red);
+}
+
+.redSide.generalChampIconTeams .banIconContainer > svg {
+    color: var(--red);
+}
+
+.blueSide.generalChampIconTeams .generalChampIcon {
+    border-color: var(--blue400);
+}
+
+.blueSide.generalChampIconTeams .banIconContainer {
+    color: var(--blue400);
+}
+
+.banContainer {
+    position: relative;
+}
+
+.banIconContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.banIconContainer > svg {
+    width: 100%;
+    transform: scale(1.2);
+    height: 100%;
+}
+
+.teamsContainer .totalKda {
+    width: 4rem;
+}
+
+.kdaContainer.whole .kda > * {
+    width: 1rem;
+    text-align: center;
 }
diff --git a/react_app/src/Matches.tsx b/react_app/src/Matches.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, Redirect, useParams, useHistory } from 'react-router-dom';
-import { EnumArray, GetChampIconUrl, RestfulType, CallAPI, GetItemIconUrl, GetSpellIconUrl, GetKeystoneIconUrl } from './Utilities';
+import { EnumArray, GetChampIconUrl, RestfulType, CallAPI, GetItemIconUrl, GetSpellIconUrl, GetKeystoneIconUrl, secsToHMS, GetProfileIconUrl } from './Utilities';
 import "./Matches.css";
 import Icons from './Icons';
 import Players, { AdditionalStats, KDAStat } from './Players';
@@ -111,6 +111,7 @@ function Match(
     {match: {
         matchId, 
         date, 
+        length,
         redSideWon, 
         redSide,
         blueSide
@@ -124,7 +125,7 @@ function Match(
     let month = new Intl.DateTimeFormat('en-US', { month: 'long'}).format(dateObj);
     let day = dateObj.getDate();
     let daySuffix = getDaySuffix(day);
-    const [isExpanded, setIsExpanded] = React.useState(true);
+    const [isExpanded, setIsExpanded] = React.useState(false);
 
     let region = "JP1";
     let matchLink = `https://matchhistory.na.leagueoflegends.com/en/#match-details/${region}/${matchId}/00000?tab=overview`;
@@ -138,9 +139,45 @@ function Match(
                 {isExpanded ? Icons.ChevronUp :  Icons.ChevronDown}
             </div>
             <p className="matchIndex">{index}</p>
-            <h2 className="matchMonth">{month} {day}{daySuffix}</h2>
-            <p className="matchTime">{time}</p>
-            <p className="matchYear">{dateObj.getFullYear()}</p>
+            <div className='col'>
+                <h2 className="matchMonth">{month} {day}{daySuffix}</h2>
+                <div className='row'>
+                    <p className="matchTime">{time}</p>
+                    <p className="matchYear">{dateObj.getFullYear()}</p>
+                </div>
+            </div>
+
+            <div className="matchMiddle row center">
+                {[redSide, blueSide].map((t, i) => <div className={`${t.isRedSide ? 'redSide' : 'blueSide'} teamMiddle row centerCross`} key={i}>
+                    <div className={`${t.isRedSide ? 'redSide' : 'blueSide'} medals`}>
+                        <Medals turrets={t.towers} inhibs={t.inhibs} dragons={t.dragons} barons={t.barons}/>
+                    </div>
+                    <h2 className={`teamScore ${t.isRedSide == redSideWon ? 'win' : 'lose'}`}>
+                        {t.kills}
+                    </h2>
+                </div>)}
+                <div className="gameLength row centerCross">
+                    <div className="clockContainer centerAll">{Icons.Clock}</div>
+                    <p>{secsToHMS(length)}</p>
+                </div>
+                <div className="generalChampIcons row">{[redSide, blueSide].map((t, i) => <div className={`${t.isRedSide ? 'redSide' : 'blueSide'} generalChampIconTeams row`} key={i}>
+                    {isExpanded ? 
+                        Array.from(Array(5)).map((_, j) => {
+                            let champ: string = (t as any)[`ban${j}`];
+                            return <div className="banContainer">
+                                <img 
+                                    className="generalChampIcon circle" 
+                                    src={champ === "" ? GetProfileIconUrl(29) : GetChampIconUrl(champ)} 
+                                    key={j}
+                                />
+                                <div className="banIconContainer">{Icons.Ban}</div>
+                            </div>
+                        }) :
+                        t.players.map((p, j) => <img className="generalChampIcon circle" src={GetChampIconUrl(p.champion)} key={j}/>)
+                    }
+                </div>)}</div>
+            </div>
+
             <a className="matchHistory centerAll" href={matchLink} target="_blank">{Icons.Link}</a>
         </div>
         {isExpanded ? <div className="teamsContainer row">
@@ -173,16 +210,18 @@ function TeamPlayer({player: p}: {player: ITeamPlayer}): JSX.Element {
     return <div className="teamPlayer col">
         <div className="row centerCross">
             <Spells spell1={p.spell1} spell2={p.spell2}/>
-            <img className="teamPlayerChampionIcon circle" src={GetChampIconUrl(p.champion)}/>
+            <div className="teamPlayerChampionIconContainer circle centerAll">
+                <img className="teamPlayerChampionIcon circle" src={GetChampIconUrl(p.champion)}/>
+            </div>
             <img className="keyStone" src={GetKeystoneIconUrl(p.keyStoneUrl)}/>
             <p onClick={()=>history.push(`/players/${p.accountId}`)} className="clickable blueTextHover">{p.summonerName}</p>
             <div className="teamPlayerRHS col">
                 <Items items={Array.from(Array(6)).map((_, i) => (p as any)[`item${i}`])}/>
-                <Medals doubles={p.doubles} triples={p.triples} quadras={p.quadras} pentas={p.pentas} firstBlood={p.firstBlood} turrets={p.turrets} inhibs={p.inhibs}/>
+                <Medals doubles={p.doubles} triples={p.triples} quadras={p.quadras} pentas={p.pentas} firstBloods={p.firstBlood?1:0} turrets={p.turrets} inhibs={p.inhibs}/>
             </div>
         </div>
         <div className="row centerCross">
-            <KDAStat k={p.kills} d={p.deaths} a={p.assists} isMini={true}/>
+            <KDAStat k={p.kills} d={p.deaths} a={p.assists} isMini={true} isWhole={true}/>
             <AdditionalStats kp={p.kp} dmgDealt={p.dmgDealt} dmgTaken={p.dmgTaken} gold={p.gold} isPerMin={false}/>
         </div>
     </div>
@@ -360,7 +399,7 @@ function Matches(): JSX.Element {
         <div id="playerTopBar" className="row centerCross">
             <div className="sortContainer col centerAll">
                 <button 
-                    className="playerSort clickable" 
+                    className="playerSort clickable whiteWhenHovered" 
                     onClick={() => dispatch({type: "togglePlayerFilter"})}
                 >
                     {state.playerFilter.val === undefined ? "any player" : state.playerFilter.val!.summonerName}
@@ -387,7 +426,7 @@ function Matches(): JSX.Element {
             </div>
             <div className="sortContainer col centerAll">
                 {state.playerFilter.val === undefined ? null : <button 
-                    className="playerSort clickable" 
+                    className="playerSort clickable whiteWhenHovered" 
                     onClick={() => dispatch({type: "toggleChampionFilter"})}
                 >
                     {state.championFilter.val || "any champion"}