tomh104/charade_experiment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added in-person support

Browse Source
This commit is contained in:
Tom Hempel
2025-09-20 15:26:19 +02:00
parent 6d9d624510
commit aff4244921
3 changed files with 347 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
experiment-scripts/app.py
View File

@ -66,6 +66,10 @@ SERVER_PORT = 5000
async def read_index():
return FileResponse('index.html')
@app.get("/display")
async def read_display():
return FileResponse('player-display.html')
@app.post("/facialexpressions")
def read_item(weights: list[float]):
msg = ';'.join(str(w) for w in weights)
@ -82,13 +86,53 @@ class Word(BaseModel):
class WordList(BaseModel):
words: list[str]
# Global state for current word display
current_word_state = {
"word": "",
"timeSeconds": 0.0,
"lastWordStatus": -1,
"startTime": None
}
@app.post("/word")
def read_word(word: Word):
import time
# Only update global state for player display if word is not empty
# (avoid overwriting with empty words sent to "other" player)
if word.word and word.word.strip():
current_word_state["word"] = word.word
current_word_state["timeSeconds"] = word.timeSeconds
current_word_state["lastWordStatus"] = word.lastWordStatus
current_word_state["startTime"] = time.time() if word.timeSeconds > 0 else None
msg = f"CHARADE:{word.lastWordStatus};{word.timeSeconds};{word.word}"
print(msg)
sock.sendto(msg.encode('utf-8'), (word.target, 5000))
return { "status": "ok" }
@app.get("/current-word")
def get_current_word():
import time
if current_word_state["startTime"] is None:
return {
"word": current_word_state["word"],
"timeRemaining": 0.0,
"lastWordStatus": current_word_state["lastWordStatus"],
"isActive": bool(current_word_state["word"])
}
elapsed = time.time() - current_word_state["startTime"]
time_remaining = max(0, current_word_state["timeSeconds"] - elapsed)
return {
"word": current_word_state["word"],
"timeRemaining": time_remaining,
"lastWordStatus": current_word_state["lastWordStatus"],
"isActive": time_remaining > 0 and bool(current_word_state["word"])
}
@app.post("/shuffle")
def shuffle_words(word_list: WordList):
import random

2
experiment-scripts/index.html
View File

@ -393,7 +393,7 @@
last = timestamp;
runningWordIndex = 0;
newWord = true;
lastWordStatus = 1;
lastWordStatus = -1; // First word has no previous word
}
const elapsed = timestamp - last;
last = timestamp;

302
experiment-scripts/player-display.html Normal file
View File

