BananaMilk-Game/game.html at main · Sonra0/BananaMilk-Game · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banana Milk Game</title>
    <link rel="icon" type="image/png" href="/assets/images/icons/icon.png" />
    <meta name="theme-color" content="#1a0f2e">
    <meta name="description" content="Banana Milk - A child safety education game">
    <link rel="apple-touch-icon" href="/assets/images/icons/icon-192x192.png">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Press Start 2P', cursive;
            background: linear-gradient(135deg, #1a0f2e 0%, #2d1b3d 50%, #1a0f2e 100%);
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #ffd700;
        }

        .game-container {
            background: linear-gradient(135deg, #3d2817 0%, #5c3d2e 50%, #3d2817 100%);
            border: 6px solid #ffd700;
            padding: 30px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
            max-width: 1000px;
            width: 100%;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-shadow: 3px 3px 0px #000, 0 0 20px rgba(255, 215, 0, 0.6);
        }

        .panels-row {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }

        .character-info {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 8px;
            border: 3px solid #8b6f47;
            flex: 1;
        }

        .character-image {
            width: 150px;
            height: 150px;
            margin: 15px auto;
            background: linear-gradient(135deg, #2d2520 0%, #3d3028 100%);
            border: 3px solid #4a3c28;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .character-image img {
            max-width: 100%;
            max-height: 100%;
            image-rendering: pixelated;
        }

        .info-text {
            color: #f5deb3;
            font-size: 11px;
            line-height: 2;
            margin: 10px 0;
        }

        .logout-button {
            background: linear-gradient(180deg, #ff6b6b 0%, #ee5a52 100%);
            color: #1a0f0a;
            border: 4px solid #1a0f0a;
            padding: 14px 28px;
            font-family: 'Press Start 2P', cursive;
            font-size: 12px;
            cursor: pointer;
            box-shadow: 0 6px 0 #c23728;
            border-radius: 3px;
            margin-top: 15px;
            transition: all 0.1s;
        }

        .logout-button:hover {
            transform: translateY(3px);
            box-shadow: 0 3px 0 #c23728;
        }

        @media (max-width: 768px) {
            body {
                height: auto;
                overflow: auto;
                align-items: flex-start;
                padding: 15px;
            }

            .game-container {
                max-height: none;
                padding: 20px;
            }

            h1 {
                font-size: 16px;
            }

            .panels-row {
                flex-direction: column;
            }

            .character-image {
                width: 130px;
                height: 130px;
            }
        }
    </style>
</head>

<body>
    <div class="game-container">
        <h1>🍌 BANANA MILK GAME 🥛</h1>

        <div class="panels-row">
            <div class="character-info">
                <h2 style="color: #ffd700; margin-bottom: 15px;">Your Character</h2>
                <div class="character-image" id="characterImage">
                    <span style="font-size: 60px;">👤</span>
                </div>
                <div class="info-text" id="characterInfo">
                    Loading character data...
                </div>
            </div>

            <div class="character-info" style="border-color: #ff69b4;">
                <h2 style="color: #ff69b4; margin-bottom: 15px;">Your Cat</h2>
                <div class="character-image" id="catImage">
                    <span style="font-size: 60px;">🐱</span>
                </div>
                <div class="info-text" id="catInfo">
                    Loading cat data...
                </div>
            </div>
        </div>


        <button class="start-adventure-button" onclick="window.location.href='story-game.html'" style="
            background: linear-gradient(180deg, #4ecdc4 0%, #3da89f 100%);
            color: #1a0f0a;
            border: 4px solid #1a0f0a;
            padding: 20px 40px;
            font-family: 'Press Start 2P', cursive;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 6px 0 #2d7a75;
            border-radius: 3px;
            margin: 20px 0;
            transition: all 0.1s;
            width: 100%;
            max-width: 500px;
        ">
            🍌 START SAFETY ADVENTURE 🍌
        </button>

        <button class="logout-button" onclick="logout()">← BACK TO LOGIN</button>
    </div>

    <script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
        import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
        import { getFirestore, doc, getDoc } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';

        // Import Firebase config from your existing firebaseConfig.js
        import { firebaseConfig } from './src/config/firebaseConfig.js';

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const db = getFirestore(app);

        // Check authentication and load character
        onAuthStateChanged(auth, async (user) => {
            if (!user || !user.emailVerified) {
                // User not logged in or email not verified, redirect to login
                console.log('User not authenticated, redirecting to login');
                window.location.href = 'index.html';
                return;
            }

            console.log('User authenticated:', user.email);

            // Load character data
            try {
                const userDocRef = doc(db, 'users', user.uid);
                const userDoc = await getDoc(userDocRef);

                if (!userDoc.exists() || !userDoc.data().character) {
                    // No character found, redirect to character selection
                    console.log('No character found, redirecting to character selection');
                    window.location.href = 'character-selection.html';
                    return;
                }

                if (!userDoc.data().cat) {
                    // No cat found, redirect to cat selection
                    console.log('No cat found, redirecting to cat selection');
                    window.location.href = 'cat-selection.html';
                    return;
                }

                // Has both character and cat, display them
                const character = userDoc.data().character;
                const cat = userDoc.data().cat;
                displayCharacter(character, user);
                displayCat(cat);
            } catch (error) {
                console.error('Error loading character:', error);
                document.getElementById('characterInfo').innerHTML =
                    'Error loading character data.<br>Please try logging in again.';
            }
        });

        function displayCharacter(character, user) {
            const characterImageDiv = document.getElementById('characterImage');
            const characterInfoDiv = document.getElementById('characterInfo');

            // Display character image
            characterImageDiv.innerHTML = `
                <img src="${character.image}" alt="${character.name}"
                     onerror="this.style.display='none'; this.parentElement.innerHTML='<span style=\\'font-size: 80px;\\'>👤</span>'">
            `;

            // Display character info
            characterInfoDiv.innerHTML = `
                <strong>${character.name}</strong><br><br>
                Player: ${user.email}
            `;
        }

        function displayCat(cat) {
            const catImageDiv = document.getElementById('catImage');
            const catInfoDiv = document.getElementById('catInfo');

            // Display cat image
            catImageDiv.innerHTML = `
                <img src="${cat.image}" alt="${cat.name}"
                     onerror="this.style.display='none'; this.parentElement.innerHTML='<span style=\\'font-size: 80px;\\'>🐱</span>'">
            `;

            // Display cat info
            catInfoDiv.innerHTML = `
                <strong>${cat.name}</strong><br><br>
                Your feline companion!
            `;
        }

        window.logout = async function () {
            try {
                await signOut(auth);
                window.location.href = 'index.html';
            } catch (error) {
                console.error('Error signing out:', error);
                alert('Error signing out. Please try again.');
            }
        }
    </script>
</body>

</html>