added graph and fixed some css

Former-commit-id: b0370b8679f2a7b20c2f277c3814401fbc78d54d

2 files changed, 208 insertions, 69 deletions

diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css
index e97dc0f..a0f2f5d 100644
--- a/frontend/src/components/pages/summary.css
+++ b/frontend/src/components/pages/summary.css
@@ -1,4 +1,3 @@
-
 #background-image{
     z-index: -1;
     position: absolute;
@@ -19,14 +18,10 @@
     background: linear-gradient(to top, #161723, #0000);
 }
 
-/* Section 1: map name + difficulty*/
+/* Section 1: map name*/
 
 #section1{
     margin: 20px 0 0 0;
-    width: 100%; 
-
-    display:grid;
-    grid-template-columns: auto 470px;
     cursor: default;
 }
 
@@ -34,7 +29,7 @@
     height: 40px;
     background-color: #2b2e46;
 
-    color: #cdcfdf;;
+    color: inherit;
     font-size: 18px;
     font-family: inherit;
     border: none;
@@ -45,16 +40,12 @@
 .nav-button>span{padding: 0 8px 0 8px;}
 .nav-button:hover{background-color: #202232;cursor: pointer;}
 
-
-
 /* Section 2: navbar */
-
 #section2{
     margin: 40px 0 0 0;
-    width: 100%;
 
-    display: grid;
-    grid-template-columns: auto auto auto;
+    display: grid; gap: 2px;
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 #section2>.nav-button{
@@ -63,24 +54,20 @@
     display: flex;
     justify-content: center;
     place-items: center;
-    
 }
 #section2>.nav-button>img{scale: 1.2;}
 #section2>.nav-button:nth-child(1){border-radius: 30px 0 0 30px;}
-#section2>.nav-button:nth-child(2){margin-left:2px;}
-#section2>.nav-button:nth-child(3){border-radius: 0 30px 30px 0;margin-left: 2px;}
+#section2>.nav-button:nth-child(3){border-radius: 0 30px 30px 0;}
 
 
 /* Section 3: category + history */
 
 #section3{
     margin: 40px 0 0 0;
-    height: auto;
 
-    display: grid;
-    grid-template-columns: 50% 50%;
+    display: grid; 
+    grid-template-columns: 1fr 1fr;
     gap: 20px;
-
 }
 
 #category{
@@ -92,7 +79,6 @@
 }
 #category>p{
     margin-bottom: 20px;
-    display: inline;
     text-align: center;
     font-size: 50px;
     cursor: default;
@@ -104,7 +90,6 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 #category-image{
     transform: translate(-20%, -15%);
     z-index: -1;
-    border-radius: 20px; 
     overflow: hidden;
     width: 125%;
     margin: 22px;
@@ -116,49 +101,44 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     background-color: #202232;
 
     display: grid;
-    grid-template-columns: auto auto auto auto;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 2px;
 }
 #category>span>button{
-    font-family: BarlowSemiCondensed-Regular;
+    font-family: inherit;
     font-size: 18px;
     border: none;
     height: 40px;
-    color: #cdcfdf;
-    background-color: #2b2e46;
+    color: inherit;
     
     cursor: pointer;
     transition: background-color .1s;
 }
-#category>span>button:hover{background-color: #202232;}
 
 
 
-#history>div>hr{border: 1px solid #2b2e46;margin: 4px 20px 4px 20px;}
+#history>div>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;}
 #history{
-    height: 350px;
     min-width: 560px;
     background-color: #202232;
     border-radius: 30px;
 
 }
 
-#history>div{height: 290px;}
-#records{overflow-y: auto; height: 255px;}
+#records{overflow-y: auto; height: 256px;}
+#records::-webkit-scrollbar{display: none;}
+
 .record-top, .record{
     font-size: 18px;
-
     display: grid;
     text-align: center;
-    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
+    grid-template-columns: 1fr 1fr 1fr;
 }
-.record-top{font-weight: bold;margin: 20px 20px 0 20px;}
+.record-top{font-weight: bold;margin: 20px 20px 0 20px;cursor: default;}
 .record{
-    margin: 10px 20px 0 20px;
+    margin: 10px 20px 10px 20px;
     height: 44px; width: calc(100% - 40px);
-    
-    
-    background-color: #2b2e46;
+        
     color: inherit;
     border-radius: 40px;
     place-items: center;
@@ -167,47 +147,110 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
     cursor: pointer;
     transition: background-color .1s;
 }
