Given functions

The following functions are exported and ready for you to be used in your code.

You are not supposed to use all of them as we already use a lot of them.

Notification Utils

This notification file can be useful for debugging by notifying states of the application.

src/utils/notify.js

/**
 * Create an alert.
 *
 * Create an alert with the given title, message and type.
 * The alert will display in the top right corner of the screen.
 * This is a useful function to notify the user of any errors or warnings.
 *
 * @param {string} title
 * @param {string} message
 * @param {string} type     success, warning, error
 *
 * @returns {void}
 **/
const createAlert = (title, message, type) => {};

Layout Utils

src/pages/utils.js

/**
 * Calculate the layout of the home page.
 *
 * Initialize the layout of the home page, the left and right sidebars, the
 * rest of the script adds event listeners to the elements in the layout so
 * that the layout follows the mouse cursor when clicked and dragged.
 * 
 * @returns {void}
 **/
const calculateLayout = () => {};

Canvas Utils

src/rooms/canvas/utils.js

/**
 * Returns the necessary data to place a pixel.
 *
 * Get the placement data, i.e. the color the user has selected and the
 * coordinates of the pixel he is focusing on.
 * 
 * @returns {{color: number, posX: number, posX: number}} the data
 */
const getPlacementData = () => ({});

/**
 * Get the currently focused pixel's information and display it in the tooltip.
 * 
 * @param {boolean} [state=state]
 * 
 * @returns {void}
 */
const toggleTooltip = async (state = false) => {};

/**
 * Calculate the target position according to the top left corner of the canvas.
 * 
 * @param {*} event
 * 
 * @returns {x: number, y: number} the target position
 */
const calculateTarget = (event) => {};


/**
 * Update the position tooltip according to the event.
 * 
 * @param {*} event
 * 
 * @returns {void}
 */
const positionUpdate = (event) => {};


/**
 * Update the tooltip's position.
 * 
 * @param {{x: number, y: number}} target
 * 
 * @returns {void}
 */
const positionDisplay = ({ x, y }) => {};

/**
 * Transform #RRGGBB to 0xBBGGRRAA. Hexadecimal color to 32 bits integer.
 * 
 * @param {string} hex
 * 
 * @returns {number} the 32 bits color
 */
const transformHexTo32Bits = (hex) => {};

/**
 * Render the canvas.
 * 
 * @param {number[]} pixels
 * @param {string[]} colors
 * 
 * @returns {void}
 */
const renderCanvas = (pixels, colors) => {};


/**
 * Initialize the canvas with the given room configuration and pixels.
 * 
 * @param {*} roomConfig
 * @param {number[]} pixels
 *
 * @returns {void}
 */
const initCanvas = (roomConfig, pixels) => {};


/**
 * Render the canvas update, i.e. update the pixel at the given coordinates.
 * 
 * @param {string} color
 * @param {number} x
 * @param {number} y
 *
 * @returns {void}
 */
const renderCanvasUpdate = (color, x, y) => {};


/**
 * Reset the values of the canvas, i.e. the zoom, the coordinates and the 
 * display position.
 * 
 * @returns {void}
 */
const resetValues = () => {}