albshin / ddrsongdraw

🎲 Randomly draw songs to play from the arcade game DanceDanceRevolution

Song Draw

Song Draw is a progressive web app that randomly "draws" songs to play from the arcade game DanceDanceRevolution. This app is inspired by DDRCardDraw but without a focus on tournament features such as "banning" and "pocket picking".

🌐 Supported Browsers

Song Draw currently utilizes bleeding edge features not supported in many legacy browsers. The project is currently set to support >1%, not dead, not ie 11, not op_mini all which includes the following browsers:

Desktop

• Chrome 81+
• Firefox 77+
• Edge 18+
• Safari 13.1+
• Samsung 11.1+

Mobile

• Chrome for Android
• UC Browser (not tested)
• iOS Safari 12.2+ (not tested)

However, please be aware that this application is developed to be mobile-first in mind. Please view the web page in mobile mode for an optimal experience.

This application has currently been mainly tested using Chrome for Android. Please report any incompatability issues found while using any other mobile browsers.

🧰 Development

Song Draw is developed using TypeScript and React.

1. Run npm install or yarn install.
2. Run npm run dev or yarn dev to start the development server.
3. Navigate to localhost:1234.

ddrsongdraw's Issues

Page does not load when built for production

When built for production in Webpack, the page currently displays the following error:

Fix "Pull to Draw" triggering while swiping on charts

With the new "Pull to Draw" functionality being added and written by hand and not using react-use-gesture, you are able to trigger the pull to draw while swiping left/right on a ChartListItem.

This functionality should be disabled while swiping left or right on a ChartListItem.

Assets will not load correctly when refreshing page inside nested route

Reproduction

1. Navigate to nested route (ex. /settings/about)
2. Refresh page
3. Navigate back to index and draw songs

Description

Reach Router sets the new "root" to /settings instead of /. This causes the browser to attempt to fetch assets from /settings/assets instead of /assets. Potential fix is to use a direct URL (ex. https://draw.goforthe.top/assets instead of a relative one like we are using right now. In addition, the jacket image should be contained in a div with an img inside of it for accessibility reasons instead of being a background image like it is right now.

Back Button on Settings page does not work as intended

Issue

The back button on the Settings page currently navigates you backwards as needed when entering the Settings page from either the Home screen or the Browse page. However, if you click into the About page from the Settings page, the last known page will become the About page. This will prevent you from going back to the app itself.

Cannot Glob Import Images

Previously in Parcel 1, you were able to glob import images and then use the said images (see docs).

However with Parcel 2, glob importing files is not supported at the moment. This affects the application as I am unable to display the jackets on drawn charts.

The suggested course of action is to migrate over to Webpack as Parcel has sufficiently served as a starting point for the application but no longer fits our needs.