查看“︁微件:Test”︁的源代码

<div class="ggl-root" id="ggl-root">

  <!-- 初始化遮罩 -->
  <div class="ggl-mask" id="ggl-mask">
    <button class="ggl-start-btn">来一张彩票…<br>…不，三张吧</button>
  </div>

  <!-- 顶部 -->
  <div class="ggl-top">
    <div class="ggl-rule">
      刮开奖券 · 在整张刮完后交由bot扫描<br>
      刮出数字即能获得对应额度的data<br>
      当“平”“安”“喜”“乐”四个字连城一条线时，可再获得一张刮刮卡<br>
      看不懂也没关系！bot会告诉你结果！
    </div>
    <div class="ggl-left">
      剩余彩票：<span id="ggl-left">—</span> 张　
      可提现 DATA：<span id="ggl-data">—</span>
    </div>
  </div>

  <div class="ggl-frame">
    <div class="ggl-ticket">

      <img class="ggl-bg"
        src="https://wm.gaoice.run/images/b/b6/%E5%9B%BE%E7%89%871.png">

      <div class="ggl-scratch-area">
        <div class="ggl-grid"></div>
      </div>

      <button class="ggl-redeem-hit" id="ggl-redeem-hit"></button>

      <div class="ggl-mascot"></div>
      <div class="ggl-bubble"></div>

      <div class="ggl-controls">
        <button id="ggl-scan">扫描结果</button>
      </div>

    </div>
  </div>
</div>

