const queryString = window.location.search;
const parameters = new URLSearchParams(queryString);
let asset_id = parameters.get('asset');

const GetRequest = (url) => {
    return new Promise((resolve, reject)=>{
        fetch(url, {
            method: "GET",
            mode: 'cors'
        }).then(res=>{
            if (res.status >= 200 && res.status <= 299)
                res.text().then(res2 => {resolve(res2);})
            else
                reject(new Error());
        }).catch(err => reject(err));
    })
}
const JSONPostRequest = (url, body) => {
    return new Promise((resolve, reject)=>{
        fetch(url, {
            method: "POST",
            headers: {'Content-Type': 'application/json'}, 
            body: body,
            mode: 'cors'
        }).then(res=>{
            if (res.status >= 200 && res.status <= 299)
                res.json().then(res2 => {resolve(res2);})
            else
                reject(new Error());
        }).catch(err => reject(err));
    })
}

class Action{
    _subs=[];
    constructor(...subs){
        this._subs = subs;
    }
    AddCallback(callback){
        if (typeof callback !== 'function') throw new Error("Invalid parameter type for 'callback': "+typeof callback+". Expected 'function'.")
        this._subs.push(callback);
    }
    RemoveCallback(callback){
        this._subs.splice(this._subs.findIndex(x=> x == callback));
    }
    Invoke(data){
        for (let i=0; i< this._subs.length; i++){
            if (this._subs[i] != undefined){
                this._subs[i](data);
            }
        }
    }
}

if (asset_id == null){
    let popupFunc = () => {ShowPopupModal("Asset not found!", popupFunc);}
    popupFunc();
    location.replace("https://isotopic.io/asset-store");
}
let firstLoad = true;
const APIBaseURL = "https://dapp.isotopic.io";
const API = {
    GetAssetDetails : () => {
        return new Promise((resolve, reject) => {
            GetRequest(`${APIBaseURL}/api/v1/assets/details/${asset_id}`).then(res => {
                resolve(JSON.parse(res));
            }).catch(err => {reject(err);});
        })
    },

	GetAssetImageSrcURL : (index) => `${APIBaseURL}/api/v1/assets/files/${asset_id}/page_images/?index=${index}`,
	GetAssetMainImageSrcURL : () => `${APIBaseURL}/api/v1/assets/files/${asset_id}/page_main_image`,
    GetAssetWeb3Details : () => {
        return new Promise((resolve, reject) => {
            GetRequest(`${APIBaseURL}/api/v1/assets/web3/${asset_id}`).then(res => {
                resolve(JSON.parse(res));
            }).catch(err => {reject(err);});
        })
    },

    GetUserWallets : () => JSONPostRequest(`${APIBaseURL}/api/v1/wallet/get`, JSON.stringify({session_id: User.GetSessionID()})),
    
    GetUserRating : () => new Promise((res, rej) => {
        GetRequest(`${APIBaseURL}/api/v1/assets/rating/?user_id=${User.GetUserID()}&asset_id=${asset_id}`).then(result => {
            res(JSON.parse(result));
        }).catch(err => {rej(err);});
    }),
    SetUserRating : (rating) => JSONPostRequest(`${APIBaseURL}/api/v1/assets/rate`, JSON.stringify({session_id: User.GetSessionID(), asset_id: asset_id, rating: rating})),
    GetAssetCategories : () => new Promise((res, rej) => {
        GetRequest(`${APIBaseURL}/api/v1/assets/categories`).then(categoriesResText => {res(JSON.parse(categoriesResText)); }).catch(err => rej(err));
    }),
    GetComments : () => new Promise((res, rej) => {
        GetRequest(`${APIBaseURL}/api/v1/assets/comments/${asset_id}`).then(result => {
            res(JSON.parse(result));
        }).catch(err => {rej(err);});
    }), 
    AddNewComment : (content, parent_id = null) => JSONPostRequest(`${APIBaseURL}/api/v1/assets/comments/${asset_id}/post`, JSON.stringify({session_id: User.GetSessionID(), content: content, parent_id: parent_id})),
    Analytics : () => {
        JSONPostRequest(`${APIBaseURL}/api/v1/analytics/entry`, JSON.stringify({session_id: MyAccount.session_id, action: firstLoad == true ? "visit" : "stay", asset_id: asset_id, data: {userAgent: navigator?.userAgent}}));
        firstLoad = false;
    },
    GetAssocGames : (asset_uuid) => new Promise((res, rej) => {
        GetRequest(`${APIBaseURL}/api/v1/assets/get-assoc-games/?uuid=${asset_uuid}`).then(result => {
            res(JSON.parse(result));
        }).catch(err => {rej(err);});
    }), 
}

//Opens Login Panel, waits for login, and returns session_id
const OpenAndWaitForLogin = () => {
    return new Promise((resolve, reject)=>{
        $("body").addClass("edgtf-right-side-menu-opened");
        $(".edgtf-side-menu-button-opener, .edgtf-icon-has-hover, .edgtf-side-menu-button-opener-svg-path").addClass("opened");
        const resolveLoginCallback = (value) => {
            resolve(value);
            MyAccount.OnAccountSet.RemoveCallback(resolveLoginCallback);
        }
        MyAccount.OnAccountSet.AddCallback(resolveLoginCallback);
    })
}


let storesidebarRes = GetRequest(`${APIBaseURL}/asset-store/sidebar`).catch(err => {throw err});

let OnAssetReady = new Action();

let details;
let web3details;
let games_assoc;
const assetPagePromises = [
    API.GetAssetDetails().then(res => { details = res; window.details = res; document.title = details.title}).catch(err => {console.log(err);}),
    API.GetAssetWeb3Details().then(res => {web3details = res; window.web3details = res;}).catch(err => {console.log(err);}),
    //API.GetICPUploads(asset_id).then(res => {icpUploads = res; window.icpUploads = res;}).catch(err => {console.log(err)})
]
const getAssetCategoriesPromise = API.GetAssetCategories();

$('head').append('<link rel="stylesheet" href="https://dapp.isotopic.io/games-page/css" type="text/css" />');

