coder13 / letscube

Race against cubers anywhere anytime

Let's Cube

This is a Progressive Web app written in Node.JS, Express, MongoDB, socket.io, react, and material-ui.

This project consists of a client and a server.

Development:

Make sure Node.JS, MongoDB, and redis are installed.

git clone https://github.com/coder13/letscube.git
cd letscube
npm install # installs pre-commit hook

Server

The server is split across 2 files, you can run them individually from the server directory after installing modules

cd server && npm install

npm run start:server # Starts the file server (not used for dev), auth, and some api requests
npm run start:socket # Run this in a separate terminal; Starts the socket.io server for all the realtime socket requests

Server

cd client && npm install && npm run start

For more on the internals and contributing, check out the wiki

letscube's Issues

Hitbox to click "logo" is too small

Please make it bigger by adding some padding 😃

Current and Best stats

Right now, the stat box below the times table only displays current mean / ao5 / ao12 stats.
This box needs to be improved to show current stats and best stats.

UI for verified users

"Verified" users are just users who have chosen to reveal their wca identity.
Their name needs to be rendered differently in the times table and in the chat (and maybe the user list) to denote when they are verified.
This isn't as necessary when showing their real name but when their username is their display name, their name should render differently.

This can be in the form of a different background, border, popover with wca id.

Edit previous times

Is your feature request related to a problem? Please describe.
Especially with manual time entry, someone might mistype and submit the wrong time.

Describe the solution you'd like
A way to click on your time in the times table to edit it. A dialog should pop up with a set to manual time entry with the time already set such that you can edit it.
You should also be able to toggle penalties.

Manual Time Entry

Add option on timer to manually enter times.

This should be toggle in the top left corner of the timer to switch the timer from timing to manual entry.
This should, when not disabled, show a text box letting the user enter a time in.
Buttons should be always present letter the user mark the time as a +2 or DNF

Detect when rooms get deleted

Right now, rooms get deleted through mongodb. This separation prevents the server or client from knowing if a room got deleted.
What we could do is let the client just update rooms every 5 minutes, not a fun solution.
We could also have the server watch every minute if a room got deleted. This would require it store in memory the list of room IDs and periodically check if a room got deleted.
We could instead just have the server send everyone the updated list of rooms every 2-5 minutes.

Leader was passed to AFK member

Describe the bug
The leader left and leader was auto-passed to someone who was afk, essentially killing the room.

