index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" href="icon.png">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="MobileOptimized" content="176"/>
    <meta name="HandheldFriendly" content="True"/>
    <meta name="description" content="美色国，带你享受全球美色">
    <title>美色国</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
    <script src="https://unpkg.com/tonweb@0.0.41/dist/tonweb.js"></script>
    <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style >
        body::-webkit-scrollbar {
          display: none;
        }
        .app {
          padding: 10px 10px;

          > header {
            display: flex;
            justify-content: space-between;

            margin-bottom: 10px;
          }
        }
    </style>
</head>
<body style="text-align: center;box-sizing: border-box;height:auto;">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <defs>
        <image id="leaf" width="13" height="15" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA+0lEQVQokb1RS07DMBQcO3aaUNTykWCBWHAGllyFK/YuXVKplQiIQogEkZ3ixKryqgYlOCFqdh3JG7+ZeTM2e5w90M39OUujDMKX8CcCOs7QAidI6eP0eoQ0MhCbpNiPyeEwDIDvSXqdQ445bJF3DXrBa/dwGoBKgorTQaE4uxvBaFMdL/SwLSxKa/C9/qoIMghweXvlakh0u5Ai+tmaepvbr9qePOkmHjpilmsLa4pGwMMS+qPqzPpE0HEKLqh2p3yTQb2aJo0bDy/zxT8DlSiML05a3yDeFssD7/TX1UVvPBeeIHyu3lt3rXiHEEfPQPTLGNzUhyOJAOwAj4pfMqYylvcAAAAASUVORK5CYII="/>
        <image id="soil" width="18" height="4" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAECAYAAACDQW/RAAAAu0lEQVQYlaXPO27CQBgA4fF6H15nsQJpkJBoEaLJ/dv0lFQpgxQUm0R+gMH74whyhMwBPmmS15kei8wyzzOiUiyXK1o5UQwD6BvnaHEaxAgxjfiL4+c0El7ANYHd55599YEGCCbgwpTnrKNvjyjpqXtL/dTgo+eqLePhSmoc5VjSq4j58nTmgO+GO/EHbdZr8oWnriCbJdAIoRCEKU37jbMTRIQbFqsUl3gkUSn+7DB5y/v2jcfag/xPwC/8SEhI+JPv8wAAAABJRU5ErkJggg=="/>
        <image id="seed" width="6" height="6" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAb0lEQVQImQFkAJv/AXgvAABBSzOOM0lBVQUOEQvj6QDLuZiicwDFfyyr//KY///yof//4oT////Z//jjrf4B9K1H/wsoJADkz98A7ujtACQmGgDl7PTXBLez0o456+1ivbzZ2NHU85YgHQLi7O3+xCbxOREVSH9lAAAAAElFTkSuQmCC"/>
        <image id="ground" width="18" height="7" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAHCAYAAAAF1R1/AAABJ0lEQVQYlX2QzUrDUBCFv5sGpOmvNa22xdpdhSK4FHwFV659I9/ApWtBcOtON6Lgwo0WpKGKVrTGQqtCk5uRpGnF34Hhzrln5py5V60WTBrFPI21ddA+yUyOO8fh9aVHer7M03WHVCHHxuaWHB3u4QVKOa0rlpsreN6I23Ybx+1j8H/IJHd3trk4OyfGP8L85W7aeN+6xF6o4r+PKJXKVBfrDNzn72KKWOiLw/HBPnm7SDKTpVKro7XGSM1EnPY9rFSapUyWx4cub8PBVDT8IymawqxdQimFXa4QaP33ohNbpTASJt2bDu2eO35aMj+HZVkEIgz7LiIgQRD3K+RzenzEXAjF96MyEqo1muTSY6FE6GQYiEiU0Wg8H+mFdcyFcNgf4Jye8AFwdnaq3H2D1wAAAABJRU5ErkJggg=="/>
    </defs>
</svg>

