pixelart | pixelart app using DOM

One solution would be to move the creation of the Phaser.Game Object, "game" into the method componentDidMount (link to the documentation). Because if new Phaser.Game is called, and the parent is not in the DOM, the canvas will be added, ignoring the parent.

just add this method to the Game class:

In line #126 you have a shake function this.cameras.main.shake(300); that makes the game window to shake with a duration of 300ms. To disable it, just comment it out or delete it.

The NavItems and Dropdown components are syntactically correct but you've named the props object something else in each, items and submenus respectively. Each component then references the entire "props" object as if it were the specific items or submenus prop that was passed.

Either rename each to props and access accordingly:

EDIT: Maybe this question should go on similar portal Code Review or Game Development

I keep drawing color in variable and use keys to change it.

1 = Red, 2 = Green, 3 = Blue, 0 = Black

But now it needs to keep color with pos - and I use dictionary pressed[pos] = color

But maybe instead of pressed you should create full list 2D for all squares in grid and put White in all places at start. If you would colors as tuples i.e. (255,0,0) instead string Red then you could keep it in numpy.array and simply save in text file or convert numpy.array to Pillow.Image and save as JPG/PNG/TIFF.

Because now it can draw in different colors so I don't check if pos not in pressed when I press first button because it not allow to replace color in square.

There is not so much to simplify.

In DrawSquare() you run MousePos() many times but you could run it once and assign to variable.

You can use x, y = ... instead of pos = ... and pos[0], pos[1].
Or you can use both x, y = pos = ....

You can create cursor = Rect(...) at start and later use cursor.topleft = new_position to move it.

Maybe in draw.rect(...) you could use directly tuples (x, y, width, height) instead of Rect(x, y, width, height)

I used rules from PEP 8 -- Style Guide for Python Code

• lower_case_names for functions names
• verbs for functions names - convert instead of MousePos
  (and nouns for variables and classes)

Full code:

You're scaling the image up before disabling the filtering, so it still looks filtered. It also wastes memory to enlarge a small sprite into a large bitmap.

You don't need to mess with manual scaling like that. You can set the drawable on you ImageView (either assign it in your XML layout or call setImageResource on it). Then set isFilterBitmap to false on its drawable.

If you want to use the third parameter you would have to use the string (or Texture Object), in this case the filename from the atlas should work. Here the is relevant documentation

Well if you only tap, it doesn't move for a full second. just how long the key is hold down (can be some milliseconds).

And it also depends on the update rate of the update function, it is not always constant. (you can see that through the parameter delta passed to the update function, update(time, delta)) Here the link to the documentation

If you want to test it, just hold the key for 1 second. btw.: drag and acceleration can come also into play, if set.

Edited so that is logs the position after 1 second:
the results will vary depending on the computer, but for me it is about 80px

You are setting interactive on the graphics serveral time, it the forEach-loop. I think this can be done only once, so you are overriding it, but I'm no expert.

I would set the interactivity once, for the whole region:

This bug was fixed by calling invalidate() on the Fragment's Canvas property after the user taps the back button. It took me a couple of days to get to fix this, so I'm posting an answer here in case someone has a similar bug.