summary

9 files changed, 951 insertions, 30 deletions

diff --git a/frontend/src/components/login.css b/frontend/src/components/login.css
index 633145e..b46be10 100644
--- a/frontend/src/components/login.css
+++ b/frontend/src/components/login.css
@@ -1,6 +1,6 @@
 span>img {
     scale: 1.1;
-    padding-top: 4px;
+    padding: 4px 0 0 8px;
 }
 .login>button>span{
     max-width: 22ch;
diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js
index 7bff5f0..204007f 100644
--- a/frontend/src/components/login.js
+++ b/frontend/src/components/login.js
@@ -7,8 +7,8 @@ import img2 from "../imgs/10.png"
 import img3 from "../imgs/11.png"
 
 
-export default function Login() {
-
+export default function Login(prop) {
+const {token,setToken} = prop
 function login() {
     window.location.href="https://lp.ardapektezol.com/api/v1/login"
 }
@@ -19,7 +19,6 @@ function logout() {
     fetch(`/api/v1/token`,{'method':'DELETE'})
     .then(r=>window.location.href="/")
 }
-const [token, setToken] = React.useState(null);
 const [isLoggedIn, setIsLoggedIn] = React.useState(false);
 React.useEffect(() => {
     fetch(`/api/v1/token`)
@@ -46,19 +45,19 @@ return (
     <>
     {isLoggedIn ? (
     <Link to="/profile" tabIndex={-1} className='login'>
-        <button>
+        <button className='sidebar-button'>
             <img src={profile.avatar_link} alt="" />
             <span>{profile.user_name}</span>
         </button>
-        <button onClick={logout}><img src={img3} alt="" /><span></span></button>
+        <button className='sidebar-button' onClick={logout}><img src={img3} alt="" /><span></span></button>
     </Link>
     ) : (
-    <Link tabIndex={-1} className='login'>
-        <button onClick={login}>
+    <Link tabIndex={-1} className='login' >
+        <button className='sidebar-button' onClick={login}>
             <img src={img2} alt="" />
             <span><img src={img1} alt="Sign in through Steam" /></span>
         </button>
-        <button disabled><span></span></button>
+        <button className='sidebar-button' disabled><span></span></button>
     </Link>
     )}
      </>   
diff --git a/frontend/src/components/main.css b/frontend/src/components/main.css
index 990bc41..48e6379 100644
--- a/frontend/src/components/main.css
+++ b/frontend/src/components/main.css
@@ -1,11 +1,17 @@
+
 main {
     overflow: auto;
+    overflow-x: hidden;
     position: relative;
-    width: calc(100% - 350px);
+
+    width: calc(100% - 380px); 
     height: 100vh;
     left: 350px;
-    /* background-color: red; */
+
+    padding-right: 30px;
+
     font-size: 40px;
     font-family: BarlowSemiCondensed-Regular;
-    color: white;
+    color: #cdcfdf;
+
 }
diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css
new file mode 100644
index 0000000..e97dc0f
--- /dev/null
+++ b/frontend/src/components/pages/summary.css
@@ -0,0 +1,322 @@
+
+#background-image{
+    z-index: -1;
+    position: absolute;
+    opacity: 10%;
+    height: 50%;
+    width: 100%
+}
+#background-image>img{
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+#background-image::before{
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, #161723, #0000);
+}
+
+/* Section 1: map name + difficulty*/
+
+#section1{
+    margin: 20px 0 0 0;
+    width: 100%; 
+
+    display:grid;
+    grid-template-columns: auto 470px;
+    cursor: default;
+}
+
+.nav-button{
+    height: 40px;
+    background-color: #2b2e46;
+
+    color: #cdcfdf;;
+    font-size: 18px;
+    font-family: inherit;
+    border: none;
+    transition: background-color .1s;
+}
+#section1>div>.nav-button:nth-child(1){border-radius: 20px 0 0 20px;}
+#section1>div>.nav-button:nth-child(2){border-radius: 0 20px 20px 0;margin-left: 2px;}
+.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;
+}
+
+#section2>.nav-button{
+    height: 50px;
+    font-size: 22px;
+    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;}
+
+
+/* Section 3: category + history */
+
+#section3{
+    margin: 40px 0 0 0;
+    height: auto;
+
+    display: grid;
+    grid-template-columns: 50% 50%;
+    gap: 20px;
+
+}
+
+#category{
+    display: grid;
+    height: 350px;
+    border-radius: 30px;
+    overflow: hidden;
+    
+}
+#category>p{
+    margin-bottom: 20px;
+    display: inline;
+    text-align: center;
+    font-size: 50px;
+    cursor: default;
+    color: white;
+}
+
+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;
+    filter: blur(4px) contrast(80%) brightness(80%);
+}
+
+#category>span{
+    margin-top: 70px;
+    background-color: #202232;
+
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 2px;
+}
+#category>span>button{
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+    border: none;
+    height: 40px;
+    color: #cdcfdf;
+    background-color: #2b2e46;
+    
+    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{
+    height: 350px;
+    min-width: 560px;
+    background-color: #202232;
+    border-radius: 30px;
+
+}
+
+#history>div{height: 290px;}
+#records{overflow-y: auto; height: 255px;}
+.record-top, .record{
+    font-size: 18px;
+
+    display: grid;
+    text-align: center;
+    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
+}
+.record-top{font-weight: bold;margin: 20px 20px 0 20px;}
+.record{
+    margin: 10px 20px 0 20px;
+    height: 44px; width: calc(100% - 40px);
+    
+    
+    background-color: #2b2e46;
+    color: inherit;
+    border-radius: 40px;
+    place-items: center;
+    
+    border: 0;
+    cursor: pointer;
+    transition: background-color .1s;
+}
+.record:hover{background-color: #161723;}
+
+#history>span{
+    display: grid;
+    grid-template-columns: 50% 50%;
+}
+#history>span>button{
+    
+    width: 100%; height: 40px;
+    font-family: BarlowSemiCondensed-Regular;
+    font-size: 18px;
+    border: none;
+    
+    color: #cdcfdf;
+    background-color: #2b2e46;
+    
+    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;}
+
+/* Section 4: Difficulty + count */
+
+#section4{
+    display: grid;
+    grid-template-columns: 50% 50%;
+    margin: 40px 0 20px 0;
+    width: 100%;
+    gap: 8px;
+}
+
+#difficulty,
+#count  {
+    background-color: #202232;
+    width: 100%; height: 100px;
+    min-width: 250px;    
+    margin: 10px;
+
+    text-align: center;
+
+    border-radius: 20px;
+    display: grid;
+    grid-template-rows: 20px 40px 40px;
+}
+#difficulty>span:nth-child(1),
+#count>span:nth-child(1){
+    padding-top:10px;
+    font-size: 18px;
+    color:#cdcfdf
+}
+#difficulty>span:nth-child(2){
+    font-size: 40px;
+    color:lime
+}
+#difficulty>div{
+    width: 250px;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    padding: 0 calc(50% - 125px) 0 calc(50% - 125px);
+    place-items: center;
+}
+
+.difficulty-rating{
+    border-radius: 20px;
+    width: 40px; height: 3px;
+    background-color: #2b2e46;
+}
+
+#count>div{
+    padding-top:10px;
+    font-size: 50px;
+    color:white
+}
+
+/* Section 5: route desc + video */
+#section5{
+    margin: 40px 0 20px 0;
+    width: 100%;
+}
+
+#description{
+    width: 100%;    height: auto;
+    min-height: 342px;
+}
+
+
+
+
+#description>iframe{
+    margin: 4px;
+    float:right; 
+    border: 0;
+    border-radius: 20px;
+    width: 608px;    height: 342px;
+}
+
+#description>h3{margin: 0 0 10px 0; color: white;}
+#description-text{
+    display: block;
+    font-size: 21px;
+    word-wrap: break-word;
+}
+#description-text>b{font-size: inherit;}
+#description-text>a{font-size: inherit;color: #3c91e6;}
+
+.triangle{
+    display: inline-block;
+        width: 8px;     height: 0;
+        border-top: 7px solid transparent;
+        border-right: 8px solid #cdcfdf;
+        border-bottom: 7px solid transparent;
+}
+
+ /* such responsive, very mobile */
+@media screen and (max-width: 1480px) {
+    #section3{grid-template-columns: auto;}
+    #category{min-width: 608px;}
+    #history{min-width: 608px;}
+    #description{min-width: 608px;}
+    #section4{min-width: 588px;}
+    
+    #description>iframe{
+        padding: 0 0 0 calc(50% - 304px);
+        float:none;
+        justify-content: center;
+        align-items: center;
+    }
+/* }
+
+@media screen and (max-width: 1280px) { */
+    #section1{
+        grid-template-columns: auto;
+        place-items: center;
+        text-align: center;
+        
+    }
+
+    #section2{
+        grid-template-columns: auto;
+        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
new file mode 100644
index 0000000..c628dd4
--- /dev/null
+++ b/frontend/src/components/pages/summary.js
@@ -0,0 +1,225 @@
+import React from 'react';
+import { useLocation }  from "react-router-dom";
+import ReactMarkdown from 'react-markdown'
+
+import "./summary.css";
+
+import img4 from "../../imgs/4.png"
+import img5 from "../../imgs/5.png"
+import img6 from "../../imgs/6.png"
+import Modview from "./summary_modview.js"
+
+export default function Summary(prop) {
+const {token,mod} = prop
+const fakedata={} //for debug   
+
+    const location = useLocation()
+
+    //fetching data
+    const [data, setData] = React.useState(null);
+    React.useEffect(() => {
+        fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`)
+        .then(r => r.json())
+        .then(d => {
+            if(Object.keys(fakedata).length!==0){setData(fakedata)} 
+            else{setData(d.data)}
+            if(d.data.summary.routes.length===0){d.data.summary.routes[0]={"category": "","history": {"score_count": 0,},"rating": 0,"description": "","showcase": ""}} 
+        })
+        // eslint-disable-next-line
+    }, []);
+
+
+
+
+
+const [navState, setNavState] = React.useState(0); // eslint-disable-next-line
+React.useEffect(() => {NavClick();}, [[],navState]);
+
+function NavClick() {
+    if(data!==null){
+    const btn = document.querySelectorAll("#section2 button.nav-button");
+    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
+    btn[navState].style.backgroundColor = "#202232";
+}}
+
+
+const [catState, setCatState] = React.useState(1); // eslint-disable-next-line
+React.useEffect(() => {CatClick();}, [[],catState]);
+
+function CatClick() {
+    if(data!==null){
+    const btn = document.querySelectorAll("#section3 #category span button");
+    btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
+    btn[catState-1].style.backgroundColor = "#202232";
+}}
+React.useEffect(()=>{
+    if(data!==null && data.summary.routes.filter(e=>e.category.id===catState).length!==0){
+        selectRun(0,catState)} // eslint-disable-next-line
+},[catState,data])
+
+
+const [hisState, setHisState] = React.useState(0); // eslint-disable-next-line
+React.useEffect(() => {HisClick();}, [[],hisState]);
+
+function HisClick() {
+    if(data!==null){
+    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)
+
+function selectRun(x,y){
+    let r = document.querySelectorAll("button.record")
+    r.forEach(e=>e.style.backgroundColor="#2b2e46")
+    r[x].style.backgroundColor="#161723"
+
+
+    if(data!==null && data.summary.routes.length!==0 && data.summary.routes.length!==0){
+    if(y===2){x+=data.summary.routes.filter(e=>e.category.id<2).length}
+    if(y===3){x+=data.summary.routes.filter(e=>e.category.id<3).length}
+    if(y===4){x+=data.summary.routes.filter(e=>e.category.id<4).length}
+    setSelectedRun(x)
+    }
+}
+
+const [vid,setVid] = React.useState("")
+React.useEffect(()=>{
+    if(data!==null){
+        let showcase = data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase
+        showcase.length>6 ? setVid("https://www.youtube.com/embed/"+YouTubeGetID(showcase))
+        : setVid("")
+    } // eslint-disable-next-line 
+},[[],selectedRun])
+
+function YouTubeGetID(url){
+    url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+    return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_]/i)[0] : url[0];
+ }
+
+if(data!==null){
+return (
+    <>
+        {token!==null?mod===true?<Modview selectedRun={selectedRun} data={data} token={token}/>:"":""}
+
+        <div id='background-image'>
+            <img src={data.map.image} alt="" />
+        </div>
+    <main>
+        <section id='section1'>
+            <div>
+                <button className='nav-button'><i className='triangle'></i><span>{data.map.game_name}</span></button>
+                <button className='nav-button'><i className='triangle'></i><span>{data.map.chapter_name}</span></button>
+                <br/><span><b>{data.map.map_name}</b></span>
+            </div>
+
+
+        </section>
+
+        <section id='section2'>
+                <button className='nav-button' onClick={()=>setNavState(0)}><img src={img4} alt="" /><span>Summary</span></button>
+                <button className='nav-button' onClick={()=>setNavState(1)}><img src={img5} alt="" /><span>Leaderboards</span></button>
+                <button className='nav-button' onClick={()=>setNavState(2)}><img src={img6} alt="" /><span>Discussions</span></button>
+        </section>
+
+        <section id='section3'>
+            <div id='category'
+            style={data.map.image===""?{backgroundColor:"#202232"}:{}}>
+                <img src={data.map.image} alt="" id='category-image'></img>
+                <p><span className='portal-count'>{data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count}</span>
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count === 1 ? ` portal` : ` portals` }</p>
+                <span>
+                    <button onClick={()=>setCatState(1)}>CM</button>
+                    <button onClick={()=>setCatState(2)}>NoSLA</button>
+                    {data.map.is_coop?<button onClick={()=>setCatState(3)}>SLA</button>
+                    :<button onClick={()=>setCatState(3)}>Inbounds SLA</button>}
+                    <button onClick={()=>setCatState(4)}>Any%</button>
+                </span>
+
+            </div>
+            
+            <div id='history'>
+                <div>
+                    <div className='record-top'>
+                        <span>Date</span>
+                        <span>Record</span>
+                        <span>First completion</span>
+                    </div>
+                    <hr/>
+                    <div id='records'>
+
+                    {data.summary.routes
+                    .sort((a, b) => a.history.score_count - b.history.score_count)
+                    .filter(e=>e.category.id===catState)
+                    .map((r, index) => (
+                        <button className='record' key={index} onClick={()=>{
+                            selectRun(index,r.category.id);
+                            }}>
+                            <span>{ new Date(r.history.date).toLocaleDateString(
+                                "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
+                            )}</span>
+                            <span>{r.history.score_count}</span>
+                            <span>{r.history.runner_name}</span>
+                        </button>
+                    ))}
+
+                    </div>
+                </div>
+                    <span>
+                        <button onClick={()=>setHisState(0)}>List</button>
+                        <button onClick={()=>setHisState(1)}>Graph</button>
+                    </span>
+            </div>
+                
+        </section>
+
+        <section id='section4'>
+        <div id='difficulty'>
+                <span>Difficulty</span>
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (<span style={{color:"lime"}}>Very easy</span>):null}
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (<span style={{color:"green"}}>Easy</span>):null}
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (<span style={{color:"yellow"}}>Medium</span>):null}
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (<span style={{color:"orange"}}>Hard</span>):null}
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (<span style={{color:"red"}}>Very hard</span>):null}
+                <div>
+                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (<div className='difficulty-rating' style={{backgroundColor:"lime"}}></div>) : (<div className='difficulty-rating'></div>)}
+                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{backgroundColor:"green"}}></div>) : (<div className='difficulty-rating'></div>)}
+                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{backgroundColor:"yellow"}}></div>) : (<div className='difficulty-rating'></div>)}
+                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{backgroundColor:"orange"}}></div>) : (<div className='difficulty-rating'></div>)}
+                    {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{backgroundColor:"red"}}></div>) : (<div className='difficulty-rating'></div>)}
+                </div>
+            </div>
+            <div id='count'>
+                <span>Completion count</span>
+                <div>6275</div>
+            </div>
+        </section>
+
+        <section id='section5'>
+            <div id='description'>
+                {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase!=="" ?
+                <iframe title='Showcase video' src={vid}> </iframe>
+                : ""}
+                <h3>Route description</h3>
+                <span id='description-text'>
+                    <ReactMarkdown>
+                        {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].description}
+                    </ReactMarkdown>
+                </span>
+            </div>
+            
+        </section>
+    </main>
+    </>
+    )
+}else{
+    return (
+        <main></main>
+    )
+}
+
+
+}
+
+
diff --git a/frontend/src/components/pages/summary_modview.css b/frontend/src/components/pages/summary_modview.css
new file mode 100644
index 0000000..c6d3d8d
--- /dev/null
+++ b/frontend/src/components/pages/summary_modview.css
@@ -0,0 +1,112 @@
+div#modview{
+    position: absolute;
+    left: 50%;
+    z-index: 20;
+    width: 320px; height: auto;
+    /* background-color: red; */
+
+    transform: translateY(-68%);
+}
+div#modview>div>button{
+    height: 30px;
+}
+
+div#modview>div:nth-child(1){
+    display: grid;
+    grid-template-columns: 50% 50%;
+}
+
+div#modview>div:nth-child(2){
+    display: grid;
+    place-items: center;
+}
+
+#modview-menu{
+    position: absolute;
+    left: calc(50% + 160px); top: 130px;
+    transform: translateX(-50%);
+    background-color: #2b2e46;
+    z-index: 2; color: white;
+}
+
+#modview-menu-image{
+    box-shadow: 0 0 40px 16px black;
+    outline: 8px solid #2b2e46;
+    border-radius: 20px;
+    font-size: 40px;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    /* place-items: center; */
+    
+}
+#modview-menu-image>div:nth-child(1){
+    height: 400px; width: 500px;
+    display: grid;
+    grid-template-rows: 30% 70%;
+}
+#modview-menu-image>div:nth-child(2){
+    height: 400px; width: 500px;
+    display: grid;
+    grid-template-rows: 20% 10%;
+}
+
+#modview-menu-image>div>button{width: 300px;margin-left:100px;}
+#modview-menu-image>div>img{width: 500px;}
+#modview-menu-image>div>button{font-size: 20px;}
+#modview-menu-image>div>span>input[type="file"]{font-size: 15px;}
+
+
+#modview-menu-add,
+#modview-menu-edit{
+    box-shadow: 0 0 40px 16px black;
+    outline: 8px solid #2b2e46;
+    border-radius: 20px;
+    font-size: 40px;
+    display: grid;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+}
+
+#modview-menu-add>div,
+#modview-menu-edit>div{
+    display: grid;
+    margin: 20px;
+    width: 200px;
+    font-size: 20px;
+}
+#modview-route-description>textarea{
+    resize: none;
+    height: 160px;
+    width: 1160px;
+}
+#modview-route-showcase>input::placeholder{opacity: .5;}
+#modview_block{
+    position: absolute;
+    background-color: black;
+    opacity: .3;
+    left: 320px;
+    width: calc(100% - 320px);
+    height: 100%;
+    z-index: 2;
+    cursor: no-drop;
+}
+#modview-md{
+    box-shadow: 0 0 40px 16px black;
+    background-color: #2b2e46;
+    outline: 8px solid #2b2e46;
+
+    border-radius: 20px;
+    position: absolute;
+    padding: 10px; top: 400px;
+    width: 1180px; height: 300px;
+    overflow-y: auto;
+    word-wrap: break-word;
+}
+#modview-md>span>a{
+    padding-left: 20px;
+    color:aqua;
+}
+#modview-md>p{
+    font-family: BarlowSemiCondensed-Regular;
+    color: #cdcfdf;
+    font-size: 21px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/pages/summary_modview.js b/frontend/src/components/pages/summary_modview.js
new file mode 100644
index 0000000..3541c48
--- /dev/null
+++ b/frontend/src/components/pages/summary_modview.js
@@ -0,0 +1,254 @@
+import React from 'react';
+import { useLocation }  from "react-router-dom";
+import ReactMarkdown from 'react-markdown'
+
+import "./summary_modview.css";
+
+
+export default function Modview(prop) {
+const {selectedRun,data,token} = prop
+
+const [menu,setMenu] = React.useState(0)
+React.useEffect(()=>{
+if(menu===3){ // add
+    document.querySelector("#modview-route-name>input").value=""
+    document.querySelector("#modview-route-score>input").value=""
+    document.querySelector("#modview-route-date>input").value=""
+    document.querySelector("#modview-route-showcase>input").value=""
+    document.querySelector("#modview-route-description>textarea").value=""
+    }
+if(menu===2){ // edit
+    document.querySelector("#modview-route-id>input").value=data.summary.routes[selectedRun].route_id
+    document.querySelector("#modview-route-name>input").value=data.summary.routes[selectedRun].history.runner_name
+    document.querySelector("#modview-route-score>input").value=data.summary.routes[selectedRun].history.score_count
+    document.querySelector("#modview-route-date>input").value=data.summary.routes[selectedRun].history.date.split("T")[0]
+    document.querySelector("#modview-route-showcase>input").value=data.summary.routes[selectedRun].showcase
+    document.querySelector("#modview-route-description>textarea").value=data.summary.routes[selectedRun].description
+}   // eslint-disable-next-line 
+},[menu])
+
+function compressImage(file) {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    return new Promise(resolve => {
+      reader.onload = () => {
+        const img = new Image();
+        img.src = reader.result;
+        img.onload = () => {
+          let {width, height} = img;
+          if (width > 550) {
+            height *= 550 / width;
+            width = 550;
+          }
+          if (height > 320) {
+            width *= 320 / height;
+            height = 320;
+          }
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          canvas.getContext('2d').drawImage(img, 0, 0, width, height);
+          resolve(canvas.toDataURL(file.type, 0.6));
+        };
+      };
+    });
+}
+const [image,setImage] = React.useState(null)
+function uploadImage(){
+    if(window.confirm("Are you sure you want to submit this to the database?")){
+    fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/image`,{
+        method: 'PUT',
+        headers: {Authorization: token},
+        body: JSON.stringify({"image": image})
+    }).then(r=>window.location.reload())
+    }
+}
+const location = useLocation()
+function editRoute(){
+if(window.confirm("Are you sure you want to submit this to the database?")){
+    let payload = {
+        "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
+        "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
+        "route_id": parseInt(document.querySelector("#modview-route-id>input").value),
+        "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
+        "showcase": document.querySelector("#modview-route-showcase>input").value,
+        "user_name": document.querySelector("#modview-route-name>input").value
+      }
+      fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
+        method: 'PUT',
+        headers: {Authorization: token},
+        body: JSON.stringify(payload)
+      }).then(r=>window.location.reload())
+    }
+}
+
+
+function addRoute(){
+    if(window.confirm("Are you sure you want to submit this to the database?")){
+    let payload = {
+        "category_id": parseInt(document.querySelector("#modview-route-category>select").value),
+        "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value,
+        "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z",
+        "score_count": parseInt(document.querySelector("#modview-route-score>input").value),
+        "showcase": document.querySelector("#modview-route-showcase>input").value,
+        "user_name": document.querySelector("#modview-route-name>input").value
+      }
+      fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
+        method: 'POST',
+        headers: {Authorization: token},
+        body: JSON.stringify(payload)
+        }).then(r=>window.location.reload())
+    }
+}
+
+function deleteRoute(){
+if(data.summary.routes[0].category==='')
+{window.alert("no run selected")}else{
+if(window.confirm(`Are you sure you want to delete this run from the database?
+${data.summary.routes[selectedRun].category.name}    ${data.summary.routes[selectedRun].history.score_count} portals    ${data.summary.routes[selectedRun].history.runner_name}`)===true){
+    console.log("deleted:",selectedRun)
+    fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{
+        method: 'DELETE',
+        headers: {Authorization: token},
+        body: JSON.stringify({"route_id":data.summary.routes[selectedRun].route_id})
+      }).then(r=>window.location.reload())
+}}
+
+}
+
+const [showButton, setShowButton] = React.useState(1)
+const modview = document.querySelector("div#modview")
+React.useEffect(()=>{
+    if(modview!==null){
+        showButton ? modview.style.transform="translateY(-68%)"
+        : modview.style.transform="translateY(0%)"
+    }
+    let modview_block = document.querySelector("#modview_block")
+    showButton===1?modview_block.style.display="none":modview_block.style.display="block"// eslint-disable-next-line 
+},[showButton])
+
+const [md,setMd] = React.useState("")
+
+return (
+    <>
+    <div id="modview_block"></div>
+        <div id='modview'>
+            <div>
+                <button onClick={()=>setMenu(1)}>edit image</button>
+                <button onClick={            
+                data.summary.routes[0].category===''?()=>window.alert("no run selected"):()=>setMenu(2)}>edit selected route</button>
+                <button onClick={()=>setMenu(3)}>add new route</button>
+                <button onClick={()=>deleteRoute()}>delete selected route</button>
+            </div>
+            <div>
+                 {showButton ?(
+                    <button onClick={()=>setShowButton(0)}>Show</button>
+                ) : (
+                    <button onClick={()=>{setShowButton(1);setMenu(0)}}>Hide</button>
+                )} 
+            </div>
+        </div>
+        {menu!==0? (
+        <div id='modview-menu'>
+        {menu===1? ( 
+            // image
+            <div id='modview-menu-image'>
+                <div>
+                    <span>current image:</span>
+                    <img src={data.map.image} alt="missing" />
+                </div>
+
+                <div>
+                    <span>new image:
+                    <input type="file" accept='image/*' onChange={e=>
+                            compressImage(e.target.files[0])
+                            .then(d=>setImage(d))
+                    }/></span>
+                    {image!==null?(<button onClick={()=>uploadImage()}>upload</button>):<span></span>}
+                    <img src={image} alt="" id='modview-menu-image-file'/>
+                    
+                </div>
+            </div>
+        ):menu===2?(
+            // edit route
+            <div id='modview-menu-edit'>
+                <div id='modview-route-id'>
+                    <span>route id:</span>
+                    <input type="number"  disabled/>
+                </div>
+                <div id='modview-route-name'>
+                    <span>runner name:</span>
+                    <input type="text"/>
+                </div>
+                <div id='modview-route-score'>
+                    <span>score:</span>
+                    <input type="number"/>
+                </div>
+                <div id='modview-route-date'>
+                    <span>date:</span>
+                    <input type="date"/>
+                </div>
+                <div id='modview-route-showcase'>
+                    <span>showcase video:</span>
+                    <input type="text"/>
+                </div>
+                <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
+                    <span>description:</span>
+                    <textarea onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
+                </div>
+                <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={editRoute}>Apply</button>
+            </div>
+        ):menu===3?(
+            // add route
+            <div id='modview-menu-add'>
+                <div id='modview-route-category'>
+                    <span>category:</span>
+                    <select>
+                        <option value="1" key="1">CM</option>
+                        <option value="2" key="2">No SLA</option>
+                        {data.map.game_name==="Portal 2 - Cooperative"?"":(
+                        <option value="3" key="3">Inbounds SLA</option>)}
+                        <option value="4" key="4">Any%</option>
+                    </select>
+                </div>
+                <div id='modview-route-name'>
+                    <span>runner name:</span>
+                    <input type="text" />
+                </div>
+                <div id='modview-route-score'>
+                    <span>score:</span>
+                    <input type="number" />
+                </div>
+                <div id='modview-route-date'>
+                    <span>date:</span>
+                    <input type="date" />
+                </div>
+                <div id='modview-route-showcase'>
+                    <span>showcase video:</span>
+                    <input type="text" />
+                </div>
+                <div id='modview-route-description' style={{height:"180px",gridColumn:"1 / span 5"}}>
+                    <span>description:</span>
+                    <textarea defaultValue={"No description available."} onChange={()=>setMd(document.querySelector("#modview-route-description>textarea").value)}></textarea>
+                </div>
+                <button style={{gridColumn:"2 / span 3",height:"40px"}} onClick={addRoute}>Apply</button>
+            </div>
+        ):("error")}
+
+            {menu!==1?(
+            <div id='modview-md'>
+                <span>Markdown preview</span> 
+                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span> 
+                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span> 
+                    <p>
+                    <ReactMarkdown>{md}
+                    </ReactMarkdown>
+                    </p>
+            </div>
+            ):""}
+        </div>):""}
+        
+    </>
+)
+}
+
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 84600fb..8011a6e 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -55,7 +55,7 @@ span>b{
     justify-items: left;

     grid-template-rows: calc(100vh - 670px) 50px 50px 50px;

 }

