html content

2025-07-04 16:04:09 +07:00
parent a3c27a23b9
commit a211b0675d
41 changed files with 878 additions and 276 deletions
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Game Nusantara</title>
+  <link rel="icon" href="data:,">
+  <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+      background: #f2f2f2;
+    }
+    .container {
+      max-width: 480px;
+      margin: auto;
+      padding: 1rem;
+    }
+    h1 {
+      text-align: center;
+      font-size: 1.4rem;
+    }
+    .grid, .drag-area, .drop-area {
+      display: grid;
+      gap: 10px;
+      margin-top: 1rem;
+    }
+    .grid {
+      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    }
+    .card, .letter, .drop-zone, .drag-item {
+      background: white;
+      border-radius: 6px;
+      padding: 10px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 0.8rem;
+      text-align: center;
+      user-select: none;
+    }
+    .hidden { background: #ccc; color: transparent; }
+    .matched { background: #d4edda; }
+    .drop-zone { height: 80px; background: #eee; border: 2px dashed #bbb; }
+    .drag-item[draggable="true"] { cursor: grab; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 id="game-title">Game Nusantara</h1>
+    <div id="game-board"></div>
+  </div>
+
+  <script>
+    const items = [
+      'pempek.png', 'sumsel.png',
+      'sopkonro.png', 'sulsel.png',
+      'rendang.png', 'sumbar.png',
+      'tinutuan.png', 'sulut.png',
+      'ayambetutu.png', 'bali.png',
+      'bikaambon.png', 'sumut.png',
+      'gudeg.png', 'yogyakarta.png',
+      'sotobanjar.png', 'kalsel.png',
+      'ayamtaliwang.png', 'ntb.png'
+    ];
+
+    const board = document.getElementById('game-board');
+    board.className = 'grid';
+    board.style.gridTemplateColumns = 'repeat(3, 1fr)';
+
+    let selectedItems = shuffle([...items]);
+    let shuffled = shuffle(selectedItems.slice(0, 18));
+    let selected = [], matched = [];
+
+    function shuffle(array) {
+      return array.sort(() => Math.random() - 0.5);
+    }
+
+    function render() {
+      board.innerHTML = '';
+      shuffled.forEach((img, i) => {
+        const card = document.createElement('div');
+        card.className = 'card hidden';
+        card.style.backgroundImage = 'url("freekake.png")';
+        card.style.backgroundSize = 'contain';
+        card.style.backgroundRepeat = 'no-repeat';
+        card.style.backgroundPosition = 'center';
+        card.dataset.index = i;
+        card.style.aspectRatio = '1/1';
+        card.style.borderRadius = '12px';
+        card.style.overflow = 'hidden';
+        card.style.backgroundColor = '#fff';
+        card.style.display = 'flex';
+        card.style.flexDirection = 'column';
+        card.style.alignItems = 'center';
+        card.style.justifyContent = 'center';
+        card.style.padding = '8px';
+        card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+        board.appendChild(card);
+      });
+    }
+
+    function revealCard(i) {
+      const el = board.children[i];
+      el.classList.remove('hidden');
+      el.style.backgroundImage = 'none';
+      el.innerHTML = `<img src="${shuffled[i]}" alt="" style="width: 100%; height: auto; object-fit: contain;">`;
+    }
+
+    function hideCard(i) {
+      const el = board.children[i];
+      el.classList.add('hidden');
+      el.style.backgroundImage = 'url("freekake.png")';
+      el.style.backgroundSize = 'contain';
+      el.style.backgroundRepeat = 'no-repeat';
+      el.style.backgroundPosition = 'center';
+      el.innerHTML = '';
+    }
+
+    function checkMatch() {
+      const [a, b] = selected;
+      const pairs = {
+        'pempek.png': 'sumsel.png', 'sumsel.png': 'pempek.png',
+        'sopkonro.png': 'sulsel.png', 'sulsel.png': 'sopkonro.png',
+        'rendang.png': 'sumbar.png', 'sumbar.png': 'rendang.png',
+        'tinutuan.png': 'sulut.png', 'sulut.png': 'tinutuan.png',
+        'ayambetutu.png': 'bali.png', 'bali.png': 'ayambetutu.png',
+        'bikaambon.png': 'sumut.png', 'sumut.png': 'bikaambon.png',
+        'gudeg.png': 'yogyakarta.png', 'yogyakarta.png': 'gudeg.png',
+        'sotobanjar.png': 'kalsel.png', 'kalsel.png': 'sotobanjar.png',
+        'ayamtaliwang.png': 'ntb.png', 'ntb.png': 'ayamtaliwang.png'
+      };
+      if (pairs[shuffled[a]] === shuffled[b]) {
+        matched.push(a, b);
+        board.children[a].classList.add('matched');
+        board.children[a].style.backgroundColor = '#d4edda';
+        board.children[b].classList.add('matched');
+        board.children[b].style.backgroundColor = '#d4edda';
+      } else {
+        setTimeout(() => {
+          hideCard(a);
+          hideCard(b);
+        }, 800);
+      }
+      selected = [];
+    }
+
+    render();
+
+    board.addEventListener('click', (e) => {
+      const index = e.target.closest('.card')?.dataset.index;
+      if (!index || selected.includes(+index) || matched.includes(+index)) return;
+      revealCard(index);
+      selected.push(+index);
+      if (selected.length === 2) checkMatch();
+    });
+
+    // 🔍 Expose render and notify Flutter
+    window.render = render;
+
+    if (window.flutter_inappwebview) {
+      window.flutter_inappwebview.callHandler('pageReady', {
+        boardExists: !!document.getElementById("game-board"),
+        hasRender: typeof render === "function"
+      });
+    }
+
+    // Optional helper
+    function includeScript(file) {
+      const script = document.createElement('script');
+      script.src = file;
+      document.body.appendChild(script);
+    }
+  </script>
+</body>
+</html>