From 561b59d23523b5c9a3e4298aead574e2c0732e65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 25 Jan 2024 12:45:13 -0600
Subject: [PATCH] feat: camouflage

---
 scripts/buildAssets/camouflageIcons.ts        | 20 +++++++
 scripts/buildAssets/constants.ts              |  1 +
 scripts/buildAssets/index.ts                  | 54 +++++++------------
 .../Configure/components/Camouflage.tsx       | 28 ++++++++++
 .../[id]/components/Configure/index.tsx       |  6 +--
 src/components/ModuleButton.tsx               | 11 +++-
 src/stores/tankopedia.ts                      |  2 +
 7 files changed, 81 insertions(+), 41 deletions(-)
 create mode 100644 scripts/buildAssets/camouflageIcons.ts
 create mode 100644 src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx

diff --git a/scripts/buildAssets/camouflageIcons.ts b/scripts/buildAssets/camouflageIcons.ts
new file mode 100644
index 000000000..c9543456c
--- /dev/null
+++ b/scripts/buildAssets/camouflageIcons.ts
@@ -0,0 +1,20 @@
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function camouflageIcons(production: boolean) {
+  console.log('Building camouflage icons...');
+  const content = await readDVPLFile(
+    `${DATA}/${POI.defaultCamoIcon.replace('.webp', '.packed.webp.dvpl')}`,
+  ).then((content) => content.toString('base64'));
+  const changes: FileChange[] = [
+    {
+      content,
+      encoding: 'base64',
+      path: 'icons/camo.webp',
+    },
+  ];
+
+  await commitAssets('camo icons', changes, production);
+}
diff --git a/scripts/buildAssets/constants.ts b/scripts/buildAssets/constants.ts
index 6ff1bc164..c73d99f0c 100644
--- a/scripts/buildAssets/constants.ts
+++ b/scripts/buildAssets/constants.ts
@@ -24,4 +24,5 @@ export const POI = {
   consumableIcons: 'Gfx/UI/InventoryIcons/Big/Consumables',
   equipmentItemImageMappings:
     'UI/Screens3/Lobby/Inventory/Equipment/EquipmentItemImage.style.yaml',
+  defaultCamoIcon: 'Gfx/UI/Hangar/IconCamouflage.webp',
 } as const;
diff --git a/scripts/buildAssets/index.ts b/scripts/buildAssets/index.ts
index f2c139e17..6aafe8ec4 100644
--- a/scripts/buildAssets/index.ts
+++ b/scripts/buildAssets/index.ts
@@ -1,5 +1,6 @@
 import { config } from 'dotenv';
 import { argv } from 'process';
+import { camouflageIcons } from './camouflageIcons';
 import { buildCircleFlags } from './circleFlags';
 import { buildConsumableIcons } from './consumableIcons';
 import { buildDefinitions } from './definitions';
@@ -22,41 +23,22 @@ const production = argv.includes('--production');
 
 if (!targets && !allTargets) throw new Error('No target(s) specified');
 
-if (allTargets || targets?.includes('tankModels')) {
-  await buildTankModels(production);
-}
+const methods = [
+  buildTankModels,
+  buildTankArmors,
+  buildDefinitions,
+  buildTankIcons,
+  buildScratchedFlags,
+  buildCircleFlags,
+  buildShellIcons,
+  buildModuleIcons,
+  equipmentIcons,
+  buildConsumableIcons,
+  camouflageIcons,
+];
 
