40650: Animations

app/_layout.tsx

@@ -25,7 +25,7 @@ const AppStack = (): JSX.Element => {
           fontWeight: 'bold',
         },
       }}>
-      <Stack.Screen name="index" options={{}} />
+      <Stack.Screen name="index" options={{title: 'Badge Magic'}} />
     </Stack>
   );
 };

app/index.tsx

@@ -10,24 +10,26 @@ import {BadgeForm} from '@/components/BadgeForm';
 import {BadgeScanning} from '@/components/BadgeScanning';
 import {type BadgeConfigFormData} from '@/models/BadgeForm.model';
 import {type BadgeMagic} from '@/models/BadgeMagic.model';
+import {Animations} from '@/utils/animations';
 import {sendPackets} from '@/utils/bluetooth';
 import {getPackets} from '@/utils/payload';
 
-const DefaultFormData: BadgeConfigFormData = {
+const DefaultBagdeConfigFormData: BadgeConfigFormData = {
   text: '',
   effects: {
     flash: false,
     marquee: false,
     invertLed: false,
   },
   speed: 0,
+  animation: Animations.RIGHT,
 };
 
 const Home = (): JSX.Element => {
   const [scanning, setScanning] = useState(false);
   const [connectedBadge, setConnectedBadge] = useState<BadgeMagic>();
 
-  const methods = useForm<BadgeConfigFormData>({defaultValues: DefaultFormData});
+  const methods = useForm<BadgeConfigFormData>({defaultValues: DefaultBagdeConfigFormData});
 
   const handleSendToBadge = async (data: BadgeConfigFormData): Promise<void> => {
     if (!connectedBadge) {
@@ -79,7 +81,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 40,
     gap: 8,
-    left: 20,
+    left: 40,
     alignItems: 'center',
     justifyContent: 'space-between',
     flexDirection: 'row',

src/components/Animations.tsx

@@ -0,0 +1,35 @@
+import {StyleSheet, View} from 'react-native';
+
+import {useFormContext} from 'react-hook-form';
+
+import {animations} from '@/utils/animations';
+
+import {ControlledCard} from './CardControlled';
+
+export const Animations = (): JSX.Element => {
+  const {control} = useFormContext<FormData>();
+
+  return (
+    <View style={styles.cardsContainer}>
+      {animations.map((animation) => (
+        <ControlledCard
+          key={animation.code}
+          code={animation.code}
+          imagePath={animation.imagePath}
+          control={control}
+          title={animation.title}
+          name={'animation'}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardsContainer: {
+    paddingTop: 16,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly',
+  },
+});

src/components/BadgeForm.tsx

@@ -1,5 +1,5 @@
 import {useState} from 'react';
-import {StyleSheet, View, useWindowDimensions, Text} from 'react-native';
+import {StyleSheet, View, useWindowDimensions} from 'react-native';
 
 import {useFormContext} from 'react-hook-form';
 import {SceneMap, TabView} from 'react-native-tab-view';
@@ -8,12 +8,11 @@ import {AppInput} from '@/components/AppInput';
 import {tabRoutes} from '@/utils/tabRoutes';
 
 import {type BadgeConfigFormData} from '../models/BadgeForm.model';
+import {Animations} from './Animations';
 import {BadgeConfigTabBar} from './BadgeConfigTabBar';
 import {Effects} from './Effects';
 import {SpeedSlider} from './Speed';
 
-const Animations = (): JSX.Element => <Text>Nothing implemented 00</Text>;
-
 const renderScene = SceneMap({
   effects: Effects,
   animations: Animations,

src/components/CardControlled.tsx

@@ -3,43 +3,53 @@ import {type ImageSourcePropType, Text, StyleSheet} from 'react-native';
 import {type FieldValues, type UseControllerProps, useController} from 'react-hook-form';
 import {useTheme, Card} from 'react-native-paper';
 
+import {type Animations} from '@/utils/animations';
+
 type ControlledCardProps<T extends FieldValues> = {
   imagePath: ImageSourcePropType;
   title: string;
+  code?: Animations;
 } & UseControllerProps<T>;
 
 export const ControlledCard = <T extends FieldValues>({
   control,
   name,
+  code,
   title,
   imagePath,
 }: ControlledCardProps<T>): JSX.Element => {
   const {colors} = useTheme();
+  const isAnimationSelected = name === 'animation';
 
   const {
     field: {value, onChange},
   } = useController({name, control});
 
   const handleOnPress = (): void => {
-    onChange(!value);
+    onChange(isAnimationSelected ? code : !value);
   };
 
+  const cardColor = isAnimationSelected
+    ? value === code
+      ? colors.primary
+      : colors.onPrimary
+    : value
+      ? colors.primary
+      : colors.onPrimary;
+
   return (
-    <Card
-      onPress={handleOnPress}
-      style={[{backgroundColor: value ? colors.primary : colors.onPrimary}, styles.card]}>
+    <Card onPress={handleOnPress} style={[{backgroundColor: cardColor}, styles.card]}>
       <Card.Cover source={imagePath} style={styles.image} />
       <Card.Content>
-        <Text>{title}</Text>
+        <Text style={styles.text}>{title}</Text>
       </Card.Content>
     </Card>
   );
 };
 
 const styles = StyleSheet.create({
   card: {
-    flex: 1,
-    margin: 10,
+    marginTop: 10,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 10,
@@ -49,7 +59,10 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     borderRadius: 2,
     margin: 5,
-    width: 70,
-    height: 70,
+    width: 90,
+    height: 90,
+  },
+  text: {
+    textAlign: 'center',
   },
 });

src/models/BadgeForm.model.ts

@@ -1,9 +1,12 @@
+import {type Animations} from '@/utils/animations';
+
 export interface BadgeConfigFormData {
   text: string;
   effects: {
     flash: boolean;
     marquee: boolean;
     invertLed: boolean;
   };
+  animation: Animations;
   speed: number;
 }

src/models/SelectionType.model.ts

@@ -0,0 +1,8 @@
+import {type ImageSourcePropType} from 'react-native';
+
+export interface SelectionType {
+  imagePath: ImageSourcePropType;
+  title: string;
+  name?: string;
+  code?: number;
+}

src/utils/animations.ts

@@ -0,0 +1,64 @@
+import {type SelectionType} from '@/models/SelectionType.model';
+
+import animationImageSrc from '../assets/ic_anim_animation.gif';
+import downImageSrc from '../assets/ic_anim_down.gif';
+import fixedImageSrc from '../assets/ic_anim_fixed.gif';
+import laserImageSrc from '../assets/ic_anim_laser.gif';
+import leftImageSrc from '../assets/ic_anim_left.gif';
+import pictureImageSrc from '../assets/ic_anim_picture.gif';
+import rightImageSrc from '../assets/ic_anim_right.gif';
+import upImageSrc from '../assets/ic_anim_up.gif';
+
+export enum Animations {
+  LEFT = 1,
+  UP = 2,
+  DOWN = 3,
+  FIXED = 4,
+  PICTURE = 5,
+  LASER = 6,
+  ANIMATION = 7,
+  RIGHT = 0,
+}
+
+export const animations = [
+  {
+    imagePath: rightImageSrc,
+    title: 'Left',
+    code: Animations.LEFT,
+  },
+  {
+    imagePath: upImageSrc,
+    title: 'Up',
+    code: Animations.UP,
+  },
+  {
+    imagePath: downImageSrc,
+    title: 'Down',
+    code: Animations.DOWN,
+  },
+  {
+    imagePath: fixedImageSrc,
+    title: 'Fixed',
+    code: Animations.FIXED,
+  },
+  {
+    imagePath: pictureImageSrc,
+    title: 'Picture',
+    code: Animations.PICTURE,
+  },
+  {
+    imagePath: animationImageSrc,
+    title: 'Animation',
+    code: Animations.ANIMATION,
+  },
+  {
+    imagePath: laserImageSrc,
+    title: 'Laser',
+    code: Animations.LASER,
+  },
+  {
+    imagePath: leftImageSrc,
+    title: 'Right',
+    code: Animations.RIGHT,
+  },
+] as const satisfies SelectionType[];

src/utils/payload.ts

@@ -52,13 +52,15 @@ export function getPackets(data: BadgeConfigFormData): string[] {
 }
 
 function buildDataHexString(data: BadgeConfigFormData): string {
-  const {text, effects, speed} = data;
+  const {text, effects, speed, animation} = data;
+
   const payload = getLetterBitmaps(text).join('');
   const size = getSize(text);
   const timestamp = getTimestamp();
   const marquee = getMarqueeValue(effects.marquee);
   const flash = getFlashValue(effects.flash);
-  const modes = `${speed}0` + '00' + '00' + '00' + '00' + '00' + '00' + '00';
+  const modes = `${speed}${animation}` + '00' + '00' + '00' + '00' + '00' + '00' + '00';
+
   return (
     HEADER + flash + marquee + modes + size + PADDING1 + timestamp + PADDING2 + SEPARATOR + payload
   );