-.record:hover{background-color: #161723;}
-
 #history>span{
+    border-top: #202232 solid 2px;
     display: grid;
-    grid-template-columns: 50% 50%;
+    grid-template-columns: 1fr 1fr;
 }
 #history>span>button{
-    
     width: 100%; height: 40px;
-    font-family: BarlowSemiCondensed-Regular;
+    font-family: inherit;
     font-size: 18px;
     border: none;
-    
-    color: #cdcfdf;
-    background-color: #2b2e46;
+    color: inherit;
     
     cursor: pointer;
     transition: background-color .1s;
 }
-#history>span>button:hover{background-color: #202232 !important;}
 #history>span>button:nth-child(1){border-radius: 0 0 0 30px;}
 #history>span>button:nth-child(2){border-radius: 0 0 30px 0;}
 
+#graph{
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    grid-template-rows: 1fr 20px;
+    height: 293px;
+
+    margin: 10px 10px 5px 10px;
+    overflow: hidden;
+}
+#graph>div:nth-child(1){ /* numbers */
+    width: 20px; 
+    display: grid;
+    place-items: center;
+    /* background-color: blue; */
+}
+#graph>div:nth-child(1)>span{
+    font-size: 12px;
+    line-height: 0;
+}
+
+#graph>div:nth-child(2){ /* big graph */
+    position: relative;
+    display: grid;
+}
+#graph>div:nth-child(2)>tr{
+    display: flex;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
+}
+#graph>div:nth-child(2)>tr>td.graph_hor{
+    width: 100%; 
+    height: 0;
+    padding: 0; 
+    
+    outline: 1px solid red;
+}
+#graph>div:nth-child(2)>tr>td.graph_ver{
+    width: 0; 
+    height: 100%;
+    padding: 0;
+    
+    outline: 1px solid blue;
+    transform: translateY(50%);
+    z-index: 0;
+    overflow: hidden;
+}
+
+#graph>div:nth-child(3){ /* dates */
+    padding-right: 20px;
+    z-index: 1;
+    height: 16px;
+    background-color: #202232;
+    grid-column: 1 /3;
+    font-size: 12px;
+    display: grid;
+    padding-top: 8px;
+    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
+}
+
+.graph-button{
+    position: absolute;
+    padding: 0;
+    border: 5px solid white;
+    border-radius: 20px;
+    cursor: pointer;
+    transform: translateX(-50%);
+}
+
+#history>div>h5{text-align: center;height: 197px;}
+
+
 /* Section 4: Difficulty + count */
 
 #section4{
     display: grid;
-    grid-template-columns: 50% 50%;
-    margin: 40px 0 20px 0;
-    width: 100%;
-    gap: 8px;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin: 40px 0 0 0;
 }
 
 #difficulty,
 #count  {
     background-color: #202232;
-    width: 100%; height: 100px;
     min-width: 250px;    
-    margin: 10px;
-
     text-align: center;
+    cursor: default;
 
     border-radius: 20px;
     display: grid;
@@ -221,12 +264,10 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
 }
 #difficulty>span:nth-child(2){
     font-size: 40px;
-    color:lime
 }
 #difficulty>div{
-    width: 250px;
     display: grid;
-    grid-template-columns: auto auto auto auto auto;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     padding: 0 calc(50% - 125px) 0 calc(50% - 125px);
     place-items: center;
 }
@@ -296,9 +337,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
         justify-content: center;
         align-items: center;
     }
-/* }
 
-@media screen and (max-width: 1280px) { */
     #section1{
         grid-template-columns: auto;
         place-items: center;
@@ -311,12 +350,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
         width: 450px;
         margin: 40px auto 0 auto;
     }
-    #section2>.nav-button{
-        margin: 1px 0 1px 0 !important;
-    }
     #section2>.nav-button:nth-child(1){border-radius: 30px 30px 0 0;}
     #section2>.nav-button:nth-child(2){border-radius: 0;}
     #section2>.nav-button:nth-child(3){border-radius: 0 0 30px 30px;}
-
-
 }
\ No newline at end of file
diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index 2665d66..276389f 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -66,6 +66,7 @@ function HisClick() {
     const btn = document.querySelectorAll("#section3 #history span button");
     btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
     btn[hisState].style.backgroundColor = "#202232";
+    
 }}
 
 const [selectedRun,setSelectedRun] = React.useState(0)
