html content

assets/html/findwords/findwords.html

@@ -0,0 +1,180 @@
+<!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>
+  <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 {
+      display: grid;
+      gap: 4px;
+      margin-top: 1rem;
+    }
+    .letter {
+      background: white;
+      border-radius: 6px;
+      padding: 0;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1rem;
+      font-weight: bold;
+      text-align: center;
+      user-select: none;
+      cursor: pointer;
+      border: 1px solid #ccc;
+      aspect-ratio: 1/1;
+    }
+    .found {
+      background-color: #a2f5a2 !important;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 id="game-title">Game Nusantara</h1>
+    <div id="game-board"></div>
+
+    <h3>Kata yang harus ditemukan:</h3>
+    <ul id="target-words" style="padding-left: 1rem;"></ul>
+    <p id="penjelasan" style="margin-top: 1rem; font-size: 0.9rem; color: #444;"></p>
+  </div>
+
+  <script>
+    // Template Find The Word Game (drag to select)
+    const words = ['TENANG', 'SABAR', 'SYUKUR', 'CINTA', 'GEMBIRA', 'BANGGA'];
+    const board = document.getElementById('game-board');
+    const size = 12; // 12x12 grid
+    let grid = Array(size * size).fill('');
+
+    function randomLetter() {
+      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      return alphabet[Math.floor(Math.random() * alphabet.length)];
+    }
+
+    function placeWord(word) {
+      const dir = Math.random() < 0.5 ? 'H' : 'V';
+      let x, y, success = false;
+      while (!success) {
+        x = Math.floor(Math.random() * (dir === 'H' ? size - word.length : size));
+        y = Math.floor(Math.random() * (dir === 'V' ? size - word.length : size));
+        let fits = true;
+        for (let i = 0; i < word.length; i++) {
+          let idx = dir === 'H' ? y * size + (x + i) : (y + i) * size + x;
+          if (grid[idx] && grid[idx] !== word[i]) {
+            fits = false;
+            break;
+          }
+        }
+        if (fits) {
+          for (let i = 0; i < word.length; i++) {
+            let idx = dir === 'H' ? y * size + (x + i) : (y + i) * size + x;
+            grid[idx] = word[i];
+          }
+          success = true;
+        }
+      }
+    }
+
+    words.forEach(w => placeWord(w));
+    grid = grid.map(cell => cell || randomLetter());
+
+    function renderGrid() {
+      board.className = 'grid';
+      board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
+      board.innerHTML = '';
+      grid.forEach((char, i) => {
+        const div = document.createElement('div');
+        div.textContent = char;
+        div.className = 'letter';
+        div.dataset.index = i;
+        div.style.aspectRatio = '1/1';
+        div.style.border = '1px solid #ccc';
+        div.style.display = 'flex';
+        div.style.alignItems = 'center';
+        div.style.justifyContent = 'center';
+        div.style.fontSize = '1.2rem';
+        div.style.fontWeight = 'bold';
+        div.style.userSelect = 'none';
+        div.style.cursor = 'pointer';
+        board.appendChild(div);
+      });
+    }
+
+    renderGrid();
+
+    // Daftar kata yang harus ditemukan
+    // (Daftar kata tidak lagi ditampilkan sebagai list)
+
+    let currentSelection = [];
+    let currentWord = '';
+    let wordsFound = new Set();
+    let isMouseDown = false;
+
+    board.addEventListener('mousedown', (e) => {
+      if (!e.target.classList.contains('letter')) return;
+      isMouseDown = true;
+      selectCell(e.target);
+    });
+
+    board.addEventListener('mouseover', (e) => {
+      if (!isMouseDown || !e.target.classList.contains('letter')) return;
+      selectCell(e.target);
+    });
+
+    document.addEventListener('mouseup', () => {
+      if (words.includes(currentWord)) {
+        currentSelection.forEach(c => {
+          c.style.backgroundColor = '#a2f5a2';
+          c.classList.add('found');
+        });
+        const penjelasanBox = document.getElementById('penjelasan');
+        const regex = new RegExp(currentWord, 'gi');
+        penjelasanBox.innerHTML = penjelasanBox.innerHTML.replace(regex, `<span style="color:green; font-weight:bold">${currentWord}</span>`);
+
+        wordsFound.add(currentWord);
+        if (wordsFound.size === words.length) {
+          alert('Selamat! Kamu telah menemukan semua kata positif. Ingat, berpikir positif setiap hari bisa membuat hidupmu lebih ceria dan penuh semangat 🌈');
+        }
+      } else {
+        currentSelection.forEach(c => c.style.backgroundColor = '');
+      }
+      currentSelection = [];
+      currentWord = '';
+      isMouseDown = false;
+    });
+
+    function selectCell(cell) {
+      if (cell.classList.contains('found') || currentSelection.includes(cell)) return;
+      cell.style.backgroundColor = '#ffeaa7';
+      currentSelection.push(cell);
+      currentWord += cell.textContent;
+    }
+
+    // Penjelasan pentingnya emosi positif
+    const penjelasan = `Di dalam hidup, kita bisa merasa banyak hal. Tapi tahukah kamu? Emosi positif seperti <strong>tenang</strong>, <strong>sabar</strong>, <strong>syukur</strong>, <strong>cinta</strong>, <strong>gembira</strong>, dan <strong>bangga</strong> adalah kunci untuk hidup yang sehat dan bahagia. Yuk, temukan kata-kata positif itu di puzzle, lalu pikirkan kapan terakhir kali kamu merasakannya!`;
+    document.getElementById('penjelasan').innerHTML = penjelasan;
+
+    function includeScript(file) {
+      const script = document.createElement('script');
+      script.src = file;
+      document.body.appendChild(script);
+    }
+  </script>
+</body>
+</html>

assets/html/findwords/test.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Test</title>
+  <script>
+    window.onload = function() {
+      document.body.innerHTML += '<p style="color:green;">✅ JS is working!</p>';
+    };
+    window.onload = showAlert;
+  </script>
+</head>
+<body>
+  <h1>Hello WebView</h1>
+</body>
+</html>

assets/html/memory/memory.html

@@ -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>