itsscb/pantomime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add more animals

Browse Source 
feat: allow skipping the round
This commit is contained in:
itsscb 2025-06-03 20:51:25 +02:00
parent b7b606b3d7
commit 1c8f65459a
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
animals.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 768 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
animals.xcf
View File

Binary file not shown.

41
index.html
View File

@ -16,8 +16,8 @@
body {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
height: 100dvh;
width: 100dvw;
padding: 10px;
gap: 10px;
box-sizing: border-box;
@ -107,17 +107,24 @@
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
.removed {
visibility: hidden;
height: 0;
width: 0;
}
</style>
<script>
let timeoutSeconds = 60;
let image_position = '';
function updateImage() {
const img = document.querySelector('img');
const gridSize = 4;
const gridCols = 4;
const gridRows = 6;
const cellSize = 256; // 1024 / 4
const index = Math.floor(Math.random() * (gridSize * gridSize));
const row = Math.floor(index / gridSize);
const col = index % gridSize;
const index = Math.floor(Math.random() * (gridCols * gridRows));
const row = Math.floor(index / gridCols);
const col = index % gridCols;
const x = -col * cellSize;
const y = -row * cellSize;
const new_image_position = `${x}px ${y}px`;
@ -131,6 +138,8 @@
function handleClick() {
updateImage();
const start = document.getElementById("svg-start");
const next = document.getElementById("svg-next");
const btn = document.getElementById("button-start");
const img = document.getElementById("pantomime-img");
const timeoutInput = document.getElementById('timeoutInput');
@ -141,13 +150,15 @@
if (timeoutSeconds > 300) timeoutSeconds = 300;
timeoutInput.value = timeoutSeconds;
img.classList.remove('hidden', 'bw');
btn.classList.add('hidden');
next.classList.remove('removed');
start.classList.add('removed');
timeoutInput.classList.add('hidden');
timeoutInputLabel.classList.add('hidden');
setTimeout(() => {
img.classList.add('bw');
btn.classList.remove('hidden');
start.classList.remove('removed');
next.classList.add('removed');
timeoutInput.classList.remove('hidden');
timeoutInputLabel.classList.remove('hidden');
}, 1000 * timeoutSeconds);
@ -162,7 +173,19 @@
<div class="image-container">
<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
</div>
<button type="button" id="button-start" onclick="handleClick()">Start</button>
<button type="button" id="button-start" onclick="handleClick()">
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"> -->
<!---->
<!-- <path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z" /> -->
<!-- </svg> -->
<svg id="svg-next" class="removed" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem"
fill="#e3e3e3">
<path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
</svg>
<svg id="svg-start" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="18rem" fill="#e3e3e3">
<path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z" />
</svg>
</button>
</body>
</html>