1516 lines
85 KiB
HTML
1516 lines
85 KiB
HTML
<div
|
|
class="w-full h-[100vh] flex items-start justify-start"
|
|
style="background-image: url(./images/purple/mechanic-boss-overlay.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-full relative flex flex-wrap">
|
|
<div class="w-[21%] h-full absolute flex items-center justify-end">
|
|
<div class="w-[90%] h-full" style="background-image: url(./images/purple/left-navi.png); background-size: 100% 100%">
|
|
<div class="w-full h-[19.5%]">
|
|
<div class="w-full h-[41.5%] flex items-center justify-center">
|
|
<img class="h-[80%]" src="./images/purple/lossantoslogo.png" alt="" />
|
|
</div>
|
|
<div class="relative w-full h-[55.5%] flex items-center justify-center">
|
|
<div class="w-[62%] h-full flex flex-col items-center justify-center">
|
|
<h2 style="font-family: sf-pro-rounded-bold; color: white; font-size: 0.8vw">
|
|
{{locales.WELCOME_MESSAGE.format(this.$store.state.lossantosPage.mechanicLabel,
|
|
this.$store.state.profileAccount.name)}}
|
|
</h2>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute w-[69.2%] h-[4%] bottom-[0] left-[0] ml-[1.9vw]"
|
|
style="background-color: rgba(255, 255, 255, 0.24)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex items-end justify-start h-[7.1%]">
|
|
<div
|
|
class="categoryItemMechanic w-[71.2%] h-[88%] ml-[1.35vw] flex items-center justify-center"
|
|
@click="setCurrentBossPage('inventory')"
|
|
style="clip-path: polygon(3.4% 0, 100% 0, 95% 100%, 0% 100%); background-color: rgba(0, 0, 0, 0.24)"
|
|
:style="{backgroundColor: currentBossPage == 'inventory' && '#BC84FF'}"
|
|
>
|
|
<h2 style="font-family: sf-pro-rounded-bold; color: white; font-size: 1vw">{{locales.INVENTORY}}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex items-end justify-start h-[7.1%]">
|
|
<div
|
|
class="categoryItemMechanic w-[68.9%] h-[88%] ml-[1vw] flex items-center justify-center"
|
|
@click="setCurrentBossPage('employees')"
|
|
style="clip-path: polygon(2% 0, 100% 0, 96% 100%, 0% 100%); background-color: rgba(0, 0, 0, 0.24)"
|
|
:style="{backgroundColor: currentBossPage == 'employees' && '#BC84FF'}"
|
|
>
|
|
<h2 style="font-family: sf-pro-rounded-bold; color: white; font-size: 1vw">{{locales.EMPLOYEES}}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex items-end justify-start h-[7.1%]">
|
|
<div
|
|
class="categoryItemMechanic w-[67.3%] h-[88%] ml-[0.7vw] flex items-center justify-center"
|
|
@click="setCurrentBossPage('ranks')"
|
|
style="clip-path: polygon(2% 0, 100% 0, 97.5% 100%, 0% 100%); background-color: rgba(0, 0, 0, 0.24)"
|
|
:style="{backgroundColor: currentBossPage == 'ranks' && '#BC84FF'}"
|
|
>
|
|
<h2 style="font-family: sf-pro-rounded-bold; color: white; font-size: 1vw">{{locales.RANKS}}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex items-end justify-start h-[7.1%]">
|
|
<div
|
|
class="categoryItemMechanic w-[66.8%] h-[88%] ml-[0.5vw] flex items-center justify-center"
|
|
style="clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0% 100%); background-color: rgba(0, 0, 0, 0.24)"
|
|
:style="{backgroundColor: currentBossPage == 'logs' && '#BC84FF'}"
|
|
@click="setCurrentBossPage('logs')"
|
|
>
|
|
<h2 style="font-family: sf-pro-rounded-bold; color: white; font-size: 1vw">{{locales.LOGS}}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[8.2%] flex items-center justify-center">
|
|
<div class="w-[95%] h-full flex">
|
|
<div class="w-[33.33%] h-full"></div>
|
|
<div class="w-[33.33%] h-full flex items-center justify-center">
|
|
<div class="w-[70%] h-full flex items-center justify-center">
|
|
<h2 style="font-family: sf-pro-rounded-bold; font-size: 1.4vw; color: white; letter-spacing: 0.1vw">
|
|
{{locales.LS_CUSTOM_OFFICE}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[33.33%] h-full"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[21%] h-[92%]" style="z-index: -1"></div>
|
|
<div class="w-[60%] h-[92%] flex items-center justify-center">
|
|
<template v-if="currentBossPage=='logs'">
|
|
<div class="flex flex-col gap-y-3 pt-6 w-full h-full">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
class="pl-20"
|
|
>
|
|
{{locales.GENERAL_LOGS}}
|
|
</h1>
|
|
<div
|
|
class="w-[95%] mx-auto h-[90%] flex flex-col content-start gap-y-4 pr-12 pl-14 overflow-auto no-scrollbar pt-10 pb-10"
|
|
style="
|
|
background-image: url(./images/purple/inventory-container.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div class="w-full h-[5vh] relative">
|
|
<img src="./images/purple/search-icon.png" class="absolute left-3 top-1/2 transform cursor-pointer -translate-y-1/2" />
|
|
<img
|
|
src="./images/purple/delete-input-text-button.png"
|
|
class="absolute right-4 top-1/2 transform cursor-pointer -translate-y-1/2"
|
|
/>
|
|
|
|
<input v-model="filterLog" type="text" class="search-logs-input" :placeholder="locales.SEARCH_LOGS" />
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-y-3 overflow-auto no-scrollbar">
|
|
<p
|
|
v-for="log in getFilteredLogs"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.6);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
[{{SecondsToDate(log.date, true)}}] : {{log.message}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='ranks'">
|
|
<div class="flex flex-col gap-y-3 pt-6 w-full h-full">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
class="pl-20"
|
|
>
|
|
{{locales.RANKS}}
|
|
</h1>
|
|
<div
|
|
class="w-[95%] mx-auto h-[90%] flex flex-wrap content-start gap-y-6 gap-x-6 pr-12 pl-14 overflow-auto no-scrollbar pt-10 pb-10"
|
|
style="
|
|
background-image: url(./images/purple/inventory-container.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div
|
|
v-for="rank in ranks"
|
|
class="w-[18%] gap-y-3 relative flex flex-col items-center py-6 h-[27.5vh] bg-[#bc84ff08] rounded-xl transition-all hover:bg-[#bc84ff80]"
|
|
>
|
|
<div class="w-[5vh] h-[5vh]">
|
|
<img
|
|
class="w-full h-full object-cover"
|
|
:src="rank.isBoss ? './images/purple/boss-icon.png' : './images/purple/employee-icon.png'"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-y-2 items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.25vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{rank.label}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.RANK}} - {{rank.grade}}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-y-4 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<div class="flex justify-start w-full items-center gap-x-2">
|
|
<img src="./images/purple/player-icon.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PLAYERS_COUNT.format(rank.playerCount)}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-start w-full gap-x-2">
|
|
<img src="./images/purple/access-icon.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{GetAccessText(rank.permissions, rank.isBoss)}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
</div>
|
|
<div
|
|
@click="SelectRank(rank)"
|
|
class="bg-[#FF9C65] rounded-md w-[10vh] py-[.65vh] hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #66412c;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.DETAILS}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='employees'">
|
|
<div class="flex flex-col gap-y-3 pt-6 w-full h-full">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
class="pl-20"
|
|
>
|
|
{{locales.EMPLOYEES}}
|
|
</h1>
|
|
<div
|
|
class="w-[95%] mx-auto h-[90%] flex flex-wrap content-start gap-y-6 gap-x-6 pr-12 pl-14 overflow-auto no-scrollbar pt-10 pb-10"
|
|
style="
|
|
background-image: url(./images/purple/inventory-container.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div
|
|
v-for="employee in employees"
|
|
class="w-[18%] gap-y-3 relative flex flex-col items-center py-6 h-[27.5vh] bg-[#bc84ff08] rounded-xl transition-all hover:bg-[#bc84ff80]"
|
|
>
|
|
<div
|
|
class="absolute right-4 top-4 w-[6px] h-[6px] rounded-full"
|
|
:class="{'bg-[#24FF00]' : employee.online, 'bg-[#dc143c]':!employee.online}"
|
|
></div>
|
|
<div class="p-1 w-[5vh] h-[5vh] rounded-full border border-2 border-[#BC84FF]">
|
|
<img class="w-full h-full rounded-full" :src="employee.pp" />
|
|
</div>
|
|
<div class="flex flex-col gap-y-2 items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.25vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{employee.name}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{employee.grade_name}}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-y-4 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<div class="flex justify-start w-full items-center gap-x-2">
|
|
<img src="./images/purple/date.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{SecondsToDate(employee.joined_at)}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-start w-full gap-x-2">
|
|
<img src="./images/purple/wallet.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
${{FormatMoney(employee.profit)}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
</div>
|
|
<div
|
|
@click="SelectEmployee(employee)"
|
|
class="bg-[#FF9C65] rounded-md w-[10vh] py-[.65vh] hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #66412c;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.DETAILS}}
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="{['blur-md']:!CheckPermission('addNewEmployee'), ['pointer-events-none']:!CheckPermission('addNewEmployee')}"
|
|
class="w-[18%] gap-y-2 relative flex flex-col items-center py-6 h-[27.5vh] bg-[#bc84ff08] rounded-xl transition-all hover:bg-[#bc84ff80]"
|
|
>
|
|
<div class="w-[5vh] h-[5vh]">
|
|
<img class="w-full h-full object-cover" src="./images/purple/add.png" />
|
|
</div>
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.25vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ADD_NEW}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.EMPLOYEE}}
|
|
</p>
|
|
<div class="flex flex-col items-center mt-3 gap-y-2 w-[80%]">
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.75vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PLAYER_ID}}
|
|
</p>
|
|
<input
|
|
v-model="hirePlayerId"
|
|
type="number"
|
|
:placeholder="locales.ID"
|
|
class="placeholder:text-center text-center id-input py-2"
|
|
/>
|
|
</div>
|
|
<div
|
|
@click="HireNewPlayer"
|
|
class="bg-[#BC84FF] mt-4 rounded-md px-6 py-2 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #4b3763;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ADD}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='inventory'">
|
|
<div class="flex flex-col gap-y-3 pt-6 items-center w-full h-full">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
class="mx-auto"
|
|
>
|
|
{{locales.INVENTORY}}
|
|
</h1>
|
|
<div
|
|
class="w-[95%] h-[90%] flex items-center justify-between gap-x-6 pr-4 pl-16"
|
|
style="
|
|
background-image: url(./images/purple/inventory-container.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div class="h-full pt-12 flex flex-col gap-y-4" style="flex: 2">
|
|
<div class="flex items-center justify-between">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{locales.LOCKER_TITLE}}
|
|
</h1>
|
|
</div>
|
|
|
|
<div
|
|
:class="{['blur-md']:!CheckPermission('accessInventory'), ['pointer-events-none']:!CheckPermission('accessInventory')}"
|
|
class="boss-slots overflow-auto no-scrollbar w-full flex flex-wrap content-start gap-x-2 gap-y-2"
|
|
style="flex: 0 0 1"
|
|
>
|
|
<div
|
|
v-for="(n, i) in 50"
|
|
:style="{'background': bossInventory[i] && 'radial-gradient(50% 50.00% at 50% 50.00%, rgba(255, 156, 101, 0.10) 0%, rgba(255, 156, 101, 0.10) 100%)'}"
|
|
:class="{['boss-item']:bossInventory[i]}"
|
|
:item-data="bossInventory[i] && JSON.stringify(bossInventory[i])"
|
|
class="w-[23%] boss-slot overflow-hidden h-[8.75vh] relative bg-[#ffffff1a] rounded-md flex items-center justify-center"
|
|
>
|
|
<img class="object-cover w-[70%] h-auto" v-if="bossInventory[i]" :src="ItemImage(bossInventory[i])" />
|
|
<div
|
|
v-if="bossInventory[i]"
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.8vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
class="absolute left-0 bottom-0 flex items-center justify-center bg-[#000000a6] w-full h-[2vh]"
|
|
>
|
|
{{bossInventory[i].label}}
|
|
</div>
|
|
<p
|
|
v-if="bossInventory[i]"
|
|
class="absolute left-2 top-2"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.28);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.7vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
>
|
|
{{bossInventory[i].amount}}x
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="{['blur-md']:!CheckPermission('accessInventory'), ['pointer-events-none']:!CheckPermission('accessInventory')}"
|
|
class="flex-1 h-full flex flex-col justify-center items-center px-8 gap-y-4"
|
|
>
|
|
<img src="./images/purple/mechaniclogo.png" />
|
|
<input
|
|
v-model="inventoryInputAmount"
|
|
type="number"
|
|
placeholder="0"
|
|
class="text-center boss-menu-input w-full h-[4.3vh]"
|
|
/>
|
|
<!-- <div class="flex cursor-pointer hover:opacity-90 transition-all items-center border w-full h-[4.3vh] border-2 border-[#ff9c654a] rounded-md justify-center bg-[#FF9C65] "
|
|
style="box-shadow: 0px 0px 129px 0px rgba(255, 156, 101, 0.75);color: #89573C;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;">PUT</div> -->
|
|
</div>
|
|
<div class="h-full pt-12 flex flex-col gap-y-4" style="flex: 2">
|
|
<div class="flex items-center justify-between">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{locales.MY_INVENTORY}}
|
|
</h1>
|
|
</div>
|
|
|
|
<div
|
|
:class="{['blur-md']:!CheckPermission('accessInventory'), ['pointer-events-none']:!CheckPermission('accessInventory')}"
|
|
class="player-slots overflow-auto no-scrollbar w-full flex flex-wrap content-start gap-x-2 gap-y-2"
|
|
style="flex: 0 0 1"
|
|
>
|
|
<div
|
|
v-for="(n, i) in 50"
|
|
:style="{'background': playerInventory[i] && 'radial-gradient(50% 50.00% at 50% 50.00%, rgba(255, 156, 101, 0.10) 0%, rgba(255, 156, 101, 0.10) 100%)'}"
|
|
:class="{['player-item']:playerInventory[i]}"
|
|
:item-data="playerInventory[i] && JSON.stringify(playerInventory[i])"
|
|
class="w-[23%] overflow-hidden player-slot h-[8.75vh] relative bg-[#ffffff1a] rounded-md flex items-center justify-center"
|
|
>
|
|
<img class="object-cover w-[70%] h-auto" v-if="playerInventory[i]" :src="ItemImage(playerInventory[i])" />
|
|
<div
|
|
v-if="playerInventory[i]"
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.8vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
class="absolute left-0 bottom-0 flex items-center justify-center bg-[#000000a6] w-full h-[2vh]"
|
|
>
|
|
{{playerInventory[i].label}}
|
|
</div>
|
|
<p
|
|
v-if="playerInventory[i]"
|
|
class="absolute left-2 top-2"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.28);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.45);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 0.7vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
>
|
|
{{playerInventory[i].amount}}x
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="w-[19%] h-[92%] relative content-start flex flex-col pt-6 items-center gap-y-3" style="overflow: hidden">
|
|
<template v-if="currentBossPage=='logs'">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.VAULT_LOGS}}
|
|
</h1>
|
|
<div
|
|
class="bg-[#120b1c99] rounded-2xl relative flex flex-col items-center pt-72 gap-y-5 w-full h-[90%] border border-2 border-[#bc84ff2b]"
|
|
>
|
|
<img class="absolute top-0 w-full h-auto left-1/2 transform -translate-x-1/2 object-cover" src="./images/purple/vault-icon.png" />
|
|
<p
|
|
style="
|
|
color: #ffa06b;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 129px rgba(255, 156, 101, 0.75);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 3.5vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
class="z-20"
|
|
>
|
|
${{FormatMoney(money)}}
|
|
</p>
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='ranks'">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.RANK_DETAILS}}
|
|
</h1>
|
|
<div
|
|
class="bg-[#120b1c99] rounded-2xl relative flex flex-col items-center justify-center w-full h-[90%] border border-2 border-[#bc84ff2b]"
|
|
>
|
|
<template v-if="!selectedEmployee">
|
|
<p
|
|
v-if="!selectedRank"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.56);
|
|
text-align: center;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.75vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
class="px-20"
|
|
>
|
|
{{locales.SELECT_RANK}}
|
|
</p>
|
|
<div v-else class="relative flex flex-col gap-y-3 items-center pt-8 rounded-2xl bg-[#bc84ff80] w-[88%] h-[88%]">
|
|
<div class="w-[5vh] h-[5vh]">
|
|
<img
|
|
class="w-full h-full object-cover"
|
|
:src="selectedRank.isBoss ? './images/purple/boss-icon.png' : './images/purple/employee-icon.png'"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-y-2 items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedRank.label}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.55vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.RANK}} - {{selectedRank.grade}}
|
|
</p>
|
|
</div>
|
|
<div v-if="editPermissions" class="flex flex-col gap-y-4 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.31);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PERMISSIONS}}
|
|
</p>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
@change="TogglePermission($event.target.checked, 'accessBossMenu')"
|
|
:checked="selectedRank.permissions?.accessBossMenu"
|
|
type="checkbox"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_MENU}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
@change="TogglePermission($event.target.checked, 'accessVault')"
|
|
:checked="selectedRank.permissions?.accessVault"
|
|
type="checkbox"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_VAULT}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
type="checkbox"
|
|
@change="TogglePermission($event.target.checked, 'accessInventory')"
|
|
:checked="selectedRank.permissions?.accessInventory"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_INVENTORY}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
type="checkbox"
|
|
@change="TogglePermission($event.target.checked, 'accessEmployees')"
|
|
:checked="selectedRank.permissions?.accessEmployees"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_EMPLOYEE_MENU}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
type="checkbox"
|
|
@change="TogglePermission($event.target.checked, 'accessRanks')"
|
|
:checked="selectedRank.permissions?.accessRanks"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_RANK_MENU}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
@change="TogglePermission($event.target.checked, 'accessLogs')"
|
|
:checked="selectedRank.permissions?.accessLogs"
|
|
type="checkbox"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ACCESS_LOGS_MENU}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-3">
|
|
<input
|
|
type="checkbox"
|
|
@change="TogglePermission($event.target.checked, 'addNewEmployee')"
|
|
:checked="selectedRank.permissions?.addNewEmployee"
|
|
/>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.ADD_NEW_EMPLOYEE}}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
@click="ToggleEditPermissions(false)"
|
|
class="bg-[#FF9C65] h-[4vh] rounded-md w-[100%] hover:opacity-90 cursor-pointer flex items-center justify-center mt-4"
|
|
style="
|
|
color: #66412c;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
|
|
"
|
|
>
|
|
{{locales.GO_BACK}}
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-col gap-y-3 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.31);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.EMPLOYEES_IN_THIS_RANK}}
|
|
</p>
|
|
<div class="flex w-full flex-1 overflow-auto no-scrollbar flex-col gap-y-2">
|
|
<div class="flex items-center justify-between" v-for="employee in GetEmployeesInRank(selectedRank.grade) ">
|
|
<div class="flex items-center gap-x-2">
|
|
<div class="p-1 w-[5vh] h-[5vh] rounded-full border border-2 border-[#BC84FF]">
|
|
<img class="w-full h-full rounded-full object-cover" :src="employee.pp" />
|
|
</div>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.35vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{employee.name}}
|
|
</p>
|
|
</div>
|
|
<div
|
|
@click="SelectEmployee(employee)"
|
|
class="bg-[#ff9c654d] cursor-pointer hover:opacity-90 transition-all rounded-md py-2 px-4"
|
|
style="
|
|
color: #ff9d67;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.VIEW}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<div
|
|
style="
|
|
color: #5b4378;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.35vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
@click="ToggleEditPermissions(true)"
|
|
class="w-full cursor-pointer hover:opacity-90 transition-all bg-[#D1ABFF] rounded-md h-[4vh] flex items-center justify-center"
|
|
>
|
|
{{locales.PERMISSIONS}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-else class="relative flex flex-col gap-y-3 items-center pt-10 rounded-2xl bg-[#bc84ff80] w-[88%] h-[88%]">
|
|
<div class="p-1 w-[10vh] h-[10vh] rounded-full border border-2 border-[#BC84FF]">
|
|
<img class="w-full h-full rounded-full object-cover" :src="selectedEmployee.pp" />
|
|
</div>
|
|
<div class="flex flex-col gap-y-2 items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.name}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.55vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.grade_name}}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-y-5 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<div class="flex items-center justify-start w-full gap-x-3">
|
|
<img v-if="selectedEmployee.online" class="w-[1.4vh] h-[1.4vh]" src="./images/purple/online-icon.png" />
|
|
<img v-else class="w-[1.4vh] h-[1.4vh]" src="./images/purple/offline-icon.png" />
|
|
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.online ? locales.ONLINE : locales.OFFLINE}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/date.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.JOINED_AT.format(SecondsToDate(selectedEmployee.joined_at))}}
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/vault-icon-2.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
Vault Access Granted
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/bill-icon.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.CUSTOMERS_BILLED.format(selectedEmployee.bills)}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-start w-full gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/wallet.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PROFIT.format(FormatMoney(selectedEmployee.profit))}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-y-4 mt-4 w-full items-center">
|
|
<div
|
|
@click="PromotePlayer"
|
|
class="bg-[#BC84FF] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #4b3763;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PROMOTE}}
|
|
</div>
|
|
<div
|
|
@click="DemotePlayer"
|
|
class="bg-[#D1ABFF] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #5b4378;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.DEMOTE}}
|
|
</div>
|
|
<div
|
|
@click="FirePlayer"
|
|
class="bg-[#FF9C65] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #63412e;
|
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.FIRE}}
|
|
</div>
|
|
<div
|
|
@click="selectedEmployee=false"
|
|
class="bg-[#FF9C65] h-[4vh] rounded-md w-[80%] hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #66412c;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.2vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
|
|
"
|
|
>
|
|
{{locales.GO_BACK}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='employees'">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.EMPLOYEE_DETAILS}}
|
|
</h1>
|
|
<div
|
|
class="bg-[#120b1c99] rounded-2xl relative flex flex-col items-center justify-center w-full h-[90%] border border-2 border-[#bc84ff2b]"
|
|
>
|
|
<p
|
|
v-if="!selectedEmployee"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.56);
|
|
text-align: center;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.75vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
class="px-20"
|
|
>
|
|
{{locales.EMPLOYEE_DETAILS}}
|
|
</p>
|
|
<div v-else class="relative flex flex-col gap-y-3 items-center pt-10 rounded-2xl bg-[#bc84ff80] w-[88%] h-[88%]">
|
|
<div class="p-1 w-[10vh] h-[10vh] rounded-full border border-2 border-[#BC84FF]">
|
|
<img class="w-full h-full rounded-full object-cover" :src="selectedEmployee.pp" />
|
|
</div>
|
|
<div class="flex flex-col gap-y-2 items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.9vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.name}}
|
|
</p>
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.47);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.55vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.grade_name}}
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col gap-y-5 w-[80%]">
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
<div class="flex items-center justify-start w-full gap-x-3">
|
|
<img v-if="selectedEmployee.online" class="w-[1.4vh] h-[1.4vh]" src="./images/purple/online-icon.png" />
|
|
<img v-else class="w-[1.4vh] h-[1.4vh]" src="./images/purple/offline-icon.png" />
|
|
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{selectedEmployee.online ? locales.ONLINE : locales.OFFLINE}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/date.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.JOINED_AT.format(SecondsToDate(selectedEmployee.joined_at))}}
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/vault-icon-2.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
Vault Access Granted
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-start w-full items-center gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/purple/bill-icon.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.CUSTOMERS_BILLED.format(selectedEmployee.bills)}}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-start w-full gap-x-3">
|
|
<img class="w-[1.4vh] h-[1.4vh]" src="./images/wallet.png" />
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.7);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.3vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PROFIT.format(FormatMoney(selectedEmployee.profit))}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="w-full mx-auto h-[1px] bg-[#ffffff1f]"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-y-4 mt-4 w-full items-center">
|
|
<div
|
|
@click="PromotePlayer"
|
|
class="bg-[#BC84FF] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #4b3763;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.PROMOTE}}
|
|
</div>
|
|
<div
|
|
@click="DemotePlayer"
|
|
class="bg-[#D1ABFF] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #5b4378;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.DEMOTE}}
|
|
</div>
|
|
<div
|
|
@click="FirePlayer"
|
|
class="bg-[#FF9C65] rounded-md w-[80%] py-3 hover:opacity-90 cursor-pointer flex items-center justify-center"
|
|
style="
|
|
color: #63412e;
|
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 1.1vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.FIRE}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="currentBossPage=='inventory'">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.LSC_VAULT}}
|
|
</h1>
|
|
<div
|
|
class="bg-[#120b1c99] filter rounded-2xl relative flex flex-col items-center justify-center w-full h-[90%] border border-2 border-[#bc84ff2b]"
|
|
>
|
|
<img
|
|
:class="{['blur-md']:!CheckPermission('accessVault'), ['pointer-events-none']:!CheckPermission('accessVault')}"
|
|
class="absolute top-0 w-full h-auto left-1/2 transform -translate-x-1/2 object-cover"
|
|
src="./images/purple/vault-icon.png"
|
|
/>
|
|
<p
|
|
style="
|
|
color: #ffa06b;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-shadow: 0px 0px 129px rgba(255, 156, 101, 0.75);
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 3.5vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
:class="{['blur-md']:!CheckPermission('accessVault'), ['pointer-events-none']:!CheckPermission('accessVault')}"
|
|
class="relative top-[14vh] z-20"
|
|
>
|
|
${{FormatMoney(money)}}
|
|
</p>
|
|
<div
|
|
:class="{['blur-md']:!CheckPermission('accessVault'), ['pointer-events-none']:!CheckPermission('accessVault')}"
|
|
class="flex w-full px-16 relative top-[25vh] z-20 flex-col gap-y-4 items-center justify-center"
|
|
>
|
|
<input v-model="moneyAmount" type="number" placeholder="0" class="text-center boss-menu-input w-full h-[4.3vh]" />
|
|
<div
|
|
@click="DepositMoney"
|
|
class="flex cursor-pointer hover:opacity-90 transition-all items-center border w-full h-[4.3vh] border-2 border-[#ff9c654a] rounded-md justify-center bg-[#FF9C65]"
|
|
style="
|
|
box-shadow: 0px 0px 129px 0px rgba(255, 156, 101, 0.75);
|
|
color: #89573c;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.DEPOSIT}}
|
|
</div>
|
|
<div
|
|
@click="WithdrawMoney"
|
|
class="flex cursor-pointer hover:opacity-90 transition-all items-center border w-full h-[4.3vh] border-2 border-[#ff9c654a] rounded-md justify-center bg-[#FFF]"
|
|
style="
|
|
color: #9b9b9b;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-family: 'sf-pro-rounded-bold';
|
|
font-size: 2vh;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{locales.WITHDRAW}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|