├── src ├── App.css ├── components │ ├── common │ │ ├── CollectionList.css │ │ ├── BarGraph.css │ │ ├── FavouriteButton.css │ │ ├── mode-catch.png │ │ ├── mode-mania.png │ │ ├── mode-osu.png │ │ ├── mode-taiko.png │ │ ├── EditableTextbox.css │ │ ├── SortButton.css │ │ ├── CollectionCard.css │ │ ├── DifficultyBadge.js │ │ ├── Glow.css │ │ ├── BarGraph.js │ │ ├── FavouriteButton.js │ │ ├── SortButton.js │ │ ├── CollectionList.js │ │ ├── ModeCounters.js │ │ ├── EditableTextbox.js │ │ ├── FIleUpload.js │ │ └── CollectionCard.js │ ├── client │ │ ├── import.png │ │ ├── darkmode.png │ │ ├── downloads.png │ │ ├── SubscriptionDetailsModal.js │ │ └── DesktopClient.js │ ├── users │ │ ├── usercoverfallback.jpg │ │ ├── UserCard.css │ │ ├── UserCard.js │ │ ├── Users.js │ │ ├── UserUploads.js │ │ └── UserFavourites.js │ ├── collection │ │ ├── slimcoverfallback.jpg │ │ ├── Comments.css │ │ ├── MapsetCard.css │ │ ├── MapsetCard.js │ │ └── Comments.js │ ├── home │ │ ├── Home.css │ │ └── Home.js │ ├── navbar │ │ ├── uploadModal.css │ │ ├── NavButton.css │ │ ├── LoginButton.js │ │ ├── UserBadge.css │ │ ├── UserBadge.js │ │ ├── UploadModal.js │ │ └── NavigationBar.js │ ├── notfound │ │ └── NotFound.js │ ├── twitchSuccess │ │ └── TwitchSuccess.js │ ├── login │ │ ├── ShowOtp.js │ │ └── EnterOtp.js │ ├── payments │ │ ├── Success.js │ │ └── Checkout.js │ ├── bootstrap-osu-collector.js │ ├── recent │ │ └── Recent.js │ ├── popular │ │ └── Popular.js │ └── all │ │ └── All.js ├── config │ ├── local.json │ ├── production.json │ ├── production-jun-testing.json │ └── config.js ├── utils │ ├── hooks.js │ ├── utf8-decoder.js │ ├── helpers.js │ ├── uleb128.js │ ├── misc.js │ ├── collectionsDb.js │ └── api.js ├── App.test.js ├── index.js └── App.js ├── public ├── favicon.ico ├── osu!Collector logo.png ├── manifest.json └── index.html ├── .vscode ├── tasks.json └── launch.json ├── .gitignore ├── README.md ├── .eslintrc.json └── package.json /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: 'Libre Franklin', sans-serif; 3 | } -------------------------------------------------------------------------------- /src/components/common/CollectionList.css: -------------------------------------------------------------------------------- 1 | td { 2 | cursor: pointer; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/public/favicon.ico -------------------------------------------------------------------------------- /src/components/common/BarGraph.css: -------------------------------------------------------------------------------- 1 | svg > g > g.google-visualization-tooltip { pointer-events: none } -------------------------------------------------------------------------------- /src/components/common/FavouriteButton.css: -------------------------------------------------------------------------------- 1 | .favourite-button.btn:focus { 2 | box-shadow: none; 3 | } -------------------------------------------------------------------------------- /public/osu!Collector logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/public/osu!Collector logo.png -------------------------------------------------------------------------------- /src/components/client/import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/client/import.png -------------------------------------------------------------------------------- /src/components/client/darkmode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/client/darkmode.png -------------------------------------------------------------------------------- /src/components/client/downloads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/client/downloads.png -------------------------------------------------------------------------------- /src/components/common/mode-catch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/common/mode-catch.png -------------------------------------------------------------------------------- /src/components/common/mode-mania.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/common/mode-mania.png -------------------------------------------------------------------------------- /src/components/common/mode-osu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/common/mode-osu.png -------------------------------------------------------------------------------- /src/components/common/mode-taiko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/common/mode-taiko.png -------------------------------------------------------------------------------- /src/config/local.json: -------------------------------------------------------------------------------- 1 | { 2 | "CLIENT_ID": 7512, 3 | "OAUTH_CALLBACK": "https://osucollector.com/authentication", 4 | "API_HOST": "" 5 | } -------------------------------------------------------------------------------- /src/config/production.json: -------------------------------------------------------------------------------- 1 | { 2 | "CLIENT_ID": 7512, 3 | "OAUTH_CALLBACK": "https://osucollector.com/authentication", 4 | "API_HOST": "" 5 | } -------------------------------------------------------------------------------- /src/components/users/usercoverfallback.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/users/usercoverfallback.jpg -------------------------------------------------------------------------------- /src/config/production-jun-testing.json: -------------------------------------------------------------------------------- 1 | { 2 | "CLIENT_ID": 8837, 3 | "OAUTH_CALLBACK": "http://72.39.80.182/authentication", 4 | "API_HOST": "" 5 | } -------------------------------------------------------------------------------- /src/components/collection/slimcoverfallback.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiftoo/osuCollector-frontend/master/src/components/collection/slimcoverfallback.jpg -------------------------------------------------------------------------------- /src/components/common/EditableTextbox.css: -------------------------------------------------------------------------------- 1 | .editable-textbox { 2 | cursor: pointer; 3 | } 4 | .editable-textbox:hover { 5 | background-color: #eee; 6 | } -------------------------------------------------------------------------------- /src/utils/hooks.js: -------------------------------------------------------------------------------- 1 | import { useLocation } from "react-router-dom"; 2 | 3 | function useQuery() { 4 | return new URLSearchParams(useLocation().search); 5 | } 6 | 7 | export { 8 | useQuery 9 | } -------------------------------------------------------------------------------- /src/utils/utf8-decoder.js: -------------------------------------------------------------------------------- 1 | function decodeUtf8(uintArray) { 2 | let encodedString = String.fromCharCode.apply(null, Array.from(uintArray)) 3 | let decodedString = decodeURIComponent(escape(encodedString)) 4 | return decodedString 5 | } 6 | 7 | export { decodeUtf8 } -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/config/config.js: -------------------------------------------------------------------------------- 1 | import local from './local.json' 2 | import production from './production.json' 3 | 4 | const config = { 5 | get: function(prop) { 6 | return process.env.NODE_ENV === 'production' ? production[prop] : local[prop] 7 | } 8 | } 9 | export default config 10 | -------------------------------------------------------------------------------- /src/utils/helpers.js: -------------------------------------------------------------------------------- 1 | function validateEmail(email) { 2 | const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 3 | return re.test(email); 4 | } 5 | 6 | export { 7 | validateEmail 8 | } -------------------------------------------------------------------------------- /src/components/home/Home.css: -------------------------------------------------------------------------------- 1 | .news { 2 | border-left: 2px solid rgb(179, 179, 179); 3 | padding-left: 1em; 4 | margin-left: 2em; 5 | margin-bottom: 2em; 6 | max-width: 50%; 7 | } 8 | 9 | .date { 10 | font-size: 0.9em; 11 | } 12 | 13 | .stats { 14 | max-width: 45%; 15 | } 16 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "type": "npm", 6 | "script": "start", 7 | "problemMatcher": [], 8 | "label": "npm: start", 9 | "detail": "react-scripts start", 10 | "group": { 11 | "kind": "build", 12 | "isDefault": true 13 | } 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /src/components/navbar/uploadModal.css: -------------------------------------------------------------------------------- 1 | .dragon-drop { 2 | cursor: pointer; 3 | border: dashed 2px lightgray; 4 | padding: 20px; 5 | text-align: center; 6 | } 7 | 8 | .upload-buttons { 9 | float: right; 10 | } 11 | 12 | .upload-buttons .btn { 13 | margin-left: 5px; 14 | margin-right: 5px; 15 | } -------------------------------------------------------------------------------- /src/components/notfound/NotFound.js: -------------------------------------------------------------------------------- 1 | import { Container } from "react-bootstrap"; 2 | 3 | function NotFound() { 4 | return ( 5 | 6 |

7 | 404 Not Found 8 |

9 | 10 | ) 11 | } 12 | 13 | export default NotFound; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | import App from './App'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import { BrowserRouter } from 'react-router-dom'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /src/components/navbar/NavButton.css: -------------------------------------------------------------------------------- 1 | .nav-button { 2 | background-color: transparent; 3 | color: #777; 4 | width: 40px; 5 | height: 40px; 6 | border-radius: 50px; 7 | display: inline-flex; 8 | align-items: center; 9 | } 10 | 11 | .nav-button:hover { 12 | background-color: #444; 13 | color: #fff; 14 | } -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/collection/Comments.css: -------------------------------------------------------------------------------- 1 | .noselect { 2 | -webkit-touch-callout: none; /* iOS Safari */ 3 | -webkit-user-select: none; /* Safari */ 4 | -khtml-user-select: none; /* Konqueror HTML */ 5 | -moz-user-select: none; /* Old versions of Firefox */ 6 | -ms-user-select: none; /* Internet Explorer/Edge */ 7 | user-select: none; /* Non-prefixed version, currently 8 | supported by Chrome, Edge, Opera and Firefox */ 9 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:3000", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /src/components/common/SortButton.css: -------------------------------------------------------------------------------- 1 | .sort-button-idle { 2 | outline: none; 3 | border: none; 4 | background-color: #f1f1f1; 5 | border-radius: 8px; 6 | } 7 | 8 | .sort-button-idle:hover, 9 | .sort-button-idle:active { 10 | background-color: #ddd; 11 | } 12 | 13 | .sort-button-active { 14 | outline: none; 15 | border: none; 16 | background-color: #e6e6e6; 17 | border-radius: 8px; 18 | } 19 | 20 | .sort-button-active:hover, 21 | .sort-button-active:active { 22 | background-color: #eee; 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # osuCollector 2 | ### [osu!Collector](https://osucollector.com/) is a free-to-use service that allows you to easily share and favorite osu! beatmap collections uploaded by other players. 3 | 4 | ### [Support us](https://osucollector.com/client) to gain access to more awesome features 🥳 5 | 6 | ### The front end is open source, so don't be shy to make a pull request! 7 | 8 | ![](https://i.imgur.com/AhXQG3A.png) 9 | ![](https://i.imgur.com/ZFMbjDt.png) 10 | ![](https://i.imgur.com/MXvmyFf.png) 11 | ![](https://i.imgur.com/QfI84YQ.png) 12 | -------------------------------------------------------------------------------- /src/utils/uleb128.js: -------------------------------------------------------------------------------- 1 | // returns [result, bytesRead] 2 | function decodeULEB128(buf, startOffset = 0) { 3 | let result = 0 4 | let shift = 0 5 | let offset = startOffset 6 | // eslint-disable-next-line no-constant-condition 7 | while (true) { 8 | let byte = new Int8Array(buf, offset)[0] 9 | offset += 1 10 | result = result | ((byte & 0x7f) << shift) 11 | if ((byte & 0x80) === 0) 12 | break 13 | shift += 7 14 | } 15 | return [result, offset] 16 | } 17 | 18 | export { decodeULEB128 } -------------------------------------------------------------------------------- /src/components/common/CollectionCard.css: -------------------------------------------------------------------------------- 1 | a.nostyle:link { 2 | text-decoration: inherit; 3 | color: inherit; 4 | cursor: auto; 5 | } 6 | 7 | a.nostyle:visited { 8 | text-decoration: inherit; 9 | color: inherit; 10 | cursor: auto; 11 | } 12 | 13 | .collection-card-uploader-avatar { 14 | width: 32px; 15 | height: 32px; 16 | } 17 | 18 | .collection-card-clickable { 19 | cursor: pointer; 20 | } 21 | 22 | .collection-card-graph-bg { 23 | background-color: #eee; 24 | } 25 | 26 | .muted-filter { 27 | filter: opacity(20%); 28 | } -------------------------------------------------------------------------------- /src/components/navbar/LoginButton.js: -------------------------------------------------------------------------------- 1 | import { Button } from '../bootstrap-osu-collector'; 2 | import config from '../../config/config' 3 | 4 | function LoginButton() { 5 | const clientId = config.get('CLIENT_ID') 6 | const callback = encodeURIComponent(config.get('OAUTH_CALLBACK')) 7 | return ( 8 | 9 | 10 | 11 | ) 12 | } 13 | 14 | export default LoginButton; -------------------------------------------------------------------------------- /src/components/collection/MapsetCard.css: -------------------------------------------------------------------------------- 1 | .img-overlay-text { 2 | color: white; 3 | text-shadow: 2px 2px 4px #000, 2px 2px 4px #000, 2px 2px 4px #000; 4 | } 5 | 6 | .media-play-button { 7 | background-color: transparent; 8 | background-repeat: no-repeat; 9 | border: none; 10 | cursor: pointer; 11 | overflow: hidden; 12 | outline: none; 13 | color: #fff; 14 | text-shadow: 2px 2px 4px #000, 2px 2px 4px #000, 2px 2px 4px #000; 15 | } 16 | 17 | .svg-shadow { 18 | -webkit-filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .7)); 19 | filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .7)); 20 | /* Similar syntax to box-shadow */ 21 | } -------------------------------------------------------------------------------- /src/components/users/UserCard.css: -------------------------------------------------------------------------------- 1 | .user-cover { 2 | object-fit: cover; 3 | height: 89px; 4 | max-width: 100%; 5 | } 6 | 7 | .user-rank-left { 8 | display: block; 9 | align-items:center; 10 | } 11 | .user-rank-right { 12 | display: block; 13 | align-items:center; 14 | } 15 | .user-ranks { 16 | font-size: 2em; 17 | } 18 | 19 | .user-avatar { 20 | position: absolute; 21 | top: 21px; 22 | height: 80px; 23 | width: 80px; 24 | border: 2px solid #fff; 25 | border-radius: 50%; 26 | box-shadow: 0px 2px 9px #00000030, 0px 2px 9px #00000030; 27 | } 28 | 29 | .user-links { 30 | text-align: center; 31 | padding: 10px; 32 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es2021": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": 12, 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react", 20 | "react-hooks" 21 | ], 22 | "rules": { 23 | "react/react-in-jsx-scope": 0, 24 | "react/jsx-uses-react": 0, 25 | "react/prop-types": 0 26 | }, 27 | "settings": { 28 | "react": { 29 | "version": "detect" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/common/DifficultyBadge.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | import { Badge, Image } from '../bootstrap-osu-collector' 3 | import { clamp, starToColor } from '../../utils/misc' 4 | 5 | function DifficultyBadge({ className, stars }) { 6 | 7 | return ( 8 | 16 |
20 | {stars.toFixed(2)} ★ 21 |
22 | 23 | ) 24 | } 25 | 26 | export default DifficultyBadge 27 | -------------------------------------------------------------------------------- /src/components/twitchSuccess/TwitchSuccess.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | import { Container, Image } from '../bootstrap-osu-collector' 3 | 4 | function TwitchSuccess({ user }) { 5 | const twitchAva = user?.private?.linkedTwitchAccount.profilePictureUrl 6 | const twitchName = user?.private?.linkedTwitchAccount.displayName 7 | return ( 8 | 9 |
10 |

Success!

11 |

Your Twitch account has been linked.

12 | 13 |

{twitchName}

14 |
15 | 16 | ) 17 | } 18 | 19 | TwitchSuccess.propTypes = { 20 | user: PropTypes.object 21 | } 22 | 23 | export default TwitchSuccess 24 | -------------------------------------------------------------------------------- /src/components/common/Glow.css: -------------------------------------------------------------------------------- 1 | .glowing { 2 | display: inline-block; 3 | -webkit-animation: glow 1s ease-in-out infinite alternate; 4 | -moz-animation: glow 1s ease-in-out infinite alternate; 5 | animation: glow 1s ease-in-out infinite alternate; 6 | } 7 | 8 | @keyframes glow { 9 | from { 10 | box-shadow: 11 | 0 0 calc(10px / 2) #fff, 12 | 0 0 calc(20px / 2) #fff, 13 | 0 0 calc(30px / 2) #e60073, 14 | 0 0 calc(40px / 2) #e60073, 15 | 0 0 calc(50px / 2) #e60073, 16 | 0 0 calc(60px / 2) #e60073, 17 | 0 0 calc(70px / 2) #e60073; 18 | } 19 | to { 20 | box-shadow: 21 | 0 0 calc(20px / 2) #fff, 22 | 0 0 calc(30px / 2) #ff4da6, 23 | 0 0 calc(40px / 2) #ff4da6, 24 | 0 0 calc(50px / 2) #ff4da6, 25 | 0 0 calc(60px / 2) #ff4da6, 26 | 0 0 calc(70px / 2) #ff4da6, 27 | 0 0 calc(80px / 2) #ff4da6; 28 | } 29 | } -------------------------------------------------------------------------------- /src/components/login/ShowOtp.js: -------------------------------------------------------------------------------- 1 | import { useQuery } from '../../utils/hooks'; 2 | import { useState, useEffect } from 'react'; 3 | import { Card, Container } from '../bootstrap-osu-collector'; 4 | 5 | function ShowOtp() { 6 | const query = useQuery(); 7 | const [otp, setOtp] = useState('') 8 | useEffect(async () => { 9 | setOtp(query.get('otp') || ''); 10 | // eslint-disable-next-line react-hooks/exhaustive-deps 11 | }, []) 12 | 13 | return ( 14 | 15 | 16 |
17 |

Please navigate back to the osu!Collector desktop app and enter this one time password:

18 |

{otp}

19 |
20 | 21 | 22 | ) 23 | } 24 | 25 | export default ShowOtp 26 | -------------------------------------------------------------------------------- /src/components/payments/Success.js: -------------------------------------------------------------------------------- 1 | import Confetti from "react-confetti" 2 | import { Container, Row } from '../bootstrap-osu-collector' 3 | import { useWindowSize } from "react-use" 4 | 5 | function Success() { 6 | const { width, height } = useWindowSize() 7 | return ( 8 | 9 |
10 |
16 | 17 | 18 |

Success!

19 | 20 | 21 | Click here to go to the download page 22 | 23 | 24 |
25 | 28 |
29 | 30 | ) 31 | } 32 | 33 | export default Success 34 | -------------------------------------------------------------------------------- /src/components/common/BarGraph.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import Chart from 'react-google-charts' 3 | import { ThemeContext } from 'styled-components'; 4 | import './BarGraph.css' 5 | 6 | const BarGraph = ({ chartEvents, data, enableInteractivity=false, height }) => { 7 | const theme = useContext(ThemeContext) 8 | return ( 9 | } 13 | data={data} 14 | options={{ 15 | legend: { position: 'none' }, 16 | enableInteractivity: enableInteractivity, 17 | backgroundColor: theme.darkMode ? '#121212' : '#eee', 18 | hAxis: { 19 | textStyle: { color: '#555' } 20 | }, 21 | vAxis: { 22 | baselineColor: theme.darkMode ? '#121212' : '#eee', 23 | gridlineColor: theme.darkMode ? '#121212' : '#eee', 24 | textPosition: 'none', 25 | } 26 | }} 27 | chartEvents={chartEvents} 28 | /> 29 | ) 30 | } 31 | 32 | export default BarGraph 33 | -------------------------------------------------------------------------------- /src/components/common/FavouriteButton.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | import { Button } from '../bootstrap-osu-collector' 3 | import { Heart, HeartFill } from 'react-bootstrap-icons' 4 | import './FavouriteButton.css' 5 | import { useContext } from 'react' 6 | import { ThemeContext } from 'styled-components' 7 | 8 | function FavouriteButton({ className, favourites, favourited, onClick }) { 9 | 10 | const theme = useContext(ThemeContext) 11 | 12 | const notFavouritedStyle = { 13 | color: 'white', 14 | background: theme.darkMode ? '#555' : '#AAB8C2' 15 | } 16 | const favouritedStyle = { 17 | color: 'white', 18 | background: '#FF66AB' 19 | } 20 | const currentStyle = favourited ? favouritedStyle : notFavouritedStyle 21 | 22 | return ( 23 | 33 | ) 34 | } 35 | 36 | export default FavouriteButton 37 | -------------------------------------------------------------------------------- /src/components/navbar/UserBadge.css: -------------------------------------------------------------------------------- 1 | .noselect { 2 | -webkit-touch-callout: none; /* iOS Safari */ 3 | -webkit-user-select: none; /* Safari */ 4 | -khtml-user-select: none; /* Konqueror HTML */ 5 | -moz-user-select: none; /* Old versions of Firefox */ 6 | -ms-user-select: none; /* Internet Explorer/Edge */ 7 | user-select: none; /* Non-prefixed version, currently 8 | supported by Chrome, Edge, Opera and Firefox */ 9 | } 10 | 11 | .user-badge { 12 | cursor: pointer; 13 | display: inline-flex; 14 | align-items: center; 15 | background-color: gray; 16 | border-radius: 50px; 17 | text-decoration: none; 18 | text-shadow: 1px 1px 2px #000000; 19 | } 20 | 21 | .user-badge-supporter { 22 | background-color: #FF66AB; 23 | } 24 | 25 | .user-badge:hover { 26 | text-decoration: none; 27 | background-color: darkgray; 28 | } 29 | 30 | .user-badge-supporter:hover { 31 | background-color: #ff91c2; 32 | } 33 | 34 | .user-badge a { 35 | text-decoration: none; 36 | } 37 | 38 | .user-badge span { 39 | padding: 0px 15px 0px 6px; 40 | color: white; 41 | vertical-align: text-top; 42 | } 43 | 44 | .user-badge .avatar-img { 45 | height: 30px; 46 | width: 30px; 47 | margin: 4px; 48 | object-fit: cover; 49 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | osu!Collector 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/common/SortButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components' 2 | import './SortButton.css' 3 | 4 | const StyledButton = styled.button` 5 | outline: none; 6 | border: none; 7 | border-radius: 8px; 8 | color: ${props => props.theme.darkMode ? '#eee' : '#000'}; 9 | background-color: ${props => 10 | props.theme.darkMode ? 11 | (props.active ? props.theme.primary50 : props.theme.primary25) 12 | : 13 | (props.active ? '#e6e6e6' : '#f1f1f1') 14 | }; 15 | 16 | &:hover, &:active { 17 | background-color: ${props => 18 | props.theme.darkMode ? 19 | (props.active ? props.theme.primary60 : props.theme.primary35) 20 | : 21 | (props.active ? '#eee' : '#ddd') 22 | }; 23 | } 24 | ` 25 | 26 | // sortDirection: null or 'asc' or 'desc' 27 | function SortButton({ children, className, sortDirection, onClick }) { 28 | 29 | if (sortDirection === null) { 30 | return ( 31 | 32 |
33 | {children} 34 |
35 | 36 | ) 37 | } 38 | return ( 39 | 40 | {children} 41 | {sortDirection === 'asc' ? : } 42 | 43 | ) 44 | } 45 | 46 | export default SortButton 47 | -------------------------------------------------------------------------------- /src/components/navbar/UserBadge.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { useState } from 'react'; 3 | import { Dropdown } from '../bootstrap-osu-collector'; 4 | import Image from 'react-bootstrap/Image'; 5 | import { LinkContainer } from 'react-router-bootstrap'; 6 | import './UserBadge.css'; 7 | 8 | const UserBadge = ({ className, user }) => { 9 | const [show, setShow] = useState(false) 10 | 11 | return ( 12 | 13 |
{ 14 | setShow(!show) 15 | }}> 16 | 17 | {user.osuweb.username} 18 |
19 |
20 | 21 | setShow(false)}> 22 | Uploads 23 | 24 | 25 | 26 | setShow(false)}> 27 | Favourites 28 | 29 | 30 |
31 | 32 | ) 33 | } 34 | 35 | UserBadge.propTypes = { 36 | user: PropTypes.object, 37 | } 38 | 39 | export default UserBadge; 40 | -------------------------------------------------------------------------------- /src/components/bootstrap-osu-collector.js: -------------------------------------------------------------------------------- 1 | import * as ReactBootstrap from 'react-bootstrap' 2 | import styled, { css } from 'styled-components' 3 | 4 | const backgroundColor = props => 5 | props.$lightbg2 ? 6 | props.theme.primary25 7 | : props.$lightbg ? 8 | props.theme.primary15 9 | : props.theme.primary8 10 | 11 | const backgroundAndBorderColor = props => props.theme.darkMode && css` 12 | background-color: ${backgroundColor}; 13 | color: #f8f8f2; 14 | ` 15 | 16 | const Card = styled(ReactBootstrap.Card)` 17 | ${backgroundAndBorderColor} 18 | ` 19 | 20 | const CardFooter = styled(ReactBootstrap.Card.Footer)` 21 | ${backgroundAndBorderColor} 22 | ` 23 | 24 | const CardBody = styled(ReactBootstrap.Card.Body)` 25 | ${backgroundAndBorderColor} 26 | ` 27 | 28 | const ListGroupItem = styled(ReactBootstrap.ListGroupItem)` 29 | ${backgroundAndBorderColor} 30 | ` 31 | 32 | const Button = styled(ReactBootstrap.Button)` 33 | ${props => props.theme.darkMode && css` 34 | ${props => (props.variant === 'primary' || !props.variant) && css` 35 | background-color: ${props => props.theme.primary50}; 36 | border-color: ${props => props.theme.primary}; 37 | color: #f8f8f2; 38 | `} 39 | `} 40 | ` 41 | 42 | const ModalHeader = styled(ReactBootstrap.Modal.Header)` 43 | ${backgroundAndBorderColor} 44 | ` 45 | 46 | const ModalBody = styled(ReactBootstrap.Modal.Body)` 47 | ${backgroundAndBorderColor} 48 | ` 49 | 50 | export * from 'react-bootstrap' 51 | export { 52 | Button, 53 | Card, 54 | CardBody, 55 | CardFooter, 56 | ListGroupItem, 57 | ModalHeader, 58 | ModalBody 59 | } -------------------------------------------------------------------------------- /src/components/common/CollectionList.js: -------------------------------------------------------------------------------- 1 | import { Col, Container, Spinner } from '../bootstrap-osu-collector'; 2 | import InfiniteScroll from 'react-infinite-scroll-component'; 3 | import ReactPlaceholder from 'react-placeholder/lib'; 4 | import CollectionCard from './CollectionCard'; 5 | 6 | const CollectionList = ({ collections, hasMore, loadMore }) => { 7 | return ( 8 | 9 | 15 | 16 | 17 | } 18 | endMessage={ 19 |

20 | Nothing more to show. 21 |

22 | } 23 | className='row' 24 | > 25 | {collections.map((collection, i) => 26 | 27 | 34 | {collection && 35 | 36 | } 37 | 38 | 39 | )} 40 | 41 | 42 | ) 43 | } 44 | 45 | export default CollectionList; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "osucollector", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@paypal/react-paypal-js": "^7.5.0", 7 | "@stripe/react-stripe-js": "^1.4.1", 8 | "@stripe/stripe-js": "^1.17.1", 9 | "@testing-library/jest-dom": "^5.14.1", 10 | "@testing-library/react": "^11.2.7", 11 | "@testing-library/user-event": "^12.8.3", 12 | "axios": "^0.21.4", 13 | "bootstrap": "^5.0.2", 14 | "colord": "^2.9.1", 15 | "config": "^3.3.6", 16 | "country-flag-icons": "^1.4.6", 17 | "md5": "^2.3.0", 18 | "moment": "^2.29.1", 19 | "prop-types": "^15.7.2", 20 | "query-string": "^7.0.1", 21 | "react": "^17.0.2", 22 | "react-bootstrap": "^1.6.1", 23 | "react-bootstrap-floating-label": "^1.6.0", 24 | "react-bootstrap-icons": "^1.5.0", 25 | "react-confetti": "^6.0.1", 26 | "react-dom": "^17.0.2", 27 | "react-dropzone": "^11.3.4", 28 | "react-google-charts": "^3.0.15", 29 | "react-icons": "^4.2.0", 30 | "react-infinite-scroll-component": "^6.1.0", 31 | "react-json-view": "^1.21.3", 32 | "react-placeholder": "^4.1.0", 33 | "react-responsive": "^9.0.0-beta.4", 34 | "react-router-bootstrap": "^0.25.0", 35 | "react-router-dom": "^5.2.0", 36 | "react-scripts": "4.0.3", 37 | "react-svg": "^14.0.11", 38 | "react-truncate": "^2.4.0", 39 | "react-use": "^17.3.1", 40 | "styled-components": "^5.3.3", 41 | "web-vitals": "^1.1.2" 42 | }, 43 | "scripts": { 44 | "start": "react-scripts start", 45 | "build": "react-scripts build", 46 | "eject": "react-scripts eject" 47 | }, 48 | "eslintConfig": { 49 | "extends": [ 50 | "react-app", 51 | "react-app/jest" 52 | ] 53 | }, 54 | "browserslist": { 55 | "production": [ 56 | ">0.2%", 57 | "not dead", 58 | "not op_mini all" 59 | ], 60 | "development": [ 61 | "last 1 chrome version", 62 | "last 1 firefox version", 63 | "last 1 safari version" 64 | ] 65 | }, 66 | "proxy": "https://osucollector.com", 67 | "devDependencies": { 68 | "eslint": "^7.32.0", 69 | "eslint-plugin-react": "^7.24.0" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/components/common/ModeCounters.js: -------------------------------------------------------------------------------- 1 | import osuPng from './mode-osu.png' 2 | import taikoPng from './mode-taiko.png' 3 | import maniaPng from './mode-mania.png' 4 | import catchPng from './mode-catch.png' 5 | import { Image } from '../bootstrap-osu-collector' 6 | import styled, { css } from 'styled-components' 7 | 8 | const ModeImage = styled(Image)` 9 | width: 18px; 10 | height: auto; 11 | ${props => props.theme.darkMode ? css` 12 | filter: invert(1) opacity(${props => props.muted ? '10%' : '100%'}) 13 | ` : css` 14 | filter: invert(0) opacity(${props => props.muted ? '20%' : '100%'}) 15 | `} 16 | ` 17 | 18 | const ModeLabel = styled.small` 19 | ${props => props.theme.darkMode ? css` 20 | color: ${props => props.muted ? '#444' : '#ccc'} 21 | ` : css` 22 | color: ${props => props.muted ? '#ccc' : '#000'} 23 | `} 24 | ` 25 | 26 | function ModeCounters({ collection, className }) { 27 | 28 | return ( 29 |
30 |
31 | {[ 32 | [osuPng, 'osu'], 33 | [taikoPng, 'taiko'], 34 | [maniaPng, 'mania'], 35 | [catchPng, 'fruits'] 36 | ].map(([modePng, mode]) => { 37 | let muted = true 38 | if (collection.modes && collection.modes[mode]) { 39 | muted = false 40 | } 41 | return ( 42 |
43 | 49 | 50 | {muted ? 0 : collection.modes[mode]} 51 | 52 |
53 | ) 54 | })} 55 |
56 |
57 | ) 58 | } 59 | 60 | export default ModeCounters 61 | -------------------------------------------------------------------------------- /src/components/recent/Recent.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { Card, Alert, Container } from '../bootstrap-osu-collector'; 3 | import { getRecentCollections } from '../../utils/api' 4 | import CollectionList from '../common/CollectionList'; 5 | 6 | function Recent() { 7 | 8 | const [collectionPage, setCollectionPage] = useState(null); 9 | const [collections, setCollections] = useState(new Array(18).fill(null)); 10 | const [error, setError] = useState(null) 11 | 12 | useEffect(() => { 13 | let cancel 14 | getRecentCollections(undefined, 18, c => cancel = c).then(_collectionPage => { 15 | setCollectionPage(_collectionPage) 16 | setCollections(_collectionPage.collections) 17 | }).catch(console.log) 18 | return cancel 19 | }, []) 20 | 21 | const loadMore = async () => { 22 | try { 23 | const _collectionPage = await getRecentCollections(collectionPage.nextPageCursor, 18) 24 | setCollectionPage(_collectionPage) 25 | setCollections([...collections, ..._collectionPage.collections]) 26 | } catch (err) { 27 | setError(err) 28 | } 29 | } 30 | 31 | return ( 32 | 33 | 34 | 35 |

36 | Recent Collections 37 |

38 | {error ? 39 | 40 |

41 | Sorry, an error occurred with the server. Please try refreshing the page. Error details: 42 |

43 |

{error.toString()}

44 | 45 | : 46 | 51 | } 52 | 53 | 54 | 55 | ) 56 | } 57 | 58 | export default Recent; -------------------------------------------------------------------------------- /src/components/login/EnterOtp.js: -------------------------------------------------------------------------------- 1 | import { Card, Container, FormControl } from '../bootstrap-osu-collector' 2 | import md5 from 'md5' 3 | import PropTypes from 'prop-types' 4 | import * as api from '../../utils/api' 5 | import { useHistory } from 'react-router-dom' 6 | 7 | function EnterOtp({ authX, setUser }) { 8 | const history = useHistory(); 9 | 10 | const onOtpChanged = async (event) => { 11 | const inputString = event.target.value 12 | if (inputString.length == 0 || inputString.length > 4) { 13 | console.log('inputString: ' + inputString) 14 | return 15 | } 16 | 17 | const otp = Number(inputString) 18 | if (isNaN(otp) || !otp) { 19 | console.log('otp: ' + otp) 20 | return 21 | } 22 | 23 | const y = md5(authX) 24 | console.log('otp: ' + otp) 25 | console.log('x: ' + authX) 26 | console.log('y: ' + y) 27 | 28 | // Submit 29 | const res = await api.submitOtp(otp, y) 30 | console.log(res.status) 31 | if (res.status === 200) { 32 | console.log('Logged in!') 33 | // Get user 34 | const user = await api.getOwnUser(); 35 | setUser(user); 36 | history.push('/') 37 | } else if (res.status === 440) { 38 | alert('Login expired, please try to log in again.') 39 | console.log('Login expired, please try to log in again.') 40 | history.push('/') 41 | } else { 42 | console.log('OTP auth failed.') 43 | } 44 | } 45 | 46 | return ( 47 | 48 | 49 |

One time password

50 |
51 |

After authenticating through the osu! website, osu!Collector should show you a one time password.
52 | Please enter it here to finish logging in.

53 |
54 | 62 | 63 | 64 | ) 65 | } 66 | 67 | EnterOtp.propTypes = { 68 | authX: PropTypes.string 69 | } 70 | 71 | export default EnterOtp 72 | -------------------------------------------------------------------------------- /src/utils/misc.js: -------------------------------------------------------------------------------- 1 | const truncate = (inputString, length) => inputString.length > length ? 2 | inputString.substring(0, length) + '...' : 3 | inputString 4 | 5 | const secondsToHHMMSS = (sec_num) => { 6 | var hours = Math.floor(sec_num / 3600) 7 | var minutes = Math.floor((sec_num - (hours * 3600)) / 60) 8 | var seconds = sec_num - (hours * 3600) - (minutes * 60) 9 | 10 | if (hours < 10) { hours = "0" + hours } 11 | if (minutes < 10 && hours > 0) { minutes = "0" + minutes } 12 | if (seconds < 10) { seconds = "0" + seconds } 13 | return hours > 0 14 | ? hours + ':' + minutes + ':' + seconds 15 | : minutes + ':' + seconds 16 | } 17 | 18 | const clamp = function (num, min, max) { 19 | return Math.min(Math.max(num, min), max) 20 | } 21 | 22 | const bpmToColor = (bpm, darkMode) => { 23 | const _bpm = clamp(Math.floor(bpm / 10) * 10, 150, 300) 24 | if (_bpm == 150) return '#93e2ff' 25 | if (_bpm == 160) return '#80dbff' 26 | if (_bpm == 170) return '#6bd3fe' 27 | if (_bpm == 180) return '#55cbff' 28 | if (_bpm == 190) return '#39c3ff' 29 | if (_bpm == 200) return '#00bbff' 30 | if (_bpm == 210) return '#00a8ea' 31 | if (_bpm == 220) return '#0095d6' 32 | if (_bpm == 230) return '#0082c2' 33 | if (_bpm == 240) return '#0070ae' 34 | if (_bpm == 250) return '#005f9b' 35 | if (_bpm == 260) return '#004e88' 36 | if (_bpm == 270) return '#003e76' 37 | if (_bpm == 280) return '#002e64' 38 | if (_bpm == 290) return '#002052' 39 | if (_bpm == 300) return darkMode ? '#fff' : '#000000' 40 | return '#000000' 41 | } 42 | 43 | const starToColor = (star, darkMode = false) => { 44 | const _star = clamp(Math.floor(star), 1, 10) 45 | if (_star == 1) return '#6EFF79' 46 | if (_star == 2) return '#4FC0FF' 47 | if (_star == 3) return '#F8DA5E' 48 | if (_star == 4) return '#FF7F68' 49 | if (_star == 5) return '#FF4E6F' 50 | if (_star == 6) return '#A653B0' 51 | if (_star == 7) return '#3B38B2' 52 | if (_star == 8) return darkMode ? '#fff' : '#000000' 53 | if (_star == 9) return darkMode ? '#fff' : '#000000' 54 | if (_star == 10) return darkMode ? '#fff' : '#000000' 55 | return darkMode ? '#fff' : '#000000' 56 | } 57 | 58 | const useFallbackImg = (ev, fallbackImg) => { 59 | if (ev.target.src === fallbackImg) { 60 | return 61 | } 62 | ev.target.err = null 63 | ev.target.src = fallbackImg 64 | } 65 | 66 | export { 67 | truncate, 68 | secondsToHHMMSS, 69 | clamp, 70 | bpmToColor, 71 | starToColor, 72 | useFallbackImg 73 | } 74 | -------------------------------------------------------------------------------- /src/components/common/EditableTextbox.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import { Button, Card } from '../bootstrap-osu-collector' 3 | import styled, { css } from 'styled-components' 4 | import './EditableTextbox.css' 5 | 6 | const ClickableCard = styled(Card)` 7 | ${props => props.$isClickable && css` 8 | cursor: pointer; 9 | &:hover { 10 | background-color: ${props => props.theme.darkMode ? '#ffffff20' : '#00000020'}; 11 | } 12 | `} 13 | ` 14 | 15 | function EditableTextbox({ value, isEditable, submit }) { 16 | const [editing, setEditing] = useState(false) 17 | const [unsavedValue, setUnsavedValue] = useState(value) 18 | 19 | const startEdit = () => { 20 | if (isEditable) { 21 | setEditing(true) 22 | } 23 | } 24 | 25 | const cancelEdit = () => { 26 | setEditing(false) 27 | } 28 | 29 | const finishEdit = () => { 30 | setEditing(false) 31 | submit(unsavedValue) 32 | } 33 | 34 | if (editing) { 35 | return ( 36 |
37 |