84 lines
4.3 KiB
JavaScript
84 lines
4.3 KiB
JavaScript
let currentJob = 0;
|
|
|
|
window.addEventListener('message', function(event) {
|
|
if (event.data.type == "open") {
|
|
$('html, body').css('display', 'flex');
|
|
config = event.data.config;
|
|
Object.entries(config.Jobs).forEach(([jobKey, job]) => {
|
|
var dynamicContent = `
|
|
<div class="mx-auto max-w-md overflow-hidden rounded-lg h-[51rem] bg-slate-900 mb-10" style="display: none" id="job-${jobKey}">
|
|
<img src="./img/${job.image}" class="aspect-video w-full object-cover opacity-50" alt="" />
|
|
<div class="p-4">
|
|
<a class="text-xl font-medium text-gray-300">${job.name}</a>
|
|
<p class="text-xs font-medium text-gray-500">${job.description}</p>
|
|
<div class="mx-auto max-w-lg">
|
|
<ul class="list-disc text-sm text-gray-600 opacity-85 h-40 overflow-hidden list-none bg-slate-800 px-2 py-1.5 mt-5 rounded-md">
|
|
<h1 class="font-semibold text-gray-300 mb-1 text-base">Job Beskrivelse</h1>
|
|
<li class="font-medium">${job.instructions}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mx-auto max-w-lg">
|
|
<ul class="list-disc text-sm text-green-900 bg-opacity-85 h-[140px] overflow-hidden list-none bg-emerald-200 px-2 py-1.5 mt-5 rounded-md">
|
|
<h1 class="font-medium text-green-800 mb-1 text-base">Betalte Handlinger</h1>
|
|
${job.paidActions.map((action) => `<li class="font-medium">${action}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
<p class="overflow-hidden mt-5 text-gray-500 font-semibold text-sm">Hvis dette job lyder som noget for dig, kan du klikke på knappen og begynde at arbejde som ${job.name}.</p>
|
|
<button type="button" class="mt-2 rounded-md border-gray-700 bg-slate-800 px-4 py-2 text-center text-sm font-medium text-white transition-all hover:bg-slate-700 focus:ring focus:ring-gray-200 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-300 start-working-button" onclick="startJob(${jobKey})">Start arbejde</button>
|
|
<div class="mt-4 flex gap-2">
|
|
${job.tags.map((tag, index) => `<span class="inline-flex items-center gap-1 rounded-md ${config.tagColors[index]} px-2 py-1 text-xs font-bold text-stone-800">${tag}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
$("#dynamicContentContainer").append(dynamicContent);
|
|
});
|
|
showJob(currentJob);
|
|
}
|
|
});
|
|
|
|
$("#up").on("click", function (event) {
|
|
const nextJob = (currentJob + 1) % config.Jobs.length;
|
|
showJob(nextJob);
|
|
});
|
|
|
|
$("#down").on("click", function (event) {
|
|
const prevJob = (currentJob - 1 + config.Jobs.length) % config.Jobs.length;
|
|
showJob(prevJob);
|
|
});
|
|
|
|
const showJob = (jobIndex) => {
|
|
$(`#job-${currentJob}`).css("display", "none");
|
|
currentJob = jobIndex;
|
|
$(`#job-${currentJob}`).css("display", "block");
|
|
|
|
$("#down").html(`
|
|
<svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"/>
|
|
</svg>
|
|
${config.Jobs[(currentJob - 1 + config.Jobs.length) % config.Jobs.length].name}
|
|
`);
|
|
$("#up").html(`
|
|
${config.Jobs[(currentJob + 1) % config.Jobs.length].name}
|
|
<svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
`);
|
|
}
|
|
|
|
const startJob = (jobIndex) => {
|
|
$('html, body').css('display', 'none');
|
|
$.post(`https://${GetParentResourceName()}/startJob`, JSON.stringify({
|
|
rank: config.Jobs[jobIndex].rank,
|
|
name: config.Jobs[jobIndex].name,
|
|
}));
|
|
}
|
|
|
|
document.onkeyup = function (data) {
|
|
if (data.which == 27) {
|
|
$('html, body').css('display', 'none');
|
|
currentJob = 0;
|
|
$("#dynamicContentContainer").empty();
|
|
$.post(`https://${GetParentResourceName()}/close`, JSON.stringify({}));
|
|
}
|
|
}; |