<div id="root" class="container-fluid flex align-items-center" style="max-width:420px;max-height:980px;">
    <div class="app my-2">
        <header>
            <div class="dapp-title">
                <span class="dapp-title__text">
                    <a class="alert-link" href="https://app.ston.fi/swap?chartVisible=false&ft=TON&fa=0.27&tt=EQDlXezGgA0A2dH9-Pa-rzsyp7b4qpgGN4MSbUsV0mRzjE7y">兑换$MM</a>
                </span>
            </div>
            <div id="ton-connect" ></div>
        </header>
    </div>

    <div class="card d-flex align-items-center" style="border:0px;">
        <div id="topInviterCard"></div>
        <div id="topInviterInfo" class="card-body"></div>
    </div>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">#</span>
        </div>
        <input type="number" class="form-control" id="meiseguo" onblur="metadata($('#meiseguo').val())" placeholder="请输入邀请者的ID" aria-label="请输入邀请者的ID" aria-describedby="basic-addon1">
        <div class="input-group-append">
            <button id="basic-addon1" type="button" onclick="connected()" class="btn btn-danger">申请加入</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    // Init TWA
    Telegram.WebApp.ready();
    $("#userid").val('美色国');
    Telegram.WebApp.expand();
    const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'https://meiseguo.github.io/tonconnect-manifest.json',
        buttonRootId: 'ton-connect'
    });

    tonConnectUI.onStatusChange(wallet => {
        if (wallet && wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
            // Telegram.WebApp.showAlert(JSON.stringify(wallet.connectItems.tonProof.proof))
        }
    });

    tonConnectUI.setConnectRequestParameters({ state: 'loading' });

    const tonProofPayload = 'userId';

    if (!tonProofPayload) {
        // remove loader, connect request will be without any additional parameters
        tonConnectUI.setConnectRequestParameters(null);
    } else {
        // add tonProof to the connect request
        tonConnectUI.setConnectRequestParameters({
            state: "ready",
            value: { tonProof: tonProofPayload }
        });
    }

async function metadata(tokenId) {
    if(tokenId < 1) return;
    console.log("metadata " + tokenId);
    let inviter = [tokenId,2,2,1,13,5];
    if(inviter!= undefined) buildSvg(inviter);
}

async function connected() {
    metadata($("#meiseguo").val());
    const transaction = {
        validUntil: Math.floor(Date.now() / 1000) + 360,
        messages: [
            {
                address: '0:fbe5c307440884908591d0a38f5560ecb872c597076b4aaca653c37362cfbc9e',
                amount: 50000000
            }
        ]
    }
    const result = await tonConnectUI.sendTransaction(transaction);
}

function buildSvg(inviter) {
    let tokenId = inviter[0]
    if(tokenId < 1) return;
    let level   = inviter[1]
    let itsinviter = inviter[2]
    let rootNFT    = inviter[3]
    let invited    = inviter[4]
    let recursive  = inviter[5]
    let startLeafx = 5
    let stepLeaf   = 6
    let groundx    = 3
    let gapGroundy = 5
    let seedx = 9
    let soilx = 3
    let stepSoil = 3
    let gapSoily = 6
    let y = 9
    let svghtml = '';
    for (var i = invited; i > 0; i--) {
        svghtml = svghtml + '<use x="'+startLeafx+'" y="'+y+'" xlink:href="#leaf"/>'
        y = y + stepLeaf
    }

    y = y + gapGroundy
    if(invited > 1) {
        svghtml = svghtml + '<use x="'+groundx+'" y="'+y+'" xlink:href="#ground"/>'
    }

    svghtml = svghtml + '<use x="'+seedx+'" y="'+y+'" xlink:href="#seed"/>'

    y = y + gapSoily

    for (var i = recursive; i > 0; i--) {
        svghtml = svghtml + '<use x="'+soilx+'" y="'+y+'" xlink:href="#soil"/>'
        y = y + stepSoil
    }
    let height = y + gapSoily
    svghtml = '<svg id="'+tokenId+'" data-name="美色国#'+tokenId+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="'+height+'" viewBox="0 0 24 '+height+'">' + svghtml + '</svg>'
    $('#topInviterCard').html(svghtml)
    let cardhtml = '<p class="card-text"><button type="button" onclick="connected()" class="btn btn-success">美色国#'+tokenId+'</button><div>Lv'+level+', Invited '+invited+' & '+recursive+'</div></p>'
    $('#topInviterInfo').html(cardhtml)
}
</script>
</body>
</html>