coherent-gameface-interaction-manager
Version:
Library for the most common UI interactions
65 lines (60 loc) • 1.83 kB
HTML
<html lang="en">
<head>
<style>
body {
width: 100vw;
margin: 0;
padding: 0;
height: 100vh;
background-color: white;
}
p {
width: 100%;
height: 50%;
font-size: 2rem;
}
.container {
display: flex;
width: 100%;
justify-content: center;
}
.button {
margin: 0 20px;
background-color: gray;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<p>Tap count: 0</p>
<div class="container">
<div class="button button-1">Tap here to count</div>
<div class="button button-2">Double Tap here to reset count</div>
</div>
<script src="../../dist/touch-gestures.js"></script>
<script>
const container = document.querySelector('p');
let count = 0;
touchGestures.tap({
element: '.button-1',
callback: function () {
count += 1;
container.innerHTML = `Tap count: ${count}`;
},
});
touchGestures.tap({
element: '.button-2',
callback: function () {
count = 0;
container.innerHTML = `Tap count: ${count}`;
},
tapsNumber: 2,
});
</script>
</body>
</html>