58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
window.gamepad.TemplateClass = class XboxOneTemplate {
|
|
/**
|
|
* Instanciates a new Xbox One controller template
|
|
*/
|
|
constructor() {
|
|
this.gamepad = window.gamepad;
|
|
this.gamepad.updateButton = this.updateButton.bind(this);
|
|
this.gamepad.updateAxis = this.updateAxis.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Destroys the template
|
|
*/
|
|
destructor() {
|
|
this.gamepad.updateButton = undefined;
|
|
this.gamepad.updateAxis = undefined;
|
|
}
|
|
|
|
updateButton($button, button) {
|
|
if (!$button.matches(".trigger") || !button) return;
|
|
$button.style.setProperty(
|
|
"opacity",
|
|
this.gamepad.useMeterTriggers ? 1 : `${button.value * 100}%`,
|
|
);
|
|
$button.style.setProperty(
|
|
"clip-path",
|
|
this.gamepad.useMeterTriggers
|
|
? `inset(${100 - button.value * 100}% 0px 0px 0pc)`
|
|
: "none",
|
|
);
|
|
}
|
|
|
|
updateAxis($axis, attribute, axis) {
|
|
if (!$axis.matches(".stick")) return;
|
|
if (attribute === "data-axis-x") {
|
|
$axis.style.setProperty("margin-left", `${axis * 25}px`);
|
|
this.updateRotate($axis);
|
|
}
|
|
if (attribute === "data-axis-y") {
|
|
$axis.style.setProperty("margin-top", `${axis * 25}px`);
|
|
this.updateRotate($axis);
|
|
}
|
|
}
|
|
|
|
updateRotate($axis) {
|
|
const rotateX = Number.parseFloat(
|
|
$axis.getAttribute("data-value-y") * 30,
|
|
);
|
|
const rotateY = -Number.parseFloat(
|
|
$axis.getAttribute("data-value-x") * 30,
|
|
);
|
|
$axis.style.setProperty(
|
|
"transform",
|
|
`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
|
|
);
|
|
}
|
|
};
|