Hugging Face's logo

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

App Files Community
5
le-mot
File size: 4,988 Bytes 
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68a79f3
 
1906716
 
 
2ce42d3
 
 
 
 
 
 
 
 
 
87d6aca
2ce42d3
a5d672e
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d43f0ae
 
2ce42d3
 
 
 
 
 
 
 
 
8160d44
2ce42d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d43f0ae
 
 
7cd69f2
d43f0ae
 
7cd69f2
 
 
 
 
 
d43f0ae
 
 
 
 
 
 
 
 
 
2ce42d3
d43f0ae
 
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<!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/tailwindcss@2.2.19/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">
  <!-- Title -->
  <div class="flex justify-center items-start mt-4">
    <img src="./lemot.webp" alt="Lemot Logo" class="h-48 w-auto">
  </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 id="dev_dbug"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>
  

  <script>
    const toggleBtn = document.createElement('button');
toggleBtn.innerHTML = '👁️‍🗨️';
toggleBtn.style.cssText = 'position: fixed; bottom: 16px; left: 16px; background: #1f2937; border: none; border-radius: 50%; padding: 8px; cursor: pointer; color: white;';

let isVisible = false;
const debugEl = document.getElementById('dev_dbug');
if (debugEl) {
    debugEl.style.opacity = '0';
}

toggleBtn.onclick = () => {
    if (debugEl) {
        isVisible = !isVisible;
        debugEl.style.opacity = isVisible ? '1' : '0';
        toggleBtn.innerHTML = isVisible ? '👁️' : '👁️‍🗨️';
    }
};

document.body.appendChild(toggleBtn);
  </script>
</body>
</html>