Skin Database

Status
Ranks
Map Releases
Discord / Forum
Wiki
Downloads / Steam
Tournaments
Skin Database
Statistics
Switch Theme

edit mode

"; InnerHTML += "

" + CurSkin.name + "

"; InnerHTML += "" + CurSkin.type + ""; InnerHTML += "

"; if (CurSkin.creator != "") InnerHTML += "" + CurSkin.creator + ""; InnerHTML += "

"; if (CurSkin.skinpack != "") InnerHTML += "" + CurSkin.skinpack + ""; InnerHTML += "

" + CurSkin.date; InnerHTML += "

"; if (CurSkin.license != "") InnerHTML += "" + CurSkin.license + ""; InnerHTML += "

"; InnerHTML += "" + (CurSkin.hd.uhd ? "yes" : "no") + ""; if(gIsEditMode) InnerHTML += "

changedelete"; else { InnerHTML += "

"; InnerHTML += "Download"; if(CurSkin.hd.uhd) InnerHTML += "UHD"; } InnerHTML += "

"; return InnerHTML; } function DrawSkinListHeaderRow() { let InnerHTML = ''; InnerHTML += "

"; InnerHTML += "

"; return InnerHTML; } var lastVList = null; var FilteredSkinList = null; function genRenderID() { return (new Date()).getTime().toString() + "___" + Math.random().toString(16).slice(2) + "___"; } function CheckSkinDownloaded() { let CurDownloaded = 0; SkinMap.forEach((value) => { if(value.Loaded == 0) { CurDownloaded++; } }); SkinMap.forEach((value) => { if(value.Loaded == -1 && CurDownloaded < 16) { value.Loaded = 0; value.AjaxObj.open("GET", value.ImgSrc); value.AjaxObj.send(); CurDownloaded++; } }); } function DrawSkinList() { var Filter = ""; var SkinListObj = document.getElementById("skinlist"); var InnerHTML = ''; FilteredSkinList = GetSkinsFiltered(true); var FilteredCountDownload = 0; var FilteredHDCountDownload = 0; for (var i = 0; i < FilteredSkinList.length; ++i) { var CurSkin = FilteredSkinList[i]; if(CurSkin.type != "template") { ++FilteredCountDownload; if(CurSkin.hd.uhd) ++FilteredHDCountDownload; } const SkinPath = CurSkin.type == "normal" ? "skin/" : (CurSkin.type == "community" ? "skin/community/" : "skin/template/"); if(!SkinMap.has(CurSkin.name)) { let Img = new Image(); let SkinDataBase64 = ""; let SkinAjax = null; let LoadState = -1; SkinAjax = new XMLHttpRequest(); SkinAjax.responseType = "arraybuffer"; SkinAjax.onreadystatechange = function (SkinName) { if (this.readyState == 4) { if(this.status == 200) { let CurItem = SkinMap.get(SkinName); CurItem.Loaded = 1; const Base64ImgData = btoa(String.fromCharCode(...new Uint8Array(this.response))); CurItem.ImgData = Base64ImgData; SkinMap.set(SkinName, CurItem); CurItem.ImgObj.src = "data:image/png;base64," + Base64ImgData; } else { console.log("failed to download skin: " + SkinName, this.status); CurItem.Loaded = -2; } CheckSkinDownloaded(); } }.bind(SkinAjax, CurSkin.name); SkinMap.set(CurSkin.name, {Loaded: LoadState, AjaxObj: SkinAjax, ImgData: SkinDataBase64, ImgObj: Img, SkinName: CurSkin.name, ImgSrc: SkinPath + CurSkin.name + "." + CurSkin.imgtype, skinrenderid: "unused"}); Img.onload = function (SkinName) { let CurItem = SkinMap.get(SkinName); CurItem.Loaded = 2; SkinMap.set(SkinName, CurItem); // render let RenderEl = document.getElementById("skinrender_" + CurItem.skinrenderid + SkinName); if(RenderEl != undefined) OnTeeSkinRender(RenderEl, this); }.bind(Img, CurSkin.name); } } SkinListObj.innerHTML = InnerHTML; CheckSkinDownloaded(); SetDownloadLink(FilteredCountDownload, FilteredHDCountDownload); const TableHeight = document.body.clientHeight - SkinListObj.offsetTop - parseInt(SkinListObj.style.marginTop) - 40; if(lastVList != null) { if(lastVList.rmNodeInterval != -1) clearTimeout(lastVList.rmNodeInterval); if(lastVList.lastScrolledTimeout != -1) clearTimeout(lastVList.lastScrolledTimeout); } lastVList = new VirtualList({ w: 300, h: TableHeight, itemHeight: 64, table: SkinListObj, totalRows: FilteredSkinList.length + 1, generatorFn: function(SkinList, row) { var el = document.createElement("div"); const RowIndex = row - 1; if(RowIndex == -1) { el.innerHTML = DrawSkinListHeaderRow(); el.style.zIndex = 100; el.style.backgroundColor = "var(--bg-block)"; } else if(RowIndex < SkinList.length) { var CurSkin = SkinList[RowIndex]; const skinrenderid = genRenderID(); el.innerHTML = DrawSkinListRow(skinrenderid, CurSkin, RowIndex); el.setAttribute("id", "skinneedrender" + skinrenderid + RowIndex.toString()); SkinNeedRender.push(RowIndex); const MapObj = SkinMap.get(CurSkin.name); if(MapObj != null) { MapObj.skinrenderid = skinrenderid; SkinMap.set(CurSkin.name, MapObj); } } return el; }.bind(null, FilteredSkinList), }); let observer = new MutationObserver((mutations) => { const SkinRenderCopy = [...SkinNeedRender]; for(const RowIndex of SkinRenderCopy) { if(RowIndex < FilteredSkinList.length) { const CurSkin = FilteredSkinList[RowIndex]; const MapObj = SkinMap.get(CurSkin.name); let RenderEl = undefined; let el = undefined; if(MapObj != undefined) { el = document.getElementById("skinneedrender" + MapObj.skinrenderid + RowIndex.toString()); RenderEl = document.getElementById("skinrender_" + MapObj.skinrenderid + CurSkin.name); } if(el != undefined && RenderEl != undefined && MapObj.ImgObj != undefined && MapObj.Loaded == 2) { SkinNeedRender.splice(SkinNeedRender.indexOf(RowIndex), 1); OnTeeSkinRender(RenderEl, MapObj.ImgObj); } } } }); SkinListObj.appendChild(lastVList.container); observer.observe(lastVList.container, { characterDataOldValue: true, subtree: true, childList: true, characterData: true }); lastVList._renderChunk(lastVList.container, 0); } var SkinList = {}; documentIsReady(() => { const resizeObserver = new ResizeObserver(() => { if(Object.keys(SkinList).length > 0) DrawSkinList(); }); resizeObserver.observe(document.body); // get skin list let GetSkinJSON = new XMLHttpRequest(); GetSkinJSON.onreadystatechange = function () { if (GetSkinJSON.readyState == 4 && GetSkinJSON.status == 200) { SkinList = JSON.parse(GetSkinJSON.responseText); if(JS_GET['sort'] == undefined) JS_GET['sort'] = "name"; if(JS_GET['dir'] == undefined) JS_GET['dir'] = "down"; if(JS_GET['search'] == undefined) JS_GET['search'] = ""; var SearchInp = document.getElementById("skinsearch"); SearchInp.value = JS_GET['search']; DrawSkinList(); } }; GetSkinJSON.open("GET", "skin/skins.json"); GetSkinJSON.send(); });

Skin Database - DDraceNetwork (2025)

Skin Database

References