Tattoo Opacity

locale/da.json

@@ -49,6 +49,7 @@
     "REMOVETATTOO_TITLE": "Fjern Tatovering",
     "ADDTATTOO_TITLE": "Tilføj Tatovering",
     "TATTOO_TITLE": "Tatovering",
+    "TATTOO_OPACITY": "Gennemsigtighed",
     "DLCOPT_TITLE": "DLC Indstillinger",
     "ZONE_TITLE": "Zone",
     "MENU_TITLE": "Menu",

locale/de.json

@@ -45,6 +45,7 @@
     "REMOVETATTOO_TITLE": "Tattoo entfernen",
     "ADDTATTOO_TITLE": "Tattoo hinzufügen",
     "TATTOO_TITLE": "Tattoo",
+    "TATTOO_OPACITY": "Deckkraft",
     "DLCOPT_TITLE": "DLC Optionen",
     "ZONE_TITLE": "Zone",
     "MENU_TITLE": "Menü",

locale/en.json

@@ -49,6 +49,7 @@
     "REMOVETATTOO_TITLE": "Remove Tattoo",
     "ADDTATTOO_TITLE": "Add Tattoo",
     "TATTOO_TITLE": "Tattoo",
+    "TATTOO_OPACITY": "Opacity",
     "DLCOPT_TITLE": "DLC Options",
     "ZONE_TITLE": "Zone",
     "MENU_TITLE": "Menu",

locale/es.json

@@ -49,6 +49,7 @@
     "REMOVETATTOO_TITLE": "Eliminar Tatuaje",
     "ADDTATTOO_TITLE": "Añadir Tatuaje",
     "TATTOO_TITLE": "Tatuaje",
+    "TATTOO_OPACITY": "Opacidad",
     "DLCOPT_TITLE": "Opciones de DLC",
     "ZONE_TITLE": "Zona",
     "MENU_TITLE": "Menú",

locale/fr.json

@@ -49,6 +49,7 @@
     "REMOVETATTOO_TITLE": "Enlever le tatouage",
     "ADDTATTOO_TITLE": "Ajouter un tatouage",
     "TATTOO_TITLE": "Tatouage",
+    "TATTOO_OPACITY": "Opacité",
     "DLCOPT_TITLE": "Options DLC",
     "ZONE_TITLE": "Zone",
     "MENU_TITLE": "Menu",

locale/np.json

@@ -49,6 +49,7 @@
     "REMOVETATTOO_TITLE": "ट्याटु हटाउनुहोस्",
     "ADDTATTOO_TITLE": "ट्याटु थप्नुहोस्",
     "TATTOO_TITLE": "ट्याटु",
+    "TATTOO_OPACITY": "अपारदर्शिता",
     "DLCOPT_TITLE": "DLC विकल्पहरू",
     "ZONE_TITLE": "क्षेत्र",
     "MENU_TITLE": "मेनु",

src/client/appearance/setters.ts

@@ -215,7 +215,11 @@ export function setPedTattoos(pedHandle: number, data: TTattoo[]) {
         if (tattooData) {
             const collection = GetHashKey(tattooData.dlc)
             const tattoo = tattooData.hash
-            AddPedDecorationFromHashes(pedHandle, collection, tattoo)
+            const tattooOpacity = tattooData.opacity || 0.1
+
+            for (let j = 1; j < Math.round(tattooOpacity * 10); j++) {
+                AddPedDecorationFromHashes(pedHandle, collection, tattoo);
+            }
         }
     }
 }

src/typings/tattoos.ts

@@ -2,6 +2,7 @@ export type TTattooEntry = {
     label: string
     hash: number
     zone: number
+    opacity: number
     dlc?: string
 }
 

web/src/components/menu/Tattoos.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
     import { APPEARANCE, TATTOOS, LOCALE } from '@stores/appearance';
-    import { Send } from '@enums/events';
     import type { TDLCTattoo, TTattooEntry } from '@typings/apperance';
     import Wrapper from '@components/micro/Wrapper.svelte';
     import IconPlus from '@components/icons/IconPlus.svelte';
     import Stepper from '@components/micro/Stepper.svelte';
     import { slide } from 'svelte/transition';
     import Dropdown from '@components/micro/Dropdown.svelte';
     import Divider from '@components/micro/Divider.svelte';
+    import Slider from '@components/micro/Slider.svelte';
     import IconCancel from '@components/icons/IconCancel.svelte';
     import { randomID } from '@utils/misc';
-    import { SendEvent } from '@utils/eventsHandlers';
 
     let deleteOptionIndex: number = null;
 
@@ -128,6 +127,15 @@
 
         TATTOOS.setPlayerTattoos(playerTattoos);
     }
+
+    function changeOpacity(playerTattoosIndex: number, opacity: number) {
+        let playerTattoo = playerTattoos[playerTattoosIndex]
+
+        if (!playerTattoo) return;
+
+        playerTattoo.opacity = opacity
+        TATTOOS.setPlayerTattoos(playerTattoos);
+    }
 </script>
 
 {#each playerTattoos as { zoneIndex, dlcIndex, tattoo, id }, i (id)}
@@ -220,7 +228,7 @@
 
                         <div
                             transition:slide
-                            class="flex flex-col items-center justify-center w-full"
+                            class="flex flex-col items-center justify-center w-full mt-2"
                         >
                             <Dropdown
                                 on:click={() => {
@@ -250,6 +258,26 @@
                                 {/each}
                             </Dropdown>
                         </div>
+
+                        <div
+                        transition:slide
+                        class="flex flex-col items-center justify-center w-full mt-2"
+                    >
+                        <span
+                            class="opacity-75 w-full flex items-center justify-between gap-[0.5vh]"
+                        >
+                        <p>{$LOCALE.TATTOO_OPACITY}</p>
+                        </span>
+                        <Slider
+                            bind:value={tattoo.opacity}
+                            min={0.1}
+                            max={1.0}
+                            step={0.1}
+                            on:change={({ detail: opacity }) => {
+                                changeOpacity(i, opacity)
+                            }}
+                        />
+                    </div>
                     {/if}
                 </svelte:fragment>
 

web/src/typings/apperance.ts

@@ -100,6 +100,7 @@ export type TTattooEntry = {
     label: string
     hash: number
     zone: number
+	opacity: number
     dlc?: string
 }
 
@@ -120,6 +121,7 @@ export type TTattoo = {
     zoneIndex: number
     dlcIndex: number
     tattoo: TTattooEntry
+	opacity: number
     id: number
 }
 

web/src/utils/debug/debugLocale.ts

@@ -49,6 +49,7 @@ export default {
     "REMOVETATTOO_TITLE": "Remove Tattoo",
     "ADDTATTOO_TITLE": "Add Tattoo",
     "TATTOO_TITLE": "Tattoo",
+    "TATTOO_OPACITY": "Opacity",
     "DLCOPT_TITLE": "DLC Options",
     "ZONE_TITLE": "Zone",
     "MENU_TITLE": "Menu",