Giter Club home page Giter Club logo

osu-web's Introduction

osu!web

Tests Lint Crowdin dev chat

The browser-facing portion of osu!.

Requirements

  • A PHP 8.3 environment
  • MySQL 8.0+
  • Elasticsearch

Getting Started

See the setup guide for a rundown on how to get a development environment up.

Contributing

We welcome all contributions, but keep in mind that we already have the full site designed (mock-ups). If you wish to work on a new section, please open a ticket and we will give you what you need from a design perspective to proceed. If you want to make changes to the design, we recommend you open an issue with your intentions before spending too much time, to ensure no effort is wasted.

If you wish to help with localisation efforts, head over to crowdin. If you're unsure of what you can help with, check out the list of open issues. (especially those with the "good first issue" label).

Please see CONTRIBUTING.md for information about the code standards we expect from pull requests.

While we have standards in place, nothing is set in stone. If you have an issue with the way code is structured; with any libraries we are using; with any processes involved with contributing, please bring it up. We welcome all feedback so we can make contributing to this project as pain-free as possible.

We love to reward quality contributions. If you have made a large contribution or are a regular contributor, you are welcome to submit an expense via opencollective. If you have any questions, feel free to reach out to peppy before doing so.

Seeking Help

If you need help with anything, you have two options:

Create an Issue

If you have something you want to discuss in detail, or have hit an issue which you believe others will also have in deployment or development of the system, opening an issue is the best way to get help. It creates a permanent resource for others wishing to contribute to conversation. Please make sure to search first in case someone else has already addressed the same issue!

Discord

Alternatively, you can join the development discord for assistance.

Licence

osu!web is licensed under AGPL version 3 or later. Please see the licence file for more information. tl;dr if you want to use any code, design or artwork from this project, attribute it and make your project open source under the same licence.

Please note that this does not cover the usage of the "osu!" or "ppy" branding in any software, resources, advertising or promotion, as this is protected by trademark law.

osu-web's People

Contributors

bdach avatar cl8n avatar dependabot[bot] avatar fajar13k avatar gagahpangeran avatar haytsir avatar hughp135 avatar jacobvm04 avatar joehuu avatar kj415j45 avatar leonekmi avatar liquidpl avatar megaapplepi avatar nanaya avatar nekodex avatar notbakaneko avatar peppy avatar rayriffy avatar reesebiz avatar rockroller01 avatar shortthu avatar smoogipoo avatar swekka avatar teknoabu avatar thepoon avatar tpgpl avatar tsunyoku avatar tt-auto avatar tybug avatar venix12 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

osu-web's Issues

Quick Question

How would I go about making a user supporter from the Vagarant SSH?

CSS Major Overhaul

As I (not so) recently learned, I've been violating a lot of efficient css guidelines. I've been trying to reduce the problem by implementing BEM in a few places but it's still pretty much over my head (and I think I did it incorrectly).

At least newly written CSS should conform the guidelines and going forward a major rewrite will save a lot of headaches (or so I hope).

Another thing is it's slightly easier doing BEM with LESS (which I just discovered last week):

.block {
  ...
  &__element { ... } // will turn into .block__element

  &--modifier { ... } // will turn into .block--modifier
}

Also, all javascripts related classes should always be prefixed with js- so no one (mainly me) won't accidentally break javascripts by moving/renaming/adding things around.

Lastly, visiting the site shouldn't double as system stability test (store products listing page, for example, causes my laptop to go on fire by having it open for a while).

tl;dr: I suck at CSS. Someone pls2halp.

Ability to change store orders from admin page

Right now I'm making changes manually at a database level when a user requests an address or t-shirt design/size changes. We need the ability to edit orders from the admin page (/store/admin/).

