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 { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100dvh;
width: 100vw; width: 100dvw;
padding: 10px; padding: 10px;
gap: 10px; gap: 10px;
box-sizing: border-box; box-sizing: border-box;
@ -107,17 +107,24 @@
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
} }
.removed {
visibility: hidden;
height: 0;
width: 0;
}
</style> </style>
<script> <script>
let timeoutSeconds = 60; let timeoutSeconds = 60;
let image_position = ''; let image_position = '';
function updateImage() { function updateImage() {
const img = document.querySelector('img'); const img = document.querySelector('img');
const gridSize = 4; const gridCols = 4;
const gridRows = 6;
const cellSize = 256; // 1024 / 4 const cellSize = 256; // 1024 / 4
const index = Math.floor(Math.random() * (gridSize * gridSize)); const index = Math.floor(Math.random() * (gridCols * gridRows));
const row = Math.floor(index / gridSize); const row = Math.floor(index / gridCols);
const col = index % gridSize; const col = index % gridCols;
const x = -col * cellSize; const x = -col * cellSize;
const y = -row * cellSize; const y = -row * cellSize;
const new_image_position = `${x}px ${y}px`; const new_image_position = `${x}px ${y}px`;
@ -131,6 +138,8 @@
function handleClick() { function handleClick() {
updateImage(); updateImage();
const start = document.getElementById("svg-start");
const next = document.getElementById("svg-next");
const btn = document.getElementById("button-start"); const btn = document.getElementById("button-start");
const img = document.getElementById("pantomime-img"); const img = document.getElementById("pantomime-img");
const timeoutInput = document.getElementById('timeoutInput'); const timeoutInput = document.getElementById('timeoutInput');
@ -141,13 +150,15 @@
if (timeoutSeconds > 300) timeoutSeconds = 300; if (timeoutSeconds > 300) timeoutSeconds = 300;
timeoutInput.value = timeoutSeconds; timeoutInput.value = timeoutSeconds;
img.classList.remove('hidden', 'bw'); img.classList.remove('hidden', 'bw');
btn.classList.add('hidden'); next.classList.remove('removed');
start.classList.add('removed');
timeoutInput.classList.add('hidden'); timeoutInput.classList.add('hidden');
timeoutInputLabel.classList.add('hidden'); timeoutInputLabel.classList.add('hidden');
setTimeout(() => { setTimeout(() => {
img.classList.add('bw'); img.classList.add('bw');
btn.classList.remove('hidden'); start.classList.remove('removed');
next.classList.add('removed');
timeoutInput.classList.remove('hidden'); timeoutInput.classList.remove('hidden');
timeoutInputLabel.classList.remove('hidden'); timeoutInputLabel.classList.remove('hidden');
}, 1000 * timeoutSeconds); }, 1000 * timeoutSeconds);
@ -162,7 +173,19 @@
<div class="image-container"> <div class="image-container">
<img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" /> <img id="pantomime-img" class="hidden" src="animals.png" alt="Pantomime Image" />
</div> </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> </body>
</html> </html>