@ -0,0 +1,302 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charades Player Display</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container {
text-align: center;
width: 90%;
max-width: 1200px;
}
.status-bar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.3);
padding: 10px 30px;
border-radius: 25px;
font-size: 1.2rem;
backdrop-filter: blur(10px);
}
.word-display {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 60px 40px;
margin: 40px 0;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.current-word {
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.2;
word-wrap: break-word;
}
.timer {
font-size: 3rem;
color: #ffd700;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
margin-top: 20px;
}
.timer.warning {
color: #ff6b6b;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.waiting-message {
font-size: 2rem;
opacity: 0.8;
font-style: italic;
}
.last-word-status {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 15px 30px;
border-radius: 15px;
font-size: 1.5rem;
font-weight: bold;
}
.status-correct {
background: rgba(76, 175, 80, 0.9);
color: white;
}
.status-incorrect {
background: rgba(244, 67, 54, 0.9);
color: white;
}
.status-hidden {
display: none;
}
.connection-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
border-radius: 15px;
font-size: 1rem;
font-weight: bold;
}
.connected {
background: rgba(76, 175, 80, 0.9);
}
.disconnected {
background: rgba(244, 67, 54, 0.9);
}
@media (max-width: 768px) {
.current-word {
font-size: 2.5rem;
}
.timer {
font-size: 2rem;
}
.waiting-message {
font-size: 1.5rem;
}
.word-display {
padding: 40px 20px;
}
}
</style>
</head>
<body>
<div class="status-bar">
<span id="player-info">Waiting for game to start...</span>
</div>
<div class="connection-status connected" id="connection-status">
Connected
</div>
<div class="container">
<div class="word-display">
<div id="current-word" class="current-word" style="display: none;"></div>
<div id="waiting-message" class="waiting-message">
Waiting for the next word...
</div>
<div id="timer" class="timer" style="display: none;"></div>
</div>
</div>
<div id="last-word-status" class="last-word-status status-hidden"></div>
<script>
// Elements
const currentWordEl = document.getElementById('current-word');
const waitingMessageEl = document.getElementById('waiting-message');
const timerEl = document.getElementById('timer');
const lastWordStatusEl = document.getElementById('last-word-status');
const playerInfoEl = document.getElementById('player-info');
const connectionStatusEl = document.getElementById('connection-status');
let lastWordStatus = -1;
let pollInterval = null;
async function fetchCurrentWord() {
try {
const response = await fetch('/current-word');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
updateDisplay(data);
// Update connection status
connectionStatusEl.textContent = 'Connected';
connectionStatusEl.className = 'connection-status connected';
} catch (error) {
console.error('Error fetching current word:', error);
connectionStatusEl.textContent = 'Connection Error';
connectionStatusEl.className = 'connection-status disconnected';
}
}
function updateDisplay(data) {
// Show last word status only when it changes and is not -1 (no previous word)
if (data.lastWordStatus !== lastWordStatus && data.lastWordStatus !== -1) {
showLastWordStatus(data.lastWordStatus);
lastWordStatus = data.lastWordStatus;
}
if (data.isActive && data.word && data.word.trim() !== '') {
// Show active word with timer
currentWordEl.textContent = data.word;
currentWordEl.style.display = 'block';
waitingMessageEl.style.display = 'none';
timerEl.style.display = 'block';
updateTimer(data.timeRemaining);
playerInfoEl.textContent = `Current Word - Time Remaining: ${data.timeRemaining.toFixed(1)}s`;
} else if (!data.isActive && data.word && data.word.trim() !== '') {
// Show word without timer (time is up or no time set)
currentWordEl.textContent = data.word;
currentWordEl.style.display = 'block';
waitingMessageEl.style.display = 'none';
timerEl.style.display = 'none';
playerInfoEl.textContent = 'Current Word - No Time Limit';
} else {
// No word, show waiting message
currentWordEl.style.display = 'none';
waitingMessageEl.style.display = 'block';
timerEl.style.display = 'none';
playerInfoEl.textContent = 'Waiting for next word...';
}
}
function updateTimer(timeRemaining) {
const seconds = Math.max(0, timeRemaining);
timerEl.textContent = seconds.toFixed(1) + 's';
// Add warning class when time is low
if (seconds <= 10) {
timerEl.classList.add('warning');
} else {
timerEl.classList.remove('warning');
}
}
function showLastWordStatus(status) {
if (status === 1) {
lastWordStatusEl.textContent = '✅ Previous word: CORRECT!';
lastWordStatusEl.className = 'last-word-status status-correct';
setTimeout(() => {
lastWordStatusEl.className = 'last-word-status status-hidden';
}, 3000);
} else if (status === 0) {
lastWordStatusEl.textContent = '❌ Previous word: Time up!';
lastWordStatusEl.className = 'last-word-status status-incorrect';
setTimeout(() => {
lastWordStatusEl.className = 'last-word-status status-hidden';
}, 3000);
}
}
function startPolling() {
// Initial fetch
fetchCurrentWord();
// Poll every 200ms for smooth timer updates
pollInterval = setInterval(fetchCurrentWord, 200);
}
function stopPolling() {
if (pollInterval) {
clearInterval(pollInterval);
pollInterval = null;
}
}
// Start polling when page loads
window.addEventListener('load', () => {
startPolling();
});
// Stop polling when page is about to unload
window.addEventListener('beforeunload', () => {
stopPolling();
});
// Handle page visibility changes (pause polling when tab is hidden)
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
stopPolling();
} else {
startPolling();
}
});
</script>
</body>
</html>