<style>
/* 原样样式 */
.ggl-root{width:375px;margin:auto;font-family:sans-serif;position:relative}
.ggl-mask{position:absolute;inset:0;background:#000d;z-index:99;display:flex;align-items:center;justify-content:center}
.ggl-start-btn{padding:12px 20px;font-size:16px}

.ggl-top{text-align:center;font-size:14px;margin-bottom:6px}
.ggl-frame{padding:10px;border:3px solid #ff00aa;box-shadow:0 0 12px #ff00aa88}
.ggl-ticket{position:relative;aspect-ratio:1075/1911}
.ggl-bg{width:100%;display:block}

.ggl-scratch-area{position:absolute;left:10%;top:35%;width:80%;height:53%}
.ggl-grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:6px}

.ggl-cell{position:relative;overflow:hidden}
.ggl-cell img,.ggl-cover{position:absolute;inset:0;width:100%;height:100%}
.ggl-cover{
  background:url("https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png") center/cover;
  cursor:pointer
}
.ggl-reward{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:bold;pointer-events:none
}

.ggl-mascot{position:absolute;left:6%;top:107%}
.ggl-bubble{position:absolute;left:6%;top:103%;width:60%;background:#fff;padding:6px;font-size:13px}
.ggl-controls{position:absolute;right:6%;top:103%}
#ggl-scan{opacity:.3}
#ggl-scan.active{opacity:1}

.ggl-redeem-hit{
  position:absolute;bottom:1%;left:2%;
  width:48%;height:10%;
  background:transparent;border:none
}

/* 终局插入容器样式 */
#ggl-ending-container{
  max-width:800px;
  margin:18px auto;
  padding:12px;
  background:#fff;
  border:2px solid #ccc;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  font-family:inherit;
  line-height:1.5;
}

/* 简单的 wikitable 风格（局部） */
.mw-collapsible{overflow:hidden}
.wikitable{border-collapse:collapse;width:100%}
.wikitable th, .wikitable td{border:1px solid #aaa;padding:6px}

/* poem 风格 */
.poem{white-space:pre-wrap;font-family:serif;background:#f8f8f8;padding:8px;border-left:3px solid #ddd}
</style>

<script>
(function(){

/* ===== 你原来的数据与逻辑（保持不变） ===== */
const root   = document.querySelector('.ggl-root');
const grid   = document.querySelector('.ggl-grid');
const bubble = document.querySelector('.ggl-bubble');
const mascot = document.querySelector('.ggl-mascot');
const scan   = document.getElementById('ggl-scan');
const leftEl = document.getElementById('ggl-left');
const dataEl = document.getElementById('ggl-data');
const mask   = document.getElementById('ggl-mask');
const redeem = document.getElementById('ggl-redeem-hit');

const OPEN = 'https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg';

let idx = 0;
let revealed = 0;
let scanned = false;
let finalized = false;
let alertTimer = null;
let redeemLocked = false;

const TICKETS = [
  {left:2,data:0,mascot:'',bubble:'你好。',onScan:'扫描完成：未检测到异常。',rewards:{12:'DATA'}},
  {left:1,data:1,mascot:'(＾▽＾)ﾉ',bubble:'第一张，只中了 DATA。',onScan:'扫描结果：DATA ×1',rewards:{1:'连',3:'着',16:'四',19:'个'}},
  {left:2,data:2,mascot:'(ﾉ◕ヮ◕)ﾉ',bubble:'连成了一条线。',onScan:'检测到异常排列，追加机会。',rewards:{1:'平',2:'安',3:'喜',4:'乐'}},
  {left:2,data:4,mascot:'(＾▽＾)',bubble:'中奖了。',onScan:'扫描完成：DATA 2MB',rewards:{8:'DATA'}},
  {left:2,data:5,mascot:'(・_・)',bubble:'什么都没有。',onScan:'扫描完成：空。',rewards:{}},
  {left:1,data:5,mascot:'(；ﾟДﾟ)',bubble:'好像哪里不对。',onScan:'扫描警告：结构异常。',rewards:{}},
  {left:0,data:5,mascot:'',bubble:'什么都没有。',onScan:'扫描完成：无数据。',rewards:{}},
  {left:0,data:7,mascot:'...',bubble:'▒▓░▒▓▒▓',onScan:'▒▓░▒▓▒▓▒▓',rewards:{3:'DATA',18:'DATA'}},
  {left:1,data:'—',mascot:'',bubble:'哦 嗯 嘿 哈',onScan:'扫描结果：DATA 溢出。',rewards:Object.fromEntries([...Array(30).keys()].map(i=>[i,'DATA']))},
  {left:0,data:'—',mascot:'',bubble:'你是谁？',onScan:'扫描中……',rewards:{}},
  {left:'▒▓░▒▓▒▓',data:'▒▓░▒▓▒▓',mascot:'平安喜乐',bubble:'你知道的太多了。',onScan:'权限越界。',rewards:{}}
];

function fadeOutCover(cover, done){
  const start = performance.now();
  const duration = 450;
  cover.style.pointerEvents = 'none';
  function frame(now){
    const p = Math.min((now - start) / duration, 1);
    cover.style.opacity = 1 - p;
    if(p < 1){
      requestAnimationFrame(frame);
    }else{
      cover.style.display = 'none';
      done && done();
    }
  }
  requestAnimationFrame(frame);
}

function build(){
  if(finalized) return;
  const t = TICKETS[idx];
  grid.innerHTML = '';
  revealed = 0;
  scanned = false;

  leftEl.textContent = t.left;
  dataEl.textContent = t.data;
  mascot.textContent = t.mascot || '';
  bubble.textContent = t.bubble || '';

  scan.textContent = '扫描结果';
  scan.classList.remove('active');

  for(let i=0;i<30;i++){
    const c = document.createElement('div');
    c.className = 'ggl-cell';
    c.innerHTML = `
      <img src="${OPEN}">
      <div class="ggl-reward">${t.rewards?.[i] || ''}</div>
      <div class="ggl-cover"></div>
    `;
    const cover = c.querySelector('.ggl-cover');
    cover.onclick = ()=>{
      if(c.dataset.done || finalized) return;
      c.dataset.done = 1;
      fadeOutCover(cover, ()=>{
        if(++revealed === 30){
          scan.classList.add('active');
        }
      });
    };
    grid.appendChild(c);
  }
}

function startInfiniteAlert(){
  if(alertTimer) return;
  const TEXT = '冲刺！冲刺！';
  (function loop(){
    alert(TEXT);
    alertTimer = setTimeout(loop, 200);
  })();
}

function showRedeemModal(){
  if(redeemLocked) return;
  redeemLocked = true;

  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.7);
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
  `;

  const box = document.createElement('div');
  box.style.cssText = `
    background:#fff;
    padding:20px;
    width:70%;
    text-align:center;
    font-size:14px;
  `;
  box.textContent = '无法兑奖';

  overlay.appendChild(box);
  document.querySelector('.ggl-ticket').appendChild(overlay);

  setTimeout(()=>{
    box.innerHTML = `
      <div>系统已记录</div>
      <div>给你一张彩票</div>
    `;
    const btn = document.createElement('button');
    btn.textContent = '确定';
    btn.style.marginTop = '12px';
    btn.onclick = ()=>{
      overlay.remove();
      redeemLocked = false;
      idx = 10;
      build();
    };
    box.appendChild(btn);
  }, 2200);
}

/* ===== 内置 WikiText（放在微件里，不调用外部） ===== */
const INTERNAL_WIKITEXT = `
== 收藏品 ==
 冲刺！冲刺！
 收集时间：？
 ottootto。

`;

/* ===== 简单的客户端 WikiText 解析器（支持 == 标题 ==、表格、! 表头、|- 行、| 单元、<poem>） ===== */
function parseWikiToHtml(wikitext){
  let text = wikitext.replace(/\r\n/g, '\n');

  // 1) 处理 <poem> ... </poem>
  text = text.replace(/<poem>([\s\S]*?)<\/poem>/gi, function(_, inner){
    // 保留换行
    const safe = escapeHtml(inner.trim());
    return `<div class="poem">${safe}</div>`;
  });

  // 2) 处理 标题 == ... ==
  text = text.replace(/^==\s*(.+?)\s*==$/gm, function(_, t){
    return `<h2>${escapeHtml(t)}</h2>`;
  });

  // 3) 处理表格块 {|| ... |}
  text = text.replace(/\{\|([\s\S]*?)\|\}/g, function(_, tableBody){
    // 处理每一行
    const lines = tableBody.split('\n').map(l=>l.trim()).filter(l=>l.length>0);
    let html = '<table class="wikitable">';
    let inRow = false;
    for(let i=0;i<lines.length;i++){
      const line = lines[i];
      if(line.startsWith('!')){ // header cell(s), can be multiple separated by !!
        const cells = line.slice(1).split('!!').map(s=>s.trim());
        html += '<thead><tr>';
        cells.forEach(c=> html += `<th>${escapeHtml(c)}</th>`);
        html += '</tr></thead>';
      }else if(line === '|-'){ // new row
        if(inRow) html += '</tr>';
        html += '<tr>';
        inRow = true;
      }else if(line.startsWith('|')){ // cell content, may be single cell or multiple with ||
        const content = line.slice(1);
        const cells = content.split('||').map(s=>s.trim());
        cells.forEach(c=> html += `<td>${escapeHtml(c)}</td>`);
      }else{
        // fallback: plain row cell
        html += `<tr><td>${escapeHtml(line)}</td></tr>`;
      }
    }
    if(inRow) html += '</tr>';
    html += '</table>';
    return html;
  });

  // 4) 其余换行转段落（简单处理）
  text = text.replace(/\n{2,}/g, '</p><p>');
  text = '<p>' + text + '</p>';
  // 清理空段落
  text = text.replace(/<p>\s*<\/p>/g, '');
  return text;
}

function escapeHtml(s){
  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

/* ===== 终局：隐藏微件并插入解析后的 HTML ===== */
function triggerFinal(){
  if(finalized) return;
  finalized = true;

  try{ document.body.style.filter = 'invert(1)'; }catch(e){}
  if(root) root.style.display = 'none';

  // 解析内置 wiki 文本并插入
  const html = parseWikiToHtml(INTERNAL_WIKITEXT);
  const container = document.createElement('div');
  container.id = 'ggl-ending-container';
  container.innerHTML = html;

  if(root && root.parentNode){
    root.parentNode.insertBefore(container, root.nextSibling);
  }else{
    document.body.appendChild(container);
  }
}

/* ===== 交互逻辑（保持原样） ===== */
scan.onclick = ()=>{
  if(!scan.classList.contains('active') || finalized) return;

  if(idx === 9 && revealed === 30){
    startInfiniteAlert();
    return;
  }

  if(idx === 10 && revealed === 30){
    triggerFinal();
    return;
  }

  if(!scanned){
    scanned = true;
    bubble.textContent = TICKETS[idx].onScan;
    scan.textContent = '再来一张';
    return;
  }

  idx++;
  build();
};

redeem.onclick = ()=>{
  if(idx === 9 && revealed === 30){
    showRedeemModal();
  }
};

mask.onclick = ()=>{
  mask.remove();
  build();
};

document.addEventListener('keydown',e=>{
  if(finalized) return;
  if(e.shiftKey && e.key.toLowerCase()==='d'){
    grid.querySelectorAll('.ggl-cover').forEach(c=>c.style.display='none');
    revealed = 30;
    scan.classList.add('active');
  }
});

if(!mask){
  build();
}

})();
</script>