-button>span{

+.sidebar-button>span{

     font-family: BarlowSemiCondensed-Regular;

     font-size: 18px;

     color: #CDCFDF;

@@ -63,7 +63,7 @@ button>span{
     line-height: 28px;

     transition: opacity .1s;

 }

-button{

+.sidebar-button{

     display: grid;

     grid-template-columns: 50px auto;

     place-items: left;

@@ -100,7 +100,7 @@ button>img {
     width: 268px; height: calc(100vh - 120px);

     min-height: 550px;

 } 

-input[type=text]{

+input#searchbar[type=text]{

     margin: 10px 0 0 6px;

     padding: 1px 0px 1px 16px;

     width: 240px;

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index aaaf196..77800bd 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -15,7 +15,8 @@ import img8 from "../imgs/8.png"
 import img9 from "../imgs/9.png"

 import Login from "./login.js"

 

-export default function Sidebar() {

+export default function Sidebar(prop) {

+const {token,setToken} = prop

 

 // Locks search button for 300ms before it can be clicked again, prevents spam

 const [isLocked, setIsLocked] = React.useState(false);

@@ -30,7 +31,7 @@ if (!isLocked) {
 

 // Clicked buttons

 function SidebarClick(x){

-const btn = document.querySelectorAll("button");

+const btn = document.querySelectorAll("button.sidebar-button");

 

 if(sidebar===1){setSidebar(0);SidebarHide()}

 

@@ -46,8 +47,8 @@ btn[x].style.backgroundColor="#202232"
 const [sidebar, setSidebar] = React.useState();

 

 function SidebarHide(){

-const btn   = document.querySelectorAll("button");

-const span  = document.querySelectorAll("button>span");

+const btn   = document.querySelectorAll("button.sidebar-button")

+const span  = document.querySelectorAll("button.sidebar-button>span");

 const side  = document.querySelector("#sidebar-list");

 const login = document.querySelectorAll(".login>button")[1];

 

@@ -106,49 +107,51 @@ return (
         </div>

         <div id='sidebar-list'> {/* List */}

             <div id='sidebar-toplist'> {/* Top */} 

-                <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>

+

+                <button className='sidebar-button' onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>

+

                 <span></span>

                 

                 <Link to="/" tabIndex={-1}>

-                    <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>

+                    <button className='sidebar-button'><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>

                 </Link>

 

                 <Link to="/news" tabIndex={-1}>

-                    <button><img src={img3} alt="" /><span>News</span></button>

+                    <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>

                 </Link>

 

                 <Link to="/records" tabIndex={-1}>

-                    <button><img src={img4} alt="" /><span>Records</span></button>

+                    <button className='sidebar-button'><img src={img4} alt="" /><span>Records</span></button>

                 </Link>

 

                 <Link to="/leaderboards" tabIndex={-1}>

-                    <button><img src={img5} alt="" /><span>Leaderboards</span></button>

+                    <button className='sidebar-button'><img src={img5} alt="" /><span>Leaderboards</span></button>

                 </Link>

 

                 <Link to="/discussions" tabIndex={-1}>

-                    <button><img src={img6} alt="" /><span>Discussions</span></button>

+                    <button className='sidebar-button'><img src={img6} alt="" /><span>Discussions</span></button>

                 </Link>

 

                 <Link to="/scorelog" tabIndex={-1}>

-                    <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>

+                    <button className='sidebar-button'><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>

                 </Link>

             </div>

             <div id='sidebar-bottomlist'>

                 <span></span>

 

-                <Login/>

+                <Login token={token} setToken={setToken}/>

 

                 <Link to="/rules" tabIndex={-1}>

-                    <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>

+                    <button className='sidebar-button'><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>

                 </Link>

 

                 <Link to="/about" tabIndex={-1}>

-                    <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>

+                    <button className='sidebar-button'><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>

                 </Link>

             </div>

         </div>

         <div> 

-            <input type="text" placeholder='Search for map or a player...'/>

+            <input type="text" id='searchbar' placeholder='Search for map or a player...'/>

         </div>

     </div>

         )