$(document).ready(async ()=> {

    let isotopicSvg=`<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.000000 638.000000" preserveAspectRatio="xMidYMid meet" width="30px" height="25px">

    <g transform="translate(0.000000,638.000000) scale(0.100000,-0.100000)" fill="white" stroke="none">
    <path d="M1934 6361 c-180 -51 -327 -220 -356 -409 -9 -59 -8 -86 6 -158 31
    -159 95 -255 228 -340 46 -29 70 -52 74 -69 9 -34 -63 -1210 -76 -1257 -13
    -47 -65 -116 -109 -145 -49 -33 -369 -133 -425 -133 -26 0 -61 7 -79 17 -36
    18 -455 424 -474 459 -9 15 -12 60 -10 136 2 109 1 116 -30 180 -37 79 -98
    142 -173 177 -47 22 -69 26 -145 26 -77 0 -98 -4 -145 -26 -84 -40 -135 -90
    -176 -174 -32 -64 -36 -83 -37 -148 0 -62 5 -85 30 -138 55 -117 169 -204 286
    -216 36 -4 79 0 125 12 50 12 75 14 89 7 10 -6 125 -118 255 -249 207 -208
    238 -243 238 -270 0 -19 -21 -66 -54 -124 -30 -52 -69 -137 -87 -189 -28 -84
    -33 -111 -37 -230 -3 -109 0 -154 16 -232 50 -242 178 -426 400 -578 125 -85
    172 -155 172 -258 0 -34 -15 -78 -56 -171 -31 -69 -120 -270 -198 -446 -162
    -364 -146 -344 -294 -374 -170 -35 -287 -121 -356 -263 -84 -171 -88 -374 -10
    -518 36 -67 147 -170 217 -204 209 -99 490 -62 651 85 115 105 166 219 166
    371 0 209 -71 360 -212 454 -37 25 -70 49 -73 54 -6 9 366 856 407 927 41 70
    110 154 149 180 21 14 78 36 126 50 49 13 146 52 217 85 149 71 195 79 276 51
    38 -13 193 -115 510 -337 250 -176 474 -334 496 -352 35 -28 43 -41 49 -81 15
    -108 84 -191 184 -220 167 -48 330 75 331 250 0 74 -17 114 -75 176 -65 69
    -112 86 -218 77 l-83 -7 -380 266 c-208 146 -390 277 -404 289 -23 22 -46 36
    -142 87 -39 20 -118 98 -129 127 -5 13 -9 200 -9 416 l0 393 29 40 c16 22 42
    49 58 60 40 29 330 173 347 173 8 0 105 45 216 100 110 55 211 100 223 100 12
    0 49 -14 81 -30 200 -101 439 63 423 290 -8 118 -89 228 -194 264 -74 25 -179
    21 -241 -10 -102 -51 -172 -160 -172 -269 0 -72 34 -53 -495 -273 -389 -162
    -396 -164 -486 -109 -30 18 -79 48 -109 67 -65 39 -126 95 -146 131 -34 66
    -34 104 -4 640 16 288 32 580 36 649 4 74 12 133 19 146 8 12 34 27 60 34 58
    16 148 70 198 118 203 195 205 516 3 718 -126 126 -318 175 -492 125z m31
    -2634 c114 -38 198 -90 291 -183 68 -67 89 -96 127 -175 59 -123 72 -180 72
    -319 0 -138 -13 -197 -70 -315 -121 -250 -353 -395 -632 -395 -312 0 -573 180
    -677 469 -71 197 -53 403 51 590 54 99 187 226 290 279 126 65 204 83 348 78
    95 -2 136 -9 200 -29z"></path>
    <path d="M1665 3684 c-122 -19 -248 -81 -343 -169 -70 -66 -142 -170 -126
    -184 5 -5 74 -39 153 -75 133 -61 145 -65 154 -49 21 39 97 101 143 117 56 19
    146 21 195 4 53 -18 117 -66 146 -109 14 -21 32 -39 39 -39 16 0 274 118 289
    131 18 17 -37 101 -120 185 -65 66 -96 89 -165 121 -47 23 -107 46 -133 52
    -56 13 -187 22 -232 15z"></path>
    <path d="M1133 3197 c-13 -22 -16 -236 -3 -300 31 -162 130 -309 270 -402 108
    -72 272 -124 291 -94 10 16 12 250 3 296 -4 22 -18 35 -62 58 -102 54 -153
    123 -171 234 -5 34 -13 66 -17 72 -3 6 -54 34 -113 61 -177 84 -190 88 -198
    75z"></path>
    <path d="M2210 3117 l-154 -72 -16 -65 c-27 -114 -92 -195 -184 -230 l-26 -10
    0 -170 0 -170 28 0 c16 0 53 7 83 16 262 76 464 371 446 649 -10 140 2 136
    -177 52z"></path>
    </g>
    </svg>`;

    const SetElementHTMLFromWeb = async (element, htmlURL) => {
        let htmlString = await GetRequest(htmlURL).catch(err => {throw err});
        element.html(htmlString);
    }
   // const storeSidebar = $("#store-sidebar");
    //SetElementHTMLFromWeb( storeSidebar, "https://dapp.isotopic.io/assets-page/sidebar");
        const sidebarElement = $('#store-sidebar');
        let htmlString = await storesidebarRes;
        sidebarElement.html(htmlString);

    try{
        $("#nav-menu-item-11384").addClass("edgtf-active-item");
    } catch {}

	await Promise.all(assetPagePromises);
    asset_id = details.id;
    OnAssetReady.Invoke(details);

    let IsWeb3Available = true;

    if (details == null || details.result == "fail"){
        return setTimeout(() => {setTimeout(() => {window.location.href = "https://isotopic.io/asset-store/";}, 200)}, 2000);
    }

    let assocGamesPromise = API.GetAssocGames(details.uuid);

    /* MyAccount.OnReady.then(() => {
        API.Analytics();
        setInterval(() => {
            API.Analytics();
        }, 60000);
    }); */
    

    if (web3details.web3_enabled == null || web3details.web3_enabled == false){
        IsWeb3Available = false;
    }

    const TimeoutPromise = (timeout) => new Promise((res, rej) => {setTimeout(res, timeout);});

    /*RETURN ALL ASSETS*/
    const SearchStore = (body) => {
        return JSONPostRequest("https://dapp.isotopic.io/api/v1/assets/search", JSON.stringify(body));
    }

    const GetThumbnailSrcURL = (asset_id) => `https://dapp.isotopic.io/api/v1/assets/files/${asset_id}/thumbnail`;
    const GetThumbnailSrcURL_Game = (game_id) => `https://dapp.isotopic.io/api/v1/store/files/${game_id}/thumbnail`;

    /*DEFINED FROM ELEMENTOR */
    const singleAssetMainDiv = $("#single-game");

    /*HTML GETTERS*/
    const GetCategories = (categoryName, categoryID) =>{
       return` <span><a href="https://isotopic.io/asset-store/?category=${categoryID}">${categoryName}</a>, </span>`;
    }

    const GetKeywords = (keyword) =>{
        return` <span><a href="https://isotopic.io/asset-store/?query=${keyword}">${keyword}</a>, </span>`;
    }

    /*related assets item*/
    const GetRelatedAssets = (asset) =>{
        return `<div class="single-game-related-item flex-row">
                    <a href="https://isotopic.io/asset/?asset=${asset.id}"  class="single-game-related-item-image hover01">
                        <figure class="card rounded" style="width: 100%;height: 100%;">
                            <img style="height: 100%; object-fit: cover;" src="${GetThumbnailSrcURL(asset.id)}" />
                            
                        </figure>    
                    </a>

                    <div class="single-game-related-item-text flex-column">
                        <a href="https://isotopic.io/asset?asset=${asset.id}">
                            <h6 class="single-game-related-title" style="margin: 0 0;">${asset.title}</h6>
                        </a>
                        <div style="max-width: 100%; display: flex;">
                            <a style="display:flex; align-items: center;" href="https://isotopic.io/asset-store-search/?publisher=${asset.publisher_id}">
                                <img class="single-game-related-item-publisher-pic" src="${asset.publisher_pic}">
                                <p class="single-game-related-publisher">${asset.publisher_name}</p>
                            </a>
                        </div>

                        <div class="single-game-related-description flex-row" >
                            <a style="color: white;" href="https://isotopic.io/asset?asset=${asset.id}">
                                <p style="margin: 5px 0 0 0;">${asset.short_description}</p>
                            </a>
                        </div>
                    </div>
                </div>
                `;
    }
    const GetRelatedGames = (game) =>{
        return `<div class="single-game-related-item flex-row">
                    <a href="https://isotopic.io/game/?game=${game.id}"  class="single-game-related-item-image hover01">
                        <figure class="card rounded" style="width: 100%;height: 100%;">
                            <img style="height: 100%; object-fit: cover;" src="${GetThumbnailSrcURL_Game(game.id)}" />
                            
                        </figure>    
                    </a>

                    <div class="single-game-related-item-text flex-column">
                        <a href="https://isotopic.io/game?game=${game.id}">
                            <h6 class="single-game-related-title" style="margin: 0 0;">${game.title}</h6>
                        </a>
                        <div style="max-width: 100%; display: flex;">
                            <a style="display:flex; align-items: center;" href="https://isotopic.io/game-store-search/?publisher=${game.publisher_id}">
                                <img class="single-game-related-item-publisher-pic" src="${game.publisher_pic}">
                                <p class="single-game-related-publisher">${game.publisher_name}</p>
                            </a>
                        </div>

                        <div class="single-game-related-description flex-row" >
                            <a style="color: white;" href="https://isotopic.io/asset?asset=${game.id}">
                                <p style="margin: 5px 0 0 0;">${game.short_description}</p>
                            </a>
                        </div>
                    </div>
                </div>
                `;
    }


     const loadingSVG =`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: none; display: inline; shape-rendering: auto;height: 2em;line-height: 1;top: 0.5em;position: relative; margin-left: 2%;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
     <g transform="rotate(0 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8888888888888888s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(40 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7777777777777778s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(80 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(120 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5555555555555556s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(160 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4444444444444444s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(200 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(240 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2222222222222222s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(280 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1111111111111111s" repeatCount="indefinite"></animate>
       </rect>
     </g><g transform="rotate(320 50 50)">
       <rect x="47" y="19.5" rx="2.4" ry="2.4" width="6" height="15" fill="#ffffff">
         <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
       </rect>
     </g>
     </svg>`;

    /*HTML SETTER*/    
    const SetAssetInfoPanel = async () => {

        const GetRatingStarHTML = ( fullStar = 1) => {
            if (fullStar === 1) return `<svg width="20" height="20" class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="var(--assetstore-main)" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>`
            //else if (fullStar === 0.5) return `<svg class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path></svg>`
            else if (fullStar === 0) return `<svg width="20" height="20" class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>`
        }

        singleAssetMainDiv.append(`
            <h4 class="decorated-header-yellow">
                <span style="padding-left: 0;">${details.title}</span>
            </h4>
            <style>
            .clickable {
                cursor: pointer;
            }
            .fluidvids {
                height: 400px;
            }
            svg {
                pointer-events: none;
            }
            
            </style>

            <div style="margin: -10px 0 20px 0; flex-wrap: wrap;" id="special-tags-container" class="flex-row">

            </div>
                
            <div class="single-game-main-wrapper">
                <div class="single-game-scrollable">
                    <!--MAIN DISCRIPTION-->
                    <div class="single-game-sticky-content">
                        <div class="single-game-main-description">
                            <div class="single-game-img-wrapper">
                                <!--MAIN DESCRIPTION IMAGE-->
                                <div class="single-game-main-image">
                                    <div class="hover01" style="width:100%;">
                                        <figure class="card rounded" style="width: 100%;height: 100%;">
                                            <img id="clickable-image-main" class="myImg" image-index="0" imageurl="${API.GetAssetMainImageSrcURL()}" style="height: 100%; aspect-ratio: 2 / 3; object-fit: cover;" src="${API.GetAssetMainImageSrcURL()}" />
                                            <!--<div class="discount"><p>-10%</p></div>-->
                                        </figure>    
                                    </div>
                                </div>

                                <!--SMALL IMAGES-->
                                <div class="single-game-small-images">
                                    <div class="single-game-small-image-item hover01">
                                        <figure class="card" style="width: 100%;height: 100%;">
                                            <img id="clickable-image-0" class="myImg" image-index="1" imageurl="${API.GetAssetImageSrcURL(0)}" style="height: 100%; object-fit: cover;" src="${API.GetAssetImageSrcURL(0)}"/>
                                        </figure>    
                                    </div>

                                    <div class="single-game-small-image-item hover01">
                                    <figure class="card" style="width: 100%;height: 100%;">
                                            <img id="clickable-image-1" class="myImg" image-index="2" imageurl="${API.GetAssetImageSrcURL(1)}" style="height: 100%; object-fit: cover;" src="${API.GetAssetImageSrcURL(1)}" />
                                        </figure>    
                                    </div>
                            
                                    <div class="single-game-small-image-item hover01">
                                        <figure class="card" style="width: 100%;height: 100%;">
                                            <img id="clickable-image-2" class="myImg" image-index="3" imageurl="${API.GetAssetImageSrcURL(2)}" style="height: 100%; object-fit: cover;" src="${API.GetAssetImageSrcURL(2)}" />
                                        </figure>    
                                    </div>
                                </div>                   
                            </div>
                        </div>
                
                <!--SINGLE ASSET SUB DESCRIPTION-->
                <div id="single-game-sub" class="single-game-sub-description-wrapper">
                    <!--SINGLE GAME SUB DESCRIPTION-->
                    <div class="single-game-sub-description">
                        <!--MAIN DESCRIPTION TEXT-->
                        <div class="single-game-main-description-text flex-column">
                            <div class="flex-row">
                                <h5 class="single-game-title">${details.title}</h5>
                                <!-- three dot menu -->
                                <div id="dropdown-dots" class="dropdown">
                                    <!-- three dots -->
                                    <ul class="dropbtn icons btn-right showLeft dropbtn-yellow">
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                    <!-- menu -->
                                    <div id="myDropdown" class="dropdown-content">

                                    </div>   
                                </div>
                            </div>
                            
                            <span class="single-game-publisher-span"><strong>Publisher: </strong><span class="asset-text-accent"><a class="asset-text-accent" href="https://isotopic.io/game-store-search/?publisher=${details.publisher_id}"> <strong>${details.publisher_name}</strong></a></span></span>
                            <div id="rating-panel-parent" class="flex-row" style="${details.special_tags?.includes("coming_soon") ? "display: none;" : ""} margin: -13px -13px -13px -13px; padding: 10px 13px 13px 13px">
                                <div style="z-index: 20; margin: 0 2px 0 2px; width: 20px; height: 20px;" id="rating-star-1" class="clickable rating-star">${GetRatingStarHTML(0)}</div>
                                <div style="z-index: 20; margin: 0 2px 0 2px; width: 20px; height: 20px;" id="rating-star-2" class="clickable rating-star">${GetRatingStarHTML(0)}</div>
                                <div style="z-index: 20; margin: 0 2px 0 2px; width: 20px; height: 20px;" id="rating-star-3" class="clickable rating-star">${GetRatingStarHTML(0)}</div>
                                <div style="z-index: 20; margin: 0 2px 0 2px; width: 20px; height: 20px;" id="rating-star-4" class="clickable rating-star">${GetRatingStarHTML(0)}</div>
                                <div style="z-index: 20; margin: 0 2px 0 2px; width: 20px; height: 20px;" id="rating-star-5" class="clickable rating-star">${GetRatingStarHTML(0)}</div>
                                <strong><p id="rating-text" style="margin: auto auto auto 3%; white-space: nowrap; font-size: 10px;"></p></strong>
                            </div>
                            <p style="white-space: pre-line;">${details.short_description}</p>
                        </div>

                        <div class="single-game-tags">
                            <span id="single-game-categories">
                                <strong>Categories: </strong>
                            </span>
                            <span id="single-game-keywords">
                                <strong>Tags: </strong>
                            </span>
                            <p class="discount-original-price" id="original-price" style=""></p>
                            <div style="" class="single-game-btns" id="game-buttons-container">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                <!--SINGLE ASSET DETAILS-->
                <div class="single-game-details  flex-column span-width">
                        
                        <!--HEADER-->
                        <div class="single-game-details-item" style="width: 100%; padding-top:0;">
                            <h5 class="decorated-header asset-text-accent" style="padding-top:0; margin-top:0px;">
                                <span>Description</span>
                            </h5>
                        </div>

                        <!--RELEASE DATE-->
                        <div class="single-game-details-item" style="color: white;">
                            
                        </div>

                        <!--LONG DESCRIPTION-->
                        <div id="html_preview_details" class="span-width">${details.details_html}
                        </div>
                        <br>

                        <!--RATING PANEL-->
                        <!-- <div class="single-game-details-rating flex-row single-game-details-item">
                            
                            <div class="single-game-details-rating-col flex-column">
                                <strong>Pegi Rating:</strong>
                                <p>Suitable for people aged 12 and over.</p>
                            </div>
                            
                            <div class="vertical-separator"></div>

                            <div class="single-game-details-rating-col flex-column">
                                <strong>Genre:</strong>
                                <p>TBD</p>
                            </div>

                            <div class="vertical-separator"></div>

                            <div class="single-game-details-rating-col flex-column">
                                <strong>Customer Rating:</strong>
                            </div>
                        </div> -->

                    </div>
                </div>
                
                <style>
                    .clickable {
                        cursor: pointer;
                    }
                    .fluidvids {
                        height: 400px;
                    }
                    svg {
                        pointer-events: none;
                    }
                    div.clickable:hover > h6 {
                        color: red;
                    }
                    #expand-game-desc:hover {
                        text-decoration: underline;
                    }
                    @media screen and (max-width: 640px) {
                        .single-game-extras-txt-with-img {
                            display: none;
                        }
                        #game-image-under-short{
                            display: none;
                        }
                        .single-game-extras-txt {
                            width: unset !important;
                        }
                        .single-game-extras-txt > h6 {
                            font-size: 14px !important;
                        }
                    }
                    .vjs-play-control{
                        display:none !important;;
                    }
                    .vjs-control-bar{
                        border-radius: 0 0 14px 14px;
                    }
                </style>

                <!--ASSET GAMES-->
                <div id="asset-games-parent" class="flex-row" style="flex-flow:row wrap !important; display: none;">
                    <div class="single-asset-related flex-column" style="min-width:50%;">
                        <div class="" style="width: 100%;">
                            <h5 class="decorated-header">
                                <span><span class=" asset-text-accent">Rewarded </span>in</span>
                            </h5>
                        </div>

                        <div id="games-panel-earn-in" class="single-game-related-grid flex">
                        </div>
                    </div>
                    <div class="single-asset-related flex-column" style="min-width:50%;">
                        <div class="" style="width: 100%;">
                            <h5 class="decorated-header">
                                <span><span class=" asset-text-accent">Find </span>in</span>
                            </h5>
                        </div>

                        <div id="games-panel-use-in" class="single-game-related-grid flex">
                        </div>
                    </div>
                </div>

                <div id="asset-comments-and-similar-parent" class="flex-row" style="flex-flow:row wrap !important; display: none;">
                    <!--COMMENTS-->
                    <div id="comment-section-div" class="flex-column span-width asset-comment-section">
                        <div class="" style="width: 100%;">
                            <h5 class="decorated-header">
                                <span>Asset <span class=" asset-text-accent">Comments</span></span>
                            </h5>
                        </div>
                        <div class="comment-container">
                            <img id="new-comment-profile-img" class="comment-profile-pic" src="https://dapp.isotopic.io/api/v1/user/profile/pic/get?user_id=0"/>
                            <div class="flex-column span-width">
                                <h6 id="post-comment-title" class="comment-title" style="margin-bottom: 10px;">POST A COMMENT</h6>
                                <textarea id="new-comment-content" rows=7 placeholder="Type your comment..."></textarea>
                                <div class="flex-column span-width" style="padding: 15px 0px 0px 0px">
                                    <div id="post-comment-button" role="button" class="elementor-button-link elementor-button comment-game-btn" style="background-color: var(--assetstore-main);">
                                        <span class="elementor-button-content-wrapper" style="position: relative; bottom: 5px;">
                                            <span id="post-comment-button-text" class="elementor-button-text">POST</span>
                                        </span> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ___________________________RELATED ASSETS____________________________________ -->

                    <div class="single-asset-related flex-column" style="min-width:50%;">
                        <div class="" style="width: 100%;">
                            <h5 class="decorated-header">
                                <span><span class=" asset-text-accent">More</span>Assets</span>
                            </h5>
                        </div>

                        <div id="related-games-panel" class="single-game-related-grid flex">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        `);

        $("body").append(`
        <!--MODAL TO VIEW IMAGES FULLSCREEN-->
        <div id="myModal" style=" visibility: hidden; z-index: 9999;" class="modal">
            <span id="close-modal"class="close">&times;</span>
            <button id="modal-next-btn" class="image-modal-nav-btns image-modal-nav-btns-next">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg>
            </button>
            <button id="modal-prev-btn" class="image-modal-nav-btns image-modal-nav-btns-prev">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
            </button>
                <img class="modal-content" id="img01">
            <div id="caption"></div>
        </div>`);  

        const SpecialTagsContainer = $("#special-tags-container");

        const GetSpecialTagHTML = (name, url) =>`
        <a href="${url}">
            <div class="single-asset-special-tag-bg">
                <p class="special-tag-content">${name}</p>
            </div>
        </a>
        `;
        SpecialTagsContainer.append(GetSpecialTagHTML(details.platform.toUpperCase(), `https://isotopic.io/asset-store/?platform=${details.platform}`));
        details.special_tags.split("-").forEach(tag => {
            if (tag != ""){
                SpecialTagsContainer.append(GetSpecialTagHTML(tag.toUpperCase().replace(/_/g, " "), `https://isotopic.io/asset-store/?special=${tag}`));
            }
        })
        
        const RatingSideText = $("#rating-text");
        let myRating; 

        API.GetUserRating().then(result => {myRating = result?.rating}).catch(err => {});
        MyAccount.OnAccountSet.AddCallback(async acc => {
            myRating = (await API.GetUserRating().catch(err => {}))?.rating;
        })

        const SetRatingFromDetails = () => {
            if (details.rating.rating == null || details.rating.rating_count == 0){
                for (let i=1; i<=5; i++){
                    $(`#rating-star-${i}`).html(GetRatingStarHTML(0));
                }
                RatingSideText.text("(Not enough ratings)");
            } else {
                let rating = details.rating.rating;
                let floored = Math.round(rating);
                let i=1;
                for (; i<= floored; i++){
                    $(`#rating-star-${i}`).html(GetRatingStarHTML(1));
                }
                if (rating - floored >= 0.5){
                    $(`#rating-star-${i}`).html(GetRatingStarHTML(0)); //replace with 0.5 for half 
                } else {
                    if (floored < 5){
                        $(`#rating-star-${i}`).html(GetRatingStarHTML(0));
                    }
                }
                for (let i2=1; i2<6-i; i2++){
                    $(`#rating-star-${i+i2}`).html(GetRatingStarHTML(0));
                }

                RatingSideText.text(`${Number.parseFloat(details.rating.rating).toFixed(1)}/5.0 (${details.rating.rating_count} ratings)`);
            }
        }
        SetRatingFromDetails();

        let ratingPending = false;
        const SetClickEvent = () => {
            $("div .rating-star").on('click touchstart', function (event){
                if (ratingPending == true) return;
                let session_id = MyAccount.session_id ?? getCookie('session_id');
                let isLoggedIn = ![undefined, null, ""].includes(session_id);
                if (!isLoggedIn) return ShowPopupModal("You must be logged in to rate this!", ()=>{OpenAndWaitForLogin()});
                let elem = $(event.target);
                //let elem = $(event.target)[0].tagName == "div" ? $(event.target) : $(event.target)[0].tagName == "svg" ? $(event.target).parent() : $(event.target).parent().parent();
                let index = Number.parseInt(elem.attr('id').slice(-1));
                if (index == null) return;
                ratingPending = true;
                elem.removeClass("clickable");
                API.SetUserRating(index).then(result => {
                    elem.addClass("clickable");
                    if (result.result == "success"){
                        ShowPopupModal("Rating success!");
                        ratingPending = false;
                        myRating = index;
                        API.GetAssetDetails().then(newDetails => {
                            details = newDetails;
                            SetRatingFromDetails();
                        })
                    } else {
                        ShowPopupModal(result.error);
                        ratingPending = false;
                    }
                    
                }).catch(err => {console.log(err); ratingPending = false;});
            });
        }
        SetClickEvent();

        const CheckHoveringOverRating = () => {
            if ($('#rating-panel-parent:hover').length == 0) {
                SetRatingFromDetails();
                clearInterval(CheckRatingHoverInterval);
                CheckRatingHoverInterval = null;
            }
        }
        let CheckRatingHoverInterval = setInterval(CheckHoveringOverRating, 250);

        const SetHoverEvent = () => {
            $(".rating-star").mouseenter(function () {
                let index = Number.parseInt($(this).attr('id').slice(-1));
                let i=1;
                for (; i<=index; i++){
                    $(`#rating-star-${i}`).html(GetRatingStarHTML(1));
                }
                for (let i2 = 0; i2 < 5-index; i2++){
                    $(`#rating-star-${i+i2}`).html(GetRatingStarHTML(0));
                }
                if (CheckRatingHoverInterval === null){
                    CheckRatingHoverInterval = setInterval(CheckHoveringOverRating, 250);
                }
                if (typeof myRating == "number"){
                    RatingSideText.text(`Your rating: ${myRating}/5`);
                } else {
                    let session_id = MyAccount.session_id ?? getCookie('session_id');
                    let isLoggedIn = ![undefined, null, ""].includes(session_id);
                    if (isLoggedIn){
                        RatingSideText.text(`Rate this!`);
                    } else {
                        RatingSideText.text(`Login to rate this!`);
                    }
                }
            });

            $("#rating-panel-parent").mouseleave(() => {
                SetRatingFromDetails();
            });
        };
        
        SetHoverEvent();  

        
        var currentImageIndex = 0;
        var imageURLS = [API.GetAssetMainImageSrcURL(), API.GetAssetImageSrcURL(0), API.GetAssetImageSrcURL(1), API.GetAssetImageSrcURL(2)];
        console.log("imageURLS:  " + imageURLS.length);

        $('.myImg').click(function(){
           
            let modal = document.getElementById("myModal");
            //modal.style.display = "flex";
            modal.style.visibility = "visible";
            let newSrc = this.src;
            let modalImg = document.getElementById("img01");

            let url = this.getAttribute("imageurl");

            currentImageIndex = this.getAttribute("image-index");

            modalImg.src = url;
            //captionText.innerHTML = this.alt;
        });


        $('#modal-next-btn').click(function(){
            if(currentImageIndex<imageURLS.length-1){
                currentImageIndex++;
            }else{
                currentImageIndex=0;
            }
            console.log("Next button clicked Image index: " + currentImageIndex);
            let modalImg = document.getElementById("img01");
            modalImg.src = imageURLS[currentImageIndex];
        });

        $('#modal-prev-btn').click(function(){
            if(currentImageIndex>0){
                currentImageIndex--;
            }else{
                currentImageIndex = imageURLS.length-1;
            }
            console.log("Prev button clicked Image index: " + currentImageIndex);
            let modalImg = document.getElementById("img01");
            modalImg.src = imageURLS[currentImageIndex];
        });

        $("#close-modal").click(()=>{
            let modal = document.getElementById("myModal");
            //modal.style.display = "none";
            modal.style.visibility = "hidden";
        });

        (async () => {
            let assets = (await SearchStore({orderby: "RAND()", limit: 5}).catch(err => {throw err;})).results;
            let relatedAssetsPanel = $("#related-games-panel");
            let forLoopLimit = 4;
            for(let i=0; i<forLoopLimit; i++){
                if (assets[i].id == asset_id){
                    forLoopLimit = 5;
                    continue;
                }
                $(GetRelatedAssets(assets[i])).appendTo(relatedAssetsPanel);
            }
            $("#asset-comments-and-similar-parent").css("display", "");
        })();
        (async () => {
            let assocGames = await assocGamesPromise;
            if (assocGames.result != "success" || assocGames.games.length == 0){
                return;
            }
            let relatedGamesUse = $("#games-panel-use-in");
            let relatedGamesReward = $("#games-panel-earn-in");

            assocGames.games.forEach(game => {
                $(GetRelatedGames(game.game)).appendTo(relatedGamesUse);
                if (game.can_earn){
                    $(GetRelatedGames(game.game)).appendTo(relatedGamesReward);
                }
            });
            $("#asset-games-parent").css("display", "");
        })();


        /*dot menu controller*/

        $('#dropdown-dots').click(function(){
            $(".dropdown-content").slideToggle( 300, "linear" );
            $('.icons').toggleClass('active');
        });

       


        // Close the dropdown if the user clicks outside of it
        window.addEventListener("click", function(event) {
            if (!event.target.matches(".dropbtn")) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains("show")) {
                openDropdown.classList.remove("show");
                }
            }
            }
        });
        
    }




    let BuyPlayBusy = false;
    const SetBuyPlayButtons = async () => {
        if (BuyPlayBusy || navigator?.userAgent?.indexOf('Electron') >= 0) return;
        
        const AssetButtonsContainer = $("#game-buttons-container");
        const dotMenuContainer = $("#myDropdown");
        AssetButtonsContainer.html("");
         dotMenuContainer.html("");

        
        /******************** */
        const GetButtonHTML = (id, text, enabled, href = null, _class = null) => `
        ${href != null ? `<a class="single-asset-btn" href="${href}" target="_blank">` : ""}
            <div id="${id}" style="${href != null ? 'width: 100%; margin: 0 0 0 0;' : ''}" role="button" class="${ _class ?? ""} elementor-button-link elementor-button ${enabled ? 'single-asset-btn' : 'single-game-btn-disabled remove-animations'}">
                <span class="elementor-button-content-wrapper">
                    <span id="play-button-text" class="single-game-btn-text">${text}</span>
                </span>
            </div>
        ${href != null ? `</a>` : ""}`;

        const GetAndInjectButton = (id, text, enabled, href=null, _class=null) => {
            let html = GetButtonHTML(id, text, enabled, href, _class);
            $(html).appendTo(AssetButtonsContainer);
            return $(`#${id}`);
        }
        
        
        /*DOT MENU*/
        const GetDotEntryHTML = (id, text, enabled, href = null, _class = null) => `
        ${href != null ? `<a class="" href="${href}">` : ""}
            <div browseronly="true" id="${id}" style="${href != null ? 'width: 100%; margin: 0 0 0 0;' : ''}" role="button" class="${ _class ?? ""} elementor-button-link elementor-button ${enabled ? '' : 'single-game-btn-disabled remove-animations'}">
                <span class="dot-menu-content-wrapper">
                    <span id="dot-menu-entry-text" class="">${text}</span>
                </span>           
            </div>
        ${href != null ? `</a>` : ""}`;

        const GetAndInjectButtonToDotMenu = (id, text, enabled, href=null, _class=null) => {
            console.log("GetAndInjectButtonToDotMenu: " + text);
            let html = GetDotEntryHTML(id, text, enabled, href, _class);
            $(html).appendTo(dotMenuContainer);
            return $(`#${id}`);
        }


        const SetButtonActive = (button, active) => {
            if (active){
                button.removeClass("single-game-btn-disabled");
                button.addClass("single-asset-btn");
                
                button.removeClass("remove-animations");
            } else{
                button.addClass("single-game-btn-disabled");
                button.removeClass("single-asset-btn");
               
                button.addClass("remove-animations");
            }
            button.active=active;
        }
        const SetButtonText = (button, text) => {
            button.children().first().children().first().text(text);
        }
        const SetButtonVisible = (button, value) => {
            button.css("visibility", value ? "visible": "hidden");
        }

        if (!details.available_to_play){
            let unavailable_button = GetAndInjectButton("game-unavailable-button", details.special_tags?.includes("coming_soon") ? "COMING SOON" : "NOT AVAILABLE", false, null, "single-game-btn-desc");
            return;
        }

        
        let notMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? false : true;
        let downloadClientButton = GetAndInjectButtonToDotMenu("game-download-button-2", "VIEW IN CLIENT", notMobile, "isotopic-client://asset?asset="+asset_id, "dot-menu-entry");
       
        /*Paid assets*/
        if (!IsWeb3Available || (IsWeb3Available && web3details.license_contract == null) ){
            if (details.platform != null && notMobile){
                let downloadsButton = GetAndInjectButton("game-buy-button", "DOWNLOAD ASSET", true, null, "single-game-btn-desc");
                if (details.special_tags?.includes("cross_game_support") && notMobile){
                    let useAssetButton = GetAndInjectButton("asset-integrate-button", "USE ASSET", true, null, "single-game-btn-desc");
                    useAssetButton.click(()=>{
                        ShowPopupModal(`
                            <h6 align="center">Add this asset to your game!</h6>
                            <p>Download the files, create your own version, connect with the Isotopic SDK, <br>and let users who own this asset unlock it inside your game!</p>
                            <div style="display: flex;flex-direction: row;gap: 15px; width: 700px; align-items: center;">
                                ${GetButtonHTML("integrate-asset-SDK-github-button", "Isotopic SDK", true, "https://github.com/IsotopicIO/isotopic-sdk-unity/", "single-game-btn-desc")}
                                ${GetButtonHTML("integrate-asset-download-files-button", "Download Asset Files", true, `https://dapp.isotopic.io/assets/${asset_id}/download.zip?user=isotopic-tester`, "single-game-btn-desc")}
                                ${GetButtonHTML("integrate-asset-copy-UUID", "Copy UUID", true, null, "single-game-btn-desc")}
                            </div>
                            `);
                        $("#integrate-asset-copy-UUID").click(()=>{
                            navigator.clipboard.writeText(details.uuid);
                            SetButtonText($("#integrate-asset-copy-UUID"), "UUID Copied!");
                        })
                    });
                }
                let storesHtml = "";

                downloadsButton.click(async () => {
                    DownloadsHTML = `<h6>DOWNLOAD ASSET</h6>`;
                    if (details.platform.includes("pc")){
                        let downloadIsoURL = `https://dapp.isotopic.io/assets/${asset_id}/download.zip?user=isotopic-tester`;

                        DownloadsHTML += `
                        <div style="display: flex; flex-direction: row; width:100%; align-items: center;">
                            <a style="width:100%;" target="_blank" href="${downloadIsoURL}"><div style="width: auto; margin: 10px;" role="button" class="elementor-button-link elementor-button ${details.downloads_available.includes("pc") ? "single-asset-btn" : "singe-game-btn-disabled remove-animations"}">
                                <span class="elementor-button-content-wrapper">
                                    <span class="elementor-button-text">${details.title} ${details.downloads_available.includes("pc") ? "": " (COMING SOON)"}</span>
                                </span>
                            </div></a>
                        </div>`;
                    }
                    
                    DownloadsHTML += `
                    <div style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center;">
                        ${storesHtml}
                    </div>
                    `;
                    
                    ShowPopupModal(DownloadsHTML);
                });
            }

           

            /* ****** */
            let originalPrice=``;
            if(details.discount!=null && details.discount!=0){
                originalPrice = details.price/(details.discount/100);
                originalPrice=`${originalPrice}$`
            }


            let priceValue = ""; 
            if(details.price=="0"){
                priceValue = "FREE";
            }else{
                priceValue = details.price+"$";
            }
            const priceTag = `<div class="single-game-btn-price"><p class="single-game-btn-price-txt">${priceValue}</p></div>` 
            let originalPriceHolder = $("#original-price");
            originalPriceHolder.text(originalPrice);

            $(priceTag).appendTo(AssetButtonsContainer);


        } else {
            try{
                if (!MyAccount.IsLoggedIn){
                    if (MyAccount.IsReady == true){
    
                        let buyButton = GetAndInjectButton("game-buy-button", "LOGIN TO BUY", true, null, "single-game-btn-desc");
                        
    
                        buyButton.click(()=>{
                            MyAccount.OpenMyAccount();
                            MyAccount.OnAccountSet.AddCallbackOneOff(()=>{
                                MyAccount.CloseMyAccount();
                            });
                        });

                        let priceValue = ""; 
                        if(details.price=="0"){
                            priceValue = "FREE";
                        }else{
                            priceValue = details.price+"$";
                        }

                        const priceTag = `<div class="single-game-btn-price"><p class="single-game-btn-price-txt">${priceValue}</p></div>`;
                        $(priceTag).appendTo(AssetButtonsContainer);

                        

                        return;
                    } else {
                        let buyButton = GetAndInjectButton("game-buy-button", "BUY FILES", false, null, "single-game-btn-desc");
                        
                        await MyAccount.OnReady;
                        SetBuyPlayButtons();
                    }
                    return;
                } 

                let buyButton = GetAndInjectButton("game-buy-button", "BUY FILES", false, null, "single-game-btn-desc");
               

                let notMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ? false : true;
                let downloadsButton = GetAndInjectButton("game-download-button", "DOWNLOAD", false, null, "single-game-btn-desc");

                if (details.special_tags?.includes("cross_game_support") && notMobile){
                    let useAssetButton = GetAndInjectButton("asset-integrate-button", "USE ASSET", true, null, "single-game-btn-desc");
                    useAssetButton.click(()=>{
                        ShowPopupModal(`
                            <h6 align="center">Add this asset to your game!</h6>
                            <p>Download the files, create your own version, connect with the Isotopic SDK, <br>and let users who own this asset unlock it inside your game!</p>
                            <div style="display: flex;flex-direction: row;gap: 15px; width: 700px; align-items: center;">
                                ${GetButtonHTML("integrate-asset-SDK-github-button", "Isotopic SDK", true, "https://github.com/IsotopicIO/isotopic-sdk-unity/", "single-game-btn-desc")}
                                ${GetButtonHTML("integrate-asset-copy-UUID", "Copy UUID", true, null, "single-game-btn-desc")}
                            </div>
                            `);
                        $("#integrate-asset-copy-UUID").click(()=>{
                            navigator.clipboard.writeText(details.uuid);
                            SetButtonText($("#integrate-asset-copy-UUID"), "UUID Copied!");
                        })
                    });
                }
                
                SetButtonActive(downloadsButton, false);
                
                let priceValue = ""; 
                if(details.price=="0"){
                    priceValue = "FREE";
                }else{
                    priceValue = details.price+"$";
                }

                /* ****** */
                let originalPrice=``;
                if(details.discount!=null && details.discount!=0){
                    originalPrice = details.price/(details.discount/100);
                    originalPrice=`<p class="discount-original-price" style="display: flex;">${originalPrice}$</p>`
                }


                const priceTag = `<div class="single-game-btn-price"><p class="single-game-btn-price-txt">${priceValue}</p></div>`;
                let originalPriceHolder = $("#original-price");
                originalPriceHolder.text(originalPrice); 
                $(priceTag).appendTo(AssetButtonsContainer);

        
                await Web3Bundle.OnReady;
                let web3Client = Web3Bundle.Web3Client;
                let seqClient = Web3Bundle.Sequence;

                let web3ContractInterface = new web3Client.Web3AppContractInterface(web3details.license_contract, web3details.license_contract_abi, web3details.payment_contract_address, web3details.payment_contract_abi);

                let priceWei = await web3ContractInterface.GetCost();
                let decimals = await web3ContractInterface.GetPaymentTokenDecimals();
                let priceEth = (parseInt(priceWei)/10**(parseInt(decimals))).toFixed(2);
                let ASSET_OWNED = false;
                try {
                    let linkedWallets = await MyAccount.GetLinkedWallets();
                    let assetIsOwned = false;
                    for (let i=0; i < linkedWallets.length; i++){
                        try{
                            let owned = await web3ContractInterface.BalanceOf(linkedWallets[i].address);
                            if (parseInt(owned) > 0){
                                assetIsOwned = true;
                                ASSET_OWNED = true;
                                break;
                            }
                        } catch { }
                        
                    }

                    //if owned display info here
                } catch {}

                downloadsButton.click(() => {
                    if (!downloadsButton.active) return;

                    DownloadsHTML = `<h6>DOWNLOAD ASSET</h6>`;
                    if (details.platform.includes("pc")){
                        let downloadIsoURL = `https://dapp.isotopic.io/assets/${asset_id}/download.zip?user=${MyAccount.session_id}`;

                        DownloadsHTML += `
                        <div style="display: flex; flex-direction: row; width:100%; align-items: center;">
                            <a style="width:100%;" target="_blank" href="${downloadIsoURL}"><div style="width: auto; margin: 10px;" role="button" class="elementor-button-link elementor-button ${details.downloads_available.includes("pc") ? "single-asset-btn" : "singe-game-btn-disabled remove-animations"}">
                                <span class="elementor-button-content-wrapper">
                                    <span class="elementor-button-text">${details.title} ${details.downloads_available.includes("pc") ? "": " (COMING SOON)"}</span>
                                </span>
                            </div></a>
                        </div>`;
                    }
                    
                    ShowPopupModal(DownloadsHTML);
                });

                SetButtonActive(downloadsButton, notMobile && ASSET_OWNED);


                let metamaskIcon = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                <svg width="50px" height="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs></defs><polyline class="single-game-btn-buy-icon" points="23.971 35.016 26.233 35.016 26.959 38.431 23.624 38.431"/><polyline class="single-game-btn-buy-icon" points="42.158 31.771 30.588 31.984 26.233 35.016 26.617 16.784 29.008 10.85 40.621 6.239 42.5 11.96 40.792 18.706 40.963 22.121 39.853 23.759 42.158 31.771 40.066 40.267 31.527 37.62 26.959 41.761 23.971 41.761"/><line class="single-game-btn-buy-icon" x1="39.8529" y1="23.7591" x2="31.698" y2="21.3529"/><line class="single-game-btn-buy-icon" x1="40.7922" y1="18.7057" x2="42.2865" y2="18.4496"/><line class="single-game-btn-buy-icon" x1="42.2865" y1="20.3282" x2="40.8818" y2="20.4987"/><line class="single-game-btn-buy-icon" x1="26.4389" y1="25.2438" x2="34.3878" y2="25.0674"/><polyline class="single-game-btn-buy-icon" points="35.647 31.891 31.527 37.62 30.588 31.984 34.388 25.067 31.698 21.353 26.617 16.784 40.621 6.239"/><line class="single-game-btn-buy-icon" x1="26.2329" y1="35.0155" x2="31.5272" y2="37.6199"/><polygon class="single-game-btn-buy-icon" points="27.45 29.663 30.636 28.478 28.362 27.293 27.45 29.663"/><line class="single-game-btn-buy-icon" x1="29.0081" y1="10.8497" x2="23.9708" y2="10.8497"/><polyline class="single-game-btn-buy-icon" points="24.029 35.016 21.767 35.016 21.041 38.431 23.624 38.431"/><polyline class="single-game-btn-buy-icon" points="5.842 31.771 17.412 31.984 21.767 35.016 21.383 16.784 18.992 10.85 7.379 6.239 5.5 11.96 7.208 18.706 7.037 22.121 8.147 23.759 5.842 31.771 7.934 40.267 16.473 37.62 21.041 41.761 24.029 41.761"/><line class="single-game-btn-buy-icon" x1="8.1471" y1="23.7591" x2="16.302" y2="21.3529"/><line class="single-game-btn-buy-icon" x1="7.2078" y1="18.7057" x2="5.7135" y2="18.4496"/><line class="single-game-btn-buy-icon" x1="5.7135" y1="20.3282" x2="7.1182" y2="20.4987"/><line class="single-game-btn-buy-icon" x1="21.5611" y1="25.2438" x2="13.6122" y2="25.0674"/><polyline class="single-game-btn-buy-icon" points="12.353 31.891 16.473 37.62 17.412 31.984 13.612 25.067 16.302 21.353 21.383 16.784 7.379 6.239"/><line class="single-game-btn-buy-icon" x1="21.7671" y1="35.0155" x2="16.4728" y2="37.6199"/><polygon class="single-game-btn-buy-icon" points="20.55 29.663 17.364 28.478 19.638 27.293 20.55 29.663"/><line class="single-game-btn-buy-icon" x1="18.9919" y1="10.8497" x2="24.0292" y2="10.8497"/></svg>`;
                let creditCardIcon = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
                <svg width="50px" height="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><defs></defs><rect class="single-game-btn-buy-icon" x="4.5" y="9.5" width="39" height="29" rx="3"/><line class="single-game-btn-buy-icon" x1="4.5" y1="16.5" x2="43.5" y2="16.5"/><line class="single-game-btn-buy-icon" x1="33.5" y1="34.5" x2="33.5" y2="32.5"/><line class="single-game-btn-buy-icon" x1="36.5" y1="34.5" x2="36.5" y2="32.5"/><line class="single-game-btn-buy-icon" x1="39.5" y1="34.5" x2="39.5" y2="32.5"/></svg>`;

                SetButtonActive(buyButton, true);
                buyButton.click(() => {
                    if (!buyButton.active) return;
                    function ShowPopupModalLarge(html) {
                        return ShowPopupModal(`<div style="min-width: 20vw; max-width: 80vw; width: 800px; display: flex; flex-direction: column; align-items: center;  padding: 0 30px;">${html}</div>`);
                    }
                    function SelectMethodPage(){
                        let selectMethodHTML = 
                        `
                        <h4>${details.title}</h4>
                        <div class="flex-row" style="width: 100%; flex-wrap: wrap; gap: 20px;">
                            <div class="flex-column" style="width:28%;">
                                <img style="width: 100%; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover;" src="${API.GetAssetMainImageSrcURL()}"/>
                            </div>
                            <div class="flex-column" style="width:65%;">
                                
                                <div style="display: flex;flex-flow: column;background-color: #2f2f39;border-radius: 10px;padding: 20px;">
                                    <div>
                                        <div style="display: flex; justify-content: space-between;">
                                            <div>Total:</div>
                                            <div class="single-game-buy-price"> ${priceEth} USD</div>
                                        </div>
                                        <div>
                                            <p>Payment options:</p>
                                        </div>
                                    </div>

                                    ${GetButtonHTML("buy-with-sequence", creditCardIcon+"CREDIT CARD", false, null, "single-game-btn-buy")}
                                    ${GetButtonHTML("buy-with-injected", metamaskIcon+"WEB3 WALLET", false, null,  "single-game-btn-buy")}
                                    
                                    <p style="font-size: 12px;">By buying this asset, you accept our <u>Terms And Conditions.</u><br>Payment in <a href="https://polygonscan.com/address/${web3details.payment_contract_address}" target="_blank">Polygon USDC</a>. View License on <a href="https://polygonscan.com/address/${web3details.license_contract}" target="_blank">PolygonScan.</a></p>

                                    <div style="display: none;" id="mint-checks-container" class="flex-column">
                                        <p id="connect-acc-p">Connect Account ${loadingSVG}</p>
                                        <p id="connect-bal-p">Balance Available ${loadingSVG}</p>
                                        <p id="approve-con-p">Approve Contract ${loadingSVG}</p>
                                        <p id="mint-p">Mint NFT ${loadingSVG}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        `;

                        ShowPopupModalLarge(selectMethodHTML);
                        let buyInjectedButton = $("#buy-with-injected");
                        let buySequenceButton = $("#buy-with-sequence");

                        
                        buyInjectedButton.click(async () => {
                            if (!buyInjectedButton.active) return;

                            $("#popup-modal-close").css("color", "unset");
                            $("#popup-modal-close").off("click");

                            SetButtonActive(buyInjectedButton, false);
                            SetButtonActive(buySequenceButton, false);
                            $("#mint-checks-container").css("display", "unset");

                            const connWalletP = $("#connect-acc-p");
                            const balP = $("#connect-bal-p");
                            const approveP = $("#approve-con-p");
                            const mintP = $("#mint-p");

                            connWalletP.html(`Connect Account ${loadingSVG}`);
                            balP.html(`Balance Available ${loadingSVG}`);
                            approveP.html(`Approve Contract ${loadingSVG}`);
                            mintP.html(`Mint NFT ${loadingSVG}`);
                            
                            let userAddress = await web3Client.ConnectWallet();
                            if (userAddress == null) {
                                connWalletP.text("Connect Account ❌");
                                balP.text("Balance Available ❌")
                                approveP.text("Approve Contract ❌");
                                mintP.text("Mint NFT ❌");
                                await TimeoutPromise(2000);
                                return SelectMethodPage();
                            }
                            connWalletP.text("Connect Account ✅");

                            let cost = await web3ContractInterface.GetCost();

                            let paymentTokenBal = await web3ContractInterface.PaymentBalanceOf(userAddress);

                            if (BigInt(paymentTokenBal) < BigInt(cost)){
                                balP.text("Balance Available ❌");
                                approveP.text("Approve Buying ❌");
                                mintP.text("Buy Asset ❌");
                                await TimeoutPromise(3000);
                                ShowPopupModal("Not enough balance, <br>Please add funds to your wallet first, or use a different option.", SelectMethodPage);
                                return;
                            } else {
                                balP.text("Balance Available ✅");
                            }
                            
                            let isApproved = await web3ContractInterface.IsApprovedFor(cost);
                            if (!isApproved){
                                let approvedNow = await web3ContractInterface.Approve(cost);
                                if (!approvedNow){
                                    approveP.text("Approve Contract ❌");
                                    mintP.text("Mint NFT ❌");
                                    await TimeoutPromise(2000);
                                    return SelectMethodPage();
                                }
                            }
                            approveP.text("Approve Contract ✅");
                
                            let result = await web3ContractInterface.Buy(1);
                            if (!result){
                                mintP.text("Mint NFT ❌");
                                await TimeoutPromise(2000);
                                return SelectMethodPage();
                            }
                            await TimeoutPromise(1500);
                            mintP.text("Mint NFT ✅");

                            let wallets = await MyAccount.GetLinkedWallets();
                            let isWalletLinked = wallets.filter(x => x.address == userAddress).length == 1;

                            if (!isWalletLinked) {
                                ShowPopupModal("You can download this asset after linking the wallet to your account.", () => {
                                    MyAccount.OpenWallets();
                                });
                            } else {
                                ClosePopupModal();
                                SetBuyPlayButtons();
                            }

                            ShowNotification(`Succesfully bought:<br>${details.title}`);
                        });

                        buySequenceButton.click(async () => {
                            if (!buySequenceButton.active) return;

                            $("#popup-modal-close").css("color", "unset");
                            $("#popup-modal-close").off("click");

                            $("#mint-checks-container").css("display", "unset");

                            const connWalletP = $("#connect-acc-p");
                            const balP = $("#connect-bal-p");
                            const approveP = $("#approve-con-p");
                            const mintP = $("#mint-p");

                            connWalletP.html(`Connect to Sequence ${loadingSVG}`);
                            balP.html(`Balance Available ${loadingSVG}`);
                            balP.css("display", "unset");
                            approveP.html(`Approve Buying ${loadingSVG}`);
                            mintP.html(`Buy Asset ${loadingSVG}`);

                            SetButtonActive(buyInjectedButton, false);
                            SetButtonActive(buySequenceButton, false);

                            if (seqClient?.connectDetails?.connected == undefined){
                                let conPromise = await seqClient.ConnectAndAuthWallet();
                                if (seqClient?.connectDetails?.connected != true){
                                    connWalletP.text("Connect to Sequence ❌");
                                    balP.text("Balance Available ❌");
                                    approveP.text("Approve Buying ❌");
                                    mintP.text("Buy Asset ❌");
                                    await TimeoutPromise(2000);
                                    return SelectMethodPage();
                                }
                            }
                            let seqAddress = await seqClient.Wallet.getAddress();
                            connWalletP.text("Connect to Sequence ✅");
                            let seqContractInterface = seqClient.GetAppContractInterface(web3details.license_contract, web3details.license_contract_abi, web3details.payment_contract_address, web3details.payment_contract_abi);
                            
                            let cost = await seqContractInterface.GetCost();

                            let paymentTokenBal = await seqContractInterface.PaymentBalanceOf(seqAddress);

                            if (paymentTokenBal < cost){
                                balP.text("Balance Available ❌");
                                approveP.text("Approve Buying ❌");
                                mintP.text("Buy Asset ❌");
                                await TimeoutPromise(3000);
                                ShowPopupModal("Not enough balance, <br>Please add funds to your wallet first.", SelectMethodPage);
                                seqClient.AskForFunds();
                                return;
                            } else {
                                balP.text("Balance Available ✅");
                            }

                            let isApproved = await seqContractInterface.IsApprovedFor(seqAddress, cost);
                            if (!isApproved){
                                let approvedNow = await seqContractInterface.Approve(cost);
                                if (!approvedNow){
                                    approveP.text("Approve Buying ❌");
                                    mintP.text("Buy Asset ❌");
                                    await TimeoutPromise(2000);
                                    return SelectMethodPage();
                                }
                            }
                            approveP.text("Approve Contract ✅");
                
                            let result = true;
                            result = await seqContractInterface.Buy(seqAddress, 1).catch(err => result = false);
                            if (!result){
                                mintP.text("Buy Asset ❌");
                                await TimeoutPromise(2000);
                                return SelectMethodPage();
                            }
                            await TimeoutPromise(1500);
                            mintP.text("Buy Asset ✅");

                            let wallets = await MyAccount.GetLinkedWallets();
                            let isWalletLinked = wallets.filter(x => x.address == seqAddress).length == 1;

                            if (!isWalletLinked) {
                                ShowPopupModal("You can download this asset after linking Sequence to your account.", () => {
                                    MyAccount.OpenWallets();
                                    SetBuyPlayButtons();
                                });
                            } else {
                                ClosePopupModal();
                                SetBuyPlayButtons();
                            }

                            ShowNotification(`Succesfully bought:<br>${details.title}`);
                        });

                        if (web3Client.IsWeb3BrowserCompatible){
                            SetButtonActive(buyInjectedButton, true);
                        }
                        SetButtonActive(buySequenceButton, true);
                    }

                    SelectMethodPage();
                })
            } catch (err){
                console.log(err);
                ShowNotification("An error occured while getting asset's info.<br>Some data or functionalities might be missing from this page.", "error-web3-retrieval", null, 10000);
            }
        }
    }

    MyAccount.OnAccountSet.AddCallback(SetBuyPlayButtons);

    /*APPEND CATEGORIES TO AssetInfoPanel*/
    const SetCategories = async () =>{
        const categoriesDiv  = $("#single-game-categories");
        const genres = JSON.parse(details.genres) ;
        let allCategories = await getAssetCategoriesPromise;
        genres.forEach(genre => {
            let genreName = "";
            allCategories.forEach(category => {if (category.id == genre) genreName = category.title})
            $(GetCategories(genreName, genre)).appendTo(categoriesDiv);
        });

    }

    /*APPEND KEYWORDS TO AssetInfoPanel*/
    const SetKeywords = () =>{
        const keywordsDiv  = $("#single-game-keywords");
        const keywords = JSON.parse(details.keywords);
        
        keywords.forEach(keyword => {
            $(GetKeywords(keyword)).appendTo(keywordsDiv);
        });

    }

    const SetComments = () => {
        const commentSection = $("#comment-section-div");
        const GetCommentHTML = (user_id, username, comment_id, content, created_at) => {
            let commentJquery = $( `<div>
            <div id="comment-id-${comment_id}" class="comment-container other-game-comment">
                <img class="comment-profile-pic" src="https://dapp.isotopic.io/api/v1/user/profile/pic/get?user_id=${user_id}"/>
                <div class="flex-column" style="width: 100%;">
                    <h6 id="comment-username-${comment_id}" class="comment-title"></h6>
                    <p style="white-space: pre-line;" id="comment-content-${comment_id}"></p>
                    <div style="display: flex; flex-direction: row-reverse;">
                        <h6 style="margin: 0 24px;" comment_id="${comment_id}" class="reply-comment-button">Reply</h6>
                    </div>
                </div>
            </div>
            </div>`);
            commentJquery.find(`#comment-username-${comment_id}`).html(`${username} <gray>- ${created_at}</gray>`);
            commentJquery.find(`#comment-content-${comment_id}`).text(content);
            return commentJquery.html();
        }
        const AppendReply = (user_id, username, comment_id, parent_id, content, created_at) => {
            let commentJquery = $( `<div>
            <div class="indented-comment-container">
                <div class="indented-comment-line"></div>
                <div class="comment-container other-game-comment">
                    <img class="comment-profile-pic" src="https://dapp.isotopic.io/api/v1/user/profile/pic/get?user_id=${user_id}"/>
                    <div class="flex-column">
                        <h6 id="comment-username-${comment_id}" class="comment-title"></h6>
                        <p style="white-space: pre-line;" id="comment-content-${comment_id}"></p>
                    </div>
                </div>
            </div>
            </div>`);
            commentJquery.find(`#comment-username-${comment_id}`).html(`${username} <gray>- ${created_at}</gray>`);
            commentJquery.find(`#comment-content-${comment_id}`).text(content);
            let html =  commentJquery.html();

            $(html).insertAfter($(`#comment-id-${parent_id}`));
        }

        API.GetComments().then(result => {
            if (result == "fail"){
                return commentSection.append("<p>An issue occured while loading comments.</p>");
            }
            result.comments.forEach(comment => {
                if (comment.parent_id != null) return;
                commentSection.append(GetCommentHTML(comment.user_id, comment.username, comment.comment_id, comment.content, comment.created_at));
            });
            result.comments.forEach(comment => {
                if (comment.parent_id == null) return;
                if (result.comments.find(com => com.comment_id == comment.parent_id) == null) return;
                AppendReply(comment.user_id, comment.username, comment.comment_id, comment.parent_id, comment.content, comment.created_at);
            });


            $(".reply-comment-button").click(function(){
                $(".replying-comment-container").remove();
                let id = $(this).attr("comment_id");
                let username = result.comments.find(com => com.comment_id == id)?.username;
                let commentJquery = $( `<div>
                <div class="indented-comment-container replying-comment-container">
                    <div class="indented-comment-line"></div>
                    <div class="comment-container other-game-comment" style="padding-bottom: 10px;">
                        <img class="comment-profile-pic" src="https://dapp.isotopic.io/api/v1/user/profile/pic/get?user_id=${MyAccount.user_id}"/>
                        <div class="flex-column" style="width:100%;">
                            <h6 id="comment-username-reply-${id}" class="comment-title"></h6>
                            <textarea rows="3" id="new-reply-content" placeholder="Type your reply..." style="margin-top:10px;"></textarea>
                            <div class="flex-column span-width" style="padding: 15px 0px 0px 0px">
                                <div id="post-reply-button" role="button" class="elementor-button-link elementor-button comment-game-btn">
                                    <span class="elementor-button-content-wrapper" style="position: relative; bottom: 5px;">
                                        <span class="elementor-button-text">POST</span>
                                    </span> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>`);
                commentJquery.find(`#comment-username-reply-${id}`).html(`Replying to ${username}:`);
                let html =  commentJquery.html();

                let nextNonReply = $(`#comment-id-${id}`).next(":not(.indented-comment-container)");
                if (nextNonReply.length == 0){
                    commentSection.append($(html));
                } else {
                    $(html).insertBefore(nextNonReply);
                }

                const AppendAfterSend = (content, parent_id, comment_id, created_at) => {
                    $(".replying-comment-container").remove();
                    AppendReply(MyAccount.user_id, MyAccount.username, comment_id, parent_id, content, created_at);
                }

                $("#post-reply-button").click(()=>{
                    let content = $("#new-reply-content").val();
                    $("#new-reply-content").attr("disabled", true);
                    API.AddNewComment(content, id).then((res)=>{
                        if (res.result == "fail"){
                            $(".replying-comment-container").remove();
                            ShowNotification(`Reply Failed: ${res.error}`, "reply-sent", null, 4000, false);
                            return;
                        }
                        AppendAfterSend(content, id, res.comment_id, "Just now");
                    }).catch(err => {
                        ShowNotification("Reply failed, try again later!", "reply-sent", null, 3000, false);
                        $(".replying-comment-container").remove();
                    })
                });
                
            })
        });

        const SetProfilePicOnNewComment = () => {
            $("#new-comment-profile-img").attr("src", `https://dapp.isotopic.io/api/v1/user/profile/pic/get?user_id=${MyAccount.user_id}`)
        }
        MyAccount.OnAccountSet.AddCallback(SetProfilePicOnNewComment);
        

        $('#post-comment-button').click(()=> {
            if (MyAccount.session_id == null){
                return ShowPopupModal("You must be logged in to comment!", OpenAndWaitForLogin);
            }
            API.AddNewComment($("#new-comment-content").val()).then(newCommentRes => {
                if (newCommentRes.result == "fail"){
                    return ShowPopupModal(newCommentRes.error);
                }
                $('.other-game-comment').remove();
                SetComments();
            });
            $("#new-comment-content").val("");
        })

    }

    const SetLinks = () => {
        if (typeof details?.asset_links != "string") return;
        let links = {};
        try {
            links = JSON.parse(details.asset_links);
        } catch {
            return;
        }

        let linksSvg = `<?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
            <svg class="single-game-extras-svg" fill="white" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                width="20px" height="100%px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
            <g>
                <g>
                    <path d="M18.321,69.07c-2.874,0-5.775-0.845-8.31-2.604l-0.534-0.371c-6.614-4.593-8.259-13.712-3.666-20.326l13.931-18.588
                        c2.183-3.146,5.522-5.292,9.361-5.984c3.839-0.694,7.717,0.152,10.921,2.377l0.534,0.37c2.72,1.888,4.735,4.676,5.675,7.85
                        c0.313,1.059-0.291,2.172-1.351,2.485c-1.058,0.311-2.171-0.29-2.485-1.351c-0.691-2.337-2.116-4.308-4.119-5.698l-0.534-0.37
                        c-2.328-1.617-5.146-2.231-7.931-1.727c-2.787,0.503-5.212,2.061-6.828,4.388L9.055,48.108
                        c-3.293,4.744-2.099,11.365,2.704,14.701l0.534,0.371c4.801,3.334,11.423,2.142,14.759-2.66l4.256-6.126
                        c0.631-0.905,1.875-1.129,2.784-0.501c0.906,0.631,1.131,1.877,0.501,2.784l-4.256,6.125C27.504,66.882,22.948,69.07,18.321,69.07
                        z"/>
                </g>
                <g>
                    <path d="M40.297,51.043c-2.877,0-5.784-0.844-8.323-2.606l-0.538-0.375c-2.718-1.888-4.731-4.674-5.669-7.845
                        c-0.313-1.06,0.292-2.172,1.351-2.485c1.063-0.313,2.173,0.291,2.485,1.351c0.69,2.335,2.114,4.305,4.117,5.696l0.538,0.375
                        c4.799,3.332,11.421,2.138,14.757-2.664l13.93-18.59c3.294-4.744,2.1-11.365-2.703-14.701l-0.53-0.365
                        c-2.332-1.621-5.147-2.232-7.936-1.731c-2.787,0.503-5.212,2.061-6.828,4.388l-4.255,6.125c-0.63,0.908-1.876,1.132-2.783,0.502
                        s-1.132-1.876-0.502-2.783l4.255-6.125c2.225-3.205,5.564-5.351,9.404-6.043c3.838-0.691,7.718,0.153,10.922,2.379l0.529,0.365
                        c6.62,4.598,8.264,13.717,3.67,20.33l-13.93,18.59C49.453,48.868,44.914,51.043,40.297,51.043z"/>
                </g>
                <g>
                    <path d="M52.76,33.106c-0.209,0-0.419-0.065-0.599-0.2c-0.442-0.331-0.532-0.958-0.2-1.399l0.548-0.73
                        c0.331-0.442,0.959-0.53,1.399-0.2c0.442,0.331,0.532,0.958,0.2,1.399l-0.548,0.73C53.364,32.969,53.064,33.106,52.76,33.106z"/>
                </g>
                <g>
                    <path d="M55.047,30.056c-0.209,0-0.419-0.065-0.599-0.2c-0.442-0.331-0.532-0.958-0.2-1.399l4.426-5.904
                        c1.061-1.528,1.471-3.414,1.134-5.28c-0.337-1.867-1.38-3.491-2.938-4.572l-0.343-0.237c-0.454-0.315-0.567-0.938-0.253-1.392
                        c0.313-0.454,0.936-0.568,1.392-0.253l0.344,0.238c1.997,1.387,3.334,3.468,3.766,5.86s-0.094,4.81-1.48,6.806l-4.447,5.934
                        C55.651,29.918,55.352,30.056,55.047,30.056z"/>
                </g>
            </g>
            </svg>`;
        
        let demoSvg = `<?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
            <svg class="single-game-extras-svg" fill="white" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                width="20px" height="100%" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
                <g>
                    <g>
                        <path d="M15.283,68.898c-4.089,0-6.868-3.285-6.868-8.174V11.275c0-4.889,2.779-8.174,6.87-8.174c1.563,0,3.213,0.485,4.87,1.441
                            l38.924,24.77c2.877,1.659,4.506,4.052,4.506,6.692c0,2.638-1.62,5.027-4.566,6.729l-38.793,24.68
                            C18.495,68.414,16.847,68.898,15.283,68.898z M15.285,7.102c-2.563,0-2.87,2.919-2.87,4.174v49.449
                            c0,1.255,0.308,4.174,2.868,4.174c0.84,0,1.843-0.313,2.87-0.905l38.787-24.68c1.706-0.987,2.646-2.177,2.646-3.309
                            c0-1.135-0.937-2.327-2.574-3.272L18.08,7.963C17.127,7.415,16.126,7.102,15.285,7.102z"/>
                    </g>
                    <g>
                        <g>
                            <path d="M35.163,48.955c-0.333,0-0.657-0.165-0.848-0.468c-0.294-0.467-0.153-1.084,0.313-1.379l0.54-0.34
                                c0.468-0.293,1.085-0.154,1.379,0.314c0.295,0.467,0.154,1.084-0.313,1.379l-0.54,0.34
                                C35.529,48.905,35.345,48.955,35.163,48.955z"/>
                        </g>
                        <g>
                            <path d="M20.514,58.169c-0.333,0-0.657-0.165-0.848-0.468c-0.294-0.467-0.153-1.085,0.314-1.379l11.223-7.06
                                c0.467-0.292,1.084-0.154,1.379,0.314c0.294,0.467,0.153,1.085-0.314,1.379l-11.223,7.06
                                C20.88,58.119,20.695,58.169,20.514,58.169z"/>
                        </g>
                    </g>
                </g>
            </svg>`;

        let htmlInside = ``;
        if (typeof links["demo"] == "string"){
            htmlInside+=`
            <img src="${API.GetAssetMainImageSrcURL()}" class="">
            <div class="single-game-extras-txt-with-img">
                <h6><a href="${links["demo"]}">PLAY DEMO! ${demoSvg}</a></h6>
            </div>
            `;
        }
        if (typeof links["full_version"] == "string"){
            htmlInside+=`
            <img src="${API.GetAssetMainImageSrcURL()}" class="">
            <div class="single-game-extras-txt-with-img">
                <h6><a href="${links["full_version"]}">FULL VERSION ON ISOTOPIC! ${isotopicSvg}</a></h6>
            </div>
            `;
        }
        if (links["socials"] != null){
            htmlInside+=`
            <div class="single-game-extras-txt">
                <h6 id="view-links-button"><a class="clickable">SOCIALS - LINKS ${linksSvg}</a></h6>
            </div>
            `;
        }

        if (htmlInside == "") return;

        let htmlFinal = `
        <div class="single-game-extras-holder">
            ${htmlInside}
        </div>
        `;

        $(htmlFinal).insertBefore("div.single-game-details.flex-column.span-width");

        if (links["socials"] != null){
            let linksHTMLs = [];
            let linksSeperator = "<p>|</p>";

            links["socials"].forEach(link => {
                linksHTMLs.push(`<p><a href="${link.url}" target="_blank">${link.title}</a></p>`)
            })

            $("#view-links-button").click(() => {
                ShowPopupModal(
                    `
                    <div style="min-width: 10vw; max-width: 20vw; width: 800px; display: flex; flex-direction: column; align-items: center;  padding: 0 30px;">
                        <h5 style="margin-top: 0;">Socials/Links:</h5>
                        <div style="width:100%;display: flex; flex-direction: row; gap: 10px; justify-content: center;">
                            ${linksHTMLs.join(linksSeperator)}
                        </div>
                    </div>
                    `
                );
            });

        }
    }
     //wp override
     const cssRuleHeaderUnderline = '.edgtf-main-menu > ul > li > a::after { background-color: var(--assetstore-main) !important; }';
          
     // Append the CSS rule to the head of the document
     $('<style>')
         .prop('type', 'text/css')
         .html(cssRuleHeaderUnderline)
         .appendTo('head');
     
     const newLogoSrc = "https://dapp.isotopic.io/media/LOGO_ISOTOPIC_YELLOW.png";

     // Select the logo element by its class and update the src attribute
     $('.edgtf-normal-logo').attr('src', newLogoSrc);
     $('.edgtf-dark-logo').attr('src', newLogoSrc);

     $(".edgtf-side-menu-button-opener:hover").css({'color':'var(--assetstore-main) !important;'});
     const newHref = "https://dapp.isotopic.io/media/LOGO_ISOTOPIC_YELLOW.png";
     // Select the image element within the SVG and update the xlink:href attribute
     $('.edgtf-mobile-opener-svg image').attr('xlink:href', newHref);

    SetAssetInfoPanel();
    SetBuyPlayButtons();
    SetCategories();
    SetKeywords();
    SetComments();
    SetLinks();
})