From 7b0465322d8c6c0379fa4aca75c0c7f810ae44dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 31 Mar 2024 19:27:37 -0500
Subject: [PATCH] feat: special skills

---
 .../components/Skills/constants.tsx           |  8 +++++
 .../{Skills.tsx => Skills/index.tsx}          | 35 +++++++++----------
 .../ModuleButtons/TankComponentButton.tsx     |  4 ++-
 3 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants.tsx
 rename src/app/tools/tankopedia/[id]/components/Characteristics/components/{Skills.tsx => Skills/index.tsx} (67%)

diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants.tsx
new file mode 100644
index 000000000..ebf2c6f05
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants.tsx
@@ -0,0 +1,8 @@
+export const permanentSkills = [
+  'smooth_turn',
+  'soft_recoil',
+  'smooth_driving',
+  'smooth_turret',
+  'virtuoso',
+  'camouflage',
+];
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
similarity index 67%
rename from src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx
rename to src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
index 0272e2b41..cf1d83420 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx
@@ -1,24 +1,17 @@
-import { Flex, Heading } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Text } from '@radix-ui/themes';
 import { use } from 'react';
-import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton';
-import { asset } from '../../../../../../../core/blitzkrieg/asset';
-import { skillDefinitions } from '../../../../../../../core/blitzkrieg/skillDefinitions';
-import { Tier } from '../../../../../../../core/blitzkrieg/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { GenericTankComponentButton } from '../../../../../../../../components/ModuleButtons/GenericTankComponentButton';
+import { asset } from '../../../../../../../../core/blitzkrieg/asset';
+import { skillDefinitions } from '../../../../../../../../core/blitzkrieg/skillDefinitions';
+import { Tier } from '../../../../../../../../core/blitzkrieg/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../../../core/blitzkrieg/tankDefinitions/constants';
 import {
   mutateTankopediaTemporary,
   useTankopediaTemporary,
-} from '../../../../../../../stores/tankopedia';
-import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
-
-const usefulSkills = [
-  'smooth_turn',
-  'soft_recoil',
-  'smooth_driving',
-  'smooth_turret',
-  'virtuoso',
-  'camouflage',
-];
+} from '../../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper';
+import { permanentSkills } from './constants';
 
 export function Skills() {
   const awaitedSkillDefinitions = use(skillDefinitions);
@@ -28,7 +21,7 @@ export function Skills() {
     mutateTankopediaTemporary((draft) => {
       Object.values(awaitedSkillDefinitions.classes).forEach((skills) => {
         skills.forEach((skill) => {
-          draft.skills[skill] = usefulSkills.includes(skill) ? 7 : 0;
+          draft.skills[skill] = permanentSkills.includes(skill) ? 7 : 0;
         });
       });
     });
@@ -40,6 +33,11 @@ export function Skills() {
     <ConfigurationChildWrapper>
       <Heading size="4">Crew skills</Heading>
 
+      <Text>
+        <InfoCircledIcon /> Skills in yellow only apply under special
+        circumstances.
+      </Text>
+
       <Flex direction="column" gap="2">
         {Object.entries(awaitedSkillDefinitions.classes).map(
           ([tankClass, skills]) => (
@@ -49,6 +47,7 @@ export function Skills() {
 
                 return (
                   <GenericTankComponentButton
+                    special={!permanentSkills.includes(skill)}
                     first
                     last
                     selected={level > 0}
diff --git a/src/components/ModuleButtons/TankComponentButton.tsx b/src/components/ModuleButtons/TankComponentButton.tsx
index 3062096cf..676de80e7 100644
--- a/src/components/ModuleButtons/TankComponentButton.tsx
+++ b/src/components/ModuleButtons/TankComponentButton.tsx
@@ -11,6 +11,7 @@ export interface TankComponentButtonProps
   discriminator?: ReactNode;
   disabled?: boolean;
   banner?: string;
+  special?: boolean;
 }
 
 export function TankComponentButton({
@@ -19,6 +20,7 @@ export function TankComponentButton({
   last = false,
   rowChild,
   discriminator,
+  special,
   children,
   banner,
   ...props
@@ -26,7 +28,7 @@ export function TankComponentButton({
   return (
     <Button
       radius="medium"
-      color={selected ? undefined : 'gray'}
+      color={selected ? (special ? 'amber' : undefined) : 'gray'}
       variant={selected ? 'surface' : 'soft'}
       style={{
         padding: 0,