Hugging Face's logo

Spaces:
Mistral-AI-Game-Jam
/
le-mot
Running

App Files Community
5
le-mot
File size: 4,313 Bytes 
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87d6aca
2ce42d3
a5d672e
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8160d44
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<!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">
  <!-- Hint Section -->
  <div id="hints-container" class="absolute top-4 left-4 flex flex-col gap-4">
    <!-- Hints will be dynamically inserted here -->
  </div>

  <!-- Professor Section -->
  <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>

  <!-- Dynamic Grid -->
  <div id="grid-container" class="grid gap-4 p-4"></div>

  <!-- Chat Section -->
  <div id="chat-box" class="w-96 bg-white p-4 flex flex-col overflow-y-auto border-l border-gray-300 absolute right-4 top-4 rounded-lg shadow-md h-[50vh]">
    <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 h-[50vh]"></div>
  </div>

  <!-- Input Field -->
  <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>

  <!-- Dev Interface (Bottom Left) -->
  <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="./eleven_labs_script.js"></script>
  <script src="./personality_allocation.js"></script>
  <script src="./populate_interface.js"></script>
  
  
</body>
</html>