Requirements:

  • Ability to edit address.
  • Ability to change product to another product of same value (different size/design) using a dropdown.
  • Changes should be saved instantly.
  • Should only be allowed for orders in a "paid" state. Shipped or Delivered orders should not be changeable.
  • Remaining stock should be checked (products without stock shouldn't be shown in the dropdown) and updated on change.

Bounty offered: 50

User card/menu design

Trialling some larger bounties. This one involves implementing a design concept fully.

This is the user card and menu, which will appear when you click your avatar/username at the top-right of any page.

Requirements:

  • Implement design with interaction logic (should appear and dim page when avatar is clicked).
  • No need to actually connect up the data source; we need to do some further work for this.
  • Follow existing styling naming standards.
  • Reuse existing styles where possible.

Bounty offered: 60

As per bounty guidelines, it is recommended that you claim this issue if you are serious about it.

Ask away for further clarifications.

PSD: http://puu.sh/jZtBI/2a69c21449.psd

Long nicknames consisting of one word get cut

As Sulker@Slack noticed, nicks bigger than the current limit will get cut off on jizz forums, looking quite bad.

Short-term solution is easy: change the infobox from 120px to 140px. I don't know if there's people with bigger nicks than me, and if it would work in them, though.

Duplicate entry 0 for key primary

I found this when trying to create more than one user (with the first one's ID being 0). Now I had it happen trying to add a second address. It says 'failed loading requested page', and examining the error, it says
'QueryException in Connection.php line 638:
SQLSTATE[23000]: Integrity constraint violation: Duplicate entry '0' for key 'PRIMARY' (SQL: insert into osu_store.addresses (first_name, last_name, street, city, state, zip, country_code, phone, updated_at, created_at) values (Test2, TEST2NAME, Street Number 2, Holidays, State, Post Code, No, 666333999, 2015-09-01 22:01:51, 2015-09-01 22:01:51))'

This is probably a matter of a misconfigured key in the database created automatically

Sample Data

It would be really convenient for there sample data for people working on the site. When people clone the repo it should available from the get-go. Preferably already on the site too, and not just in the DB.

Looking for:

  • Beatmaps
  • Beatmap Sets
  • Users
    • User Stats
  • Forums
    • Forum Posts
  • Wiki
  • Tournaments
  • Store
    • Store Items
  • Changelog

Profile cover transparent when not yet loaded

If the profile cover image isn't loaded yet it will be completely transparent, showing the page background. This is most apparent when previewing profile covers.

Since it's not quite possible to make everything load instantly every time for everyone, I would like to propose having any grayscale colour (whichever feels best) below the profile cover so that it's not as ugly when this appears.

osuwebprofilecover_empty

Edit: This also affects the profile cover on the user card.

Store: Back button is shown with no history present

In the header of the osu!store, there's this back button...which, as you might think, should get you back to the frontpage of the store.

And well, it does, but only if you were on the frontpage before.

If not, the back button is still shown, but doesn't work as there is no history present you could jump back to.

Best way to reproducing this is visiting the store over ppy's last blogpost (just click on "available" in the first list item)

Not really a big issue, it might just confuse people because it does nothing at that state.

User card design: brightness & gradient

Creating this issue after these 2 comments on blog.ppy.sh.

There's 2 things I would like to be changed about the user card design.

  1. Removing the gradient on it.
    The reason is simply that it feels out of place on the new osu!web, as there are no gradients used anywhere else on the website (to my knowledge).
  2. Making the darkning overlay that is over the profile cover on the user card less strong.
    Yes, there is white text right above it, so you probably still want it to be a bit darker so that the user can clearly see what you want to the user to see, however, as the page is already dimmed, and most of what isn't dimmed is pure white, it feels too dark.

Changing
transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0px, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0% 0%
to
transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 100%) repeat scroll 0% 0%
is more or less what I think feels right.

Here's a comparison of the current user card and one where I quickly edited it to my liking, which is the idea I'm proposing here.

osuwebusercard_01_current
osuwebusercard_02_proposed

Add google analytics support

  • Should be able to specify a GA identifier in .env.
  • Should use latest include method (async load) and match the way other js is being handled in this project as closely as possible.
  • Should only be used when present.

Should be a fun task for someone looking to get familiar with the framework.

Bounty offered: 5

Add a method to enlarge forum images to full size.

Images are scale-to-fit width (similar to old forum) but there's no way to expand them out.

Either click-to-expand (in-line, similar to old forum, seemed to work well) or click to load in new tab/lihgtbox.

I'm a fan of the expand in-line since it doesn't break the UX.

Adding json with images to a product's images_json throws an ErrorException

A product in the store has a json-encoded list of image URLs added to its images_json column (tried with ["https://upload.wikimedia.org/wikipedia/en/c/c7/GlennRhee.jpg"] and ["http://lorempixel.com/500/500/?76327","http://lorempixel.com/500/500/?34281","http://lorempixel.com/500/500/?36519"] )

When loading the page of said product, a 'Read error!' will stop it from working.Full stack
By the mentioned line, I guess it's a problem with getting the image size cached

First user ID will make the application fail

When you execute the instructions to create a new user on the README, it will do so without any problems. You can login and your nick will appear in the respective part.
However, user_id with values 0 and 1 will fail (binary comparison with integers?), and if you go to the userpage it will give an exception ( https://gist.github.com/comentarinformal/42f94d68232fe63b47dd ).

If you manually edit your user_id value in the mysql database to 2,3, or anything, it will work as expected, showing the usual jizz profile.

Get graphing library set-up and working with project

We are looking to create graphs like this in the profile section (and other places on the site).

As a test of how I want to move forward with development, I'm creating this issue as an open request. Whoever completed it will be rewarded (supporter tag / merchandise / money, not finalised yet but we'll figure it out).

What needs to be done:

  • Choose a charting library. Last I checked, Highcharts was looking pretty good, but feel free to look through others and suggest one. Let's reach a consensus on this before going any further.
  • Create a sample page with a graph exactly matching the styling in the screenshot above. Initially we will be using these on profile pages.
  • Make sure it handles the responsive design correctly.

Your code should make it easy for us to hook up the input data to the graph.

Bounty offered: 60

Skin System

For Marcin

Pages:

  • Skin listing page. Should allow users to view all public skins (and also all of their own skins).
  • Skin information page. What you get when you click a listing entry. Gives you options to clone the skin (make your own copy of it to further modify), download, watch preview videos etc.
  • Skin creation page. Choose skin name, description, preview image, upload skin elements.

Things to consider:

  • Skins should be versioned. A creator should be able to easily add a new version of a skin based on the previous one.
  • Users should be able to set private or public for a skin, and also decide whether others are allowed to use their elements in further skins.
  • When creating a skin from scratch, a user will be able to upload an element of choose from a listing of all elements from skins which have allowed use of individual elements.
  • Eventually we'll want all the skin.ini settings also modifiable via a web interface.

Figure out why addresses are getting trimmed

We've had ongoing cases where store addresses are getting trimmed. This happens for some users when they enter a street address or postcode that contains multiple words, where some words are removed completely.

We've added logging to try and track this down, but if anyone has an idea of how this could happen (and can cite in the code where the issue is, or submit a pull request to fix it), that would be pretty cool.

As it has caused a few orders to go missing or returned-to-sender, I'm willing to offer a bounty for a solution to this one.

Note that this does not always happen. It is likely a specific browser or workflow which causes it to trigger.

What needs to be done:

  • Figure out why the street / postcode (possibly others) fields in osu_store.addresses occasionally get trimmed.

Bounty offered: 50

Loggng in via in topic reply feature

Was thinking of a feature which will make you being able to login when replying to a topic if not logged in.(If scrolled all the way down to the bottom of a thread). I was thinking of hopefully clicking a guest avat box in the reply prompt would open the login prompt to login and continue where we was last positioned
2015-09-04_23-39-16

Would be possibly easier to login if scrolled all the way to the bottom without access the to the top header (without clicking the fast scroll button I guess)

Flyte's Task List

Comment on this thread if you have anything you need from flyte. I'll update the list.

  • MWC winner badges (1st 2nd 3rd).
  • Design placeholder cover art from cYsmix collab tracks.
  • New profile pages need a section which shows all scores by user (recent ones first).
  • fix D rank (non-comic sans)
  • add support for other payment options to new store

@arflyte ask if unsure about any of these. I'm using this as a place to keep track so you have an idea of what you need to do.

osu!status page design

Trialling some larger bounties. This one involves implementing a design concept fully.

This is a stand-alone status page, which will be replacing http://stat.ppy.sh

Requirements:

  • Make a blade template to match the attached page style.
  • Follow existing styling naming standards.
  • Reuse existing styles where possible.
  • Write in a way that can easily have functionality hooked up at a later point (be consistent with class names, feel free to use place-holder foreach loops etc.)
  • The red "active incidents" area at the top is only visible when there's an active incident.
  • The world map is open to interpretation, but should have some form of interaction on hover of the visible player clusters.
  • Graph will be using the styling that results from #13, so you are welcome to add a placeholder (or use the latest available d3 version from that thread).
  • This graph shows both online users and score submissions. The two number boxes below are clickable and will change the graph's mode.
  • Any further visualisations added should also use d3.
  • Should be animation on the "Uptime" pie displays that tween as you change tabs.

Bounty offered: 350 (+150 for complete ready-to-connect React implementation with placeholder jsx datasource)

As per bounty guidelines, it is recommended that you claim this issue if you are serious about it.

If you are going to react it up, make sure to check out the profile page implementation for examples to follow.

Ask away for further clarifications.

PSD: http://puu.sh/jYocV/527581fc06.psd

pp not shown in user profiles

I may be blind, but probably not;
pp is not shown in user profiles

I guess this is very easy to implement as it exists in the old site.

Attached a page capture of rrtyui's user profile as an example.
enkcato

I have problems!

I tried running this but i keep getting http://puu.sh/kCmcM/6a26689188.png and everything is working also i found out the VM is 64-bit and my PC doesn't support 64 bit os'es on Virtualbox it only uses 32-bit how could i use a 32-bit os on this!?

Creating user: Fatal error

The following command fails for when I try to create a user:

hhvm artisan tinker

It throws a run-time error (for me using vagrant on OS X 10.10.4 via the install on the web [vagrant 1.7.4]), which is the following:

Fatal error: unexpected St13runtime_error: locale::facet::_S_create_c_locale name not valid

User - Group relationship seems to be broken

Disclaimer: I am a total Laravel noob ATM, so anything I say might be wrong.

While looking through the code, i noticed in App\Models\User.php:

...

    public function groups()
    {

        return $this->hasMany("App\Models\Group");
    }

...

and in App\Models\Group.php:

...

    public function users()
    {
        return $this->hasMany("App\Models\User");
    }

...

These method names suggest that this was meant to be a many-to-many relationship.

However, in Laravel docs it is stated that you need to implement it like this:

    // App/Models/User.php

    public function groups()
    {
        return $this->belongsToMany("App\Models\User");
    }    

    // App/Models/Group.php

    public function users()
    {
        return $this->belongsToMany("App\Models\Group");
    }

Right now, I can't seem to add an user to a group using the ORM (i succeeded in doing so by editing the database manually), and I can't add more than one user to a group.

base62_encode minor bug

The base62_encode function has a very small bug in it, but I thought I'd mention it. If you call base62_encode(0); it will return an empty string, and I assume that is not what you want. A simple fix is to use a do-while loop instead of a while loop, like so:

function base62_encode($input)
{
    $numbers = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $base = strlen($numbers);

    $output = '';
    $remaining = $input;

    do
    {
        $output = $numbers[($remaining % $base)].$output;
        $remaining = floor($remaining / $base);
    } while ($remaining > 0);

    return $output;
}

Userpage's new width can break userpage graphics

This might end up being one of those "oh well we're stuck with it" things, but maybe something can be done about it. The new me! tabs on profiles have a smaller width than their old-web counterparts, causing split-image userpage header graphics to break.

Some images for reference:

Old Userpages:
old userpage example
New me! tab:
New userpage example

This affects the desktop version and the mobile version at certain widths. I have had them appear correctly at some elongated widths in mobile mode, but this should be expected due to it's dynamic width.

To give credit, Sulker on the osu!dev slack found this, and I investigated it further with him. We found one possible solution was to expand the profiles out by 100px on desktop, but this does not fix the issues on mobile.

Files Not Found when running gulp

When running ./node_modules/.bin/gulp I am getting multiple file not found log entries:

[02:29:21] Merging: resources/assets/js/messages.js
[02:29:21] File not found: bower_components/jquery-ujs/src/rails.js
[02:29:21] File not found: bower_components/jquery-timeago/jquery.timeago.js
[02:29:21] File not found: bower_components/jquery-zoom/jquery.zoom.js
[02:29:21] File not found: bower_components/history.js/scripts/bundled-uncompres
sed/html5/jquery.history.js
[02:29:21] File not found: bower_components/ResponsiveSlides.js/responsiveslides
.js
[02:29:21] gulp-notify: [Error running notifier] Could not send message: not fou
nd: notify-send
[02:29:21] Finished 'scripts' after 250 ms
[02:29:21] Starting 'coffee'...
[02:29:21] Running CoffeeScript: resources/assets/coffee/osu!live.coffee, resour
ces/assets/coffee/osu_common.coffee, resources/assets/coffee/turbolinks-mod.coff
ee, resources/assets/coffee/bbcode.coffee, resources/assets/coffee/main.coffee,
resources/assets/coffee/store.coffee, resources/assets/coffee/forum.coffee, reso
urces/assets/coffee/forum/post-box.coffee, resources/assets/coffee/forum/topic-a
jax.coffee, resources/assets/coffee/ujs-common.coffee, resources/assets/coffee/b
ootstrap-modal.coffee, resources/assets/coffee/login-modal.coffee, resources/ass
ets/coffee/logout.coffee, resources/assets/coffee/shared.coffee
[02:29:22] gulp-notify: [Laravel Elixir] CoffeeScript Compiled!
[02:29:22] Finished 'coffee' after 671 ms
[02:29:22] Starting 'browserify'...
[02:29:22] Running Browserify: ./resources/assets/js/index.js
[02:29:22] Running Browserify: ./resources/assets/js/jsx/modding_react.jsx
[02:29:22] Running Browserify: ./resources/assets/js/jsx/profile_page.jsx
[02:29:22] gulp-notify: [Error in notifier] Error in plugin 'gulp-notify'
not found: notify-send
[02:29:25] Finished 'browserify' after 3.8 s
[02:29:25] Starting 'version'...
[02:29:25] Versioning: public/css/app.css, public/js/app.js, public/js/bundle.js
, public/js/messages.js, public/js/modding_react.js, public/js/react/profile_pag
e.js, public/js/vendor.js
[02:29:25] File not found: public/css/app.css
[02:29:26] Finished 'version' after 220 ms

Disallow double-posting on forum

  • Reply dialog should be visibly disabled with a message in its place telling user to edit last post if they want to add more content.
  • A double post should be allowed after n days from original post (let's start with 3, but this is probably best a definable constant).

Bounty offered: 60

Installation failure due to missing files

While most of the installation is done automatically by 'vagrant up', there is a file (/vagrant/logs/nginx.log) that is not created, and makes nginx unable to start, making the rest of the installation fail.
When created, the next missing folder is (/data/osu!web/)bootstrap/cache; once you create said folder, the rest of the installation goes without a problem.

(Of course, you can create then yourself via ssh and then vagrant provision, but to set up PuTTY you have to migrate the private key Vagrant generates in puttygen, then save it somewhere, then set it as auth, which greatly differs from the four-steps installation guide.)

Hovering Over 8 Covers Preview Feature

Hey, I really think this would be a great feature. By hovering over an image it just shows your cover as that image for a preview. I really wouldn't mind making a pull request for this as I can do it.

Wiki page template

wiki page template

Trialling some larger bounties. This one involves implementing a design concept fully.

This is the wiki page template, which will be housing wiki articles currently found at http://osu.ppy.sh/wiki/

Requirements:

  • Make a blade template to match the attached page style.
  • Follow existing styling naming standards.
  • Reuse existing styles where possible.
  • The left menu should have a closed and open state (both shown in the template).
  • The left menu should follow the screen when scrolling, so it is always openable using a single click.

Bounty offered: 50

As per bounty guidelines, it is recommended that you claim this issue if you are serious about it.

Ask away for further clarifications.

PSD: http://puu.sh/jZ359/b67cf63589.psd

Minor: User and Login dropdown 'glitches' when toggled too quickly

#50 (comment)

Found an issue - if you repeatedly click on your avatar to show/hide the dialog too fast, the page progressively gets dimmer and dimmer.

Turns out it's a minor issue already in existence (not introduced with my commit) related to the login modal.

Other than that, it doesn't block user experience in general usage. Don't consider it anywhere near important, fix other things first.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.