dueet-live / frontend

Play a piano duet with your friend online in real-time!

Dueet Live Frontend

The frontend of Dueet Live.

Setup guide

1. Clone the repository

2. Run

   cp .env.example .env

   and fill in the environment variables based on how the backend is set up.

3. Install dependencies

   yarn install

4. Run the app in development mode

   yarn start

frontend's Issues

Game lobby for multiplayer mode

UI improvements

Duet

• Let the user know when the other user has pressed ready - #73
• Highlight the user avatar when the user is playing #67

Solo

General

• Disable zoom, user selection
• Add sound effect/notifications when other user join a room / leave a room
• Make text responsive
  

Choose Primo / Secondo

Note feedback not showing on traditional piano

Make the navbar shorter on mobile

MouseLeave event not captured

Did not investigate further, but using on desktop, if you just click on a note and drag to other notes quickly, sometimes the note remains held down.

Hmm there should be a mouseLeave event once your mouse leave a key, let me do more testing

Originally posted by @Na-Nazhou in #2 (comment)

After further testing, I observed that it only occurs when I'm on FireFox, Chrome is okay to me...

Play song

Clients should be able to tell the server that they are ready, then allow the server to tell them to start

Feedback for each note played

Good, Bad, Not bad

Add App Logo

• and update on steps website too

Scoring

Solo mode

Basic ending screen

Add GA

Piano keyboard mappings

Currently it is a random hard coded map. Also, it should automatically update after octave shift.

Can refer to this https://github.com/kylestetz/AudioKeys

Revamp Home page

Settings screen

Game using traditional keyboard lagging

Probably because the keyboard keeps rerendering

Improve game end view

here are some of the current designs

but we should definitely show the accuracy/stars in a more obvious way

Find better ways to differentiate mobile & desktop

App tutorial

This should show up for users first visiting our site.
Maybe add a button on the home page, this show up when user clicks on it as well.

Power user mode

To be included as a choice in game lobby #73

How to cleanup the progress bar

I've checked the code i think i've cleaned up it properly, but apparently its not cleaned up. Any thoughts?

Prompt user to change to landscape mode on mobile

Piano won’t auto resize when orientation changes on iOS 13 iPhone X

Touch events on mobile

Also, testing it on mobile, I'm having issues holding down a key; I can only tap on keys, which might be a problem, When trying to long tap a key as a hold, it ends up selecting the text instead..

Probably need another library for handling gestures on mobile. The default touchEvents might be insufficient. Its also a bit hard to test on browser device simulator sometimes the behaviour is a bit different from what you'll see on real devices.

Originally posted by @Na-Nazhou in #2 (comment)

Make choosing genre / song interface nicer

Might be good to let the user listen to the song while choosing

Resizable piano

Resize still doesnt seem that great yet, we will definitely need to work on it to improve it in the future. ideally the keyboad should always take up the (width of screen - some padding) i think

Yea I did not manage to find a good formula to calculate the exact range of keys to render given the screen width (because the white key and the black key have different widths and when you shift octave, the total width might change). I just did a rough calculation first, will investigate further.

Originally posted by @Na-Nazhou in #2 (comment)

Revamp game lobby

Show notif when choosing realistic keyboard