aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
authorNidboj132 <lol2s@vp.plm>2023-04-29 13:00:05 +0200
committerNidboj132 <lol2s@vp.plm>2023-04-29 13:00:05 +0200
commitda7c988469ce2c3e17173f72416808ddb355d224 (patch)
treec39842b00587c003b567f76eda9a20a6069d3ab9 /frontend/src
parentdoc: added tags (diff)
downloadlphub-da7c988469ce2c3e17173f72416808ddb355d224.tar.gz
lphub-da7c988469ce2c3e17173f72416808ddb355d224.tar.bz2
lphub-da7c988469ce2c3e17173f72416808ddb355d224.zip
ui update
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/App.css15
-rw-r--r--frontend/src/App.js19
-rw-r--r--frontend/src/components/main.css11
-rw-r--r--frontend/src/components/main.js16
-rw-r--r--frontend/src/components/sidebar.css158
-rw-r--r--frontend/src/components/sidebar.js148
-rw-r--r--frontend/src/fonts/BarlowCondensed-Bold.ttfbin0 -> 104316 bytes
-rw-r--r--frontend/src/fonts/BarlowCondensed-Regular.ttfbin0 -> 97132 bytes
-rw-r--r--frontend/src/fonts/BarlowSemiCondensed-Regular.ttfbin0 -> 100096 bytes
-rw-r--r--frontend/src/fonts/D-DIN.otfbin59860 -> 0 bytes
-rw-r--r--frontend/src/imgs/0.pngbin41216 -> 0 bytes
-rw-r--r--frontend/src/imgs/1.pngbin3308 -> 2011 bytes
-rw-r--r--frontend/src/imgs/2.pngbin4093 -> 1833 bytes
-rw-r--r--frontend/src/imgs/3.pngbin9600 -> 1517 bytes
-rw-r--r--frontend/src/imgs/4.pngbin12164 -> 4517 bytes
-rw-r--r--frontend/src/imgs/5.pngbin19087 -> 4112 bytes
-rw-r--r--frontend/src/imgs/6.pngbin14501 -> 2715 bytes
-rw-r--r--frontend/src/imgs/7.pngbin12182 -> 1608 bytes
-rw-r--r--frontend/src/imgs/8.pngbin5605 -> 1584 bytes
-rw-r--r--frontend/src/imgs/9.pngbin0 -> 6037 bytes
-rw-r--r--frontend/src/imgs/logo.pngbin0 -> 67124 bytes
21 files changed, 261 insertions, 106 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 78dea16..c96f197 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,9 +1,20 @@
1body { 1body {
2 overflow: hidden;
2 background-color: #141520; 3 background-color: #141520;
3 margin: 0; 4 margin: 0;
4} 5}
5 6
6@font-face { 7@font-face {
7 font-family: 'D-DIN'; 8 font-family: 'BarlowCondensed-Bold';
8 src: local('D-DIN'), url(./fonts/D-DIN.otf) format('oft'); 9 src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
10}
11
12@font-face {
13 font-family: 'BarlowCondensed-Regular';
14 src: local('BarlowCondensed-Regular'), url(./fonts/BarlowCondensed-Regular.ttf) format('truetype');
15}
16
17@font-face {
18 font-family: 'BarlowSemiCondensed-Regular';
19 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-Regular.ttf) format('truetype');
9} \ No newline at end of file 20} \ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
index e853b02..26aec98 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,16 +1,31 @@
1import React from 'react'; 1import React from 'react';
2import { BrowserRouter, Routes, Route} from "react-router-dom";
2 3
3import Sidebar from "./components/sidebar.js" 4import Sidebar from "./components/sidebar.js"
5import Main from "./components/main.js"
4import "./App.css"; 6import "./App.css";
5import "./fonts/D-DIN.otf"
6 7
7 8
8 9
9export default function App() { 10export default function App() {
10 11
11 return ( 12 return (
12 <> 13 <>
14 <BrowserRouter>
13 <Sidebar/> 15 <Sidebar/>
16 <Routes>
17 <Route index element={<Main text="Homepage"/>}></Route>
18 <Route path="/news" element={<Main text="News"/>}></Route>
19 <Route path="/records" element={<Main text="Records"/>}></Route>
20 <Route path="/leaderboards" element={<Main text="Leaderboards"/>}></Route>
21 <Route path="/discussions" element={<Main text="Discussion"/>}></Route>
22 <Route path="/scorelog" element={<Main text="Score logs"/>}></Route>
23 <Route path="/profile" element={<Main text="Profile"/>}></Route>
24 <Route path="/rules" element={<Main text="Rules"/>}></Route>
25 <Route path="/about" element={<Main text="About"/>}></Route>
26 <Route path="*" element={<Main text="404"/>}></Route>
27 </Routes>
28 </BrowserRouter>
14 </> 29 </>
15 ) 30 )
16} \ No newline at end of file 31} \ No newline at end of file
diff --git a/frontend/src/components/main.css b/frontend/src/components/main.css
new file mode 100644
index 0000000..990bc41
--- /dev/null
+++ b/frontend/src/components/main.css
@@ -0,0 +1,11 @@
1main {
2 overflow: auto;
3 position: relative;
4 width: calc(100% - 350px);
5 height: 100vh;
6 left: 350px;
7 /* background-color: red; */
8 font-size: 40px;
9 font-family: BarlowSemiCondensed-Regular;
10 color: white;
11}
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
new file mode 100644
index 0000000..18b0f5a
--- /dev/null
+++ b/frontend/src/components/main.js
@@ -0,0 +1,16 @@
1import React from 'react';
2
3import "../App.css"
4import "./main.css";
5
6export default function Main(props) {
7
8
9return (
10 <main>
11 <h1>{props.text}</h1>
12 </main>
13 )
14}
15
16
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 9742f0e..23d46ad 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -1,73 +1,123 @@
1#sidebar { 1#sidebar {
2 overflow: hidden;
3 position: absolute;
2 background-color: #2b2e46; 4 background-color: #2b2e46;
3 width: 320px; height: 100vh; 5 width: 320px; height: 100vh;
4 min-height: 840px; 6 min-height: 670px;
7
5} 8}
6 9
7#sidebar>div:nth-child(1){height: 140px;} /* logo */ 10 /* logo */
11#logo{
12 display: grid;
13 grid-template-columns: 60px 200px;
8 14
9button#side-grid { 15
10 border: 0; 16 height: 80px;
11 background-color: #202232; 17 padding: 20px 0 20px 30px;
12 border-radius: 20px; 18}
13 font-size: 18px; 19
14 color: #cdcfdf; 20#logo-text{
15 width: 300px; 21 font-family: BarlowCondensed-Regular;
22 font-size: 42px;
23 color: #FFF;
24 line-height: 38px;
25}
26span>b{
27 font-family: BarlowCondensed-Bold;
28 font-size: 56px;
29}
30
31 /* Sidelist */
32#sidebar-list{
33 z-index: 2;
34 background-color: #2b2e46;
35 position: relative;
36 height: calc(100vh - 120px);
37 width: 320px;
38 /* min-height: 670px; */
39 transition: width .3s;
40}
41#sidebar-toplist>button:nth-child(1){margin-top: 5px;}
42#sidebar-toplist{
16 43
17 transition: 44 margin: 0 5px 0 5px;
18 background-color .2s, 45 display: grid;
19 border-radius .5s, 46 height: 400px;
20 width .3s; 47 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
21} 48}
22span { 49
23 font-family: D-DIN; 50#sidebar-bottomlist{
24 opacity: 1; 51 display: grid;
52
53 margin: 0 5px 0 5px;
54 justify-items: left;
55 grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
56 grid-template-rows: calc(100vh - 670px) 50px 50px 50px;
57}
58button>span{
59 font-family: BarlowSemiCondensed-Regular;
60 font-size: 18px;
61 color: #CDCFDF;
62 height: 32px;
63 line-height: 28px;
25 transition: opacity .1s; 64 transition: opacity .1s;
26} 65}
27button#side-grid:hover { 66button{
28 background-color: #141520 !important; 67 display: grid;
29 border-radius: 10px !important; 68 grid-template-columns: 50px auto;
69 place-items: left;
70 text-align: left;
71
72 background-color: inherit;
30 cursor: pointer; 73 cursor: pointer;
31} 74 border: none;
75 width: 310px;
76 height: 40px;
77 border-radius: 20px;
78 padding: 5px 0 0 6px;
32 79
33button>img{ 80 transition:
34 height: 20px; 81 width .3s,
35 float: left; 82 background-color .3s;
36 padding-left: 4px; 83 /* outline: red dotted 1px; */
37 filter: invert(0.8);
38 scale: 1.1;
39} 84}
85/* button>*{outline: red 1px dotted;} */
40 86
41#side-menu { /* just the menu button */ 87button>img {
42 border: 0; 88 scale: 1.1;
43 position: absolute; 89 width: 20px;
44 background-color: transparent; 90 padding: 5px;
45 left: 6px; top: 6px;
46 width: 40px; height: 40px;
47 cursor: pointer;
48} 91}
49 92
50#sidebar-list { /* buttons */ 93 /* Maplist */
94#sidebar>div:nth-child(3){
95 position: relative;
96 background-color: #202232;
97 color: #424562;
51 z-index: 1; 98 z-index: 1;
52 min-height: 700px; 99
53 width: 308px; height: calc(100vh - 140px); /* calc - logo */ 100 left: 52px;
54 position: absolute; 101 top: calc(-100vh + 120px);
55 background-color: #2b2e46; 102 width: 268px; height: calc(100vh - 120px);
56 display: grid; 103 min-height: 550px;
57 padding: 0 6px; 104}
58 row-gap: 8px; 105input[type=text]{
59 grid-template-rows: 106 margin: 10px 0 0 6px;
60 60px 40px 40px 107 padding: 1px 0px 1px 16px;
61 30px 40px 40px 40px 108 width: 240px;
62 30px 40px 40px; 109 height: 30px;
63 110
64 transition: width .3s; 111 font-family: BarlowSemiCondensed-Regular;
65} 112 font-size: 20px;
113
114 background-color: #161723;
115 color:#CDCFDF;
116
117 border: 0;
118 border-radius: 20px;
66 119
67#sidebar-content { 120}
68 position: absolute; 121input[type=text]::placeholder{color:#2b2e46}
69 background-color: #202232; 122input[type=text]:focus{outline: inherit;}
70 left: 52px; 123a{text-decoration: none;height: 40px;} \ No newline at end of file
71 min-height: 700px;
72 width: 268px; height: calc(100vh - 140px); /* calc - logo */
73} \ No newline at end of file
diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index 0bc5a1e..d5a55fd 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -1,7 +1,9 @@
1import React from 'react'; 1import React from 'react';
2import { Link, useLocation } from "react-router-dom";
2 3
4import "../App.css"
3import "./sidebar.css"; 5import "./sidebar.css";
4import img0 from "../imgs/0.png" 6import logo from "../imgs/logo.png"
5import img1 from "../imgs/1.png" 7import img1 from "../imgs/1.png"
6import img2 from "../imgs/2.png" 8import img2 from "../imgs/2.png"
7import img3 from "../imgs/3.png" 9import img3 from "../imgs/3.png"
@@ -10,19 +12,16 @@ import img5 from "../imgs/5.png"
10import img6 from "../imgs/6.png" 12import img6 from "../imgs/6.png"
11import img7 from "../imgs/7.png" 13import img7 from "../imgs/7.png"
12import img8 from "../imgs/8.png" 14import img8 from "../imgs/8.png"
15import img9 from "../imgs/9.png"
13 16
17export default function Sidebar(x) {
14 18
15export default function Sidebar() { 19// Locks search button for 300ms before it can be clicked again, prevents spam
16const sidebar_text = ['Home\u00A0page',"Profile","News","Records","Discussions","Leaderboards","Score\u00A0log"] // text on the buttons
17const [sidebar, setSidebar] = React.useState();
18
19
20// Locks button for 200ms before it can be clicked again, prevents spam
21const [isLocked, setIsLocked] = React.useState(false); 20const [isLocked, setIsLocked] = React.useState(false);
22function HandleLock(arg) { 21function HandleLock(arg) {
23if (!isLocked) { 22if (!isLocked) {
24 setIsLocked(true); 23 setIsLocked(true);
25 setTimeout(() => setIsLocked(false), 200); 24 setTimeout(() => setIsLocked(false), 300);
26 SidebarHide(arg) 25 SidebarHide(arg)
27 } 26 }
28} 27}
@@ -30,66 +29,119 @@ if (!isLocked) {
30 29
31// Clicked buttons 30// Clicked buttons
32function SidebarClick(x){ 31function SidebarClick(x){
33const btn = document.querySelectorAll("button#side-grid"); 32const btn = document.querySelectorAll("button");
34 33
34if(sidebar===1){setSidebar(0);SidebarHide()}
35 35
36sidebar_text.forEach((e,i) =>( 36btn.forEach((e,i) =>{
37 btn[i].style.backgroundColor="#202232", 37 btn[i].style.backgroundColor="inherit"
38 btn[i].style.borderRadius="20px" 38})
39)) 39btn[x].style.backgroundColor="#202232"
40 40
41btn[x].style.backgroundColor="#141520"
42btn[x].style.borderRadius="10px"
43} 41}
44 42
45 43
46// The menu button 44// The menu button
45const [sidebar, setSidebar] = React.useState();
46
47function SidebarHide(){ 47function SidebarHide(){
48const btn = document.querySelectorAll("button#side-grid"); 48const btn = document.querySelectorAll("button");
49const span = document.querySelectorAll("#side-grid>span"); 49const span = document.querySelectorAll("button>span");
50const side = document.querySelector("#sidebar-list"); 50const side = document.querySelector("#sidebar-list");
51 51
52if(sidebar===1){ 52if(sidebar===1){
53 setSidebar(0) 53 setSidebar(0)
54 side.style.width="308px" 54 side.style.width="320px"
55 sidebar_text.forEach((e, i) =>( 55 btn.forEach((e, i) =>{
56 btn[i].style.width="300px", 56 e.style.width="310px"
57 setTimeout(() => {span[i].style.opacity="1";span[i].textContent=e}, 200) 57 setTimeout(() => {span[i].style.opacity="1"}, 100)
58 )) 58 })
59 side.style.zIndex="2"
59} else { 60} else {
60 side.style.width="40px"; 61 side.style.width="40px";
61 setSidebar(1) 62 setSidebar(1)
62 sidebar_text.forEach((e,i) =>( 63 btn.forEach((e,i) =>{
63 btn[i].style.width="40px", 64 e.style.width="40px"
64 span[i].style.opacity="0", 65 span[i].style.opacity="0"
65 setTimeout(() => {span[i].textContent=""}, 100) 66 })
66 )) 67 setTimeout(() => {side.style.zIndex="0"}, 300);
67 } 68 }
68} 69}
69 70
70return ( 71const location = useLocation()
71<div id='sidebar'> 72React.useEffect(()=>{
72 <div> 73 if(location.pathname==="/"){SidebarClick(1)}
73 <img src={img0} alt="" width='320px' /> 74 if(location.pathname.includes("news")){SidebarClick(2)}
74 </div> 75 if(location.pathname.includes("records")){SidebarClick(3)}
75 <div id='sidebar-list'> 76 if(location.pathname.includes("leaderboards")){SidebarClick(4)}
76 <button onClick={()=>HandleLock()} id='side-menu'><img src={img1} alt="" /></button> 77 if(location.pathname.includes("discussions")){SidebarClick(5)}
77 <p id='side-grid'></p> {/* p's are spaces between buttons */} 78 if(location.pathname.includes("scorelog")){SidebarClick(6)}
78 <button onClick={()=>SidebarClick(0)} id='side-grid'><img src={img2} alt="" /><span>Home page</span></button> 79 if(location.pathname.includes("profile")){SidebarClick(7)}
79 <button onClick={()=>SidebarClick(1)} id='side-grid'><img src={img3} alt="" /><span>Profile</span></button> 80 if(location.pathname.includes("rules")){SidebarClick(8)}
80 <p id='side-grid'></p> 81 if(location.pathname.includes("about")){SidebarClick(9)}
81 <button onClick={()=>SidebarClick(2)} id='side-grid'><img src={img4} alt="" /><span>News</span></button> 82 // console.log(location.pathname)
82 <button onClick={()=>SidebarClick(3)} id='side-grid'><img src={img5} alt="" /><span>Records</span></button> 83 // eslint-disable-next-line react-hooks/exhaustive-deps
83 <button onClick={()=>SidebarClick(4)} id='side-grid'><img src={img6} alt="" /><span>Discussions</span></button> 84}, [location])
84 <p id='side-grid'></p>
85 <button onClick={()=>SidebarClick(5)} id='side-grid'><img src={img7} alt="" /><span>Leaderboards</span></button>
86 <button onClick={()=>SidebarClick(6)} id='side-grid'><img src={img8} alt="" /><span>Score&nbsp;log</span></button>
87 </div>
88 <div id='sidebar-content'>
89 85
86return (
87 <div id='sidebar'>
88 <div id='logo'> {/* logo */}
89 <img src={logo} alt="" height={"80px"}/>
90 <div id='logo-text'>
91 <span><b>PORTAL 2</b></span><br/>
92 <span>Least Portals</span>
93 </div>
94 </div>
95 <div id='sidebar-list'> {/* List */}
96 <div id='sidebar-toplist'> {/* Top */}
97 <button onClick={()=>HandleLock()}><img src={img1} alt="" /><span>Search</span></button>
98 <span></span>
99
100 <Link to="/" tabIndex={-1}>
101 <button><img src={img2} alt="" /><span>Home&nbsp;Page</span></button>
102 </Link>
103
104 <Link to="/news" tabIndex={-1}>
105 <button><img src={img3} alt="" /><span>News</span></button>
106 </Link>
107
108 <Link to="/records" tabIndex={-1}>
109 <button><img src={img4} alt="" /><span>Records</span></button>
110 </Link>
111
112 <Link to="/leaderboards" tabIndex={-1}>
113 <button><img src={img5} alt="" /><span>Leaderboards</span></button>
114 </Link>
115
116 <Link to="/discussions" tabIndex={-1}>
117 <button><img src={img6} alt="" /><span>Discussions</span></button>
118 </Link>
119
120 <Link to="/scorelog" tabIndex={-1}>
121 <button><img src={img7} alt="" /><span>Score&nbsp;Logs</span></button>
122 </Link>
123 </div>
124 <div id='sidebar-bottomlist'>
125 <span></span>
126
127 <Link to="/profile" tabIndex={-1}>
128 <button><img src={img1} alt="" /><span>Login</span></button>
129 </Link>
130
131 <Link to="/rules" tabIndex={-1}>
132 <button><img src={img8} alt="" /><span>Leaderboard&nbsp;Rules</span></button>
133 </Link>
134
135 <Link to="/about" tabIndex={-1}>
136 <button><img src={img9} alt="" /><span>About&nbsp;P2LP</span></button>
137 </Link>
138 </div>
139 </div>
140 <div>
141 <input type="text" placeholder='Search for map or a player...'/>
142 </div>
90 </div> 143 </div>
91</div> 144 )
92 )
93} 145}
94 146
95 147
diff --git a/frontend/src/fonts/BarlowCondensed-Bold.ttf b/frontend/src/fonts/BarlowCondensed-Bold.ttf
new file mode 100644
index 0000000..256f924
--- /dev/null
+++ b/frontend/src/fonts/BarlowCondensed-Bold.ttf
Binary files differ
diff --git a/frontend/src/fonts/BarlowCondensed-Regular.ttf b/frontend/src/fonts/BarlowCondensed-Regular.ttf
new file mode 100644
index 0000000..9f3aab8
--- /dev/null
+++ b/frontend/src/fonts/BarlowCondensed-Regular.ttf
Binary files differ
diff --git a/frontend/src/fonts/BarlowSemiCondensed-Regular.ttf b/frontend/src/fonts/BarlowSemiCondensed-Regular.ttf
new file mode 100644
index 0000000..71ff2d9
--- /dev/null
+++ b/frontend/src/fonts/BarlowSemiCondensed-Regular.ttf
Binary files differ
diff --git a/frontend/src/fonts/D-DIN.otf b/frontend/src/fonts/D-DIN.otf
deleted file mode 100644
index ea5c4c8..0000000
--- a/frontend/src/fonts/D-DIN.otf
+++ /dev/null
Binary files differ
diff --git a/frontend/src/imgs/0.png b/frontend/src/imgs/0.png
deleted file mode 100644
index 37be8ca..0000000
--- a/frontend/src/imgs/0.png
+++ /dev/null
Binary files differ
diff --git a/frontend/src/imgs/1.png b/frontend/src/imgs/1.png
index 64d61fa..ea59d2f 100644
--- a/frontend/src/imgs/1.png
+++ b/frontend/src/imgs/1.png
Binary files differ
diff --git a/frontend/src/imgs/2.png b/frontend/src/imgs/2.png
index ac4f96b..b8d108e 100644
--- a/frontend/src/imgs/2.png
+++ b/frontend/src/imgs/2.png
Binary files differ
diff --git a/frontend/src/imgs/3.png b/frontend/src/imgs/3.png
index 2be4f03..cfda6a4 100644
--- a/frontend/src/imgs/3.png
+++ b/frontend/src/imgs/3.png
Binary files differ
diff --git a/frontend/src/imgs/4.png b/frontend/src/imgs/4.png
index 083d00d..bbc01c4 100644
--- a/frontend/src/imgs/4.png
+++ b/frontend/src/imgs/4.png
Binary files differ
diff --git a/frontend/src/imgs/5.png b/frontend/src/imgs/5.png
index 81f17e8..b63d2c3 100644
--- a/frontend/src/imgs/5.png
+++ b/frontend/src/imgs/5.png
Binary files differ
diff --git a/frontend/src/imgs/6.png b/frontend/src/imgs/6.png
index 71b57a6..6ced542 100644
--- a/frontend/src/imgs/6.png
+++ b/frontend/src/imgs/6.png
Binary files differ
diff --git a/frontend/src/imgs/7.png b/frontend/src/imgs/7.png
index 2e8df24..c20bcf4 100644
--- a/frontend/src/imgs/7.png
+++ b/frontend/src/imgs/7.png
Binary files differ
diff --git a/frontend/src/imgs/8.png b/frontend/src/imgs/8.png
index df9a104..d640522 100644
--- a/frontend/src/imgs/8.png
+++ b/frontend/src/imgs/8.png
Binary files differ
diff --git a/frontend/src/imgs/9.png b/frontend/src/imgs/9.png
new file mode 100644
index 0000000..3cd602a
--- /dev/null
+++ b/frontend/src/imgs/9.png
Binary files differ
diff --git a/frontend/src/imgs/logo.png b/frontend/src/imgs/logo.png
new file mode 100644
index 0000000..774d55a
--- /dev/null
+++ b/frontend/src/imgs/logo.png
Binary files differ
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:24:24 +0000