aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/pages/profile.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/pages/profile.js')
-rw-r--r--frontend/src/components/pages/profile.js382
1 files changed, 0 insertions, 382 deletions
diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js
deleted file mode 100644
index 7c45320..0000000
--- a/frontend/src/components/pages/profile.js
+++ /dev/null
@@ -1,382 +0,0 @@
1import React from 'react';
2import { useLocation } from "react-router-dom";
3
4import img4 from "../../imgs/4.png"
5import img5 from "../../imgs/5.png"
6import img12 from "../../imgs/12.png"
7import img13 from "../../imgs/13.png"
8import img14 from "../../imgs/14.png"
9import img15 from "../../imgs/15.png"
10import img16 from "../../imgs/16.png"
11import img17 from "../../imgs/17.png"
12import img18 from "../../imgs/18.png"
13import img19 from "../../imgs/19.png"
14import "./profile.css";
15
16export default function Profile(props) {
17const {token} = props
18
19
20const location = useLocation()
21
22
23const [profileData, setProfileData] = React.useState(null)
24React.useEffect(()=>{
25 setProfileData(null)
26 setChapterData(null)
27 setMaps(null)
28 setPageNumber(1)
29
30 if(location.pathname==="/profile"){
31 fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`,{
32 headers: {
33 'Authorization': token
34 }})
35 .then(r=>r.json())
36 .then(d=>{
37 setProfileData(d.data)
38 setPageMax(Math.ceil(d.data.records.length/20))
39 })
40 }else{
41 fetch(`https://lp.ardapektezol.com/api/v1/${location.pathname}`)
42 .then(r=>r.json())
43 .then(d=>{
44 setProfileData(d.data)
45 setPageMax(Math.ceil(d.data.records.length/20))
46 })
47 }
48},[location.pathname])
49
50
51
52const [game,setGame] = React.useState(0)
53const [gameData,setGameData] = React.useState(null)
54const [chapter,setChapter] = React.useState("0")
55const [chapterData,setChapterData] = React.useState(null)
56const [maps,setMaps] = React.useState(null)
57
58React.useEffect(()=>{
59 fetch("https://lp.ardapektezol.com/api/v1/games")
60 .then(r=>r.json())
61 .then(d=>{
62 setGameData(d.data)
63 setGame(0)
64 })
65
66},[location])
67
68React.useEffect(()=>{
69 if(game!==null && game!= 0){
70 fetch(`https://lp.ardapektezol.com/api/v1/games/${game}`)
71 .then(r=>r.json())
72 .then(d=>{
73 setChapterData(d.data)
74 setChapter("0")
75 document.querySelector('#select-chapter').value=0
76 })
77
78 } else if (game!==null && game==0 && profileData!== null){
79 setPageMax(Math.ceil(profileData.records.length/20))
80 setPageNumber(1)
81 }
82
83},[game,location])
84
85React.useEffect(()=>{
86 if(chapter!==null){
87 if(chapter==0){
88 setMaps(null)
89 fetch(`https://lp.ardapektezol.com/api/v1/games/${game}/maps`)
90 .then(r=>r.json())
91 .then(d=>{
92 setMaps(d.data.maps);
93 setPageMax(Math.ceil(d.data.maps.length/20))
94 setPageNumber(1)
95 })
96 }else{
97 setMaps(null)
98 fetch(`https://lp.ardapektezol.com/api/v1/chapters/${chapter}`)
99 .then(r=>r.json())
100 .then(d=>{
101 setMaps(d.data.maps);
102 setPageMax(Math.ceil(d.data.maps.length/20))
103 setPageNumber(1)
104 })
105
106 }
107 }
108},[chapter,chapterData])
109
110
111
112const [pageNumber, setPageNumber] = React.useState(1);
113const [pageMax, setPageMax] = React.useState(0);
114const [navState, setNavState] = React.useState(0); // eslint-disable-next-line
115React.useEffect(() => {NavClick();}, [[],navState]);
116function NavClick() {
117 if(profileData!==null){
118 const btn = document.querySelectorAll("#section2 button");
119 btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"});
120 btn[navState].style.backgroundColor = "#202232";
121
122 document.querySelectorAll("section").forEach((e,i)=>i>=2?e.style.display="none":"")
123 if(navState === 0){document.querySelectorAll(".profile1").forEach((e) => {e.style.display = "block"});}
124 if(navState === 1){document.querySelectorAll(".profile2").forEach((e) => {e.style.display = "block"});}
125}
126}
127function UpdateProfile(){
128 fetch(`https://lp.ardapektezol.com/api/v1/profile`,{
129 method: 'POST',
130 headers: {Authorization: token}
131 }).then(r=>r.json())
132 .then(d=>d.success?window.alert("profile updated"):window.alert(`Error: ${d.message}`))
133}
134
135function TimeAgo(date) {
136 const seconds = Math.floor((new Date() - date) / 1000);
137
138 let interval = Math.floor(seconds / 31536000);
139 if (interval > 1) {return interval + ' years ago';}
140
141 interval = Math.floor(seconds / 2592000);
142 if (interval > 1) {return interval + ' months ago';}
143
144 interval = Math.floor(seconds / 86400);
145 if (interval > 1) {return interval + ' days ago';}
146
147 interval = Math.floor(seconds / 3600);
148 if (interval > 1) {return interval + ' hours ago';}
149
150 interval = Math.floor(seconds / 60);
151 if (interval > 1) {return interval + ' minutes ago';}
152
153 if(seconds < 10) return 'just now';
154
155 return Math.floor(seconds) + ' seconds ago';
156 };
157
158function TicksToTime(ticks) {
159
160 let seconds = Math.floor(ticks/60)
161 let minutes = Math.floor(seconds/60)
162 let hours = Math.floor(minutes/60)
163
164 let milliseconds = Math.floor((ticks%60)*1000/60)
165 seconds = seconds % 60;
166 minutes = minutes % 60;
167
168 return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`;
169}
170
171
172if(profileData!==null){
173return (
174 <main>
175 <section id='section1' className='profile'>
176
177 {profileData.profile?(
178 <div id='profile-image' onClick={()=>UpdateProfile()}>
179 <img src={profileData.avatar_link} alt=""></img>
180 <span>Refresh</span>
181 </div>
182 ):(
183 <div>
184 <img src={profileData.avatar_link} alt=""></img>
185 </div>
186 )}
187
188 <div id='profile-top'>
189 <div>
190 <div>{profileData.user_name}</div>
191 <div>
192 {profileData.country_code==="XX"?"":<img src={`https://flagcdn.com/w80/${profileData.country_code.toLowerCase()}.jpg`} alt={profileData.country_code} />}
193 </div>
194 <div>
195 {profileData.titles.map(e=>(
196 <span className="titles" style={{backgroundColor:`#${e.color}`}}>
197 {e.name}
198 </span>
199 ))}
200 </div>
201 </div>
202 <div>
203 {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img17} alt="Steam" /></a>}
204 {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img15} alt="Twitch" /></a>}
205 {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img16} alt="Youtube" /></a>}
206 {profileData.links.p2sr==="-"?"":<a href={profileData.links.p2sr}><img src={img4} alt="P2SR" style={{padding:"0"}} /></a>}
207 </div>
208
209 </div>
210 <div id='profile-bottom'>
211 <div>
212 <span>Overall</span>
213 <span>{profileData.rankings.overall.rank===0?"N/A ":"#"+profileData.rankings.overall.rank+" "}
214 <span>({profileData.rankings.overall.completion_count}/{profileData.rankings.overall.completion_total})</span>
215 </span>
216 </div>
217 <div>
218 <span>Singleplayer</span>
219 <span>{profileData.rankings.singleplayer.rank===0?"N/A ":"#"+profileData.rankings.singleplayer.rank+" "}
220 <span>({profileData.rankings.singleplayer.completion_count}/{profileData.rankings.singleplayer.completion_total})</span>
221 </span>
222 </div>
223 <div>
224 <span>Cooperative</span>
225 <span>{profileData.rankings.cooperative.rank===0?"N/A ":"#"+profileData.rankings.cooperative.rank+" "}
226 <span>({profileData.rankings.cooperative.completion_count}/{profileData.rankings.cooperative.completion_total})</span>
227 </span>
228 </div>
229 </div>
230 </section>
231
232
233 <section id='section2' className='profile'>
234 <button onClick={()=>setNavState(0)}><img src={img5} alt="" />&nbsp;Player Records</button>
235 <button onClick={()=>setNavState(1)}><img src={img14} alt="" />&nbsp;Statistics</button>
236 </section>
237
238
239
240
241
242 <section id='section3' className='profile1'>
243 <div id='profileboard-nav'>
244 {gameData===null?<select>error</select>:
245
246 <select id='select-game'
247 onChange={()=>setGame(document.querySelector('#select-game').value)}>
248 <option value={0} key={0}>All Scores</option>
249 {gameData.map((e,i)=>(
250 <option value={e.id} key={i+1}>{e.name}</option>
251 ))}</select>
252 }
253
254 {game==0?
255 <select disabled>
256 <option>All Scores</option>
257 </select>
258 :chapterData===null?<select></select>:
259
260 <select id='select-chapter'
261 onChange={()=>setChapter(document.querySelector('#select-chapter').value)}>
262 <option value="0" key="0">All</option>
263 {chapterData.chapters.filter(e=>e.is_disabled===false).map((e,i)=>(
264 <option value={e.id} key={i+1}>{e.name}</option>
265 ))}</select>
266 }
267 </div>
268 <div id='profileboard-top'>
269 <span><span>Map Name</span><img src={img19} alt="" /></span>
270 <span style={{justifyContent:'center'}}><span>Portals</span><img src={img19} alt="" /></span>
271 <span style={{justifyContent:'center'}}><span>WRΔ </span><img src={img19} alt="" /></span>
272 <span style={{justifyContent:'center'}}><span>Time</span><img src={img19} alt="" /></span>
273 <span> </span>
274 <span><span>Rank</span><img src={img19} alt="" /></span>
275 <span><span>Date</span><img src={img19} alt="" /></span>
276 <div id='page-number'>
277 <div>
278 <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
279 ><i className='triangle' style={{position:'relative',left:'-5px',}}></i> </button>
280 <span>{pageNumber}/{pageMax}</span>
281 <button onClick={() => pageNumber === pageMax? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
282 ><i className='triangle' style={{position:'relative',left:'5px',transform:'rotate(180deg)'}}></i> </button>
283 </div>
284 </div>
285 </div>
286 <hr/>
287 <div id='profileboard-records'>
288
289 {game == 0 && profileData !== null
290 ? (
291
292 profileData.records.sort((a,b)=>a.map_id - b.map_id)
293 .map((r, index) => (
294
295 Math.ceil((index+1)/20)===pageNumber ? (
296 <button className="profileboard-record" key={index}>
297 {r.scores.map((e,i)=>(<>
298 {i!==0?<hr style={{gridColumn:"1 / span 8"}}/>:""}
299
300 <span>{r.map_name}</span>
301
302 <span style={{ display: "grid" }}>{e.score_count}</span>
303
304 <span style={{ display: "grid" }}>{e.score_count-r.map_wr_count}</span>
305 <span style={{ display: "grid" }}>{TicksToTime(e.score_time)}</span>
306 <span> </span>
307 {i===0?<span>#{r.placement}</span>:<span> </span>}
308 <span>{e.date.split("T")[0]}</span>
309 <span style={{ flexDirection: "row-reverse" }}>
310
311 <button onClick={()=>{window.alert(`Demo ID: ${e.demo_id}`)}}><img src={img13} alt="demo_id" /></button>
312 <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={img12} alt="download" /></button>
313 {i===0&&r.scores.length>1?<button onClick={()=>
314 {
315 document.querySelectorAll(".profileboard-record")[index%20].style.height==="44px"||
316 document.querySelectorAll(".profileboard-record")[index%20].style.height===""?
317 document.querySelectorAll(".profileboard-record")[index%20].style.height=`${r.scores.length*46}px`:
318 document.querySelectorAll(".profileboard-record")[index%20].style.height="44px"
319 }
320 }><img src={img18} alt="history" /></button>:""}
321
322 </span>
323 </>))}
324
325 </button>
326 ) : ""
327 ))) : maps !== null ?
328
329 maps.filter(e=>e.is_disabled===false).sort((a,b)=>a.id - b.id)
330 .map((r, index) => {
331 if(Math.ceil((index+1)/20)===pageNumber){
332 let record = profileData.records.find((e) => e.map_id === r.id);
333 return record === undefined ? (
334 <button className="profileboard-record" key={index} style={{backgroundColor:"#1b1b20"}}>
335 <span>{r.name}</span>
336 <span style={{ display: "grid" }}>N/A</span>
337 <span style={{ display: "grid" }}>N/A</span>
338 <span>N/A</span>
339 <span> </span>
340 <span>N/A</span>
341 <span>N/A</span>
342 <span style={{ flexDirection: "row-reverse" }}></span>
343 </button>
344 ) : (
345 <button className="profileboard-record" key={index}>
346 {record.scores.map((e,i)=>(<>
347 {i!==0?<hr style={{gridColumn:"1 / span 8"}}/>:""}
348 <span>{r.name}</span>
349 <span style={{ display: "grid" }}>{record.scores[i].score_count}</span>
350 <span style={{ display: "grid" }}>{record.scores[i].score_count-record.map_wr_count}</span>
351 <span style={{ display: "grid" }}>{TicksToTime(record.scores[i].score_time)}</span>
352 <span> </span>
353 {i===0?<span>#{record.placement}</span>:<span> </span>}
354 <span>{record.scores[i].date.split("T")[0]}</span>
355 <span style={{ flexDirection: "row-reverse" }}>
356
357 <button onClick={()=>{window.alert(`Demo ID: ${e.demo_id}`)}}><img src={img13} alt="demo_id" /></button>
358 <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${e.demo_id}`}><img src={img12} alt="download" /></button>
359 {i===0&&record.scores.length>1?<button onClick={()=>
360 {
361 document.querySelectorAll(".profileboard-record")[index%20].style.height==="44px"||
362 document.querySelectorAll(".profileboard-record")[index%20].style.height===""?
363 document.querySelectorAll(".profileboard-record")[index%20].style.height=`${record.scores.length*46}px`:
364 document.querySelectorAll(".profileboard-record")[index%20].style.height="44px"
365 }
366 }><img src={img18} alt="history" /></button>:""}
367
368 </span>
369 </>))}
370 </button>
371
372 )
373 }else{return null}
374 }):(<>{console.warn(maps)}</>)}
375 </div>
376 </section>
377
378 </main>
379)}
380}
381
382
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:19:52 +0000