Possibility to change direction texts and add more directions?

[erniberni1611]

Is it possible to change the direction texts to the cardinal directions? (so forward would be north, backward south etc)

Also would it be difficult to add four more directions e.g. for my case North-East, North-West, South-East and South-West?

Hope someone can help me here.

[elmarti]

@erniberni1611 thanks for the issue.

We could add an optional prop to allow configuration of output type.

• Default/undefined direction type will use the current format of FORWARD, BACKWARD, LEFT or RIGHT.

Unfortunately it looks like I haven't been too clear about the callback params in the docs. I'll update these shortly. If you look at the storybook, it logs out the params for the callback, you can use the x/y values to get the appropriate directions https://elmarti.github.io/react-joystick-component/?selectedKind=Joystick%20Examples&selectedStory=500ms%20throttled%20joystick&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[erniberni1611]

Could you provide me with the code you have for the directions example? I've been looking at it for a while now, but I couldn't get anything done because I'm still a newbie in React....

[youngjae99]

@erniberni1611

// Control:Joystick
    const handleMove = (e) => {
        //console.log('moved!');
        const movementDelta = 15;
        const scaledDelta = movementDelta * scale;

        console.log(e.direction);

        switch (e.direction) {
            case 'LEFT':
                setOffsetX(offsetX + scaledDelta);
                setCharX(charX - movementDelta);
                setDirection('left');
                break;
            case 'BACKWARD':
                setOffsetY(offsetY - scaledDelta);
                setCharY(charY + movementDelta);
                setDirection('down');
                break;
            case 'FORWARD':
                setOffsetY(offsetY + scaledDelta);
                setCharY(charY - movementDelta);
                setDirection('up');
                break;
            case 'RIGHT':
                setOffsetX(offsetX - scaledDelta);
                setCharX(charX + movementDelta);
                setDirection('right');
                break;
            default:
                break;
        }
    };

It's a bit of a late reply but I'm having a similar problem, so I'll show you how I use it. You can get callback params by handleMove function