2962 lines
359 KiB
HTML
2962 lines
359 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>hud</title>
|
||
|
|
<link rel="stylesheet" href="../assets/css/app.css">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/line-awesome/dist/line-awesome/css/line-awesome.min.css">
|
||
|
|
<!--COLOR PICKER-->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
|
||
|
|
<script src="https://unpkg.com/vue-color@2.8.0/dist/vue-color.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
|
||
|
|
<!--COLOR PICKER-->
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<div id="app" v-if="!forceHide" :style="hudMenu ? backgroundImageStyle : null">
|
||
|
|
<div class="map-theme" v-if="hudMenu">
|
||
|
|
<div class="sets" :style="{
|
||
|
|
top: hud.map.type === 'squared' ? '5rem' : '1rem', left: '5.5rem',
|
||
|
|
transition: 'top 200ms ease-in-out, left 200ms ease-in-out'
|
||
|
|
}">
|
||
|
|
<p @click="typeMap('rounded')">AFRUNDET</p>
|
||
|
|
<h1 @click="typeMap('squared')">FIRTKANTET</h1>
|
||
|
|
<div class="selection">
|
||
|
|
<svg width="7.9rem" height="3rem" viewBox="0 0 121 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="121px" height="40px" rx="11" fill="url(#paint0_radial_534_1912)" fill-opacity="0.08" />
|
||
|
|
<rect v-if="this.hud.map.type=='rounded'" x="5" y="7.5" width="54" height="26" rx="6"
|
||
|
|
fill="url(#paint1_radial_534_1912)" fill-opacity="0.25" />
|
||
|
|
<rect v-if="this.hud.map.type=='squared'" x="63.3" y="7.5" width="54" height="26" rx="6"
|
||
|
|
fill="url(#paint2_radial_534_1912)" fill-opacity="0.25" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_534_1912" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(60.5 20) rotate(8.76764) scale(153.797 41.148)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_534_1912" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(33 20) rotate(12.6604) scale(69.5251 26.4044)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_534_1912" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(90 20) rotate(12.6604) scale(69.5251 26.4044)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div :style="{ top: hud.map.type == 'rounded' ? '-7rem' : '-8rem' }" class="color"
|
||
|
|
v-if="hudMenu && hud.map.drag != true" @click="hud.map.picker=!hud.map.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="this.hud.map.type == 'squared' " style="scale: 0.91; position: absolute;left: -34px;">
|
||
|
|
<svg ref="targetElement" width="21.813rem" height="15.25rem" viewBox="0 0 349 244" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M327 229L327 237C327 239.761 324.761 242 322 242L27 242C24.2386 242 22 239.761 22 237L22 229L327 229Z"
|
||
|
|
fill="url(#paint0_linear_3044_11432)" fill-opacity="0.25" />
|
||
|
|
<g filter="url(#filter0_d_3044_11432)">
|
||
|
|
<path
|
||
|
|
d="M327 15L327 7.00006C327 4.23864 324.761 2.00006 322 2.00006L27 2C24.2386 2 22 4.23858 22 7L22 14.9999L327 15Z"
|
||
|
|
fill="url(#paint1_linear_3044_11432)" fill-opacity="0.25" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path d="M335 6.35294L349 0V6.64706L335 13V6.35294Z" fill="url(#paint2_radial_3044_11432)" />
|
||
|
|
<path d="M335 27.3529L349 21V27.6471L335 34V27.3529Z" fill="url(#paint3_radial_3044_11432)" />
|
||
|
|
<path d="M335 48.3529L349 42V48.6471L335 55V48.3529Z" fill="url(#paint4_radial_3044_11432)" />
|
||
|
|
<path d="M335 69.3529L349 63V69.6471L335 76V69.3529Z" fill="url(#paint5_radial_3044_11432)" />
|
||
|
|
<path d="M335 90.3529L349 84V90.6471L335 97V90.3529Z" fill="url(#paint6_radial_3044_11432)" />
|
||
|
|
<path d="M335 111.353L349 105V111.647L335 118V111.353Z" fill="url(#paint7_radial_3044_11432)" />
|
||
|
|
<path d="M335 132.353L349 126V132.647L335 139V132.353Z" fill="url(#paint8_radial_3044_11432)" />
|
||
|
|
<path d="M335 153.353L349 147V153.647L335 160V153.353Z" fill="url(#paint9_radial_3044_11432)" />
|
||
|
|
<path d="M335 174.353L349 168V174.647L335 181V174.353Z" fill="url(#paint10_radial_3044_11432)" />
|
||
|
|
<path d="M335 195.353L349 189V195.647L335 202V195.353Z" fill="url(#paint11_radial_3044_11432)" />
|
||
|
|
<path d="M335 216.353L349 210V216.647L335 223V216.353Z" fill="url(#paint12_radial_3044_11432)" />
|
||
|
|
<path d="M335 237.353L349 231V237.647L335 244V237.353Z" fill="url(#paint13_radial_3044_11432)" />
|
||
|
|
<path d="M0 6.35294L14 0V6.64706L0 13V6.35294Z" fill="url(#paint14_radial_3044_11432)" />
|
||
|
|
<path d="M0 27.3529L14 21V27.6471L0 34V27.3529Z" fill="url(#paint15_radial_3044_11432)" />
|
||
|
|
<path d="M0 48.3529L14 42V48.6471L0 55V48.3529Z" fill="url(#paint16_radial_3044_11432)" />
|
||
|
|
<path d="M0 69.3529L14 63V69.6471L0 76V69.3529Z" fill="url(#paint17_radial_3044_11432)" />
|
||
|
|
<path d="M0 90.3529L14 84V90.6471L0 97V90.3529Z" fill="url(#paint18_radial_3044_11432)" />
|
||
|
|
<path d="M0 111.353L14 105V111.647L0 118V111.353Z" fill="url(#paint19_radial_3044_11432)" />
|
||
|
|
<path d="M0 132.353L14 126V132.647L0 139V132.353Z" fill="url(#paint20_radial_3044_11432)" />
|
||
|
|
<path d="M0 153.353L14 147V153.647L0 160V153.353Z" fill="url(#paint21_radial_3044_11432)" />
|
||
|
|
<path d="M0 174.353L14 168V174.647L0 181V174.353Z" fill="url(#paint22_radial_3044_11432)" />
|
||
|
|
<path d="M0 195.353L14 189V195.647L0 202V195.353Z" fill="url(#paint23_radial_3044_11432)" />
|
||
|
|
<path d="M0 216.353L14 210V216.647L0 223V216.353Z" fill="url(#paint24_radial_3044_11432)" />
|
||
|
|
<path d="M0 237.353L14 231V237.647L0 244V237.353Z" fill="url(#paint25_radial_3044_11432)" />
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_3044_11432" x="18" y="2" width="313" height="21" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset dy="4" />
|
||
|
|
<feGaussianBlur stdDeviation="2" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_11432" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_11432" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_3044_11432" x1="312.158" y1="235.273" x2="62.8149" y2="235.273"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint1_linear_3044_11432" x1="312.158" y1="8.72746" x2="62.8149" y2="8.7274"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<radialGradient id="paint2_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint5_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint6_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint7_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint8_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint9_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint10_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint11_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint12_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint13_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint14_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint15_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint16_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint17_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint18_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint19_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint20_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint21_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint22_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint23_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint24_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint25_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>-->
|
||
|
|
|
||
|
|
<div v-if="hud.map.picker" style="position: absolute; top:4rem; left:-2.4rem">
|
||
|
|
<input type="color" @input="updateColor('map', $event.target.value)" @blur="hud.map.picker=false"
|
||
|
|
:value="hud.map.color" :style="{ position: 'absolute', border: 'none', outline: 'none', background: 'none', width: '1.5rem', height: '1.5rem', cursor: 'pointer',
|
||
|
|
top: hud.map.type === 'rounded' ? '-10.5rem' : (hud.map.type === 'squared' ? '-11.7rem' : '6rem'),
|
||
|
|
left: hud.map.type === 'squared' ? '6.5rem' : '6.5rem'
|
||
|
|
}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="notification">
|
||
|
|
<div class="border" v-for="data in notifications">
|
||
|
|
<h1>{{data.header}} <span style="color:gray; font-size:0.7rem"> | {{data.time}}</span></h1>
|
||
|
|
<p>{{data.description}}</p>
|
||
|
|
<svg v-if="data.type=='warning'" width="18.75rem" height="5.875rem" viewBox="0 0 300 94" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g clip-path="url(#clip0_2855_12326)">
|
||
|
|
<rect width="300" height="94" rx="10" fill="black" fill-opacity="0.65"></rect>
|
||
|
|
<g filter="url(#filter0_d_2855_12326)">
|
||
|
|
<rect x="5" y="27" width="2" height="40" fill="#FFA337" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M290 16C290 19.3137 287.314 22 284 22C280.686 22 278 19.3137 278 16C278 12.6863 280.686 10 284 10C287.314 10 290 12.6863 290 16ZM279.6 16C279.6 18.4299 281.57 20.3998 284 20.3998C286.43 20.3998 288.4 18.4299 288.4 16C288.4 13.5701 286.43 11.6002 284 11.6002C281.57 11.6002 279.6 13.5701 279.6 16Z"
|
||
|
|
fill="white" fill-opacity="0.19" />
|
||
|
|
<path class="anim"
|
||
|
|
d="M289.2 16C289.2 16.6829 289.065 17.3591 288.804 17.99C288.543 18.6208 288.16 19.1941 287.677 19.677C287.194 20.1598 286.621 20.5428 285.99 20.8042C285.359 21.0655 284.683 21.2 284 21.2C283.317 21.2 282.641 21.0655 282.01 20.8042C281.379 20.5428 280.806 20.1598 280.323 19.677C279.84 19.1941 279.457 18.6208 279.196 17.99C278.935 17.3591 278.8 16.6829 278.8 16C278.8 15.3171 278.935 14.6409 279.196 14.01C279.457 13.3792 279.84 12.8059 280.323 12.323C280.806 11.8402 281.379 11.4572 282.01 11.1958C282.641 10.9345 283.317 10.8 284 10.8C284.683 10.8 285.359 10.9345 285.99 11.1958C286.621 11.4572 287.194 11.8402 287.677 12.323C288.16 12.8059 288.543 13.3792 288.804 14.01C289.065 14.6409 289.2 15.3171 289.2 16L289.2 16Z"
|
||
|
|
stroke="white" stroke-width="1.6" />
|
||
|
|
<g filter="url(#filter1_d_2855_12326)">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M29.7798 27.0509C28.9518 27.2412 28.1938 27.7406 27.7283 28.4024C27.4812 28.7537 19.5118 42.6457 19.3078 43.0806C19.0673 43.5934 18.9986 43.9178 19 44.5347C19.001 44.9565 19.0235 45.1574 19.1008 45.4316C19.4674 46.7313 20.4503 47.6621 21.7396 47.9302C22.0342 47.9915 23.0881 48 30.4622 48C39.5445 48 39.184 48.0093 39.8017 47.7581C40.2579 47.5725 40.5719 47.3605 40.9531 46.9808C41.5291 46.4069 41.847 45.7715 41.9651 44.9579C42.0606 44.3003 41.9612 43.691 41.6521 43.0399C41.4563 42.6275 33.709 29.095 33.3588 28.5538C32.913 27.8646 32.1444 27.2997 31.3677 27.0901C30.9949 26.9895 30.1389 26.9684 29.7798 27.0509ZM30.9955 33.2682C31.408 33.4519 31.6728 33.8082 31.7467 34.2792C31.7706 34.4312 31.7386 35.2573 31.6552 36.6473C31.5846 37.8214 31.5087 39.2055 31.4864 39.7232C31.4493 40.5863 31.4369 40.6822 31.3369 40.8779C31.1811 41.1827 30.9232 41.3528 30.5792 41.3779C30.112 41.4119 29.7766 41.219 29.6097 40.8203C29.5359 40.6441 29.5017 40.1464 29.203 34.9086C29.168 34.2939 29.2338 33.9895 29.4694 33.6777C29.625 33.4715 30.0145 33.2071 30.2144 33.1718C30.4294 33.1339 30.7954 33.179 30.9955 33.2682ZM31.0571 42.4512C31.7824 42.8085 31.9758 43.8149 31.4375 44.4307C30.6618 45.318 29.2253 44.7665 29.2253 43.5814C29.2253 42.6246 30.1949 42.0264 31.0571 42.4512Z"
|
||
|
|
fill="#FFA337" />
|
||
|
|
</g>
|
||
|
|
<rect x="6.5" y="6.5" width="287" height="81" rx="7.5" stroke="url(#paint0_linear_2855_12326)"
|
||
|
|
stroke-opacity="0.15" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_2855_12326" x="-9" y="13" width="30" height="68" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="7" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.639216 0 0 0 0 0.215686 0 0 0 0.55 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12326" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12326" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_2855_12326" x="6" y="14" width="49" height="47" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="6.5" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.639216 0 0 0 0 0.215686 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12326" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12326" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_2855_12326" x1="6" y1="47" x2="294" y2="47" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
<clipPath id="clip0_2855_12326">
|
||
|
|
<rect width="300" height="94" rx="10" fill="white" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<svg v-if="data.type=='error'" width="18.75rem" height="5.875rem" viewBox="0 0 300 94" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g clip-path="url(#clip0_2855_12316)">
|
||
|
|
<rect width="300" height="94" rx="10" fill="black" fill-opacity="0.65" />
|
||
|
|
<g filter="url(#filter0_d_2855_12316)">
|
||
|
|
<rect x="5" y="27" width="2" height="40" fill="#FF3737" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M290 16C290 19.3137 287.314 22 284 22C280.686 22 278 19.3137 278 16C278 12.6863 280.686 10 284 10C287.314 10 290 12.6863 290 16ZM279.6 16C279.6 18.4299 281.57 20.3998 284 20.3998C286.43 20.3998 288.4 18.4299 288.4 16C288.4 13.5701 286.43 11.6002 284 11.6002C281.57 11.6002 279.6 13.5701 279.6 16Z"
|
||
|
|
fill="white" fill-opacity="0.19" />
|
||
|
|
<path class="anim"
|
||
|
|
d="M289.2 16C289.2 16.6829 289.065 17.3591 288.804 17.99C288.543 18.6208 288.16 19.1941 287.677 19.677C287.194 20.1598 286.621 20.5428 285.99 20.8042C285.359 21.0655 284.683 21.2 284 21.2C283.317 21.2 282.641 21.0655 282.01 20.8042C281.379 20.5428 280.806 20.1598 280.323 19.677C279.84 19.1941 279.457 18.6208 279.196 17.99C278.935 17.3591 278.8 16.6829 278.8 16C278.8 15.3171 278.935 14.6409 279.196 14.01C279.457 13.3792 279.84 12.8059 280.323 12.323C280.806 11.8402 281.379 11.4572 282.01 11.1958C282.641 10.9345 283.317 10.8 284 10.8C284.683 10.8 285.359 10.9345 285.99 11.1958C286.621 11.4572 287.194 11.8402 287.677 12.323C288.16 12.8059 288.543 13.3792 288.804 14.01C289.065 14.6409 289.2 15.3171 289.2 16L289.2 16Z"
|
||
|
|
stroke="white" stroke-width="1.6" />
|
||
|
|
<rect x="6.5" y="6.5" width="287" height="81" rx="7.5" stroke="url(#paint0_linear_2855_12316)"
|
||
|
|
stroke-opacity="0.15" />
|
||
|
|
<g filter="url(#filter1_d_2855_12316)">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M29.6825 25.0495C25.9829 25.5134 22.7571 27.7998 21.1263 31.114C20.64 32.1024 20.3236 33.0744 20.1171 34.2142C20.0043 34.837 19.9614 36.4951 20.0403 37.1893C20.6171 42.2718 24.5509 46.2689 29.6205 46.9238C30.3179 47.0139 31.5322 47.0261 32.2149 46.9498C36.0125 46.5255 39.3452 44.1375 40.9823 40.6675C41.7215 39.1009 42.0513 37.454 41.9936 35.6176C41.9542 34.3644 41.7662 33.3618 41.3606 32.2416C39.9596 28.372 36.5212 25.6199 32.3958 25.066C31.7995 24.9859 30.2641 24.9766 29.6825 25.0495ZM31.7202 27.2144C34.4593 27.4568 36.8187 28.8518 38.346 31.1321C40.3115 34.0666 40.302 37.927 38.3218 40.8959C36.3353 43.8742 32.7113 45.3578 29.2088 44.6266C24.4523 43.6335 21.3778 38.9495 22.3686 34.2057C23.013 31.1208 25.2572 28.6104 28.2487 27.6283C29.4378 27.2379 30.5234 27.1085 31.7202 27.2144ZM28.0803 32.1443C28.0519 32.1552 27.9641 32.1785 27.8852 32.1959C27.7094 32.2347 27.3537 32.5483 27.2413 32.7636C27.1252 32.9861 27.129 33.4946 27.2485 33.7234C27.3005 33.8228 27.8105 34.3751 28.3818 34.9505L29.4208 35.9968L28.3818 37.0432C27.8105 37.6186 27.306 38.1626 27.2609 38.252C27.046 38.6775 27.1133 39.1304 27.4447 39.4899C27.7867 39.8608 28.2976 39.9546 28.7522 39.73C28.8375 39.6879 29.3782 39.186 29.9538 38.6148L31.0004 37.5761L32.0469 38.6148C32.6225 39.186 33.1633 39.6879 33.2485 39.73C33.7031 39.9546 34.2141 39.8608 34.556 39.4899C34.8875 39.1304 34.9547 38.6775 34.7398 38.252C34.6947 38.1626 34.1903 37.6186 33.6189 37.0432L32.58 35.9968L33.6189 34.9505C34.8693 33.6912 34.9566 33.5489 34.8221 32.9886C34.6572 32.3012 33.8822 31.9425 33.2504 32.2612C33.1641 32.3047 32.6225 32.8077 32.0469 33.3789L31.0004 34.4176L29.9538 33.3789C29.3782 32.8077 28.8321 32.3023 28.7402 32.2559C28.575 32.1725 28.1803 32.1057 28.0803 32.1443Z"
|
||
|
|
fill="#FF3737" />
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_2855_12316" x="-9" y="13" width="30" height="68" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="7" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0 0.215686 0 0 0 0.55 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12316" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12316" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_2855_12316" x="7" y="12" width="48" height="48" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="6.5" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0 0.215686 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12316" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12316" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_2855_12316" x1="6" y1="47" x2="294" y2="47" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
<clipPath id="clip0_2855_12316">
|
||
|
|
<rect width="300" height="94" rx="10" fill="white" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<svg v-if="data.type=='success'" width="18.75rem" height="5.875rem" viewBox="0 0 300 94" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g clip-path="url(#clip0_3084_11246)">
|
||
|
|
<rect width="300" height="94" rx="10" fill="black" fill-opacity="0.65" />
|
||
|
|
<g filter="url(#filter0_d_3084_11246)">
|
||
|
|
<rect x="5" y="27" width="2" height="40" fill="#83FF37" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M290 16C290 19.3137 287.314 22 284 22C280.686 22 278 19.3137 278 16C278 12.6863 280.686 10 284 10C287.314 10 290 12.6863 290 16ZM279.6 16C279.6 18.4299 281.57 20.3998 284 20.3998C286.43 20.3998 288.4 18.4299 288.4 16C288.4 13.5701 286.43 11.6002 284 11.6002C281.57 11.6002 279.6 13.5701 279.6 16Z"
|
||
|
|
fill="white" fill-opacity="0.19" />
|
||
|
|
<path class="anim"
|
||
|
|
d="M289.2 16C289.2 16.6829 289.065 17.3591 288.804 17.99C288.543 18.6208 288.16 19.1941 287.677 19.677C287.194 20.1598 286.621 20.5428 285.99 20.8042C285.359 21.0655 284.683 21.2 284 21.2C283.317 21.2 282.641 21.0655 282.01 20.8042C281.379 20.5428 280.806 20.1598 280.323 19.677C279.84 19.1941 279.457 18.6208 279.196 17.99C278.935 17.3591 278.8 16.6829 278.8 16C278.8 15.3171 278.935 14.6409 279.196 14.01C279.457 13.3792 279.84 12.8059 280.323 12.323C280.806 11.8402 281.379 11.4572 282.01 11.1958C282.641 10.9345 283.317 10.8 284 10.8C284.683 10.8 285.359 10.9345 285.99 11.1958C286.621 11.4572 287.194 11.8402 287.677 12.323C288.16 12.8059 288.543 13.3792 288.804 14.01C289.065 14.6409 289.2 15.3171 289.2 16L289.2 16Z"
|
||
|
|
stroke-dasharray="33 500" stroke="white" stroke-width="1.6" />
|
||
|
|
<g filter="url(#filter1_d_3084_11246)">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M30.202 26.0432C30.011 26.1088 29.7382 26.3994 29.686 26.593C29.6625 26.68 29.6432 26.9874 29.6431 27.276C29.6429 27.6618 29.6296 27.8043 29.593 27.8135C28.7533 28.0248 28.4739 28.1093 28.1714 28.2435C26.3346 29.0583 25.0876 30.6297 24.6484 32.6825C24.5721 33.0393 24.5615 33.2629 24.5342 35.0882C24.5068 36.9215 24.4965 37.1361 24.419 37.499C24.1513 38.7514 23.6207 39.7069 22.6559 40.6737C22.1165 41.2142 22.0003 41.4472 22 41.9888C21.9998 42.3247 22.012 42.3848 22.1308 42.6329C22.3446 43.0798 22.7441 43.3946 23.214 43.4863C23.5257 43.5472 37.5095 43.5435 37.7928 43.4824C38.7559 43.2751 39.2624 42.2515 38.8623 41.3209C38.8067 41.1915 38.63 40.9772 38.3117 40.6529C37.4505 39.7758 36.9784 38.9938 36.6887 37.9643C36.492 37.2655 36.4681 36.9779 36.4672 35.2936C36.4663 33.7139 36.4396 33.2168 36.3237 32.6262C35.8641 30.2832 33.9796 28.3473 31.7124 27.8889L31.3673 27.8191L31.353 27.2235C31.3395 26.6598 31.3328 26.6175 31.2281 26.434C31.029 26.0848 30.5795 25.9136 30.202 26.0432ZM27.3679 44.4067C27.3679 44.4762 27.5563 45.0264 27.6366 45.1913C28.0305 46 28.7981 46.6481 29.6628 46.902C30.0801 47.0245 30.8801 47.0338 31.2792 46.9208C31.9136 46.7411 32.54 46.332 32.9379 45.8374C33.1742 45.5438 33.4724 44.9632 33.5705 44.6061L33.6297 44.3905H30.4988C28.7768 44.3905 27.3679 44.3978 27.3679 44.4067Z"
|
||
|
|
fill="#83FF37" />
|
||
|
|
</g>
|
||
|
|
<rect x="6.5" y="6.5" width="287" height="81" rx="7.5" stroke="url(#paint0_linear_3084_11246)"
|
||
|
|
stroke-opacity="0.15" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_3084_11246" x="-9" y="13" width="30" height="68" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="7" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.55 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3084_11246" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3084_11246" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_3084_11246" x="9" y="13" width="43" height="47" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="6.5" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3084_11246" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3084_11246" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_3084_11246" x1="6" y1="47" x2="294" y2="47" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
<clipPath id="clip0_3084_11246">
|
||
|
|
<rect width="300" height="94" rx="10" fill="white" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<svg v-if="data.type=='info'" width="18.75rem" height="5.875rem" viewBox="0 0 300 94" fill="none">
|
||
|
|
<g clip-path="url(#clip0_3084_11246)">
|
||
|
|
<rect width="300" height="94" rx="10" fill="black" fill-opacity="0.65" />
|
||
|
|
<g filter="url(#filter0_d_3084_11246)">
|
||
|
|
<rect x="5" y="27" width="2" height="40" fill="#30adff" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M290 16C290 19.3137 287.314 22 284 22C280.686 22 278 19.3137 278 16C278 12.6863 280.686 10 284 10C287.314 10 290 12.6863 290 16ZM279.6 16C279.6 18.4299 281.57 20.3998 284 20.3998C286.43 20.3998 288.4 18.4299 288.4 16C288.4 13.5701 286.43 11.6002 284 11.6002C281.57 11.6002 279.6 13.5701 279.6 16Z"
|
||
|
|
fill="white" fill-opacity="0.19" />
|
||
|
|
<path class="anim"
|
||
|
|
d="M289.2 16C289.2 16.6829 289.065 17.3591 288.804 17.99C288.543 18.6208 288.16 19.1941 287.677 19.677C287.194 20.1598 286.621 20.5428 285.99 20.8042C285.359 21.0655 284.683 21.2 284 21.2C283.317 21.2 282.641 21.0655 282.01 20.8042C281.379 20.5428 280.806 20.1598 280.323 19.677C279.84 19.1941 279.457 18.6208 279.196 17.99C278.935 17.3591 278.8 16.6829 278.8 16C278.8 15.3171 278.935 14.6409 279.196 14.01C279.457 13.3792 279.84 12.8059 280.323 12.323C280.806 11.8402 281.379 11.4572 282.01 11.1958C282.641 10.9345 283.317 10.8 284 10.8C284.683 10.8 285.359 10.9345 285.99 11.1958C286.621 11.4572 287.194 11.8402 287.677 12.323C288.16 12.8059 288.543 13.3792 288.804 14.01C289.065 14.6409 289.2 15.3171 289.2 16L289.2 16Z"
|
||
|
|
stroke-dasharray="33 500" stroke="white" stroke-width="1.6" />
|
||
|
|
<g xmlns="http://www.w3.org/2000/svg" filter="url(#filter1_d_3084_11246)">
|
||
|
|
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z" fill="#30adff"
|
||
|
|
style="transform: translate(26px, 49px);scale: 0.4;" />
|
||
|
|
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105"
|
||
|
|
fill="#30adff" style="transform: translate(20px, 40px);scale: 0.3;" />
|
||
|
|
|
||
|
|
</g>
|
||
|
|
<rect x="6.5" y="6.5" width="287" height="81" rx="7.5" stroke="url(#paint0_linear_3084_11246)"
|
||
|
|
stroke-opacity="0.15" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_3084_11246" x="-9" y="13" width="30" height="68" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="7" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.55 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3084_11246" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3084_11246" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_3084_11246" x="9" y="13" width="43" height="47" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="6.5" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3084_11246" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3084_11246" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_3084_11246" x1="6" y1="47" x2="294" y2="47" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
<clipPath id="clip0_3084_11246">
|
||
|
|
<rect width="300" height="94" rx="10" fill="white" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="question" v-for="data in question">
|
||
|
|
<h1>{{data.header}}</h1>
|
||
|
|
<P>{{data.description}}</P> <svg width="22.0625rem" height="5.875rem" viewBox="0 0 353 94" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g clip-path="url(#clip0_2855_12299)">
|
||
|
|
<rect width="300" height="94" rx="10" fill="black" fill-opacity="0.65" />
|
||
|
|
<g filter="url(#filter0_d_2855_12299)">
|
||
|
|
<rect x="5" y="27" width="2" height="40" fill="#83FF37" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M290 16C290 19.3137 287.314 22 284 22C280.686 22 278 19.3137 278 16C278 12.6863 280.686 10 284 10C287.314 10 290 12.6863 290 16ZM279.6 16C279.6 18.4299 281.57 20.3998 284 20.3998C286.43 20.3998 288.4 18.4299 288.4 16C288.4 13.5701 286.43 11.6002 284 11.6002C281.57 11.6002 279.6 13.5701 279.6 16Z"
|
||
|
|
fill="white" fill-opacity="0.19" />
|
||
|
|
<path class="anim"
|
||
|
|
d="M289.2 16C289.2 16.6829 289.065 17.3591 288.804 17.99C288.543 18.6208 288.16 19.1941 287.677 19.677C287.194 20.1598 286.621 20.5428 285.99 20.8042C285.359 21.0655 284.683 21.2 284 21.2C283.317 21.2 282.641 21.0655 282.01 20.8042C281.379 20.5428 280.806 20.1598 280.323 19.677C279.84 19.1941 279.457 18.6208 279.196 17.99C278.935 17.3591 278.8 16.6829 278.8 16C278.8 15.3171 278.935 14.6409 279.196 14.01C279.457 13.3792 279.84 12.8059 280.323 12.323C280.806 11.8402 281.379 11.4572 282.01 11.1958C282.641 10.9345 283.317 10.8 284 10.8C284.683 10.8 285.359 10.9345 285.99 11.1958C286.621 11.4572 287.194 11.8402 287.677 12.323C288.16 12.8059 288.543 13.3792 288.804 14.01C289.065 14.6409 289.2 15.3171 289.2 16L289.2 16Z"
|
||
|
|
stroke="white" stroke-width="1.6" />
|
||
|
|
<g filter="url(#filter1_d_2855_12299)">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M30.202 26.0432C30.011 26.1088 29.7382 26.3994 29.686 26.593C29.6625 26.68 29.6432 26.9874 29.6431 27.276C29.6429 27.6618 29.6296 27.8043 29.593 27.8135C28.7533 28.0248 28.4739 28.1093 28.1714 28.2435C26.3346 29.0583 25.0876 30.6297 24.6484 32.6825C24.5721 33.0393 24.5615 33.2629 24.5342 35.0882C24.5068 36.9215 24.4965 37.1361 24.419 37.499C24.1513 38.7514 23.6207 39.7069 22.6559 40.6737C22.1165 41.2142 22.0003 41.4472 22 41.9888C21.9998 42.3247 22.012 42.3848 22.1308 42.6329C22.3446 43.0798 22.7441 43.3946 23.214 43.4863C23.5257 43.5472 37.5095 43.5435 37.7928 43.4824C38.7559 43.2751 39.2624 42.2515 38.8623 41.3209C38.8067 41.1915 38.63 40.9772 38.3117 40.6529C37.4505 39.7758 36.9784 38.9938 36.6887 37.9643C36.492 37.2655 36.4681 36.9779 36.4672 35.2936C36.4663 33.7139 36.4396 33.2168 36.3237 32.6262C35.8641 30.2832 33.9796 28.3473 31.7124 27.8889L31.3673 27.8191L31.353 27.2235C31.3395 26.6598 31.3328 26.6175 31.2281 26.434C31.029 26.0848 30.5795 25.9136 30.202 26.0432ZM27.3679 44.4067C27.3679 44.4762 27.5563 45.0264 27.6366 45.1913C28.0305 46 28.7981 46.6481 29.6628 46.902C30.0801 47.0245 30.8801 47.0338 31.2792 46.9208C31.9136 46.7411 32.54 46.332 32.9379 45.8374C33.1742 45.5438 33.4724 44.9632 33.5705 44.6061L33.6297 44.3905H30.4988C28.7768 44.3905 27.3679 44.3978 27.3679 44.4067Z"
|
||
|
|
fill="#83FF37" />
|
||
|
|
</g>
|
||
|
|
<rect x="6.5" y="6.5" width="287" height="81" rx="7.5" stroke="url(#paint0_linear_2855_12299)"
|
||
|
|
stroke-opacity="0.15" />
|
||
|
|
</g>
|
||
|
|
<rect x="311" width="42" height="94" rx="10" fill="black" fill-opacity="0.65" />
|
||
|
|
<rect x="319" y="8" width="26" height="36" rx="6" fill="url(#paint1_radial_2855_12299)" />
|
||
|
|
<path d="M334.678 21.2H336.512L333.096 27.108V31H331.486V27.108L328.07 21.2H329.904L332.298 25.54L334.678 21.2Z"
|
||
|
|
fill="white" />
|
||
|
|
<rect x="319" y="50" width="26" height="36" rx="6" fill="url(#paint2_radial_2855_12299)" />
|
||
|
|
<path d="M334.86 69.85V63.2H336.47V73H335.21L330.59 66.35V73H328.98V63.2H330.24L334.86 69.85Z" fill="white" />
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_2855_12299" x="-9" y="13" width="30" height="68" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="7" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.55 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12299" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12299" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_2855_12299" x="9" y="13" width="43" height="47" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="6.5" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.513726 0 0 0 0 1 0 0 0 0 0.215686 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12299" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12299" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_2855_12299" x1="6" y1="47" x2="294" y2="47" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_12299" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(332 26) rotate(57.2905) scale(31.4594 23.5242)">
|
||
|
|
<stop stop-color="#59A927" />
|
||
|
|
<stop offset="1" stop-color="#83FF37" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_2855_12299" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(332 68) rotate(57.2905) scale(31.4594 23.5242)">
|
||
|
|
<stop stop-color="#FF3737" />
|
||
|
|
<stop offset="1" stop-color="#FF3737" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<clipPath id="clip0_2855_12299">
|
||
|
|
<rect width="300" height="94" rx="10" fill="white" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="health-rounded" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.health.position.top, left: hud.health.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('health')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="health">
|
||
|
|
<h1 v-if="hud.health.picker !=true">{{hud.health.percentage}}%</h1>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.health.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'health-rounded', 'health', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.health.drag != true" @click="hud.health.picker=!hud.health.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h1></h1>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.health.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
fill="black" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_646_788)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_646_788" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34"
|
||
|
|
height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_646_788)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_646_788)">
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.health.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_646_788)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-30, -hud.health.percentage, 100) + 'px)'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_646_788)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-32, -hud.health.percentage, 100) + 'px)'}"
|
||
|
|
d="M52.3096 33V33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_646_788)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M30.3016 24.0597C28.5143 24.3135 27.2671 25.1339 26.5554 26.5241C26.0227 27.5645 25.8502 29.0881 26.1386 30.2046C26.4183 31.2875 27.0888 32.4795 28.1228 33.7321C29.399 35.278 31.3699 37.0703 33.5867 38.701C33.9624 38.9774 35.3023 39.907 35.4541 39.9966C35.5074 40.028 35.7789 39.8498 36.763 39.1377C39.911 36.8595 42.5452 34.3282 43.8356 32.3415C44.9245 30.6649 45.2267 29.3119 44.8382 27.8535C43.9481 24.513 40.0137 22.9573 37.0112 24.7585C36.5491 25.0357 35.9913 25.5166 35.6671 25.9174C35.5854 26.0185 35.5101 26.1011 35.4999 26.1011C35.4897 26.1011 35.4145 26.0185 35.3327 25.9174C35.1518 25.6938 34.696 25.2575 34.4344 25.0576C33.7806 24.5579 32.8747 24.1803 32.0389 24.0592C31.5655 23.9907 30.7866 23.9909 30.3016 24.0597Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_646_788" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.health.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.health.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_646_788" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.health.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.health.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_646_788" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.health.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.health.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_646_788" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.health.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.health.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_646_788" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.health.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.health.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.health.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('health', $event.target.value)" @blur="hud.health.picker=false"
|
||
|
|
:value="hud.health.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="armor-rounded" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.armor.position.top, left: hud.armor.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('armor')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="armor">
|
||
|
|
<h1 v-if="hud.armor.picker != true">
|
||
|
|
{{ hud.armor.percentage }}%
|
||
|
|
</h1>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.armor.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'armor-rounded', 'armor', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.armor.drag != true" @click="hud.armor.picker = !hud.armor.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40" height="40" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.armor.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
fill="black" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_653_804)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_653_804" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34"
|
||
|
|
height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_653_804)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_653_804)">
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-31, -hud.armor.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_653_804)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.armor.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_653_804)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-32, -hud.armor.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
d="M52.3096 33V33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_653_804)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M31.6928 22.0099C27.3095 23.1089 27.3886 23.0825 27.1318 23.5313L27 23.7617L27.0005 28.4161C27.001 33.4444 27.0049 33.5281 27.2996 34.7772C27.525 35.7327 27.983 36.8326 28.4518 37.544C28.7345 37.9729 29.364 38.7435 29.8138 39.2113C30.6862 40.1186 33.2369 41.8889 34.8762 42.7248L35.4158 43H35.9798C36.6423 43 36.7554 42.9575 37.9411 42.2641C39.9197 41.1069 41.5757 39.8751 42.4338 38.922C43.7926 37.4128 44.4724 36.051 44.7999 34.1824C44.9832 33.1364 45.0124 32.2019 44.9961 27.899L44.9804 23.7617L44.8486 23.5313C44.5894 23.0783 44.6794 23.1082 40.2512 22.0036C37.5424 21.3279 36.1239 20.9966 35.9539 21C35.813 21.0028 33.9187 21.4518 31.6928 22.0099Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_653_804" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.armor.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.armor.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_653_804" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.armor.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.armor.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_653_804" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.armor.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.armor.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_653_804" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.armor.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.armor.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_653_804" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.armor.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.armor.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.armor.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('armor', $event.target.value)" @blur="hud.armor.picker = false"
|
||
|
|
:value="hud.armor.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stress-rounded" style="display:none;" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.stress.position.top, left: hud.stress.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('stress')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="stress">
|
||
|
|
<h1 v-if="hud.stress.picker != true">
|
||
|
|
{{ hud.stress.percentage }}%
|
||
|
|
</h1>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.stress.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'stress-rounded', 'stress', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.stress.drag != true" @click="hud.stress.picker = !hud.stress.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40" height="40" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.stress.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
:fill="hud.stress.color" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_590_397)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_590_397" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34"
|
||
|
|
height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_590_397)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_590_397)">
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.stress.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_590_397)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.stress.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_590_397)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.stress.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
d="M52.3096 33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_590_397)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M34.3499 20.8186C34.2538 20.8634 34.1291 20.9501 34.0727 21.0112C33.9491 21.1452 31.3154 27.7574 31.3154 27.9337C31.3154 28.1767 31.3833 28.1887 32.755 28.1889C33.9209 28.189 34.0097 28.1946 34.1429 28.2757C34.3317 28.3906 34.4587 28.6074 34.4588 28.8154C34.459 28.9371 34.2124 29.5722 33.5791 31.0813C33.0952 32.2345 32.6711 33.2468 32.6368 33.3306L32.5744 33.4832L32.6835 33.3742C33.0774 32.981 38.9125 26.7704 38.9125 26.7443C38.9125 26.7265 38.3181 26.7059 37.5917 26.6986C36.3223 26.6859 36.265 26.6817 36.1182 26.5903C35.9083 26.4598 35.8125 26.2806 35.8125 26.0184C35.8125 25.7797 35.6498 26.0455 37.7764 22.8104C38.348 21.9411 38.4062 21.8344 38.4235 21.6257C38.4488 21.3213 38.3152 21.0381 38.07 20.876L37.893 20.7591L36.2088 20.7481C34.6416 20.7379 34.5124 20.7428 34.3499 20.8186ZM30.5415 24.8977C30.1894 24.9966 29.821 25.2 29.5632 25.4379C29.3034 25.6777 29.3061 25.6937 29.6244 25.8106C29.9392 25.9263 30.0497 26.1917 29.8752 26.4131C29.7461 26.5769 29.6189 26.5882 29.2633 26.4675C29.0887 26.4083 28.8234 26.3473 28.6736 26.3319C27.912 26.2541 27.0704 26.646 26.65 27.2744C26.4799 27.5286 26.3068 27.9107 26.3446 27.9484C26.3552 27.959 26.471 27.9392 26.6019 27.9044C26.9524 27.8113 27.1096 27.8219 27.235 27.9471C27.4402 28.1519 27.334 28.4983 27.0462 28.5629C26.6988 28.6409 26.5583 28.6877 26.3373 28.7991C25.4505 29.2459 24.9669 30.3539 25.2259 31.3461C25.3721 31.9064 25.7855 32.4501 26.2747 32.7256C26.4066 32.7999 26.5337 32.8965 26.5572 32.9403C26.6273 33.071 26.6062 33.2808 26.5137 33.3731C26.3578 33.5287 26.2133 33.5321 25.9357 33.3868C25.7967 33.3141 25.683 33.2723 25.683 33.2939C25.683 33.3154 25.7398 33.4454 25.8091 33.5826C26.2806 34.5145 27.1499 35.1094 28.2169 35.2298L28.4774 35.2592V34.8812C28.4774 34.538 28.4872 34.4934 28.5845 34.3963C28.7272 34.2538 28.9667 34.2508 29.1059 34.3897C29.195 34.4786 29.2091 34.5444 29.2299 34.9671C29.2719 35.8231 29.5892 36.5086 30.2028 37.0695C30.7373 37.5579 31.4396 37.831 32.1668 37.8333C32.6925 37.8348 33.0038 37.7634 33.4924 37.529C33.8148 37.3744 33.9752 37.2617 34.2516 36.996L34.602 36.6592L34.3764 36.4974C34.2522 36.4084 34.1291 36.2884 34.1028 36.2307C34.0439 36.1017 34.0836 35.9276 34.1981 35.8134C34.3455 35.6663 34.5305 35.7043 34.9276 35.9633C35.3346 36.2289 35.7944 36.4318 36.2852 36.5626C36.7646 36.6903 37.6735 36.7195 38.1845 36.6235C39.4251 36.3906 40.4772 35.6963 41.1719 34.6521L41.325 34.4219L41.1202 34.0179C41.0075 33.7957 40.9044 33.532 40.891 33.432C40.8703 33.2767 40.8831 33.2337 40.9791 33.1379C41.1347 32.9826 41.3667 32.984 41.5125 33.1409C41.5713 33.2043 41.6195 33.2801 41.6195 33.3094C41.6195 33.4702 41.9458 33.9902 42.1988 34.2327C42.6555 34.6703 43.1423 34.8639 43.7808 34.8618C45.7148 34.8552 46.6955 32.5254 45.3585 31.1138C45.1876 30.9333 44.8307 30.6725 44.7546 30.6725C44.7353 30.6725 44.7195 30.6999 44.7195 30.7333C44.7195 30.7667 44.6794 30.9237 44.6304 31.0821C44.5309 31.4035 44.4128 31.5162 44.1823 31.5096C44.0269 31.5052 43.8463 31.3354 43.8463 31.1937C43.8463 31.1474 43.8972 30.9377 43.9593 30.7277C44.0999 30.2523 44.1445 29.5593 44.0659 29.072C43.8981 28.0324 43.2175 27.0256 42.3248 26.4963C42.0396 26.3271 41.5759 26.1199 41.5759 26.1616C41.5759 26.1724 41.6446 26.3061 41.7287 26.4587C41.8127 26.6113 41.8815 26.7894 41.8815 26.8544C41.8815 27.017 41.7028 27.1865 41.5313 27.1865C41.327 27.1865 41.238 27.1191 41.1121 26.869C40.6047 25.8604 39.6052 25.1098 38.483 24.8948C38.0794 24.8175 37.4261 24.8135 37.3324 24.8879C37.246 24.9565 36.6421 25.8606 36.6421 25.9214C36.6421 25.9512 37.0478 25.9664 37.8499 25.9664C39.0462 25.9664 39.0593 25.9674 39.2366 26.071C39.5804 26.2721 39.7346 26.78 39.5558 27.1223C39.4369 27.3498 34.1178 33.0677 33.2087 33.9452C32.7964 34.3432 32.6325 34.4361 32.3399 34.4376C31.9316 34.4397 31.6225 34.1271 31.6815 33.7717C31.6959 33.6849 32.1483 32.5648 32.6869 31.2826L33.666 28.9513L32.4798 28.9295C31.3627 28.909 31.2831 28.9021 31.1135 28.8116C30.7602 28.623 30.5717 28.3023 30.5754 27.896C30.5773 27.6784 30.6512 27.4596 31.1166 26.2932C31.413 25.5502 31.6392 24.925 31.6193 24.9037C31.5528 24.8331 30.7865 24.82
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_590_397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.stress.color" />
|
||
|
|
<stop offset="0.760417" :stop-color="hud.stress.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.stress.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_590_397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.stress.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.stress.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_590_397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.stress.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.stress.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_590_397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.stress.color"" stop-opacity=" 0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.stress.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_590_397" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.stress.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.stress.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.stress.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('stress', $event.target.value)" @blur="hud.stress.picker = false"
|
||
|
|
:value="hud.stress.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hunger-rounded" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.hunger.position.top, left: hud.hunger.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('hunger')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="hunger">
|
||
|
|
<h1 v-if="hud.hunger.picker != true">
|
||
|
|
{{ hud.hunger.percentage }}%
|
||
|
|
</h1>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.hunger.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'hunger-rounded', 'hunger', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.hunger.drag != true" @click="hud.hunger.picker = !hud.hunger.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40" height="40" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.hunger.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
fill="black" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_631_80)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_631_80" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34" height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_631_80)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_631_80)">
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.hunger.percentage, 100) + 'px)'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_631_80)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.hunger.percentage, 100) + 'px)'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_631_80)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.hunger.percentage, 100) + 'px)'}"
|
||
|
|
d="M52.3096 33V33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_631_80)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M29.0549 24.1577C28.9405 24.4289 28.7469 25.0503 28.6819 25.3551C28.5942 25.7665 28.5602 26.5733 28.6137 26.9735C28.6867 27.5203 28.8758 28.0325 29.1746 28.4937C29.2729 28.6454 30.1891 29.583 32.4104 31.805L35.5091 34.9047L35.9051 34.5103L36.3011 34.1158L38.9334 37.0564C40.3811 38.6737 41.6406 40.0755 41.7323 40.1716C42.1239 40.5817 42.6119 40.758 43.1038 40.6671C44.0726 40.488 44.5862 39.4735 44.1597 38.5814C44.0655 38.3843 43.5712 37.8829 36.8839 31.2028L29.7092 24.0356H29.4077H29.1064L29.0549 24.1577ZM39.0265 25.8661C38.039 26.8549 37.1868 27.7298 37.1329 27.8104C36.8774 28.1916 36.7549 28.5224 36.6862 29.0159C36.6599 29.2046 36.6242 29.3963 36.6069 29.4419C36.577 29.5202 36.6365 29.5858 37.6915 30.6387L38.8078 31.7528L39.0564 31.7015C39.1931 31.6733 39.345 31.6502 39.3939 31.6502C39.5697 31.6502 39.9164 31.5446 40.2204 31.3985L40.53 31.2496L42.4127 29.376L44.2955 27.5024L43.9528 27.1603L43.6102 26.8182L42.2904 28.1356L40.9705 29.453L40.6278 29.112L40.2851 28.7711L41.6055 27.4526L42.9258 26.1342L42.5756 25.7845L42.2253 25.4349L40.9047 26.753L39.5841 28.0711L39.2425 27.729L38.901 27.3869L40.2204 26.0695L41.5397 24.752L41.1985 24.4101C41.0107 24.222 40.8492 24.0682 40.8396 24.0682C40.8299 24.0682 40.0141 24.8772 39.0265 25.8661ZM30.3082 35.97C28.0465 38.2338 27.8719 38.4165 27.7892 38.6058C27.4165 39.4585 27.8568 40.3922 28.7443 40.6308C28.9344 40.6819 29.3465 40.6753 29.5331 40.6182C29.8844 40.5106 29.9228 40.4757 32.3976 38.0089L34.8259 35.5884L33.7994 34.563C33.2348 33.999 32.7651 33.5376 32.7556 33.5376C32.7462 33.5376 31.6448 34.6322 30.3082 35.97Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_631_80" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.hunger.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.hunger.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_631_80" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.hunger.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#0A1E31" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_631_80" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.hunger.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.hunger.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_631_80" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.hunger.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.hunger.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_631_80" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.hunger.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.hunger.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.hunger.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('hunger', $event.target.value)" @blur="hud.hunger.picker = false"
|
||
|
|
:value="hud.hunger.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="water-rounded" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.water.position.top, left: hud.water.position.left}">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('water')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="water">
|
||
|
|
<h1 v-if="hud.water.picker != true">
|
||
|
|
{{ hud.water.percentage }}%
|
||
|
|
</h1>
|
||
|
|
<div v-if="hudMenu && hud.water.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'water-rounded', 'water', $event)" class="drag">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.water.drag != true" @click="hud.water.picker = !hud.water.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40" height="40" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.water.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
fill="black" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_632_88)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_632_88" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34" height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_632_88)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_632_88)">
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.water.percentage, 100) + 'px)'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_632_88)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.water.percentage, 100) + 'px)'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_632_88)" />
|
||
|
|
<path :style="{transform: 'translate(0, ' + getPercentage(-33, -hud.water.percentage, 100) + 'px)'}"
|
||
|
|
d="M52.3096 33V33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_632_88)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M35.8233 24.0183C35.7723 24.0447 35.6709 24.1632 35.5979 24.2817C35.525 24.4001 35.1582 24.8968 34.7829 25.3853C31.8531 29.1987 30.5085 31.2854 29.7713 33.1626C29.4746 33.9182 29.3689 34.3767 29.3472 35.0028C29.2734 37.1269 30.4013 39.1689 32.3304 40.4032C33.9936 41.4674 36.1913 41.7437 38.1161 41.1307C40.874 40.2522 42.7584 37.7132 42.6642 35.0028C42.6435 34.4077 42.5481 33.9698 42.2881 33.2775C41.468 31.0932 39.3421 27.7987 36.609 24.4765C36.187 23.9635 36.0656 23.8927 35.8233 24.0183Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_632_88" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.water.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.water.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_632_88" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.water.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_632_88" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.water.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.water.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_632_88" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.water.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.water.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_632_88" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.water.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.water.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.water.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('water', $event.target.value)" @blur="hud.water.picker = false"
|
||
|
|
:value="hud.water.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="oxygen-rounded" v-if="hudType == 'rounded' && allHud"
|
||
|
|
:style="{ top: hud.oxygen.position.top, left: hud.oxygen.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('oxygen')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="oxygen">
|
||
|
|
<h1 v-if="hud.oxygen.picker != true">
|
||
|
|
{{ hud.oxygen.percentage }}%
|
||
|
|
</h1>
|
||
|
|
<div class="drag">
|
||
|
|
<svg style="top:0rem; left:3.5rem" v-if="hudMenu && hud.oxygen.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'oxygen-rounded', 'oxygen', $event)" width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.oxygen.drag != true" @click="hud.oxygen.picker = !hud.oxygen.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40" height="40" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5rem" height="4.9375rem" viewBox="0 0 72 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.oxygen.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.3167 7.96157C35.3473 7.36655 36.6171 7.36655 37.6477 7.96157L55.952 18.5295C56.9826 19.1246 57.6174 20.2242 57.6174 21.4142L57.6174 42.5502C57.6174 43.7402 56.9826 44.8399 55.952 45.4349L37.6477 56.0028C36.6171 56.5979 35.3473 56.5979 34.3167 56.0028L16.0125 45.4349C14.9819 44.8399 14.347 43.7402 14.347 42.5502L14.347 21.4142C14.347 20.2242 14.9819 19.1246 16.0125 18.5295L34.3167 7.96157Z"
|
||
|
|
fill="black" fill-opacity="0.06" />
|
||
|
|
<path
|
||
|
|
d="M37.2313 8.68274L55.5356 19.2507C56.3085 19.697 56.7847 20.5217 56.7847 21.4142L56.7847 42.5502C56.7847 43.4427 56.3085 44.2674 55.5356 44.7137L37.2313 55.2817C36.4584 55.7279 35.5061 55.7279 34.7331 55.2817L16.4288 44.7137C15.6559 44.2674 15.1797 43.4427 15.1797 42.5502L15.1797 21.4142C15.1797 20.5217 15.6559 19.697 16.4288 19.2507L34.7331 8.68274C35.5061 8.23648 36.4584 8.23648 37.2313 8.68274Z"
|
||
|
|
stroke="url(#paint0_radial_632_124)" stroke-width="1.66548" />
|
||
|
|
</g>
|
||
|
|
<mask id="mask0_632_124" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="12" width="34"
|
||
|
|
height="41">
|
||
|
|
<path
|
||
|
|
d="M37.5014 51.8513C36.4575 52.4754 35.1565 52.4807 34.1076 51.8652L20.6437 43.9651C19.6249 43.3672 18.999 42.2743 18.999 41.093L18.999 23.9408C18.999 22.7747 19.6089 21.6936 20.607 21.0906L33.9318 13.0402C34.9907 12.4005 36.3169 12.4005 37.3758 13.0402L50.7006 21.0906C51.6986 21.6936 52.3086 22.7747 52.3086 23.9408L52.3086 41.111C52.3086 42.2826 51.6929 43.368 50.6872 43.9692L37.5014 51.8513Z"
|
||
|
|
fill="url(#paint1_radial_632_124)" />
|
||
|
|
</mask>
|
||
|
|
<g mask="url(#mask0_632_124)">
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-33, -hud.oxygen.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint2_radial_632_124)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-32, -hud.oxygen.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M19 38.5L19.001 76.3736C19.001 77.54 19.6111 78.6214 20.6094 79.2246L33.9333 87.2744C34.9925 87.9143 36.3191 87.9143 37.3783 87.2744L50.7021 79.2246C51.7005 78.6214 52.3106 77.54 52.3106 76.3735L52.3096 38.5V38.5C44.3582 44.0871 34.0655 45.1138 25.1671 41.2074L19 38.5Z"
|
||
|
|
fill="url(#paint3_radial_632_124)" />
|
||
|
|
<path
|
||
|
|
:style="{transform: 'translate(0, ' + getPercentage(-32, -hud.oxygen.percentage, 100) + 'px)', transition: '.47s all'}"
|
||
|
|
d="M52.3096 33V33C44.3582 38.5871 34.0655 39.6138 25.1671 35.7074L19 33V38.5L25.1671 41.2074C34.0655 45.1138 44.3582 44.0871 52.3096 38.5V38.5V33Z"
|
||
|
|
fill="url(#paint4_radial_632_124)" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M39.459 22.9993C39.0006 23.0849 38.4797 23.4411 38.1993 23.8606C37.9655 24.2105 37.9086 24.4206 37.9102 24.9283C37.9115 25.3272 37.9221 25.4028 38.0077 25.6185C38.3187 26.4022 39.0295 26.8828 39.8737 26.8801C40.7067 26.8773 41.4337 26.369 41.7188 25.5898C41.8268 25.2947 41.8499 24.7444 41.7676 24.4267C41.5105 23.4343 40.4942 22.8059 39.459 22.9993ZM32.858 26.1802C32.6733 26.2241 32.3721 26.4055 32.2523 26.5448C32.19 26.6173 31.7746 27.3345 31.3292 28.1386C30.448 29.7294 30.4014 29.8415 30.4636 30.2217C30.5102 30.5061 30.6208 30.7062 30.8431 30.9081C31.3229 31.3438 32.0682 31.3128 32.4924 30.8394C32.5792 30.7427 32.898 30.2094 33.2388 29.5913L33.8338 28.5122L34.9574 28.5119L36.0811 28.5115L34.836 30.6704C34.1512 31.8578 33.38 33.1957 33.1223 33.6434L32.6537 34.4576L30.4131 34.4676L28.1726 34.4776L27.9923 34.5663C27.7622 34.6795 27.544 34.8964 27.4315 35.1235C27.3565 35.275 27.3433 35.3527 27.3438 35.6421C27.3442 35.9413 27.356 36.0047 27.4409 36.1656C27.5664 36.4033 27.8399 36.6449 28.0855 36.735C28.2742 36.8042 28.3699 36.8067 30.913 36.8067C33.373 36.8067 33.5577 36.8024 33.7351 36.7409C34.0716 36.6243 34.2504 36.4189 34.7502 35.5744C34.9963 35.1584 35.2073 34.8182 35.2189 34.8184C35.2306 34.8187 35.4192 34.9598 35.6381 35.1319C35.857 35.3042 36.3328 35.6775 36.6955 35.9616C37.1538 36.3207 37.3499 36.4955 37.3388 36.5349C37.33 36.5661 37.0258 37.3253 36.6629 38.222C36.0148 39.8229 36.0029 39.8572 36.0014 40.1211C35.9988 40.5811 36.2165 40.9382 36.6361 41.1626C36.8422 41.2728 36.8906 41.2839 37.1693 41.2846C37.4074 41.2853 37.5129 41.2684 37.6424 41.209C37.8529 41.1124 38.0858 40.9046 38.1958 40.7154C38.2426 40.6349 38.6587 39.6338 39.1204 38.4908C39.8859 36.5958 39.9612 36.3904 39.9741 36.1617C39.9918 35.8481 39.8905 35.5542 39.6905 35.3386C39.6149 35.2571 39.0173 34.7721 38.3625 34.2607C37.7076 33.7493 37.1712 33.3172 37.1706 33.3003C37.1694 33.2728 37.6208 32.497 38.4946 31.0247L38.8001 30.5101L39.3695 31.3712C39.8236 32.0581 39.9742 32.2583 40.1136 32.3604C40.4213 32.586 40.8421 32.6577 41.1763 32.5416C41.4837 32.4348 44.354 30.8298 44.5082 30.6785C44.7548 30.4364 44.8318 30.236 44.8313 29.8373C44.8309 29.5524 44.8174 29.4718 44.7486 29.343C44.5564 28.9833 44.1941 28.7261 43.8046 28.6729C43.4955 28.6306 43.2698 28.7199 42.2243 29.298C41.688 29.5946 41.2358 29.8366 41.2195 29.8358C41.2032 29.8349 40.9179 29.418 40.5855 28.9094L39.9812 27.9846L39.6821 27.9617C38.6161 27.8803 37.6987 27.3065 37.1857 26.4002L37.043 26.1483L35.0057 26.1512C33.8852 26.1527 32.9187 26.1658 32.858 26.1802Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_632_124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.9822 31.9822) rotate(32.4712) scale(32.5728 32.5728)">
|
||
|
|
<stop :stop-color="hud.oxygen.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.oxygen.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_632_124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(35.771 25.8789) rotate(-131.405) scale(29.0777 31.8464)">
|
||
|
|
<stop :stop-color="hud.oxygen.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.oxygen.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_632_124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.oxygen.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.oxygen.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_632_124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 47) rotate(69.0179) scale(52.7432 57.7652)">
|
||
|
|
<stop :stop-color="hud.oxygen.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.oxygen.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_632_124" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36 42) rotate(61.9275) scale(34 53.5644)">
|
||
|
|
<stop :stop-color="hud.oxygen.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.oxygen.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.oxygen.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('oxygen', $event.target.value)" @blur="hud.oxygen.picker = false"
|
||
|
|
:value="hud.oxygen.color"
|
||
|
|
style="position: absolute; left: 1.875rem; top: 0; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="speedometer" v-if="speedStyle == 'rounded' && carHud === true ">
|
||
|
|
<h1>
|
||
|
|
{{ speedHz }}
|
||
|
|
</h1>
|
||
|
|
<div ref="speedValue" class="speedh">
|
||
|
|
<span v-if="speedometer.speedh < 100" style="color:gray">0</span>{{ speedometer.speedh }}
|
||
|
|
</div>
|
||
|
|
<div class="fuel">
|
||
|
|
<svg width="16.25rem" height="16.25rem" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path :style="{transition: '.47s all'}" :stroke-dasharray="`${speedometer.fuel} 600`"
|
||
|
|
d="M29.0173 204.272C12.3531 181.615 3.79256 154.012 4.712 125.902C5.63144 97.7917 15.9775 70.8073 34.0866 49.2876"
|
||
|
|
stroke="#A5FF4C" stroke-width="9.4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="speed">
|
||
|
|
<svg :stroke-dasharray="borderDashArray" width="13.75rem" height="11.125rem" viewBox="0 0 220 178" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path
|
||
|
|
d="M27.1765 173.519C18.0305 161.084 11.748 146.78 8.77913 131.632C5.81031 116.483 6.22867 100.866 10.0042 85.898C13.7798 70.9303 20.8191 56.9829 30.6178 45.0551C40.4165 33.1273 52.7321 23.5144 66.6821 16.905C80.6321 10.2957 95.8713 6.85352 111.308 6.82518C126.744 6.79684 141.996 10.183 155.97 16.7411C169.944 23.2992 182.295 32.8668 192.138 44.7586C201.98 56.6503 209.071 70.5718 212.901 85.5255"
|
||
|
|
stroke="white" stroke-width="13.65" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="rpm">
|
||
|
|
<svg width="2.0625rem" height="5.375rem" viewBox="0 0 33 86" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#4db43a" />
|
||
|
|
<stop offset="50%" stop-color="#fda81d" />
|
||
|
|
<stop offset="80%" stop-color="#ff0000" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<path :stroke-dasharray="`${roundedRpm} 600`"
|
||
|
|
d="M24.3977 1.29262C27.0004 15.2361 26.7422 29.5631 23.6385 43.4037C20.5349 57.2443 14.6507 70.3097 6.34311 81.8066"
|
||
|
|
stroke="url(#gradient)" stroke-width="12" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="noss">
|
||
|
|
<svg width="2.375rem" height="10.125rem" viewBox="0 0 38 162" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path :style="{transition: '.47s all'}" :stroke-dasharray="`${speedometer.noss} 600`"
|
||
|
|
d="M8.98272 158.272C25.6481 135.614 34.2087 108.008 33.2878 79.8961C32.367 51.7837 22.0182 24.798 3.90573 3.27846"
|
||
|
|
stroke="#FF7337" stroke-width="9.4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="bar">
|
||
|
|
<svg ref="speedBar" :transform="speedBarTransform" width="0.5rem" height="5.25rem" viewBox="0 0 8 84" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path
|
||
|
|
d="M8 76.4916C8 80.6384 6.20914 84 4 84C1.79086 84 0 80.6384 0 76.4916C0 72.3449 1.79086 0 4 0C6.20914 0 8 72.3449 8 76.4916Z"
|
||
|
|
fill="url(#paint0_linear_2855_12345)" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="paint0_linear_2855_12345" x1="4" y1="0" x2="4" y2="49.0787"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="components">
|
||
|
|
<svg width="5.0625rem" height="2.9375rem" viewBox="0 0 81 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<!-- <g clip-path="url(#clip0_2855_12362)">
|
||
|
|
<path
|
||
|
|
d="M67.009 5.28251L63.8422 2.11578C63.6879 1.96141 63.4369 1.96141 63.2825 2.11578C63.1281 2.27016 63.1281 2.52114 63.2825 2.67552L66.1698 5.56198L63.5628 8.16901L60.6755 5.28251C60.5211 5.12813 60.2702 5.12813 60.1158 5.28251C59.9614 5.43688 59.9614 5.68786 60.1158 5.84224L63.2825 9.00896C63.3601 9.08574 63.4614 9.12456 63.5628 9.12456C63.6641 9.12456 63.7654 9.08578 63.8422 9.00896L67.009 5.84224C67.1633 5.68786 67.1633 5.43688 67.009 5.28251Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M69.6143 6.30512L68.3587 5.0495C67.8955 4.58636 67.1426 4.58636 66.6795 5.0495L63.071 8.65798C62.8462 8.88361 62.7227 9.18209 62.7227 9.49953C62.7227 9.81619 62.8462 10.1139 63.0694 10.3363C63.4447 10.7108 63.9316 11.2103 64.3021 11.5927C64.5253 11.8231 64.8238 11.9514 65.1436 11.9537C65.1476 11.9537 65.1507 11.9537 65.1539 11.9537C65.4714 11.9537 65.769 11.8302 65.9939 11.6046L69.6142 7.98425C70.0774 7.52115 70.0774 6.76826 69.6143 6.30512ZM69.0554 7.42533L65.435 11.0457C65.359 11.1217 65.2458 11.1589 65.1516 11.1621C65.0455 11.1613 64.9466 11.1193 64.8721 11.0425C64.4985 10.657 64.0084 10.1543 63.63 9.77663C63.5556 9.70222 63.5144 9.60403 63.5144 9.49953C63.5144 9.39343 63.5555 9.29368 63.6307 9.21849L67.2392 5.61001C67.3168 5.53241 67.4181 5.49441 67.5195 5.49441C67.6208 5.49441 67.7221 5.53241 67.7997 5.61001L69.0554 6.86482C69.1298 6.94004 69.171 7.03898 69.171 7.14507C69.1709 7.25117 69.1298 7.35015 69.0554 7.42533Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M71.3639 10.4283L68.9889 8.05328C68.8345 7.89891 68.5835 7.89891 68.4291 8.05328C68.2747 8.20766 68.2747 8.45864 68.4291 8.61301L70.5239 10.7078L68.7086 12.5231L66.613 10.4283C66.4586 10.274 66.2077 10.274 66.0533 10.4283C65.8989 10.5827 65.8989 10.8337 66.0533 10.9881L68.4283 13.3631C68.5059 13.4399 68.6073 13.4787 68.7086 13.4787C68.8099 13.4787 68.9113 13.4399 68.9889 13.3631L71.3639 10.9881C71.5183 10.8336 71.5183 10.5827 71.3639 10.4283Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M67.8006 6.86578C67.6462 6.71141 67.3952 6.71141 67.2408 6.86578L64.8658 9.24084C64.7114 9.39522 64.7114 9.6462 64.8658 9.80057C64.9434 9.87735 65.0447 9.91617 65.146 9.91617C65.2474 9.91617 65.3487 9.87739 65.4255 9.80057L67.8006 7.42552C67.955 7.2711 67.955 7.02016 67.8006 6.86578Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M78.8852 17.1578L76.5102 14.7828C76.3558 14.6284 76.1048 14.6284 75.9505 14.7828L72.7838 17.9495C72.6294 18.1039 72.6294 18.3549 72.7838 18.5092L75.1588 20.8843C75.2364 20.9611 75.3377 20.9999 75.4391 20.9999C75.5404 20.9999 75.6417 20.9611 75.7185 20.8835C75.8729 20.7291 75.8729 20.4781 75.7185 20.3238L73.6237 18.229L76.2308 15.6219L78.3255 17.7175C78.4799 17.8719 78.7309 17.8719 78.8853 17.7175C79.0396 17.5632 79.0396 17.3122 78.8852 17.1578Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M76.5953 14.9153C76.5723 14.8567 76.5367 14.806 76.4916 14.7664C76.3562 14.5914 75.7213 13.6121 74.3153 11.3432C74.1245 11.0352 73.8086 10.8341 73.4491 10.7922C73.0858 10.7502 72.7295 10.8753 72.4698 11.1349L69.125 14.4798C68.8693 14.7363 68.745 15.0886 68.7846 15.4488C68.8242 15.8091 69.0221 16.1273 69.3277 16.3221L72.8491 18.5633C72.9148 18.6053 72.9885 18.6251 73.0621 18.6251C73.1642 18.6251 73.2656 18.5855 73.3407 18.5079L76.5075 15.3412C76.6191 15.2295 76.6539 15.0625 76.5953 14.9153ZM73.0074 17.7249L69.7536 15.6547C69.6514 15.5898 69.5857 15.4837 69.5723 15.3633C69.5588 15.243 69.6008 15.125 69.6855 15.0403L73.0304 11.6955C73.1071 11.6195 73.2077 11.5775 73.313 11.5775C73.328 11.5775 73.3431 11.5783 73.3605 11.5799C73.4294 11.5878 73.5584 11.6218 73.6447 11.7611C74.8172 13.6541 75.3896 14.5756 75.707 15.0252L73.0074 17.7249Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M74.1326 13.1998C73.9782 13.0454 73.7273 13.0454 73.5729 13.1998L71.1978 15.5748C71.0434 15.7292 71.0434 15.9802 71.1978 16.1346C71.2754 16.2113 71.3767 16.2502 71.4781 16.2502C71.5794 16.2502 71.6807 16.2114 71.7575 16.1346L74.1326 13.7595C74.287 13.6051 74.287 13.3541 74.1326 13.1998Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M71.4779 5.95801C71.2594 5.95801 71.082 6.13536 71.082 6.35386V7.14553C71.082 7.36404 71.2594 7.54139 71.4779 7.54139C71.6964 7.54139 71.8737 7.36404 71.8737 7.14553V6.35386C71.8737 6.13536 71.6964 5.95801 71.4779 5.95801Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M74.6485 9.125H73.8568C73.6383 9.125 73.4609 9.30235 73.4609 9.52085C73.4609 9.73936 73.6383 9.91671 73.8568 9.91671H74.6485C74.867 9.91671 75.0443 9.73936 75.0443 9.52085C75.0443 9.30235 74.867 9.125 74.6485 9.125Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M74.1352 6.86578C73.9808 6.71141 73.7298 6.71141 73.5754 6.86578L72.7838 7.65746C72.6294 7.81184 72.6294 8.06281 72.7838 8.21719C72.8614 8.29397 72.9627 8.33279 73.064 8.33279C73.1654 8.33279 73.2667 8.29401 73.3435 8.21719L74.1352 7.42552C74.2895 7.2711 74.2895 7.02016 74.1352 6.86578Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M67.5209 15.458C67.3023 15.458 67.125 15.6354 67.125 15.8539V16.6455C67.125 16.864 67.3023 17.0414 67.5209 17.0414C67.7394 17.0414 67.9167 16.864 67.9167 16.6455V15.8539C67.9167 15.6354 67.7394 15.458 67.5209 15.458Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M65.1446 13.083H64.3529C64.1344 13.083 63.957 13.2604 63.957 13.4789C63.957 13.6974 64.1344 13.8747 64.3529 13.8747H65.1446C65.3631 13.8747 65.5404 13.6974 65.5404 13.4789C65.5404 13.2604 65.3631 13.083 65.1446 13.083Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
<path
|
||
|
|
d="M66.2172 14.7828C66.0628 14.6284 65.8118 14.6284 65.6575 14.7828L64.8658 15.5745C64.7114 15.7288 64.7114 15.9798 64.8658 16.1342C64.9434 16.211 65.0447 16.2498 65.146 16.2498C65.2474 16.2498 65.3487 16.211 65.4255 16.1342L66.2172 15.3425C66.3716 15.1881 66.3716 14.9372 66.2172 14.7828Z"
|
||
|
|
:fill="speedometer.seatbelt" />
|
||
|
|
</g> -->
|
||
|
|
<g clip-path="url(#clip1_2855_12362)">
|
||
|
|
<path
|
||
|
|
d="M13.1719 12.3537H20V13.838H12.9382C13.024 13.382 13.1046 12.8843 13.1719 12.3537ZM13.3574 9.49623C13.3574 9.74687 13.3528 9.99431 13.3444 10.2384H20V8.75404H13.3444C13.3528 8.99801 13.3574 9.2456 13.3574 9.49623ZM12.917 5.04311C13.0046 5.49741 13.0877 5.99519 13.1575 6.52748H20V5.04311H12.917ZM10.8018 16.2377C10.8456 16.114 11.873 13.1661 11.873 9.49623C11.873 5.82632 10.8456 2.8783 10.8018 2.75465L10.6151 2.22656L10.0561 2.26135C9.96568 2.26701 7.81566 2.4095 5.63505 3.32433C2.60281 4.5962 1 6.73042 1 9.49623C1 12.2619 2.60281 14.3961 5.63505 15.6681C7.81566 16.5828 9.96554 16.7255 10.056 16.7311L10.6151 16.7659L10.8018 16.2377ZM10.3887 9.49623C10.3887 12.0088 9.85667 14.2001 9.57415 15.1869C8.83718 15.0874 7.4966 14.8443 6.17792 14.2862C3.7271 13.2486 2.48438 11.6371 2.48438 9.49623C2.48438 7.35534 3.7271 5.74369 6.17792 4.70622C7.49704 4.14784 8.8382 3.90475 9.57473 3.80545C9.85754 4.79001 10.3887 6.9754 10.3887 9.49623V9.49623Z"
|
||
|
|
:fill="speedometer.light" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M44.1633 11.2853L44.1925 8.84469L46.5552 11.2034C46.6737 11.3217 46.8301 11.382 46.9873 11.3839C47.1444 11.3858 47.3023 11.3293 47.4237 11.2138C47.6663 10.9829 47.6708 10.6039 47.4338 10.3674L44.2127 7.15176L44.217 6.79114L44.2513 3.92791C44.263 2.94443 43.391 2.1338 42.3076 2.12085L37.5991 2.06458C36.5157 2.05163 35.6246 2.84119 35.6129 3.82468L35.5787 6.6879L35.5743 7.04853L32.2774 10.1863C32.0348 10.4171 32.0302 10.7961 32.2672 11.0327C32.3858 11.1509 32.5423 11.2113 32.6994 11.2132C32.8565 11.215 33.0144 11.1585 33.1358 11.043L35.5541 8.74146L35.5249 11.1821L32.228 14.32C31.9854 14.5508 31.9808 14.9298 32.2179 15.1664C32.3364 15.2848 32.4929 15.3451 32.65 15.3469C32.8071 15.3488 32.965 15.2923 33.0864 15.1768L35.5047 12.8751L35.4809 14.8686L35.4598 16.6357C35.448 17.6191 36.32 18.4298 37.4034 18.4427L42.1119 18.499C43.1953 18.5119 44.0864 17.7224 44.0982 16.7389L44.1193 14.9718L44.1431 12.9783L46.5058 15.3371C46.6243 15.4554 46.7807 15.5157 46.9379 15.5176C47.095 15.5195 47.2529 15.4629 47.3742 15.3475C47.6169 15.1166 47.6214 14.7377 47.3844 14.501L44.1633 11.2853ZM42.9323 11.5188L42.8983 14.3586L36.7161 14.2847L36.7501 11.4449C36.7501 11.4448 36.7501 11.4447 36.7501 11.4445L36.7995 7.31155C36.7995 7.31131 36.7995 7.31099 36.7995 7.31075L36.7996 7.3011L42.9818 7.37498L42.9817 7.38463C42.9817 7.38487 42.9817 7.38519 42.9817 7.38543L42.9323 11.5184C42.9323 11.5185 42.9323 11.5186 42.9323 11.5188ZM37.5848 3.26161L42.2933 3.31788C42.6928 3.32266 43.027 3.5953 43.0232 3.91324L42.9961 6.17794L36.8139 6.10406L36.841 3.83935C36.8448 3.52142 37.1854 3.25684 37.5848 3.26161ZM42.1262 17.3018L37.4177 17.2455C37.0183 17.2408 36.6841 16.9681 36.6879 16.6502L36.7018 15.4817L42.884 15.5556L42.8701 16.7241C42.8663 17.0421 42.5257 17.3066 42.1262 17.3018Z"
|
||
|
|
:fill="speedometer.door" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M0.179591 27.1264C0.00290507 27.2781 -0.0496598 27.5123 0.0498899 27.7041C0.0891377 27.7796 0.597437 28.3259 1.1794 28.918C1.76141 29.5101 2.23759 30.0109 2.23759 30.0308C2.23759 30.0508 1.80535 30.0671 1.27708 30.0671H0.316559L0.173495 30.1987C-0.0914397 30.4425 -0.0241042 30.9019 0.294708 31.0256C0.364248 31.0526 1.08679 31.0723 2.00853 31.0723C3.78373 31.0723 3.82767 31.0652 3.95282 30.7595C4.05317 30.5143 4.05017 27.4905 3.9494 27.2916C3.78739 26.9719 3.42727 26.9039 3.16444 27.1434L3.01129 27.283L2.99685 28.3001L2.98246 29.3172L1.84586 28.1605C0.729529 27.0245 0.705802 27.0039 0.515752 27.0039C0.376533 27.0039 0.282235 27.0382 0.179591 27.1264ZM9.6514 29.0688C6.09485 29.4483 3.11821 32.0654 2.26526 35.5626C2.05856 36.4104 2.02649 36.7027 2.02832 37.7253C2.03029 38.832 2.09303 39.3008 2.36007 40.2029C2.75232 41.528 3.42581 42.7167 4.29869 43.6244C4.85918 44.2073 4.90222 44.192 6.04749 43.0019C6.72657 42.2963 6.73913 42.2795 6.73913 42.073C6.73913 41.8224 6.64188 41.6637 6.43373 41.5749C6.16884 41.4619 6.02104 41.5472 5.41212 42.1644L4.85707 42.727L4.69107 42.5355C3.8694 41.5877 3.17157 39.8907 3.05261 38.551L3.0218 38.2039L3.86059 38.2024C4.74331 38.2008 4.76962 38.1949 4.92426 37.9659C5.05673 37.7697 5.02756 37.5481 4.84473 37.3615L4.68531 37.1988H3.86002H3.03474V37.0599C3.03474 36.7543 3.22817 35.7943 3.38792 35.3068C3.66505 34.4615 4.21363 33.4386 4.69642 32.8671L4.85819 32.6757L7.18193 35.0447L9.50571 37.4138L9.50674 37.6772C9.50988 38.4843 10.2543 38.9604 10.9555 38.6037C11.5587 38.2969 11.6861 37.4975 11.211 37.0008C11.0023 36.7827 10.654 36.6486 10.4025 36.6897L10.2299 36.7178L7.89256 34.3317L5.55518 31.9454L5.80717 31.7406C6.91343 30.8415 8.26497 30.274 9.72844 30.0941L9.97462 30.0638L9.9749 30.7954C9.97518 31.6146 10.0163 31.8371 10.1936 31.9795C10.3314 32.0902 10.6563 32.1106 10.7739 32.016C10.9885 31.8434 11.0062 31.7577 11.0062 30.8924V30.0638L11.2524 30.093C12.7165 30.2665 14.0963 30.8387 15.1561 31.712C15.285 31.8183 15.3997 31.912 15.4108 31.9203C15.422 31.9286 15.1767 32.1989 14.8658 32.5209C14.5548 32.843 14.2852 33.1568 14.2666 33.2183C14.1534 33.5928 14.5074 33.9707 14.8816 33.8747C14.9508 33.857 15.2623 33.5862 15.585 33.2633C15.9036 32.9445 16.1705 32.6926 16.1782 32.7036C16.1859 32.7145 16.2781 32.8312 16.3831 32.9629C17.2183 34.0097 17.7935 35.467 17.9652 36.9714L17.9912 37.1988H17.1926C16.1612 37.1988 16.0236 37.2608 16.0236 37.7258C16.0236 37.8811 16.0532 37.9544 16.1606 38.064L16.2977 38.2039H17.1191C17.5709 38.2039 17.9513 38.2217 17.9645 38.2435C18.0054 38.311 17.8575 39.2574 17.7335 39.7221C17.4826 40.6621 17.0798 41.4962 16.4818 42.3141L16.1538 42.7627L15.5846 42.1848C15.2715 41.867 14.9574 41.5849 14.8865 41.5579C14.684 41.4809 14.4256 41.5889 14.3168 41.7961C14.1474 42.1187 14.1991 42.206 15.1097 43.1343L15.9308 43.9714H16.1575C16.4246 43.9714 16.445 43.9564 16.9038 43.4217C18.8897 41.1067 19.5182 37.8889 18.5585 34.9492C17.3088 31.1212 13.5672 28.651 9.6514 29.0688Z"
|
||
|
|
:fill="speedometer.cruise" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M69.1442 28.0423C66.0195 28.3643 63.3221 30.4967 62.3109 33.4445C61.7436 35.0981 61.7436 36.9044 62.3109 38.5581C63.1195 40.9151 65.0147 42.7834 67.4056 43.5806C69.083 44.1398 70.9152 44.1398 72.5927 43.5806C74.9836 42.7834 76.8788 40.9151 77.6873 38.5581C78.2546 36.9044 78.2546 35.0981 77.6873 33.4445C76.8788 31.0874 74.9838 29.2193 72.5927 28.4219C71.4943 28.0556 70.2956 27.9237 69.1442 28.0423ZM62.4139 28.2005C62.1425 28.323 61.3176 29.2658 60.7941 30.0518C58.9882 32.7631 58.5107 36.232 59.5208 39.3016C60.0466 40.8993 60.7621 42.107 61.9496 43.4009C62.3948 43.886 62.6625 43.9801 63.0388 43.7839C63.1667 43.7172 63.2572 43.628 63.3249 43.5019C63.5144 43.1486 63.4453 42.9407 62.9704 42.4353C61.334 40.6941 60.4156 38.3811 60.4156 36.0013C60.4156 33.6214 61.334 31.3084 62.9704 29.5672C63.4453 29.0618 63.5144 28.854 63.3249 28.5006C63.2572 28.3745 63.1667 28.2853 63.0388 28.2186C62.8141 28.1014 62.6442 28.0965 62.4139 28.2005ZM76.9595 28.2186C76.8316 28.2853 76.741 28.3745 76.6734 28.5006C76.4838 28.854 76.5529 29.0618 77.0279 29.5672C80.4288 33.1859 80.4288 38.8166 77.0279 42.4353C76.5529 42.9407 76.4838 43.1486 76.6734 43.5019C76.741 43.628 76.8316 43.7172 76.9595 43.7839C77.4318 44.0302 77.7192 43.8476 78.6449 42.7133C80.1386 40.883 81 38.4279 81 36.0013C81 33.5746 80.1386 31.1195 78.6449 29.2892C77.7192 28.1549 77.4318 27.9724 76.9595 28.2186ZM70.8596 29.453C72.3722 29.6516 73.6399 30.2708 74.7259 31.3414C75.8119 32.412 76.4401 33.6618 76.6414 35.153C77.0018 37.8212 75.6671 40.4204 73.2337 41.7889C72.0581 42.45 70.478 42.7392 69.0979 42.5459C67.901 42.3782 66.9295 41.979 65.9448 41.2501C63.8068 39.6675 62.8411 36.9309 63.5097 34.3492C63.9537 32.6348 65.1404 31.127 66.7646 30.2136C67.9285 29.5591 69.4767 29.2715 70.8596 29.453ZM69.7176 30.8897C69.5666 30.9573 69.3649 31.178 69.3316 31.3124C69.319 31.363 69.3142 32.8248 69.3209 34.5608C69.3327 37.6413 69.3351 37.7198 69.419 37.8307C69.7032 38.2066 70.2951 38.2066 70.5793 37.8307C70.6632 37.7198 70.6655 37.6417 70.6768 34.5152L70.6883 31.3134L70.5908 31.1722C70.5372 31.0945 70.4416 30.9932 70.3783 30.947C70.2333 30.8411 69.8925 30.8115 69.7176 30.8897ZM69.6556 38.8226C69.014 39.0969 68.9508 39.9793 69.5467 40.3431C70.1289 40.6986 70.8586 40.2937 70.8586 39.6153C70.8586 38.9928 70.2285 38.5777 69.6556 38.8226Z"
|
||
|
|
:fill="speedometer.signal" />
|
||
|
|
<g clip-path="url(#clip2_2855_12362)">
|
||
|
|
<path
|
||
|
|
d="M48.4844 31.4844C48.0961 31.4844 47.7812 31.7992 47.7812 32.1875V32.8906H46.375V32.1875C46.375 31.7992 46.0602 31.4844 45.6719 31.4844H44.5569L43.3565 30.284C43.2247 30.1522 43.0459 30.0781 42.8594 30.0781H42.1562V28.6719H42.8594C43.2477 28.6719 43.5625 28.3571 43.5625 27.9687C43.5625 27.5804 43.2477 27.2656 42.8594 27.2656H35.7344C35.3461 27.2656 35.0312 27.5804 35.0312 27.9687C35.0312 28.3571 35.3461 28.6719 35.7344 28.6719H36.4375V30.0781H35.7344C35.5479 30.0781 35.3691 30.1522 35.2372 30.284L34.0369 31.4844H31.5156C31.1273 31.4844 30.8125 31.7992 30.8125 32.1875V35H29.4062V32.1875C29.4062 31.7992 29.0914 31.4844 28.7031 31.4844C28.3148 31.4844 28 31.7992 28 32.1875V39.2187C28 39.6071 28.3148 39.9219 28.7031 39.9219C29.0914 39.9219 29.4062 39.6071 29.4062 39.2187V36.4062H30.8125V39.2187C30.8125 39.6071 31.1273 39.9219 31.5156 39.9219H34.0369L36.6435 42.5285C36.7753 42.6603 36.9541 42.7344 37.1406 42.7344H44.2656C44.532 42.7344 44.7754 42.5839 44.8945 42.3457L46.1065 39.9219H47.7812V40.625C47.7812 41.0133 48.0961 41.3281 48.4844 41.3281C50.4229 41.3281 52 39.751 52 37.8125V35C52 33.0615 50.4229 31.4844 48.4844 31.4844ZM33.625 38.5156H32.2188V32.8906H33.625V38.5156ZM37.8438 28.6719H40.75V30.0781H37.8438V28.6719ZM44.9688 39.0528L43.831 41.3281H37.4319L35.0312 38.9275V32.4787L36.0256 31.4844C36.3116 31.4844 42.316 31.4844 42.5681 31.4844L43.7684 32.6847C43.9003 32.8166 44.0791 32.8906 44.2656 32.8906H44.9688C44.9688 33.1781 44.9688 38.8239 44.9688 39.0528ZM47.7812 38.5156H46.375V34.2969H47.7812V38.5156ZM50.5938 37.8125C50.5938 38.7292 50.006 39.5112 49.1875 39.8014C49.1875 39.3076 49.1875 33.1973 49.1875 33.0111C50.006 33.3013 50.5938 34.0833 50.5938 35V37.8125Z"
|
||
|
|
:fill="speedometer.engine" />
|
||
|
|
<path
|
||
|
|
d="M41.4499 35.7033H39.7751L40.6725 33.9084C40.8462 33.561 40.7054 33.1387 40.3581 32.965C40.0108 32.7913 39.5884 32.9322 39.4148 33.2794L38.0085 36.092C37.7753 36.5584 38.1148 37.1096 38.6374 37.1096H40.3122L39.4147 38.9045C39.241 39.2519 39.3818 39.6742 39.7291 39.8479C40.0766 40.0216 40.4989 39.8806 40.6725 39.5334L42.0788 36.7209C42.312 36.2545 41.9725 35.7033 41.4499 35.7033Z"
|
||
|
|
:fill="speedometer.engine" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<clipPath id="clip0_2855_12362">
|
||
|
|
<rect width="19" height="19" fill="white" transform="translate(60 2)" />
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="clip1_2855_12362">
|
||
|
|
<rect width="19" height="19" fill="white" transform="translate(1)" />
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="clip2_2855_12362">
|
||
|
|
<rect width="24" height="24" fill="white" transform="translate(28 23)" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="speed-type" v-if="hudMenu">
|
||
|
|
<h1 @click="typeSpeedometer('rounded')"> AFRUNDET </h1>
|
||
|
|
<p @click="typeSpeedometer('squared')"> FIRKANTET </p><svg width="7.5625rem" height="2.5rem" viewBox="0 0 121 40"
|
||
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="121" height="40" rx="11" fill="url(#paint0_radial_2899_12162)" fill-opacity="0.08" />
|
||
|
|
<rect v-if="speedStyle=='rounded'" x="6" y="7" width="54" height="26" rx="6" fill="url(#paint1_radial_2899_12162)"
|
||
|
|
fill-opacity="0.25" />
|
||
|
|
<rect v-if="speedStyle=='squared' " x="63" y="7" width="54" height="26" rx="6"
|
||
|
|
fill="url(#paint2_radial_2899_12162)" fill-opacity="0.25" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_12162" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(60.5 20) rotate(8.76764) scale(153.797 41.148)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2899_12162" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(33 20) rotate(12.6604) scale(69.5251 26.4044)">
|
||
|
|
<stop stop-color="#379FFF" />
|
||
|
|
<stop offset="1" stop-color="#379FFF" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_2899_12162" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(90 20) rotate(12.6604) scale(69.5251 26.4044)">
|
||
|
|
<stop stop-color="#379FFF" />
|
||
|
|
<stop offset="1" stop-color="#379FFF" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="squared-speedometer" v-if="speedStyle == 'squared' && carHud === true ">
|
||
|
|
|
||
|
|
<div v-if="hud.bars.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('bars', $event.target.value)" @blur="hud.bars.picker = false"
|
||
|
|
:value="hud.bars.color"
|
||
|
|
style="position: absolute; left: 16.2rem; top: -6rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="fuel">{{ Math.min(Math.floor(speedometer.fuel), 100) }}L</div>
|
||
|
|
<div class="speed"><span v-if="speedometer.speedh < 100" style="color:gray">0</span>{{ speedometer.speedh }}</div>
|
||
|
|
<div class="kmh">KM/H</div>
|
||
|
|
<div class="gear">{{ speedometer.gear }}<p>GEAR</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div
|
||
|
|
:style="{position: 'absolute', width: vehiclerpm + '%', top: '3.55rem', left: '.05rem', overflow: 'hidden', transition: '.47s all'}">
|
||
|
|
<svg width="14.9375rem" height="3.6875rem" viewBox="0 0 239 59" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 0.940918 0.00146484)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 8.43164 0.986816)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 15.9214 1.97363)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 23.4119 2.96045)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 30.9023 3.94727)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 38.3928 4.93408)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 45.8828 5.92114)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 53.3735 6.90771)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 60.8638 7.89429)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 68.354 8.88135)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 75.844 9.86816)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 83.3347 10.855)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 90.825 11.8418)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 98.3154 12.8286)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 105.806 13.8154)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 113.296 14.802)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 120.786 15.7888)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 128.277 16.7756)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 135.767 17.7625)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 143.257 18.7493)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 150.748 19.7361)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 158.238 20.7231)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 165.728 21.7097)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 173.219 22.6963)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 180.709 23.6833)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 188.199 24.6702)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 195.69 25.657)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 203.18 26.6438)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 210.67 27.6306)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 218.16 28.6174)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 225.651 29.6042)" :fill="hud.bars.color" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 233.141 30.5911)" :fill="hud.bars.color" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<svg style="position:absolute; top: 3.55rem; left:.05rem" width="18.6875rem" height="4.1875rem" viewBox="0 0 299 67"
|
||
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 0.940918 0.00146484)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 8.43164 0.986816)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 15.9214 1.97363)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 23.4119 2.96045)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 30.9023 3.94727)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 38.3928 4.93408)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 45.8828 5.92114)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 53.3735 6.90771)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 60.8638 7.89429)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 68.354 8.88135)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 75.844 9.86816)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 83.3347 10.855)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 90.825 11.8418)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 98.3154 12.8286)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 105.806 13.8154)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 113.296 14.802)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 120.786 15.7888)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 128.277 16.7756)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 135.767 17.7625)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 143.257 18.7493)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 150.748 19.7361)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 158.238 20.7231)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 165.728 21.7097)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 173.219 22.6963)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 180.709 23.6833)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 188.199 24.6702)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1" transform="matrix(0.991571 0.130633 -0.0256627 0.99981 195.69 25.657)"
|
||
|
|
fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 203.18 26.6438)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 210.67 27.6306)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 218.16 28.6174)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 225.651 29.6042)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="27.1935" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 233.141 30.5911)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 240.864 22.5151)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 248.355 23.5017)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 255.845 24.4888)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 263.335 25.4756)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 270.826 26.4622)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1" transform="matrix(0.991571 0.130633 -0.0256627 0.99981 278.316 27.449)"
|
||
|
|
fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 285.806 28.4358)" fill="#FC4E51" />
|
||
|
|
<rect width="5.036" height="36.258" rx="1"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 293.297 29.4226)" fill="#FC4E51" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<svg width="18.9375rem" height="10.125rem" viewBox="0 0 303 162" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g clip-path="url(#clip0_3044_11441)">
|
||
|
|
<path
|
||
|
|
d="M224.796 130.121L224.679 133.665L223.583 133.521L221.084 129.639L217.563 129.175L217.599 127.793L221.027 128.244L221.073 126.467L212.746 125.37L212.701 127.147L216.129 127.599L216.094 128.982L212.333 128.486L210.577 130.664L207.144 130.212L207.02 135.026L205.629 134.843L205.718 131.374L204.249 131.18L204.021 140.03L205.491 140.223L205.583 136.62L206.975 136.804L206.845 141.855L210.3 142.31L211.981 144.765L220.663 145.903L223.366 142.735L224.442 142.877L224.372 146.63L228.889 147.225L229.311 130.761L224.796 130.121ZM227.465 145.253L225.875 145.044L225.945 141.291L222.757 140.871L220.054 144.039L212.659 143.07L210.979 140.616L208.36 140.271L208.568 132.183L211.209 132.531L212.965 130.353L220.377 131.33L222.875 135.212L226.09 135.635L226.207 132.105L227.797 132.331L227.465 145.253Z"
|
||
|
|
fill="white" />
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<ellipse cx="3.777" cy="4.53225" rx="3.777" ry="4.53225" transform="matrix(0.991571 0.130633 -0.0256627 0.99981 236.711 135.359)" :fill="speedometer.engine" />
|
||
|
|
</g>
|
||
|
|
<!-- <g>
|
||
|
|
<ellipse cx="3.777" cy="4.53225" rx="3.777" ry="4.53225" transform="matrix(0.991571 0.130633 -0.0256627 0.99981 183.379 128.442)" :fill="speedometer.seatbelt" />
|
||
|
|
</g> -->
|
||
|
|
<g clip-path="url(#clip1_3044_11441)">
|
||
|
|
<path
|
||
|
|
d="M259.331 138.63L259.043 149.878L275.038 151.985L275.21 145.26L278.038 141.838L278.253 133.464L265.836 131.828L259.331 138.63ZM273.668 144.344L273.526 149.891L260.652 148.195L260.858 140.171L275.525 142.103L273.668 144.344ZM276.644 135.147L276.511 140.339L262.01 138.428L266.434 133.801L276.644 135.147Z"
|
||
|
|
fill="white" />
|
||
|
|
<path d="M268.598 143.56L271.719 143.971L271.67 145.859L268.549 145.448L268.598 143.56Z" fill="white" />
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<ellipse cx="3.777" cy="4.53225" rx="3.777" ry="4.53225" transform="matrix(0.991571 0.130633 -0.0256627 0.99981 288.094 140.444)" :fill="speedometer.door" />
|
||
|
|
</g>
|
||
|
|
<path style="z-index:1;" @click="hud.bars.picker = !hud.bars.picker"
|
||
|
|
d="M236.054 1.99962C236.082 0.895262 236.993 0.116973 238.089 0.261265L296.542 7.96207C297.637 8.10636 298.502 9.11859 298.474 10.223L297.297 56.069C297.268 57.1734 296.358 57.9517 295.262 57.8074L236.809 50.1066C235.714 49.9623 234.849 48.95 234.877 47.8457L236.054 1.99962Z"
|
||
|
|
:fill="hud.bars.color" />
|
||
|
|
<rect width="13.2402" height="78.435" rx="2"
|
||
|
|
transform="matrix(0.0631852 -0.99733 0.988368 0.132831 28.1484 115.647)" fill="white" fill-opacity="0.34" />
|
||
|
|
<rect width="13.2403" :height="Math.min(speedometer.fuel, 78)" rx="2"
|
||
|
|
transform="matrix(0.0635084 -0.997275 0.988393 0.131907 28.3398 115.741)" :fill="hud.bars.color" />
|
||
|
|
<path
|
||
|
|
d="M136.76 117.576L136.774 117.559L132.961 113.444L131.687 115.009L133.657 117.135C133.148 117.415 132.738 117.871 132.479 118.445C132.221 119.019 132.126 119.684 132.208 120.353C132.328 121.371 132.908 122.314 133.675 122.901C134.537 123.561 135.308 123.613 135.997 123.426L135.806 130.293C135.803 130.477 135.759 130.654 135.679 130.806C135.599 130.959 135.485 131.082 135.348 131.166C135.21 131.25 135.054 131.292 134.892 131.287C134.731 131.282 134.57 131.231 134.423 131.139C134.308 131.067 134.205 130.971 134.119 130.857C134.031 130.742 133.963 130.611 133.917 130.47C133.872 130.329 133.851 130.182 133.855 130.036L133.934 127.817C133.946 127.38 133.882 126.937 133.746 126.513C133.609 126.09 133.403 125.694 133.138 125.35C132.874 125.004 132.558 124.715 132.206 124.5C131.855 124.285 131.476 124.149 131.091 124.098L130.114 123.969L130.343 115.08C130.374 113.855 129.524 112.743 128.447 112.601L121.613 111.701C120.536 111.559 119.635 112.44 119.603 113.666L119.204 129.221C119.172 130.446 120.023 131.559 121.099 131.7L127.934 132.601C129.011 132.743 129.912 131.861 129.943 130.636L130.057 126.191L131.034 126.32C131.167 126.338 131.294 126.384 131.413 126.457C131.643 126.603 131.822 126.839 131.917 127.118C131.964 127.261 131.986 127.411 131.982 127.56L131.901 129.779C131.89 130.23 131.955 130.677 132.098 131.107C132.235 131.525 132.438 131.91 132.697 132.246C132.96 132.593 133.276 132.883 133.628 133.098C133.98 133.313 134.359 133.449 134.744 133.498C135.141 133.55 135.526 133.514 135.892 133.386C136.245 133.265 136.566 133.066 136.838 132.796C137.12 132.523 137.346 132.184 137.504 131.799C137.662 131.413 137.749 130.989 137.759 130.551L138.039 120.554C138.052 119.995 137.942 119.43 137.719 118.91C137.495 118.389 137.165 117.931 136.76 117.576V117.576ZM121.556 113.923L128.39 114.823L128.277 119.268L121.442 118.367L121.556 113.923ZM121.156 129.478L121.385 120.589L128.22 121.49L127.993 130.379L121.156 129.478ZM135.082 121.279C134.823 121.245 134.577 121.095 134.4 120.863C134.222 120.63 134.126 120.334 134.134 120.039C134.141 119.745 134.252 119.476 134.44 119.291C134.628 119.107 134.88 119.023 135.139 119.057C135.398 119.091 135.643 119.241 135.821 119.473C135.998 119.706 136.094 120.002 136.086 120.297C136.079 120.591 135.969 120.86 135.78 121.045C135.592 121.229 135.341 121.313 135.082 121.279Z"
|
||
|
|
fill="white" />
|
||
|
|
<!-- <g clip-path="url(#clip2_3044_11441)">
|
||
|
|
<path
|
||
|
|
d="M163.783 122.137L160.563 118.137C160.406 117.942 160.112 117.905 159.908 118.055C159.703 118.204 159.665 118.484 159.821 118.679L162.757 122.325L159.302 124.851L156.366 121.205C156.209 121.01 155.915 120.973 155.711 121.123C155.506 121.272 155.468 121.552 155.624 121.747L158.844 125.748C158.923 125.845 159.035 125.903 159.154 125.918C159.273 125.933 159.397 125.904 159.499 125.83L163.696 122.762C163.901 122.612 163.939 122.332 163.783 122.137Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M166.678 123.662L165.401 122.076C164.931 121.491 164.049 121.38 163.435 121.829L158.653 125.325C158.355 125.544 158.164 125.859 158.115 126.213C158.066 126.567 158.165 126.917 158.392 127.198C158.773 127.671 159.266 128.301 159.641 128.782C159.867 129.072 160.197 129.259 160.571 129.309C160.576 129.309 160.579 129.31 160.583 129.31C160.955 129.357 161.322 129.263 161.62 129.044L166.419 125.536C167.032 125.088 167.149 124.247 166.678 123.662ZM165.85 124.83L161.052 128.338C160.952 128.412 160.813 128.437 160.702 128.426C160.578 128.41 160.469 128.348 160.394 128.252C160.016 127.766 159.519 127.133 159.135 126.656C159.059 126.562 159.026 126.447 159.042 126.33C159.058 126.211 159.122 126.106 159.222 126.033L164.004 122.537C164.107 122.462 164.231 122.434 164.35 122.449C164.469 122.464 164.582 122.522 164.66 122.62L165.937 124.205C166.012 124.3 166.045 124.416 166.029 124.534C166.013 124.653 165.949 124.757 165.85 124.83Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M168.087 128.521L165.672 125.521C165.515 125.326 165.222 125.289 165.017 125.438C164.812 125.588 164.774 125.868 164.931 126.063L167.06 128.709L164.654 130.468L162.524 127.822C162.367 127.627 162.073 127.59 161.868 127.739C161.664 127.889 161.625 128.169 161.782 128.364L164.196 131.364C164.275 131.461 164.388 131.519 164.507 131.534C164.625 131.549 164.75 131.521 164.853 131.446L168 129.145C168.205 128.996 168.244 128.716 168.087 128.521Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M164.464 124.02C164.307 123.825 164.014 123.788 163.809 123.938L160.661 126.239C160.457 126.389 160.418 126.669 160.575 126.864C160.654 126.961 160.766 127.019 160.885 127.034C161.004 127.049 161.128 127.021 161.23 126.946L164.378 124.645C164.583 124.495 164.621 124.215 164.464 124.02Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M175.857 137.137L173.442 134.137C173.285 133.942 172.991 133.905 172.787 134.055L168.59 137.123C168.385 137.272 168.346 137.552 168.503 137.747L170.918 140.748C170.997 140.845 171.11 140.903 171.228 140.918C171.347 140.933 171.471 140.904 171.573 140.829C171.778 140.679 171.817 140.399 171.66 140.204L169.53 137.558L172.985 135.032L175.115 137.679C175.272 137.874 175.566 137.911 175.77 137.762C175.975 137.612 176.014 137.332 175.857 137.137Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M173.521 134.298C173.503 134.229 173.469 134.167 173.422 134.116C173.291 133.901 172.698 132.715 171.402 129.976C171.226 129.604 170.888 129.333 170.473 129.233C170.054 129.133 169.618 129.22 169.274 129.472L164.841 132.713C164.501 132.961 164.302 133.336 164.292 133.744C164.283 134.152 164.466 134.536 164.793 134.799L168.571 137.818C168.641 137.874 168.725 137.907 168.811 137.918C168.93 137.933 169.055 137.904 169.155 137.828L173.352 134.76C173.5 134.652 173.567 134.471 173.521 134.298ZM168.886 136.906L165.395 134.116C165.286 134.029 165.225 133.901 165.228 133.765C165.231 133.628 165.298 133.503 165.41 133.421L169.843 130.18C169.945 130.106 170.069 130.074 170.193 130.09C170.21 130.092 170.228 130.095 170.248 130.099C170.327 130.118 170.473 130.175 170.553 130.344C171.633 132.629 172.161 133.741 172.464 134.29L168.886 136.906Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M170.902 132.02C170.745 131.825 170.451 131.788 170.246 131.938L167.099 134.239C166.894 134.389 166.855 134.669 167.012 134.864C167.091 134.961 167.204 135.019 167.323 135.034C167.441 135.049 167.566 135.021 167.668 134.946L170.815 132.645C171.02 132.496 171.059 132.215 170.902 132.02Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M168.913 123.548C168.657 123.516 168.422 123.688 168.388 123.932L168.266 124.816C168.232 125.059 168.412 125.283 168.668 125.316C168.924 125.348 169.159 125.176 169.193 124.932L169.315 124.049C169.349 123.805 169.169 123.581 168.913 123.548Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M172.133 127.549L171.206 127.432C170.95 127.4 170.715 127.572 170.681 127.816C170.647 128.06 170.828 128.284 171.084 128.316L172.011 128.432C172.266 128.464 172.501 128.293 172.535 128.049C172.569 127.805 172.389 127.581 172.133 127.549Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M171.88 124.953C171.723 124.757 171.429 124.721 171.224 124.87L170.175 125.637C169.971 125.787 169.932 126.067 170.089 126.262C170.168 126.359 170.28 126.417 170.399 126.432C170.518 126.447 170.642 126.419 170.744 126.344L171.793 125.577C171.998 125.428 172.037 125.148 171.88 124.953Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M162.811 133.569C162.555 133.537 162.32 133.709 162.287 133.953L162.164 134.836C162.131 135.08 162.311 135.304 162.567 135.336C162.823 135.368 163.058 135.196 163.091 134.953L163.214 134.069C163.247 133.825 163.067 133.601 162.811 133.569Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M160.398 130.568L159.471 130.452C159.215 130.42 158.98 130.591 158.947 130.835C158.913 131.079 159.093 131.303 159.349 131.335L160.276 131.452C160.532 131.484 160.767 131.312 160.801 131.068C160.835 130.824 160.654 130.6 160.398 130.568Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M161.388 132.623C161.231 132.428 160.937 132.391 160.732 132.541L159.683 133.308C159.478 133.458 159.44 133.738 159.597 133.933C159.676 134.03 159.788 134.088 159.907 134.103C160.026 134.118 160.15 134.09 160.252 134.015L161.301 133.248C161.506 133.099 161.545 132.818 161.388 132.623Z"
|
||
|
|
fill="white" />
|
||
|
|
</g> -->
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_3044_11441" x="232.594" y="131.825" width="15.4922" height="17.1172"
|
||
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="2" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.627451 0 0 0 0 0.898039 0 0 0 0 0.341176 0 0 0 0.5 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_11441" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_11441" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter1_d_3044_11441" x="179.262" y="124.908" width="15.4922" height="17.1172"
|
||
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="2" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.627451 0 0 0 0 0.898039 0 0 0 0 0.341176 0 0 0 0.5 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_11441" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_11441" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<filter id="filter2_d_3044_11441" x="283.977" y="136.91" width="15.4922" height="17.1172"
|
||
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset />
|
||
|
|
<feGaussianBlur stdDeviation="2" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0.917647 0 0 0 0 0.223529 0 0 0 0 0.258824 0 0 0 0.5 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_11441" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_11441" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<clipPath id="clip0_3044_11441">
|
||
|
|
<rect width="25.18" height="30.215" fill="white"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 204.562 119)" />
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="clip1_3044_11441">
|
||
|
|
<rect width="18.885" height="22.6613" fill="white"
|
||
|
|
transform="matrix(0.991571 0.130633 -0.0256627 0.99981 259.574 129.109)" />
|
||
|
|
</clipPath>
|
||
|
|
<clipPath id="clip2_3044_11441">
|
||
|
|
<rect width="22.4232" height="21.4065" fill="white"
|
||
|
|
transform="matrix(0.992199 0.124666 -0.137014 0.990569 156.082 117.442)" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="cash" v-if="allHud" :style="{ top: hud.cash.position.top, left: hud.cash.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('cash')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.cash.drag != true" @click="hud.cash.picker = !hud.cash.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.cash.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'cash', 'cash', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p>{{ player.cash.amount }}</p>
|
||
|
|
<svg width="10.5rem" height="4.5625rem" viewBox="0 0 168 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.cash.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M149.845 25.5C150.56 26.7376 150.56 28.2624 149.845 29.5L141.405 44.1195C140.69 45.3571 139.37 46.1195 137.941 46.1195L121.059 46.1195C119.63 46.1195 118.31 45.3571 117.595 44.1195L109.155 29.5C108.44 28.2624 108.44 26.7376 109.155 25.5L117.595 10.8805C118.31 9.64285 119.63 8.88045 121.059 8.88045L137.941 8.88045C139.37 8.88045 140.69 9.64285 141.405 10.8805L149.845 25.5Z"
|
||
|
|
fill="url(#paint0_radial_450_682)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M149.412 29.25L140.972 43.8695C140.346 44.9524 139.191 45.6195 137.941 45.6195L121.059 45.6195C119.809 45.6195 118.654 44.9524 118.028 43.8695L109.588 29.25C108.962 28.1671 108.962 26.8329 109.588 25.75L118.028 11.1305C118.654 10.0475 119.809 9.38045 121.059 9.38045L137.941 9.38045C139.191 9.38045 140.346 10.0475 140.972 11.1305L149.412 25.75C150.038 26.8329 150.038 28.1671 149.412 29.25Z"
|
||
|
|
:stroke="hud.cash.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M109 27.4999L117.5 41.7893L110.559 41.7893C109.13 41.7893 107.81 41.0269 107.095 39.7893L101.155 29.4999C100.44 28.2623 100.44 26.7375 101.155 25.4999L107.095 15.2104C107.81 13.9728 109.13 13.2104 110.559 13.2104L117.5 13.2104L109 27.4999Z"
|
||
|
|
fill="url(#paint1_radial_450_682)" />
|
||
|
|
<path
|
||
|
|
d="M94.5703 27.2443L94.4182 27.4999L94.5703 27.7555L102.621 41.2893L11.3094 41.2893C10.059 41.2893 8.90353 40.6222 8.27831 39.5393L2.33771 29.2499C1.7125 28.167 1.7125 26.8328 2.33771 25.7499L8.27831 15.4604C8.90353 14.3775 10.059 13.7104 11.3094 13.7104L102.621 13.7104L94.5703 27.2443Z"
|
||
|
|
fill="url(#paint2_linear_450_682)" fill-opacity="0.25" stroke="url(#paint3_linear_450_682)" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M128.32 18.1752L128.309 19.3504L127.944 19.443C125.573 20.0448 124.124 21.6759 124.125 23.7422C124.125 24.8954 124.52 25.8862 125.289 26.6597C125.852 27.2261 126.4 27.5842 127.271 27.9565C127.707 28.1427 128.109 28.2753 130.305 28.9566C132.275 29.5681 132.912 30.0448 133.06 31.0193C133.21 32.0011 132.649 32.6101 131.313 32.9162C130.039 33.2081 128.577 33.0501 127.408 32.4943C127.055 32.3266 126.492 31.9627 126.314 31.7874C126.234 31.7077 126.151 31.6426 126.13 31.6426C126.109 31.6426 125.622 32.0686 125.046 32.5893L124 33.536L124.275 33.782C124.656 34.1223 124.813 34.2396 125.289 34.5402C126.048 35.0187 127.12 35.454 128 35.6411L128.33 35.7114V36.8557V38H129.789H131.247L131.259 36.8828L131.27 35.7657L131.549 35.7173C134.438 35.2172 136.134 33.4575 135.992 31.1094C135.933 30.1337 135.692 29.3969 135.203 28.6896C134.979 28.3651 134.46 27.8588 134.051 27.5656C133.225 26.9728 132.522 26.6884 129.983 25.9195C128.48 25.4644 127.913 25.215 127.485 24.8209C127.157 24.5192 127.07 24.2993 127.067 23.7676C127.065 23.3769 127.075 23.3178 127.179 23.1318C127.549 22.4684 128.419 22.0815 129.811 21.9613C130.969 21.8613 132.189 22.0813 133.218 22.5757C133.476 22.6997 133.568 22.7272 133.6 22.6894C133.623 22.662 133.981 22.137 134.396 21.5228L135.15 20.4059L134.881 20.2624C134.408 20.0098 133.816 19.7621 133.309 19.6054C132.815 19.4527 131.714 19.2153 131.499 19.215C131.238 19.2146 131.249 19.2641 131.249 18.0825V17H129.79H128.332L128.32 18.1752Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_450_682" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(129.5 27.5) rotate(147.529) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.cash.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.cash.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_450_682" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(116.5 27.4999) rotate(147.529) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.cash.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.cash.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="paint2_linear_450_682" x1="98.5" y1="26.9999" x2="14.4999" y2="26.9999"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.cash.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.cash.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint3_linear_450_682" x1="103.5" y1="27.4999" x2="11.2501" y2="27.4999"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.cash.color" stop-opacity="0" />
|
||
|
|
<stop offset="1" :stop-color="hud.cash.color" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.cash.picker" style="position: absolute; top:4rem; left:-4rem">
|
||
|
|
<input type="color" @input="updateColor('cash', $event.target.value)" @blur="hud.cash.picker = false"
|
||
|
|
:value="hud.cash.color"
|
||
|
|
style="position: absolute; right: 3rem; top: -3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bank" v-if="allHud" :style="{ top: hud.bank.position.top, left: hud.bank.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('bank')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<div class="color" v-if="hudMenu && hud.bank.drag !=true" @click="hud.bank.picker = !hud.bank.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div v-if="hudMenu && hud.bank.drag !=true" @mousedown.stop="mouseDownHandler('hud', 'bank', 'bank', $event)"
|
||
|
|
class="drag">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p>{{ player.bank.amount }}</p>
|
||
|
|
<svg width="10.5rem" height="4.5625rem" viewBox="0 0 168 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.bank.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M149.845 25.5C150.56 26.7376 150.56 28.2624 149.845 29.5L141.405 44.1195C140.69 45.3571 139.37 46.1195 137.941 46.1195L121.059 46.1195C119.63 46.1195 118.31 45.3571 117.595 44.1195L109.155 29.5C108.44 28.2624 108.44 26.7376 109.155 25.5L117.595 10.8805C118.31 9.64285 119.63 8.88045 121.059 8.88045L137.941 8.88045C139.37 8.88045 140.69 9.64285 141.405 10.8805L149.845 25.5Z"
|
||
|
|
fill="url(#paint0_radial_2855_12188)" shape-rendering="crispEdges"></path>
|
||
|
|
<path
|
||
|
|
d="M149.412 29.25L140.972 43.8695C140.346 44.9524 139.191 45.6195 137.941 45.6195L121.059 45.6195C119.809 45.6195 118.654 44.9524 118.028 43.8695L109.588 29.25C108.962 28.1671 108.962 26.8329 109.588 25.75L118.028 11.1305C118.654 10.0475 119.809 9.38045 121.059 9.38045L137.941 9.38045C139.191 9.38045 140.346 10.0475 140.972 11.1305L149.412 25.75C150.038 26.8329 150.038 28.1671 149.412 29.25Z"
|
||
|
|
:stroke="hud.bank.color" shape-rendering="crispEdges"></path>
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M109 27.4999L117.5 41.7893L110.559 41.7893C109.13 41.7893 107.81 41.0269 107.095 39.7893L101.155 29.4999C100.44 28.2623 100.44 26.7375 101.155 25.4999L107.095 15.2104C107.81 13.9728 109.13 13.2104 110.559 13.2104L117.5 13.2104L109 27.4999Z"
|
||
|
|
fill="url(#paint1_radial_2855_12188)"></path>
|
||
|
|
<path
|
||
|
|
d="M94.5703 27.2443L94.4182 27.4999L94.5703 27.7555L102.621 41.2893L11.3094 41.2893C10.059 41.2893 8.90353 40.6222 8.27831 39.5393L2.33771 29.2499C1.7125 28.167 1.7125 26.8328 2.33771 25.7499L8.27831 15.4604C8.90353 14.3775 10.059 13.7104 11.3094 13.7104L102.621 13.7104L94.5703 27.2443Z"
|
||
|
|
fill="url(#paint2_linear_2855_12188)" fill-opacity="0.25" stroke="url(#paint3_linear_2855_12188)"></path>
|
||
|
|
<path fill="white"
|
||
|
|
d="M103.25 19.0306C 102.955 19.1164 95.4815 22.193 95.3794 22.2706C95.241 22.376 95.0803 22.6141 95.0329 22.7842C95.0149 22.8488 95.0001 23.264 95 23.7066C94.9998 24.4315 95.0065 24.5293 95.0667 24.69C95.1575 24.932 95.33 25.1229 95.559 25.2351L95.7498 25.3286H103.5H111.25L111.441 25.2351C111.67 25.1229 111.842 24.932 111.933 24.69C111.994 24.5293 112 24.4315 112 23.7066C112 23.2614 111.985 22.8471 111.966 22.7795C111.916 22.6023 111.737 22.3528 111.584 22.247C111.456 22.1595 104.008 19.1044 103.744 19.0311C103.595 18.9898 103.391 18.9896 103.25 19.0306ZM103.792 21.2502C103.978 21.3828 104 21.4799 104 22.1875C104 22.7825 103.995 22.835 103.927 22.9554C103.851 23.0915 103.645 23.2175 103.5 23.2175C103.353 23.2175 103.149 23.0915 103.071 22.952C102.999 22.8248 102.997 22.7918 103.006 22.1458C103.016 21.512 103.021 21.4661 103.091 21.3688C103.246 21.1522 103.575 21.0964 103.792 21.2502ZM96.5998 29.1018V31.8611H98.1665H99.7332V29.1018V26.3425H98.1665H96.5998V29.1018ZM101.933 29.1018V31.8611H103.5H105.067V29.1018V26.3425H103.5H101.933V29.1018ZM107.267 29.1018V31.8611H108.833H110.4V29.1018V26.3425H108.833H107.267V29.1018ZM95.6473 32.9268C95.423 33.0129 95.2365 33.1771 95.1154 33.395L95.0165 33.5732V34.4375C95.0165 35.271 95.0192 35.3069 95.0917 35.4422C95.2096 35.6624 95.3551 35.8067 95.5604 35.9072L95.7498 36H103.5H111.25L111.441 35.9065C111.672 35.7936 111.843 35.6032 111.935 35.3559C111.999 35.1851 112.004 35.1142 111.994 34.3725L111.984 33.5732L111.885 33.395C111.761 33.1731 111.576 33.0119 111.343 32.9252C111.166 32.859 111.095 32.8584 103.49 32.8601C95.9606 32.8618 95.8133 32.8631 95.6473 32.9268Z"
|
||
|
|
clip-rule="evenodd" fill-rule="evenodd" style="transform: translateX(26px);"></path>
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_12188" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(129.5 27.5) rotate(147.529) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.bank.color" stop-opacity="0.53"></stop>
|
||
|
|
<stop offset="1" :stop-color="hud.bank.color"></stop>
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_12188" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(116.5 27.4999) rotate(147.529) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.bank.color" stop-opacity="0.53"></stop>
|
||
|
|
<stop offset="1" :stop-color="hud.bank.color"></stop>
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="paint2_linear_2855_12188" x1="98.5" y1="26.9999" x2="14.4999" y2="26.9999"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.bank.color" stop-opacity="0.53"></stop>
|
||
|
|
<stop offset="1" :stop-color="hud.bank.color"></stop>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint3_linear_2855_12188" x1="103.5" y1="27.4999" x2="11.2501" y2="27.4999"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.bank.color" stop-opacity="0"></stop>
|
||
|
|
<stop offset="1" :stop-color="hud.bank.color"></stop>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.bank.picker" style="position: absolute; top:4rem; left:-4rem">
|
||
|
|
<input type="color" @input="updateColor('bank', $event.target.value)" @blur="hud.bank.picker = false"
|
||
|
|
:value="hud.bank.color"
|
||
|
|
style="position: absolute; right: 3rem; top: -3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="black" style="display:none;" :style="{ top: hud.black.position.top, left: hud.black.position.left }" v-if="allHud">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('black')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i></div>
|
||
|
|
<div class="color" style="left:-3.2rem" v-if="hudMenu && hud.black.drag != true"
|
||
|
|
@click="hud.black.picker = !hud.black.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.black.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'black', 'black', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p>{{ player.black.amount }}</p>
|
||
|
|
<svg width="7.3125rem" height="4.5625rem" viewBox="0 0 117 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.black.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M98.8453 25.5C99.5598 26.7376 99.5598 28.2624 98.8453 29.5L90.4047 44.1195C89.6902 45.3571 88.3697 46.1195 86.9406 46.1195L70.0594 46.1195C68.6303 46.1195 67.3098 45.3571 66.5953 44.1195L58.1547 29.5C57.4402 28.2624 57.4402 26.7376 58.1547 25.5L66.5953 10.8805C67.3098 9.64285 68.6303 8.88045 70.0594 8.88045L86.9406 8.88045C88.3697 8.88045 89.6902 9.64285 90.4047 10.8805L98.8453 25.5Z"
|
||
|
|
fill="url(#paint0_radial_2852_11296)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M98.4123 29.25L89.9717 43.8695C89.3465 44.9524 88.191 45.6195 86.9406 45.6195L70.0594 45.6195C68.809 45.6195 67.6535 44.9524 67.0283 43.8695L58.5877 29.25C57.9625 28.1671 57.9625 26.8329 58.5877 25.75L67.0283 11.1305C67.6535 10.0475 68.809 9.38045 70.0594 9.38045L86.9406 9.38045C88.191 9.38045 89.3465 10.0475 89.9717 11.1305L98.4123 25.75C99.0375 26.8329 99.0375 28.1671 98.4123 29.25Z"
|
||
|
|
:stroke="hud.black.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M58 27.5004L66.5 41.7898L59.5594 41.7898C58.1303 41.7898 56.8098 41.0274 56.0953 39.7898L50.1547 29.5004C49.4402 28.2628 49.4402 26.738 50.1547 25.5004L56.0953 15.2109C56.8098 13.9733 58.1303 13.2109 59.5594 13.2109L66.5 13.2109L58 27.5004Z"
|
||
|
|
fill="url(#paint1_radial_2852_11296)" />
|
||
|
|
<path
|
||
|
|
d="M43.5703 27.2447L43.4182 27.5004L43.5703 27.756L51.6208 41.2898L11.3094 41.2898C10.059 41.2898 8.90353 40.6227 8.27831 39.5398L2.33771 29.2504C1.7125 28.1675 1.7125 26.8333 2.33771 25.7504L8.27831 15.4609C8.90353 14.378 10.059 13.7109 11.3094 13.7109L51.6208 13.7109L43.5703 27.2447Z"
|
||
|
|
fill="url(#paint2_linear_2852_11296)" fill-opacity="0.25" stroke="url(#paint3_linear_2852_11296)" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M74.8088 19.0445C74.5996 19.0974 74.4337 19.1834 74.228 19.3456C73.941 19.572 73.9063 19.7969 74.0933 20.2195C74.1584 20.3665 74.2651 20.7087 74.336 20.9972C74.4056 21.2806 74.5023 21.6397 74.5508 21.7951C74.651 22.1157 74.918 22.7191 74.9598 22.7191C74.975 22.7191 75.0735 22.6786 75.1788 22.6291C75.6071 22.4276 76.2497 22.241 76.7586 22.1702C77.2273 22.105 79.7716 22.1063 80.2509 22.1719C80.7024 22.2337 81.2195 22.3746 81.6415 22.5507C81.8283 22.6287 81.985 22.688 81.9896 22.6824C81.9943 22.6768 82.0461 22.5736 82.1049 22.4532C82.2981 22.0573 82.3856 21.7882 82.6062 20.911C82.6742 20.6406 82.7776 20.3138 82.8359 20.1847C83.017 19.7844 82.9764 19.5688 82.6767 19.3376C82.317 19.06 81.9616 18.966 81.5544 19.0408C81.1799 19.1095 80.8908 19.2711 80.1194 19.8428C79.9685 19.9547 79.8411 20.0271 79.805 20.0217C79.7657 20.0158 79.6974 19.9301 79.6107 19.778C79.3599 19.3374 79.0594 19.104 78.6391 19.0231C78.1089 18.921 77.545 19.2622 77.2364 19.8718C77.1496 20.0431 77.1154 20.0424 76.868 19.8644C75.9985 19.2388 75.7483 19.0969 75.3939 19.0285C75.1754 18.9863 75.0221 18.9905 74.8088 19.0445ZM76.9579 23.193C76.6434 23.2293 76.1589 23.3552 75.8046 23.4927C73.5615 24.363 72 26.7361 72 29.2747C72 31.9001 73.7379 34.2139 76.179 34.8386C76.779 34.9921 76.8925 35 78.5007 35C80.1089 35 80.2224 34.9921 80.8224 34.8386C82.7821 34.3371 84.3412 32.7182 84.8348 30.6722C85.2004 29.1572 84.9529 27.4973 84.1541 26.1068C83.5728 25.0949 82.7187 24.2503 81.7804 23.7595C81.2008 23.4563 80.5636 23.2532 79.9923 23.1896C79.6452 23.1509 77.2997 23.1536 76.9579 23.193ZM78.671 25.6309C78.7965 25.6803 78.9467 25.846 78.9801 25.9718C78.9964 26.0328 79.0097 26.2325 79.0098 26.4156L79.01 26.7486L79.1227 26.7957C79.2789 26.861 79.5427 27.0736 79.6646 27.2325C79.8835 27.5179 80.017 27.9306 79.992 28.245C79.9676 28.5529 79.7444 28.7481 79.4505 28.7186C79.1975 28.6932 79.0551 28.5346 79.0079 28.2256C78.9908 28.1139 78.9474 27.9776 78.9115 27.9225C78.6743 27.559 78.1353 27.6524 78.0209 28.0768C77.9597 28.3038 78.057 28.4004 78.7554 28.8053C79.4611 29.2146 79.7276 29.4487 79.8951 29.8062C80.0541 30.1456 80.0211 30.6391 79.8118 31.0504C79.6982 31.2737 79.3783 31.594 79.1665 31.6965L79.01 31.7723L79.0098 32.0877C79.0096 32.481 78.9732 32.6209 78.833 32.7674C78.6398 32.9691 78.3616 32.9691 78.1685 32.7674C78.0282 32.6209 77.9918 32.481 77.9916 32.0877L77.9914 31.7723L77.8349 31.6965C77.6231 31.594 77.3032 31.2737 77.1896 31.0504C76.9992 30.6761 76.9497 30.2032 77.0816 30.0187C77.1888 29.8687 77.2915 29.8108 77.4743 29.7975C77.6184 29.787 77.6638 29.7969 77.749 29.858C77.9047 29.9696 77.9604 30.0697 77.9977 30.3051C78.0272 30.491 78.0485 30.5385 78.154 30.6532C78.3647 30.8826 78.6372 30.8821 78.8488 30.6518C78.9758 30.5135 79.0235 30.3651 78.9796 30.2441C78.9423 30.1412 78.7469 29.9988 78.2285 29.6969C77.695 29.3862 77.4821 29.2296 77.3007 29.0144C76.8941 28.5319 76.9093 27.7957 77.3377 27.2325C77.4582 27.0741 77.7218 26.8613 77.8787 26.7957L77.9914 26.7486V26.4154C77.9914 26.0276 78.0191 25.9029 78.1331 25.7761C78.2803 25.6126 78.4845 25.5574 78.671 25.6309Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2852_11296" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(78.5 27.5) rotate(147.529) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.black.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2852_11296" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(65.5 27.5003) rotate(147.529) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.black.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="paint2_linear_2852_11296" x1="47.5" y1="27.0004" x2="-36.4999" y2="27.0004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.black.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint3_linear_2852_11296" x1="52.5" y1="27.5004" x2="-39.7499" y2="27.5004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.black.color" stop-opacity="0" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.black.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('black', $event.target.value)" @blur="hud.black.picker = false"
|
||
|
|
:value="hud.black.color"
|
||
|
|
style="position: absolute; right: 6.5rem; top: -3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="job" :style="{ top: hud.job.position.top, left: hud.job.position.left }" v-if="allHud">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('job')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i></div>
|
||
|
|
<div class="color" style="left:-3.2rem" v-if="hudMenu && hud.job.drag != true"
|
||
|
|
@click="hud.job.picker = !hud.job.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" :stop-color="hud.job.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.job.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'job', 'job', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p>{{ player.job.name }}</p>
|
||
|
|
<h1>{{ player.job.grade }}</h1>
|
||
|
|
<svg width="14.6875rem" height="4.5625rem" viewBox="0 0 219 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.job.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M200.595 25.5C201.31 26.7376 201.31 28.2624 200.595 29.5L192.155 44.1195C191.44 45.3571 190.12 46.1195 188.691 46.1195L171.809 46.1195C170.38 46.1195 169.06 45.3571 168.345 44.1195L159.905 29.5C159.19 28.2624 159.19 26.7376 159.905 25.5L168.345 10.8805C169.06 9.64285 170.38 8.88045 171.809 8.88045L188.691 8.88045C190.12 8.88045 191.44 9.64285 192.155 10.8805L200.595 25.5Z"
|
||
|
|
fill="url(#paint0_radial_2852_11259)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M200.162 29.25L191.722 43.8695C191.096 44.9524 189.941 45.6195 188.691 45.6195L171.809 45.6195C170.559 45.6195 169.404 44.9524 168.778 43.8695L160.338 29.25C159.712 28.1671 159.712 26.8329 160.338 25.75L168.778 11.1305C169.404 10.0475 170.559 9.38045 171.809 9.38045L188.691 9.38045C189.941 9.38045 191.096 10.0475 191.722 11.1305L200.162 25.75C200.788 26.8329 200.788 28.1671 200.162 29.25Z"
|
||
|
|
:stroke="hud.job.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M159.75 27.5004L168.25 41.7898L161.309 41.7898C159.88 41.7898 158.56 41.0274 157.845 39.7898L151.905 29.5004C151.19 28.2628 151.19 26.738 151.905 25.5004L157.845 15.2109C158.56 13.9733 159.88 13.2109 161.309 13.2109L168.25 13.2109L159.75 27.5004Z"
|
||
|
|
fill="url(#paint1_radial_2852_11259)" />
|
||
|
|
<path
|
||
|
|
d="M145.32 27.2447L145.168 27.5004L145.32 27.756L153.371 41.2898L10.5594 41.2898C9.30897 41.2898 8.15353 40.6227 7.5283 39.5398L1.58771 29.2504C0.962493 28.1675 0.962493 26.8333 1.58771 25.7504L7.5283 15.4609C8.15353 14.378 9.30898 13.7109 10.5594 13.7109L153.371 13.7109L145.32 27.2447Z"
|
||
|
|
fill="url(#paint2_linear_2852_11259)" fill-opacity="0.25" stroke="url(#paint3_linear_2852_11259)" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M178.5 20.0365C177.959 20.1538 177.546 20.5591 177.445 21.0725C177.426 21.168 177.41 21.5928 177.41 22.0164V22.7868L175.397 22.7873C173.158 22.7878 173.132 22.7899 172.694 23.0108C172.246 23.2363 171.924 23.649 171.799 24.1576C171.717 24.4915 171.748 25.66 171.848 26.0212C172.1 26.9256 172.797 27.6578 173.699 27.9637C173.936 28.0442 179.841 29.6878 180.099 29.7452C180.446 29.8224 181.09 29.8158 181.459 29.7313C181.772 29.6596 187.561 28.0466 187.801 27.9642C188.707 27.6537 189.4 26.9256 189.652 26.0212C189.752 25.6614 189.783 24.4915 189.701 24.1597C189.578 23.6594 189.244 23.2315 188.804 23.0095C188.368 22.7901 188.34 22.7878 186.106 22.7873L184.096 22.7868L184.082 21.9192C184.07 21.1953 184.057 21.023 184.004 20.8787C183.879 20.5342 183.527 20.1961 183.163 20.0705C182.996 20.0127 182.826 20.0076 180.838 20.0013C179.232 19.9963 178.645 20.0051 178.5 20.0365ZM182.865 21.1579C182.924 21.2089 182.93 21.2811 182.93 22.0002V22.7868H180.75H178.57V22.0061C178.57 21.3269 178.578 21.2174 178.628 21.1638C178.684 21.1055 178.796 21.1022 180.744 21.1022C182.609 21.1022 182.807 21.1074 182.865 21.1579ZM171.751 30.7436C171.751 33.7015 171.749 33.672 171.957 34.0654C172.165 34.4604 172.543 34.7678 173.009 34.9221L173.244 35H180.75H188.256L188.491 34.9221C188.957 34.7678 189.335 34.4604 189.543 34.0654C189.751 33.672 189.749 33.7017 189.749 30.7418L189.75 28.0334L189.583 28.1826C189.208 28.5181 188.742 28.7952 188.263 28.9677C188.132 29.0151 186.866 29.3785 185.451 29.7754C181.334 30.9295 181.368 30.9218 180.609 30.8955C179.946 30.8726 180.119 30.9156 175.705 29.6768C174.429 29.3187 173.301 28.9941 173.199 28.9555C172.751 28.7859 172.317 28.5289 171.97 28.2276L171.75 28.037L171.751 30.7436Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M87.25 17H145.25L138.75 27.5L145.25 38H87.25L81.0758 28.0264C80.8762 27.7038 80.8762 27.2962 81.0758 26.9736L87.25 17Z"
|
||
|
|
fill="black" fill-opacity="0.17" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2852_11259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(180.25 27.5) rotate(147.529) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.job.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.job.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2852_11259" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(167.25 27.5003) rotate(147.529) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.job.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.job.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="paint2_linear_2852_11259" x1="149.25" y1="27.0004" x2="65.2499" y2="27.0004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.job.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.job.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint3_linear_2852_11259" x1="154.25" y1="27.5004" x2="62.0001" y2="27.5004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.job.color" stop-opacity="0" />
|
||
|
|
<stop offset="1" :stop-color="hud.job.color" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.job.picker" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('job', $event.target.value)" @blur="hud.job.picker = false"
|
||
|
|
:value="hud.job.color"
|
||
|
|
style="position: absolute; right: 6.7rem; top: -3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weapon" :style="{ top: hud.weapon.position.top, left: hud.weapon.position.left }"
|
||
|
|
v-if="player.weapon.variable || hudMenu">
|
||
|
|
<!-- <div class="images"
|
||
|
|
:style="player.weapon.variable ? { backgroundImage: `url(./assets/gun/${player.weapon.img}.png)` } : hudMenu ? { backgroundImage: 'url(./assets/gun/assaultrifle.png)' } : {}">
|
||
|
|
</div> -->
|
||
|
|
<div class="color" style="left:-3rem; top:0.44rem" v-if="hudMenu && hud.weapon.drag != true"
|
||
|
|
@click="hud.weapon.picker = !hud.weapon.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<p>{{ player.weapon.name }}</p>
|
||
|
|
<h1>{{ player.weapon.ammo }}</h1>
|
||
|
|
<svg width="14.3125rem" height="4.5625rem" viewBox="0 0 229 73" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.weapon.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M210.595 25.5C211.31 26.7376 211.31 28.2624 210.595 29.5L202.155 44.1195C201.44 45.3572 200.12 46.1195 198.691 46.1195L181.809 46.1195C180.38 46.1195 179.06 45.3571 178.345 44.1195L169.905 29.5C169.19 28.2624 169.19 26.7376 169.905 25.5L178.345 10.8805C179.06 9.64285 180.38 8.88045 181.809 8.88045L198.691 8.88045C200.12 8.88045 201.44 9.64285 202.155 10.8805L210.595 25.5Z"
|
||
|
|
fill="url(#paint0_radial_2852_11311)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M210.162 25.75C210.788 26.8329 210.788 28.1671 210.162 29.25L201.722 43.8695C201.096 44.9524 199.941 45.6195 198.691 45.6195L181.809 45.6195C180.559 45.6195 179.404 44.9524 178.778 43.8695L170.338 29.25C169.712 28.1671 169.712 26.8329 170.338 25.75L178.778 11.1305C179.404 10.0475 180.559 9.38045 181.809 9.38045L198.691 9.38045C199.941 9.38045 201.096 10.0475 201.722 11.1305L210.162 25.75Z"
|
||
|
|
:stroke="hud.weapon.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M169.75 27.5004L178.25 41.7898L171.309 41.7898C169.88 41.7898 168.56 41.0274 167.845 39.7898L161.905 29.5004C161.19 28.2628 161.19 26.738 161.905 25.5004L167.845 15.2109C168.56 13.9733 169.88 13.2109 171.309 13.2109L178.25 13.2109L169.75 27.5004Z"
|
||
|
|
fill="url(#paint1_radial_2852_11311)" />
|
||
|
|
<path
|
||
|
|
d="M155.32 27.2447L155.168 27.5004L155.32 27.756L163.371 41.2898L10.5594 41.2898C9.30897 41.2898 8.15353 40.6227 7.52832 39.5398L1.58771 29.2504C0.962493 28.1675 0.962493 26.8333 1.58771 25.7504L7.52832 15.4609C8.15353 14.378 9.30898 13.7109 10.5594 13.7109L163.371 13.7109L155.32 27.2447Z"
|
||
|
|
fill="url(#paint2_linear_2852_11311)" fill-opacity="0.25" stroke="url(#paint3_linear_2852_11311)" />
|
||
|
|
<path
|
||
|
|
d="M97.25 17H155.25L148.75 27.5L155.25 38H97.25L91.0758 28.0264C90.8762 27.7038 90.8762 27.2962 91.0758 26.9736L97.25 17Z"
|
||
|
|
fill="black" fill-opacity="0.17" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M198.347 15.0587C198.207 15.1358 198.119 15.2959 198.117 15.4783C198.116 15.5967 198.171 15.6822 198.418 15.9414L198.719 16.2593L198.34 16.6384L197.96 17.0174L197.801 16.8694C197.56 16.646 197.499 16.6082 197.323 16.5687C196.955 16.4862 197.009 16.441 194.279 19.1455C192.878 20.5338 191.7 21.7288 191.662 21.801C191.623 21.8733 191.592 22.028 191.592 22.1448C191.592 22.3413 191.574 22.3743 191.354 22.59C191.166 22.775 191.09 22.8208 190.986 22.8125C190.646 22.7852 190.614 22.8028 190.115 23.286L189.629 23.7564L189.225 23.3485C188.751 22.8708 188.494 22.7263 188.119 22.7272C187.972 22.7275 187.796 22.762 187.689 22.8117C187.54 22.8808 185.621 24.4004 184.691 25.1851C184.359 25.4648 184.254 25.679 184.254 26.0738C184.254 26.291 184.279 26.4371 184.336 26.5457C184.382 26.6322 184.671 26.9561 184.98 27.2654L185.541 27.828L185.087 28.2766C184.615 28.744 184.504 28.9378 184.567 29.1879C184.591 29.2825 184.556 29.3411 184.358 29.5405C184.137 29.7627 184.109 29.7777 183.955 29.7534C183.845 29.7358 183.739 29.7524 183.636 29.8035C183.455 29.8936 178.917 34.3731 178.817 34.5613C178.722 34.7379 178.729 35.0578 178.831 35.2139C178.948 35.3939 181.538 37.832 181.711 37.9249C181.896 38.0244 182.104 38.025 182.311 37.9268C182.45 37.8612 182.781 37.4254 184.319 35.2865C185.332 33.8777 186.205 32.6542 186.258 32.5676C186.364 32.3943 186.387 32.0846 186.304 31.9243C186.277 31.8703 186.15 31.7198 186.023 31.5898L185.792 31.3534L185.983 31.1634L186.174 30.9733L186.486 31.2874L186.798 31.6015L187.393 33.3539C187.775 34.4789 188.024 35.1441 188.088 35.2119C188.227 35.3601 188.406 35.444 188.58 35.4431C188.782 35.4421 191.801 34.6177 191.945 34.5245C192.226 34.3416 192.323 33.9022 192.146 33.6143C192.077 33.5017 191.871 33.3334 191.657 33.2161C191.65 33.2123 191.451 32.5036 191.215 31.6413C190.979 30.779 190.777 30.0489 190.766 30.0187C190.755 29.9886 190.929 29.81 191.152 29.6218L191.558 29.2797L191.885 29.4888C192.557 29.9181 193.348 30.2403 194.206 30.4349C194.65 30.5354 194.891 30.5611 195.56 30.579C196.105 30.5936 196.438 30.5835 196.568 30.5484C196.93 30.4507 196.993 30.3522 197.461 29.1613C197.922 27.9862 197.96 27.807 197.801 27.548C197.626 27.2628 197.559 27.2451 196.535 27.2139C195.524 27.183 195.037 27.094 194.372 26.8182C193.785 26.5748 193.819 26.6034 193.818 26.3474C193.816 25.765 193.581 25.221 193.107 24.7058L192.809 24.3813L192.997 24.1948L193.185 24.0082L193.558 24.3735C193.963 24.7691 194.142 24.8829 194.364 24.8829C194.699 24.8829 194.721 24.8579 196.997 21.9497C198.197 20.4169 199.216 19.0999 199.261 19.0231C199.32 18.9217 199.338 18.8187 199.325 18.6481C199.31 18.4515 199.277 18.3769 199.122 18.1947L198.937 17.9767L199.75 17.1717C200.197 16.729 200.604 16.3007 200.655 16.22C200.834 15.936 200.751 15.5102 200.48 15.3197C200.189 15.1151 199.838 15.1568 199.557 15.4295L199.385 15.5962L199.116 15.3413C198.756 15.0001 198.574 14.9335 198.347 15.0587ZM188.403 24.468L188.661 24.7273L187.586 25.7941L186.512 26.8609L186.128 26.4774L185.744 26.0939L185.88 25.9862C185.954 25.927 186.474 25.5041 187.033 25.0465C187.593 24.5889 188.072 24.2132 188.098 24.2117C188.123 24.2101 188.261 24.3254 188.403 24.468ZM188.4 28.2488C188.684 28.5008 188.567 28.8577 188.077 29.2309C187.972 29.3112 187.835 29.3769 187.774 29.3769C187.609 29.3769 187.42 29.2651 187.359 29.131C187.256 28.9072 187.292 28.772 187.519 28.5209C187.905 28.0937 188.143 28.0204 188.4 28.2488Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2852_11311" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(190.25 27.5) rotate(147.529) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.weapon.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.weapon.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2852_11311" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(177.25 27.5003) rotate(147.529) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.weapon.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.weapon.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="paint2_linear_2852_11311" x1="159.25" y1="27.0004" x2="75.2499" y2="27.0004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.weapon.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.weapon.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint3_linear_2852_11311" x1="164.25" y1="27.5004" x2="72.0001" y2="27.5004"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.weapon.color" stop-opacity="0" />
|
||
|
|
<stop offset="1" :stop-color="hud.weapon.color" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.weapon.picker" style="position: absolute; top:4rem; left:-3.5rem">
|
||
|
|
<input type="color" @input="updateColor('weapon', $event.target.value)" @blur="hud.weapon.picker = false"
|
||
|
|
:value="hud.weapon.color"
|
||
|
|
style="position: absolute; right: 3rem; top: -3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="drag" v-if="hudMenu && hud.weapon.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'weapon', 'weapon', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="hudMenu" @click="getEdit('weapon')" class="eye">
|
||
|
|
<i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="settings" v-if="hudMenu">
|
||
|
|
<h1>HYPERION</h1>
|
||
|
|
<p>HUD INDSTILLINGER</p>
|
||
|
|
</div>
|
||
|
|
<div class="clock" v-if="allHud" :style="{ top: hud.clock.position.top, left: hud.clock.position.left }">
|
||
|
|
<div v-if="hudMenu" @click="getEdit('clock')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<p>{{ player.clock.name }}</p>
|
||
|
|
<div class="color" style="left:0.9rem; top:-2.3rem" v-if="hudMenu && hud.clock.drag != true"
|
||
|
|
@click="hud.clock.picker = !hud.clock.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5625rem" height="4.8125rem" viewBox="0 0 73 77" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.clock.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.5 9.1547C35.7376 8.44017 37.2624 8.44017 38.5 9.1547L53.1195 17.5953C54.3572 18.3098 55.1195 19.6303 55.1195 21.0594V37.9406C55.1195 39.3697 54.3571 40.6902 53.1195 41.4047L38.5 49.8453C37.2624 50.5598 35.7376 50.5598 34.5 49.8453L19.8805 41.4047C18.6428 40.6902 17.8805 39.3697 17.8805 37.9406V21.0594C17.8805 19.6303 18.6428 18.3098 19.8805 17.5953L34.5 9.1547Z"
|
||
|
|
fill="url(#paint0_radial_2855_12155)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M34.75 9.58771C35.8329 8.9625 37.1671 8.9625 38.25 9.58771L52.8695 18.0283C53.9524 18.6535 54.6195 19.809 54.6195 21.0594V37.9406C54.6195 39.191 53.9524 40.3465 52.8695 40.9717L38.25 49.4123C37.1671 50.0375 35.8329 50.0375 34.75 49.4123L20.1305 40.9717C19.0475 40.3465 18.3805 39.191 18.3805 37.9406V21.0594C18.3805 19.809 19.0475 18.6535 20.1305 18.0283L34.75 9.58771Z"
|
||
|
|
:stroke="hud.clock.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M27 29.5C27 24.2533 31.2533 20 36.5 20C39.0196 20 41.4359 21.0009 43.2175 22.7825C44.9991 24.5641 46 26.9804 46 29.5C46 34.7467 41.7467 39 36.5 39C31.2533 39 27 34.7467 27 29.5ZM28.73 29.5003C28.73 33.7931 32.2099 37.273 36.5027 37.273C40.7955 37.273 44.2754 33.7931 44.2754 29.5003C44.2754 25.2076 40.7955 21.7276 36.5027 21.7276C32.2099 21.7276 28.73 25.2076 28.73 29.5003Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M39.9549 28.7578H37.364V24.3187C37.364 23.8417 36.9773 23.4551 36.5004 23.4551C36.0234 23.4551 35.6367 23.8417 35.6367 24.3187V29.5005C35.6367 29.5005 35.6367 29.5437 35.6367 29.561C35.6367 29.5783 35.6367 29.561 35.6367 29.6214C35.6367 30.0984 36.0234 30.4851 36.5004 30.4851H39.9549C40.4319 30.4851 40.8185 30.0984 40.8185 29.6214C40.8185 29.1445 40.4319 28.7578 39.9549 28.7578Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M36.5004 50L50.7898 41.5V48.4406C50.7898 49.8697 50.0274 51.1902 48.7898 51.9047L38.5004 57.8453C37.2628 58.5598 35.738 58.5598 34.5004 57.8453L24.2109 51.9047C22.9733 51.1902 22.2109 49.8697 22.2109 48.4406V41.5L36.5004 50Z"
|
||
|
|
fill="url(#paint1_radial_2855_12155)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_12155" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5 29.5) rotate(57.5288) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.clock.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.clock.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_12155" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5003 42.5) rotate(57.5288) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.clock.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.clock.color" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.clock.picker && hud.clock.drag != true" style="position: absolute; top:4rem; left:-0.3rem">
|
||
|
|
<input type="color" @input="updateColor('clock', $event.target.value)" @blur="hud.clock.picker = false"
|
||
|
|
:value="hud.clock.color"
|
||
|
|
style="position: absolute; left: 1.95rem; top: 5.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.clock.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'clock', 'clock', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="id" v-if="allHud" :style="{ top: hud.id.position.top, left: hud.id.position.left }">
|
||
|
|
<p>{{player.id.name}}</p>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('id')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i></div>
|
||
|
|
<div class="color" style="left:0.9rem; top:-2.3rem" v-if="hudMenu && hud.id.drag != true"
|
||
|
|
@click="hud.id.picker=!hud.id.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" :stop-color="hud.black.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="drag" v-if="hudMenu && hud.id.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'id', 'id', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5625rem" height="4.8125rem" viewBox="0 0 73 77" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.id.color + 'b2)'}">
|
||
|
|
<path
|
||
|
|
d="M34.5 9.1547C35.7376 8.44017 37.2624 8.44017 38.5 9.1547L53.1195 17.5953C54.3572 18.3098 55.1195 19.6303 55.1195 21.0594V37.9406C55.1195 39.3697 54.3571 40.6902 53.1195 41.4047L38.5 49.8453C37.2624 50.5598 35.7376 50.5598 34.5 49.8453L19.8805 41.4047C18.6428 40.6902 17.8805 39.3697 17.8805 37.9406V21.0594C17.8805 19.6303 18.6428 18.3098 19.8805 17.5953L34.5 9.1547Z"
|
||
|
|
fill="url(#paint0_radial_2855_12134)" shape-rendering="crispEdges" />
|
||
|
|
<path
|
||
|
|
d="M34.75 9.58771C35.8329 8.9625 37.1671 8.9625 38.25 9.58771L52.8695 18.0283C53.9524 18.6535 54.6195 19.809 54.6195 21.0594V37.9406C54.6195 39.191 53.9524 40.3465 52.8695 40.9717L38.25 49.4123C37.1671 50.0375 35.8329 50.0375 34.75 49.4123L20.1305 40.9717C19.0475 40.3465 18.3805 39.191 18.3805 37.9406V21.0594C18.3805 19.809 19.0475 18.6535 20.1305 18.0283L34.75 9.58771Z"
|
||
|
|
:stroke="hud.id.color" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M36.5004 50L50.7898 41.5V48.4406C50.7898 49.8697 50.0274 51.1902 48.7898 51.9047L38.5004 57.8453C37.2628 58.5598 35.738 58.5598 34.5004 57.8453L24.2109 51.9047C22.9733 51.1902 22.2109 49.8697 22.2109 48.4406V41.5L36.5004 50Z"
|
||
|
|
fill="url(#paint1_radial_2855_12134)" />
|
||
|
|
<g clip-path="url(#clip0_2855_12134)">
|
||
|
|
<path
|
||
|
|
d="M42.7147 33.5348C42.6945 33.2425 42.6535 32.9236 42.5932 32.587C42.5323 32.2478 42.4539 31.9271 42.3601 31.634C42.2631 31.3311 42.1313 31.0319 41.9683 30.7453C41.7992 30.4477 41.6005 30.1886 41.3776 29.9754C41.1445 29.7524 40.8591 29.5731 40.529 29.4422C40.2001 29.3121 39.8356 29.2462 39.4457 29.2462C39.2926 29.2462 39.1445 29.309 38.8585 29.4952C38.6825 29.61 38.4766 29.7428 38.2468 29.8896C38.0503 30.0148 37.7841 30.1321 37.4554 30.2383C37.1346 30.3421 36.8089 30.3947 36.4874 30.3947C36.1659 30.3947 35.8404 30.3421 35.5192 30.2383C35.1908 30.1322 34.9246 30.0149 34.7283 29.8897C34.5007 29.7443 34.2947 29.6115 34.1161 29.4951C33.8304 29.3089 33.6822 29.2461 33.5291 29.2461C33.1391 29.2461 32.7747 29.3121 32.4459 29.4424C32.1161 29.5729 31.8306 29.7523 31.5972 29.9755C31.3744 30.1889 31.1756 30.4478 31.0067 30.7453C30.8439 31.0319 30.712 31.331 30.615 31.6341C30.5213 31.9272 30.4429 32.2478 30.382 32.587C30.3217 32.9232 30.2807 33.2421 30.2605 33.5351C30.2405 33.8221 30.2305 34.12 30.2305 34.4209C30.2305 35.2039 30.4794 35.8378 30.9702 36.3052C31.455 36.7666 32.0964 37.0006 32.8765 37.0006H40.0991C40.8791 37.0006 41.5203 36.7667 42.0052 36.3052C42.4961 35.8381 42.745 35.2041 42.745 34.4208C42.7449 34.1185 42.7347 33.8204 42.7147 33.5348Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M36.3942 29.2255C37.3868 29.2255 38.2464 28.8695 38.9487 28.1671C39.651 27.4648 40.0071 26.6054 40.0071 25.6127C40.0071 24.6202 39.651 23.7608 38.9486 23.0582C38.2461 22.356 37.3867 22 36.3942 22C35.4014 22 34.542 22.356 33.8397 23.0583C33.1374 23.7607 32.7812 24.6201 32.7812 25.6127C32.7812 26.6054 33.1374 27.4649 33.8398 28.1672C34.5423 28.8694 35.4017 29.2255 36.3942 29.2255Z"
|
||
|
|
fill="white" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_12134" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5 29.5) rotate(57.5288) scale(40.0465)">
|
||
|
|
<stop :stop-color="hud.id.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.id.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_12134" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5003 42.5) rotate(57.5288) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="hud.id.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.id.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<clipPath id="clip0_2855_12134">
|
||
|
|
<rect width="15" height="15" fill="white" transform="translate(29 22)" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.id.picker && hud.id.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('id', $event.target.value)" @blur="hud.id.picker=false" :value="hud.id.color"
|
||
|
|
style="position: absolute; left: 1.95rem; top: 5.3rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer; z-index:1">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="microphone" v-if="allHud" :style="{top: hud.microphone.position.top, left: hud.microphone.position.left}">
|
||
|
|
<div class="drag" v-if="hudMenu && hud.microphone.drag != true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'microphone', 'microphone', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('microphone')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i>
|
||
|
|
</div>
|
||
|
|
<svg width="4.5625rem" height="4.8125rem" viewBox="0 0 73 77" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g filter="url(#filter0_d_2855_12147)">
|
||
|
|
<path
|
||
|
|
d="M34.5 9.1547C35.7376 8.44017 37.2624 8.44017 38.5 9.1547L53.1195 17.5953C54.3572 18.3098 55.1195 19.6303 55.1195 21.0594V37.9406C55.1195 39.3697 54.3571 40.6902 53.1195 41.4047L38.5 49.8453C37.2624 50.5598 35.7376 50.5598 34.5 49.8453L19.8805 41.4047C18.6428 40.6902 17.8805 39.3697 17.8805 37.9406V21.0594C17.8805 19.6303 18.6428 18.3098 19.8805 17.5953L34.5 9.1547Z"
|
||
|
|
fill="url(#paint0_radial_2855_12147)" fill-opacity="0.25" />
|
||
|
|
<path
|
||
|
|
d="M34.75 9.58771C35.8329 8.9625 37.1671 8.9625 38.25 9.58771L52.8695 18.0283C53.9524 18.6535 54.6195 19.809 54.6195 21.0594V37.9406C54.6195 39.191 53.9524 40.3465 52.8695 40.9717L38.25 49.4123C37.1671 50.0375 35.8329 50.0375 34.75 49.4123L20.1305 40.9717C19.0475 40.3465 18.3805 39.191 18.3805 37.9406V21.0594C18.3805 19.809 19.0475 18.6535 20.1305 18.0283L34.75 9.58771Z"
|
||
|
|
stroke="white" />
|
||
|
|
</g>
|
||
|
|
<g clip-path="url(#clip0_2855_12147)">
|
||
|
|
<path
|
||
|
|
d="M41.9386 29.9418C41.9386 29.6018 41.6786 29.3418 41.3386 29.3418C40.9986 29.3418 40.7386 29.6018 40.7386 29.9418C40.7386 32.2818 38.8386 34.1818 36.4986 34.1818C34.1586 34.1818 32.2586 32.2818 32.2586 29.9418C32.2586 29.6018 31.9986 29.3418 31.6586 29.3418C31.3186 29.3418 31.0586 29.6018 31.0586 29.9418C31.0586 32.7218 33.1386 35.0618 35.8986 35.3618V36.9618H33.7186C33.3786 36.9618 33.1186 37.2218 33.1186 37.5618C33.1186 37.9018 33.3786 38.1618 33.7186 38.1618H39.2786C39.6186 38.1618 39.8786 37.9018 39.8786 37.5618C39.8786 37.2218 39.6186 36.9618 39.2786 36.9618H37.0986V35.3618C39.8586 35.0618 41.9386 32.7218 41.9386 29.9418Z"
|
||
|
|
fill="white" />
|
||
|
|
<path
|
||
|
|
d="M36.5002 21C34.6602 21 33.1602 22.5 33.1602 24.34V29.76C33.1602 31.62 34.6602 33.1 36.5002 33.12C38.3402 33.12 39.8402 31.62 39.8402 29.78V24.34C39.8402 22.5 38.3402 21 36.5002 21Z"
|
||
|
|
fill="white" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
d="M36.5004 50L50.7898 41.5V48.4406C50.7898 49.8697 50.0274 51.1902 48.7898 51.9047L38.5004 57.8453C37.2628 58.5598 35.738 58.5598 34.5004 57.8453L24.2109 51.9047C22.9733 51.1902 22.2109 49.8697 22.2109 48.4406V41.5L36.5004 50Z"
|
||
|
|
fill="url(#paint1_radial_2855_12147)" />
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_2855_12147" x="0.878906" y="0.619141" width="71.2422" height="75.7617"
|
||
|
|
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset dy="9" />
|
||
|
|
<feGaussianBlur stdDeviation="8.5" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2855_12147" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2855_12147" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<radialGradient id="paint0_radial_2855_12147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5 29.5) rotate(57.5288) scale(40.0465)">
|
||
|
|
<stop :stop-color="player.microphone.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="player.microphone.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_12147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(36.5003 42.5) rotate(57.5288) scale(30.7334 30.7334)">
|
||
|
|
<stop :stop-color="player.microphone.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="player.microphone.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<clipPath id="clip0_2855_12147">
|
||
|
|
<rect width="17" height="17" fill="white" transform="translate(28 21)" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="health-squared" v-if="hudType == 'squared' && allHud"
|
||
|
|
:style="{ top: hud.health.position.top, left: hud.health.position.left }">
|
||
|
|
<h1>{{hud.health.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('health')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag" style="top:0rem; left:3.5rem" v-if="hudMenu && hud.health.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'health-squared', 'health', $event)">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.health.drag !=true"
|
||
|
|
@click="hud.health.picker=!hud.health.picker">
|
||
|
|
<svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<svg width="2.25rem" height="2.8125rem" viewBox="0 0 36 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M12.3016 0.059747C10.5143 0.31352 9.26712 1.13394 8.55544 2.52406C8.02275 3.56452 7.85019 5.08806 8.13858 6.20458C8.41828 7.28754 9.08876 8.47951 10.1228 9.73207C11.399 11.278 13.3699 13.0703 15.5867 14.701C15.9624 14.9774 17.3023 15.907 17.4541 15.9966C17.5074 16.028 17.7789 15.8498 18.763 15.1377C21.911 12.8595 24.5452 10.3282 25.8356 8.34152C26.9245 6.66494 27.2267 5.31186 26.8382 3.85355C25.9481 0.513009 22.0137 -1.04275 19.0112 0.758519C18.5491 1.0357 17.9913 1.51665 17.6671 1.91744C17.5854 2.01847 17.5101 2.10113 17.4999 2.10113C17.4897 2.10113 17.4145 2.01847 17.3327 1.91744C17.1518 1.69381 16.696 1.25755 16.4344 1.05759C15.7806 0.557871 14.8747 0.18031 14.0389 0.0592397C13.5655 -0.00932207 12.7866 -0.00910464 12.3016 0.059747Z"
|
||
|
|
fill="white" />
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="39" width="6" height="6"
|
||
|
|
:fill="getFillColor(index,'health')" :fill-opacity="getFillOpacity(index)" />
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.health.picker && hud.health.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('health', $event.target.value)" @blur="hud.health.picker=false"
|
||
|
|
:value="hud.health.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="armor-squared" v-if="hudType == 'squared' && allHud"
|
||
|
|
:style="{ top: hud.armor.position.top, left: hud.armor.position.left }">
|
||
|
|
<h1>{{hud.armor.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('armor')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag" style="top:0rem; left:3.5rem" v-if="hudMenu && hud.armor.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'armor-squared', 'armor', $event)"> <svg width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.armor.drag !=true"
|
||
|
|
@click="hud.armor.picker=!hud.armor.picker"> <svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div><svg width="2.25rem" height="2.8125rem" viewBox="0 1 36 51" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="45" width="7" height="7"
|
||
|
|
:fill="getFillColor(index,'armor')" :fill-opacity="getFillOpacity(index)" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M13.6928 1.00988C9.30952 2.10889 9.38856 2.08252 9.13182 2.53126L9 2.7617L9.00047 7.41613C9.001 12.4444 9.0049 12.5281 9.29955 13.7772C9.52496 14.7327 9.98302 15.8326 10.4518 16.544C10.7345 16.9729 11.364 17.7435 11.8138 18.2113C12.6862 19.1186 15.2369 20.8889 16.8762 21.7248L17.4158 22H17.9798C18.6423 22 18.7554 21.9575 19.9411 21.2641C21.9197 20.1069 23.5757 18.8751 24.4338 17.922C25.7926 16.4128 26.4724 15.051 26.7999 13.1824C26.9832 12.1364 27.0124 11.2019 26.9961 6.89897L26.9804 2.7617L26.8486 2.53126C26.5894 2.07828 26.6794 2.10822 22.2512 1.00362C19.5424 0.327853 18.1239 -0.00338714 17.9539 2.61084e-05C17.813 0.00281876 15.9187 0.451764 13.6928 1.00988Z"
|
||
|
|
fill="white" />
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.armor.picker" style="position: absolute; top:4rem; left:-0.3rem"> <input type="color"
|
||
|
|
@input="updateColor('armor', $event.target.value)" @blur="hud.armor.picker=false" :value="hud.armor.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="stress-squared" style="display:none;" v-if="hudType=='squared' && allHud"
|
||
|
|
:style="{top: hud.stress.position.top, left: hud.stress.position.left}">
|
||
|
|
<h1>{{hud.stress.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('stress')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag" style="top:0rem; left:3.5rem" v-if="hudMenu && hud.stress.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'stress-squared', 'stress', $event)"> <svg width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.stress.drag !=true"
|
||
|
|
@click="hud.stress.picker=!hud.stress.picker"> <svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div><svg width="2.25rem" height="3.3125rem" viewBox="0 0 36 53" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M16.1936 0.0745086C16.0975 0.119304 15.9729 0.205976 15.9165 0.267069C15.7929 0.401064 13.1591 7.01327 13.1591 7.18958C13.1591 7.43251 13.2271 7.44458 14.5988 7.44476C15.7646 7.44489 15.8534 7.45046 15.9866 7.53151C16.1754 7.64642 16.3024 7.86326 16.3026 8.07124C16.3027 8.19295 16.0561 8.82806 15.4229 10.3372C14.9389 11.4904 14.5149 12.5026 14.4805 12.5865L14.4181 12.739L14.5272 12.6301C14.9212 12.2369 20.7563 6.02624 20.7563 6.00018C20.7563 5.98231 20.1619 5.96175 19.4355 5.95447C18.166 5.94175 18.1088 5.93752 17.9619 5.84618C17.752 5.71568 17.6563 5.53649 17.6563 5.27425C17.6563 5.03559 17.4935 5.3014 19.6202 2.06631C20.1917 1.19693 20.25 1.0903 20.2673 0.881529C20.2926 0.577197 20.159 0.293955 19.9138 0.131898L19.7368 0.0149408L18.0525 0.00395967C16.4854 -0.00623702 16.3561 -0.00131292 16.1936 0.0745086ZM12.3852 4.15358C12.0331 4.25245 11.6647 4.4559 11.407 4.69378C11.1472 4.93354 11.1498 4.94953 11.4681 5.06649C11.783 5.18214 11.8935 5.44755 11.719 5.66901C11.5899 5.83281 11.4627 5.84409 11.107 5.72334C10.9325 5.66413 10.6672 5.60312 10.5174 5.58778C9.75573 5.50991 8.91419 5.90183 8.49373 6.53028C8.32362 6.7845 8.1505 7.16657 8.18831 7.20426C8.19892 7.21485 8.31471 7.19502 8.4457 7.16025C8.79613 7.06717 8.95331 7.07776 9.07871 7.20295C9.28396 7.40776 9.17777 7.75419 8.88996 7.81881C8.54258 7.89681 8.40204 7.94361 8.18102 8.05494C7.29421 8.50177 6.8107 9.60977 7.06966 10.602C7.21588 11.1623 7.62922 11.7059 8.11841 11.9815C8.25036 12.0558 8.3775 12.1524 8.40099 12.1962C8.47107 12.3269 8.44993 12.5367 8.35741 12.629C8.20154 12.7846 8.05702 12.788 7.77942 12.6427C7.64044 12.5699 7.52675 12.5281 7.52675 12.5497C7.52675 12.5713 7.58351 12.7012 7.65289 12.8384C8.1243 13.7704 8.9937 14.3652 10.0606 14.4857L10.3211 14.5151V14.1371C10.3211 13.7939 10.331 13.7492 10.4283 13.6521C10.571 13.5097 10.8104 13.5067 10.9496 13.6456C11.0387 13.7345 11.0528 13.8003 11.0736 14.2229C11.1157 15.079 11.4329 15.7645 12.0466 16.3253C12.581 16.8137 13.2834 17.0869 14.0105 17.0891C14.5362 17.0907 14.8475 17.0193 15.3362 16.7848C15.6585 16.6302 15.819 16.5176 16.0954 16.2519L16.4458 15.9151L16.2201 15.7533C16.096 15.6642 15.9729 15.5443 15.9466 15.4866C15.8877 15.3575 15.9274 15.1835 16.0419 15.0692C16.1892 14.9222 16.3743 14.9602 16.7713 15.2192C17.1784 15.4848 17.6382 15.6877 18.1289 15.8185C18.6083 15.9462 19.5172 15.9753 20.0282 15.8794C21.2688 15.6465 22.321 14.9522 23.0156 13.9079L23.1688 13.6778L22.9639 13.2738C22.8513 13.0515 22.7481 12.7879 22.7347 12.6879C22.714 12.5326 22.7269 12.4895 22.8229 12.3937C22.9785 12.2385 23.2104 12.2398 23.3562 12.3968C23.4151 12.4602 23.4633 12.536 23.4633 12.5652C23.4633 12.726 23.7895 13.2461 24.0425 13.4885C24.4992 13.9262 24.986 14.1198 25.6245 14.1176C27.5585 14.111 28.5393 11.7812 27.2023 10.3696C27.0313 10.1891 26.6744 9.92839 26.5984 9.92839C26.5791 9.92839 26.5633 9.95576 26.5633 9.98918C26.5633 10.0226 26.5231 10.1796 26.4742 10.338C26.3747 10.6594 26.2566 10.772 26.0261 10.7655C25.8706 10.7611 25.69 10.5913 25.69 10.4495C25.69 10.4033 25.7409 10.1936 25.803 9.98351C25.9436 9.50819 25.9882 8.81512 25.9096 8.3279C25.7418 7.28828 25.0613 6.28142 24.1686 5.75215C23.8833 5.58299 23.4196 5.37579 23.4196 5.41744C23.4196 5.42825 23.4884 5.56198 23.5724 5.71459C23.6565 5.86719 23.7253 6.04524 23.7253 6.11025C23.7253 6.27288 23.5465 6.44234 23.3751 6.44234C23.1708 6.44234 23.0817 6.37493 22.9559 6.12485C22.4485 5.11625 21.4489 4.3657 20.3267 4.15066C19.9231 4.07331 19.2698 4.06939 19.1762 4.14373C19.0898 4.21236 18.4858 5.11647 18.4858 5.17721C18.4858 5.2071 18.8916 5.22223 19.6936 5.22223C20.89 5.22223 20.9031 5.22323 21.0804 5.32689C21.4241 5.52795 21.5783 6.03583 21.3995 6.37811C21.2807 6.60562 15.9616 12.3235 15.0524 13.2011C14.6402 13.599 14.4763 13.6919 14.1836 13.6934C13.7754 13.6955 13.4662 13.3829 13.5253 13.0276C13.5397 12.9408 13.9921 11.8207 14.5306 10.5384L15.5097 8.20715L14.3235 8.18537C13.2064 8.16484 13.1268 8.15796 12.9572 8.06745C12.604 7.87886 12.4155 7.55814 12.4191 7.15184C12.4211 6.93427 12.495 6.71543 12.9604 5.54904C13.2568 4.80608 13.483 4.18081 13.463 4.15959C13.3966
|
||
|
|
fill="white" />
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="45.0928" width="6" height="6"
|
||
|
|
:fill="getFillColor(index, 'stress')" />
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.stress.picker && hud.stress.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('stress', $event.target.value)" @blur="hud.stress.picker=false"
|
||
|
|
:value="hud.stress.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hunger-squared" v-if="hudType == 'squared' && allHud"
|
||
|
|
:style="{ top: hud.hunger.position.top, left: hud.hunger.position.left }">
|
||
|
|
<h1>{{hud.hunger.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('hunger')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag" style="top:0rem; left:3.5rem" v-if="hudMenu && hud.hunger.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'hunger-squared', 'hunger', $event)"> <svg width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.hunger.drag !=true"
|
||
|
|
@click="hud.hunger.picker=!hud.hunger.picker"> <svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div><svg width="2.25rem" height="2.9375rem" viewBox="0 0 36 47" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.0549 0.122028C10.9405 0.393257 10.7469 1.01463 10.6819 1.31947C10.5942 1.73085 10.5602 2.53764 10.6137 2.93782C10.6867 3.48461 10.8758 3.9969 11.1746 4.4581C11.2729 4.60971 12.1891 5.54731 14.4104 7.76933L17.5091 10.8691L17.9051 10.4746L18.3011 10.0802L20.9334 13.0208C22.3811 14.6381 23.6406 16.0399 23.7323 16.1359C24.1239 16.5461 24.6119 16.7224 25.1038 16.6314C26.0726 16.4523 26.5862 15.4379 26.1597 14.5458C26.0655 14.3486 25.5712 13.8473 18.8839 7.16713L11.7092 0H11.4077H11.1064L11.0549 0.122028ZM21.0265 1.83043C20.039 2.81928 19.1868 3.69421 19.1329 3.77474C18.8774 4.15596 18.7549 4.48671 18.6862 4.98022C18.6599 5.16896 18.6242 5.36062 18.6069 5.40621C18.577 5.48451 18.6365 5.55014 19.6915 6.60307L20.8078 7.71711L21.0564 7.66582C21.1931 7.63764 21.345 7.61457 21.3939 7.61457C21.5697 7.61457 21.9164 7.50897 22.2204 7.36283L22.53 7.21399L24.4127 5.34035L26.2955 3.46671L25.9528 3.12464L25.6102 2.78257L24.2904 4.09996L22.9705 5.41731L22.6278 5.07638L22.2851 4.73542L23.6055 3.41699L24.9258 2.09856L24.5756 1.74888L24.2253 1.39923L22.9047 2.71736L21.5841 4.03549L21.2425 3.69339L20.901 3.35129L22.2204 2.03381L23.5397 0.716323L23.1985 0.374448C23.0107 0.186394 22.8492 0.0325409 22.8396 0.0325409C22.8299 0.0325409 22.0141 0.841573 21.0265 1.83043ZM12.3082 11.9344C10.0465 14.1982 9.87187 14.3809 9.78918 14.5701C9.41645 15.4229 9.85684 16.3566 10.7443 16.5951C10.9344 16.6462 11.3465 16.6397 11.5331 16.5825C11.8844 16.475 11.9228 16.44 14.3976 13.9733L16.8259 11.5528L15.7994 10.5274C15.2348 9.9634 14.7651 9.50194 14.7556 9.50194C14.7462 9.50194 13.6448 10.5965 12.3082 11.9344Z"
|
||
|
|
fill="white" />
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="41" width="6" height="6"
|
||
|
|
:fill="getFillColor(index,'hunger')" :fill-opacity="getFillOpacity(index)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_11869" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(3 43) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop stop-color="#FFD338" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#352C0B" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_11869" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(13 43) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop stop-color="#FFD338" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#352C0B" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_2855_11869" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(23 43) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop stop-color="#FFD338" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#352C0B" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.hunger.picker && hud.hunger.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('hunger', $event.target.value)" @blur="hud.hunger.picker=false"
|
||
|
|
:value="hud.hunger.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="water-squared" v-if="hudType == 'squared' && allHud"
|
||
|
|
:style="{ top: hud.water.position.top, left: hud.water.position.left }">
|
||
|
|
<h1>{{hud.water.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('water')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag" style="top:0rem; left:3.5rem" v-if="hudMenu && hud.water.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'water-squared', 'water', $event)"> <svg width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.water.drag !=true"
|
||
|
|
@click="hud.water.picker=!hud.water.picker"> <svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div><svg width="2.25rem" height="2.9375rem" viewBox="0 0 36 47" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M17.4795 0.0539281C17.4285 0.0803377 17.3271 0.19889 17.2542 0.317307C17.1813 0.435757 16.8144 0.932415 16.4391 1.42098C13.5093 5.23438 12.1647 7.32101 11.4276 9.19821C11.1308 9.95387 11.0252 10.4124 11.0034 11.0384C10.9296 13.1626 12.0576 15.2045 13.9867 16.4388C15.6499 17.5031 17.8476 17.7794 19.7723 17.1663C22.5302 16.2878 24.4147 13.7489 24.3205 11.0384C24.2998 10.4433 24.2043 10.0054 23.9444 9.31311C23.1242 7.12883 20.9983 3.83433 18.2653 0.51215C17.8432 -0.000838507 17.7219 -0.0716285 17.4795 0.0539281Z"
|
||
|
|
fill="white" />
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="41" width="6" height="6"
|
||
|
|
:fill="getFillColor(index,'water')" :fill-opacity="getFillOpacity(index)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_11861" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(3 43) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#0A1E31" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_11861" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(13 43) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#0A1E31" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.water.picker && hud.water.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('water', $event.target.value)" @blur="hud.water.picker=false"
|
||
|
|
:value="hud.water.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="oxygen-squared" v-if="hudType == 'squared' && allHud"
|
||
|
|
:style="{ top: hud.oxygen.position.top, left: hud.oxygen.position.left }">
|
||
|
|
<h1>{{hud.oxygen.percentage}}% </h1>
|
||
|
|
<div v-if="hudMenu" @click="getEdit('oxygen')" class="eye"> <i class="fa-solid fa-circle-half-stroke"></i> </div>
|
||
|
|
<div class="drag"> <svg style="top:0rem; left:3.5rem" v-if="hudMenu && hud.oxygen.drag !=true"
|
||
|
|
@mousedown.stop="mouseDownHandler('hud', 'oxygen-squared', 'oxygen', $event)" width="2.5rem" height="2.5rem"
|
||
|
|
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11730)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M11.3543 11.091C11.1458 11.2091 11.0009 11.4566 11 11.6962C10.9996 11.8112 11.1181 12.2311 11.3295 12.8632C11.6862 13.93 11.8806 14.6564 12.2031 16.1285C12.3169 16.6479 12.4394 17.1299 12.4755 17.1996C12.5674 17.3773 12.7999 17.5425 12.9952 17.5686C13.4376 17.628 13.6781 17.4526 13.9464 16.8746L14.1291 16.481L15.1162 17.4684L16.1033 18.4556L17.2806 17.2787L18.4579 16.1017L17.4709 15.1138L16.4839 14.126L16.8771 13.9433C17.4549 13.675 17.6303 13.4344 17.571 12.992C17.5449 12.7977 17.3799 12.5642 17.2046 12.4735C17.1364 12.4382 16.5795 12.2982 15.9671 12.1623C14.5833 11.8552 13.5679 11.5778 12.6256 11.2494C11.8088 10.9648 11.619 10.9411 11.3543 11.091ZM27.1088 11.3301C26.1758 11.6476 24.9442 11.9747 23.5978 12.2624C23.2277 12.3415 22.8677 12.4357 22.7978 12.4719C22.6197 12.5641 22.4546 12.7964 22.4284 12.992C22.369 13.4345 22.5428 13.6723 23.1218 13.9412L23.5169 14.1245L22.5292 15.1131L21.5414 16.1017L22.7187 17.2787L23.896 18.4556L24.8831 17.4684L25.8702 16.481L26.0529 16.8746C26.3213 17.4526 26.5617 17.628 27.0041 17.5686C27.1995 17.5425 27.4319 17.3773 27.5239 17.1996C27.5599 17.1299 27.6825 16.6479 27.7962 16.1285C28.1188 14.6564 28.3131 13.93 28.6699 12.8632C28.8812 12.2311 28.9998 11.8112 28.9993 11.6962C28.9984 11.4566 28.8535 11.2091 28.645 11.091C28.3716 10.9361 28.1778 10.9663 27.1088 11.3301ZM19.6872 17.7095C18.5577 17.8487 17.695 18.8397 17.695 19.9978C17.695 21.0216 18.3454 21.9003 19.333 22.2107C19.679 22.3194 20.2665 22.3272 20.6114 22.2276C21.3751 22.0072 22.0021 21.3847 22.225 20.6258C22.3128 20.3267 22.3128 19.669 22.225 19.3699C22.1159 18.9986 21.9121 18.6599 21.6247 18.3725C21.1027 17.8503 20.4252 17.6185 19.6872 17.7095ZM15.1162 22.5273L14.1291 23.5146L13.9464 23.1211C13.6781 22.5431 13.4376 22.3677 12.9952 22.4271C12.7999 22.4532 12.5674 22.6184 12.4755 22.7961C12.4394 22.8658 12.3169 23.3478 12.2031 23.8672C11.8806 25.3393 11.6862 26.0657 11.3295 27.1325C11.1181 27.7646 10.9996 28.1845 11 28.2995C11.0015 28.6799 11.3236 28.9979 11.7089 28.9993C11.8337 28.9998 12.144 28.9141 12.6256 28.7463C13.5679 28.4179 14.5833 28.1405 15.9671 27.8334C16.5795 27.6975 17.1364 27.5574 17.2046 27.5222C17.3799 27.4315 17.5449 27.198 17.571 27.0037C17.6303 26.5613 17.4549 26.3207 16.8771 26.0524L16.4839 25.8697L17.4709 24.8818L18.4579 23.894L17.2806 22.717L16.1033 21.5401L15.1162 22.5273ZM22.7183 22.7175L21.5416 23.895L22.5293 24.883L23.5172 25.871L23.122 26.0545C22.5428 26.3234 22.369 26.5612 22.4284 27.0037C22.4545 27.199 22.6196 27.4316 22.7972 27.5235C22.8668 27.5595 23.3112 27.6726 23.7847 27.775C25.1734 28.0751 26.0809 28.3176 27.1329 28.6696C27.737 28.8718 28.1875 29 28.2939 29C28.6632 29 29 28.6641 29 28.2958C29 28.1868 28.8742 27.7437 28.6699 27.1325C28.3131 26.0657 28.1188 25.3393 27.7962 23.8672C27.6825 23.3478 27.5599 22.8658 27.5239 22.7961C27.4319 22.6184 27.1995 22.4532 27.0041 22.4271C26.5617 22.3677 26.3213 22.5432 26.053 23.121L25.8703 23.5144L24.8827 22.5271L23.8951 21.5399L22.7183 22.7175Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11730" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div>
|
||
|
|
<div class="color" style="top:0rem; left:6.9rem" v-if="hudMenu && hud.oxygen.drag !=true"
|
||
|
|
@click="hud.oxygen.picker=!hud.oxygen.picker"> <svg width="2.5rem" height="2.5rem" viewBox="0 0 40 40" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="40px" height="40px" rx="20" fill="url(#paint0_radial_2899_11726)" fill-opacity="0.08" />
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M26.6023 11.0803C26.2004 11.219 25.8716 11.5845 25.7938 11.9791C25.771 12.0949 25.6309 14.2682 25.4824 16.8085C25.2566 20.6747 25.2199 21.4696 25.2571 21.687C25.377 22.3862 25.9425 22.9961 26.6184 23.1553C26.7488 23.186 26.8284 23.2203 26.7952 23.2315C26.762 23.2427 26.6534 23.274 26.5538 23.3011C25.7444 23.5216 25.1459 24.3131 25.1459 25.1631C25.1459 25.6148 25.2684 26.2415 25.4903 26.9253C25.644 27.3988 25.7206 27.7115 25.7513 27.9902C25.8191 28.6056 25.8264 28.6358 25.9401 28.7708C26.1739 29.0484 26.4465 29.0716 26.8979 28.8525C28.1538 28.2427 28.9107 27.0013 28.9946 25.4137C29.0317 24.7126 28.8787 24.2608 28.4533 23.8152C28.2133 23.5638 27.7867 23.3192 27.5118 23.2752C27.2988 23.2412 27.287 23.1954 27.4846 23.1689C27.9257 23.1098 28.4999 22.6612 28.7288 22.1967C28.9644 21.7185 28.9663 21.8928 28.6713 16.8111C28.4833 13.5734 28.3846 12.119 28.3417 11.9535C28.1505 11.2167 27.3588 10.8193 26.6023 11.0803ZM18.8505 11.108C15.018 11.6994 11.9365 14.6253 11.1726 18.3985C10.9987 19.2574 10.9467 20.6622 11.0604 21.4325C11.3748 23.5641 12.3107 25.4138 13.8069 26.8611C14.5231 27.5538 15.0227 27.8963 15.6514 28.1255C17.2891 28.7226 19.2518 28.1303 20.1295 26.7741C20.5515 26.122 20.645 25.7124 20.6307 24.5779L20.6205 23.7633L20.7329 23.5235C20.9759 23.005 21.4016 22.611 21.8636 22.4768C21.9774 22.4437 22.5009 22.3466 23.027 22.2609C23.553 22.1751 23.9913 22.0971 24.001 22.0874C24.0107 22.0777 23.997 21.9212 23.9705 21.7397C23.9277 21.4462 23.9529 20.8904 24.1975 16.7266C24.3561 14.0264 24.4576 12.0286 24.4372 12.0084C24.3704 11.9421 23.4766 11.6018 23.0139 11.4665C21.9542 11.1565 21.1332 11.0426 19.9982 11.0483C19.549 11.0505 19.0575 11.0761 18.8505 11.108ZM22.3887 12.9947C23.0826 13.1752 23.617 13.7108 23.7987 14.4077C24.0592 15.407 23.4189 16.4614 22.3887 16.7295C21.3822 16.9914 20.3277 16.3547 20.0586 15.3225C19.7 13.9474 21.0123 12.6365 22.3887 12.9947ZM17.2398 14.9236C17.9336 15.1042 18.468 15.6398 18.6497 16.3366C18.9103 17.3359 18.27 18.3904 17.2398 18.6584C16.2332 18.9204 15.1787 18.2837 14.9096 17.2515C14.5511 15.8764 15.8633 14.5654 17.2398 14.9236ZM15.9526 20.0674C16.9828 20.3355 17.623 21.3899 17.3625 22.3893C17.1808 23.0861 16.6464 23.6217 15.9526 23.8023C14.946 24.0642 13.8915 23.4275 13.6224 22.3953C13.2638 21.0202 14.5761 19.7093 15.9526 20.0674Z"
|
||
|
|
fill="white" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2899_11726" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(20 20) rotate(25.0112) scale(55.4475 37.7302)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg> </div><svg width="2.25rem" height="3rem" viewBox="0 0 36 48" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M20.9356 0.0349051C20.4771 0.120544 19.9562 0.476714 19.6759 0.896235C19.4421 1.24613 19.3852 1.45629 19.3868 1.96399C19.388 2.36284 19.3987 2.43844 19.4843 2.65412C19.7953 3.43787 20.5061 3.91849 21.3502 3.91573C22.1833 3.91297 22.9102 3.40469 23.1954 2.62549C23.3034 2.33038 23.3265 1.78003 23.2442 1.46234C22.9871 0.469942 21.9708 -0.158444 20.9356 0.0349051ZM14.3346 3.21589C14.1499 3.25979 13.8487 3.44113 13.7289 3.58048C13.6666 3.65297 13.2512 4.37018 12.8057 5.17429C11.9245 6.76509 11.8779 6.87717 11.9402 7.25735C11.9868 7.54178 12.0974 7.7418 12.3197 7.94371C12.7995 8.37943 13.5448 8.3484 13.969 7.87506C14.0557 7.77831 14.3746 7.24509 14.7154 6.62699L15.3104 5.54787L16.434 5.54752L17.5576 5.54719L16.3126 7.70607C15.6277 8.89344 14.8566 10.2313 14.5988 10.6791L14.1302 11.4932L11.8897 11.5032L9.64914 11.5132L9.46884 11.6019C9.23875 11.7152 9.02052 11.932 8.90806 12.1591C8.83302 12.3107 8.81986 12.3884 8.82032 12.6778C8.82079 12.977 8.83255 13.0403 8.91747 13.2012C9.04299 13.4389 9.31646 13.6805 9.56205 13.7706C9.75071 13.8399 9.84645 13.8423 12.3896 13.8423C14.8496 13.8423 15.0343 13.838 15.2116 13.7766C15.5482 13.66 15.727 13.4545 16.2267 12.61C16.4729 12.194 16.6839 11.8538 16.6955 11.8541C16.7072 11.8543 16.8958 11.9954 17.1147 12.1676C17.3336 12.3398 17.8094 12.7131 18.172 12.9972C18.6303 13.3563 18.8265 13.5311 18.8154 13.5706C18.8066 13.6018 18.5024 14.361 18.1394 15.2577C17.4914 16.8586 17.4795 16.8929 17.478 17.1568C17.4754 17.6167 17.693 17.9739 18.1127 18.1983C18.3188 18.3084 18.3671 18.3195 18.6458 18.3203C18.884 18.3209 18.9895 18.304 19.119 18.2446C19.3294 18.1481 19.5624 17.9402 19.6724 17.751C19.7191 17.6705 20.1352 16.6694 20.597 15.5264C21.3625 13.6315 21.4378 13.426 21.4507 13.1973C21.4683 12.8837 21.3671 12.5899 21.1671 12.3742C21.0915 12.2928 20.4939 11.8077 19.839 11.2964C19.1842 10.785 18.6478 10.3528 18.6471 10.336C18.646 10.3084 19.0973 9.53268 19.9712 8.06038L20.2767 7.54572L20.846 8.40687C21.3001 9.0937 21.4508 9.29393 21.5901 9.39609C21.8979 9.62162 22.3186 9.69332 22.6528 9.57722C22.9602 9.47044 25.8306 7.86545 25.9848 7.7141C26.2314 7.47209 26.3084 7.27165 26.3079 6.87298C26.3075 6.58804 26.294 6.50749 26.2252 6.37868C26.0329 6.01892 25.6707 5.76176 25.2812 5.70851C24.972 5.66626 24.7464 5.75552 23.7009 6.33367C23.1645 6.63029 22.7124 6.87226 22.6961 6.8714C22.6797 6.87054 22.3944 6.45367 22.062 5.94504L21.4577 5.02025L21.1586 4.99739C20.0926 4.91598 19.1752 4.34213 18.6622 3.43586L18.5196 3.18393L16.4823 3.1868C15.3618 3.18834 14.3953 3.20145 14.3346 3.21589Z"
|
||
|
|
fill="white" />
|
||
|
|
<rect v-for="(color, index) in colors" :x="index * 10" y="42" width="6" height="6"
|
||
|
|
:fill="getFillColor(index,'oxygen')" :fill-opacity="getFillOpacity(index)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2855_11853" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(3 44) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop stop-color="#37FF63" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#0A3413" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2855_11853" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(13 44) rotate(61.1405) scale(7.17706 6.69818)">
|
||
|
|
<stop stop-color="#37FF63" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" stop-color="#0A3413" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div v-if="hud.oxygen.picker && hud.oxygen.drag != true" style="position: absolute; top:4rem; left:-0.3rem"> <input
|
||
|
|
type="color" @input="updateColor('oxygen', $event.target.value)" @blur="hud.oxygen.picker=false"
|
||
|
|
:value="hud.oxygen.color"
|
||
|
|
style="position: absolute; left: 10.875rem; top: -3.5rem; border: none; outline: none; background: none; width: 1.5rem; height: 1.5rem; cursor: pointer;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="logo" v-if="allHud">
|
||
|
|
<p>HYPERION</p>
|
||
|
|
<h1>REBOOTED</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="center" v-if="hudMenu">
|
||
|
|
<h1 @Click="ResetColor()"> Nulstil farver </h1> <svg width="14.375rem" height="2.625rem" viewBox="0 0 230 42"
|
||
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path
|
||
|
|
d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H226C227.933 0.5 229.5 2.067 229.5 4V38C229.5 39.933 227.933 41.5 226 41.5H4C2.06701 41.5 0.5 39.933 0.5 38V4Z"
|
||
|
|
fill="url(#paint0_radial_2852_11897)" fill-opacity="0.55" stroke="url(#paint1_radial_2852_11897)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2852_11897" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(115.262 17) rotate(12.9207) scale(111.806 104.53)">
|
||
|
|
<stop stop-color="#83FF37" />
|
||
|
|
<stop offset="1" stop-color="#406C25" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2852_11897" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(115 21) rotate(20.5504) scale(72.6694 85.6115)">
|
||
|
|
<stop stop-color="#83FF37" />
|
||
|
|
<stop offset="1" stop-color="#83FF37" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="reset" @click="clickData('reset')" v-if="hudMenu">
|
||
|
|
<h1> Nulstil positioner </h1> <svg width="14.375rem" height="1.625rem" viewBox="0 0 230 26" fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path
|
||
|
|
d="M0.5 4C0.5 2.067 2.067 0.5 4 0.5H226C227.933 0.5 229.5 2.067 229.5 4V22C229.5 23.933 227.933 25.5 226 25.5H4C2.06701 25.5 0.5 23.933 0.5 22V4Z"
|
||
|
|
fill="url(#paint0_radial_2852_11900)" fill-opacity="0.55" stroke="url(#paint1_radial_2852_11900)" />
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="paint0_radial_2852_11900" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(115.262 10.5238) rotate(8.08287) scale(110.068 65.7305)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="#6B6B6B" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2852_11900" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(115 13) rotate(13.0655) scale(69.8533 55.1341)">
|
||
|
|
<stop stop-color="#6B6B6B" />
|
||
|
|
<stop offset="1" stop-color="#6B6B6B" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="hud-select" v-if="hudMenu">
|
||
|
|
<h1 @click="typeHud('squared')"> FIRKANTET </h1>
|
||
|
|
<p @click="typeHud('rounded')"> RUND </p>
|
||
|
|
<h2>HUD TYPE</h2>
|
||
|
|
<svg width="31.9375rem" height="8.8125rem" viewBox="0 0 511 141" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="511" height="130" fill="url(#paint0_radial_2899_12238)" fill-opacity="0.15" />
|
||
|
|
<rect x="266" y="36.3154" width="191" height="61" rx="11" fill="hud.map.color" fill-opacity="0.08" />
|
||
|
|
<rect x="266.5" y="36.8154" width="190" height="60" rx="10.5" stroke="white" stroke-opacity="0.25" />
|
||
|
|
<rect v-if="hudType=='rounded' " x="366.5" y="45.5" width="81" height="42" rx="5.5"
|
||
|
|
fill="url(#paint2_radial_2899_12238)" fill-opacity="0.55" stroke="hud.map.color" />
|
||
|
|
<rect v-if="hudType=='squared' " x="277.5" y="45.5" width="81" height="42" rx="5.5"
|
||
|
|
fill="url(#paint4_radial_2899_12238)" fill-opacity="0.55" stroke="hud.map.color" />
|
||
|
|
<g :style="{filter: 'drop-shadow(0px 0.4684rem 0.45rem ' + hud.map.color + 'b2)'}">
|
||
|
|
<rect x="54" y="122" width="403" height="3" fill="url(#paint6_radial_2899_12238)"
|
||
|
|
shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
|
||
|
|
<radialGradient id="paint0_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(255.5 65) rotate(-10.3165) scale(220.566 866.993)">
|
||
|
|
<stop offset="0.426479" :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint1_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(361.5 66.8154) rotate(8.4748) scale(242.583 62.7993)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(407.093 62.4047) rotate(33.3765) scale(46.5251 91.6902)">
|
||
|
|
<stop :stop-color="hud.map.color +'b2'" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(407 66.5) rotate(47.1112) scale(35.6455 63.7066)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0.83" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(318.093 62.4047) rotate(33.3765) scale(46.5251 91.6902)">
|
||
|
|
<stop :stop-color="hud.map.color +'b2'" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint5_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(318 66.5) rotate(47.1112) scale(35.6455 63.7066)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0.83" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint6_radial_2899_12238" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(255.5 123.5) rotate(90) scale(1.5 201.5)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div class="map-squared" style="position: absolute; left: 63px; top: 76%;" v-if="carHud && hudMenu != true && hud.map.type == 'squared'">
|
||
|
|
<svg width="21.813rem" height="15.25rem" viewBox="0 0 349 244" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M327 229L327 237C327 239.761 324.761 242 322 242L27 242C24.2386 242 22 239.761 22 237L22 229L327 229Z"
|
||
|
|
fill="url(#paint0_linear_3044_11432)" fill-opacity="0.25" />
|
||
|
|
<g filter="url(#filter0_d_3044_11432)">
|
||
|
|
<path
|
||
|
|
d="M327 15L327 7.00006C327 4.23864 324.761 2.00006 322 2.00006L27 2C24.2386 2 22 4.23858 22 7L22 14.9999L327 15Z"
|
||
|
|
fill="url(#paint1_linear_3044_11432)" fill-opacity="0.25" shape-rendering="crispEdges" />
|
||
|
|
</g>
|
||
|
|
<path d="M335 6.35294L349 0V6.64706L335 13V6.35294Z" fill="url(#paint2_radial_3044_11432)" />
|
||
|
|
<path d="M335 27.3529L349 21V27.6471L335 34V27.3529Z" fill="url(#paint3_radial_3044_11432)" />
|
||
|
|
<path d="M335 48.3529L349 42V48.6471L335 55V48.3529Z" fill="url(#paint4_radial_3044_11432)" />
|
||
|
|
<path d="M335 69.3529L349 63V69.6471L335 76V69.3529Z" fill="url(#paint5_radial_3044_11432)" />
|
||
|
|
<path d="M335 90.3529L349 84V90.6471L335 97V90.3529Z" fill="url(#paint6_radial_3044_11432)" />
|
||
|
|
<path d="M335 111.353L349 105V111.647L335 118V111.353Z" fill="url(#paint7_radial_3044_11432)" />
|
||
|
|
<path d="M335 132.353L349 126V132.647L335 139V132.353Z" fill="url(#paint8_radial_3044_11432)" />
|
||
|
|
<path d="M335 153.353L349 147V153.647L335 160V153.353Z" fill="url(#paint9_radial_3044_11432)" />
|
||
|
|
<path d="M335 174.353L349 168V174.647L335 181V174.353Z" fill="url(#paint10_radial_3044_11432)" />
|
||
|
|
<path d="M335 195.353L349 189V195.647L335 202V195.353Z" fill="url(#paint11_radial_3044_11432)" />
|
||
|
|
<path d="M335 216.353L349 210V216.647L335 223V216.353Z" fill="url(#paint12_radial_3044_11432)" />
|
||
|
|
<path d="M335 237.353L349 231V237.647L335 244V237.353Z" fill="url(#paint13_radial_3044_11432)" />
|
||
|
|
<path d="M0 6.35294L14 0V6.64706L0 13V6.35294Z" fill="url(#paint14_radial_3044_11432)" />
|
||
|
|
<path d="M0 27.3529L14 21V27.6471L0 34V27.3529Z" fill="url(#paint15_radial_3044_11432)" />
|
||
|
|
<path d="M0 48.3529L14 42V48.6471L0 55V48.3529Z" fill="url(#paint16_radial_3044_11432)" />
|
||
|
|
<path d="M0 69.3529L14 63V69.6471L0 76V69.3529Z" fill="url(#paint17_radial_3044_11432)" />
|
||
|
|
<path d="M0 90.3529L14 84V90.6471L0 97V90.3529Z" fill="url(#paint18_radial_3044_11432)" />
|
||
|
|
<path d="M0 111.353L14 105V111.647L0 118V111.353Z" fill="url(#paint19_radial_3044_11432)" />
|
||
|
|
<path d="M0 132.353L14 126V132.647L0 139V132.353Z" fill="url(#paint20_radial_3044_11432)" />
|
||
|
|
<path d="M0 153.353L14 147V153.647L0 160V153.353Z" fill="url(#paint21_radial_3044_11432)" />
|
||
|
|
<path d="M0 174.353L14 168V174.647L0 181V174.353Z" fill="url(#paint22_radial_3044_11432)" />
|
||
|
|
<path d="M0 195.353L14 189V195.647L0 202V195.353Z" fill="url(#paint23_radial_3044_11432)" />
|
||
|
|
<path d="M0 216.353L14 210V216.647L0 223V216.353Z" fill="url(#paint24_radial_3044_11432)" />
|
||
|
|
<path d="M0 237.353L14 231V237.647L0 244V237.353Z" fill="url(#paint25_radial_3044_11432)" />
|
||
|
|
<defs>
|
||
|
|
<filter id="filter0_d_3044_11432" x="18" y="2" width="313" height="21" filterUnits="userSpaceOnUse"
|
||
|
|
color-interpolation-filters="sRGB">
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||
|
|
result="hardAlpha" />
|
||
|
|
<feOffset dy="4" />
|
||
|
|
<feGaussianBlur stdDeviation="2" />
|
||
|
|
<feComposite in2="hardAlpha" operator="out" />
|
||
|
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||
|
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3044_11432" />
|
||
|
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3044_11432" result="shape" />
|
||
|
|
</filter>
|
||
|
|
<linearGradient id="paint0_linear_3044_11432" x1="312.158" y1="235.273" x2="62.8149" y2="235.273"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="paint1_linear_3044_11432" x1="312.158" y1="8.72746" x2="62.8149" y2="8.7274"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<radialGradient id="paint2_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint3_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint4_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint5_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint6_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint7_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint8_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint9_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint10_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint11_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint12_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint13_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(342 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint14_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint15_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint16_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint17_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint18_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint19_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint20_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint21_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint22_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint23_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint24_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint25_radial_3044_11432" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(7 122) rotate(38.546) scale(157.267 108.327)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="map-rounded" v-if="carHud && hudMenu != true && hud.map.type == 'rounded'">
|
||
|
|
<svg width="15.625rem" height="21.875rem" viewBox="0 0 221 221" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<mask id="path-1-inside-1_534_1008" fill="white">
|
||
|
|
<path
|
||
|
|
d="M212.588 110.5C212.588 166.882 166.882 212.588 110.5 212.588C54.1181 212.588 8.41168 166.882 8.41168 110.5C8.41168 54.1183 54.1181 8.41187 110.5 8.41187C166.882 8.41187 212.588 54.1183 212.588 110.5ZM16.5736 110.5C16.5736 162.374 58.6258 204.426 110.5 204.426C162.374 204.426 204.426 162.374 204.426 110.5C204.426 58.626 162.374 16.5738 110.5 16.5738C58.6258 16.5738 16.5736 58.626 16.5736 110.5Z" />
|
||
|
|
</mask>
|
||
|
|
<path
|
||
|
|
d="M212.588 110.5C212.588 166.882 166.882 212.588 110.5 212.588C54.1181 212.588 8.41168 166.882 8.41168 110.5C8.41168 54.1183 54.1181 8.41187 110.5 8.41187C166.882 8.41187 212.588 54.1183 212.588 110.5ZM16.5736 110.5C16.5736 162.374 58.6258 204.426 110.5 204.426C162.374 204.426 204.426 162.374 204.426 110.5C204.426 58.626 162.374 16.5738 110.5 16.5738C58.6258 16.5738 16.5736 58.626 16.5736 110.5Z"
|
||
|
|
fill="url(#paint0_linear_534_1008)" fill-opacity="0.25" stroke="url(#paint1_radial_534_1008)" stroke-width="2"
|
||
|
|
mask="url(#path-1-inside-1_534_1008)" />
|
||
|
|
<circle cx="110.5" cy="110.5" r="107.5" stroke="url(#paint2_radial_534_1008)" stroke-width="6" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="paint0_linear_534_1008" x1="106.928" y1="18.3475" x2="106.928" y2="185.266"
|
||
|
|
gradientUnits="userSpaceOnUse">
|
||
|
|
<stop :stop-color="hud.map.color" stop-opacity="0.53" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" />
|
||
|
|
</linearGradient>
|
||
|
|
<radialGradient id="paint1_radial_534_1008" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(110.5 110.5) rotate(45.3812) scale(146.774 221.451)">
|
||
|
|
<stop :stop-color="hud.map.color" />
|
||
|
|
<stop offset="1" :stop-color="hud.map.color" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient id="paint2_radial_534_1008" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||
|
|
gradientTransform="translate(110.5 110.5) rotate(45.3812) scale(158.868 239.698)">
|
||
|
|
<stop stop-color="white" />
|
||
|
|
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||
|
|
</radialGradient>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="./assets/data.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
||
|
|
<script src="./vue.js"></script>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|