Add a new option before starting a drawing session where the user will be able to draw with the mouse.

This will result in displaying the canvas and the reference side by side.

The canvas should not be really that fancy. It would suffice having a black pen and an eraser functionality.

Questions

• Which library do we use or should we implement a basic canvas functionality ourselves?

Before entering a category show the recently drawn categories by other users.

When a drawing session is started the selected category should be stored in a database.

Tasks

• Create table recent_categories
• Show recently drawn categories when the search input is empty, otherwise show the suggested categories
• By starting a drawing session, save the selected category in recent_categories

The play icon should transition to the pause button and vice versa.

Implementation Note

The following CodePen can be used as a starting point.

Questions

• If the icons are displayed via clip-path then they need to be rounded a bit to match our current design. Maybe we could achieve the rounding effect with an svg filter?

Reference implementation

Check animation when pausing or playing a video on Youtube

We should add a button on the title screen which randomly selects a category, the number of images to draw and the timer duration.

Note

The drawing session is not started automatically. The button should only randomly configure those values.

Aside from the image filters #3 we want to add a mirroring and rotating functionality.
This should help the user during a drawing session to exercise to his liking.

When visiting e.g. http://localhost:3000/draw/cat we would always be starting at the first image.
If I would want to link to a different image I would need an indicator inside the link to determine the offset from the starting point.

Solution

We solve this by adding a query parameter named image which represents the offset from the starting point.

Example

http://localhost:3000/draw/cat?image=5 would show the fifth image in the cat category.

Conditions

• image=1 should represent the first image
• Given: images in drawing sesion n and the query parameter value x. Then the following invariant should hold x <= n

When switching tabs the timer should pause automatically.

If the timer is paused by the user and the tab is switched then the timer should stay paused after the tab is active again.

It would be cool if the user could choose between two different drawing modes.

One mode is the default one which we currently have implemented.

The other mode would be drawing by memory (which can be a much harder challenge).

Sequence

1. The user configures his settings and starts a drawing by memory session
2. A memory timer of 10 seconds* starts
3. After the memory timer expires, we hide the image and the usual drawing timer kicks in
4. After the drawing timer expires we advance to the next image as usual and repeat step 2

Currently when starting a drawing session, we default to a 1 minute timer for each image and showing 10 images in total.

To make things more configurable, we should introduce options to select from, before starting a drawing session.

Tasks

• Add multiple options
  • to the timer duration (Options: {1, 3, 5} Minutes)
  • for selecting how many images to show (Options: {5, 10, 15})

It would be nice to indicate to the user that the timer expired. By doing so he won't lose time when starting to draw the next image.

Dynamically read the version property from the package.json file and display in the app.

Design Note

The text should be small and slightly noticeable by making lowering the opacity and placing it in the right corner

Image filters should provide the function to challenge the drawing experience of the users by making it easier or harder. For example we could change the image showing only the outlines or coloring it in grayscale thus removing to pay attention to colors.

Implementation Note

We will make use of the following library to provide image filters
https://github.com/ahaoboy/lena-ts (TS fork of the original JS version)

Original Project
https://github.com/davidsonfellipe/lena.js/

Showcase
https://www.fellipe.com/demos/lena-js/

The first filters to implement are: Laplacian, Grayscale, Thresholding

There is no need for multiple filters being active at the same time.

For now we will support: English, German and Italian (sry I don't know any more languages than that 😓)

Implementation Note

For the client side localization we will use the following library
https://github.com/ivanhofer/typesafe-i18n (Typesafety ftw! 😎 )

For the flags we will use the following svg files
https://github.com/lipis/flag-icons/tree/main/flags/1x1

Save the selected locale in locale storage. If none is available, set English as default language

General Note

Link the flag providing repository in our README.md under the Resources section

Cache the api response once a drawing session for a category was started.
This will avoid hitting the pexels api too much.

Implementation Note

The cached entries should have a ttl of 24 hours.

Depending on the image it can be hard to recognize each detail. The zooming functionality of desktop and mobile browsers works as a general solution, but fails when wanting to examine only a specific part of the image.

Task

• When clicking on the image the image should be enlarged at the mouse position

Implementation Note

The library to use (a library which is not too old and does seem to work)
https://github.com/laurenashpole/react-inner-image-zoom

To spice things up a little, we should include a button next to the select component on the main page, where an user can start a drawing session without specifying a category first. This should result in presenting randomly selected images to the user.

By making use of the curated endpoint provided by Pexels this task will be rather small. This endpoint will not really provide randomized images but can act as a starting point, as the results of this endpoint will change over time.

Excerpt from the doc

 We add at least one new photo per hour to our curated list so that you always get a changing selection of trending photos. 

Providing real randomization is then a future task for itself (if this feature is really necessary or wanted).

Implementation Note

import { pexelsApi } from './server';

// use this method for implementing the issue
pexelsApi.photos.curated()

Self explanatory. Everyone who opposes a dark mode is not welcomed here!

Just kidding 🥲

Tasks

• Add dark mode with Tailwind
• Make sure to take the users OS settings first and use them as a default value, when rendering our app. When the user overwrites the setting manually it should take precedence over the OS setting.
• Provide a dark mode version of the tiled background image

When sharing a link to this app it should provide an enriched description

Implementation notes

Make use of https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

Currently we are fetching the images and displaying them in the order as we receive them.

To provide more variety we could randomize the order of the images before displaying them.