function MainComponent() { const [cards, setCards] = React.useState([]); const [flippedCards, setFlippedCards] = React.useState([]); const [matchedCards, setMatchedCards] = React.useState([]); const [gameWon, setGameWon] = React.useState(false); const [gameStarted, setGameStarted] = React.useState(false); const [numPlayers, setNumPlayers] = React.useState(1); const [players, setPlayers] = React.useState([ { id: 1, name: "Spiller 1", score: 0 }, { id: 2, name: "Spiller 2", score: 0 }, { id: 3, name: "Spiller 3", score: 0 }, { id: 4, name: "Spiller 4", score: 0 }, { id: 5, name: "Spiller 5", score: 0 } ]); const [currentPlayer, setCurrentPlayer] = React.useState(0); const [moves, setMoves] = React.useState(0); // Admin panel state const [isAdmin, setIsAdmin] = React.useState(false); const [analytics, setAnalytics] = React.useState(null); const [analyticsLoading, setAnalyticsLoading] = React.useState(false); const customImages = [ "https://cdn.shopify.com/s/files/1/2466/7897/files/Ted.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Jumpi.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Mortogmia.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Timba.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Elfie.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Apa.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Ambus.jpg?v=1753786520", "https://cdn.shopify.com/s/files/1/2466/7897/files/Koptus.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Poltus.jpg?v=1753786521", "https://cdn.shopify.com/s/files/1/2466/7897/files/Snorkus.jpg?v=1753786521" ]; React.useEffect(()=>{ // Check for admin URL parameter const urlParams = new URLSearchParams(window.location.search); console.log("URL params:", window.location.search); const adminParam = urlParams.get("admin"); console.log("Admin param:", adminParam); if (adminParam === "secret123") { console.log("Admin access granted!"); setIsAdmin(true); loadAnalytics(); } }, []); const loadAnalytics = async ()=>{ console.log("Loading analytics..."); setAnalyticsLoading(true); try { const response = await fetch("/api/analytics", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "analytics" }) }); if (!response.ok) { throw new Error("Failed to load analytics"); } const data = await response.json(); console.log("Analytics data:", data); setAnalytics(data); } catch (error) { console.error("Error loading analytics:", error); } finally{ setAnalyticsLoading(false); } }; const logGameStart = async (numPlayers)=>{ try { // Get user's IP address let clientIP = null; try { const ipResponse = await fetch("https://api.ipify.org?format=json"); if (ipResponse.ok) { const ipData = await ipResponse.json(); clientIP = ipData.ip; } } catch (error) { console.error("IP detection error:", error); } await fetch("/api/analytics", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "log", numPlayers, clientIP }) }); } catch (error) { console.error("Analytics logging error:", error); } }; const startGame = ()=>{ const gameCards = []; customImages.forEach((imageUrl, index)=>{ gameCards.push({ id: index * 2, symbol: imageUrl, isFlipped: false, isCustomImage: true }); gameCards.push({ id: index * 2 + 1, symbol: imageUrl, isFlipped: false, isCustomImage: true }); }); const shuffledCards = gameCards.sort(()=>Math.random() - 0.5); setCards(shuffledCards); setGameStarted(true); setCurrentPlayer(0); setMoves(0); setGameWon(false); setFlippedCards([]); setMatchedCards([]); const resetPlayers = players.map((player)=>({ ...player, score: 0 })); setPlayers(resetPlayers); logGameStart(numPlayers); }; const handleCardClick = (cardId)=>{ if (flippedCards.length === 2) return; if (flippedCards.includes(cardId)) return; if (matchedCards.includes(cardId)) return; const newFlippedCards = [ ...flippedCards, cardId ]; setFlippedCards(newFlippedCards); if (newFlippedCards.length === 2) { setMoves(moves + 1); const card1 = cards.find((card)=>card.id === newFlippedCards[0]); const card2 = cards.find((card)=>card.id === newFlippedCards[1]); if (card1.symbol === card2.symbol) { setTimeout(()=>{ setMatchedCards([ ...matchedCards, ...newFlippedCards ]); setFlippedCards([]); const updatedPlayers = players.map((player, index)=>index === currentPlayer ? { ...player, score: player.score + 1 } : player); setPlayers(updatedPlayers); if (matchedCards.length + 2 === cards.length) { setGameWon(true); } }, 1000); } else { setTimeout(()=>{ setFlippedCards([]); setCurrentPlayer((currentPlayer + 1) % numPlayers); }, 1000); } } }; const updatePlayerName = (playerIndex, newName)=>{ const updatedPlayers = players.map((player, index)=>index === playerIndex ? { ...player, name: newName } : player); setPlayers(updatedPlayers); }; const resetGame = ()=>{ setGameStarted(false); setCards([]); setFlippedCards([]); setMatchedCards([]); setMoves(0); setGameWon(false); setCurrentPlayer(0); }; const getWinner = ()=>{ const activePlayers = players.slice(0, numPlayers); const maxScore = Math.max(...activePlayers.map((p)=>p.score)); const winners = activePlayers.filter((p)=>p.score === maxScore); return winners; }; // Show admin panel if admin is enabled - CHECK THIS FIRST! if (isAdmin) { return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "white", padding: "20px", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 195, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { color: "#333", fontSize: "2rem", marginBottom: "30px", textAlign: "center" }, __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }, "📊 Admin Panel"), analyticsLoading ? /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#666" }, __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, "Loading analytics...") : analytics ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { background: "#f0f8ff", padding: "20px", borderRadius: "15px", marginBottom: "20px", border: "2px solid #2196F3" }, __source: { fileName: "", lineNumber: 222, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#2196F3", margin: "0 0 10px 0", fontSize: "1.5rem" }, __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, "🎮 Total Games Played"), /*#__PURE__*/ React.createElement("p", { style: { fontSize: "2rem", fontWeight: "bold", color: "#333", margin: 0 }, __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, analytics.totalGames)), /*#__PURE__*/ React.createElement("div", { style: { background: "#f8f8f8", padding: "20px", borderRadius: "15px", marginBottom: "20px", border: "2px solid #ddd" }, __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#333", margin: "0 0 15px 0", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, "👥 Games by Player Count"), analytics.gamesByPlayers.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.players, style: { display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid #eee" }, __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 281, columnNumber: 21 }, __self: this }, item.players, " Player", item.players > 1 ? "s" : "", ":"), /*#__PURE__*/ React.createElement("span", { style: { fontWeight: "bold", color: "#2196F3" }, __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, item.count, " games")))), analytics.gamesByCountry && analytics.gamesByCountry.length > 0 && /*#__PURE__*/ React.createElement("div", { style: { background: "#f0fff0", padding: "20px", borderRadius: "15px", marginBottom: "20px", border: "2px solid #4CAF50" }, __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#4CAF50", margin: "0 0 15px 0", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }, "🌍 Games by Country"), analytics.gamesByCountry.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid #e8f5e8" }, __source: { fileName: "", lineNumber: 313, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 322, columnNumber: 25 }, __self: this }, item.country, ":"), /*#__PURE__*/ React.createElement("span", { style: { fontWeight: "bold", color: "#4CAF50" }, __source: { fileName: "", lineNumber: 323, columnNumber: 25 }, __self: this }, item.count, " games")))), analytics.gamesByCity && analytics.gamesByCity.length > 0 && /*#__PURE__*/ React.createElement("div", { style: { background: "#fff0f5", padding: "20px", borderRadius: "15px", marginBottom: "20px", border: "2px solid #e91e63" }, __source: { fileName: "", lineNumber: 333, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#e91e63", margin: "0 0 15px 0", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 342, columnNumber: 19 }, __self: this }, "🏙️ Games by City"), analytics.gamesByCity.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid #fce4ec" }, __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 361, columnNumber: 23 }, __self: this }, item.city, ", ", item.country, ":"), /*#__PURE__*/ React.createElement("span", { style: { fontWeight: "bold", color: "#e91e63" }, __source: { fileName: "", lineNumber: 364, columnNumber: 23 }, __self: this }, item.count, " games")))), /*#__PURE__*/ React.createElement("div", { style: { background: "#fff8f0", padding: "20px", borderRadius: "15px", marginBottom: "20px", border: "2px solid #ff9800" }, __source: { fileName: "", lineNumber: 373, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#ff9800", margin: "0 0 15px 0", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 382, columnNumber: 17 }, __self: this }, "🕒 Recent Activity"), analytics.recentActivity.slice(0, 5).map((activity, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { padding: "8px 0", borderBottom: "1px solid #fff3e0" }, __source: { fileName: "", lineNumber: 392, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "0.9rem", color: "#333" }, __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 407, columnNumber: 23 }, __self: this }, activity.players, " player game"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 408, columnNumber: 23 }, __self: this }, new Date(activity.playedAt).toLocaleDateString())), (activity.city || activity.country) && /*#__PURE__*/ React.createElement("div", { style: { fontSize: "0.8rem", color: "#666", marginTop: "2px" }, __source: { fileName: "", lineNumber: 413, columnNumber: 23 }, __self: this }, "📍 ", activity.city ? `${activity.city}, ` : "", activity.country || "Unknown location")))), /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", marginTop: "30px" }, __source: { fileName: "", lineNumber: 429, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadAnalytics, style: { backgroundColor: "#4CAF50", color: "white", border: "none", padding: "12px 24px", fontSize: "1rem", borderRadius: "20px", cursor: "pointer", boxShadow: "0 4px 15px rgba(0,0,0,0.2)", marginRight: "10px" }, __source: { fileName: "", lineNumber: 430, columnNumber: 17 }, __self: this }, "🔄 Refresh Data"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.href = "/", style: { backgroundColor: "#2196F3", color: "white", border: "none", padding: "12px 24px", fontSize: "1rem", borderRadius: "20px", cursor: "pointer", boxShadow: "0 4px 15px rgba(0,0,0,0.2)" }, __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, "🎮 Back to Game"))) : /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#666" }, __source: { fileName: "", lineNumber: 464, columnNumber: 13 }, __self: this }, "Failed to load analytics data"))); } if (!gameStarted) { return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "white", padding: "20px", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 475, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "400px", margin: "0 auto", textAlign: "center" }, __source: { fileName: "", lineNumber: 483, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { color: "#333", fontSize: "2rem", marginBottom: "30px" }, __source: { fileName: "", lineNumber: 486, columnNumber: 11 }, __self: this }, "🧠 Finn 2 like! 🎮"), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "30px" }, __source: { fileName: "", lineNumber: 490, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { color: "#333", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 491, columnNumber: 13 }, __self: this }, "Velg antall spillere:"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px", marginBottom: "20px", flexWrap: "wrap" }, __source: { fileName: "", lineNumber: 494, columnNumber: 13 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((num)=>/*#__PURE__*/ React.createElement("button", { key: num, onClick: ()=>setNumPlayers(num), style: { padding: "10px 20px", fontSize: "1rem", borderRadius: "10px", border: "2px solid #2196F3", backgroundColor: numPlayers === num ? "#2196F3" : "white", color: numPlayers === num ? "white" : "#2196F3", cursor: "pointer" }, __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, num, " ", num === 1 ? "Spiller" : "Spillere")))), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "30px" }, __source: { fileName: "", lineNumber: 523, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { color: "#333", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 524, columnNumber: 13 }, __self: this }, "Spillernavn:"), players.slice(0, numPlayers).map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: player.id, style: { marginBottom: "10px" }, __source: { fileName: "", lineNumber: 528, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: player.name, onChange: (e)=>updatePlayerName(index, e.target.value), style: { padding: "10px", fontSize: "1rem", borderRadius: "8px", border: "2px solid #ddd", width: "200px", textAlign: "center" }, __source: { fileName: "", lineNumber: 529, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: startGame, style: { backgroundColor: "#4CAF50", color: "white", border: "none", padding: "15px 30px", fontSize: "1.2rem", borderRadius: "25px", cursor: "pointer", boxShadow: "0 4px 15px rgba(0,0,0,0.2)" }, __source: { fileName: "", lineNumber: 546, columnNumber: 11 }, __self: this }, "Start Spillet! 🚀"))); } const winners = gameWon ? getWinner() : []; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", background: "white", padding: "10px", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 569, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "400px", margin: "0 auto", textAlign: "center" }, __source: { fileName: "", lineNumber: 577, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { color: "#333", fontSize: "1.8rem", marginBottom: "10px" }, __source: { fileName: "", lineNumber: 578, columnNumber: 9 }, __self: this }, "🧠 Finn 2 like! 🎮"), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: "15px", background: "#f5f5f5", padding: "10px", borderRadius: "10px" }, __source: { fileName: "", lineNumber: 582, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-around", flexWrap: "wrap", gap: "5px" }, __source: { fileName: "", lineNumber: 590, columnNumber: 11 }, __self: this }, players.slice(0, numPlayers).map((player, index)=>/*#__PURE__*/ React.createElement("div", { key: player.id, style: { padding: "5px 10px", borderRadius: "8px", backgroundColor: index === currentPlayer && !gameWon ? "#2196F3" : "#ddd", color: index === currentPlayer && !gameWon ? "white" : "#333", fontSize: "0.9rem", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 599, columnNumber: 15 }, __self: this }, player.name, ": ", player.score))), !gameWon && /*#__PURE__*/ React.createElement("div", { style: { marginTop: "8px", fontSize: "0.8rem", color: "#666" }, __source: { fileName: "", lineNumber: 616, columnNumber: 13 }, __self: this }, "Aktiv spiller: ", players[currentPlayer].name)), gameWon && /*#__PURE__*/ React.createElement("div", { style: { background: "#e8f5e8", padding: "15px", borderRadius: "15px", marginBottom: "15px", border: "2px solid #4CAF50" }, __source: { fileName: "", lineNumber: 625, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: "#4CAF50", margin: "0 0 8px 0", fontSize: "1.3rem" }, __source: { fileName: "", lineNumber: 634, columnNumber: 13 }, __self: this }, "🎉 Spillet er slutt! 🎉"), /*#__PURE__*/ React.createElement("p", { style: { color: "#333", margin: "0", fontSize: "0.9rem" }, __source: { fileName: "", lineNumber: 643, columnNumber: 13 }, __self: this }, winners.length === 1 ? `${winners[0].name} vant med ${winners[0].score} poeng!` : `Det ble uavgjort! ${winners.map((w)=>w.name).join(" og ")} med ${winners[0].score} poeng hver!`)), /*#__PURE__*/ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "8px", maxWidth: "320px", margin: "0 auto 20px auto" }, __source: { fileName: "", lineNumber: 653, columnNumber: 9 }, __self: this }, cards.map((card)=>{ const isFlipped = flippedCards.includes(card.id) || matchedCards.includes(card.id); const isMatched = matchedCards.includes(card.id); return /*#__PURE__*/ React.createElement("div", { key: card.id, onClick: ()=>handleCardClick(card.id), style: { width: "70px", height: "70px", backgroundColor: isFlipped ? isMatched ? "#4CAF50" : "#fff" : "#2196F3", borderRadius: "12px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: isFlipped ? card.isCustomImage ? "1rem" : "2.5rem" : "3.5rem", boxShadow: "0 4px 8px rgba(0,0,0,0.3)", transition: "all 0.3s ease", border: "2px solid #ddd", transform: flippedCards.includes(card.id) ? "scale(1.05)" : "scale(1)", opacity: isMatched ? 0.8 : 1, overflow: "hidden" }, __source: { fileName: "", lineNumber: 668, columnNumber: 15 }, __self: this }, isFlipped ? card.isCustomImage ? /*#__PURE__*/ React.createElement("img", { src: card.symbol, alt: "Card", style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "10px" }, __source: { fileName: "", lineNumber: 701, columnNumber: 21 }, __self: this }) : card.symbol : "❓"); })), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, style: { backgroundColor: "#FF6B6B", color: "white", border: "none", padding: "12px 24px", fontSize: "1rem", borderRadius: "20px", cursor: "pointer", boxShadow: "0 4px 15px rgba(0,0,0,0.2)" }, __source: { fileName: "", lineNumber: 722, columnNumber: 9 }, __self: this }, "🔄 Nytt spill"), /*#__PURE__*/ React.createElement("div", { style: { marginTop: "20px", color: "#666", fontSize: "0.9rem" }, __source: { fileName: "", lineNumber: 738, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 739, columnNumber: 11 }, __self: this }, "🎯 Finn alle 10 parene ved å snu to kort om gangen!"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 740, columnNumber: 11 }, __self: this }, "💡 Husk hvor de ulike karakterene skjuler seg!")))); }