Hugging Face's logo

Spaces:
V-Booking
/
f
Running

App Files Community
V-Booking commited on
Commit
e8aace9
·
verified ·
1 Parent(s): f2487a1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +980 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: F
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: f
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,980 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>لعبة سكرو - Skru Card Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ min-height: 100vh;
16
+ }
17
+
18
+ .card {
19
+ width: 80px;
20
+ height: 120px;
21
+ border-radius: 8px;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ transition: all 0.3s ease;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ font-weight: bold;
28
+ position: relative;
29
+ cursor: pointer;
30
+ }
31
+
32
+ .card:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ .card-back {
38
+ background: linear-gradient(45deg, #8e2de2, #4a00e0);
39
+ color: white;
40
+ }
41
+
42
+ .card-front {
43
+ background: white;
44
+ color: #333;
45
+ }
46
+
47
+ .player-area {
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .player-area.active {
52
+ border: 3px solid #4CAF50;
53
+ box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
54
+ }
55
+
56
+ .special-card {
57
+ background: linear-gradient(45deg, #ff416c, #ff4b2b);
58
+ color: white;
59
+ }
60
+
61
+ .modal {
62
+ transition: all 0.3s ease;
63
+ }
64
+
65
+ .modal.show {
66
+ opacity: 1;
67
+ pointer-events: auto;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="text-gray-800">
72
+ <div class="container mx-auto px-4 py-8">
73
+ <header class="text-center mb-8">
74
+ <h1 class="text-4xl font-bold text-indigo-800 mb-2">لعبة سكرو</h1>
75
+ <p class="text-lg text-gray-600">اللعبة التي تتحدى ذكاءك وتركيزك!</p>
76
+ </header>
77
+
78
+ <!-- Game Mode Selection -->
79
+ <div id="mode-selection" class="bg-white rounded-lg shadow-lg p-6 mb-8">
80
+ <h2 class="text-2xl font-bold mb-4 text-center text-indigo-700">اختر نمط اللعبة</h2>
81
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
82
+ <div class="mode-option bg-indigo-50 hover:bg-indigo-100 rounded-lg p-4 cursor-pointer transition" data-mode="general">
83
+ <h3 class="font-bold text-lg text-indigo-800">سكرو العامة</h3>
84
+ <p class="text-gray-600">يمكن اللعبة واضافة جميع الاوراق</p>
85
+ </div>
86
+ <div class="mode-option bg-indigo-50 hover:bg-indigo-100 rounded-lg p-4 cursor-pointer transition" data-mode="classic">
87
+ <h3 class="font-bold text-lg text-indigo-800">سكرو كلاسيك</h3>
88
+ <p class="text-gray-600">جميع الاوراق ما عدا كرت الحرامي وكرتين بينج وبونج</p>
89
+ </div>
90
+ <div class="mode-option bg-indigo-50 hover:bg-indigo-100 rounded-lg p-4 cursor-pointer transition" data-mode="thief">
91
+ <h3 class="font-bold text-lg text-indigo-800">سكرو الحرامي</h3>
92
+ <p class="text-gray-600">جميع الاوراق ما عدا كرت بينج وبونج</p>
93
+ </div>
94
+ <div class="mode-option bg-indigo-50 hover:bg-indigo-100 rounded-lg p-4 cursor-pointer transition" data-mode="duos">
95
+ <h3 class="font-bold text-lg text-indigo-800">سكرو الثنائيات</h3>
96
+ <p class="text-gray-600">جميع الاوراق ما عدا كرت الحرامي</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Player Setup -->
102
+ <div id="player-setup" class="bg-white rounded-lg shadow-lg p-6 mb-8 hidden">
103
+ <h2 class="text-2xl font-bold mb-4 text-center text-indigo-700">إعداد اللاعبين</h2>
104
+ <div class="mb-4">
105
+ <label class="block text-gray-700 mb-2">عدد اللاعبين (2-6)</label>
106
+ <input type="number" min="2" max="6" value="4" class="w-full px-3 py-2 border border-gray-300 rounded-md">
107
+ </div>
108
+ <div id="player-names" class="space-y-3">
109
+ <!-- Player name inputs will be added here -->
110
+ </div>
111
+ <button id="start-game" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-md mt-4 transition">
112
+ بدء اللعبة
113
+ </button>
114
+ </div>
115
+
116
+ <!-- Game Board -->
117
+ <div id="game-board" class="hidden">
118
+ <!-- Game Info -->
119
+ <div class="flex justify-between items-center mb-6">
120
+ <div class="bg-white rounded-lg shadow px-4 py-2">
121
+ <span class="font-bold">الجولة:</span> <span id="round-number">1</span>
122
+ <span class="mx-2">|</span>
123
+ <span class="font-bold">النمط:</span> <span id="game-mode">سكرو العامة</span>
124
+ </div>
125
+ <button id="end-game" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition">
126
+ إنهاء اللعبة
127
+ </button>
128
+ </div>
129
+
130
+ <!-- Center Area -->
131
+ <div class="relative mb-16">
132
+ <!-- Draw Pile -->
133
+ <div class="absolute left-1/2 transform -translate-x-1/2 -top-8">
134
+ <div id="draw-pile" class="card card-back flex flex-col items-center justify-center">
135
+ <i class="fas fa-layer-group text-2xl"></i>
136
+ <span class="text-xs mt-1">السحب</span>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Discard Pile -->
141
+ <div class="flex justify-center">
142
+ <div id="discard-pile" class="card card-front mx-2">
143
+ <!-- Cards will be placed here -->
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Current Round Info -->
148
+ <div class="absolute right-0 -top-8 bg-white rounded-lg shadow px-4 py-1 text-center">
149
+ <div id="round-info" class="font-bold text-indigo-700">الجولة الأولى: النظر إلى أول كرتين على اليمين</div>
150
+ <div id="round-warning" class="text-xs text-red-500 hidden">تحذير: +10 عند مخالفة قواعد الجولة</div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Players Area -->
155
+ <div id="players-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
156
+ <!-- Player areas will be added here -->
157
+ </div>
158
+
159
+ <!-- Current Player Actions -->
160
+ <div id="player-actions" class="bg-white rounded-lg shadow-lg p-4 mt-8 hidden">
161
+ <h3 class="font-bold mb-2 text-center">اختياراتك</h3>
162
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
163
+ <button id="draw-from-pile" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition">
164
+ <i class="fas fa-draw-polygon mr-2"></i> سحب من ميدان الكروت
165
+ </button>
166
+ <button id="draw-from-discard" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition">
167
+ <i class="fas fa-hand-paper mr-2"></i> سحب من الأرض
168
+ </button>
169
+ <button id="play-similar" class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded transition">
170
+ <i class="fas fa-exchange-alt mr-2"></i> التخلص من كرت مشابه
171
+ </button>
172
+ </div>
173
+ <div class="mt-4 text-center">
174
+ <button id="declare-skru" class="bg-red-500 hover:bg-red-600 text-white py-2 px-6 rounded-lg font-bold transition">
175
+ <i class="fas fa-flag mr-2"></i> سكرو!
176
+ </button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Card Selection Modal -->
182
+ <div id="card-selection-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
183
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
184
+ <h3 class="font-bold text-xl mb-4 text-center">اختر كرت</h3>
185
+ <div id="selectable-cards" class="flex flex-wrap justify-center gap-2 mb-4">
186
+ <!-- Cards will be added here -->
187
+ </div>
188
+ <div class="flex justify-center gap-4">
189
+ <button id="confirm-selection" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition">
190
+ تأكيد
191
+ </button>
192
+ <button id="cancel-selection" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition">
193
+ إلغاء
194
+ </button>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Game Over Modal -->
200
+ <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
201
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
202
+ <h3 class="font-bold text-2xl mb-4 text-center text-indigo-800">نتيجة اللعبة</h3>
203
+ <div id="game-results" class="mb-6">
204
+ <!-- Results will be added here -->
205
+ </div>
206
+ <div class="flex justify-center">
207
+ <button id="play-again" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-bold transition">
208
+ لعب مرة أخرى
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Rules Modal -->
215
+ <div id="rules-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
216
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
217
+ <div class="flex justify-between items-center mb-4">
218
+ <h3 class="font-bold text-xl text-indigo-800">قواعد لعبة سكرو</h3>
219
+ <button id="close-rules" class="text-gray-500 hover:text-gray-700">
220
+ <i class="fas fa-times"></i>
221
+ </button>
222
+ </div>
223
+
224
+ <div class="space-y-4">
225
+ <div>
226
+ <h4 class="font-bold text-lg">هدف اللعبة:</h4>
227
+ <p>الحصول على أقل عدد من الأرقام في نهاية الجولة.</p>
228
+ </div>
229
+
230
+ <div>
231
+ <h4 class="font-bold text-lg">بداية اللعبة:</h4>
232
+ <ul class="list-disc list-inside space-y-1">
233
+ <li>كل لاعب يحصل على 4 كروت غير مكشوفة</li>
234
+ <li>يتم وضع ميدان للكروت في المنتصف</li>
235
+ <li>اللاعبون يسحبون بالترتيب من اليمين إلى اليسار</li>
236
+ </ul>
237
+ </div>
238
+
239
+ <div>
240
+ <h4 class="font-bold text-lg">طرق اللعب:</h4>
241
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
242
+ <div class="bg-indigo-50 p-3 rounded">
243
+ <h5 class="font-bold">سكرو العامة</h5>
244
+ <p>يمكن اللعبة واضافة جميع الاوراق</p>
245
+ </div>
246
+ <div class="bg-indigo-50 p-3 rounded">
247
+ <h5 class="font-bold">سكرو كلاسيك</h5>
248
+ <p>جميع الاوراق ما عدا كرت الحرامي وكرتين بينج وبونج</p>
249
+ </div>
250
+ <div class="bg-indigo-50 p-3 rounded">
251
+ <h5 class="font-bold">سكرو الحرامي</h5>
252
+ <p>جميع الاوراق ما عدا كرت بينج وبونج</p>
253
+ </div>
254
+ <div class="bg-indigo-50 p-3 rounded">
255
+ <h5 class="font-bold">سكرو الثنائيات</h5>
256
+ <p>جميع الاوراق ما عدا كرت الحرامي</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div>
262
+ <h4 class="font-bold text-lg">خيارات اللاعب:</h4>
263
+ <ol class="list-decimal list-inside space-y-1">
264
+ <li>سحب من ميدان الكروت ثم الاحتفاظ به أو التخلص منه</li>
265
+ <li>سحب من الأرض آخر كرت تركه اللاعب السابق</li>
266
+ <li>التخلص من كرت يشابه آخر كرت في الأرض</li>
267
+ </ol>
268
+ <p class="mt-2 text-red-500 text-sm">⛔️ تحذير: إذا لم يكن الكرت مشابهاً يعود إليه كرته + الكرت الآخر</p>
269
+ </div>
270
+
271
+ <div>
272
+ <h4 class="font-bold text-lg">جولات اللعبة:</h4>
273
+ <div class="space-y-3">
274
+ <div class="bg-yellow-50 p-3 rounded">
275
+ <h5 class="font-bold">الجولة الأولى</h5>
276
+ <p>ينظر الجميع إلى أول كرتين على اليمين فقط</p>
277
+ <p class="text-red-500 text-sm">⛔️ تحذير: +10 عند النظر إلى أكثر من كرتين أو تبديل الكروت</p>
278
+ </div>
279
+ <div class="bg-blue-50 p-3 rounded">
280
+ <h5 class="font-bold">الجولة الثانية (الصامتة)</h5>
281
+ <p>لا يجوز الكلام خلال هذه الجولة</p>
282
+ <p class="text-red-500 text-sm">⛔️ تحذير: +10 عند الكلام</p>
283
+ </div>
284
+ <div class="bg-green-50 p-3 rounded">
285
+ <h5 class="font-bold">الجولة الثالثة</h5>
286
+ <p>لا يستطيع أي لاعب النظر إلى كروته</p>
287
+ <p class="text-red-500 text-sm">⛔️ تحذير: +10 عند النظر إلى أي كرت</p>
288
+ </div>
289
+ <div class="bg-purple-50 p-3 rounded">
290
+ <h5 class="font-bold">الجولة الرابعة</h5>
291
+ <p>جولة الدبل: مجموع ما تحصل عليه بعد انتهاء الجولة × 2</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <div>
297
+ <h4 class="font-bold text-lg">مهام الكروت الخاصة:</h4>
298
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
299
+ <div class="bg-pink-50 p-3 rounded">
300
+ <h5 class="font-bold">7 أو 8</h5>
301
+ <p>تنظر في كرت واحد فقط من كروتك</p>
302
+ </div>
303
+ <div class="bg-pink-50 p-3 rounded">
304
+ <h5 class="font-bold">9 أو 10</h5>
305
+ <p>تنظر في كرت واحد فقط من أحد اللاعبين</p>
306
+ </div>
307
+ <div class="bg-pink-50 p-3 rounded">
308
+ <h5 class="font-bold">البصرة</h5>
309
+ <p>تستطيع التخلص من كرت من كروتك باختيارك</p>
310
+ </div>
311
+ <div class="bg-pink-50 p-3 rounded">
312
+ <h5 class="font-bold">خذ وهات</h5>
313
+ <p>تستبدل كرت من أحد اللاعبين بكرت من عندك دون النظر</p>
314
+ </div>
315
+ <div class="bg-pink-50 p-3 rounded">
316
+ <h5 class="font-bold">خذ بس</h5>
317
+ <p>تستطيع إعطاء كرت من كروتك لأحد اللاعبين</p>
318
+ </div>
319
+ <div class="bg-pink-50 p-3 rounded">
320
+ <h5 class="font-bold">دائر ما يدور</h5>
321
+ <p>تنظر في كرت واحد من كل لاعب أو كرتين من أوراقك</p>
322
+ </div>
323
+ <div class="bg-pink-50 p-3 rounded">
324
+ <h5 class="font-bold">عجب ما عجب</h5>
325
+ <p>مثل خذ وهات ولكن مع خيار الاستبدال مع لاعب آخر</p>
326
+ </div>
327
+ <div class="bg-pink-50 p-3 rounded">
328
+ <h5 class="font-bold">الحرامي</h5>
329
+ <p>لا يمكن التخلص منه ويقوم بسرقة نقاط الخصم</p>
330
+ </div>
331
+ <div class="bg-pink-50 p-3 rounded">
332
+ <h5 class="font-bold">بونج/بينج</h5>
333
+ <p>تمنع فريق الخصم من اللعب في الجولة التالية</p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div>
339
+ <h4 class="font-bold text-lg">نهاية اللعبة:</h4>
340
+ <p>عندما يقول لاعب "سكرو"، يكمل الجميع حتى يعود دوره ثم تكشف الكروت. اللاعب الأقل عدداً هو الفائز، وقد يكون هناك أكثر من فائز. الخاسر هو من لديه أكبر مجموع أرقام.</p>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Help Button -->
347
+ <button id="help-button" class="fixed bottom-6 left-6 bg-indigo-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-indigo-700 transition z-40">
348
+ <i class="fas fa-question text-xl"></i>
349
+ </button>
350
+ </div>
351
+
352
+ <script>
353
+ // Game State
354
+ const gameState = {
355
+ mode: null,
356
+ players: [],
357
+ currentPlayerIndex: 0,
358
+ round: 1,
359
+ drawPile: [],
360
+ discardPile: [],
361
+ gameStarted: false,
362
+ skruDeclared: false,
363
+ skruPlayer: null,
364
+ specialCards: {
365
+ thief: 'الحرامي',
366
+ bing: 'بينج',
367
+ bong: 'بونج',
368
+ basra: 'البصرة',
369
+ takeAndGive: 'خذ وهات',
370
+ takeOnly: 'خذ بس',
371
+ lookAround: 'دائر ما يدور',
372
+ likeOrNot: 'عجب ما عجب'
373
+ }
374
+ };
375
+
376
+ // DOM Elements
377
+ const modeSelection = document.getElementById('mode-selection');
378
+ const playerSetup = document.getElementById('player-setup');
379
+ const gameBoard = document.getElementById('game-board');
380
+ const playersContainer = document.getElementById('players-container');
381
+ const playerActions = document.getElementById('player-actions');
382
+ const drawPile = document.getElementById('draw-pile');
383
+ const discardPile = document.getElementById('discard-pile');
384
+ const roundNumber = document.getElementById('round-number');
385
+ const gameMode = document.getElementById('game-mode');
386
+ const roundInfo = document.getElementById('round-info');
387
+ const roundWarning = document.getElementById('round-warning');
388
+ const cardSelectionModal = document.getElementById('card-selection-modal');
389
+ const selectableCards = document.getElementById('selectable-cards');
390
+ const gameOverModal = document.getElementById('game-over-modal');
391
+ const gameResults = document.getElementById('game-results');
392
+ const rulesModal = document.getElementById('rules-modal');
393
+ const helpButton = document.getElementById('help-button');
394
+
395
+ // Buttons
396
+ const startGameBtn = document.getElementById('start-game');
397
+ const endGameBtn = document.getElementById('end-game');
398
+ const drawFromPileBtn = document.getElementById('draw-from-pile');
399
+ const drawFromDiscardBtn = document.getElementById('draw-from-discard');
400
+ const playSimilarBtn = document.getElementById('play-similar');
401
+ const declareSkruBtn = document.getElementById('declare-skru');
402
+ const confirmSelectionBtn = document.getElementById('confirm-selection');
403
+ const cancelSelectionBtn = document.getElementById('cancel-selection');
404
+ const playAgainBtn = document.getElementById('play-again');
405
+ const closeRulesBtn = document.getElementById('close-rules');
406
+
407
+ // Event Listeners
408
+ document.querySelectorAll('.mode-option').forEach(option => {
409
+ option.addEventListener('click', () => {
410
+ gameState.mode = option.dataset.mode;
411
+ modeSelection.classList.add('hidden');
412
+ playerSetup.classList.remove('hidden');
413
+
414
+ // Set game mode display text
415
+ let modeText = '';
416
+ switch(gameState.mode) {
417
+ case 'general': modeText = 'سكرو العامة'; break;
418
+ case 'classic': modeText = 'سكرو كلاسيك'; break;
419
+ case 'thief': modeText = 'سكرو الحرامي'; break;
420
+ case 'duos': modeText = 'سكرو الثنائيات'; break;
421
+ }
422
+ gameMode.textContent = modeText;
423
+
424
+ // Setup player name inputs
425
+ const playerCount = document.querySelector('#player-setup input').value;
426
+ setupPlayerInputs(playerCount);
427
+ });
428
+ });
429
+
430
+ document.querySelector('#player-setup input').addEventListener('input', (e) => {
431
+ setupPlayerInputs(e.target.value);
432
+ });
433
+
434
+ startGameBtn.addEventListener('click', startGame);
435
+ endGameBtn.addEventListener('click', endGame);
436
+ drawFromPileBtn.addEventListener('click', drawFromPile);
437
+ drawFromDiscardBtn.addEventListener('click', drawFromDiscard);
438
+ playSimilarBtn.addEventListener('click', playSimilarCard);
439
+ declareSkruBtn.addEventListener('click', declareSkru);
440
+ confirmSelectionBtn.addEventListener('click', confirmCardSelection);
441
+ cancelSelectionBtn.addEventListener('click', cancelCardSelection);
442
+ playAgainBtn.addEventListener('click', resetGame);
443
+ helpButton.addEventListener('click', showRules);
444
+ closeRulesBtn.addEventListener('click', hideRules);
445
+
446
+ // Functions
447
+ function setupPlayerInputs(count) {
448
+ const playerNames = document.getElementById('player-names');
449
+ playerNames.innerHTML = '';
450
+
451
+ for (let i = 0; i < count; i++) {
452
+ const div = document.createElement('div');
453
+ div.className = 'flex items-center';
454
+ div.innerHTML = `
455
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-2 rounded-l-md">لاعب ${i+1}</span>
456
+ <input type="text" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-md" placeholder="اسم اللاعب" required>
457
+ `;
458
+ playerNames.appendChild(div);
459
+ }
460
+ }
461
+
462
+ function startGame() {
463
+ // Get player names
464
+ const inputs = document.querySelectorAll('#player-setup input');
465
+ gameState.players = [];
466
+
467
+ inputs.forEach(input => {
468
+ if (input.type === 'text' && input.value.trim() !== '') {
469
+ gameState.players.push({
470
+ name: input.value.trim(),
471
+ cards: [],
472
+ points: 0,
473
+ isActive: false
474
+ });
475
+ }
476
+ });
477
+
478
+ if (gameState.players.length < 2) {
479
+ alert('يجب إدخال اسماء لاثنين من اللاعبين على الأقل');
480
+ return;
481
+ }
482
+
483
+ playerSetup.classList.add('hidden');
484
+ gameBoard.classList.remove('hidden');
485
+
486
+ // Initialize game
487
+ initializeGame();
488
+ }
489
+
490
+ function initializeGame() {
491
+ // Create deck based on game mode
492
+ gameState.drawPile = createDeck();
493
+
494
+ // Shuffle deck
495
+ shuffleDeck(gameState.drawPile);
496
+
497
+ // Deal cards to players (4 each)
498
+ gameState.players.forEach(player => {
499
+ player.cards = [];
500
+ for (let i = 0; i < 4; i++) {
501
+ player.cards.push({
502
+ value: gameState.drawPile.pop(),
503
+ isFaceUp: false
504
+ });
505
+ }
506
+ });
507
+
508
+ // Set first card in discard pile
509
+ gameState.discardPile = [gameState.drawPile.pop()];
510
+
511
+ // Set first player
512
+ gameState.currentPlayerIndex = 0;
513
+ gameState.players[0].isActive = true;
514
+
515
+ // Update UI
516
+ updateGameBoard();
517
+ updateRoundInfo();
518
+
519
+ // Show actions for current player
520
+ playerActions.classList.remove('hidden');
521
+ }
522
+
523
+ function createDeck() {
524
+ const deck = [];
525
+
526
+ // Regular cards (1-10)
527
+ for (let i = 1; i <= 10; i++) {
528
+ // Add 4 copies of each number
529
+ for (let j = 0; j < 4; j++) {
530
+ deck.push(i);
531
+ }
532
+ }
533
+
534
+ // Special cards based on game mode
535
+ switch(gameState.mode) {
536
+ case 'general': // All special cards
537
+ deck.push(gameState.specialCards.thief);
538
+ deck.push(gameState.specialCards.bing);
539
+ deck.push(gameState.specialCards.bong);
540
+ deck.push(gameState.specialCards.basra);
541
+ deck.push(gameState.specialCards.takeAndGive);
542
+ deck.push(gameState.specialCards.takeOnly);
543
+ deck.push(gameState.specialCards.lookAround);
544
+ deck.push(gameState.specialCards.likeOrNot);
545
+ break;
546
+
547
+ case 'classic': // All except thief, bing, bong
548
+ deck.push(gameState.specialCards.basra);
549
+ deck.push(gameState.specialCards.takeAndGive);
550
+ deck.push(gameState.specialCards.takeOnly);
551
+ deck.push(gameState.specialCards.lookAround);
552
+ deck.push(gameState.specialCards.likeOrNot);
553
+ break;
554
+
555
+ case 'thief': // All except bing, bong
556
+ deck.push(gameState.specialCards.thief);
557
+ deck.push(gameState.specialCards.basra);
558
+ deck.push(gameState.specialCards.takeAndGive);
559
+ deck.push(gameState.specialCards.takeOnly);
560
+ deck.push(gameState.specialCards.lookAround);
561
+ deck.push(gameState.specialCards.likeOrNot);
562
+ break;
563
+
564
+ case 'duos': // All except thief
565
+ deck.push(gameState.specialCards.bing);
566
+ deck.push(gameState.specialCards.bong);
567
+ deck.push(gameState.specialCards.basra);
568
+ deck.push(gameState.specialCards.takeAndGive);
569
+ deck.push(gameState.specialCards.takeOnly);
570
+ deck.push(gameState.specialCards.lookAround);
571
+ deck.push(gameState.specialCards.likeOrNot);
572
+ break;
573
+ }
574
+
575
+ return deck;
576
+ }
577
+
578
+ function shuffleDeck(deck) {
579
+ for (let i = deck.length - 1; i > 0; i--) {
580
+ const j = Math.floor(Math.random() * (i + 1));
581
+ [deck[i], deck[j]] = [deck[j], deck[i]];
582
+ }
583
+ }
584
+
585
+ function updateGameBoard() {
586
+ // Update players display
587
+ playersContainer.innerHTML = '';
588
+
589
+ gameState.players.forEach((player, index) => {
590
+ const playerDiv = document.createElement('div');
591
+ playerDiv.className = `player-area bg-white rounded-lg shadow p-4 ${player.isActive ? 'active' : ''}`;
592
+
593
+ const playerName = document.createElement('h3');
594
+ playerName.className = 'font-bold text-lg text-center mb-2';
595
+ playerName.textContent = player.name;
596
+
597
+ const playerCards = document.createElement('div');
598
+ playerCards.className = 'flex justify-center gap-2';
599
+
600
+ player.cards.forEach((card, cardIndex) => {
601
+ const cardDiv = document.createElement('div');
602
+ cardDiv.className = `card ${card.isFaceUp ? 'card-front' : 'card-back'}`;
603
+ cardDiv.textContent = card.isFaceUp ? card.value : '';
604
+ cardDiv.dataset.playerIndex = index;
605
+ cardDiv.dataset.cardIndex = cardIndex;
606
+
607
+ if (card.isFaceUp && typeof card.value === 'string') {
608
+ cardDiv.classList.add('special-card');
609
+ }
610
+
611
+ playerCards.appendChild(cardDiv);
612
+ });
613
+
614
+ const playerPoints = document.createElement('div');
615
+ playerPoints.className = 'text-center mt-2 text-gray-600';
616
+ playerPoints.textContent = `النقاط: ${player.points}`;
617
+
618
+ playerDiv.appendChild(playerName);
619
+ playerDiv.appendChild(playerCards);
620
+ playerDiv.appendChild(playerPoints);
621
+ playersContainer.appendChild(playerDiv);
622
+ });
623
+
624
+ // Update discard pile
625
+ discardPile.innerHTML = '';
626
+ if (gameState.discardPile.length > 0) {
627
+ const lastCard = gameState.discardPile[gameState.discardPile.length - 1];
628
+ const cardDiv = document.createElement('div');
629
+ cardDiv.className = 'card card-front';
630
+ cardDiv.textContent = lastCard;
631
+
632
+ if (typeof lastCard === 'string') {
633
+ cardDiv.classList.add('special-card');
634
+ }
635
+
636
+ discardPile.appendChild(cardDiv);
637
+ }
638
+
639
+ // Update draw pile count
640
+ drawPile.innerHTML = `
641
+ <i class="fas fa-layer-group text-2xl"></i>
642
+ <span class="text-xs mt-1">${gameState.drawPile.length}</span>
643
+ `;
644
+
645
+ // Update round number
646
+ roundNumber.textContent = gameState.round;
647
+ }
648
+
649
+ function updateRoundInfo() {
650
+ let info = '';
651
+ let warning = false;
652
+
653
+ switch(gameState.round) {
654
+ case 1:
655
+ info = 'الجولة الأولى: النظر إلى أول كرتين على اليمين فقط';
656
+ warning = true;
657
+ break;
658
+ case 2:
659
+ info = 'الجولة الثانية: الجولة الصامتة - ممنوع الكلام';
660
+ warning = true;
661
+ break;
662
+ case 3:
663
+ info = 'الجولة الثالثة: لا يمكن النظر إلى أي كرت من كروتك';
664
+ warning = true;
665
+ break;
666
+ case 4:
667
+ info = 'الجولة الرابعة: جولة الدبل - النقاط × 2';
668
+ break;
669
+ default:
670
+ info = `الجولة ${gameState.round}`;
671
+ }
672
+
673
+ roundInfo.textContent = info;
674
+
675
+ if (warning) {
676
+ roundWarning.classList.remove('hidden');
677
+ } else {
678
+ roundWarning.classList.add('hidden');
679
+ }
680
+ }
681
+
682
+ function drawFromPile() {
683
+ if (gameState.drawPile.length === 0) {
684
+ alert('لا توجد كروت متبقية في ميدان السحب!');
685
+ return;
686
+ }
687
+
688
+ const drawnCard = gameState.drawPile.pop();
689
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
690
+
691
+ // Show card selection modal to choose whether to keep or discard
692
+ showCardSelectionModal([{
693
+ value: drawnCard,
694
+ isFaceUp: true
695
+ }], 'ماذا تريد أن تفعل بهذا الكرت؟', true);
696
+ }
697
+
698
+ function drawFromDiscard() {
699
+ if (gameState.discardPile.length === 0) {
700
+ alert('لا توجد كروت في الأرض!');
701
+ return;
702
+ }
703
+
704
+ const drawnCard = gameState.discardPile.pop();
705
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
706
+
707
+ // Player must keep the card from discard
708
+ currentPlayer.cards.push({
709
+ value: drawnCard,
710
+ isFaceUp: true
711
+ });
712
+
713
+ // Check if player can play a similar card immediately
714
+ checkForSimilarCards();
715
+
716
+ updateGameBoard();
717
+ }
718
+
719
+ function playSimilarCard() {
720
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
721
+ const lastDiscard = gameState.discardPile[gameState.discardPile.length - 1];
722
+
723
+ // Find cards that match the last discarded card
724
+ const similarCards = currentPlayer.cards.filter(card =>
725
+ card.isFaceUp && card.value === lastDiscard
726
+ );
727
+
728
+ if (similarCards.length === 0) {
729
+ alert('ليس لديك أي كرت مشابه لآخر كرت في الأرض!');
730
+ return;
731
+ }
732
+
733
+ // Show card selection to choose which similar card to play
734
+ showCardSelectionModal(similarCards, 'اختر كرت للتخلص منه:');
735
+ }
736
+
737
+ function declareSkru() {
738
+ if (confirm('هل أنت متأكد أنك تريد إعلان "سكرو"؟')) {
739
+ gameState.skruDeclared = true;
740
+ gameState.skruPlayer = gameState.currentPlayerIndex;
741
+
742
+ // Current player skips their turn
743
+ nextPlayer();
744
+
745
+ // Hide actions for current player
746
+ playerActions.classList.add('hidden');
747
+
748
+ alert(`أعلن ${gameState.players[gameState.skruPlayer].name} "سكرو"! سيتم احتساب النقاط بعد انتهاء الجولة.`);
749
+ }
750
+ }
751
+
752
+ function checkForSimilarCards() {
753
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
754
+ const lastDiscard = gameState.discardPile[gameState.discardPile.length - 1];
755
+
756
+ // Check if player has any cards that match the last discarded card
757
+ const hasSimilar = currentPlayer.cards.some(card =>
758
+ card.isFaceUp && card.value === lastDiscard
759
+ );
760
+
761
+ if (hasSimilar) {
762
+ if (confirm('لديك كرت مشابه لآخر كرت في الأرض، هل تريد التخلص منه؟')) {
763
+ playSimilarCard();
764
+ }
765
+ }
766
+ }
767
+
768
+ function nextPlayer() {
769
+ // Deactivate current player
770
+ gameState.players[gameState.currentPlayerIndex].isActive = false;
771
+
772
+ // Move to next player
773
+ gameState.currentPlayerIndex = (gameState.currentPlayerIndex + 1) % gameState.players.length;
774
+
775
+ // Check if we've completed a full round
776
+ if (gameState.currentPlayerIndex === 0 && !gameState.skruDeclared) {
777
+ gameState.round++;
778
+ updateRoundInfo();
779
+
780
+ // Check for round-specific rules
781
+ applyRoundRules();
782
+ }
783
+
784
+ // Check if game should end (after skru)
785
+ if (gameState.skruDeclared && gameState.currentPlayerIndex === gameState.skruPlayer) {
786
+ endGame();
787
+ return;
788
+ }
789
+
790
+ // Activate next player
791
+ gameState.players[gameState.currentPlayerIndex].isActive = true;
792
+
793
+ // Update UI
794
+ updateGameBoard();
795
+
796
+ // Show actions for current player
797
+ playerActions.classList.remove('hidden');
798
+ }
799
+
800
+ function applyRoundRules() {
801
+ // Apply rules specific to each round
802
+ switch(gameState.round) {
803
+ case 1: // First round - players can look at first two cards on the right
804
+ gameState.players.forEach(player => {
805
+ // Reveal first two cards
806
+ if (player.cards.length >= 1) player.cards[0].isFaceUp = true;
807
+ if (player.cards.length >= 2) player.cards[1].isFaceUp = true;
808
+ });
809
+ break;
810
+
811
+ case 2: // Silent round - no talking (handled by UI warning)
812
+ break;
813
+
814
+ case 3: // No looking round - all cards face down
815
+ gameState.players.forEach(player => {
816
+ player.cards.forEach(card => {
817
+ card.isFaceUp = false;
818
+ });
819
+ });
820
+ break;
821
+
822
+ case 4: // Double points round (handled at scoring)
823
+ break;
824
+ }
825
+ }
826
+
827
+ function showCardSelectionModal(cards, message, showKeepOption = false) {
828
+ selectableCards.innerHTML = '';
829
+
830
+ // Add message
831
+ const msgDiv = document.createElement('div');
832
+ msgDiv.className = 'w-full text-center mb-3 font-bold';
833
+ msgDiv.textContent = message;
834
+ selectableCards.appendChild(msgDiv);
835
+
836
+ // Add cards
837
+ cards.forEach((card, index) => {
838
+ const cardDiv = document.createElement('div');
839
+ cardDiv.className = `card ${card.isFaceUp ? 'card-front' : 'card-back'} cursor-pointer`;
840
+ cardDiv.textContent = card.isFaceUp ? card.value : '';
841
+ cardDiv.dataset.cardIndex = index;
842
+
843
+ if (card.isFaceUp && typeof card.value === 'string') {
844
+ cardDiv.classList.add('special-card');
845
+ }
846
+
847
+ cardDiv.addEventListener('click', () => {
848
+ // Toggle selection
849
+ document.querySelectorAll('#selectable-cards .card').forEach(c => {
850
+ c.classList.remove('ring-4', 'ring-yellow-400');
851
+ });
852
+ cardDiv.classList.add('ring-4', 'ring-yellow-400');
853
+ });
854
+
855
+ selectableCards.appendChild(cardDiv);
856
+ });
857
+
858
+ // Show keep/discard options if needed
859
+ if (showKeepOption) {
860
+ const optionsDiv = document.createElement('div');
861
+ optionsDiv.className = 'flex justify-center gap-4 mt-3';
862
+ optionsDiv.innerHTML = `
863
+ <button id="keep-card" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded">احتفظ بالكرت</button>
864
+ <button id="discard-card" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">تخلص من الكرت</button>
865
+ `;
866
+ selectableCards.appendChild(optionsDiv);
867
+
868
+ document.getElementById('keep-card').addEventListener('click', () => {
869
+ const selectedCard = document.querySelector('#selectable-cards .card.ring-4');
870
+ if (selectedCard) {
871
+ const cardIndex = selectedCard.dataset.cardIndex;
872
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
873
+
874
+ // Add card to player's hand
875
+ currentPlayer.cards.push(cards[cardIndex]);
876
+
877
+ // Hide modal and continue
878
+ hideCardSelectionModal();
879
+ updateGameBoard();
880
+ checkForSimilarCards();
881
+ } else {
882
+ alert('الرجاء اختيار كرت أولاً');
883
+ }
884
+ });
885
+
886
+ document.getElementById('discard-card').addEventListener('click', () => {
887
+ const selectedCard = document.querySelector('#selectable-cards .card.ring-4');
888
+ if (selectedCard) {
889
+ const cardIndex = selectedCard.dataset.cardIndex;
890
+
891
+ // Add card to discard pile
892
+ gameState.discardPile.push(cards[cardIndex].value);
893
+
894
+ // Hide modal and continue
895
+ hideCardSelectionModal();
896
+ updateGameBoard();
897
+ nextPlayer();
898
+ } else {
899
+ alert('الرجاء اختيار كرت أولاً');
900
+ }
901
+ });
902
+ }
903
+
904
+ // Show modal
905
+ cardSelectionModal.classList.remove('opacity-0', 'pointer-events-none');
906
+ cardSelectionModal.classList.add('opacity-100');
907
+ }
908
+
909
+ function hideCardSelectionModal() {
910
+ cardSelectionModal.classList.remove('opacity-100');
911
+ cardSelectionModal.classList.add('opacity-0', 'pointer-events-none');
912
+ }
913
+
914
+ function confirmCardSelection() {
915
+ const selectedCard = document.querySelector('#selectable-cards .card.ring-4');
916
+ if (!selectedCard) {
917
+ alert('الرجاء اختيار كرت أولاً');
918
+ return;
919
+ }
920
+
921
+ const cardIndex = selectedCard.dataset.cardIndex;
922
+ const currentPlayer = gameState.players[gameState.currentPlayerIndex];
923
+ const lastDiscard = gameState.discardPile[gameState.discardPile.length - 1];
924
+
925
+ // Get the actual card from player's hand
926
+ const selectedCardObj = currentPlayer.cards.find(card =>
927
+ card.isFaceUp && card.value === lastDiscard
928
+ );
929
+
930
+ if (!selectedCardObj) {
931
+ alert('خطأ: الكرت المحدد غير موجود!');
932
+ return;
933
+ }
934
+
935
+ // Remove card from player's hand
936
+ const cardIndexInHand = currentPlayer.cards.indexOf(selectedCardObj);
937
+ if (cardIndexInHand !== -1) {
938
+ currentPlayer.cards.splice(cardIndexInHand, 1);
939
+ }
940
+
941
+ // Add card to discard pile
942
+ gameState.discardPile.push(selectedCardObj.value);
943
+
944
+ // Hide modal and continue
945
+ hideCardSelectionModal();
946
+ updateGameBoard();
947
+ nextPlayer();
948
+ }
949
+
950
+ function cancelCardSelection() {
951
+ hideCardSelectionModal();
952
+ }
953
+
954
+ function endGame() {
955
+ // Calculate scores
956
+ calculateScores();
957
+
958
+ // Determine winners and losers
959
+ const scores = gameState.players.map(player => player.points);
960
+ const minScore = Math.min(...scores);
961
+ const maxScore = Math.max(...scores);
962
+
963
+ // Display results
964
+ gameResults.innerHTML = '';
965
+
966
+ gameState.players.forEach(player => {
967
+ const playerDiv = document.createElement('div');
968
+ playerDiv.className = `mb-3 p-3 rounded-lg ${
969
+ player.points === minScore ? 'bg-green-100 text-green-800' :
970
+ player.points === maxScore ? 'bg-red-100 text-red-800' : 'bg-gray-100'
971
+ }`;
972
+
973
+ playerDiv.innerHTML = `
974
+ <div class="flex justify-between items-center">
975
+ <span class="font-bold">${player.name}</span>
976
+ <span>${player.points} نقطة</span>
977
+ </div>
978
+ <div class="text-sm mt-1">
979
+ ${player.points === minScore ? '🏆 فائز!' : player.points === maxScore ? '☠️ خاسر!' : ''
980
+ </html>