Implement Game View and Rendering Layer

TKanX commented 1 month ago

Description:

Develop the game view and rendering layer using the HTML5 Canvas API to provide a visually appealing and interactive user interface for the game. This layer will handle rendering the game board, pieces, and other visual elements, as well as managing user interactions within the game.

TKanX commented 3 weeks ago

Added GameRenderer class and integrate canvas element

https://github.com/tridecco/game-client-web/commit/a837665f1157557885781de972dfaed4ede2a848

Created the GameRenderer class to handle rendering of the game map.
- The class initializes with a GameMap object and a canvas element.
- The rendering context (ctx) is obtained from the provided canvas.
Added a canvas with the id="game-canvas" for the canvas element in the game view.
This setup prepares the foundation for rendering the game on the canvas.

Note: Further implementation is needed to render the actual game elements on the canvas.

TKanX commented 3 weeks ago

Optimized game canvas rendering for square aspect ratio and centering

https://github.com/tridecco/game-client-web/commit/178547fd7d381d58d626f189e3ff169db7a20c17

Updated the canvas to be a square and fill as much of the screen as possible.
The canvas is now centered both vertically and horizontally.

TKanX commented 3 weeks ago

Updated GameRenderer constructor and Game class

https://github.com/tridecco/game-client-web/commit/b6a5ca88a8815e8ab6706b17a69f1928dfece460

Modified GameRenderer constructor to accept and set a background image.
- Added a backgroundImage parameter.
- The image is drawn on the canvas once loaded.
Updated Game class to initialize GameRenderer with a background image.
- Added _initRenderer method to set up the renderer with the new background image.
- Updated Game constructor to call _initRenderer.

TKanX commented 3 weeks ago

Resized game canvas to match container dimensions

https://github.com/tridecco/game-client-web/commit/aea51d0136ade5a95c2dfff36de80609644bc255

Adjusted the canvas width and height to match the dimensions of its container element.
Ensures the game canvas fills the available space and maintains the correct aspect ratio, resolving low resolution issues.

TKanX commented 3 weeks ago

Resolved canvas width and height being set to 0

https://github.com/tridecco/game-client-web/commit/204d04c6bc81aa4245aa5bf95b9d351c050772b7

Adjusted canvas width and height calculation to use minimum of window.innerWidth and window.innerHeight.
Ensured that the canvas dimensions are properly set even when the canvas element is not yet fully rendered.

TKanX commented 3 weeks ago

Refactored GameRenderer to use drawBackgroundImage method

https://github.com/tridecco/game-client-web/commit/f4622243fa29df54342a6d8ee8a61cc98b99cef8

Updated the GameRenderer class to utilize the new drawBackgroundImage method for drawing the background image on the canvas.
This improves code readability and reusability by separating the background image drawing logic into its own method.

TKanX commented 3 weeks ago

Adjusted canvas size dynamically on window resize

https://github.com/tridecco/game-client-web/commit/8749f6acea21cf0145280f7945f997ba8c49f231

Added a resizeCanvas method to update canvas dimensions based on the window size.
Registered a resize event listener to call resizeCanvas when the window is resized.
Modified drawBackgroundImage to use the current canvas size and background image.

TKanX commented 3 weeks ago

Improved rendering performance and structure

https://github.com/tridecco/game-client-web/commit/0a6613f9d863c48cb5229c56f2e8d20332cd66f4

Changed map parameter type from Array to Object for better flexibility.
Added offscreen canvas for efficient rendering.
Implemented private _loadImage method to handle image loading with Promises.
Enhanced canvas resizing logic to clear and reset both main and offscreen canvases.
Added setMap method to load and cache tile images for the game map.
Modified drawMap method to handle tile scaling, rotation, and rendering on the offscreen canvas.

TKanX commented 3 weeks ago

Added methods to draw and clear pieces in Game Renderer

https://github.com/tridecco/game-client-web/commit/6782b6d5975d9cc6457057eabb811cba70859773

Added drawPiece(position) method to render a specific piece at the given position.
Added clearPieces() method to clear the canvas and redraw the background image and game map.

TKanX commented 3 weeks ago

Corrected variable name from 'acaleX' to 'scaleX' and 'acaleY' to 'scaleY'

https://github.com/tridecco/game-client-web/commit/b5978c83b651264eb945884d1dc5f513ca2a3a09

Corrected the misspelled variables 'acaleX' and 'acaleY' to 'scaleX' and 'scaleY' respectively. This change ensures proper scaling calculations in the game renderer when converting board coordinates to canvas pixel coordinates.

TKanX commented 3 weeks ago

Implemented click event handling piece selection for Game Renderer

https://github.com/tridecco/game-client-web/commit/692333ce8103b0d6584ec2d8af17a2e90bd16632

Added private _handleClick(event) method to detect and handle clicks on specific pieces.
Utilized an offscreen canvas to check if a click occurred within a non-transparent region of a piece.
Added addClickListener(handler) method to allow registration of click event handlers.

