Mosi - Mouse Controls

Hi there!

So, this is my experiment with adding Mouse controls to Mosi.

Hit the Bottom Left notice to teleport around, and look at the co-ordinates of the grids you click. 

Bottom Right notice turns on 'Paint Mode.'

If you want to try something similar here's the steps:

1. Create a custom function in the 'Custom Scripts' section. I called mine 'mouse-setup'

2. Paste in the following code:

 function getMousePosition(canvas, event) {

            let rect = canvas.getBoundingClientRect();

            let x = event.clientX - rect.left;

            let y = event.clientY - rect.top;

            let width = canvas.scrollWidth/12

            let xPos = Math.floor(x / width)

            let yPos = Math.floor(y / width)

            console.log(xPos,yPos)

            if (game.inventory["mouse"]){

                game.moveAvatar(game.currentRoomIndex,xPos,yPos)

            }

            

        }

    

        let canvasElem = document.querySelector("#game-wrapper");

        if (canvasElem === null) {

            canvasElem = document.querySelector(".play-canvas"); //for use inside of Mosi

        }

    

        canvasElem.addEventListener("pointerdown", function (e) {        

                getMousePosition(canvasElem, e);        

        });

3. Call this function as early as possible. In my case, I did this by adding the following to a script node: {mouse-setup}

4. From here on out, to turn on the mouse controls you need to set the item count of the item 'Mouse' to 1.

5. If you return the item count of 'Mouse' to 0, mouse controls will be turned off.

After doing some testing, the mouse controls should work fine on all screen sizes. It does also work on mobile / tablets, though you may need to press/hold on where you want to click. Will work on this on a later update, potentially.