room4o4/pictionary

Pictionary platform for handling thousands of users online

pictionary's Issues

Setup Github actions for publishing to Digital ocean droplet

https://www.digitalocean.com/community/questions/how-to-deploy-using-github-action

Fix issue where the round duration is not constant for all players.

Announce winner

DIsplay winner in UI

Change app theme to a bit more attractive

Initial feedback

• getting stuck while drawing ( not smooth)
• need to know who is drawing (list la hightlight)
• last word
• add sound
• in last round - previous word is not shown
• gets boring after some time
• words getting repeated
• stop after all has guessed
• fix log window
• tell user if word is close
• cache username and go in
• give hint as time goes
• num words, some letters
• kick someone out from room (votekick) idle
• The ability to create, view and join rooms

Build a list of pictionary words

Build a list of words that could be suitable for pictionary.
This could be fed to the pic-gen library

See - https://hobbylark.com/party-games/pictionary-words

Canvas overflows the paper

Prevent Pull-To-Refresh from happening in mobile browser.

stop round if everyone has guessed the answer

Canvas is disabled in mobile for the first round

Steps to reproduce when there are two players in total:

1. Launch pictionary in mobile first as Player 1
2. Launch pictionary in a PC/mobile as the Player 2.

Now it would be the turn of Player 1 to draw. But the canvas is not enabled and the Player 1 is not able to draw in Mobile.

Note: This does not get reproduced,

1. If Player 1 uses PC and Player 2 uses mobile
2. If both Player 1 and Player 2 use PC.

Give hint for the words by revealing letters

Fix Margin issues in iPad & IPad Pro resolution

Fix Margin issues in iPad & IPad Pro resolution

Let guesser know when they have found the right word

Display Room Event log

Show the word when its time to guess

UI - Guessbox

Cleanup Guessbox

Use scss instead of css

SCSS provides a lot of out of the box features
Need suggestions @sampathBlam @mahadevans87

Move nickname from dialog to game area

Move Nickname from dialog to Game Area

1. When the user types in the nickname and presses Enter or clicks on the login button, allow them to proceed

On Screen Keyboard for Mobile

Keyboard on mobile moves the entire screen up. Causes canvas glitch and is very irritating.

Setup application as a PWA

PWA Checklist

Fast and reliable

• Page should be fast enough on mobile networks
• Respond with a 200 when offline
• start_url should respond with a 200 when offline.

Installable

• Use HTTPS
• Register a service worker that controls page and start_url
• Web app manifest should meet the installability requirements

PWA Optimized

• Redirect HTTP traffic to HTTPS
• Configure for a custom splash screen
• Set a theme color for the address bar.
• Content should be sized correctly for the viewport
• Has a tag with width or initial-scale
• Contains some content when JavaScript is not available
• Provide a valid apple-touch-icon
• Manifest should have a maskable icon

Validate these against an Audit check in Google Chrome Developer tools for a PWA

Color Palette and erase canvas

Display Round info - Time left, Round number, Total rounds

Done

App on Mobile should not scroll.

Gameplay cleanup

1. When a user logs in, send him current Game state additional params like Round Info, Total Rounds, winner depending on the current state of the game.
2. Sort User scores
3. Check for Tie in user score. If 0 is the score, no winner, else those who are tied in top spot are winners
4. Update more

Deploy to cloud

Add 1000 more words for the game

Allow user to enter nickname on opening the page

When the user opens the pictionary web page, display a popup to let the user enter their nickname.

Only after the user enters their nickname, update the client's state to the backend.

Fix issue that prevents drawing on canvas when somebody is guessing

Add sounds in client

• New Game
• New Round
• Winner
• Correct Guess (both for drawer and guesser)

UI - App Bar

• Have a logo and display App Name

Broadcast drawing to other users

Avatar list is not being displayed at times

Distribute PWA as a native android app

Distribute PWA as a native android application in APK format.

Links to refer

• https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/
• Trusted Web activity
• BubbleWrap

If we ignore the app (both server and client) for a long time, the frontend app crashes

Check screenshot

Introduce Avatars for players to choose in addtion to nicknames

Make Canvas touch compatible for Mobile

Add SVG Icons for each UI Component

Ref Lichess

1. Component for LogWindow, Player List, Guessbox,

App crashes at the end of a game - undefined audio file

App crashes after all rounds are complete

Fix scrolling issue in mobile phones

Animate game states

Animate in between game states

1. Waiting for players
2. Waiting for new round
3. Announce Winner(s)

Have some sort of a CSS animation or GIF

Build UI for player list

• User List and points
• Mobile and Desktop compatible
• Who is drawing currently
• Sort by score

Build a basic UI in client

• Allow User to enter nickname
• Show a canvas and allow the user to draw

Create, View, Join, Leave Rooms