TKanX commented 3 weeks ago

Load tile images and handle click events in GameRenderer

https://github.com/tridecco/game-client-web/commit/184c6d0cc40dd1aec0b54a30edceb642a6f8d42d

Added _loadTileImages() method to load tile images asynchronously.
Updated constructor to load tile images and handle click events after the background image is loaded.
Refactored code to use the loaded tile images for rendering.

TKanX commented 3 weeks ago

Implemented piece restoration after canvas resize

https://github.com/tridecco/game-client-web/commit/8ee56370b645e8aa73da22b43cee52aaeaefbb0e

Added pieces array to store drawn pieces for restoration.
Introduced _restorePieces method to redraw pieces after canvas resize.
Updated resizeCanvas method to restore pieces after resizing.
Modified drawPiece to store pieces in the pieces array.
Updated clearPieces to reset the pieces array after clearing the canvas.

TKanX commented 3 weeks ago

Optimized resize handling to prevent excessive calculations

https://github.com/tridecco/game-client-web/commit/baf8760185b8e8b3008e6e3504ddee4d69950e1e

Added debouncing for resize events using requestAnimationFrame.
Replaced direct call to resizeCanvas with debounced function to improve performance during frequent resize events.

TKanX commented 3 weeks ago

Corrected click position detection by adding canvas rotation

https://github.com/tridecco/game-client-web/commit/e51b9b26f1bf786c9baabf30654a044f34100d3e

Fixed inaccurate click position detection by applying rotation transformations to the testing canvas.
Simplified unnecessary position range checks, ensuring more accurate and efficient click handling.

TKanX commented 3 weeks ago

Updated drawPiece method to handle flipped tile images

https://github.com/tridecco/game-client-web/commit/c4a04fcd5ddd3b352ee4afaaa192ad1a5da55b7e

The drawPiece method in the GameRenderer class has been updated to handle flipped tile images. This ensures that the correct image is used based on the flipped property of the tile.

TKanX commented 3 weeks ago

Added default map configuration for game board rendering

https://github.com/tridecco/game-client-web/commit/75cc9077470540bab8422073a644deea470d6869

Implemented a new map file public/maps/default.json for game board rendering.
The map includes configurations such as size, tile images, and tile properties (position, size, rotation, and flip status).

TKanX commented 3 weeks ago

@tedhyu

tedhyu commented 3 weeks ago

that looks amazing! Is there any plans that once a gem forms to change the image to the hexagon image?

TKanX commented 3 weeks ago

that looks amazing! Is there any plans that once a gem forms to change the image to the hexagon image?

Hi Dr. Yu,

Thank you for the feedback! Yes, the image you saw was just from a randomly generated rendering test, which served as a unit test. Integrating this with the network layer is still in progress, and I'm planning to refactor the server-side network layer as well. The idea of changing the image to a hexagon once a gem forms is also in the plan. Appreciate your suggestion!

@tedhyu

TKanX commented 3 weeks ago

Updated _initRenderer method to asynchronously load default map and configuration

https://github.com/tridecco/game-client-web/commit/c498e41feb82cdbd40ff095b36b3747a7593cd9e

Added asynchronous fetching of "/maps/default.json" to retrieve the default map configuration data.
This change ensures that the game renderer is initialized with the correct map configuration, improving the rendering of the game board.

tedhyu commented 3 weeks ago

Wow. Thanks for the demo. It looks great.

tedhyu commented 3 weeks ago

Also, keep in mind that if you are interested, you can add advertising to the page and keep the earnings. You should be rewarded for your hard work. We can think about it later when the game gets up and running smoothly.

TKanX commented 3 weeks ago

Corrected event handling in _handleClick by properly clearing the testing canvas

https://github.com/tridecco/game-client-web/commit/2a0e0f0f928ca470066973064d46a57c6ac8a9eb

Fixed an issue in the _handleClick method where the testing canvas was not correctly cleared, leading to incorrect click event detection.
Moved the clearRect call to ensure the testing canvas is properly cleared after processing each tile.

TKanX commented 3 weeks ago

Also, keep in mind that if you are interested, you can add advertising to the page and keep the earnings. You should be rewarded for your hard work. We can think about it later when the game gets up and running smoothly.

Hi Dr. Yu, Thank you for the suggestion! I'm really doing this out of passion, and seeing the project succeed is the biggest reward for me.

@tedhyu

TKanX commented 3 weeks ago

Optimized testing canvas performance for frequent image data reads

https://github.com/tridecco/game-client-web/commit/84d0ee9d73b7e2b09a8338eb45bf780f5456a41f

Added the willReadFrequently option to the canvas context to enhance performance for frequent getImageData operations. This change helps reduce memory overhead and improve the speed of pixel data access, particularly useful in scenarios involving intensive image processing or frequent canvas updates.

