workadventure/maps/tests/CameraApi/script.php
2022-01-14 11:41:37 +01:00

51 lines
2 KiB
PHP

<!doctype html>
<html lang="en">
<head>
<script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
<script>
window.addEventListener('load', () => {
//@ts-ignore
WA.camera.onCameraUpdate((worldView) => console.log(worldView));
WA.onInit().then(() => {
console.log('After WA init');
const setCameraButton = document.getElementById('setCameraButton');
const followPlayerButton = document.getElementById('followPlayerButton');
const xField = document.getElementById('x');
const yField = document.getElementById('y');
const widthField = document.getElementById('width');
const heightField = document.getElementById('height');
const smoothField = document.getElementById('smooth');
const lockField = document.getElementById('lock');
setCameraButton.addEventListener('click', () => {
WA.camera.set(
parseInt(xField.value),
parseInt(yField.value),
widthField.value ? parseInt(widthField.value) : undefined,
heightField.value ? parseInt(heightField.value) : undefined,
lockField.checked,
smoothField.checked,
);
});
followPlayerButton.addEventListener('click', () => {
WA.camera.followPlayer(smoothField.checked);
});
});
})
</script>
</head>
<body>
X: <input type="text" id="x" value="496" /><br/>
Y: <input type="text" id="y" value="655" /><br/>
width: <input type="text" id="width" value="480" /><br/>
height: <input type="text" id="height" value="286" /><br/>
Smooth: <input type="checkbox" id="smooth" value=1 /><br/>
Lock: <input type="checkbox" id="lock" value=1 /><br/>
<button id="setCameraButton">Set Camera</button>
<button id="followPlayerButton">Follow Player</button>
</body>
</html>