-if (allTargets || targets?.includes('tankArmor')) {
-  await buildTankArmors(production);
-}
-
-if (allTargets || targets?.includes('definitions')) {
-  await buildDefinitions(production);
-}
-
-if (allTargets || targets?.includes('tankIcons')) {
-  await buildTankIcons(production);
-}
-
-if (allTargets || targets?.includes('scratchedFlags')) {
-  await buildScratchedFlags(production);
-}
-
-if (allTargets || targets?.includes('circleFlags')) {
-  await buildCircleFlags(production);
-}
-
-if (allTargets || targets?.includes('shellIcons')) {
-  await buildShellIcons(production);
-}
-
-if (allTargets || targets?.includes('moduleIcons')) {
-  await buildModuleIcons(production);
-}
-if (allTargets || targets?.includes('equipmentIcons')) {
-  equipmentIcons(production);
-}
-
-if (allTargets || targets?.includes('consumableIcons')) {
-  await buildConsumableIcons(production);
+for (const method of methods) {
+  if (allTargets || targets?.includes(method.name)) {
+    await method(production);
+  }
 }
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx b/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx
new file mode 100644
index 000000000..d5f46c2d4
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Configure/components/Camouflage.tsx
@@ -0,0 +1,28 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { ModuleButton } from '../../../../../../../components/ModuleButton';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaTemporary,
+} from '../../../../../../../stores/tankopedia';
+
+export function Camouflage() {
+  const camouflage = useTankopediaTemporary((state) => state.camouflage);
+
+  return (
+    <Flex gap="2" direction="column">
+      <Heading size="4">Camouflage</Heading>
+
+      <ModuleButton
+        selected={camouflage}
+        first
+        last
+        type="camouflage"
+        onClick={() => {
+          mutateTankopediaTemporary((draft) => {
+            draft.camouflage = !camouflage;
+          });
+        }}
+      />
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
index 57b73e568..b00a07843 100644
--- a/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Configure/index.tsx
@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import { Camouflage } from './components/Camouflage';
 import { Consumables } from './components/Consumables';
 import { Equipments } from './components/Equipments';
 import { Modules } from './components/Modules';
@@ -12,6 +13,7 @@ export function Configure() {
         <Modules />
         <Equipments />
         <Consumables />
+        <Camouflage />
       </Flex>
 
       {/*
@@ -19,10 +21,6 @@ export function Configure() {
         <Heading size="5">Camouflage</Heading>
       </Flex>
 
-      <Flex gap="4" direction="column">
-        <Heading size="5">Consumables</Heading>
-      </Flex>
-
       <Flex gap="4" direction="column">
         <Heading size="5">Provisions</Heading>
       </Flex> */}
diff --git a/src/components/ModuleButton.tsx b/src/components/ModuleButton.tsx
index e0b70da3a..8984061d8 100644
--- a/src/components/ModuleButton.tsx
+++ b/src/components/ModuleButton.tsx
@@ -25,6 +25,9 @@ type ModuleButtonProps = Omit<ComponentProps<typeof Button>, 'type'> & {
         type: 'consumable';
         consumable: number;
       }
+    | {
+        type: 'camouflage';
+      }
   );
 
 export function ModuleButton({
@@ -49,6 +52,10 @@ export function ModuleButton({
     imageStyles.top = '50%';
     imageStyles.left = '50%';
     imageStyles.transform = 'translate(calc(-50% + 2px), calc(-50% + 2px))';
+  } else if (props.type === 'camouflage') {
+    imageStyles.top = '50%';
+    imageStyles.left = '50%';
+    imageStyles.transform = 'translate(calc(-50% + 4px), calc(-50% + 4px))';
   }
 
   return (
@@ -80,7 +87,9 @@ export function ModuleButton({
               ? `icons/shells/${props.shell}.webp`
               : props.type === 'consumable'
                 ? `icons/consumables/${props.consumable}.webp`
-                : `icons/equipment/${props.equipment}.webp`,
+                : props.type === 'camouflage'
+                  ? `icons/camo.webp`
+                  : `icons/equipment/${props.equipment}.webp`,
         )}
         style={imageStyles}
       />
diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts
index 373bac842..fa31e2bae 100644
--- a/src/stores/tankopedia.ts
+++ b/src/stores/tankopedia.ts
@@ -58,6 +58,7 @@ interface TankopediaTemporary {
   equipmentMatrix: EquipmentMatrix;
   mode: TankopediaMode;
   consumables: number[];
+  camouflage: boolean;
 }
 
 export const useTankopediaPersistent = create<TankopediaPersistent>()(
@@ -106,6 +107,7 @@ export const useTankopediaTemporary = create<TankopediaTemporary>()(
     ],
     mode: 'model',
     consumables: [],
+    camouflage: false,
   })),
 );