login-reward
unknown
java
2 months ago
11 kB
3
Indexable
$(document).ready(function () {
$(document).on('click', "#shop", function (event) {
window.location.assign("/shop#daily");
});
var appendContainer = $('#appendCointaner');
var milestoneContainer = $('#milestoneContainer');
var loginDaysContainer = $('#loginDaysContainer');
var progressBarHtml = "";
var loginDaysHtml = "";
function openRewardModal(message) {
var modal = document.getElementById("rewardModal");
var div = document.getElementsByClassName("modal-close")[0];
var rewardMessage = document.getElementById("rewardText");
rewardMessage.innerText = message;
modal.style.display = "block";
div.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function progressBarProgress(dayCount) {
if (dayCount < 90) {
progressBarHtml = `<div class="progress-bar">
<div id="progress" style="width: 1%"></div>
</div>
`
} else if (dayCount == 90) {
progressBarHtml = `<div class="progress-bar">
<div id="progress" style="width: 5%"></div>
</div>
`
} else {
var progressPercentage = dayCount / 365 * 100;
progressBarHtml = `<div class="progress-bar">
<div id="progress" style="width: ${progressPercentage}%"></div>
</div>
`
}
loginDaysHtml = `<span>You have logged in for </span>`+dayCount+`<span> days.</span>`;
}
function generateRows(list) {
var htmlTag = "";
var chestHtmlTag = progressBarHtml
for (var i in list) {
var item = list[i];
// Add chests based on dayCount and collected status
if (item.dayCount == 90 || item.dayCount == 180 || item.dayCount == 365) {
htmlTag += "<div class='column relative' style='display: none;'><span>Day " + item.dayCount + "</span><img class='login-image' src='" + item.image + "'/><span class='description-color'>" + item.prize + "</span><i class='checkmark'></i> </div>";
var amount = 0;
var rayUrl = "";
if (item.dayCount == 90) {
amount = 1;
rayUrl="/images/public/login-reward/90chestRay.svg";
}
if (item.dayCount == 180) {
rayUrl="/images/public/login-reward/180chestRay.svg";
amount = 2;
}
if (item.dayCount == 365) {
rayUrl="/images/public/login-reward/365chestRay.svg";
amount = 3;
}
if (item.collected) {
chestHtmlTag +=
"<div class='milestone day" + item.dayCount + "chest' id='raysHolder'>>" +
"<img id='raysChest' src='/images/public/login-reward/chest_open.png' alt='Day " + item.dayCount + " Chest'/>" +
"<div id='rays' style='background: url("+rayUrl+") 0 0 no-repeat; background-size: cover;' class='z-n1'></div>" +
"<span id='chestLabel' class='z-3'>Day " + item.dayCount + "</span>" +
"<span class='position-absolute chestAmount'>x " + amount + "</span>" +
"</div>";
} else if (item.collectable) {
chestHtmlTag +=
"<div class='milestone day" + item.dayCount + "chest' id='raysHolder'>>" +
"<img id='raysChest' data-id='" + item.dayCount + "' class='chest_collectable' src='/images/public/login-reward/chest_unlocked.png' alt='Day " + item.dayCount + " Chest'/>" +
"<div id='rays' style='background: url("+rayUrl+") 0 0 no-repeat; background-size: cover;' class='z-n1'></div>" +
"<span id='chestLabel' class='z-3'>Day " + item.dayCount + "</span>" +
"<span class='chestAmount'>x " + amount + "</span>" +
"</div>";
} else {
chestHtmlTag +=
"<div class='milestone day" + item.dayCount + "chest' id='raysHolder'>" +
"<img id='raysChest' data-id='" + item.dayCount + "' class='chest_collectable' src='/images/public/login-reward/chest_locked.png' alt='Day " + item.dayCount + " Chest'/>" +
"<div id='rays' style='background: url("+rayUrl+") 0 0 no-repeat; background-size: cover;' class='z-n1'></div>" +
"<span id='chestLabel' class='z-3'>Day " + item.dayCount + "</span>" +
"<span class='chestAmount'>x " + amount + "</span>" +
"</div>";
}
} else if (item.collected) {
htmlTag += "<div class='column relative'><span>Day " + item.dayCount + "</span><img class='login-image' src='" + item.image + "'/><span class='description-color'>" + item.prize + "</span><i class='checkmark'></i> </div>";
} else {
if (item.collectable) {
if (item.dayCount == 30 || item.dayCount == 60) {
htmlTag += "<div class='relative'><div class='column'><span>Day " + item.dayCount + "</span><img class='login-image' src='" + item.image + "'/><span class='description-color'>" + item.prize + "</span></div><div class='overlay-div'><button id='shop' href='/shop#daily' class='collect-button text-white text-decoration-none'>Go to shop</button></div></div>";
} else {
htmlTag += "<div class='relative'><div class='column'><span>Day " + item.dayCount + "</span><img class='login-image' src='" + item.image + "'/><span class='description-color'>" + item.prize + "</span></div><div class='overlay-div'><button data-id='" + item.dayCount + "' class='collect-button'>Collect</button></div></div>";
}
} else {
htmlTag += "<div class='relative'><div class='column'><span>Day " + item.dayCount + "</span><img class='login-image' src='" + item.image + "'/><span class='description-color'>" + item.prize + "</span></div><div class='overlay-div'></div></div>";
}
}
}
//display chests if user has not reached day 90
if (list[list.length - 1].dayCount < 90) {
chestHtmlTag += "<div class=\"milestone\">\n" +
" <img src=\"/images/login-reward/chest_locked.png\" alt=\"Day 90 Chest\">\n" +
" <span>Day 90</span>\n" +
" </div>\n" +
" <div class=\"milestone\">\n" +
" <img src=\"/images/login-reward/chest_locked.png\" alt=\"Day 180 Chest\">\n" +
" <span>Day 180</span>\n" +
" </div>\n" +
" <div class=\"milestone\">\n" +
" <img src=\"/images/login-reward/chest_locked.png\" alt=\"Day 365 Chest\">\n" +
" <span>Day 365</span>\n" +
" </div>";
}
milestoneContainer.html(chestHtmlTag);
appendContainer.html(htmlTag);
loginDaysContainer.html(loginDaysHtml);
}
$.ajax({
method: 'GET',
url: '/login-reward-rest-controller/login-days',
processData: false,
contentType: false,
destroy: true,
success: function (data) {
progressBarProgress(data.obj);
}
});
$.ajax({
method: 'GET',
url: '/login-reward-rest-controller',
processData: false,
contentType: false,
destroy: true,
success: function (data) {
generateRows(data.obj);
}
});
$(document).on('click', ".collect-button", function (event) {
let id = $(this).data("id");
$.ajax({
method: 'POST',
url: '/login-reward-rest-controller/collect/' + id,
processData: false,
contentType: false,
destroy: true,
success: function (data) {
generateRows(data.obj);
}
});
});
$(document).on('click', ".chest_collectable", function (event) {
let id = $(this).data("id");
$.ajax({
method: 'POST',
url: '/api/chest/open/' + id,
processData: false,
contentType: false,
destroy: true,
success: function (reward) {
generateRows(reward[1]);
openRewardModal("You have received: " + reward[0].description);
$.ajax({
method: 'POST',
url: '/login-reward-rest-controller/collect/' + reward[1],
processData: false,
contentType: false,
destroy: true,
success: function (data) {
generateRows(data.obj);
}
});
$.ajax({
method: 'POST',
url: '/login-reward-rest-controller/collect/' + id,
processData: false,
contentType: false,
destroy: true,
success: function (data) {
generateRows(data.obj);
}
});
}
});
});
$(".tooltipImg").hover(function () {
var imgPost = $(".tooltipImg").position();
$(".tooltipText").css("top", imgPost.top).css("left", imgPost.left + 30).show();
}, function () {
$(".tooltipText").hide();
});
}
)
;
Editor is loading...
Leave a Comment