Component was created, before TS was added, fix it and add some types.

Add mIt would be nice to havve option to chose if the Pointer should start from the side's extreme or from the centre.

Replace hardcoded cSS variables with values from the theme, so theme will be "the only" source of truth" in case of any properties.

Update the page structure.create the pages directory, and think about the App routes.

https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs
nextjs
Here you can find some information about achieving it in thenext.js. Read this article carefully! We need to use (and find out...) all of the'next.js' features, since we started using it

Right now we are displaying a "yellowish" colour to highlight that the theme is the selected one. We should improve this behaviour, to chose colour basing on the Pointer colour to avoid situation when the Pointer us yellow and we are using similar colour to hight it, the "ring" will not be visible. I think that the "right" solution is to set something light the colour inversion to be extra sure that it will be visible. I think that for this purpose we could rely on the inycolor.mostReadable() method, see the docs: https://github.com/bgrins/TinyColor#mostreadable . We are using this library anyway so this one whoule b4 wn easy one, be

We need a Pointer transition modes. The first, probably most important one (at least for me) us to allow our folks to train just one side (Pointer should "move" only on the selected half of the screen.

Try translateX(50vw) onstead of 100vw, there is a chance that it is causing too wide animation.

Clo===Replace play&pause buttons with an icons

Component was created, before TS was added, fix it and add some types.

I noticed that the current classNames are not following BEM convention rules. The classes are similar but sometimes the block and element are not named in the BEM way. what might be slightly misleading for folks that might join the tree-frog project.m

Component was created, before TS was added, fix it and add some types.

add option to set transition speed. It should be somewhere in the settings modal. Dont forget about icon that willśrepresent this particular setting.

Sińce the CRA has lost recommendation ed by the react official team, plus it is no longer that good so it will be nice to considrer migration to something else. Vite looks like a good candidate for a substitute.

https://www.asserts.ai/blog/migrataion-react-cra-vitejs/

Replace the button with an corresponding icon to make UI cleaner and simpler

It would be nice to add mode when the Pointer is going in the z direction. To force user(me) to center both eyes.

The app should have a few themes only, and these colours should be chosen to be healthier for eyes.

Add 'Restart' button that will restart the `Pointer' position and freeze it at the center of the screen.

Check if % are working better than check in the bouncing animation, and replace it if so

transform: translateX(100%);

It eould be nice to add some custom Pointer shapes, for example some emoticons that will cheer up younger folks while sessions. Additionally you can think about modifying the settings modal a little bit to allow easier selection when we will have more shapes, for example add a button that only after click will show only options related to the Pointer shape. You could select first what types of shapes you want to set and then display just selected shapes (lets say only animals!).

We should do something with the THEME object. It would be nice to put it in the separate file

It should tell more about the project and authors. Explain about the purpose if the project . *It also would be nice to add some kind of a logo/graphic even a simple one. We also need to add some explanation about tech stack, and about the project rules someone should stivk to in the case someone will want to contribute to the project.

It would be nice to allow users to modify a size of the Pointer. To make it fast and clear(UI-wise) add just three possibilities (small, medium, large). Do not forget about picking a nice looking and simple icons for this purpose to the ,Settings, modal.

Component was created, before TS was added, fix it and add some types.

It should be simple, clear, easy to find witch your sight. Maybe I should remove transparency + add shadow and replace "settings" txt wirh an icon. It qould be also geeat to close modal on any click/touch outside of it.

Simply change the current alfa favicon and replace it with an old one.

It would be nice to use a common practices for adding commit messages. For this purpose I suggest .conventionalcommits, lets give it a try and see how it's working. Docs: https://www.conventionalcommits.org/en/v1.0.0/ .

Right now when theme with a light colour is selected a top level icons such as settings” wray not be visible. To fix that a colour of top lrvrl icons should be depended on the theme background colour.

After a recently merged PR the settings modal is closing itself after click on any setting. I suppose the click is triggering somehow a re-render and thats a main reason why Settings are getting closed.

i think that we can consider transiting from JS to TS for a better developer experience, and it might help me to relearn TypeScript. I hope it won't be a big deal especially at this stage of the project.

It looks like the current way of animating Pointer is not good.Pointer is lagging while moving to the right. we should fix it. Pointer should transite smoothly.

The 'Pointer' should return to the center at least twice faster than it goes to the selected direction. That's what the eye doctor recommended, so it's a pretty important one.

It would be nice to highlight the currently selected Direction =, exactly as we are doing for the Theme or Size. It will make the whole app more consistent, because its a little weird that just one out of three inputs is behaves differently than others.

the current theming system - useTheme hook to be specific is working correctly but I can see a lot of room for the potential improvements.

1. Replace restart button with an corresponding icon
2. Change play&restart button behaviour to just stop animation, play icon should restart animation

/same as previously, after misgration to the next.js we need to replace the default favicon.

The settings modal should be closed when user clicks outside of it.

Add option to change pointer colour. Colour setting should contain just 3 different predefined colours. Do not forget about a certain icon for this setting!

Create and add a good place for all settings to control the app. It can be made as some kind of a popup that could be hidden during training session. Don't bother about the UI if the 'settings' button.

the Pointer is teleporting from center to the right when in should have move from the center to the right side. I bet the modeCR` keyframe is not working correctly

Component was created, before TS was added, fix it and add some types.

Right now when you open the app the only favicon you can see is the default one from the CreateReactApp. Change ut for something more project related -a frog emoji would be nice.

Since the app is growing and growing and since our animation take the punch time. It will be nice to have a special route that will allow us to test the app in a fast way. Keep in mind that we might use it later for general purposes, so it might not be used only for testing. Remember that it should be a dynamic route that will allow us to modify the duration/delay etc

It looks like the same case like eith the zThemeSetter` component. It looks like we can safety get rid of it.

We should add a notification that will inform our users that they have too small screen to use the app. We should also restrict the app so it we'll not work if the screen is too small to use it - fe. Phones + tablet’s.