To Reproduce
Pretty self-explanatory - just need someone who is AFK (and didn't click "Start Skipping"). If people are popping in and out RNG will eventually assign them as leader.

Expected behavior
Leader should only be assigned to someone who has a result for the last scramble? Vote elect a leader would be a more error proof system but I assume would be more dev work.

Kibitzing

Is your feature request related to a problem? Please describe.
Problem: users sometimes want to be present in a room but not compete.

Describe the solution you'd like
Users should be able to skip their turn

Additional context
This will be a fairly significant change to the data structure.
We will need to know who is relevant to wait to generate a new scramble.
While we do track users in the database, we'll need some sort of relevantUsers and use that to figure out who to wait for.

This code can also be used to solve #12

Make it easier to tell whether I've solved the current scramble

I've noticed that once you solve a scramble, it turns grey, along with the time. But I don't find that easy to tell on a glance, or easy to notice when it changes, on twist the web, the scramble disapeared after the solve, and when a new one popped up, you knew you had to solve again.

I feel like making the scramble disapear could work, especially when we can access previous scrambles, since as of now it is the only way to re scramble the cube. I've thought about making it a lighter grey, but I don't think we can do that in a way that we can both tell at a glance and it's easily readable.

Disable Chat Element for Anonymous Users

Is your feature request related to a problem? Please describe.
Users who are not logged in can still type messages and "send" them, though these messages are discarded and not actually sent.

Describe the solution you'd like
Just disable the chat element, such that they can see it exists, but it disallows interaction.

Describe alternatives you've considered
Removing it for anonymous users.

Audio cue for new scramble

Is your feature request related to a problem? Please describe.
It's easy to miss a new scramble when you're temporarily doing something else on another tab, for instance.

Describe the solution you'd like
Would be nice if the website could have an audio cue for people that aren't skipping to have an audio cue letting them know there's a new scramble.

Add keybinds

Add keybinds to mark if a solve is DNF / +2.
Also add keybinds maybe to switch between chatting and timing.
Maybe also a keybind to edit last solve.

Push notifications for new scrambles

We should try to add push notifications when a new scramble is received. I haven't yet looked into doing push notifications so I don't know how hard this is.

Add colors to the layout

Hey! I just tested LetsCube and for the first few minutes I was very confused with the layout. I wasn't able to tell apart the different sections, and I blame it onto the lack of colors.
Even if I really liked the platform, I feel like it has work to be done on the appearance.

Here are some suggestions:

This is an example of how I would re-structure the tables and color them with very light tones (awfully sketched in 2 secs on MsPaint, but the idea is there)

Moreover I'd like it more if the rolling stats were separated from the running session; I implemented that in my sketch moving the position of the "mean" row to be right above the personal stats sector (which, again, I found a bit confusing at first; but I blame myself for that.)

Thicker borders on the edges of each different sector, I reckon, would also help in the visualization.
(And by the way, on the 3-user test we carried out there was some unused space that is kind of bugging me, I marked it in this second sketch.)

Not sure what to do with the "Waiting for..." text, I think its location is unimportant.

Excuse the lousy drawings, that was just a quick way to convey my ideas.

As a sidenote, I'm actually very very happy that this platform is getting developed and I'll love to use it as my main one when it's finally released :)

Track number of wins

This might be a little difficult to get running well. We should do this incrementally so as to not put too much strain on the server. I might want to introduce a number on each attempt to declare the winner of that round. This could update on the server side after each person submits their attempt. The client can then just tally this up to figure out the winner.

Highlight winning means

The mean row should determine the best mean and highlight it.

Lock attempt ID with currently timing attempt

So right now, when someone submits a time, it'll just send it with the latest solve ID and the server will use that ID to update that attempt for that user.

What we can do is upon priming the timer, save that solve ID, then when the user is submitting a time, send that solve ID such that if a person is still timing when someone starts a new scramble, they submit the time for the correct solve.

Fix table layout for large number of users

Describe the bug
Table layout gets distorted when there's a lot of people in a room.

To Reproduce
Steps to reproduce the behavior:

1. Make a new room
2. Have a large amount of users join (~10-15 people)
3. Observe the table rows.

Expected behavior
User names should be aligned with their times and the names should have room in their respective cells.

Screenshots

Stackmat timer entry

I don't know how hard this is to accomplish, I simply haven't looked into it. This would involve adding a third timer type and running the required code to watch a stackmat and use it.

https://www.npmjs.com/package/stackmat

this could be used.

Chat

Implement a chat panel in the room page to allow people to chat between each other.

Users on current scramble shouldn't have to wait for new users when in the middle of a round

Is your feature request related to a problem? Please describe.
When new users join, the round will take longer as the server will wait for them to generate a new scramble. The server should recognize that they joined, but not add them to the round.

Describe the solution you'd like
Use the code from #11 to solve this.

When a new round happens, the server should add userIds to a "waitingFor" array. When a user leaves, their id should be taken out of this. When a user submits a time, their id should be taken out of this.
When this array is empty, generate a new scramble and repeat the process.

This can easily create a fancy status bar "Wait for X, Y, and Z..."

Let admin permanently Kibitz users

Is your feature request related to a problem? Please describe.
Sometimes, an unwelcome user joins your public server. Or maybe the user left, a bug happened that made them stay, or they just went AFK.

Describe the solution you'd like
The admin should be able to kick a user.

Additional context
Admins should have some view that lets them manage who's competing.

Change mean row to average

I think average (as defined by a mean removing the top and bottom 5% of solves, rounded up) is a much better representative of how you're doing in a session.

Maybe a way to change between both should be added instead if you think having the mean is important. Personally, I don't care much for the mean

Track PBs

This is a much bigger issue and one that needs discussion.

For each event, for various stats, I'd like to track people's PBs. Perhaps up to ao100.
I'm down for just single, ao5, and ao12 though.

This should display on someone's profile. We have to add the ability to look at someone's profile.
We'd could reuse the profile page if we omit the personal settings.

The PBs would also display perhaps when you hover over someone's name on the times table.
When a panel gets added to view members, this should also be in the form of a psych sheet using these PBs.

Turn this thing into a PWA

This was started earlier, however bugs came up.
We need to make sure we're not caching /api/me or any other api routes.

For this, we need to register and write a custom service worker.

View a scramble box.

Harnessing react-cube-svg, we should create a box that renders the given scramble.

react-cube-svg currently only supports 3x3. In the future, work will need to be invested in the project to get all NxNs working and after that, misc puzzles.

Add a back button to password entry dialog

This is just an additional help to users to get back to the home screen from the password entry page.

Performance enhancements when calculating averages

Right now I have a poor approach to calculating stats which is calculating everyone's after each solve. Especially when I don't use every stat that I'm calculating.

I need to somehow only calculate the stats that I need and calculate stats incrementally. This is especially with calculating best averages.

Fix chat not scrolling on mobile

Right now, on mobile, if a user switches over to the chat box after several messages has passed, it won't scroll to the bottom.
What we need to do is preform the scroll after a mount.

Create panel in RoomList to list the number of authenticated users connected

This is a panel going in the bottom of the room list and it's supposed to list the number of users currently connected to the server.
Design it similar to the waiting for list in the room page.
The server could simply send out events whenever an authenticated socket connects. The socket reducer can then increment and decrement the number whenever it receives those events.
In protocol.js, create USER_CONNECT and USER_DISCONNECT and simply implement those events and handle them in middleware.js

Introduce audio cue for inspection

Coming from CStimer, I'm used to hearing "eight seconds" and "twelve seconds" warnings, making it hard to manage my inspection on LetsCube.
It would be nice to have similar audio cues on LetsCube.

Instructionals

Add some information in places on how to use the app.
Simple stuff like a ? on the timer and you click or hover over it to get instructions on how to use the timer.

"Spacebar to start timing"
"Any key to stop"

List keybinds when they get added.

Instructionals

Write text in places on how to use the application.
Good UX design says that you shouldn't need to tell the user how to use the app. Instructionals should be few, but where is necessary.

When keyboard shortcuts get added, we will need a page for them.

Add mo3 calculations

Easy peasy lemon squeezy. Just edit the stats.js to also calculate mo3. You'll just want to use the mean function and throw in the last 3 solves.

Split up server/socket/index.js

This file is the last beast to split up.

I just remembered socket packet middleware is a thing

Create middleware that binds socket.room and socket.user with the latest fetch of each.

Somehow only do this for some routes as not all need this.

View past scrambles

Create a popup dialog on the index of each round to view the scramble.

Along with this dialog, we can show everyone's time for the round.

Along with this, when a user clicks on a given time, we should show a cstimer like view with the scramble and the user's time.

Toggle if a room is private

Is your feature request related to a problem? Please describe.
You started a room and now you want to close it off.

Describe the solution you'd like
Add a dialog to set if a room is private. It should also prompt for a password.
This same dialog could be reused for a "change password" option.

Getting skipped a few times should turn on "auto skipping"

Is your feature request related to a problem? Please describe.
Someone can sit AFK indefinitely and the leader has to manually start each time. You can also run into #26

Describe the solution you'd like
After getting skipped "N" times, the "Start Skipping" button should be auto-triggered for the user getting skipped.

Describe alternatives you've considered
Leader having more control over who is auto-skipped is also an alternative.

Statistics

Ideas

• Confidence and prediction bands on times
• Confidence intervals for mean and standard deviation instead of point estimators
• Simple histogram and cumulative histogram (could overlay on a single plot)
• Linear regression to estimate improvement
• Identify outliers

Logging in on dev will redirect you to the server rather than the dev server

Describe the bug
Upon logging in, you get redirected to localhost:8080.

To Reproduce

1. logged out, hit "logged in"
2. authorize the application if necessary
3. notice that the url is localhost:8080

Expected behavior
The site should redirect you to whatever original host you were on. So even if you were on 192.168.10.100:3000, it should take you back there instead of localhost:8080

Badge with number of unread messages

Somehow determine if a message has been read. We can maybe do this by seeing if it got mounted.

Then just display a badge with the number of unread messages.

We could store the number of unread messages in redux, increment it when a message is received and then decrement it when the message gets rendered.

Title says "Let's cube" instead of "Let's Cube" on some pages

This can be seen by going to the profile page, or by going from any page back to the main page by clicking the logo.

Renaming rooms

Is your feature request related to a problem? Please describe.
Maybe you wrote the room name wrong and you want to fix it.

Describe the solution you'd like
Open a dialog with the current room name in the text box and let the user edit it and then submit it.
Events would have to be created to let everyone know it changed. The room name would have to be updated on someone's RoomList reducer along with the Room reducer for the people currently in the room.

People get skipped when someone leaves/joins

Describe the bug
The server gens a new attempt when a user leaves / joins regardless of waiting for people

To Reproduce
Steps to reproduce the behavior:

1. Go to a room
2. Wait for all but one person is left to submit times
3. Have a user the server isn't waiting leave / join
4. The server will generate a new attempt

Expected behavior
The server should remove the right person from the list of users it's waitingFor

The server seems to be removing the wrong person from the list of users it's waiting for.

Create Room Button Graphical Bug

Describe the bug
Weird highlighting effect

To Reproduce
Steps to reproduce the behavior:

1. Click create room
2. Press escape

Screenshots
https://streamable.com/w94vf8

Desktop (please complete the following information):

• OS: Arch
• Browser: Firefox

Dark theme

Expected behavior: Styling uses a dark theme

Actual behavior: Styling uses a light theme

Reproduction steps:

1. Start server
2. Open client in browser

Pls add dark theme thx

Add user join / leave chat messages

Chat messages need to be added for when a user joins and leaves.

Missing avatar can break the app.

Describe the bug
Sometimes, messages come in referencing a user that doesn't have an avatar object. This means that grabbing the thumb_url from avatar results in an error throwing that avatar isn't defined.

To Reproduce
No steps to reproduce but it happens sometimes.

Expected behavior
It doesn't break

Screenshots

PB tracking

Not sure if I really want this, but it'd be aight.

This is a much bigger issue and one that needs discussion.

For each event, for various stats, I'd like to track people's PBs. Perhaps up to ao100.
I'm down for just single, ao5, and ao12 though.

This should display on someone's profile. We have to add the ability to look at someone's profile.
We'd could reuse the profile page if we omit the personal settings.

The PBs would also display perhaps when you hover over someone's name on the times table.
When a panel gets added to view members, this should also be in the form of a psych sheet using these PBs.

---

• [] Create code track a given user's PBs for each event for single and various averages.
• [] Add this to their profile.
• [] Make profiles viewable for other users.
• [] Create a rankings page?

Make original creator of the room always admin if they join

This should be straight forward.
On the room model, add an extra field denoting the user id of the one who created the room.
On user join, if that user joins, make them the admin over all.

Don't bother reordering the users?
Maybe render the admin differently.