@@ -84,6 +85,96 @@ function selectRun(x,y){
     }
 }
 
+function graph(state) {
+    // this is such a mess
+    let graph = data.summary.routes.filter(e=>e.category.id===catState)
+    let graph_score = []
+    data.summary.routes.filter(e=>e.category.id===catState).forEach(e=>graph_score.push(e.history.score_count))
+    let graph_dates = []
+    data.summary.routes.filter(e=>e.category.id===catState).forEach(e=>graph_dates.push(e.history.date.split("T")[0]))
+    let graph_max = graph[graph.length-1].history.score_count
+    let graph_numbers = []
+    for (let i=graph_max;i>=0;i--){
+        graph_numbers[i]=i
+    }
+
+    switch (state) {
+        case 1: //numbers
+            return graph_numbers
+            .reverse().map(e=>(
+                graph_score.includes(e) || e===0 ?
+                <span>{e}<br/></span>
+                :
+                <span><br/></span>
+                ))
+        case 2: // graph
+        let i = 1
+        let g = 0
+        let h = 0
+        return  graph_numbers.map((e,j)=>(
+            <tr id={'graph_row-'+(graph_max-j)}
+            data-graph={ graph_score.includes(graph_max-j) ? g++ : 0}
+            data-graph2={h=0}
+            
+            >
+                {
+                    graph_score.map((e,i)=>(                    
+                    <>
+                        <td className='graph_ver'
+                        data-graph={ h++ }
+                        style={{outline: 
+                             g==h-1 ? 
+                             "1px solid #2b2e46" : g>=h ? "1px dashed white" : "0" }}
+                        ></td>
+                        
+                        {g==h && graph_score.includes(graph_max-j) ? 
+                        <button className='graph-button'
+                        onClick={()=>{
+                            selectRun(graph_dates.length-(i-1),catState);
+                            }}
+                        style={{left: `calc(100% / ${graph_dates.length} * ${h-1})`}}
+                        ></button> 
+                        : ""}
+                        
+                        <td className='graph_hor' id={'graph_table-'+i++}
+                        style={{
+                            outline: 
+                            graph_score.includes(graph_max-j) ? 
+                            g>=h ? 
+                            g-1>=h ? "1px dashed #2b2e46" : "1px solid white" : "0"  
+                            : "0"}}
+                        ></td>
+
+                        
+
+                        <td className='graph_hor' id={'graph_table-'+i++}
+                        style={{outline: 
+                            graph_score.includes(graph_max-j) ?
+                            g>=h ? 
+                            g-1>=h ? "1px dashed #2b2e46" : "1px solid white" : "0"  
+                            : "0"}}
+                        ></td>
+
+                    </>
+                    ))
+                    
+                }
+                
+            </tr>
+        )) 
+
+        case 3: // dates
+                return graph_dates
+                .reverse().map(e=>(
+                    <span>{e}</span>
+                    ))
+            default:
+                break;
+
+    }
+       
+}
+
 const [vid,setVid] = React.useState("")
 React.useEffect(()=>{
     if(data!==null){
@@ -140,7 +231,10 @@ return (
             </div>
             
             <div id='history'>
-                <div>
+
+                <div style={{display: hisState ? "none" : "block"}}>
+                {data.summary.routes.filter(e=>e.category.id===catState).length===0 ? <h5>There are no records for this map.</h5> : 
+                    <>
                     <div className='record-top'>
                         <span>Date</span>
                         <span>Record</span>
@@ -163,17 +257,28 @@ return (
                             <span>{r.history.runner_name}</span>
                         </button>
                     ))}
-
                     </div>
-                </div>
+                    </>
+                    }
+                    </div>
+
+                    <div style={{display: hisState ? "block" : "none"}}>
+                        {data.summary.routes.filter(e=>e.category.id===catState).length===0 ? <h5>There are no records for this map.</h5> : 
+                        <div id='graph'>
+                            <div>{graph(1)}</div>
+                            <div>{graph(2)}</div>
+                            <div>{graph(3)}</div>
+                        </div>
+                            }
+                    </div> 
                     <span>
                         <button onClick={()=>setHisState(0)}>List</button>
                         <button onClick={()=>setHisState(1)}>Graph</button>
                     </span>
-            </div>
+                </div>
+                
                 
         </section>
-
         <section id='section4'>
         <div id='difficulty'>
                 <span>Difficulty</span>