TKanX commented 3 weeks ago

Optimized canvas rendering and improve resize handling

https://github.com/tridecco/game-client-web/commit/b01f85ef1c9b94d4186652b074ab471636085a95

This commit refactors the GameRenderer class to optimize canvas rendering and improve resize handling. The changes include:

Removing the unused offscreenCanvas and offscreenCtx variables.
Updating the resizeCanvas method to calculate the scaling factors scaleX and scaleY only once.
Removing the unnecessary clearRect calls in the resizeCanvas and clearPieces methods.
Moving the drawMap logic into the resizeCanvas method to eliminate redundant drawing.

These optimizations enhance the performance and user experience of the game rendering, resulting in smoother gameplay and faster display updates.

TKanX commented 3 weeks ago

Added method to highlight available positions on the board in GameRenderer

https://github.com/tridecco/game-client-web/commit/e522fe0874584bd96e27af11d16ff2e895dd6717

Added showAvailablePositions method to visually indicate the available positions where tiles can be placed.
Implemented hideAvailablePositions method to clear the highlighted areas and restore the board's state.

TKanX commented 3 weeks ago

Updated GameRenderer to use flipped tile image for black tiles

https://github.com/tridecco/game-client-web/commit/32f0e1577470060b4dd20926af1f80f4e9daa037

The code changes in public/js/game.js modify the GameRenderer class to use the flipped tile image for black tiles. This ensures that the correct image is displayed based on the flipped property of the tile. This improvement enhances the visual representation of the game board and provides a more accurate rendering of the tiles.

TKanX commented 2 weeks ago

Render available positions during player's turn

https://github.com/tridecco/game-client-web/commit/95c75bcf1e81f5761a2c67eff2adbc59e634dcb5

Added functionality to display available positions when the player's turn begins. The renderer.showAvailablePositions method is called when the game:turn event is triggered for the current player with a normal turn type, and renderer.hideAvailablePositions is invoked when the turn ends. This enhances the UI by visually indicating valid move locations.

TKanX commented 2 weeks ago

Added network listener for game:toss event

https://github.com/tridecco/game-client-web/commit/a616fc6ac25adc74591c4c231781ce5d9f48dc90

Added a network listener for the "game:toss" event to handle the tossing of a game piece. The listener retrieves the player ID, piece index, and position from the event data and uses them to draw the corresponding piece on the game board. This enhances the visual representation of the game and improves the overall gameplay experience.

TKanX commented 2 weeks ago

Added toss button functionality to Game

https://github.com/tridecco/game-client-web/commit/2008f90f7469edc2acfe81590cddacf23cc99346

Added showTossButton method to GameUI to display the toss button and handle the click event.
Implemented hideTossButton method in GameUI to hide the toss button after the toss action.
Updated Game class to listen for the "game:tossStart" event and show the toss button for the current player.
In the Game class, the toss button triggers the tossPiece method via the network, which emits a "game-client:toss" event to the server.
Added tossPiece method to GameNetwork to handle the client-side toss action by emitting the appropriate event.

TKanX commented 2 weeks ago

Restore available positions after resizing the canvas

https://github.com/tridecco/game-client-web/commit/1d352cd04b50a9ea417c1aeeb8f13f73509f7f2b

Added a new method _restoreAvailablePositions to the GameRenderer class to restore the available positions on the canvas after resizing.
This ensures that the available positions are correctly displayed when the canvas is resized.

TKanX commented 1 week ago

Handle piece placement and hexagon formation

https://github.com/tridecco/game-client-web/commit/df95ac48356601427fbda67d6bb5271a027cb472

Added listener to GameNetwork to handle the "game:placePiece" event.
Updated logic to place pieces on the board and render them using the drawPiece method.
Implemented functionality to display a message when hexagons are formed, indicating the number of hexagons created.

TKanX commented 1 week ago

Clear pieces on non-first rounds in game round event listener

https://github.com/tridecco/game-client-web/commit/f070d65246fd43b77ca323f434308ccc65a56355

Updated game:round event listener to clear pieces from the board if the round is not the first.

TKanX commented 1 week ago

Resolved issue with piece cache not clearing after round ends, refactor GameRenderer

https://github.com/tridecco/game-client-web/commit/dfec912ffb527fe6ddc9543cf0422d2339b4c17c

Corrected logic in clearPieces to ensure the canvas and pieces cache are properly cleared after each round.
Refactored the clearPieces method into a private _clearPieces function for better encapsulation.

TKanX commented 1 week ago

Clean up renderer resources after game ends

https://github.com/tridecco/game-client-web/commit/65dd6c5867b4830b4db8beb0b22f81495e71dc32

Added cleanUp method to the GameRenderer class to properly clean up resources after the game ends.
The method removes all click listeners, clears the canvas and pieces cache, and resets the canvas dimensions.
This ensures that resources are properly released and prevents memory leaks.

tridecco / game-client-web