|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Word Game Interface</title> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> |
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script> |
|
<style> |
|
:root { |
|
--cerulean: #227c9dff; |
|
--light-sea-green: #17c3b2ff; |
|
--sunset: #ffcb77ff; |
|
--floral-white: #fef9efff; |
|
--light-red: #fe6d73ff; |
|
} |
|
.cerulean { background-color: var(--cerulean); } |
|
.light-sea-green { background-color: var(--light-sea-green); } |
|
.sunset { background-color: var(--sunset); } |
|
.floral-white { background-color: var(--floral-white); } |
|
.light-red { background-color: var(--light-red); } |
|
.pop-in { animation: pop-in 0.3s ease-out; } |
|
.pop-out { animation: pop-out 0.3s ease-out; } |
|
@keyframes pop-in { |
|
from { transform: scale(0.5); opacity: 0; } |
|
to { transform: scale(1); opacity: 1; } |
|
} |
|
@keyframes pop-out { |
|
from { transform: scale(1); opacity: 1; } |
|
to { transform: scale(0.5); opacity: 0; } |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center relative"> |
|
|
|
<div id="hints-container" class="absolute top-4 left-4 flex flex-col gap-4"> |
|
|
|
</div> |
|
|
|
|
|
<div id="large-square" class="mb-10 w-48 h-48 bg-purple-500 flex flex-col items-center justify-center rounded-lg shadow-lg text-white font-bold text-xl"> |
|
<span class="iconify" data-icon="mdi:account-tie" data-width="48" data-height="48"></span> |
|
Professor |
|
</div> |
|
|
|
|
|
<div id="grid-container" class="grid gap-4 p-4"></div> |
|
|
|
|
|
|
|
<div id="chat-box" class="w-96 bg-white p-4 flex flex-col border-l border-gray-300 absolute right-4 top-4 rounded-lg shadow-md h-[70vh]"> |
|
<h2 class="text-lg font-bold text-gray-700 mb-4">Stream</h2> |
|
<div id="chat-content" class="flex-1 flex flex-col gap-2 overflow-y-auto scroll-smooth"></div> |
|
</div> |
|
|
|
<script> |
|
|
|
const chatContent = document.getElementById('chat-content'); |
|
const autoScrollChat = () => { |
|
chatContent.scrollTop = chatContent.scrollHeight; |
|
}; |
|
|
|
|
|
const observer = new MutationObserver(autoScrollChat); |
|
|
|
|
|
observer.observe(chatContent, { |
|
childList: true, |
|
subtree: true |
|
}); |
|
</script> |
|
|
|
|
|
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-lg"> |
|
<div class="flex items-center gap-2"> |
|
<input |
|
id="guess-input" |
|
type="text" |
|
placeholder="Enter your advice..." |
|
class="flex-1 border border-gray-300 rounded px-4 py-2 focus:ring focus:ring-blue-400 focus:outline-none" |
|
/> |
|
<button |
|
id="submit-guess" |
|
class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition" |
|
> |
|
Send |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="fixed bottom-4 left-4 w-64 bg-white shadow-lg rounded-lg p-4 text-sm"> |
|
<div id="status" class="text-xs mb-2"></div> |
|
<div id="timer" class="text-sm font-bold mb-2"></div> |
|
<div id="game-info" class="text-xs"></div> |
|
|
|
<div class="mt-2"> |
|
<select id="personality-select" class="w-full text-xs p-1 border rounded"> |
|
<option value="normal">normal</option> |
|
<option value="genuine_friend">genuine friend</option> |
|
<option value="sensitive_to_compliments">sensitive to compliments</option> |
|
<option value="rebellious">rebel</option> |
|
</select> |
|
<input id="dev-guess-input" type="text" placeholder="Enter advice..." class="w-full text-xs p-1 mt-1 border rounded"/> |
|
<button id="submit-guess-btn" class="w-full bg-indigo-600 text-white text-xs p-1 mt-1 rounded"> |
|
Submit |
|
</button> |
|
</div> |
|
|
|
<div id="feedback-section" class="mt-2 text-xs hidden"> |
|
<div class="flex justify-between"> |
|
<span id="guessed-word"></span> |
|
<span id="guess-score"></span> |
|
</div> |
|
<p id="feedback-text" class="mt-1"></p> |
|
</div> |
|
</div> |
|
|
|
<script src="./game_logic.js"></script> |
|
<script src="./music_controller.js"></script> |
|
<script src="./eleven_labs_script.js"></script> |
|
<script src="./personality_allocation.js"></script> |
|
<script src="./populate_interface.js"></script> |
|
|
|
|
|
</body> |
|
</html> |
