How to make Nipple.js Joystick responsive?

Question

I am currently using the javascript library nipple.js to add a joystick element to my vue.js-website. The joystick is placed inside a resizeable parent-element but is of static size itself. I was wondering how it would be possible to make the joystick element resize with its parent so it would have a fitting size when resizing the parent but also on different screen sizes in general.

This is how I initialize my Joystick in Vue right now

const options = {
      zone: this.$refs.nippleRef,
      mode: 'static',
      position: { left: '25%', top: '50%' },
      dynamicPage: true, // needed because of vue
      size: 150,
      restOpacity: 0.75,
    };

I tried using e.g. a percentage in the place of the 150 at the size value. However only numbers are valid there.

I was wondering if there is a way to make the Joystick responsive either through javascript or with css?

And this is the template part of the vue file btw:

<v-col>
 <div>
   <div ref="nippleRef"></div>
 </div>
</v-col>

Thank you in advance!

Answer 1

This is how I made it responsive, in the static mode, I added this to my css, make sure you adjust the margins on the front classe to 25% of the size you defined, the example below consider the size of 100px :

.nipple {
    position: fixed !important;
}

.back {
    position: fixed !important;
}

.front {
    position: fixed !important;
    margin-left: -25px !important;
    margin-top: -25px !important;
    left: unset !important;
    top: unset !important;
}