2402 lines
176 KiB
HTML
2402 lines
176 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
|
|
<script src="./js/vue.global.js"></script>
|
|
<script src="./js/vuex.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
|
|
<link rel="stylesheet" href="./css/style.css" />
|
|
<link rel="stylesheet" href="./css/responsive.css" />
|
|
|
|
<title>Codem Garbage</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div v-if="show" class="w-full h-[100vh] flex items-center justify-center">
|
|
<div
|
|
v-if="activePage == 'main'"
|
|
class="w-full h-full flex relative"
|
|
style="background-image: url(./images/background.png); background-size: 100% 100%"
|
|
>
|
|
<transition-group name="fade">
|
|
<div
|
|
class="w-[20%] h-[6.5%] absolute flex items-start justify-start"
|
|
style="background-image: url(./images/notificationbg.png); background-size: 100% 100%"
|
|
:style="{'border-radius': '0.5vw', 'bottom': `${15 + (index * 6)}vh`, 'left': '1%'}"
|
|
v-for="(notification, index) in notifications"
|
|
:key="notification.id"
|
|
>
|
|
<div class="w-[15%] h-full"></div>
|
|
<div class="w-full h-full flex flex-wrap">
|
|
<div class="w-full h-[40%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
text-indent: 0.4vw;
|
|
font-style: normal;
|
|
color: #4c4c4c;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{notification.header}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[60%] flex items-center">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
text-indent: 0.4vw;
|
|
font-style: normal;
|
|
color: #4c4c4c;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{notification.text}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <h2 class="text-white">{{notification.text}}</h2> -->
|
|
</div>
|
|
</transition-group>
|
|
<div class="w-[31%] h-full"></div>
|
|
<div class="w-[69%] h-full flex flex-wrap content-start items-start justify-end">
|
|
<div class="w-[89.2%] h-[8.3%] flex">
|
|
<div
|
|
class="w-[76.5%] h-full flex items-center justify-between relative"
|
|
style="border-bottom: 2px solid rgba(255, 255, 255, 0.26)"
|
|
>
|
|
<div class="w-full h-[50%] absolute top-0 z-[1]">
|
|
<div
|
|
class="w-[20%] h-[80%]"
|
|
:style="getMarginStyle()"
|
|
style="background-image: url(./images/blur.png); transition: 0.5s all; background-size: 100% 100%"
|
|
></div>
|
|
</div>
|
|
<div
|
|
v-for="data in categories"
|
|
@click="changePage(data.name)"
|
|
class="w-[20%] h-[50%] flex items-center justify-center cursor-pointer z-[2]"
|
|
style="border-radius: 6px; transition: 0.5s all"
|
|
:style="getCategoryStyles(data.name)"
|
|
>
|
|
<h2
|
|
:style="currentPage == data.name ? 'color: #2C683A' : 'color: #FFCD4D'"
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex items-end justify-between">
|
|
<div v-if="playerData" class="w-[70%] h-[70%] mb-[0.5vh] flex flex-col items-end justify-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.0417vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.name}}
|
|
</h2>
|
|
<div class="w-full h-[30%] flex items-center justify-end mt-[0.2vh]">
|
|
<h2
|
|
style="
|
|
color: #2c683a;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{playerData.allData.profiledata.level}}
|
|
</h2>
|
|
<img class="h-[99%] ml-[0.3vw]" src="./images/lvicon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-[21%] h-[60%] mb-[0.5vh] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #2c683a"
|
|
>
|
|
<img class="h-[93%] rounded-full" :src="playerData.allData.profiledata.avatar" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<transition-group name="changeCategoryPage">
|
|
<div v-if="currentPage == 'main'" class="w-[89.2%] h-[89.8%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div
|
|
class="w-[98%] h-[52%] flex flex-wrap content-start flex relative"
|
|
style="background-image: url(./images/mainroute.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-[12.5%] mt-[5vh] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 4.5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
text-transform: uppercase;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{mainPageRouteData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[19%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[27%]">
|
|
<div class="w-full h-[28%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/passenger.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['MAT_Medium']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[39%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/moneyicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
v-if="mainPageRouteData.Profit"
|
|
style="
|
|
color: #fff;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{mainPageRouteData.Profit.toLocaleString()}} - {{(mainPageRouteData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[35%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/timeicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{mainPageRouteData.level}} {{this.locales['Req']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[12%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div
|
|
class="w-[15%] h-[50%] flex items-center justify-center cursor-pointer"
|
|
@click="selectRoute(mainPageRouteData)"
|
|
style="
|
|
border-radius: 5.44px;
|
|
border: 2.04px solid #52b569;
|
|
background: #234c2d;
|
|
box-shadow: 0px 1.36px 6.732px 0px rgba(0, 0, 0, 0.19);
|
|
"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.8vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 16.238px */
|
|
"
|
|
>
|
|
{{garbageJobStartStep.selectroute ? "SELECTED AREA" : "SELECT AREA" }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div id="mainswiper" class="w-full h-[17.5%] bottom-0 absolute" style="overflow: hidden">
|
|
<div class="swiper-wrapper w-full h-full ml-[1vw]">
|
|
<div
|
|
v-for="(data,index) in routes"
|
|
class="swiper-slide w-[21.5%] h-full cursor-pointer"
|
|
@click="changeRouteMainPage(index)"
|
|
:style="data.name == mainPageRouteData.name ? 'margin-top: 0vh' : 'margin-top: 4vh'"
|
|
style="background-image: url(./images/swiperbg.png); background-size: 100% 100%; transition: 0.5s all"
|
|
>
|
|
<div class="w-full h-[50%] flex items-center justify-center relative">
|
|
<div class="w-[10%] right-[1vw] h-full flex absolute items-center justify-center">
|
|
<img
|
|
v-if="playerData.allData.profiledata.level >= data.level"
|
|
class=""
|
|
src="./images/lockopenicon.png"
|
|
alt=""
|
|
/>
|
|
<img v-else class="" src="./images/lockicon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="inline-flex h-[60%] flex items-center justify-center pl-[1vw] pr-[1vw]"
|
|
style="border-radius: 5px; border: 1px solid #2c683a; background: #2c683a"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{locales['lv']}}{{ data.level }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[50%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{ data.label }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div
|
|
class="w-[34%] h-[43%] flex items-center justify-center no-scrollbar"
|
|
style="background-image: url(./images/dailymissionbg.png); background-size: 100% 100%; overflow: auto"
|
|
>
|
|
<div class="w-[89%] h-full">
|
|
<div class="w-full h-[20%] flex items-center justify-start">
|
|
<div class="w-[13%] h-[60%]"></div>
|
|
<div class="w-[87%] h-[60%] flex items-center justify-between">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1vw;
|
|
text-indent: 0.8vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['dailymissions']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{playerData.allData.dailymission.remainingtime.toFixed(0)}}hr
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-for="data in playerDailyMission"
|
|
class="w-full h-[25%] border mt-[0.5vh] flex items-center justify-center"
|
|
style="border-radius: 3px; border: 2px solid rgba(0, 0, 0, 0.33); background: rgba(48, 89, 28, 0.54)"
|
|
>
|
|
<div class="w-[92%] h-full">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 1vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{data.header}}
|
|
</h2>
|
|
<div class="w-full h-[30%] flex items-center">
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.62vw;
|
|
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[14%] flex items-center justify-between">
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{data.currentCount}}/{{data.count}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
>
|
|
+ {{data.xp}} {{this.locales['xp']}}
|
|
</h2>
|
|
</div>
|
|
<div
|
|
class="w-full h-[15%] mt-[0.3vh] flex items-center"
|
|
style="border-radius: 0.7vw; background: rgba(0, 0, 0, 0.24)"
|
|
>
|
|
<div
|
|
class="h-full"
|
|
v-if="data.progressbar > 0"
|
|
:style="{ width: data.progressbar + '%' }"
|
|
style="border-radius: 15px; border: 1px solid #000; background: #EEB210"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[26%] ml-[1.1vw] h-[43%]" style="background-image: url(./images/badge.png); background-size: 100% 100%">
|
|
<div class="w-full h-[20%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['achievements']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[4%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1.0417vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
background: linear-gradient(90deg, #2c683a 0%, #e5b440 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{badgeData.nickname}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[15%] flex flex-col items-center justify-center"></div>
|
|
<div class="w-full h-[38%]">
|
|
<div
|
|
id="mainswiper3"
|
|
class="w-full h-full flex flex-wrap items-center justify-center relative"
|
|
style="overflow: hidden"
|
|
>
|
|
<div class="w-full h-full swiper-wrapper">
|
|
<div
|
|
v-for="data in configBadgeData"
|
|
class="swiper-slide w-[50%] h-full flex justifty-center items-center"
|
|
>
|
|
<img class="h-[90%] ml-[4vw]" :src="'./images/'+data.name+'.png'" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[9%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.9vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-bottom: 1vw;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['Reach_Level']}} {{badgeData.level}}
|
|
</h2>
|
|
</div>
|
|
<div v-if="playerData.allData" class="w-full h-[12%] flex items-end justify-center relative">
|
|
<div
|
|
class="w-[85%] h-[99%] flex items-center justify-center cursor-pointer"
|
|
@click="takeBadgeFunc(badgeData)"
|
|
style="border-radius: 7px; background: #e5b440; box-shadow: 0px -4px 1px 0px #6f5823 inset"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.9vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{this.locales['Take_Badge']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[35%] ml-[1.1vw] h-[43%]">
|
|
<div
|
|
class="w-full h-[70%] flex flex-wrap"
|
|
style="background-image: url(./images/completesteps.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-[19%] flex items-end justify-start">
|
|
<div class="w-[14%] h-[45%] flex items-center justify-end">
|
|
<img class="h-[120%]" src="./images/busicon.png" alt="" />
|
|
</div>
|
|
<div class="w-[80%] h-[45%] flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
text-indent: 1vw;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['gettingready']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[20%] h-[77%] flex flex-col items-center justify-end">
|
|
<div
|
|
class="w-[40%] h-[14.7%] mb-[0.5vh] rounded-full flex items-center justify-center"
|
|
:style="garbageJobStartStep.rentthebus ? 'border: 2px solid #2C683A' : 'border: 2px solid #9a9393'"
|
|
>
|
|
<div
|
|
v-if="garbageJobStartStep.rentthebus"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #2c683a"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="garbageJobStartStep.rentthebus ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="garbageJobStartStep.rentthebus ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.6vh] border rounded-full"
|
|
:style="garbageJobStartStep.selectroute ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[40%] h-[14.7%] flex items-center justify-center mb-[0.5vh] rounded-full"
|
|
:style="garbageJobStartStep.selectroute ? 'border: 2px solid #2C683A' : 'border: 2px solid #9a9393'"
|
|
>
|
|
<div
|
|
v-if="garbageJobStartStep.selectroute"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #2c683a"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="garbageJobStartStep.selectroute ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="garbageJobStartStep.selectroute ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.6vh] border rounded-full"
|
|
:style="garbageJobStartStep.startthejob ? 'background-color: #2C683A' : 'background-color: #9a9393'"
|
|
></div>
|
|
<div
|
|
class="w-[40%] h-[15%] flex items-center justify-center mb-[0.5vh] rounded-full"
|
|
:style="garbageJobStartStep.startthejob ? 'border: 2px solid #2C683A' : 'border: 2px solid #9a9393'"
|
|
>
|
|
<div
|
|
v-if="garbageJobStartStep.startthejob"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #2c683a"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[60%] h-[77%]">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 3.8vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['rentthebusvehicle']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 5.7vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['selectaroute']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 5.9vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['startthejob']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full h-[23%] mt-[2.2vh] flex items-center justify-center cursor-pointer"
|
|
@click="startJob()"
|
|
style="
|
|
border-radius: 8px;
|
|
background: linear-gradient(90deg, rgba(82, 181, 105, 0.1) 0%, rgba(82, 181, 105, 0.1) 96%);
|
|
border: 2px solid #52b569;
|
|
box-shadow: 0px 0px 38px 6px rgba(82, 181, 105, 0.06);
|
|
"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Heavy;
|
|
font-size: 2.0833vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 31.84px */
|
|
"
|
|
>
|
|
{{this.locales['startjob']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'leaderboard'" class="w-[89.2%] h-[92%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[55%] relative flex items-center justify-center">
|
|
<div
|
|
class="w-[110%] h-full absolute mr-[5vw] flex justify-start content-start"
|
|
style="background-image: url(./images/leaderboard.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[36.5%] h-full flex flex-wrap items-start justify-end relative">
|
|
<div v-if="top50[1]" class="w-[33%] h-[45%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center" style="opacity: 0.5">
|
|
<div
|
|
class="w-[42%] h-[82%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #ffcd4d"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[1]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 0.5;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[1]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[33%] h-[45%] flex items-center justify-center absolute bottom-0">
|
|
<img
|
|
v-if="top50[1] && top50[1].badge"
|
|
class="h-[30%]"
|
|
:src="'./images/'+top50[1].badge+'.png'"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex flex-wrap items-start justify-end">
|
|
<div v-if="top50[0]" class="w-[55%] h-[43%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center">
|
|
<div
|
|
class="w-[42%] h-[87%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #ffcd4d"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[0]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[0]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[55%] h-[43%] flex items-center justify-center">
|
|
<img
|
|
v-if="top50[0] && top50[0].badge"
|
|
class="h-[30%]"
|
|
:src="'./images/'+top50[0].badge+'.png'"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex items-start justify-end relative">
|
|
<div v-if="top50[2]" class="w-[55%] h-[45%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center" style="opacity: 0.5">
|
|
<div
|
|
class="w-[42%] h-[82%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #ffcd4d"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[2]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 0.5;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[2]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[55%] h-[45%] flex items-center justify-center absolute bottom-0">
|
|
<img
|
|
v-if="top50[2] && top50[2].badge"
|
|
class="h-[30%]"
|
|
:src="'./images/'+top50[2].badge+'.png'"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[22%] ml-[1.8vw] absolute bottom-0 flex items-start justify-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['youare']}} {{findMyRank}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[55.5%] no-scrollbar mt-[-8vh] z-[2]" style="overflow: auto">
|
|
<div
|
|
v-for="(data, index) in top50"
|
|
:key="index"
|
|
:style="index > 2 ? 'display: flex' : 'display: none'"
|
|
class="w-[98%] mt-[1vh] h-[13%]"
|
|
style="
|
|
border-radius: 0.5vw;
|
|
background: linear-gradient(90deg, rgba(82, 181, 105, 0.1) 0%, rgba(82, 181, 105, 0.1) 96%);
|
|
"
|
|
>
|
|
<div class="w-full h-full flex">
|
|
<div class="w-[6%] h-full flex items-center justify-center">
|
|
<h2 class="text-1" style="font-size: 1.3vw">#{{index +1}}</h2>
|
|
</div>
|
|
<div class="w-[94%] h-full flex items-center justify-start">
|
|
<div class="w-[50%] h-full flex items-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{data.name}}
|
|
</h2>
|
|
<img v-if="data.badge" class="h-[50%] ml-[1vw]" :src="'./images/'+data.badge+'.png'" alt="" />
|
|
</div>
|
|
<div class="w-[50%] h-full flex justify-end items-center">
|
|
<h2
|
|
style="
|
|
color: #ffcd4d;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-right: 0.5vw;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{data.level}}
|
|
</h2>
|
|
<img class="h-[40%] mr-[1vw]" src="./images/lvicon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'profile'" class="w-[89.2%] h-[92%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div class="w-full h-[45%] flex justify-center relative">
|
|
<div
|
|
class="w-[76%] h-[100%] flex absolute bottom-0 mb-[-5vh]"
|
|
style="background-image: url(./images/profilebg.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[37.5%] h-full left-[14.6vw] absolute">
|
|
<div class="w-full h-[73%]">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['current']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['level']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{playerData.allData.profiledata.level}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['experience']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.xp}}/{{garbageJobData.requiredXp}}XP
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[37%] h-full flex items-start justify-center">
|
|
<div class="w-[81%] h-[67%] flex flex-wrap content-end items-end justify-center">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['completed']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['jobs']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.completejobs}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.completejobs}} {{this.locales['routetitle']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['complete']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[18.5%] h-full"></div>
|
|
<div class="w-[37%] h-full flex items-start justify-end ml-[1.2vw]">
|
|
<div class="w-[81%] h-[67%] flex flex-wrap content-end items-end justify-end">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['total']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['earnings']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{playerData.allData.profiledata.totalearnings}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #52b569;
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['since']}} {{playerData.allData.profiledata.sincedate}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[8.5%] flex">
|
|
<div class="w-[2.5%] h-full flex items-center justify-center">
|
|
<img class="h-[35%]" src="./images/latesticon.png" alt="" />
|
|
</div>
|
|
<div class="inline-flex h-full items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.3vw;
|
|
text-indent: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 23.88px */
|
|
"
|
|
>
|
|
{{this.locales['latestworks']}}
|
|
</h2>
|
|
</div>
|
|
<div class="flex-1 h-full flex items-center justify-start">
|
|
<div
|
|
class="w-[96%] h-[5%] ml-[0.5vw]"
|
|
style="border-radius: 14px; background: rgba(255, 255, 255, 0.26)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="playerData.allData" class="w-full h-[40%] no-scrollbar" style="overflow: auto">
|
|
<div
|
|
v-for="data in playerData.allData.historydata.slice().reverse()"
|
|
class="w-[98%] h-[16%] mt-[1vh] flex"
|
|
style="
|
|
border-radius: 0.6vw;
|
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
|
background: linear-gradient(90deg, rgba(82, 181, 105, 0.1) 0%, rgba(82, 181, 105, 0.1) 96%);
|
|
"
|
|
>
|
|
<div class="w-[9.8%] h-full flex items-center justify-center">
|
|
<div
|
|
class="inline-flex h-[50%] flex items-center justify-center pl-[1.2vw] pr-[1.2vw]"
|
|
style="border-radius: 0.3vw; border: 1px solid #fff; background: #52b569"
|
|
>
|
|
<img src="./images/logo.png" class="h-[30%]" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-[46.5%] h-full flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.05vw;
|
|
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{data.routename}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/passenger.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.gathered}} {{this.locales['gathered']}}
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/moneyicon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.money.toLocaleString()}} {{currencyUnit}} {{this.locales['earned']}}
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/callendericon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.time}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'coop'" class="w-[89.2%] h-[92%] flex flex-wrap content-start">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div v-if="newCoopPageValue === 'main'" class="w-full h-[98%] flex flex-wrap content-start relative">
|
|
<div
|
|
class="w-[102%] h-full flex flex items-center justify-center absolute"
|
|
style="background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(0.2604vw)"
|
|
v-if="openJoinModal"
|
|
>
|
|
<div
|
|
class="w-[45%] h-[28%] flex flex-col items-center content-start"
|
|
style="border-radius: 0.7813vw; background: #2c683a"
|
|
>
|
|
<div class="w-full h-[12%]"></div>
|
|
<div class="w-full h-[25%] flex items-center flex-wrap">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[27%] h-full flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{fakeData.roomData.roomName}} {{this.locales['Lobby']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[60%] h-full flex items-center justify-center">
|
|
<div class="w-[90%] h-[5%]" style="background: rgba(255, 255, 255, 0.24)"></div>
|
|
</div>
|
|
<div class="w-[8%] h-full flex items-center justify-center cursor-pointer">
|
|
<img class="h-[55%]" @click="passwordModal(false)" src="./images/closebtn.png" alt="" />
|
|
</div>
|
|
<div class="w-[2%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[2%] flex"></div>
|
|
<div class="w-full h-[20%] flex justify-start items-center flex-wrap">
|
|
<div class="w-[5%] h-full"></div>
|
|
<h2
|
|
style="
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['Password']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[2%] flex"></div>
|
|
<div class="w-full h-[25%] flex items-center justify-center">
|
|
<div class="w-[90%] h-full flex flex-wrap">
|
|
<div class="w-[55%] h-full">
|
|
<input
|
|
type="search"
|
|
class="w-full h-full flex pl-3"
|
|
v-model="garbageJobStartStep.joinpassword"
|
|
:placeholder= this.locales['Type_the_password']
|
|
style="
|
|
background: rgba(0, 0, 0, 0.24);
|
|
outline: none;
|
|
font-size: 0.625vw;
|
|
font-family: Gilroy-Medium;
|
|
font-weight: 400;
|
|
border: none;
|
|
border-radius: 0.3125vw;
|
|
color: rgba(255, 255, 255, 0.16);
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="w-[5%] h-full"></div>
|
|
<div
|
|
class="w-[40%] h-full flex items-center justify-center"
|
|
style="background: #e5b440; border-radius: 0.3125vw"
|
|
@click="joinLobbyForPassword"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['JOIN']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="openPasswordModal"
|
|
class="w-[102%] h-full mt-[-1vh] flex flex items-center justify-center absolute"
|
|
style="background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(0.2604vw)"
|
|
>
|
|
<div
|
|
class="w-[50%] h-[42%] flex flex-col items-center content-start"
|
|
style="border-radius: 0.7813vw; background: #2c683a"
|
|
>
|
|
<div class="w-full h-[4%]"></div>
|
|
<div class="w-full h-[12%] flex items-center flex-wrap">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[27%] h-full flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.name}} {{this.locales['Lobby']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[60%] h-full flex items-center justify-center">
|
|
<div class="w-[90%] h-[5%]" style="background: rgba(255, 255, 255, 0.24)"></div>
|
|
</div>
|
|
<div class="w-[8%] h-full flex items-center justify-center cursor-pointer">
|
|
<img class="h-[55%]" @click="passwordModal(false)" src="./images/closebtn.png" alt="" />
|
|
</div>
|
|
<div class="w-[2%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[1%] flex"></div>
|
|
<div class="w-full h-[12%] flex justify-start items-center flex-wrap">
|
|
<div class="w-[5%] h-full"></div>
|
|
<h2
|
|
style="
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['Lobby_Name']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[1%] flex"></div>
|
|
<div class="w-full h-[14%] flex items-center justify-center">
|
|
<div class="w-[90%] h-full flex flex-wrap">
|
|
<div class="w-full h-full">
|
|
<input
|
|
type="search"
|
|
class="w-full h-full flex pl-3"
|
|
v-model="garbageJobStartStep.lobbyname"
|
|
:placeholder=this.locales['Type_the_name']
|
|
style="
|
|
background: rgba(0, 0, 0, 0.24);
|
|
outline: none;
|
|
font-size: 0.625vw;
|
|
font-family: Gilroy-Medium;
|
|
font-weight: 400;
|
|
border: none;
|
|
border-radius: 0.3125vw;
|
|
color: rgba(255, 255, 255, 0.16);
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2%] flex"></div>
|
|
<div class="w-full h-[12%] flex justify-start items-center flex-wrap">
|
|
<div class="w-[5%] h-full"></div>
|
|
<h2
|
|
style="
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['Lobby_Password']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[1%] flex"></div>
|
|
<div class="w-full h-[14%] flex items-center justify-center">
|
|
<div class="w-[90%] h-full flex flex-wrap">
|
|
<div class="w-full h-full">
|
|
<input
|
|
type="search"
|
|
class="w-full h-full flex pl-3"
|
|
v-model="garbageJobStartStep.lobbypassword"
|
|
:placeholder= this.locales['Type_the_password']
|
|
style="
|
|
background: rgba(0, 0, 0, 0.24);
|
|
outline: none;
|
|
font-size: 0.625vw;
|
|
font-family: Gilroy-Medium;
|
|
font-weight: 400;
|
|
border: none;
|
|
border-radius: 0.3125vw;
|
|
color: rgba(255, 255, 255, 0.16);
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[4%] flex"></div>
|
|
<div class="w-full h-[13%] flex items-center justify-center">
|
|
<div class="w-[90%] h-full flex items-center justify-center">
|
|
<div
|
|
class="w-full h-full flex items-center justify-center"
|
|
@click="createLobby"
|
|
style="background: #e5b440; border-radius: 0.3125vw"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['CREATE']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[7%] flex items-center flex-wrap">
|
|
<div class="w-[5%] h-full"></div>
|
|
<h2
|
|
style="
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.625vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['LIE']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[1%] flex"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full h-[5%] flex items-center">
|
|
<div class="w-[77%] h-full">
|
|
<input
|
|
type="search"
|
|
class="w-full h-full flex pl-3"
|
|
v-model="searchbarValue"
|
|
:placeholder=this.locales['Search_lobbies']
|
|
style="
|
|
background: rgba(0, 0, 0, 0.32);
|
|
outline: none;
|
|
color: white;
|
|
font-family: Gilroy-Black;
|
|
border: none;
|
|
border-radius: 0.5208vw;
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="w-[23%] h-full flex items-center justify-center">
|
|
<div
|
|
class="w-[80%] h-full flex items-center justify-center"
|
|
style="
|
|
border-radius: 0.5208vw;
|
|
background: linear-gradient(92deg, #52b569 0.62%, #2f643b 100.72%);
|
|
box-shadow: 0px 4px 35.5px 0px rgba(82, 181, 105, 0.09);
|
|
border: 2px solid rgba(0, 0, 0, 0.13);
|
|
"
|
|
>
|
|
<div
|
|
@click="passwordModal(true)"
|
|
class="w-full h-full flex items-center justify-center cursor-pointer"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Black;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['Create_New_Lobby']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2%]"></div>
|
|
<div class="w-full h-[95%] flex flex-wrap content-start">
|
|
<div
|
|
v-for="(data, index) in filterByTermCoopData"
|
|
:key="index"
|
|
class="w-[19.2%] h-[25.5%] flex items-center flex-col content-start ml-2 mt-2"
|
|
style="
|
|
border-radius: 0.5vw;
|
|
overflow: hidden;
|
|
background-image: url(./images/lobbybg.png);
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div class="w-full h-[6%]"></div>
|
|
<div class="w-[80%] h-[10%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.625vw;
|
|
text-shadow: 0px 0.1908vw 0.9063vw #000;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{data.roomData.roomName}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[6%]"></div>
|
|
<div class="w-full h-[20%] flex justify-center">
|
|
<div class="w-[60%] h-full flex flex-col">
|
|
<div class="w-full h-[5%]"></div>
|
|
<div class="w-full h-[45%] flex justify-center items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7632vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{data.roomData.areaName}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-[3%]"></div>
|
|
<div class="w-full h-[45%] flex justify-center items-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7632vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-[2%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[32%]"></div>
|
|
<div class="w-full h-[16%] flex justify-center">
|
|
<div
|
|
class="w-[50%] h-[90%] flex items-center cursor-pointer"
|
|
@click="joinLobby(data)"
|
|
style="
|
|
background: #52b569;
|
|
border-radius: 0.2385vw;
|
|
box-shadow: 0px 3.66333px 47.62325px 0px rgba(0, 0, 0, 0.25);
|
|
"
|
|
>
|
|
<div class="w-[38%] h-full flex">
|
|
<div class="w-[20%] h-full"></div>
|
|
<div class="w-[40%] h-full flex items-center justify-center">
|
|
<img v-if="data.roomData.password.length > 0" src="./images/lockedicon.png" alt="" />
|
|
<img v-else src="./images/lockopenicon.png" alt="" />
|
|
</div>
|
|
<div class="w-[20%] h-full"></div>
|
|
</div>
|
|
<div class="w-[2%] h-full flex items-center justify-center">
|
|
<div class="w-[4%] h-[80%]" style="background: rgba(255, 255, 255, 0.39)"></div>
|
|
</div>
|
|
<div class="w-[58%] h-full flex items-center justify-center">
|
|
<p
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.6678vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['JOIN']}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[10%]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="newCoopPageValue === 'lobby'" class="w-full h-[98%] flex flex-wrap content-start relative">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
|
|
<div class="w-full h-[5%] flex items-center">
|
|
<div class="w-[77%] h-full flex items-center">
|
|
<!-- <div v-if="myteam.length >0" class="w-[80%] h-full flex items-center"> -->
|
|
<div class="w-[80%] h-full flex items-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Black;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{roomDataSettingText(myteam)}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[23%] h-full flex items-center justify-center">
|
|
<div
|
|
class="w-[80%] h-[80%] mt-1 flex items-center justify-center"
|
|
style="
|
|
border-radius: 0.5208vw;
|
|
background: linear-gradient(92deg, #b55252 0.62%, #642f2f 100.72%);
|
|
box-shadow: 0px 4px 35.5px 0px rgba(255, 138, 138, 0.09);
|
|
border: 2px solid rgba(0, 0, 0, 0.13);
|
|
"
|
|
>
|
|
<div
|
|
@click="leaveanddeletelobbie"
|
|
class="w-full h-full flex items-center justify-center cursor-pointer"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Black;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{deleteLobiText(myteam)}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div
|
|
class="w-[97.8%] h-[63%] flex justify-center rounded-[.5208vw] flex-wrap content-start"
|
|
style="background: rgba(0, 0, 0, 0.32)"
|
|
>
|
|
<div class="w-full h-[4%]"></div>
|
|
<div class="w-full h-[4%] flex justify-center relative">
|
|
<div class="w-[95%] h-full flex items-center justify-between">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Black;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['Lobby']}}
|
|
</h2>
|
|
<h2
|
|
class="cursor-pointer"
|
|
@click="showPassword = !showPassword"
|
|
style="
|
|
color: #52b569;
|
|
font-family: Gilroy-Black;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{showPassword ? getMyTeamPassword() : this.locales['Show_Password']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[3.5%]"></div>
|
|
<div v-if="myteam && myteam.length > 0" class="w-full h-[75%] flex items-center content-start flex-col">
|
|
<div
|
|
v-for="data in myteam"
|
|
class="w-[95%] h-[21.4%] flex items-center justify-start mt-[1vh]"
|
|
style="border-radius: 10px; background: rgba(217, 217, 217, 0.07)"
|
|
>
|
|
<div class="w-[1%] h-full"></div>
|
|
<div class="w-[7%] h-[75%]">
|
|
<div
|
|
class="w-full h-[100%] flex items-center justify-center rounded-full"
|
|
style="border: 2px solid #2c683a"
|
|
>
|
|
<img class="h-[99.9%] rounded-full" :src="data.avatar" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-[2%] h-full"></div>
|
|
<div class="w-[30%] h-full flex items-center flex-col content-start">
|
|
<div class="w-full h-[20%]"></div>
|
|
<div class="w-full h-[35%] flex justify-start items-center">
|
|
<h2
|
|
class="ml-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.0417vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{data.name}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[18%] flex justify-start items-center">
|
|
<h2
|
|
class="ml-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.6771vw;
|
|
opacity: 0.5;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{data.level}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[27%]"></div>
|
|
</div>
|
|
<div class="w-[52%] h-full"></div>
|
|
<div class="w-[8%] h-full flex items-center justify-start">
|
|
<h2
|
|
class="ml-[.2083vw]"
|
|
style="
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.0417vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{getTextLobby(data.host)}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[2%] h-full"></div>
|
|
<div
|
|
v-if="isHostPresent() && !data.host"
|
|
class="w-[11%] h-full flex items-center justify-center cursor-pointer"
|
|
@click="kickPlayer(data)"
|
|
style="background: rgba(255, 99, 99, 0.29); border-radius: 0.5208vw"
|
|
>
|
|
<div class="w-[47%] h-[5%] flex bg-[#D9D9D9]" style="border-radius: 0.2083vw"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[4%] flex"></div>
|
|
<div class="w-full h-[4%] flex items-center justify-center">
|
|
<p
|
|
style="
|
|
color: rgba(255, 255, 255, 0.57);
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{myteam.length}}/4
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-[6%] flex"></div>
|
|
<div class="w-full h-[5.2%] flex"></div>
|
|
<div v-if="isHostPresent()" class="w-full h-[33%] flex flex-wrap">
|
|
<div
|
|
class="w-[70%] h-full flex flex-wrap items-center"
|
|
style="background-image: url(./images/bgside2.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[2.2%] h-full"></div>
|
|
<div
|
|
class="w-[21%] h-[79.8%]"
|
|
style="
|
|
background-image: url(./images/southsideareabg.png);
|
|
border-radius: 0.5208vw;
|
|
background-size: 100% 100%;
|
|
border: 1px solid #52b569;
|
|
"
|
|
>
|
|
<div class="w-full h-[80%]"></div>
|
|
<div class="w-full h-[13%] flex items-center justify-center">
|
|
<div class="w-[80%] h-full flex"></div>
|
|
<div class="w-[15%] h-full flex items-center justify-center">
|
|
<div
|
|
class="w-[85%] h-[90%] flex items-center justify-center cursor-pointer"
|
|
@click="openChangeAreaPage('changearea')"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="16"
|
|
viewBox="0 0 18 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M0 2.75C0 1.23122 1.23122 0 2.75 0C4.26878 0 5.5 1.23122 5.5 2.75C5.5 4.26878 4.26878 5.5 2.75 5.5C1.23122 5.5 0 4.26878 0 2.75Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M8 2.75C8 2.33579 8.33579 2 8.75 2L16.75 2C17.1642 2 17.5 2.33579 17.5 2.75C17.5 3.16421 17.1642 3.5 16.75 3.5L8.75 3.5C8.33579 3.5 8 3.16421 8 2.75Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M14.75 10C13.2312 10 12 11.2312 12 12.75C12 14.2688 13.2312 15.5 14.75 15.5C16.2688 15.5 17.5 14.2688 17.5 12.75C17.5 11.2312 16.2688 10 14.75 10Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M0 12.75C0 12.3358 0.335787 12 0.75 12L8.75 12C9.16421 12 9.5 12.3358 9.5 12.75C9.5 13.1642 9.16421 13.5 8.75 13.5L0.75 13.5C0.335786 13.5 0 13.1642 0 12.75Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="w-[5%] h-full flex"></div>
|
|
</div>
|
|
<div class="w-full h-[7%]"></div>
|
|
</div>
|
|
<div class="w-[4%] h-full flex"></div>
|
|
<div class="w-[29%] h-full flex items-center justify-center">
|
|
<div class="w-full h-[45%] flex flex-col">
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[35%] flex items-center ml-[.2083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{coopPageRouteData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[32%] flex items-center ml-[.3083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[13%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[10%] h-full"></div>
|
|
<div class="w-[33.8%] h-full flex flex-col content-start">
|
|
<div class="w-full h-[18%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{coopPageRouteData.stopCount}} {{this.locales['Stops']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/passenger.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[4%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
$ {{coopPageRouteData.Profit.toLocaleString()}} - {{(coopPageRouteData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/moneyicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[5%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
Lv.{{coopPageRouteData.level}} {{this.locales['Req']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[90%]" src="./images/timeicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[19%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[2.4%] h-full"></div>
|
|
<div class="w-[27.6%] h-full flex flex-col">
|
|
<div
|
|
class="w-full h-[55%] flex items-center justify-center"
|
|
style="background-image: url(./images/2xexpbg.png); background-size: 100% 100%"
|
|
>
|
|
<p
|
|
style="
|
|
color: #e5b440;
|
|
text-shadow: 0px 0px 52.081520080566406px rgba(255, 255, 255, 0.45);
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
line-height: 99.5%;
|
|
filter: drop-shadow(0px 0px 52.081520080566406px rgba(255, 255, 255, 0.45));
|
|
"
|
|
>
|
|
{{this.locales['2xEXP']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-[5%]"></div>
|
|
<div
|
|
class="w-full h-[39%] flex items-center justify-center cursor-pointer"
|
|
@click="startJobMultiplayer"
|
|
style="
|
|
border-radius: 0.3333vw;
|
|
border: 0.0833vw solid #52b569;
|
|
background: linear-gradient(90deg, rgba(82, 181, 105, 0.1) 0%, rgba(82, 181, 105, 0.1) 96%);
|
|
box-shadow: 0px 0px 30.4px 4.8px rgba(82, 181, 105, 0.06);
|
|
"
|
|
>
|
|
<p
|
|
style="
|
|
color: #52b569;
|
|
text-shadow: 0px 0px 52.081520080566406px rgba(255, 255, 255, 0.45);
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
line-height: 99.5%;
|
|
filter: drop-shadow(0px 0px 52.081520080566406px rgba(255, 255, 255, 0.45));
|
|
"
|
|
>
|
|
{{this.locales['startjob']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-[1%]"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="w-full h-[33%] flex flex-wrap"
|
|
style="background-image: url(./images/bgside.png); background-size: 100% 100%"
|
|
>
|
|
<div
|
|
class="w-full h-full flex flex-wrap items-center"
|
|
style="
|
|
border-radius: 10px;
|
|
background: radial-gradient(
|
|
177.89% 136.63% at 50% 50%,
|
|
rgba(0, 0, 0, 0.04) 0%,
|
|
rgba(82, 181, 105, 0.32) 100%
|
|
);
|
|
"
|
|
>
|
|
<div class="w-[1.6%] h-full"></div>
|
|
<div
|
|
class="w-[14.4%] h-[79.8%]"
|
|
style="
|
|
background-image: url(./images/southsideareabg.png);
|
|
border-radius: 0.5208vw;
|
|
background-size: 100% 100%;
|
|
border: 1px solid #52b569;
|
|
"
|
|
>
|
|
<div class="w-full h-[80%]"></div>
|
|
<div class="w-full h-[13%] flex items-center justify-center">
|
|
<div class="w-[80%] h-full flex"></div>
|
|
<div class="w-[15%] h-full flex items-center justify-center"></div>
|
|
<div class="w-[5%] h-full flex"></div>
|
|
</div>
|
|
<div class="w-full h-[7%]"></div>
|
|
</div>
|
|
<div class="w-[3%] h-full flex"></div>
|
|
<div class="w-[22%] h-full flex items-center justify-center">
|
|
<div class="w-full h-[45%] flex flex-col">
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[35%] flex items-center ml-[.2083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{coopPageRouteData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[32%] flex items-center ml-[.3083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[13%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[30%] h-full flex items-center justify-center"></div>
|
|
<div class="w-[5%] h-full flex"></div>
|
|
<div class="w-[24%] h-full flex flex-col content-start">
|
|
<div class="w-full h-[18%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{coopPageRouteData.stopCount}} {{this.locales['Stops']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/passenger.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[4%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
$ {{coopPageRouteData.Profit.toLocaleString()}} - {{(coopPageRouteData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/moneyicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[5%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
Lv.{{coopPageRouteData.level}} {{this.locales['Req']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[90%]" src="./images/timeicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[19%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-[97.8%] h-[63%] flex justify-center rounded-[.5208vw] mt-[2vh] flex-wrap content-start"
|
|
v-if="newCoopPageValue === 'changearea'"
|
|
style="background: rgba(0, 0, 0, 0.32)"
|
|
>
|
|
<div class="w-full h-[4%]"></div>
|
|
|
|
<div class="w-full h-[4.1%] flex items-center">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[11%] h-full flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['SAA']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[79%] h-full"></div>
|
|
<div class="w-[8.5%] h-full flex items-center justify-center cursor-pointer">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7292vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
@click="openChangeAreaPage('lobby')"
|
|
>
|
|
{{this.locales['Back']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[3.5%]"></div>
|
|
<div class="w-full h-[89%] flex items-center content-start flex-col">
|
|
<div class="w-full h-full flex flex-wrap content-start">
|
|
<div
|
|
v-for="(data,index) in routes"
|
|
:key="index"
|
|
class="w-[14.2%] h-[42.5%] flex items-center flex-col content-start ml-[.9896vw]"
|
|
@click="selectRouteCoopPage(data)"
|
|
style="border-radius: 0.5vw; overflow: hidden"
|
|
>
|
|
<div
|
|
class="w-full h-[68%]"
|
|
style="
|
|
border-radius: 0.5vw;
|
|
background-image: url(./images/southsideareabg.png);
|
|
background-size: 100% 100%;
|
|
"
|
|
></div>
|
|
<div class="w-full h-[32%] flex items-center flex-col content-start">
|
|
<div class="w-full h-[25%]"></div>
|
|
<div class="w-[90%] h-[75%] flex content-start flex-col">
|
|
<div class="w-full h-[55%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.0417vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[45%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.0417vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[5.2%] flex"></div>
|
|
<div
|
|
v-if="coopPageRouteData"
|
|
class="w-full h-[33%] flex flex-wrap"
|
|
style="background-image: url(./images/bgside.png); background-size: 100% 100%"
|
|
>
|
|
<div
|
|
class="w-full h-full flex flex-wrap items-center"
|
|
style="
|
|
border-radius: 10px;
|
|
background: radial-gradient(
|
|
177.89% 136.63% at 50% 50%,
|
|
rgba(0, 0, 0, 0.04) 0%,
|
|
rgba(82, 181, 105, 0.32) 100%
|
|
);
|
|
"
|
|
>
|
|
<div class="w-[1.6%] h-full"></div>
|
|
<div
|
|
class="w-[14.4%] h-[79.8%]"
|
|
style="
|
|
background-image: url(./images/southsideareabg.png);
|
|
border-radius: 0.5208vw;
|
|
background-size: 100% 100%;
|
|
border: 1px solid #52b569;
|
|
"
|
|
>
|
|
<div class="w-full h-[80%]"></div>
|
|
<div class="w-full h-[13%] flex items-center justify-center">
|
|
<div class="w-[80%] h-full flex"></div>
|
|
<div class="w-[15%] h-full flex items-center justify-center"></div>
|
|
<div class="w-[5%] h-full flex"></div>
|
|
</div>
|
|
<div class="w-full h-[7%]"></div>
|
|
</div>
|
|
<div class="w-[3%] h-full flex"></div>
|
|
<div class="w-[22%] h-full flex items-center justify-center">
|
|
<div class="w-full h-[45%] flex flex-col">
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[35%] flex items-center ml-[.2083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{coopPageRouteData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[10%]"></div>
|
|
<div class="w-full h-[32%] flex items-center ml-[.3083vw]">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.6667vw;
|
|
font-weight: 400;
|
|
background: linear-gradient(90deg, #2c683a 0%, #ffe4a5 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['area']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[13%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[30%] h-full flex items-center justify-center"></div>
|
|
<div class="w-[5%] h-full flex"></div>
|
|
<div class="w-[24%] h-full flex flex-col content-start">
|
|
<div class="w-full h-[18%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{coopPageRouteData.stopCount}} {{this.locales['Stops']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/passenger.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[4%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
$ {{coopPageRouteData.Profit.toLocaleString()}} - {{(coopPageRouteData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[99%]" src="./images/moneyicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[5%]"></div>
|
|
<div class="w-full h-[18%] flex flex-wrap">
|
|
<div class="w-[70%] h-full flex justify-end items-center">
|
|
<p
|
|
class="mr-[.2083vw]"
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8333vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
Lv.{{coopPageRouteData.level}} {{this.locales['Req']}}
|
|
</p>
|
|
</div>
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[14%] h-full flex items-center justify-center">
|
|
<img class="h-[90%]" src="./images/timeicon.png" />
|
|
</div>
|
|
<div class="w-[13%] h-full"></div>
|
|
</div>
|
|
<div class="w-full h-[19%]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/swiper@5.3.8/js/swiper.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<script src="./js/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|