aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/sidebar.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/sidebar.js')
-rw-r--r--frontend/src/components/sidebar.js203
1 files changed, 0 insertions, 203 deletions
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
deleted file mode 100644
index 1ca17e6..0000000
--- a/frontend/src/components/sidebar.js
+++ /dev/null
@@ -1,203 +0,0 @@
1import React, { useEffect } from 'react';
2import { Link, useLocation } from "react-router-dom";
3
4import "../App.css"
5import "./sidebar.css";
6import logo from "../imgs/logo.png"
7import img1 from "../imgs/1.png"
8import img2 from "../imgs/2.png"
9import img3 from "../imgs/3.png"
10import img4 from "../imgs/4.png"
11import img5 from "../imgs/5.png"
12import img6 from "../imgs/6.png"
13import img7 from "../imgs/7.png"
14import img8 from "../imgs/8.png"
15import img9 from "../imgs/9.png"
16import Login from "./login.js"
17
18export default function Sidebar(prop) {
19const {token,setToken} = prop
20const [profile, setProfile] = React.useState(null);
21
22React.useEffect(() => {
23 fetch(`https://lp.ardapektezol.com/api/v1/profile`,{
24 headers: {
25 'Content-Type': 'application/json',
26 Authorization: token
27 }})
28 .then(r => r.json())
29 .then(d => setProfile(d.data))
30 }, [token]);
31
32// Locks search button for 300ms before it can be clicked again, prevents spam
33const [isLocked, setIsLocked] = React.useState(false);
34function HandleLock(arg) {
35if (!isLocked) {
36 setIsLocked(true);
37 setTimeout(() => setIsLocked(false), 300);
38 SidebarHide(arg)
39 }
40}
41
42
43// The menu button
44const [sidebar, setSidebar] = React.useState();
45
46// Clicked buttons
47function SidebarClick(x){
48const btn = document.querySelectorAll("button.sidebar-button");
49
50if(sidebar===1){setSidebar(0);SidebarHide()}
51
52// clusterfuck
53btn.forEach((e,i) =>{
54 btn[i].classList.remove("sidebar-button-selected")
55 btn[i].classList.add("sidebar-button-deselected")
56})
57btn[x].classList.add("sidebar-button-selected")
58btn[x].classList.remove("sidebar-button-deselected")
59
60}
61
62function SidebarHide(){
63const btn = document.querySelectorAll("button.sidebar-button")
64const span = document.querySelectorAll("button.sidebar-button>span");
65const side = document.querySelector("#sidebar-list");
66const login = document.querySelectorAll(".login>button")[1];
67const searchbar = document.querySelector("#searchbar");
68
69if(sidebar===1){
70 setSidebar(0)
71 side.style.width="320px"
72 btn.forEach((e, i) =>{
73 e.style.width="310px"
74 e.style.padding = "0.4em 0 0 11px"
75 setTimeout(() => {
76 span[i].style.opacity="1"
77 login.style.opacity="1"
78
79 }, 100)
80 })
81 side.style.zIndex="2"
82} else {
83 side.style.width="40px";
84 searchbar.focus();
85 setSearch(searchbar.value)
86 setSidebar(1)
87 btn.forEach((e,i) =>{
88 e.style.width="40px"
89 e.style.padding = "0.4em 0 0 5px"
90 span[i].style.opacity="0"
91 })
92 login.style.opacity="0"
93 setTimeout(() => {
94 side.style.zIndex="0"
95 }, 300);
96 }
97}
98// Links
99const location = useLocation()
100React.useEffect(()=>{
101 if(location.pathname==="/"){SidebarClick(1)}
102 if(location.pathname.includes("news")){SidebarClick(2)}
103 if(location.pathname.includes("games")){SidebarClick(3)}
104 if(location.pathname.includes("leaderboards")){SidebarClick(4)}
105 if(location.pathname.includes("scorelog")){SidebarClick(5)}
106 if(location.pathname.includes("profile")){SidebarClick(6)}
107 if(location.pathname.includes("rules")){SidebarClick(8)}
108 if(location.pathname.includes("about")){SidebarClick(9)}
109
110 // eslint-disable-next-line react-hooks/exhaustive-deps
111}, [location.pathname])
112
113const [search,setSearch] = React.useState(null)
114const [searchData,setSearchData] = React.useState(null)
115
116React.useEffect(()=>{
117 fetch(`https://lp.ardapektezol.com/api/v1/search?q=${search}`)
118 .then(r=>r.json())
119 .then(d=>setSearchData(d.data))
120
121}, [search])
122
123
124return (
125 <div id='sidebar'>
126 <div id='logo'> {/* logo */}
127 <img src={logo} alt="" height={"80px"}/>
128 <div id='logo-text'>
129 <span><b>PORTAL 2</b></span><br/>
130 <span>Least Portals</span>
131 </div>
132 </div>
133 <div id='sidebar-list'> {/* List */}
134 <div id='sidebar-toplist'> {/* Top */}
135
136 <button className='sidebar-button' onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
137
138 <span></span>
139
140 <Link to="/" tabIndex={-1}>
141 <button className='sidebar-button'><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
142 </Link>
143
144 <Link to="/news" tabIndex={-1}>
145 <button className='sidebar-button'><img src={img3} alt="" /><span>News</span></button>
146 </Link>
147
148 <Link to="/games" tabIndex={-1}>
149 <button className='sidebar-button'><img src={img4} alt="" /><span>Games</span></button>
150 </Link>
151
152 <Link to="/leaderboards" tabIndex={-1}>
153 <button className='sidebar-button'><img src={img5} alt="" /><span>Leaderboards</span></button>
154 </Link>
155
156 <Link to="/scorelog" tabIndex={-1}>
157 <button className='sidebar-button'><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
158 </Link>
159 </div>
160 <div id='sidebar-bottomlist'>
161 <span></span>
162
163 <Login setToken={setToken} profile={profile} setProfile={setProfile}/>
164
165 <Link to="/rules" tabIndex={-1}>
166 <button className='sidebar-button'><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
167 </Link>
168
169 <Link to="/about" tabIndex={-1}>
170 <button className='sidebar-button'><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
171 </Link>
172 </div>
173 </div>
174 <div>
175 <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={()=>setSearch(document.querySelector("#searchbar").value)}/>
176
177 <div id='search-data'>
178
179 {searchData!==null?searchData.maps.map((q,index)=>(
180 <Link to={`/maps/${q.id}`} className='search-map' key={index}>
181 <span>{q.game}</span>
182 <span>{q.chapter}</span>
183 <span>{q.map}</span>
184 </Link>
185 )):""}
186 {searchData!==null?searchData.players.map((q,index)=>
187 (
188 <Link to={
189 profile!==null&&q.steam_id===profile.steam_id?`/profile`:
190 `/users/${q.steam_id}`
191 } className='search-player' key={index}>
192 <img src={q.avatar_link} alt='pfp'></img>
193 <span style={{fontSize:`${36 - q.user_name.length * 0.8}px`}}>{q.user_name}</span>
194 </Link>
195 )):""}
196
197 </div>
198 </div>
199 </div>
200 )
201}
202
203
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 23:19:44 +0000