PlugGuess/index.html at main · AlexBrea/PlugGuess · GitHub

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plugin Battle - Cual tiene mas descargas?</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="js/tailwind.config.js"></script>

    <!-- Alpine.js -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <!-- Custom Styles -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-dark-surface min-h-screen font-mono text-white bg-grid">
    <div x-data="pluginBattle()" x-init="init()" x-cloak class="min-h-screen flex flex-col">

        <!-- Header -->
        <header class="py-6 px-4 border-b border-neon-green/10">
            <div class="max-w-6xl mx-auto flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-lg bg-neon-green/10 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-neon-green" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <h1 class="font-display text-xl md:text-2xl tracking-tight">
                        <span class="gradient-text">PLUGIN</span> <span class="text-white/80">BATTLE</span>
                    </h1>
                </div>

                <div class="flex items-center gap-6">
                    <div class="text-right">
                        <p class="text-xs text-white/40 uppercase tracking-wider">Racha</p>
                        <p class="text-2xl font-bold text-neon-green stats-counter" x-text="streak"></p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-white/40 uppercase tracking-wider">Record</p>
                        <p class="text-2xl font-bold text-neon-pink stats-counter" x-text="bestStreak"></p>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1 flex items-center justify-center p-4 md:p-8">

            <!-- Loading State -->
            <div x-show="loading" class="text-center">
                <div class="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-dark-card border border-neon-green/20">
                    <svg class="animate-spin h-5 w-5 text-neon-green" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="text-white/60">Cargando plugins...</span>
                </div>
            </div>

            <!-- Game Over State -->
            <div x-show="gameOver && !loading" x-transition class="fixed inset-0 z-50 flex items-center justify-center bg-dark-surface/95 backdrop-blur-sm">
                <div class="bg-dark-card rounded-2xl p-8 border border-red-500/30 max-w-lg mx-4">
                    <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-red-500/10 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>
                    <h2 class="font-display text-3xl mb-2 text-red-400">Game Over</h2>
                    <p class="text-white/60 mb-6">
                        <span x-text="lastWinner?.name" class="text-white font-bold"></span> tiene
                        <span x-text="formatNumber(lastWinner?.active_installs)" class="text-neon-green font-bold"></span> instalaciones activas
                    </p>

                    <div class="grid grid-cols-2 gap-4 mb-8">
                        <div class="bg-dark-surface rounded-xl p-4">
                            <p class="text-xs text-white/40 uppercase tracking-wider mb-1">Racha Final</p>
                            <p class="text-3xl font-bold text-white stats-counter" x-text="finalStreak"></p>
                        </div>
                        <div class="bg-dark-surface rounded-xl p-4">
                            <p class="text-xs text-white/40 uppercase tracking-wider mb-1">Mejor Record</p>
                            <p class="text-3xl font-bold text-neon-pink stats-counter" x-text="bestStreak"></p>
                        </div>
                    </div>

                    <button
                        @click="restartGame()"
                        class="w-full py-4 px-6 rounded-xl font-bold text-dark-surface bg-neon-green hover:bg-neon-green/90 transition-all duration-200 flex items-center justify-center gap-2"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        Jugar de nuevo
                    </button>
                </div>
            </div>

            <!-- Game State -->
            <div x-show="!gameOver && !loading && plugin1 && plugin2" x-transition class="w-full max-w-6xl mx-auto">
                <div class="text-center mb-8">
                    <h2 class="font-display text-2xl md:text-4xl mb-2">
                        <span class="text-white/60">Cual tiene</span>
                        <span class="gradient-text">MAS DESCARGAS</span>
                        <span class="text-white/60">?</span>
                    </h2>
                    <p class="text-white/40 text-sm">Haz click en el plugin que creas que tiene mas instalaciones activas</p>
                </div>

                <div class="grid md:grid-cols-2 gap-6 md:gap-8 relative">
                    <!-- VS Divider (Desktop) -->
                    <div class="hidden md:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
                        <div class="w-20 h-20 rounded-full bg-dark-surface border-2 border-neon-green/30 flex items-center justify-center animate-pulse-slow">
                            <span class="font-display text-xl text-neon-green">VS</span>
                        </div>
                    </div>

                    <!-- Plugin 1 -->
                    <button
                        @click="makeGuess(plugin1)"
                        :disabled="showResult"
                        :class="{
                            'correct-animation ring-4 ring-neon-green': showResult && isWinner(plugin1),
                            'shake opacity-50': showResult && !isWinner(plugin1),
                            'hover:border-neon-green/40': !showResult
                        }"
                        class="plugin-card rounded-2xl p-6 md:p-8 text-left transition-all duration-300 card-hover disabled:cursor-default group"
                    >
                        <div class="flex items-start gap-4 mb-6">
                            <div class="w-16 h-16 md:w-20 md:h-20 rounded-xl bg-white/5 flex items-center justify-center overflow-hidden flex-shrink-0">
                                <template x-if="plugin1.icons">
                                    <img
                                        :src="plugin1.icons['2x'] || plugin1.icons['1x'] || plugin1.icons.default || plugin1.icons.svg"
                                        :alt="plugin1.name"
                                        class="w-full h-full object-cover"
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                                    >
                                </template>
                                <div class="w-full h-full flex items-center justify-center" style="display: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                                    </svg>
                                </div>
                                <template x-if="!plugin1.icons">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                                    </svg>
                                </template>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-display text-lg md:text-xl text-white truncate" x-text="decodeHtml(plugin1.name)"></h3>
                                <p class="text-sm text-white/40" x-text="'por ' + stripHtml(plugin1.author)"></p>
                            </div>
                        </div>

                        <p class="text-white/60 text-sm mb-6 line-clamp-3" x-html="plugin1.short_description"></p>

                        <div class="flex items-center justify-between pt-4 border-t border-white/5">
                            <div class="flex items-center gap-4">
                                <div class="flex items-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-500" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <span class="text-sm text-white/60" x-text="plugin1.rating ? (plugin1.rating / 20).toFixed(1) : 'N/A'"></span>
                                </div>
                                <div class="text-sm text-white/40">
                                    v<span x-text="plugin1.version"></span>
                                </div>
                            </div>
                            <div x-show="showResult" x-transition class="text-right">
                                <p class="text-xs text-white/40 uppercase tracking-wider">Instalaciones</p>
                                <p class="text-lg font-bold" :class="isWinner(plugin1) ? 'text-neon-green' : 'text-red-400'" x-text="formatNumber(plugin1.active_installs)"></p>
                            </div>
                            <div x-show="!showResult" class="text-neon-green/60 group-hover:text-neon-green transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                                </svg>
                            </div>
                        </div>
                    </button>

                    <!-- VS Divider (Mobile) -->
                    <div class="md:hidden flex items-center justify-center">
                        <div class="w-16 h-16 rounded-full bg-dark-card border-2 border-neon-green/30 flex items-center justify-center">
                            <span class="font-display text-neon-green">VS</span>
                        </div>
                    </div>

                    <!-- Plugin 2 -->
                    <button
                        @click="makeGuess(plugin2)"
                        :disabled="showResult"
                        :class="{
                            'correct-animation ring-4 ring-neon-green': showResult && isWinner(plugin2),
                            'shake opacity-50': showResult && !isWinner(plugin2),
                            'hover:border-neon-green/40': !showResult
                        }"
                        class="plugin-card rounded-2xl p-6 md:p-8 text-left transition-all duration-300 card-hover disabled:cursor-default group"
                    >
                        <div class="flex items-start gap-4 mb-6">
                            <div class="w-16 h-16 md:w-20 md:h-20 rounded-xl bg-white/5 flex items-center justify-center overflow-hidden flex-shrink-0">
                                <template x-if="plugin2.icons">
                                    <img
                                        :src="plugin2.icons['2x'] || plugin2.icons['1x'] || plugin2.icons.default || plugin2.icons.svg"
                                        :alt="plugin2.name"
                                        class="w-full h-full object-cover"
                                        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                                    >
                                </template>
                                <div class="w-full h-full flex items-center justify-center" style="display: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                                    </svg>
                                </div>
                                <template x-if="!plugin2.icons">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                                    </svg>
                                </template>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-display text-lg md:text-xl text-white truncate" x-text="decodeHtml(plugin2.name)"></h3>
                                <p class="text-sm text-white/40" x-text="'por ' + stripHtml(plugin2.author)"></p>
                            </div>
                        </div>

                        <p class="text-white/60 text-sm mb-6 line-clamp-3" x-html="plugin2.short_description"></p>

                        <div class="flex items-center justify-between pt-4 border-t border-white/5">
                            <div class="flex items-center gap-4">
                                <div class="flex items-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-500" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                    <span class="text-sm text-white/60" x-text="plugin2.rating ? (plugin2.rating / 20).toFixed(1) : 'N/A'"></span>
                                </div>
                                <div class="text-sm text-white/40">
                                    v<span x-text="plugin2.version"></span>
                                </div>
                            </div>
                            <div x-show="showResult" x-transition class="text-right">
                                <p class="text-xs text-white/40 uppercase tracking-wider">Instalaciones</p>
                                <p class="text-lg font-bold" :class="isWinner(plugin2) ? 'text-neon-green' : 'text-red-400'" x-text="formatNumber(plugin2.active_installs)"></p>
                            </div>
                            <div x-show="!showResult" class="text-neon-green/60 group-hover:text-neon-green transition-colors">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                                </svg>
                            </div>
                        </div>
                    </button>
                </div>

                <!-- Continue Button -->
                <div x-show="showResult && !gameOver" x-transition class="mt-8 text-center">
                    <button
                        @click="continueGame()"
                        class="inline-flex items-center gap-2 py-3 px-8 rounded-xl font-bold text-dark-surface bg-neon-green hover:bg-neon-green/90 transition-all duration-200"
                    >
                        Siguiente ronda
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Error State -->
            <div x-show="error && !loading" x-transition class="text-center max-w-md mx-auto">
                <div class="bg-dark-card rounded-2xl p-8 border border-red-500/30">
                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>
                    <h3 class="font-display text-xl text-red-400 mb-2">Error de conexion</h3>
                    <p class="text-white/60 mb-6" x-text="error"></p>
                    <button
                        @click="init()"
                        class="py-3 px-6 rounded-xl font-bold text-white bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 transition-all duration-200"
                    >
                        Reintentar
                    </button>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="py-4 px-4 border-t border-neon-green/10">
            <div class="max-w-6xl mx-auto flex items-center justify-between text-xs text-white/30">
                <p>Datos de la API de WordPress.org</p>
                <p>Plugins totales jugados: <span x-text="totalGamesPlayed" class="text-white/50"></span></p>
            </div>
        </footer>
    </div>

    <!-- Game Logic -->
    <script src="js/app.js"></script>
</body>
</html>