ILMIFY-Games/ILMIFY - UNO.html at main · MuhammadMohsinReza/ILMIFY-Games · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ILMIFY - UNO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net"></script>
    <style>
        body { background: radial-gradient(circle, #0f172a, #000000); color: white; height: 100vh; overflow: hidden; font-family: 'Inter', sans-serif; }
        .card { width: 95px; height: 140px; border-radius: 12px; border: 3px solid white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.2rem; cursor: pointer; transition: all 0.2s; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.5); text-align: center; }
        .card:hover { transform: translateY(-20px) scale(1.05); border-color: #fbbf24; box-shadow: 0 0 25px rgba(251, 191, 36, 0.4); }
        .red { background: #ef4444; } .blue { background: #3b82f6; }
        .green { background: #10b981; } .yellow { background: #f59e0b; }
        .wild-card { background: linear-gradient(45deg, #ef4444, #3b82f6, #10b981, #f59e0b); }
        .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border-radius: 2rem; border: 1px solid rgba(255,255,255,0.1); }
    </style>
</head>
<body class="flex flex-col items-center justify-center p-4">

    <!-- SETUP SCREEN -->
    <div id="setup" class="glass p-12 w-full max-w-md text-center shadow-2xl">
        <h1 class="text-6xl font-black text-yellow-400 mb-2 tracking-tighter">UNO</h1>
        <p class="text-gray-500 mb-8 uppercase text-xs font-bold tracking-widest">Official 2026 Rules</p>
        <div class="text-left mb-6">
            <label class="block text-xs font-bold text-gray-400 mb-2 ml-1">PLAYERS (e.g. Alex, Sam, Jo)</label>
            <input type="text" id="names-input" value="Player 1, Player 2" class="w-full p-4 rounded-2xl bg-white/10 border border-white/20 text-white text-center font-bold text-xl outline-none focus:border-yellow-400 transition">
        </div>
        <button onclick="startGame()" class="w-full bg-yellow-400 text-black py-5 rounded-2xl font-black text-2xl hover:scale-105 transition shadow-[0_0_30px_rgba(251,191,36,0.3)]">START PARTY</button>
    </div>

    <!-- GAME INTERFACE -->
    <div id="game" class="hidden w-full h-full flex flex-col justify-between">
        <div class="flex justify-between items-center p-6 glass mx-4 mt-4">
            <div class="w-1/3">
                <h2 id="turn-name" class="text-3xl font-black text-yellow-400 uppercase tracking-tighter">PLAYER</h2>
                <p id="info-msg" class="text-[10px] font-bold text-gray-500 uppercase tracking-widest">No Stacking Allowed</p>
            </div>
            <div class="w-1/3 flex flex-col items-center">
                <div id="discard-pile" class="card scale-125 border-4"></div>
            </div>
            <div class="w-1/3 text-right">
                <button onclick="drawCard()" id="draw-btn" class="bg-white text-black px-10 py-4 rounded-2xl font-black text-lg hover:bg-yellow-400 transition-all active:scale-90">DRAW</button>
            </div>
        </div>

        <!-- PRIVATE PASS OVERLAY -->
        <div id="pass-overlay" class="hidden fixed inset-0 bg-slate-950 z-50 flex flex-col items-center justify-center text-center">
            <div class="animate-bounce text-6xl mb-6">🤫</div>
            <h2 class="text-2xl font-bold mb-2 opacity-40 uppercase">Keep it Secret! Pass to:</h2>
            <p id="next-p-name" class="text-7xl text-yellow-400 mb-12 font-black tracking-tighter"></p>
            <button onclick="revealHand()" class="bg-white text-black px-20 py-6 rounded-full font-black text-3xl hover:bg-yellow-400 transition-all shadow-2xl">VIEW MY HAND</button>
        </div>

        <!-- PLAYER HAND -->
        <div class="bg-black/60 p-10 rounded-t-[4rem] border-t border-white/10 flex flex-col items-center shadow-inner">
            <div id="hand" class="flex justify-center gap-[-30px] pb-6 min-h-[180px] max-w-full overflow-x-auto"></div>
        </div>
    </div>

    <script>
        let deck = [], players = [], discard = null, currentTurn = 0, direction = 1, canDraw = true;

        function createDeck() {
            const colors = ['red', 'blue', 'green', 'yellow'];
            const values = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Skip', 'Reverse', '+2'];
            deck = [];
            colors.forEach(c => {
                values.forEach(v => { deck.push({ color: c, value: v }); if (v !== '0') deck.push({ color: c, value: v }); });
            });
            for (let i = 0; i < 4; i++) { deck.push({ color: 'wild', value: 'Wild' }); deck.push({ color: 'wild', value: '+4' }); }
            deck.sort(() => Math.random() - 0.5);
        }

        function startGame() {
            const names = document.getElementById('names-input').value.split(',').map(n => n.trim()).filter(n => n !== "");
            if(names.length < 2) return alert("Enter at least 2 player names!");
            createDeck();
            names.forEach(name => players.push({ name, hand: deck.splice(0, 7) }));
            discard = deck.pop();
            while (discard.color === 'wild') discard = deck.pop();
            document.getElementById('setup').classList.add('hidden');
            document.getElementById('game').classList.remove('hidden');
            initiateTurnChange(0); // Start with Player 1
        }

        function updateUI() {
            document.getElementById('turn-name').innerText = players[currentTurn].name;
            const dPile = document.getElementById('discard-pile');
            dPile.className = `card ${discard.color === 'wild' ? 'wild-card' : discard.color}`;
            dPile.innerText = discard.value;

            const handEl = document.getElementById('hand');
            handEl.innerHTML = '';
            players[currentTurn].hand.forEach((card, idx) => {
                const cEl = document.createElement('div');
                cEl.className = `card ${card.color === 'wild' ? 'wild-card' : card.color}`;
                cEl.innerText = card.value;
                cEl.onclick = () => playCard(idx);
                handEl.appendChild(cEl);
            });
        }

        function playCard(idx) {
            const card = players[currentTurn].hand[idx];
            if (card.color === discard.color || card.value === discard.value || card.color === 'wild') {
                players[currentTurn].hand.splice(idx, 1);
                discard = JSON.parse(JSON.stringify(card));

                if (players[currentTurn].hand.length === 0) return winGame();

                if (card.color === 'wild') {
                    const pick = prompt("PICK A COLOR: red, blue, green, yellow", "red") || "red";
                    discard.color = pick.toLowerCase();
                }

                // Official Action Logic
                let steps = 1;
                let is2P = players.length === 2;

                if (card.value === 'Reverse') {
                    if (is2P) steps = 0; else direction *= -1;
                }
                else if (card.value === 'Skip') {
                    steps = is2P ? 0 : 2;
                }
                else if (card.value === '+2' || card.value === '+4') {
                    // NO STACKING RULE: Next player draws and is skipped
                    const amount = card.value === '+2' ? 2 : 4;
                    const victim = (currentTurn + (direction * 1) + players.length) % players.length;
                    for (let i = 0; i < amount; i++) players[victim].hand.push(deck.pop());

                    // In 2P, the current player gets another turn. In 3P+, the next person is skipped.
                    steps = is2P ? 0 : 2;
                }

                if (steps === 0) updateUI(); else initiateTurnChange(steps);
            }
        }

        function drawCard() {
            if(!canDraw) return;
            const drawn = deck.pop();
            players[currentTurn].hand.push(drawn);
            canDraw = false;

            // Check if drawn card is playable
            if (drawn.color === discard.color || drawn.value === discard.value || drawn.color === 'wild') {
                document.getElementById('info-msg').innerText = "DRAWN CARD IS PLAYABLE!";
                updateUI();
            } else {
                initiateTurnChange(1);
            }
        }

        function initiateTurnChange(steps) {
            currentTurn = (currentTurn + (steps * direction) + players.length) % players.length;
            canDraw = true;
            document.getElementById('hand').innerHTML = ''; // Hide hand instantly
            document.getElementById('pass-overlay').classList.remove('hidden');
            document.getElementById('next-p-name').innerText = players[currentTurn].name;
        }

        function revealHand() {
            document.getElementById('pass-overlay').classList.add('hidden');
            document.getElementById('info-msg').innerText = "NO STACKING ALLOWED";
            updateUI();
        }

        function winGame() {
            confetti({ particleCount: 250, spread: 100, origin: { y: 0.6 }, colors: ['#fbbf24', '#ef4444', '#3b82f6', '#10b981'] });
            document.body.innerHTML = `
                <div class='flex flex-col items-center justify-center h-screen text-center'>
                    <div class='text-9xl mb-8'>👑</div>
                    <h1 class='text-8xl font-black text-yellow-400 tracking-tighter uppercase'>${players[currentTurn].name}</h1>
                    <p class='text-2xl font-bold text-white/50 mt-4 uppercase tracking-widest'>Official 2026 Champion</p>
                    <button onclick='location.reload()' class='mt-12 bg-white text-black px-16 py-6 rounded-full font-black text-2xl shadow-[0_0_50px_rgba(255,255,255,0.2)] hover:scale-110 transition'>REMATCH</button>
                </div>`;
        }
    </script>
</body>
</html>