diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | frontend/src/components/ModMenu.tsx | 39 | ||||
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 30 | ||||
| -rw-r--r-- | frontend/src/pages/Games.tsx | 4 |
4 files changed, 31 insertions, 43 deletions
| @@ -3,4 +3,3 @@ | |||
| 3 | *.sh | 3 | *.sh |
| 4 | *.txt | 4 | *.txt |
| 5 | *.dem | 5 | *.dem |
| 6 | *.json \ No newline at end of file | ||
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx index 1fe4239..a0945eb 100644 --- a/frontend/src/components/ModMenu.tsx +++ b/frontend/src/components/ModMenu.tsx | |||
| @@ -15,7 +15,7 @@ interface ModMenuProps { | |||
| 15 | const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | 15 | const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { |
| 16 | 16 | ||
| 17 | const [menu, setMenu] = React.useState<number>(0); | 17 | const [menu, setMenu] = React.useState<number>(0); |
| 18 | const [showButton, setShowButton] = React.useState(1) | 18 | const [showButton, setShowButton] = React.useState<boolean>(true); |
| 19 | 19 | ||
| 20 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ | 20 | const [routeContent, setRouteContent] = React.useState<ModMenuContent>({ |
| 21 | id: 0, | 21 | id: 0, |
| @@ -120,13 +120,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 120 | 120 | ||
| 121 | const modview_block = document.querySelector("#modview_block") as HTMLElement | 121 | const modview_block = document.querySelector("#modview_block") as HTMLElement |
| 122 | if (modview_block) { | 122 | if (modview_block) { |
| 123 | showButton === 1 ? modview_block.style.display = "none" : modview_block.style.display = "block"// eslint-disable-next-line | 123 | showButton ? modview_block.style.display = "none" : modview_block.style.display = "block" |
| 124 | } | 124 | } |
| 125 | }, [showButton]) | 125 | }, [showButton]) |
| 126 | 126 | ||
| 127 | return ( | 127 | return ( |
| 128 | <div id="modview_bdlock"> | 128 | <> |
| 129 | 129 | <div id="modview_block" /> | |
| 130 | <div id='modview'> | 130 | <div id='modview'> |
| 131 | <div> | 131 | <div> |
| 132 | <button onClick={() => setMenu(1)}>Edit Image</button> | 132 | <button onClick={() => setMenu(1)}>Edit Image</button> |
| @@ -136,15 +136,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 136 | </div> | 136 | </div> |
| 137 | <div> | 137 | <div> |
| 138 | {showButton ? ( | 138 | {showButton ? ( |
| 139 | <button onClick={() => setShowButton(0)}>Show</button> | 139 | <button onClick={() => setShowButton(false)}>Show</button> |
| 140 | ) : ( | 140 | ) : ( |
| 141 | <button onClick={() => { setShowButton(1); setMenu(0) }}>Hide</button> | 141 | <button onClick={() => { setShowButton(true); setMenu(0); }}>Hide</button> |
| 142 | )} | 142 | )} |
| 143 | </div> | 143 | </div> |
| 144 | </div> | 144 | </div><div id='modview-menu'> |
| 145 | 145 | {// Edit Image | |
| 146 | <div id='modview-menu'> | ||
| 147 | { // Edit Image | ||
| 148 | menu === 1 && ( | 146 | menu === 1 && ( |
| 149 | <div id='modview-menu-image'> | 147 | <div id='modview-menu-image'> |
| 150 | <div> | 148 | <div> |
| @@ -157,19 +155,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 157 | <input type="file" accept='image/*' onChange={e => { | 155 | <input type="file" accept='image/*' onChange={e => { |
| 158 | if (e.target.files) { | 156 | if (e.target.files) { |
| 159 | compressImage(e.target.files[0]) | 157 | compressImage(e.target.files[0]) |
| 160 | .then(d => setImage(d)) | 158 | .then(d => setImage(d)); |
| 161 | } | 159 | } |
| 162 | } | 160 | }} /></span> |
| 163 | } /></span> | ||
| 164 | {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>} | 161 | {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>} |
| 165 | <img src={image} alt="" id='modview-menu-image-file' /> | 162 | <img src={image} alt="" id='modview-menu-image-file' /> |
| 166 | 163 | ||
| 167 | </div> | 164 | </div> |
| 168 | </div> | 165 | </div> |
| 169 | ) | 166 | )} |
| 170 | } | ||
| 171 | 167 | ||
| 172 | { // Edit Route | 168 | {// Edit Route |
| 173 | menu === 2 && ( | 169 | menu === 2 && ( |
| 174 | <div id='modview-menu-edit'> | 170 | <div id='modview-menu-edit'> |
| 175 | <div id='modview-route-id'> | 171 | <div id='modview-route-id'> |
| @@ -234,10 +230,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 234 | </p> | 230 | </p> |
| 235 | </div> | 231 | </div> |
| 236 | </div> | 232 | </div> |
| 237 | ) | 233 | )} |
| 238 | } | ||
| 239 | 234 | ||
| 240 | { // Add Route | 235 | {// Add Route |
| 241 | menu === 3 && ( | 236 | menu === 3 && ( |
| 242 | <div id='modview-menu-add'> | 237 | <div id='modview-menu-add'> |
| 243 | <div id='modview-route-category'> | 238 | <div id='modview-route-category'> |
| @@ -313,11 +308,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => { | |||
| 313 | </p> | 308 | </p> |
| 314 | </div> | 309 | </div> |
| 315 | </div> | 310 | </div> |
| 316 | ) | 311 | )} |
| 317 | } | ||
| 318 | </div> | 312 | </div> |
| 319 | 313 | </> | |
| 320 | </div> | ||
| 321 | ); | 314 | ); |
| 322 | }; | 315 | }; |
| 323 | 316 | ||
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index a8834b6..d303927 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx | |||
| @@ -90,13 +90,13 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile }) => { | |||
| 90 | 90 | ||
| 91 | React.useEffect(() => { | 91 | React.useEffect(() => { |
| 92 | if (path === "/") { handle_sidebar_click(1) } | 92 | if (path === "/") { handle_sidebar_click(1) } |
| 93 | else if (path.includes("news")) { handle_sidebar_click(2) } | 93 | else if (path.includes("games")) { handle_sidebar_click(2) } |
| 94 | else if (path.includes("games")) { handle_sidebar_click(3) } | 94 | else if (path.includes("rankings")) { handle_sidebar_click(3) } |
| 95 | else if (path.includes("leaderboards")) { handle_sidebar_click(4) } | 95 | // else if (path.includes("news")) { handle_sidebar_click(4) } |
| 96 | else if (path.includes("scorelog")) { handle_sidebar_click(5) } | 96 | // else if (path.includes("scorelog")) { handle_sidebar_click(5) } |
| 97 | else if (path.includes("profile")) { handle_sidebar_click(6) } | 97 | else if (path.includes("profile")) { handle_sidebar_click(4) } |
| 98 | else if (path.includes("rules")) { handle_sidebar_click(8) } | 98 | else if (path.includes("rules")) { handle_sidebar_click(5) } |
| 99 | else if (path.includes("about")) { handle_sidebar_click(9) } | 99 | else if (path.includes("about")) { handle_sidebar_click(6) } |
| 100 | }, [path]); | 100 | }, [path]); |
| 101 | 101 | ||
| 102 | return ( | 102 | return ( |
| @@ -121,21 +121,21 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile }) => { | |||
| 121 | <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home Page</span></button> | 121 | <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home Page</span></button> |
| 122 | </Link> | 122 | </Link> |
| 123 | 123 | ||
| 124 | <Link to="/news" tabIndex={-1}> | ||
| 125 | <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button> | ||
| 126 | </Link> | ||
| 127 | |||
| 128 | <Link to="/games" tabIndex={-1}> | 124 | <Link to="/games" tabIndex={-1}> |
| 129 | <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button> | 125 | <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button> |
| 130 | </Link> | 126 | </Link> |
| 131 | 127 | ||
| 132 | <Link to="/leaderboards" tabIndex={-1}> | 128 | <Link to="/rankings" tabIndex={-1}> |
| 133 | <button className='sidebar-button'><img src={FlagIcon} alt="leaderboards" /><span>Leaderboards</span></button> | 129 | <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button> |
| 134 | </Link> | 130 | </Link> |
| 135 | 131 | ||
| 136 | <Link to="/scorelog" tabIndex={-1}> | 132 | {/* <Link to="/news" tabIndex={-1}> |
| 133 | <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button> | ||
| 134 | </Link> */} | ||
| 135 | |||
| 136 | {/* <Link to="/scorelog" tabIndex={-1}> | ||
| 137 | <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score Logs</span></button> | 137 | <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score Logs</span></button> |
| 138 | </Link> | 138 | </Link> */} |
| 139 | </div> | 139 | </div> |
| 140 | <div id='sidebar-bottomlist'> | 140 | <div id='sidebar-bottomlist'> |
| 141 | <span></span> | 141 | <span></span> |
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx index e4b33e5..ce3db76 100644 --- a/frontend/src/pages/Games.tsx +++ b/frontend/src/pages/Games.tsx | |||
| @@ -31,10 +31,6 @@ const Games: React.FC = () => { | |||
| 31 | 31 | ||
| 32 | return ( | 32 | return ( |
| 33 | <div className='games-page'> | 33 | <div className='games-page'> |
| 34 | <section className='games-page-header'> | ||
| 35 | <span><b>Games list</b></span> | ||
| 36 | </section> | ||
| 37 | |||
| 38 | <section> | 34 | <section> |
| 39 | <div className='games-page-content'> | 35 | <div className='games-page-content'> |
| 40 | <div className='games-page-item-content'> | 36 | <div className='games-page-item-content'> |