diff --git a/.expo/packager-info.json b/.expo/packager-info.json
index 36cff4cb39bfd9cefe1bfc0022fb4e4ba2019c7c..f76bd5577b519b44b27333676edf87b54cb68b59 100644
--- a/.expo/packager-info.json
+++ b/.expo/packager-info.json
@@ -1,6 +1,6 @@
 {
-  "expoServerPort": null,
-  "packagerPort": null,
+  "expoServerPort": 19000,
+  "packagerPort": 19000,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
diff --git a/.expo/web/cache/development/babel-loader/0015aa41e9a700f23ea6609bc116313f7f1106da4559fff97e740222b9a33a65.json b/.expo/web/cache/development/babel-loader/0015aa41e9a700f23ea6609bc116313f7f1106da4559fff97e740222b9a33a65.json
new file mode 100644
index 0000000000000000000000000000000000000000..9cb6fc9be78e08b3d8c35ada62e75797907008bf
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0015aa41e9a700f23ea6609bc116313f7f1106da4559fff97e740222b9a33a65.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 0\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","bottom","padding","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 0\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/038bdff77b874af09243ec03793578fb19da0468882f07e83a42d658bf60d9c7.json b/.expo/web/cache/development/babel-loader/038bdff77b874af09243ec03793578fb19da0468882f07e83a42d658bf60d9c7.json
new file mode 100644
index 0000000000000000000000000000000000000000..afe9175b9e18671ba0498080b34c616c326e46e4
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/038bdff77b874af09243ec03793578fb19da0468882f07e83a42d658bf60d9c7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: \"translateY('')\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: \"translateY('')\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE;EACf,CAAC;EACDT,aAAa,EAAE;IACXU,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfL,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE;EACb,CAAC;EACDX,SAAS,EAAE;IACPY,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDZ,IAAI,EAAE;IACFW,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDpB,iBAAiB,EAAE;IACfqB,OAAO,EAAE,MAAM;IACfP,IAAI,EAAE,KAAK;IACXH,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDb,QAAQ,EAAE;IACNe,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDjB,aAAa,EAAE;IACXiB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDvB,UAAU,EAAE;IACRyB,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVN,KAAK,EAAE,KAAK;IACZU,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDvB,SAAS,EAAE;IACPmB,KAAK,EAAE;EACX,CAAC;EACD5B,IAAI,EAAE;IACFqB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdE,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBO,QAAQ,EAAE;EACd,CAAC;EACD9B,IAAI,EAAE;IACFkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbI,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACDpB,gBAAgB,EAAE;IACdiB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbY,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/064889a7320f4522e9f400d3ef6c28cdb8efdd6aff6d18e1a819b2d7fad145b1.json b/.expo/web/cache/development/babel-loader/064889a7320f4522e9f400d3ef6c28cdb8efdd6aff6d18e1a819b2d7fad145b1.json
new file mode 100644
index 0000000000000000000000000000000000000000..d7b893dec09a8fcc2dac4487caa4b96486d944fa
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/064889a7320f4522e9f400d3ef6c28cdb8efdd6aff6d18e1a819b2d7fad145b1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","left","borderRadius","padding","color","fontSize","fontWeight","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACa,eAAgB;MAAAX,QAAA,GAChCpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACc,iBAAiB,EAAE;UAACJ,WAAW,EAAE1B,KAAK,CAAC+B,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAb,QAAA,GACpGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACgB,aAAc;UAAAd,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACiB,QAAS;UAAAf,QAAA,EACxBlB,KAAK,CAACiC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPnC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACkB,aAAa,EAAE;UAACR,WAAW,EAAE1B,KAAK,CAACmC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAjB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACoB,SAAU;UAAAlB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACqB,IAAK;UAAAnB,QAAA,GAAElB,KAAK,CAACsC,KAAK,EAAC,KAAG,EAACtC,KAAK,CAACuC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACL,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMvB,MAAM,GAAG3B,UAAU,CAACmD,MAAM,CAAC;EAC7BvB,IAAI,EAAE;IACFwB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE;EAClB,CAAC;EACDhB,eAAe,EAAE;IACbiB,WAAW,EAAE,CAAC;IACdpB,WAAW,EAAE,OAAO;IACpBqB,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE;EACV,CAAC;EACDd,aAAa,EAAE;IACXY,WAAW,EAAE,CAAC;IACdG,YAAY,EAAE,CAAC;IACfR,KAAK,EAAE,KAAK;IACZS,OAAO,EAAE;EACb,CAAC;EACDd,SAAS,EAAE;IACPe,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDf,IAAI,EAAE;IACFc,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDvB,iBAAiB,EAAE;IACfiB,OAAO,EAAE,MAAM;IACfN,KAAK,EAAE,KAAK;IACZS,OAAO,EAAE,CAAC;IACVJ,WAAW,EAAE,CAAC;IACdG,YAAY,EAAE;EAClB,CAAC;EACDhB,QAAQ,EAAE;IACNkB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDpB,aAAa,EAAE;IACXoB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD3B,UAAU,EAAE;IACR6B,UAAU,EAAE,MAAM;IAClBL,IAAI,EAAE,KAAK;IACXI,QAAQ,EAAE,EAAE;IACZN,WAAW,EAAE,CAAC;IACdG,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVT,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,MAAM;IACfO,aAAa,EAAE;EACnB,CAAC;EACD1B,SAAS,EAAE;IACPuB,KAAK,EAAE;EACX,CAAC;EACDhC,IAAI,EAAE;IACFsB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdM,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,EAAE;IAChBM,QAAQ,EAAE;EACd,CAAC;EACDjC,IAAI,EAAE;IACFmB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbO,YAAY,EAAE,CAAC;IACfD,IAAI,EAAE;EACV,CAAC;EACDzB,gBAAgB,EAAE;IACdkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbc,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/066ef77f9b7ffc148c6ab95c7bd782a792eaa7d39b6c97b7e42643635beb6d9d.json b/.expo/web/cache/development/babel-loader/066ef77f9b7ffc148c6ab95c7bd782a792eaa7d39b6c97b7e42643635beb6d9d.json
new file mode 100644
index 0000000000000000000000000000000000000000..cecb08e60e965656b1a5828577acd758946c63a0
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/066ef77f9b7ffc148c6ab95c7bd782a792eaa7d39b6c97b7e42643635beb6d9d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/097c48c8aab7d5ae0e8cd029127d52d6cba0090ca619b10efee0f4d95c70e2b9.json b/.expo/web/cache/development/babel-loader/097c48c8aab7d5ae0e8cd029127d52d6cba0090ca619b10efee0f4d95c70e2b9.json
new file mode 100644
index 0000000000000000000000000000000000000000..896831104ffdd1aeef5721423c572e58c36a7ba4
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/097c48c8aab7d5ae0e8cd029127d52d6cba0090ca619b10efee0f4d95c70e2b9.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput;\n    if (amex) {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput;\n        if(amex) {\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/09f86b4cef622a65a1b9a910d32ed39bd6f30bbc8b16e5d39db262f27752865d.json b/.expo/web/cache/development/babel-loader/09f86b4cef622a65a1b9a910d32ed39bd6f30bbc8b16e5d39db262f27752865d.json
new file mode 100644
index 0000000000000000000000000000000000000000..9f705cde26d6f2ce2b4e81838805c886d3ed8a28
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/09f86b4cef622a65a1b9a910d32ed39bd6f30bbc8b16e5d39db262f27752865d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","left","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEvB,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACM,YAAa;MAAAJ,QAAA,GAC7BtB,IAAA,CAACL,KAAK;QAACY,KAAK,EAAEa,MAAM,CAACO,IAAK;QAACH,MAAM,EAAEC,OAAO,qBAAqB;MAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;QAACa,KAAK,EAAEa,MAAM,CAACQ,gBAAiB;QAAAN,QAAA,EAACtB,IAAA,CAACH,OAAO;UAACgC,UAAU,EAAEzB,KAAK,CAAC0B;QAAe,CAAE;MAAC,CAAM,CAAC;IAAA,CACxF,CAAC,EAEP9B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACS,UAAU,EAAE;QAACE,WAAW,EAAE3B,KAAK,CAAC4B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAV,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAAC0B,cAAc,EAAEV,MAAM,CAACa,SAAS;IAAC,CACzD,CAAC,EACP/B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACc,eAAgB;MAAAZ,QAAA,GAChCpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACe,iBAAiB,EAAE;UAACJ,WAAW,EAAE3B,KAAK,CAACgC,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAd,QAAA,GACpGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACiB,aAAc;UAAAf,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACkB,QAAS;UAAAhB,QAAA,EACxBlB,KAAK,CAACkC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPpC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACmB,aAAa,EAAE;UAACR,WAAW,EAAE3B,KAAK,CAACoC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAlB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACqB,SAAU;UAAAnB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACsB,IAAK;UAAApB,QAAA,GAAElB,KAAK,CAACuC,KAAK,EAAC,KAAG,EAACvC,KAAK,CAACwC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACL,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMxB,MAAM,GAAG3B,UAAU,CAACoD,MAAM,CAAC;EAC7BxB,IAAI,EAAE;IACFyB,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE,MAAM;IACpBC,WAAW,EAAE,CAAC;IACdrB,WAAW,EAAE;EACjB,CAAC;EACDG,eAAe,EAAE;IACba,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BT,QAAQ,EAAE,UAAU;IACpBU,IAAI,EAAE;EACV,CAAC;EACD9B,YAAY,EAAE;IACV2B,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,IAAI,EAAE,KAAK;IACXC,OAAO,EAAE,EAAE;IACXX,QAAQ,EAAE;EACd,CAAC;EACDP,aAAa,EAAE;IACXa,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE;EACb,CAAC;EACDhB,SAAS,EAAE;IACPkB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDlB,IAAI,EAAE;IACFiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACD1B,iBAAiB,EAAE;IACfkB,OAAO,EAAE,MAAM;IACfI,OAAO,EAAE,CAAC;IACVL,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE;EAClB,CAAC;EACDpB,QAAQ,EAAE;IACNqB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDvB,aAAa,EAAE;IACXuB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD9B,UAAU,EAAE;IACRgC,UAAU,EAAE,MAAM;IAClBL,IAAI,EAAE,KAAK;IACXI,QAAQ,EAAE,EAAE;IACZR,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE,CAAC;IACVK,SAAS,EAAE,EAAE;IACbf,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDrB,SAAS,EAAE;IACP0B,KAAK,EAAE;EACX,CAAC;EACDpC,IAAI,EAAE;IACFwB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdQ,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBZ,QAAQ,EAAE;EACd,CAAC;EACDnB,IAAI,EAAE;IACFoB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVU,YAAY,EAAE;EAClB,CAAC;EACD9B,gBAAgB,EAAE,CAClB;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/0a54d650d1a6708c6efdf9444ddd0ec8ec7d07e64f9672df452887fa1c30844f.json b/.expo/web/cache/development/babel-loader/0a54d650d1a6708c6efdf9444ddd0ec8ec7d07e64f9672df452887fa1c30844f.json
new file mode 100644
index 0000000000000000000000000000000000000000..0ce1e5e386d1137386161706ca6a79ad6de00438
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0a54d650d1a6708c6efdf9444ddd0ec8ec7d07e64f9672df452887fa1c30844f.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/0af6de2d32f98a714b9b31a81103e329b4b6034792164ecf62470ffdc7fcbf07.json b/.expo/web/cache/development/babel-loader/0af6de2d32f98a714b9b31a81103e329b4b6034792164ecf62470ffdc7fcbf07.json
new file mode 100644
index 0000000000000000000000000000000000000000..46274ad09736be07e35aa08999a10ac8726ffc56
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0af6de2d32f98a714b9b31a81103e329b4b6034792164ecf62470ffdc7fcbf07.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    translateY: \"-50%\"\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","translateY"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        translateY: \"-50%\"\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/0b663d6f3b7a3109b356a75e1599d07b522fe0a09c4c24c911cbce9810b3d4fc.json b/.expo/web/cache/development/babel-loader/0b663d6f3b7a3109b356a75e1599d07b522fe0a09c4c24c911cbce9810b3d4fc.json
new file mode 100644
index 0000000000000000000000000000000000000000..6eb24bd6d48fa4b870a45b57d0b70aec98ce17fa
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0b663d6f3b7a3109b356a75e1599d07b522fe0a09c4c24c911cbce9810b3d4fc.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transform: [{\n      translateY: \"-5à%\"\n    }]\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transform","translateY"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transform: [{translateY: \"-5à%\"}]\n    }\n});"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,gBAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,aAAa;AACpB,OAAOC,IAAI;AACX,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AAAmB,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAChC,IAAAC,SAAA,GAA4ChB,QAAQ,CAAC,EAAE,CAAC;IAAAiB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAjDG,cAAc,GAAAF,UAAA;IAAEG,iBAAiB,GAAAH,UAAA;EACxC,IAAAI,UAAA,GAAkDrB,QAAQ,CAAC,KAAK,CAAC;IAAAsB,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAA1DE,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAC9C,IAAAG,UAAA,GAAgCzB,QAAQ,CAAC,EAAE,CAAC;IAAA0B,UAAA,GAAAR,cAAA,CAAAO,UAAA;IAArCE,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,UAAA,GAA8C7B,QAAQ,CAAC,KAAK,CAAC;IAAA8B,UAAA,GAAAZ,cAAA,CAAAW,UAAA;IAAtDE,eAAe,GAAAD,UAAA;IAAEE,kBAAkB,GAAAF,UAAA;EAC1C,IAAAG,UAAA,GAA0BjC,QAAQ,CAAC,IAAI,CAAC;IAAAkC,WAAA,GAAAhB,cAAA,CAAAe,UAAA;IAAjCE,KAAK,GAAAD,WAAA;IAAEE,QAAQ,GAAAF,WAAA;EACtB,IAAAG,WAAA,GAAwBrC,QAAQ,CAAC,IAAI,CAAC;IAAAsC,WAAA,GAAApB,cAAA,CAAAmB,WAAA;IAA/BE,IAAI,GAAAD,WAAA;IAAEE,OAAO,GAAAF,WAAA;EACpB,IAAAG,WAAA,GAAsCzC,QAAQ,CAAC,KAAK,CAAC;IAAA0C,WAAA,GAAAxB,cAAA,CAAAuB,WAAA;IAA9CE,WAAW,GAAAD,WAAA;IAAEE,cAAc,GAAAF,WAAA;EAClC,IAAAG,WAAA,GAAsB7C,QAAQ,CAAC,EAAE,CAAC;IAAA8C,WAAA,GAAA5B,cAAA,CAAA2B,WAAA;IAA3BE,GAAG,GAAAD,WAAA;IAAEE,MAAM,GAAAF,WAAA;EAClB,IAAAG,WAAA,GAAoCjD,QAAQ,CAAC,KAAK,CAAC;IAAAkD,WAAA,GAAAhC,cAAA,CAAA+B,WAAA;IAA5CE,UAAU,GAAAD,WAAA;IAAEE,aAAa,GAAAF,WAAA;EAEhC,IAAMG,6BAA6B,GAAG,SAAhCA,6BAA6BA,CAAIC,GAAG,EAAK;IAC3C,IAAIC,UAAU,GAAGD,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACvC,IAAIC,UAAU,GAAGF,UAAU;IAC3B,IAAIG,IAAI,GAAGH,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAIJ,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI;IACjFvC,iBAAiB,CAACmC,UAAU,CAAC;IAC7B,OAAOE,UAAU,CAACE,SAAS,CAAC,CAAC,EAAED,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;EAClD,CAAC;EAED,IAAME,eAAe,GAAG,SAAlBA,eAAeA,CAAIN,GAAG,EAAK;IAC7B,IAAIO,IAAI,GAAGP,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/BE,IAAI,GAAGA,IAAI,CAACL,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;IACrC5B,WAAW,CAACiC,IAAI,CAAC;IACjB,OAAOA,IAAI;EACf,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIR,GAAG,EAAK;IACxBA,GAAG,GAAGA,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAC5BR,MAAM,CAACM,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;IAC1B,OAAOL,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC;EAC7B,CAAC;EAED,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAIT,GAAG,EAAK;IACzBlB,QAAQ,CAACkB,GAAG,CAAC;IACbV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,IAAMY,UAAU,GAAG,SAAbA,UAAUA,CAAIV,GAAG,EAAK;IACxBd,OAAO,CAACc,GAAG,CAAC;IACZV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,OACIvC,KAAA,CAACX,IAAI;IAAC+D,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,GACpBjB,UAAU,GACXxC,IAAA,CAACF,QAAQ;MAAC4D,UAAU,EAAElD,cAAe;MAAC4B,GAAG,EAAEA;IAAI,CAAC,CAAC,GAEjDpC,IAAA,CAACJ,IAAI;MAAC0D,KAAK,EAAEC,MAAM,CAACI,IAAK;MAACnD,cAAc,EAAEA,cAAe;MAACwB,WAAW,EAAEA,WAAY;MAACR,KAAK,EAAEA,KAAM;MAACI,IAAI,EAAEA,IAAK;MAAChB,iBAAiB,EAAEA,iBAAkB;MAACQ,eAAe,EAAEA,eAAgB;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAC,EAE5MhB,IAAA,CAACL,aAAa;MAACiE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAACjD,oBAAoB,CAAC,IAAI,CAAC;QAAEoB,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC8B,MAAM,EAAE,SAAAA,OAAA,EAAM;QAAClD,oBAAoB,CAAC,KAAK,CAAC;MAAA,CAAE;MAACmD,WAAW,EAAEtB,6BAA8B;MAACuB,IAAI,EAAC,aAAa;MAACC,WAAW,EAAC;IAAqB,CAAC,CAAC,EAC9PlE,IAAA,CAACL,aAAa;MAACiE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAACzC,kBAAkB,CAAC,IAAI,CAAC;QAAEY,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC8B,MAAM,EAAE,SAAAA,OAAA,EAAM;QAAC1C,kBAAkB,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC2C,WAAW,EAAEf,eAAgB;MAACgB,IAAI,EAAC,WAAW;MAACC,WAAW,EAAC;IAAgB,CAAC,CAAC,EACrOhE,KAAA,CAACX,IAAI;MAAC+D,KAAK,EAAEC,MAAM,CAACY,UAAW;MAAAV,QAAA,GAC3BzD,IAAA,CAACH,UAAU;QAACuD,WAAW,EAAEA,WAAY;QAACC,UAAU,EAAEA;MAAW,CAAC,CAAC,EAC/DrD,IAAA,CAACL,aAAa;QAACiE,KAAK,EAAC,KAAK;QAACC,UAAU,EAAC,IAAI;QAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;UAACrB,aAAa,CAAC,IAAI,CAAC,EAAER,cAAc,CAAC,KAAK,CAAC;QAAA,CAAE;QAAC8B,MAAM,EAAE,SAAAA,OAAA,EAAM;UAACtB,aAAa,CAAC,KAAK,CAAC;QAAA,CAAE;QAACuB,WAAW,EAAEb,UAAW;QAACc,IAAI,EAAC,KAAK;QAACC,WAAW,EAAC;MAAK,CAAC,CAAC;IAAA,CACnM,CAAC,EACPlE,IAAA,CAACP,gBAAgB;MAAC6D,KAAK,EAAEC,MAAM,CAACa,YAAa;MAAAX,QAAA,EACzCzD,IAAA,CAACN,IAAI;QAAC4D,KAAK,EAAEC,MAAM,CAACc,gBAAiB;QAAAZ,QAAA,EAAC;MAAM,CAAM;IAAC,CACrC,CAAC;EAAA,CACjB,CAAC;AAEf;AAEA,IAAMF,MAAM,GAAGjE,UAAU,CAACgF,MAAM,CAAC;EAC7Bd,IAAI,EAAE;IACFI,KAAK,EAAE,KAAK;IACZW,MAAM,EAAE,KAAK;IACbC,eAAe,EAAE,OAAO;IACxBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAACf,KAAK,EAAE,CAAC;MAAEW,MAAM,EAAE;IAAC,CAAC;IACnCK,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE;EAClB,CAAC;EACDV,UAAU,EAAE;IACRW,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBnB,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDO,YAAY,EAAE;IACVY,OAAO,EAAE,EAAE;IACXR,eAAe,EAAE,SAAS;IAC1BC,YAAY,EAAE,CAAC;IACfb,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDQ,gBAAgB,EAAE;IACdY,KAAK,EAAE,OAAO;IACdC,SAAS,EAAE;EACf,CAAC;EACDvB,IAAI,EAAE;IACFwB,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC;EACpC;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/0c33f56293fe1eda690045d0a21db65b54c445eafbf9fe73bef2623190655260.json b/.expo/web/cache/development/babel-loader/0c33f56293fe1eda690045d0a21db65b54c445eafbf9fe73bef2623190655260.json
new file mode 100644
index 0000000000000000000000000000000000000000..2dc9e89c284e46ee752ee4a8466cff4700ae42b6
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0c33f56293fe1eda690045d0a21db65b54c445eafbf9fe73bef2623190655260.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        \n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/0eef94a46411ad7cbb4cd566fd3536de41e65a3509aff471ca8e2d9f4b474ace.json b/.expo/web/cache/development/babel-loader/0eef94a46411ad7cbb4cd566fd3536de41e65a3509aff471ca8e2d9f4b474ace.json
new file mode 100644
index 0000000000000000000000000000000000000000..c4840ea6da917e8e2c918485afe7e8320dcf146a
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/0eef94a46411ad7cbb4cd566fd3536de41e65a3509aff471ca8e2d9f4b474ace.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 0\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","bottom","padding","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 0\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/10bf885e04a64a97a87cb7187ad20b6f886cf9266cc305bf4608492828f8845c.json b/.expo/web/cache/development/babel-loader/10bf885e04a64a97a87cb7187ad20b6f886cf9266cc305bf4608492828f8845c.json
new file mode 100644
index 0000000000000000000000000000000000000000..d07aed3e32929e80722cdba571d7e84e9ca3d9ba
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/10bf885e04a64a97a87cb7187ad20b6f886cf9266cc305bf4608492828f8845c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {},\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","topContainer","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        \n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1108f152871a8eecfa132fa492c00b67063cac5df6cdb5acc48509b332b7f689.json b/.expo/web/cache/development/babel-loader/1108f152871a8eecfa132fa492c00b67063cac5df6cdb5acc48509b332b7f689.json
new file mode 100644
index 0000000000000000000000000000000000000000..ac310dab30d8ea74142288948308c230d3423d57
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1108f152871a8eecfa132fa492c00b67063cac5df6cdb5acc48509b332b7f689.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/132a6ebc3fa591cfee2d3d4c5e9d46f6bc2453b7ff95216d9b2f189a39e583b7.json b/.expo/web/cache/development/babel-loader/132a6ebc3fa591cfee2d3d4c5e9d46f6bc2453b7ff95216d9b2f189a39e583b7.json
new file mode 100644
index 0000000000000000000000000000000000000000..846421faf6ce4b1f7b2fe61cfea262b7584d1eac
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/132a6ebc3fa591cfee2d3d4c5e9d46f6bc2453b7ff95216d9b2f189a39e583b7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput;\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput;\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1601037119383e616c9e647078bbd1674f140f8128652a528634c5f4f7b2e18a.json b/.expo/web/cache/development/babel-loader/1601037119383e616c9e647078bbd1674f140f8128652a528634c5f4f7b2e18a.json
new file mode 100644
index 0000000000000000000000000000000000000000..db013a67a3d378c63b9faf5430da1b55a70c9304
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1601037119383e616c9e647078bbd1674f140f8128652a528634c5f4f7b2e18a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/16a9a4528570a50d71dd27dbad152f7c54bd9b7b6d91d8d8cf376c59584c06cb.json b/.expo/web/cache/development/babel-loader/16a9a4528570a50d71dd27dbad152f7c54bd9b7b6d91d8d8cf376c59584c06cb.json
new file mode 100644
index 0000000000000000000000000000000000000000..9c09660f5139e9c1cf4f2844733e3b99b5f7f916
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/16a9a4528570a50d71dd27dbad152f7c54bd9b7b6d91d8d8cf376c59584c06cb.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/175fe383aca057422b9072fc57ef98f582dd3389dcb26db1bc9fd862532519a7.json b/.expo/web/cache/development/babel-loader/175fe383aca057422b9072fc57ef98f582dd3389dcb26db1bc9fd862532519a7.json
new file mode 100644
index 0000000000000000000000000000000000000000..ea27564ad24776d844698f3f1a2de805481e9037
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/175fe383aca057422b9072fc57ef98f582dd3389dcb26db1bc9fd862532519a7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transla: transla\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transla"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transla\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/18e5a437d58d1027e02e49cbf2502d2af3074fa292346bd2a827698d5b1f75f9.json b/.expo/web/cache/development/babel-loader/18e5a437d58d1027e02e49cbf2502d2af3074fa292346bd2a827698d5b1f75f9.json
new file mode 100644
index 0000000000000000000000000000000000000000..f501bb70f9cbfbdfa77216f739940fcf2db7dc78
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/18e5a437d58d1027e02e49cbf2502d2af3074fa292346bd2a827698d5b1f75f9.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\",\n    borderColor: 'black'\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n        borderColor: 'black'\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/19de83f4de5f453f54fad2089a18444a50b5b886360b566d3e437b4e2c49a415.json b/.expo/web/cache/development/babel-loader/19de83f4de5f453f54fad2089a18444a50b5b886360b566d3e437b4e2c49a415.json
new file mode 100644
index 0000000000000000000000000000000000000000..afb92354c73135faa967aac29df111321853b518
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/19de83f4de5f453f54fad2089a18444a50b5b886360b566d3e437b4e2c49a415.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1a1aebc1c01558e833f4d11191174522a7f688f1af94846b7bfcc4131880082b.json b/.expo/web/cache/development/babel-loader/1a1aebc1c01558e833f4d11191174522a7f688f1af94846b7bfcc4131880082b.json
new file mode 100644
index 0000000000000000000000000000000000000000..c35e8023f39da6ffe9d9051e7467f1cebc83273c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1a1aebc1c01558e833f4d11191174522a7f688f1af94846b7bfcc4131880082b.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","padding","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1bdd4b7ff5fc44227a3b8ecdd49d336bcd33f0633f4e2a2b29c7e2f3025287ca.json b/.expo/web/cache/development/babel-loader/1bdd4b7ff5fc44227a3b8ecdd49d336bcd33f0633f4e2a2b29c7e2f3025287ca.json
new file mode 100644
index 0000000000000000000000000000000000000000..75e6697b88a199e3d8d257dcdf38b11ca10f6966
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1bdd4b7ff5fc44227a3b8ecdd49d336bcd33f0633f4e2a2b29c7e2f3025287ca.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.replace(/[^0-9\\s]/g, '').trim();\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","trim","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.replace(/[^0-9\\s]/g, '').trim();\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,gBAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,aAAa;AACpB,OAAOC,IAAI;AACX,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AAAmB,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAChC,IAAAC,SAAA,GAA4ChB,QAAQ,CAAC,EAAE,CAAC;IAAAiB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAjDG,cAAc,GAAAF,UAAA;IAAEG,iBAAiB,GAAAH,UAAA;EACxC,IAAAI,UAAA,GAAkDrB,QAAQ,CAAC,KAAK,CAAC;IAAAsB,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAA1DE,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAC9C,IAAAG,UAAA,GAAgCzB,QAAQ,CAAC,EAAE,CAAC;IAAA0B,UAAA,GAAAR,cAAA,CAAAO,UAAA;IAArCE,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,UAAA,GAA8C7B,QAAQ,CAAC,KAAK,CAAC;IAAA8B,UAAA,GAAAZ,cAAA,CAAAW,UAAA;IAAtDE,eAAe,GAAAD,UAAA;IAAEE,kBAAkB,GAAAF,UAAA;EAC1C,IAAAG,UAAA,GAA0BjC,QAAQ,CAAC,IAAI,CAAC;IAAAkC,WAAA,GAAAhB,cAAA,CAAAe,UAAA;IAAjCE,KAAK,GAAAD,WAAA;IAAEE,QAAQ,GAAAF,WAAA;EACtB,IAAAG,WAAA,GAAwBrC,QAAQ,CAAC,IAAI,CAAC;IAAAsC,WAAA,GAAApB,cAAA,CAAAmB,WAAA;IAA/BE,IAAI,GAAAD,WAAA;IAAEE,OAAO,GAAAF,WAAA;EACpB,IAAAG,WAAA,GAAsCzC,QAAQ,CAAC,KAAK,CAAC;IAAA0C,WAAA,GAAAxB,cAAA,CAAAuB,WAAA;IAA9CE,WAAW,GAAAD,WAAA;IAAEE,cAAc,GAAAF,WAAA;EAClC,IAAAG,WAAA,GAAsB7C,QAAQ,CAAC,EAAE,CAAC;IAAA8C,WAAA,GAAA5B,cAAA,CAAA2B,WAAA;IAA3BE,GAAG,GAAAD,WAAA;IAAEE,MAAM,GAAAF,WAAA;EAClB,IAAAG,WAAA,GAAoCjD,QAAQ,CAAC,KAAK,CAAC;IAAAkD,WAAA,GAAAhC,cAAA,CAAA+B,WAAA;IAA5CE,UAAU,GAAAD,WAAA;IAAEE,aAAa,GAAAF,WAAA;EAEhC,IAAMG,6BAA6B,GAAG,SAAhCA,6BAA6BA,CAAIC,GAAG,EAAK;IAC3C,IAAIC,UAAU,GAAGD,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACvC,IAAIC,UAAU,GAAGF,UAAU;IAC3B,IAAIG,IAAI,GAAGH,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAIJ,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI;IACjF,IAAIC,cAAc,GAAGH,UAAU,GAAG,oCAAoC;IACtEG,cAAc,GAAGA,cAAc,CAACD,SAAS,CAAC,CAAC,EAAED,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5D,IAAGA,IAAI,EAAE;MACLE,cAAc,GAAGA,cAAc,CAACJ,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IAChG,CAAC,MAAI;MACDI,cAAc,GAAGA,cAAc,CAACJ,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC1G;IACApC,iBAAiB,CAACmC,UAAU,CAAC;IAC7B,OAAOK,cAAc,CAACJ,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAACK,IAAI,CAAC,CAAC;EACzD,CAAC;EAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIR,GAAG,EAAK;IAC7B,IAAIS,IAAI,GAAGT,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/BI,IAAI,GAAGA,IAAI,CAACP,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;IACrC5B,WAAW,CAACmC,IAAI,CAAC;IACjB,OAAOA,IAAI;EACf,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIV,GAAG,EAAK;IACxBA,GAAG,GAAGA,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAC5BR,MAAM,CAACM,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;IAC1B,OAAOL,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC;EAC7B,CAAC;EAED,IAAMM,WAAW,GAAG,SAAdA,WAAWA,CAAIX,GAAG,EAAK;IACzBlB,QAAQ,CAACkB,GAAG,CAAC;IACbV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,IAAMc,UAAU,GAAG,SAAbA,UAAUA,CAAIZ,GAAG,EAAK;IACxBd,OAAO,CAACc,GAAG,CAAC;IACZV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,OACIvC,KAAA,CAACX,IAAI;IAACiE,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,GACpBnB,UAAU,GACXxC,IAAA,CAACF,QAAQ;MAAC8D,UAAU,EAAEpD,cAAe;MAAC4B,GAAG,EAAEA;IAAI,CAAC,CAAC,GAEjDpC,IAAA,CAACJ,IAAI;MAAC4D,KAAK,EAAEC,MAAM,CAACI,IAAK;MAACrD,cAAc,EAAEA,cAAe;MAACwB,WAAW,EAAEA,WAAY;MAACR,KAAK,EAAEA,KAAM;MAACI,IAAI,EAAEA,IAAK;MAAChB,iBAAiB,EAAEA,iBAAkB;MAACQ,eAAe,EAAEA,eAAgB;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAC,EAE5MhB,IAAA,CAACL,aAAa;MAACmE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAACnD,oBAAoB,CAAC,IAAI,CAAC;QAAEoB,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAACgC,MAAM,EAAE,SAAAA,OAAA,EAAM;QAACpD,oBAAoB,CAAC,KAAK,CAAC;MAAA,CAAE;MAACqD,WAAW,EAAExB,6BAA8B;MAACyB,IAAI,EAAC,aAAa;MAACC,WAAW,EAAC;IAAqB,CAAC,CAAC,EAC9PpE,IAAA,CAACL,aAAa;MAACmE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAAC3C,kBAAkB,CAAC,IAAI,CAAC;QAAEY,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAACgC,MAAM,EAAE,SAAAA,OAAA,EAAM;QAAC5C,kBAAkB,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC6C,WAAW,EAAEf,eAAgB;MAACgB,IAAI,EAAC,WAAW;MAACC,WAAW,EAAC;IAAgB,CAAC,CAAC,EACrOlE,KAAA,CAACX,IAAI;MAACiE,KAAK,EAAEC,MAAM,CAACY,UAAW;MAAAV,QAAA,GAC3B3D,IAAA,CAACH,UAAU;QAACyD,WAAW,EAAEA,WAAY;QAACC,UAAU,EAAEA;MAAW,CAAC,CAAC,EAC/DvD,IAAA,CAACL,aAAa;QAACmE,KAAK,EAAC,KAAK;QAACC,UAAU,EAAC,IAAI;QAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;UAACvB,aAAa,CAAC,IAAI,CAAC,EAAER,cAAc,CAAC,KAAK,CAAC;QAAA,CAAE;QAACgC,MAAM,EAAE,SAAAA,OAAA,EAAM;UAACxB,aAAa,CAAC,KAAK,CAAC;QAAA,CAAE;QAACyB,WAAW,EAAEb,UAAW;QAACc,IAAI,EAAC,KAAK;QAACC,WAAW,EAAC;MAAK,CAAC,CAAC;IAAA,CACnM,CAAC,EACPpE,IAAA,CAACP,gBAAgB;MAAC+D,KAAK,EAAEC,MAAM,CAACa,YAAa;MAAAX,QAAA,EACzC3D,IAAA,CAACN,IAAI;QAAC8D,KAAK,EAAEC,MAAM,CAACc,gBAAiB;QAAAZ,QAAA,EAAC;MAAM,CAAM;IAAC,CACrC,CAAC;EAAA,CACjB,CAAC;AAEf;AAEA,IAAMF,MAAM,GAAGnE,UAAU,CAACkF,MAAM,CAAC;EAC7Bd,IAAI,EAAE;IACFI,KAAK,EAAE,KAAK;IACZW,MAAM,EAAE,KAAK;IACbC,eAAe,EAAE,OAAO;IACxBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAACf,KAAK,EAAE,CAAC;MAAEW,MAAM,EAAE;IAAC,CAAC;IACnCK,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE;EAClB,CAAC;EACDV,UAAU,EAAE;IACRW,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBnB,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDO,YAAY,EAAE;IACVY,OAAO,EAAE,EAAE;IACXR,eAAe,EAAE,SAAS;IAC1BC,YAAY,EAAE,CAAC;IACfb,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDQ,gBAAgB,EAAE;IACdY,KAAK,EAAE,OAAO;IACdC,SAAS,EAAE;EACf,CAAC;EACDvB,IAAI,EAAE,CAEN;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1c2a8516bd500be85d60f053650dceee426232107eb344a83a8fb2b1de1aecdf.json b/.expo/web/cache/development/babel-loader/1c2a8516bd500be85d60f053650dceee426232107eb344a83a8fb2b1de1aecdf.json
new file mode 100644
index 0000000000000000000000000000000000000000..e9604f0fa82aa2ca609ce7404ec345a2e1124e4c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1c2a8516bd500be85d60f053650dceee426232107eb344a83a8fb2b1de1aecdf.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE;EACZ,CAAC;EACDR,aAAa,EAAE;IACXS,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfL,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE;EACb,CAAC;EACDX,SAAS,EAAE;IACPY,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDZ,IAAI,EAAE;IACFW,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDpB,iBAAiB,EAAE;IACfqB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXH,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDb,QAAQ,EAAE;IACNe,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDjB,aAAa,EAAE;IACXiB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDvB,UAAU,EAAE;IACRyB,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVN,KAAK,EAAE,KAAK;IACZU,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDvB,SAAS,EAAE;IACPmB,KAAK,EAAE;EACX,CAAC;EACD5B,IAAI,EAAE;IACFqB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdE,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDvB,IAAI,EAAE;IACFkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbI,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACDpB,gBAAgB,EAAE;IACdiB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1c98a3bfa8c2e87f40977f05dd3430acbef27c581f0b20f09db3168c8c3692f3.json b/.expo/web/cache/development/babel-loader/1c98a3bfa8c2e87f40977f05dd3430acbef27c581f0b20f09db3168c8c3692f3.json
new file mode 100644
index 0000000000000000000000000000000000000000..31630daa7f9dfd277f7f3a3a1e3ed056faa2764b
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1c98a3bfa8c2e87f40977f05dd3430acbef27c581f0b20f09db3168c8c3692f3.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1e5dc821e833a91a016d2c07abec075565d14cf11b0ecaf4ee2a5c9894999ddb.json b/.expo/web/cache/development/babel-loader/1e5dc821e833a91a016d2c07abec075565d14cf11b0ecaf4ee2a5c9894999ddb.json
new file mode 100644
index 0000000000000000000000000000000000000000..1df53653256920f0e6f0387b91cde7c7f47ae74f
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1e5dc821e833a91a016d2c07abec075565d14cf11b0ecaf4ee2a5c9894999ddb.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/1e90fea0fb876d91d8dc45f3543eec6a1e174422d607f6864ba8a27aa985f211.json b/.expo/web/cache/development/babel-loader/1e90fea0fb876d91d8dc45f3543eec6a1e174422d607f6864ba8a27aa985f211.json
new file mode 100644
index 0000000000000000000000000000000000000000..0b6cc678e1e1fc8f267ce6907e8b30e7fb00aaf3
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/1e90fea0fb876d91d8dc45f3543eec6a1e174422d607f6864ba8a27aa985f211.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/216615cca954c356f49693636c666b15b1aacc2fe24990cdfa23dee59c057c43.json b/.expo/web/cache/development/babel-loader/216615cca954c356f49693636c666b15b1aacc2fe24990cdfa23dee59c057c43.json
new file mode 100644
index 0000000000000000000000000000000000000000..043bce07f55757c72fbff2f6d420286af0e14417
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/216615cca954c356f49693636c666b15b1aacc2fe24990cdfa23dee59c057c43.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"4%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"4%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/219ffaed3a3c921cd7c7643fce1cb3aac0e6f858c1ad4e249ef7377e3a12eab9.json b/.expo/web/cache/development/babel-loader/219ffaed3a3c921cd7c7643fce1cb3aac0e6f858c1ad4e249ef7377e3a12eab9.json
new file mode 100644
index 0000000000000000000000000000000000000000..e92f1ed8d158381afe4db35c9dcaedd65fcef1ad
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/219ffaed3a3c921cd7c7643fce1cb3aac0e6f858c1ad4e249ef7377e3a12eab9.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/254d3e8d5ddb23da925049bd009ef6d1856008a37fbf1d911e59c538a6df7832.json b/.expo/web/cache/development/babel-loader/254d3e8d5ddb23da925049bd009ef6d1856008a37fbf1d911e59c538a6df7832.json
new file mode 100644
index 0000000000000000000000000000000000000000..f653905057f545a9aafc1ebfff7555c72d0fb8a6
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/254d3e8d5ddb23da925049bd009ef6d1856008a37fbf1d911e59c538a6df7832.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAAA4B,QAAA,GACDpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;UAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAZ,QAAA,GACxGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;UAAAb,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;UAAAd,QAAA,EACxBlB,KAAK,CAACgC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;UAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;UAAAjB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;UAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACD,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE;EAClB,CAAC;EACDX,aAAa,EAAE;IACXY,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfP,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFqB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdI,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBO,QAAQ,EAAE;EACd,CAAC;EACDhC,IAAI,EAAE;IACFkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdiB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbc,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/260f34cc98e6c191fb142fe1834e9d2654c7aabf10f67a7177c5cf879ee15b43.json b/.expo/web/cache/development/babel-loader/260f34cc98e6c191fb142fe1834e9d2654c7aabf10f67a7177c5cf879ee15b43.json
new file mode 100644
index 0000000000000000000000000000000000000000..cb0f5be17aa85512f7d2a3fe6cde596a80de8b22
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/260f34cc98e6c191fb142fe1834e9d2654c7aabf10f67a7177c5cf879ee15b43.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"6%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"6%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/26ab0da0537bb4291682115ea37655df04ef4fd4d41a653d5e3e5d3f4946bdbc.json b/.expo/web/cache/development/babel-loader/26ab0da0537bb4291682115ea37655df04ef4fd4d41a653d5e3e5d3f4946bdbc.json
new file mode 100644
index 0000000000000000000000000000000000000000..74050606a587260386041f724248cd01a6807c38
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/26ab0da0537bb4291682115ea37655df04ef4fd4d41a653d5e3e5d3f4946bdbc.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row',\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/26bd4be74814240e40179ca1098d646e3ae7ed8f75132bee851b071a0451b207.json b/.expo/web/cache/development/babel-loader/26bd4be74814240e40179ca1098d646e3ae7ed8f75132bee851b071a0451b207.json
new file mode 100644
index 0000000000000000000000000000000000000000..335ceaf1afaf4e43e27280a1fac7494f5c49223b
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/26bd4be74814240e40179ca1098d646e3ae7ed8f75132bee851b071a0451b207.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 0\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","position","bottom","padding","borderWidth","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 0\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/288baeaf7d32821a3c810209c3c3976bbe7f67ac55b00709c3bfbcaf898cf4ae.json b/.expo/web/cache/development/babel-loader/288baeaf7d32821a3c810209c3c3976bbe7f67ac55b00709c3bfbcaf898cf4ae.json
new file mode 100644
index 0000000000000000000000000000000000000000..4944ca0bef4d0804f9c9cf4e3d13ea02108c5f79
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/288baeaf7d32821a3c810209c3c3976bbe7f67ac55b00709c3bfbcaf898cf4ae.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/30bde63e2e7047ba9e26cad778e8a8337b88675e4445ea4eaf10082bcc896c2c.json b/.expo/web/cache/development/babel-loader/30bde63e2e7047ba9e26cad778e8a8337b88675e4445ea4eaf10082bcc896c2c.json
new file mode 100644
index 0000000000000000000000000000000000000000..95ad408cd9039b083908ce171938ae49bf93d1f6
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/30bde63e2e7047ba9e26cad778e8a8337b88675e4445ea4eaf10082bcc896c2c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInputchaine.replace(/[^0-9\\s]/g, '');\n    ;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","formattedInputchaine","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        \n        setCardNumberBrut(digitsOnly);\n        return formattedInputchaine.replace(/[^0-9\\s]/g, '');;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3140a2d871524e20a514432ffb579a4923f9c4c5a2ae7fdd4d14a48d677f5b11.json b/.expo/web/cache/development/babel-loader/3140a2d871524e20a514432ffb579a4923f9c4c5a2ae7fdd4d14a48d677f5b11.json
new file mode 100644
index 0000000000000000000000000000000000000000..437c087ef888e7833e22f8e925a7a8737730afcd
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3140a2d871524e20a514432ffb579a4923f9c4c5a2ae7fdd4d14a48d677f5b11.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {\n    borderColor: 'black',\n    borderWidth: 3\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","padding","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n        borderColor: 'black',\n        borderWidth: 3\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/31aa5c6003dd472049c1b4c8ab4594990d5c9a3d0c306960253c3c5e5a4a87ea.json b/.expo/web/cache/development/babel-loader/31aa5c6003dd472049c1b4c8ab4594990d5c9a3d0c306960253c3c5e5a4a87ea.json
new file mode 100644
index 0000000000000000000000000000000000000000..06ad3af5dcf1c4a4e93facbb63e9fbf3592051d2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/31aa5c6003dd472049c1b4c8ab4594990d5c9a3d0c306960253c3c5e5a4a87ea.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n        <Image style={styles.chip} source={require('../assets/chip.png')} />\n                    <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/31f4c124363668c690327dc3bac6e30319921210ad938093c55000be23600cfe.json b/.expo/web/cache/development/babel-loader/31f4c124363668c690327dc3bac6e30319921210ad938093c55000be23600cfe.json
new file mode 100644
index 0000000000000000000000000000000000000000..618716d3170b792c00770321e25d56056a62a15a
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/31f4c124363668c690327dc3bac6e30319921210ad938093c55000be23600cfe.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/330bfb72de89ea6086bac8fd276bc5c27b6efd07c924d21734b8a9ec7ac7c04a.json b/.expo/web/cache/development/babel-loader/330bfb72de89ea6086bac8fd276bc5c27b6efd07c924d21734b8a9ec7ac7c04a.json
new file mode 100644
index 0000000000000000000000000000000000000000..80e7e4c00da0f9370d8fe7881f3da191900ee2d1
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/330bfb72de89ea6086bac8fd276bc5c27b6efd07c924d21734b8a9ec7ac7c04a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 50,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 50,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3521358e520f12424f01be58411052cd771f2f710a52239d478373a55de21039.json b/.expo/web/cache/development/babel-loader/3521358e520f12424f01be58411052cd771f2f710a52239d478373a55de21039.json
new file mode 100644
index 0000000000000000000000000000000000000000..7811eead30d1ad5fb3ae83b4d9bcbcaf219999b9
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3521358e520f12424f01be58411052cd771f2f710a52239d478373a55de21039.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 0\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","bottom","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 0\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/35300cbdc12bd61ba5751cca470e1ccd538fcce722ed49aa16c9cdb70eb4c092.json b/.expo/web/cache/development/babel-loader/35300cbdc12bd61ba5751cca470e1ccd538fcce722ed49aa16c9cdb70eb4c092.json
new file mode 100644
index 0000000000000000000000000000000000000000..393feef19f3e2b7793f9976e65d88781ed4216cd
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/35300cbdc12bd61ba5751cca470e1ccd538fcce722ed49aa16c9cdb70eb4c092.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3a2333bfaaafe136927ad38123077796b3896c75789d03ec8d440949a358bca3.json b/.expo/web/cache/development/babel-loader/3a2333bfaaafe136927ad38123077796b3896c75789d03ec8d440949a358bca3.json
new file mode 100644
index 0000000000000000000000000000000000000000..4f10f28cd7f7f407f45151c0a134ec4e54990a88
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3a2333bfaaafe136927ad38123077796b3896c75789d03ec8d440949a358bca3.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transform: [{\n      translateY: \"-50%\"\n    }]\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transform","translateY"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transform: [{translateY: \"-50%\"}]\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3bcca63d6c9dcedd6fed100b543db2a12feb005af05f1285132081372886260e.json b/.expo/web/cache/development/babel-loader/3bcca63d6c9dcedd6fed100b543db2a12feb005af05f1285132081372886260e.json
new file mode 100644
index 0000000000000000000000000000000000000000..ae2760d13352926c8f0ea45ea5e4607953b7c763
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3bcca63d6c9dcedd6fed100b543db2a12feb005af05f1285132081372886260e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3beefa9109b8ad6063f1b39a437a9c6ea2c0603996d365dce94bbacd2af19cfe.json b/.expo/web/cache/development/babel-loader/3beefa9109b8ad6063f1b39a437a9c6ea2c0603996d365dce94bbacd2af19cfe.json
new file mode 100644
index 0000000000000000000000000000000000000000..72a9b93d8189e2646e1b1307175ba2e4d74465fc
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3beefa9109b8ad6063f1b39a437a9c6ea2c0603996d365dce94bbacd2af19cfe.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","topContainer","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3c3cf5616ab310e4ceaa208aec6795aa9a468777080c4452542da0d413f38dd1.json b/.expo/web/cache/development/babel-loader/3c3cf5616ab310e4ceaa208aec6795aa9a468777080c4452542da0d413f38dd1.json
new file mode 100644
index 0000000000000000000000000000000000000000..6201faa4d6f3e3e9dbc6d9440590c41a1fda28a3
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3c3cf5616ab310e4ceaa208aec6795aa9a468777080c4452542da0d413f38dd1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function Service(_ref) {\n  var cardNumber = _ref.cardNumber;\n  var cardImageSource = require(\"../assets/visa.png\");\n  var getCardImageSource = function getCardImageSource() {\n    var cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n      case '41':\n      case '42':\n      case '43':\n      case '44':\n      case '45':\n        cardImageSource = require(\"../assets/visa.png\");\n        break;\n      case '51':\n      case '52':\n      case '53':\n      case '54':\n      case '55':\n        cardImageSource = require(\"../assets/mastercard.png\");\n        break;\n      case '34':\n      case '37':\n        cardImageSource = require(\"../assets/amex.png\");\n        break;\n      case '62':\n        cardImageSource = require(\"../assets/unionpay.png\");\n        break;\n      case '65':\n        cardImageSource = require(\"../assets/discover.png\");\n        break;\n      case '35':\n        cardImageSource = require(\"../assets/jcb.png\");\n        break;\n      case '30':\n      case '36':\n        cardImageSource = require(\"../assets/dinersclub.png\");\n        break;\n      case '97':\n        cardImageSource = require(\"../assets/troy.png\");\n        break;\n    }\n    return cardImageSource;\n  };\n  return _jsx(Image, {\n    source: getCardImageSource(),\n    style: styles.main\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 65,\n    height: null,\n    resizeMode: 'contain'\n  }\n});","map":{"version":3,"names":["React","StyleSheet","Image","jsx","_jsx","Service","_ref","cardNumber","cardImageSource","require","getCardImageSource","cardPrefix","toString","substring","source","style","styles","main","create","flex","width","height","resizeMode"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Service.js"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Image } from 'react-native';\n\nexport default function Service({ cardNumber }) {\n  let cardImageSource = require('../assets/visa.png');\n\n  const getCardImageSource = () => {\n    const cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n        case '41': // Visa commence par 41\n        case '42':\n        case '43':\n        case '44':\n        case '45':\n            cardImageSource = require('../assets/visa.png');\n            break;\n        case '51': // MasterCard commence par 51\n        case '52':\n        case '53':\n        case '54':\n        case '55':\n            cardImageSource = require('../assets/mastercard.png');\n            break;\n        case '34': // American Express commence par 34 ou 37\n        case '37':\n            cardImageSource = require('../assets/amex.png');\n            break;\n        case '62': // UnionPay commence par 62\n            cardImageSource = require('../assets/unionpay.png');\n            break;\n        case '65': // Discover commence par 65\n            cardImageSource = require('../assets/discover.png');\n            break;\n        case '35': // JCB commence par 35\n            cardImageSource = require('../assets/jcb.png');\n            break;\n        case '30': // Diners Club commence par 30 ou 36\n        case '36':\n            cardImageSource = require('../assets/dinersclub.png');\n            break;\n        case '97': // Troy commence par 97\n            cardImageSource = require('../assets/troy.png');\n            break;\n    }\n\n    return cardImageSource;\n  };\n\n  return (\n    <Image source={getCardImageSource()} style={styles.main} />\n  );\n}\n\nconst styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 65,\n    height: null,\n    resizeMode: 'contain'\n  },\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1B,eAAe,SAASC,OAAOA,CAAAC,IAAA,EAAiB;EAAA,IAAdC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAC1C,IAAIC,eAAe,GAAGC,OAAO,qBAAqB,CAAC;EAEnD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC/B,IAAMC,UAAU,GAAGJ,UAAU,CAACK,QAAQ,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACxD,QAAQF,UAAU;MACd,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLH,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,oBAAoB,CAAC;QAC9C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;IACR;IAEA,OAAOD,eAAe;EACxB,CAAC;EAED,OACEJ,IAAA,CAACF,KAAK;IAACY,MAAM,EAAEJ,kBAAkB,CAAC,CAAE;IAACK,KAAK,EAAEC,MAAM,CAACC;EAAK,CAAE,CAAC;AAE/D;AAEA,IAAMD,MAAM,GAAGf,UAAU,CAACiB,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,IAAI;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3fc4fd46f8dbeb7389b260947d941a31d3d7a053c9f0663623c468046db39045.json b/.expo/web/cache/development/babel-loader/3fc4fd46f8dbeb7389b260947d941a31d3d7a053c9f0663623c468046db39045.json
new file mode 100644
index 0000000000000000000000000000000000000000..6e332054e0b133512c180d6b57cdf98588f8516e
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3fc4fd46f8dbeb7389b260947d941a31d3d7a053c9f0663623c468046db39045.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/3fd973af72cea78c68ef67fdaa7128b3ac7e621e58fdafb88bcd8792448fa94d.json b/.expo/web/cache/development/babel-loader/3fd973af72cea78c68ef67fdaa7128b3ac7e621e58fdafb88bcd8792448fa94d.json
new file mode 100644
index 0000000000000000000000000000000000000000..2e8bec32d696760ac3e587e5658d66f825a226a7
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/3fd973af72cea78c68ef67fdaa7128b3ac7e621e58fdafb88bcd8792448fa94d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/401fdd1288b379913ab588982339e83987ef1c9fe148825068e6c94ea4cf75f4.json b/.expo/web/cache/development/babel-loader/401fdd1288b379913ab588982339e83987ef1c9fe148825068e6c94ea4cf75f4.json
new file mode 100644
index 0000000000000000000000000000000000000000..da5f33586eeca71d4f48d72b825137c1d37ed944
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/401fdd1288b379913ab588982339e83987ef1c9fe148825068e6c94ea4cf75f4.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE;EACZ,CAAC;EACDR,aAAa,EAAE;IACXS,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfL,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE;EACb,CAAC;EACDX,SAAS,EAAE;IACPY,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDZ,IAAI,EAAE;IACFW,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDpB,iBAAiB,EAAE;IACfqB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXH,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDb,QAAQ,EAAE;IACNe,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDjB,aAAa,EAAE;IACXiB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDvB,UAAU,EAAE;IACRyB,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVN,KAAK,EAAE,KAAK;IACZU,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDvB,SAAS,EAAE;IACPmB,KAAK,EAAE;EACX,CAAC;EACD5B,IAAI,EAAE;IACFqB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdE,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDvB,IAAI,EAAE;IACFkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbI,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDpB,gBAAgB,EAAE;IACd6B,QAAQ,EAAE,UAAU;IACpBZ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,GAAG,EAAE,OAAO;IACZW,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/402928a1ed329f7f1d12c3ba46c17aaae6395592366be511ba4885756b6b6ee6.json b/.expo/web/cache/development/babel-loader/402928a1ed329f7f1d12c3ba46c17aaae6395592366be511ba4885756b6b6ee6.json
new file mode 100644
index 0000000000000000000000000000000000000000..4ccf2a2b77b70549296d719f0ac9359ac39526d8
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/402928a1ed329f7f1d12c3ba46c17aaae6395592366be511ba4885756b6b6ee6.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(View, {\n      style: styles.topContainer\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n\n            </View>\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/41481b6a2eeb7c017036eca67bd6d776e02f6cb1b64bf42df60d0720c44aa419.json b/.expo/web/cache/development/babel-loader/41481b6a2eeb7c017036eca67bd6d776e02f6cb1b64bf42df60d0720c44aa419.json
new file mode 100644
index 0000000000000000000000000000000000000000..48737d0150a5b5a39fb9d75a1ac57c2e57751390
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/41481b6a2eeb7c017036eca67bd6d776e02f6cb1b64bf42df60d0720c44aa419.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        \n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEvB,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACM,YAAa;MAAAJ,QAAA,GAC7BtB,IAAA,CAACL,KAAK;QAACY,KAAK,EAAEa,MAAM,CAACO,IAAK;QAACH,MAAM,EAAEC,OAAO,qBAAqB;MAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;QAACa,KAAK,EAAEa,MAAM,CAACQ,gBAAiB;QAAAN,QAAA,EAACtB,IAAA,CAACH,OAAO;UAACgC,UAAU,EAAEzB,KAAK,CAAC0B;QAAe,CAAE;MAAC,CAAM,CAAC;IAAA,CACxF,CAAC,EAEP9B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACS,UAAU,EAAE;QAACE,WAAW,EAAE3B,KAAK,CAAC4B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAV,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAAC0B,cAAc,EAAEV,MAAM,CAACa,SAAS;IAAC,CACzD,CAAC,EACP/B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACc,eAAgB;MAAAZ,QAAA,GAChCpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACe,iBAAiB,EAAE;UAACJ,WAAW,EAAE3B,KAAK,CAACgC,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAd,QAAA,GACpGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACiB,aAAc;UAAAf,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACkB,QAAS;UAAAhB,QAAA,EACxBlB,KAAK,CAACkC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPpC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACmB,aAAa,EAAE;UAACR,WAAW,EAAE3B,KAAK,CAACoC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAlB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACqB,SAAU;UAAAnB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACsB,IAAK;UAAApB,QAAA,GAAElB,KAAK,CAACuC,KAAK,EAAC,KAAG,EAACvC,KAAK,CAACwC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACL,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMxB,MAAM,GAAG3B,UAAU,CAACoD,MAAM,CAAC;EAC7BxB,IAAI,EAAE;IACFyB,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE,MAAM;IACpBC,WAAW,EAAE,CAAC;IACdtB,WAAW,EAAE;EACjB,CAAC;EACDG,eAAe,EAAE;IACba,KAAK,EAAE,KAAK;IACZO,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BV,QAAQ,EAAE,UAAU;IAEpBE,IAAI,EAAE;EACV,CAAC;EACDtB,YAAY,EAAE;IACV4B,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,OAAO,EAAE,EAAE;IACXX,QAAQ,EAAE;EACd,CAAC;EACDP,aAAa,EAAE;IACXc,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE;EACb,CAAC;EACDhB,SAAS,EAAE;IACPkB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDlB,IAAI,EAAE;IACFiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACD1B,iBAAiB,EAAE;IACfmB,OAAO,EAAE,MAAM;IACfG,OAAO,EAAE,CAAC;IACVJ,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE;EAClB,CAAC;EACDpB,QAAQ,EAAE;IACNqB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDvB,aAAa,EAAE;IACXuB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD9B,UAAU,EAAE;IACRgC,UAAU,EAAE,MAAM;IAClBb,IAAI,EAAE,IAAI;IACVY,QAAQ,EAAE,EAAE;IACZP,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE,CAAC;IACVK,SAAS,EAAE,EAAE;IACbf,KAAK,EAAE,KAAK;IACZO,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDtB,SAAS,EAAE;IACP0B,KAAK,EAAE;EACX,CAAC;EACDpC,IAAI,EAAE;IACFwB,KAAK,EAAE,MAAM;IACbE,MAAM,EAAE,MAAM;IACdS,YAAY,EAAE,EAAE;IAChBZ,QAAQ,EAAE;EACd,CAAC;EACDnB,IAAI,EAAE;IACFoB,KAAK,EAAE,EAAE;IACTE,MAAM,EAAE,EAAE;IACVS,YAAY,EAAE;EAClB,CAAC;EACD9B,gBAAgB,EAAE,CAClB;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/41e2295346e0379661263a7c04dc3d991f8caa94c1d1daffe5a08955ad7ad71b.json b/.expo/web/cache/development/babel-loader/41e2295346e0379661263a7c04dc3d991f8caa94c1d1daffe5a08955ad7ad71b.json
new file mode 100644
index 0000000000000000000000000000000000000000..61dbb3a3be0ae62892e9314da20a1611ed5ea114
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/41e2295346e0379661263a7c04dc3d991f8caa94c1d1daffe5a08955ad7ad71b.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/421bbd449897cd352e271da2d089313a1a5923355054e3aba19099fc5f7824a5.json b/.expo/web/cache/development/babel-loader/421bbd449897cd352e271da2d089313a1a5923355054e3aba19099fc5f7824a5.json
new file mode 100644
index 0000000000000000000000000000000000000000..b23298bc1da278d4b40fad434dab79bc7398e6fd
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/421bbd449897cd352e271da2d089313a1a5923355054e3aba19099fc5f7824a5.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    borderColor: \"black\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        borderColor: \"black\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/42b9fad3b43ddcf84e4add50d60e87f782d1aa079e1fbd279fd1bee6c0979931.json b/.expo/web/cache/development/babel-loader/42b9fad3b43ddcf84e4add50d60e87f782d1aa079e1fbd279fd1bee6c0979931.json
new file mode 100644
index 0000000000000000000000000000000000000000..4cef24459943736674be66a6b2285b9d1e2bb519
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/42b9fad3b43ddcf84e4add50d60e87f782d1aa079e1fbd279fd1bee6c0979931.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","left","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/43c5be5c45b2fb71d41fdf05d6a76b2244673b74ab85d72009bf7acce500fdd7.json b/.expo/web/cache/development/babel-loader/43c5be5c45b2fb71d41fdf05d6a76b2244673b74ab85d72009bf7acce500fdd7.json
new file mode 100644
index 0000000000000000000000000000000000000000..3807d37ff7ff681c516cf81a9185bb38832fa2cf
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/43c5be5c45b2fb71d41fdf05d6a76b2244673b74ab85d72009bf7acce500fdd7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    borderColor: \"black\",\n    position: 'relative',\n    top: \"-100%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        borderColor: \"black\",\n        position: 'relative',\n        top: \"-100%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/44e971163be9ceac4a47ec6e5ce09aa66ec42e7942a8b3f21c83d661e7207755.json b/.expo/web/cache/development/babel-loader/44e971163be9ceac4a47ec6e5ce09aa66ec42e7942a8b3f21c83d661e7207755.json
new file mode 100644
index 0000000000000000000000000000000000000000..5a29b1a82a7d53039db0b638a9841338f4df1b98
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/44e971163be9ceac4a47ec6e5ce09aa66ec42e7942a8b3f21c83d661e7207755.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/450d8616ef2a14193247e27e805cd3cd73934dabcc2f1dfa61f69f7e7c396a36.json b/.expo/web/cache/development/babel-loader/450d8616ef2a14193247e27e805cd3cd73934dabcc2f1dfa61f69f7e7c396a36.json
new file mode 100644
index 0000000000000000000000000000000000000000..5f9b5dbbffb37eaf3a438f94ae86d2a1b675f8ab
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/450d8616ef2a14193247e27e805cd3cd73934dabcc2f1dfa61f69f7e7c396a36.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    if (amex) {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        if(amex) {\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/468ba1e8128746519d319b3672636861e6c5c9b3d09e236522e9f1b6b7f6f71c.json b/.expo/web/cache/development/babel-loader/468ba1e8128746519d319b3672636861e6c5c9b3d09e236522e9f1b6b7f6f71c.json
new file mode 100644
index 0000000000000000000000000000000000000000..6d68b79dd9cfb9b6545fd0472ef2fadd3af188a4
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/468ba1e8128746519d319b3672636861e6c5c9b3d09e236522e9f1b6b7f6f71c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/47b9e5d25fffb0a6723554b06be352214cdbd1aebab8c89653befc2b28067bbb.json b/.expo/web/cache/development/babel-loader/47b9e5d25fffb0a6723554b06be352214cdbd1aebab8c89653befc2b28067bbb.json
new file mode 100644
index 0000000000000000000000000000000000000000..16b7fe43f64562b4707a44d1d4cc248df91d1cde
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/47b9e5d25fffb0a6723554b06be352214cdbd1aebab8c89653befc2b28067bbb.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/485c61bed8ea746c6776cf05d72b79c71bc03cd252a92d02231bf0746bdd8bab.json b/.expo/web/cache/development/babel-loader/485c61bed8ea746c6776cf05d72b79c71bc03cd252a92d02231bf0746bdd8bab.json
new file mode 100644
index 0000000000000000000000000000000000000000..a692e8ad09cb068604372a76bc8c6e8f5f12f593
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/485c61bed8ea746c6776cf05d72b79c71bc03cd252a92d02231bf0746bdd8bab.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/487681789d6508e708f7e90ba5bf681afb3f6624b62f1a32152580da47590326.json b/.expo/web/cache/development/babel-loader/487681789d6508e708f7e90ba5bf681afb3f6624b62f1a32152580da47590326.json
new file mode 100644
index 0000000000000000000000000000000000000000..abe1f482a81b202abb28161eefdae73546ca8ac2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/487681789d6508e708f7e90ba5bf681afb3f6624b62f1a32152580da47590326.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/48c7fea0ec20fa1cada7b185819d1caa0b04b6de0950ec6d619a73abeb698091.json b/.expo/web/cache/development/babel-loader/48c7fea0ec20fa1cada7b185819d1caa0b04b6de0950ec6d619a73abeb698091.json
new file mode 100644
index 0000000000000000000000000000000000000000..3cc57f0110ed51242216e79e3a1222cf204acde1
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/48c7fea0ec20fa1cada7b185819d1caa0b04b6de0950ec6d619a73abeb698091.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4c2116f268dc838082e8bb83b935199109a91020d3ec5aabf741473fddaa57ab.json b/.expo/web/cache/development/babel-loader/4c2116f268dc838082e8bb83b935199109a91020d3ec5aabf741473fddaa57ab.json
new file mode 100644
index 0000000000000000000000000000000000000000..67ea7cd719136b08ef06ee094dd02910a0ae5d75
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4c2116f268dc838082e8bb83b935199109a91020d3ec5aabf741473fddaa57ab.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4c7c333cba5ffc3b6567fea163dc3767024a4a8ac0656488f5b3c6e22be16d85.json b/.expo/web/cache/development/babel-loader/4c7c333cba5ffc3b6567fea163dc3767024a4a8ac0656488f5b3c6e22be16d85.json
new file mode 100644
index 0000000000000000000000000000000000000000..fe22a83425ee4fa00bc5924f726504dfdee03469
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4c7c333cba5ffc3b6567fea163dc3767024a4a8ac0656488f5b3c6e22be16d85.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4cb27cdef87ba2c3c0bcc89898421b69c25529f72291ce9ddd977ce203584d0e.json b/.expo/web/cache/development/babel-loader/4cb27cdef87ba2c3c0bcc89898421b69c25529f72291ce9ddd977ce203584d0e.json
new file mode 100644
index 0000000000000000000000000000000000000000..45cb01b49eae6904a78090814452a0bed0429d8b
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4cb27cdef87ba2c3c0bcc89898421b69c25529f72291ce9ddd977ce203584d0e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","marginTop","left","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4ce0fbc9a9c93651a818256684ed353971b766f301cac1745a385eec7002a6d5.json b/.expo/web/cache/development/babel-loader/4ce0fbc9a9c93651a818256684ed353971b766f301cac1745a385eec7002a6d5.json
new file mode 100644
index 0000000000000000000000000000000000000000..ee767880ef865902b55c5575f5c68a2ea4d0a61f
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4ce0fbc9a9c93651a818256684ed353971b766f301cac1745a385eec7002a6d5.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transform: []\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transform"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transform: []\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4d67ea83145e1c7bbd46f95019ad26461efd4283a0c75f82175e01a353a8e54d.json b/.expo/web/cache/development/babel-loader/4d67ea83145e1c7bbd46f95019ad26461efd4283a0c75f82175e01a353a8e54d.json
new file mode 100644
index 0000000000000000000000000000000000000000..c1fe671cba89f5ff961e0a78e7209c63b07883b7
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4d67ea83145e1c7bbd46f95019ad26461efd4283a0c75f82175e01a353a8e54d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/4d93706a03aa93678ca27b6a56b5fea5aea48285b4b4f713cdf7346ae00f403f.json b/.expo/web/cache/development/babel-loader/4d93706a03aa93678ca27b6a56b5fea5aea48285b4b4f713cdf7346ae00f403f.json
new file mode 100644
index 0000000000000000000000000000000000000000..5ad816b5a33f89cc412fd3348eb6ea55dbb16540
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/4d93706a03aa93678ca27b6a56b5fea5aea48285b4b4f713cdf7346ae00f403f.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transform: \"translate\"\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transform"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transform: \"translate\"\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/521e5a7d8b9d9a9cbe6b0bbdec3d85feed253bd272a24c62af24fc103efb1303.json b/.expo/web/cache/development/babel-loader/521e5a7d8b9d9a9cbe6b0bbdec3d85feed253bd272a24c62af24fc103efb1303.json
new file mode 100644
index 0000000000000000000000000000000000000000..e18c7dfb345cf68b073e62e8129560e63c9d8341
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/521e5a7d8b9d9a9cbe6b0bbdec3d85feed253bd272a24c62af24fc103efb1303.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,YAAY,EAAE;EAClB,CAAC;EACDT,aAAa,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFwB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDzB,IAAI,EAAE;IACFqB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdoB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbG,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/54e364342c4587593071fcc23fa253f403a054c2bbc104434d8083fae4cd39c1.json b/.expo/web/cache/development/babel-loader/54e364342c4587593071fcc23fa253f403a054c2bbc104434d8083fae4cd39c1.json
new file mode 100644
index 0000000000000000000000000000000000000000..58df3891646233894a2ad50ea1ae63c2bd2be567
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/54e364342c4587593071fcc23fa253f403a054c2bbc104434d8083fae4cd39c1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\"\n        \n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5666eff11e39995abfe47f92d8e05ccccbf7a9161081d621b45c36061023394a.json b/.expo/web/cache/development/babel-loader/5666eff11e39995abfe47f92d8e05ccccbf7a9161081d621b45c36061023394a.json
new file mode 100644
index 0000000000000000000000000000000000000000..19bb8ca04136c8c5a75b09b4663afa316d6a5719
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5666eff11e39995abfe47f92d8e05ccccbf7a9161081d621b45c36061023394a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5afa6bb92d5bf09f2ba609466fd5e38b45ec5ca286f22f834c8cc02c16dba446.json b/.expo/web/cache/development/babel-loader/5afa6bb92d5bf09f2ba609466fd5e38b45ec5ca286f22f834c8cc02c16dba446.json
new file mode 100644
index 0000000000000000000000000000000000000000..08949992d56483ed8fc8d186e7feba22ca24c588
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5afa6bb92d5bf09f2ba609466fd5e38b45ec5ca286f22f834c8cc02c16dba446.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5cfb86079f10960cf250804ab1f40bd9cb59e026f7bfd87fe2064700a6df2b83.json b/.expo/web/cache/development/babel-loader/5cfb86079f10960cf250804ab1f40bd9cb59e026f7bfd87fe2064700a6df2b83.json
new file mode 100644
index 0000000000000000000000000000000000000000..6ddbc370225d3c00b823279853425c0b907b85ee
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5cfb86079f10960cf250804ab1f40bd9cb59e026f7bfd87fe2064700a6df2b83.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring();\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring()\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5d0480d26a3454ea95612a2e105a1d9002957938a6e8dd9e1b15c4446d35f154.json b/.expo/web/cache/development/babel-loader/5d0480d26a3454ea95612a2e105a1d9002957938a6e8dd9e1b15c4446d35f154.json
new file mode 100644
index 0000000000000000000000000000000000000000..23c3779aded39f0915a76c69cc1dd719f5f2a828
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5d0480d26a3454ea95612a2e105a1d9002957938a6e8dd9e1b15c4446d35f154.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5d8519f465686017e19ba4c3e0ed38247c7e781c0b4809192ce5bc7310489820.json b/.expo/web/cache/development/babel-loader/5d8519f465686017e19ba4c3e0ed38247c7e781c0b4809192ce5bc7310489820.json
new file mode 100644
index 0000000000000000000000000000000000000000..43b47dd6346c4cbc20d55cb82817d5ef4ff83ce1
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5d8519f465686017e19ba4c3e0ed38247c7e781c0b4809192ce5bc7310489820.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/5e30c9948d83c60c6d0c5c8b1503f3bdece462eb750fd420c22c8a4f9f523b00.json b/.expo/web/cache/development/babel-loader/5e30c9948d83c60c6d0c5c8b1503f3bdece462eb750fd420c22c8a4f9f523b00.json
new file mode 100644
index 0000000000000000000000000000000000000000..1fee4ef07da2e44315c50744216fa98e7c3f9f02
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/5e30c9948d83c60c6d0c5c8b1503f3bdece462eb750fd420c22c8a4f9f523b00.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput;\n    if (amex) {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput;\n        if(amex) {\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/60475114c23dbd09a47a38469ead5c363fcfddc33eca93353abcb15eb968a196.json b/.expo/web/cache/development/babel-loader/60475114c23dbd09a47a38469ead5c363fcfddc33eca93353abcb15eb968a196.json
new file mode 100644
index 0000000000000000000000000000000000000000..7b609789af397a7314b45ac3218a14089427c45d
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/60475114c23dbd09a47a38469ead5c363fcfddc33eca93353abcb15eb968a196.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/65ef56c93383eebea4814f96d57f3e20c7b4102819d591536aff91c6e2029b06.json b/.expo/web/cache/development/babel-loader/65ef56c93383eebea4814f96d57f3e20c7b4102819d591536aff91c6e2029b06.json
new file mode 100644
index 0000000000000000000000000000000000000000..aaeb94636f5b9aade6ffb60b75fe4c9293173c50
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/65ef56c93383eebea4814f96d57f3e20c7b4102819d591536aff91c6e2029b06.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    display: 'flex'\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        display: 'flex',\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/681db69764dd84c43b04c1dff9a62d1661fbb6a341b61a27ad9ffd4138ab6199.json b/.expo/web/cache/development/babel-loader/681db69764dd84c43b04c1dff9a62d1661fbb6a341b61a27ad9ffd4138ab6199.json
new file mode 100644
index 0000000000000000000000000000000000000000..c2ee9cf72cf303f0e4d16f606775cdcf46c3350d
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/681db69764dd84c43b04c1dff9a62d1661fbb6a341b61a27ad9ffd4138ab6199.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: \"translateY(-)\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: \"translateY(-)\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/6922964f2d2182e261479c93ab6a67076911b96a093ba88ac5060cdacbdd6e4f.json b/.expo/web/cache/development/babel-loader/6922964f2d2182e261479c93ab6a67076911b96a093ba88ac5060cdacbdd6e4f.json
new file mode 100644
index 0000000000000000000000000000000000000000..a9140cbc39f57008fc2e6e44b771b0746f4bce47
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/6922964f2d2182e261479c93ab6a67076911b96a093ba88ac5060cdacbdd6e4f.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: \"translateY('-50%')\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: \"translateY('-50%')\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE;EACf,CAAC;EACDT,aAAa,EAAE;IACXU,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfL,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE;EACb,CAAC;EACDX,SAAS,EAAE;IACPY,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDZ,IAAI,EAAE;IACFW,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDpB,iBAAiB,EAAE;IACfqB,OAAO,EAAE,MAAM;IACfP,IAAI,EAAE,KAAK;IACXH,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDb,QAAQ,EAAE;IACNe,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDjB,aAAa,EAAE;IACXiB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDvB,UAAU,EAAE;IACRyB,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVN,KAAK,EAAE,KAAK;IACZU,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDvB,SAAS,EAAE;IACPmB,KAAK,EAAE;EACX,CAAC;EACD5B,IAAI,EAAE;IACFqB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdE,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBO,QAAQ,EAAE;EACd,CAAC;EACD9B,IAAI,EAAE;IACFkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbI,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACDpB,gBAAgB,EAAE;IACdiB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbY,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/6b89e0141a8db1b7104cb222175088e0bb3ae7fbc47b09a4b8f19b9ba4cdfc2e.json b/.expo/web/cache/development/babel-loader/6b89e0141a8db1b7104cb222175088e0bb3ae7fbc47b09a4b8f19b9ba4cdfc2e.json
new file mode 100644
index 0000000000000000000000000000000000000000..208d0b543f9e025bdf47acb9a89ebb57d77d919f
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/6b89e0141a8db1b7104cb222175088e0bb3ae7fbc47b09a4b8f19b9ba4cdfc2e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex'\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","left","borderRadius","padding","color","fontSize","fontWeight","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/729873c1df5d8b7374a6180c13cb559ac46805b0d52c00e4757d7591d7ae7d1a.json b/.expo/web/cache/development/babel-loader/729873c1df5d8b7374a6180c13cb559ac46805b0d52c00e4757d7591d7ae7d1a.json
new file mode 100644
index 0000000000000000000000000000000000000000..cecace096ce84162ce547465556515f989f42d98
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/729873c1df5d8b7374a6180c13cb559ac46805b0d52c00e4757d7591d7ae7d1a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"4%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"4%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/782adae5596b1d5a7efa07ee2f0309c86b08e225cfa13ab53d2b3a22d8002c32.json b/.expo/web/cache/development/babel-loader/782adae5596b1d5a7efa07ee2f0309c86b08e225cfa13ab53d2b3a22d8002c32.json
new file mode 100644
index 0000000000000000000000000000000000000000..1687b4a3b0a48608bca116e011d98eb5bd09b2a6
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/782adae5596b1d5a7efa07ee2f0309c86b08e225cfa13ab53d2b3a22d8002c32.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/79298da191559f4ada2b27a3d777cf447d1c7069020b802383d29a24c1ad9d99.json b/.expo/web/cache/development/babel-loader/79298da191559f4ada2b27a3d777cf447d1c7069020b802383d29a24c1ad9d99.json
new file mode 100644
index 0000000000000000000000000000000000000000..aa0e083e31428af2dea8ced382142aaa2e5f8cf5
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/79298da191559f4ada2b27a3d777cf447d1c7069020b802383d29a24c1ad9d99.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/7c47313198dbc9ab0b38ec632c80acd8673ebd888960e9957d3022ad44d7073a.json b/.expo/web/cache/development/babel-loader/7c47313198dbc9ab0b38ec632c80acd8673ebd888960e9957d3022ad44d7073a.json
new file mode 100644
index 0000000000000000000000000000000000000000..ee43b5c0313a83eeb131c12175262ee28ab22966
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/7c47313198dbc9ab0b38ec632c80acd8673ebd888960e9957d3022ad44d7073a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/7da8a52138d81552545013b435e4dad8a0159056f924b73fc757c49c66c84415.json b/.expo/web/cache/development/babel-loader/7da8a52138d81552545013b435e4dad8a0159056f924b73fc757c49c66c84415.json
new file mode 100644
index 0000000000000000000000000000000000000000..65627de6639432145e49b652f1465133ed63b6d9
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/7da8a52138d81552545013b435e4dad8a0159056f924b73fc757c49c66c84415.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/81914695462f6f97536c778c57a77942ffe0f52ae8acccb68a0573caabb44593.json b/.expo/web/cache/development/babel-loader/81914695462f6f97536c778c57a77942ffe0f52ae8acccb68a0573caabb44593.json
new file mode 100644
index 0000000000000000000000000000000000000000..2eb9c250e8e09e74c0f343c485faf5df2abfaee2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/81914695462f6f97536c778c57a77942ffe0f52ae8acccb68a0573caabb44593.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/86d41e4e0983bb7e9dbc5e88e4289ed35975914101df7dfe5722c6f32827e7cd.json b/.expo/web/cache/development/babel-loader/86d41e4e0983bb7e9dbc5e88e4289ed35975914101df7dfe5722c6f32827e7cd.json
new file mode 100644
index 0000000000000000000000000000000000000000..2ab5a3ca1caf2ccf340860feffe2e1c587f0ba92
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/86d41e4e0983bb7e9dbc5e88e4289ed35975914101df7dfe5722c6f32827e7cd.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/879e0b1bdf787bae7c384c65cbd770f825497412d84a4af09ef1b33d64e03aba.json b/.expo/web/cache/development/babel-loader/879e0b1bdf787bae7c384c65cbd770f825497412d84a4af09ef1b33d64e03aba.json
new file mode 100644
index 0000000000000000000000000000000000000000..1392ddeb2eb917b8a8818565892c4eb1c6e17bf2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/879e0b1bdf787bae7c384c65cbd770f825497412d84a4af09ef1b33d64e03aba.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.replace(/[^0-9\\s]/g, '');\n    ;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.replace(/[^0-9\\s]/g, '');;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,gBAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,aAAa;AACpB,OAAOC,IAAI;AACX,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AAAmB,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAElC,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAChC,IAAAC,SAAA,GAA4ChB,QAAQ,CAAC,EAAE,CAAC;IAAAiB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAjDG,cAAc,GAAAF,UAAA;IAAEG,iBAAiB,GAAAH,UAAA;EACxC,IAAAI,UAAA,GAAkDrB,QAAQ,CAAC,KAAK,CAAC;IAAAsB,UAAA,GAAAJ,cAAA,CAAAG,UAAA;IAA1DE,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAC9C,IAAAG,UAAA,GAAgCzB,QAAQ,CAAC,EAAE,CAAC;IAAA0B,UAAA,GAAAR,cAAA,CAAAO,UAAA;IAArCE,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,UAAA,GAA8C7B,QAAQ,CAAC,KAAK,CAAC;IAAA8B,UAAA,GAAAZ,cAAA,CAAAW,UAAA;IAAtDE,eAAe,GAAAD,UAAA;IAAEE,kBAAkB,GAAAF,UAAA;EAC1C,IAAAG,UAAA,GAA0BjC,QAAQ,CAAC,IAAI,CAAC;IAAAkC,WAAA,GAAAhB,cAAA,CAAAe,UAAA;IAAjCE,KAAK,GAAAD,WAAA;IAAEE,QAAQ,GAAAF,WAAA;EACtB,IAAAG,WAAA,GAAwBrC,QAAQ,CAAC,IAAI,CAAC;IAAAsC,WAAA,GAAApB,cAAA,CAAAmB,WAAA;IAA/BE,IAAI,GAAAD,WAAA;IAAEE,OAAO,GAAAF,WAAA;EACpB,IAAAG,WAAA,GAAsCzC,QAAQ,CAAC,KAAK,CAAC;IAAA0C,WAAA,GAAAxB,cAAA,CAAAuB,WAAA;IAA9CE,WAAW,GAAAD,WAAA;IAAEE,cAAc,GAAAF,WAAA;EAClC,IAAAG,WAAA,GAAsB7C,QAAQ,CAAC,EAAE,CAAC;IAAA8C,WAAA,GAAA5B,cAAA,CAAA2B,WAAA;IAA3BE,GAAG,GAAAD,WAAA;IAAEE,MAAM,GAAAF,WAAA;EAClB,IAAAG,WAAA,GAAoCjD,QAAQ,CAAC,KAAK,CAAC;IAAAkD,WAAA,GAAAhC,cAAA,CAAA+B,WAAA;IAA5CE,UAAU,GAAAD,WAAA;IAAEE,aAAa,GAAAF,WAAA;EAEhC,IAAMG,6BAA6B,GAAG,SAAhCA,6BAA6BA,CAAIC,GAAG,EAAK;IAC3C,IAAIC,UAAU,GAAGD,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IACvC,IAAIC,UAAU,GAAGF,UAAU;IAC3B,IAAIG,IAAI,GAAGH,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAIJ,UAAU,CAACI,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI;IACjF,IAAIC,cAAc,GAAGH,UAAU,GAAG,oCAAoC;IACtEG,cAAc,GAAGA,cAAc,CAACD,SAAS,CAAC,CAAC,EAAED,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5D,IAAGA,IAAI,EAAE;MACLE,cAAc,GAAGA,cAAc,CAACJ,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IAChG,CAAC,MAAI;MACDI,cAAc,GAAGA,cAAc,CAACJ,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC1G;IACApC,iBAAiB,CAACmC,UAAU,CAAC;IAC7B,OAAOK,cAAc,CAACJ,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;IAAC;EACnD,CAAC;EAED,IAAMK,eAAe,GAAG,SAAlBA,eAAeA,CAAIP,GAAG,EAAK;IAC7B,IAAIQ,IAAI,GAAGR,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/BG,IAAI,GAAGA,IAAI,CAACN,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;IACrC5B,WAAW,CAACkC,IAAI,CAAC;IACjB,OAAOA,IAAI;EACf,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIT,GAAG,EAAK;IACxBA,GAAG,GAAGA,GAAG,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;IAC5BR,MAAM,CAACM,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;IAC1B,OAAOL,GAAG,CAACK,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC;EAC7B,CAAC;EAED,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAIV,GAAG,EAAK;IACzBlB,QAAQ,CAACkB,GAAG,CAAC;IACbV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,IAAMa,UAAU,GAAG,SAAbA,UAAUA,CAAIX,GAAG,EAAK;IACxBd,OAAO,CAACc,GAAG,CAAC;IACZV,cAAc,CAAC,IAAI,CAAC;IACpBpB,oBAAoB,CAAC,KAAK,CAAC;IAC3BQ,kBAAkB,CAAC,KAAK,CAAC;IACzBoB,aAAa,CAAC,KAAK,CAAC;EACxB,CAAC;EAED,OACIvC,KAAA,CAACX,IAAI;IAACgE,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,GACpBlB,UAAU,GACXxC,IAAA,CAACF,QAAQ;MAAC6D,UAAU,EAAEnD,cAAe;MAAC4B,GAAG,EAAEA;IAAI,CAAC,CAAC,GAEjDpC,IAAA,CAACJ,IAAI;MAAC2D,KAAK,EAAEC,MAAM,CAACI,IAAK;MAACpD,cAAc,EAAEA,cAAe;MAACwB,WAAW,EAAEA,WAAY;MAACR,KAAK,EAAEA,KAAM;MAACI,IAAI,EAAEA,IAAK;MAAChB,iBAAiB,EAAEA,iBAAkB;MAACQ,eAAe,EAAEA,eAAgB;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAC,EAE5MhB,IAAA,CAACL,aAAa;MAACkE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAAClD,oBAAoB,CAAC,IAAI,CAAC;QAAEoB,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC+B,MAAM,EAAE,SAAAA,OAAA,EAAM;QAACnD,oBAAoB,CAAC,KAAK,CAAC;MAAA,CAAE;MAACoD,WAAW,EAAEvB,6BAA8B;MAACwB,IAAI,EAAC,aAAa;MAACC,WAAW,EAAC;IAAqB,CAAC,CAAC,EAC9PnE,IAAA,CAACL,aAAa;MAACkE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAAC1C,kBAAkB,CAAC,IAAI,CAAC;QAAEY,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC+B,MAAM,EAAE,SAAAA,OAAA,EAAM;QAAC3C,kBAAkB,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC4C,WAAW,EAAEf,eAAgB;MAACgB,IAAI,EAAC,WAAW;MAACC,WAAW,EAAC;IAAgB,CAAC,CAAC,EACrOjE,KAAA,CAACX,IAAI;MAACgE,KAAK,EAAEC,MAAM,CAACY,UAAW;MAAAV,QAAA,GAC3B1D,IAAA,CAACH,UAAU;QAACwD,WAAW,EAAEA,WAAY;QAACC,UAAU,EAAEA;MAAW,CAAC,CAAC,EAC/DtD,IAAA,CAACL,aAAa;QAACkE,KAAK,EAAC,KAAK;QAACC,UAAU,EAAC,IAAI;QAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;UAACtB,aAAa,CAAC,IAAI,CAAC,EAAER,cAAc,CAAC,KAAK,CAAC;QAAA,CAAE;QAAC+B,MAAM,EAAE,SAAAA,OAAA,EAAM;UAACvB,aAAa,CAAC,KAAK,CAAC;QAAA,CAAE;QAACwB,WAAW,EAAEb,UAAW;QAACc,IAAI,EAAC,KAAK;QAACC,WAAW,EAAC;MAAK,CAAC,CAAC;IAAA,CACnM,CAAC,EACPnE,IAAA,CAACP,gBAAgB;MAAC8D,KAAK,EAAEC,MAAM,CAACa,YAAa;MAAAX,QAAA,EACzC1D,IAAA,CAACN,IAAI;QAAC6D,KAAK,EAAEC,MAAM,CAACc,gBAAiB;QAAAZ,QAAA,EAAC;MAAM,CAAM;IAAC,CACrC,CAAC;EAAA,CACjB,CAAC;AAEf;AAEA,IAAMF,MAAM,GAAGlE,UAAU,CAACiF,MAAM,CAAC;EAC7Bd,IAAI,EAAE;IACFI,KAAK,EAAE,KAAK;IACZW,MAAM,EAAE,KAAK;IACbC,eAAe,EAAE,OAAO;IACxBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAACf,KAAK,EAAE,CAAC;MAAEW,MAAM,EAAE;IAAC,CAAC;IACnCK,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE;EAClB,CAAC;EACDV,UAAU,EAAE;IACRW,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBnB,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDO,YAAY,EAAE;IACVY,OAAO,EAAE,EAAE;IACXR,eAAe,EAAE,SAAS;IAC1BC,YAAY,EAAE,CAAC;IACfb,KAAK,EAAE,KAAK;IACZC,UAAU,EAAE;EAChB,CAAC;EACDQ,gBAAgB,EAAE;IACdY,KAAK,EAAE,OAAO;IACdC,SAAS,EAAE;EACf,CAAC;EACDvB,IAAI,EAAE,CAEN;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/8ae431d5f98d98b90a0d1762244ea0a3cb8961c82de8b3abf559462a05d3aada.json b/.expo/web/cache/development/babel-loader/8ae431d5f98d98b90a0d1762244ea0a3cb8961c82de8b3abf559462a05d3aada.json
new file mode 100644
index 0000000000000000000000000000000000000000..1910c09fff43406bf69f82f254b0932c65fa65de
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/8ae431d5f98d98b90a0d1762244ea0a3cb8961c82de8b3abf559462a05d3aada.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    bordr: bordr\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","bordr"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        bordr\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/8d75f1259f7e7147d87e826bb8b4800c018939290e943ebb0fd7a265beeefb0a.json b/.expo/web/cache/development/babel-loader/8d75f1259f7e7147d87e826bb8b4800c018939290e943ebb0fd7a265beeefb0a.json
new file mode 100644
index 0000000000000000000000000000000000000000..b9156a1c187acf0333c24bd30f6cc4ee3cf834ff
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/8d75f1259f7e7147d87e826bb8b4800c018939290e943ebb0fd7a265beeefb0a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 50,\n    aspectRatio: 1,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","aspectRatio","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 50,\n        aspectRatio: 1,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/905562940627aace0e8559d1fb0f5c9b3efb9c4ea91a68067e5a9169ea89ff01.json b/.expo/web/cache/development/babel-loader/905562940627aace0e8559d1fb0f5c9b3efb9c4ea91a68067e5a9169ea89ff01.json
new file mode 100644
index 0000000000000000000000000000000000000000..b159799c0d048442294368706666ebc568537fd7
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/905562940627aace0e8559d1fb0f5c9b3efb9c4ea91a68067e5a9169ea89ff01.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    borderColor: \"black\",\n    position: 'relative',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        borderColor: \"black\",\n        position: 'relative',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,YAAY,EAAE;EAClB,CAAC;EACDT,aAAa,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBzB,WAAW,EAAE,OAAO;IACpBiB,QAAQ,EAAE,UAAU;IACpBE,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFwB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDzB,IAAI,EAAE;IACFqB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdoB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbG,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/909f96ae94ca701b1f7b6d24f37475cedf22fd7d1198c98dfc23a634362c8df5.json b/.expo/web/cache/development/babel-loader/909f96ae94ca701b1f7b6d24f37475cedf22fd7d1198c98dfc23a634362c8df5.json
new file mode 100644
index 0000000000000000000000000000000000000000..45b791e91f569379dac74ef85bfeb401ce52e974
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/909f96ae94ca701b1f7b6d24f37475cedf22fd7d1198c98dfc23a634362c8df5.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/92ba15394c56e94ddaf2929bfa2865972167d9a119e25d0f27a6095778c10c7e.json b/.expo/web/cache/development/babel-loader/92ba15394c56e94ddaf2929bfa2865972167d9a119e25d0f27a6095778c10c7e.json
new file mode 100644
index 0000000000000000000000000000000000000000..a3d54ff19be19ce6380a637e2fe1af926fd7b580
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/92ba15394c56e94ddaf2929bfa2865972167d9a119e25d0f27a6095778c10c7e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","marginTop","left","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/94aec443450d3763d8fab1a3aa9633ca0e7e72f061dfa4c28a7396cd261f20b7.json b/.expo/web/cache/development/babel-loader/94aec443450d3763d8fab1a3aa9633ca0e7e72f061dfa4c28a7396cd261f20b7.json
new file mode 100644
index 0000000000000000000000000000000000000000..07269bd743d3e34969f6dc713a9ddab2f0a6a523
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/94aec443450d3763d8fab1a3aa9633ca0e7e72f061dfa4c28a7396cd261f20b7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    bottom: \"5%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","bottom","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        bottom: \"5%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/967e184270b715e3f48ec9f81a6f2ef09a54e97ca873ab1fe3d94fb6ba992653.json b/.expo/web/cache/development/babel-loader/967e184270b715e3f48ec9f81a6f2ef09a54e97ca873ab1fe3d94fb6ba992653.json
new file mode 100644
index 0000000000000000000000000000000000000000..2543674dfea4867f13c4188bf532a0142d76bc3f
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/967e184270b715e3f48ec9f81a6f2ef09a54e97ca873ab1fe3d94fb6ba992653.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/9a8917836febadcb9f44459b13cd9133870b3aec1163cc3bc9e89f458b75fb6a.json b/.expo/web/cache/development/babel-loader/9a8917836febadcb9f44459b13cd9133870b3aec1163cc3bc9e89f458b75fb6a.json
new file mode 100644
index 0000000000000000000000000000000000000000..c5349d25be05ef0ea530f08c19382ce5323a57bd
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/9a8917836febadcb9f44459b13cd9133870b3aec1163cc3bc9e89f458b75fb6a.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex'\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","left","borderRadius","padding","color","fontSize","fontWeight","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a16d50c303f9235a7b0f742aabaf6905c07bd55b92028b2cc4c8aad4bda025a6.json b/.expo/web/cache/development/babel-loader/a16d50c303f9235a7b0f742aabaf6905c07bd55b92028b2cc4c8aad4bda025a6.json
new file mode 100644
index 0000000000000000000000000000000000000000..dcd185dbdfe8914d5d805d0154ecd57bdf1e1083
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a16d50c303f9235a7b0f742aabaf6905c07bd55b92028b2cc4c8aad4bda025a6.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    paddingHorizontal: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {\n    borderColor: 'black',\n    borderWidth: 3\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","paddingHorizontal","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        paddingHorizontal: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n        borderColor: 'black',\n        borderWidth: 3\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a1ce469512cd56f422683fe66c9de263e5286e3f802fa33b2835f536079a8cf1.json b/.expo/web/cache/development/babel-loader/a1ce469512cd56f422683fe66c9de263e5286e3f802fa33b2835f536079a8cf1.json
new file mode 100644
index 0000000000000000000000000000000000000000..6c1580ea569c01d36550af327a94b3ab8d769cdd
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a1ce469512cd56f422683fe66c9de263e5286e3f802fa33b2835f536079a8cf1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\",\n    marginBottom: \"-20%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","marginBottom","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\",\n        marginBottom: \"-20%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a446fa9d4bbbbd865334bc3c7999c99d8c41c11deb24a62e7e1805ae64df3682.json b/.expo/web/cache/development/babel-loader/a446fa9d4bbbbd865334bc3c7999c99d8c41c11deb24a62e7e1805ae64df3682.json
new file mode 100644
index 0000000000000000000000000000000000000000..10a05792e3aff45e618cfe9adcf56aa1a98b93ef
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a446fa9d4bbbbd865334bc3c7999c99d8c41c11deb24a62e7e1805ae64df3682.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    borderColor: \"black\",\n    position: 'relative',\n    top: \"-100%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        borderColor: \"black\",\n        position: 'relative',\n        top: \"-100%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a4609dae9bceb639ca421b6383f9cfd3060f854ec279cdfa5302275a5b6044ba.json b/.expo/web/cache/development/babel-loader/a4609dae9bceb639ca421b6383f9cfd3060f854ec279cdfa5302275a5b6044ba.json
new file mode 100644
index 0000000000000000000000000000000000000000..da64308f577f170c4bd2e9ec30695df8e8fa97b5
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a4609dae9bceb639ca421b6383f9cfd3060f854ec279cdfa5302275a5b6044ba.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    left: \"12%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","left","borderRadius","padding","color","fontSize","fontWeight","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        left: \"12%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a485c2175185d451a4b071a904c6113e3d4df6549b01d5b04d1a7886eecfeb3e.json b/.expo/web/cache/development/babel-loader/a485c2175185d451a4b071a904c6113e3d4df6549b01d5b04d1a7886eecfeb3e.json
new file mode 100644
index 0000000000000000000000000000000000000000..612f56e64493adbbc222cc6c58fe0ab9fa772a53
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a485c2175185d451a4b071a904c6113e3d4df6549b01d5b04d1a7886eecfeb3e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 2\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","position","bottom","padding","borderWidth","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 2\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/a6183e187ceb21d524d21eb124997aa4b77f1b636ac3a91fb1feb750755b44f7.json b/.expo/web/cache/development/babel-loader/a6183e187ceb21d524d21eb124997aa4b77f1b636ac3a91fb1feb750755b44f7.json
new file mode 100644
index 0000000000000000000000000000000000000000..94b20ca4961433db810651662bf7ed34bf4a71f4
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/a6183e187ceb21d524d21eb124997aa4b77f1b636ac3a91fb1feb750755b44f7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    position: 'absolute',\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        position: 'absolute',\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/aa824128e4ff96d8f59aff48521cce19bb328b2c95365996a7cb9fbf444211d8.json b/.expo/web/cache/development/babel-loader/aa824128e4ff96d8f59aff48521cce19bb328b2c95365996a7cb9fbf444211d8.json
new file mode 100644
index 0000000000000000000000000000000000000000..70e9be03586f73f3a3830920ef1370cd4261a3e4
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/aa824128e4ff96d8f59aff48521cce19bb328b2c95365996a7cb9fbf444211d8.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/af08f1e3e6065d982043027497d249246c529bf8be9104de95953e6dec6a6276.json b/.expo/web/cache/development/babel-loader/af08f1e3e6065d982043027497d249246c529bf8be9104de95953e6dec6a6276.json
new file mode 100644
index 0000000000000000000000000000000000000000..8ac01bea36136aab8a8c244edd9589c4750a7e04
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/af08f1e3e6065d982043027497d249246c529bf8be9104de95953e6dec6a6276.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsx(View, {}), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View>\n                \n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/af48e49fb780b1572d3a9cae1d3b846d7ca58b15cdc6f8e38e266cba62080000.json b/.expo/web/cache/development/babel-loader/af48e49fb780b1572d3a9cae1d3b846d7ca58b15cdc6f8e38e266cba62080000.json
new file mode 100644
index 0000000000000000000000000000000000000000..40bef18df585833be37ef508420f0e47d4eebe5e
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/af48e49fb780b1572d3a9cae1d3b846d7ca58b15cdc6f8e38e266cba62080000.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput;\n    if (amex) {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput;\n        if(amex) {\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/b1e53a2217054296c1ef7bf0daacd5b2b19c14c8f2b42dcc5bc8d97fd8bf7d3f.json b/.expo/web/cache/development/babel-loader/b1e53a2217054296c1ef7bf0daacd5b2b19c14c8f2b42dcc5bc8d97fd8bf7d3f.json
new file mode 100644
index 0000000000000000000000000000000000000000..fb78e11abfe4a3702ece4ac076a62743eabacc51
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/b1e53a2217054296c1ef7bf0daacd5b2b19c14c8f2b42dcc5bc8d97fd8bf7d3f.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","marginTop","left","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/b3ee71db0b0cdb035ab81664ddc610cde5dc2a8b7645f3fb1d8c7038c0bc97c9.json b/.expo/web/cache/development/babel-loader/b3ee71db0b0cdb035ab81664ddc610cde5dc2a8b7645f3fb1d8c7038c0bc97c9.json
new file mode 100644
index 0000000000000000000000000000000000000000..c51a45ebf5859aa472dc5141e5756bed47569e1c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/b3ee71db0b0cdb035ab81664ddc610cde5dc2a8b7645f3fb1d8c7038c0bc97c9.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, )\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/b3f879e5431ec1e047879279f969613eb2f58536b3c0753c3c51268bfec1362c.json b/.expo/web/cache/development/babel-loader/b3f879e5431ec1e047879279f969613eb2f58536b3c0753c3c51268bfec1362c.json
new file mode 100644
index 0000000000000000000000000000000000000000..36d44175d8c0524d7f2f251c89057682ae381920
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/b3f879e5431ec1e047879279f969613eb2f58536b3c0753c3c51268bfec1362c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 5\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","bottom","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 5\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/b6be6b9580d1c48673e5c5e744e26d5717237b861972372001b0d6fb79d9781e.json b/.expo/web/cache/development/babel-loader/b6be6b9580d1c48673e5c5e744e26d5717237b861972372001b0d6fb79d9781e.json
new file mode 100644
index 0000000000000000000000000000000000000000..b39017ed846861f4103857191ac407bb3c870963
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/b6be6b9580d1c48673e5c5e744e26d5717237b861972372001b0d6fb79d9781e.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.replace(/[^0-9\\s]/g, '');\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.replace(/[^0-9\\s]/g, '');\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/b90141ae205e8a6868848f95192108b10236b72f00a105a137020e443b08cc4c.json b/.expo/web/cache/development/babel-loader/b90141ae205e8a6868848f95192108b10236b72f00a105a137020e443b08cc4c.json
new file mode 100644
index 0000000000000000000000000000000000000000..a1b02bfeb749e02306ed9d90ddcb28e877483ee1
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/b90141ae205e8a6868848f95192108b10236b72f00a105a137020e443b08cc4c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.replace(/[^0-9\\s]/g, '');\n    ;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        \n        setCardNumberBrut(digitsOnly);\n        return formattedInput.replace(/[^0-9\\s]/g, '');;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/be0f27a5fd045705ab347c5cc4a10be55e1914362cf64bbfda8320b4dbd41bb4.json b/.expo/web/cache/development/babel-loader/be0f27a5fd045705ab347c5cc4a10be55e1914362cf64bbfda8320b4dbd41bb4.json
new file mode 100644
index 0000000000000000000000000000000000000000..0dab0411b52a61de351054e3f868444dff10c1de
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/be0f27a5fd045705ab347c5cc4a10be55e1914362cf64bbfda8320b4dbd41bb4.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\"\n  },\n  dateContainer: {\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n    },\n    dateContainer: {\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/be540c5888d31100de545bc7144862343616ccd43a8977662ea178fc05668ab7.json b/.expo/web/cache/development/babel-loader/be540c5888d31100de545bc7144862343616ccd43a8977662ea178fc05668ab7.json
new file mode 100644
index 0000000000000000000000000000000000000000..1424b886e948236344f35bcc0a067e4311a4d3d3
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/be540c5888d31100de545bc7144862343616ccd43a8977662ea178fc05668ab7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: translateY\n    }]\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY}]\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/bedbd6f87c70857e795a186f70e91d4acf6cd8894abb19d6a892b3ce02a9fb6c.json b/.expo/web/cache/development/babel-loader/bedbd6f87c70857e795a186f70e91d4acf6cd8894abb19d6a892b3ce02a9fb6c.json
new file mode 100644
index 0000000000000000000000000000000000000000..ac35301759295f1724d8e90a74641b06be80e4b7
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/bedbd6f87c70857e795a186f70e91d4acf6cd8894abb19d6a892b3ce02a9fb6c.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    setCardNumberBrut(digitsOnly);\n    return formattedInput;\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","console","log","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        setCardNumberBrut(digitsOnly);\n        return formattedInput;\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/c157c3d3ea3830774ea79bf57348855316f2e4046ea5c69171ef447954c56027.json b/.expo/web/cache/development/babel-loader/c157c3d3ea3830774ea79bf57348855316f2e4046ea5c69171ef447954c56027.json
new file mode 100644
index 0000000000000000000000000000000000000000..d64c9606a4172472ea2db8dbdb16d06a82067e8c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/c157c3d3ea3830774ea79bf57348855316f2e4046ea5c69171ef447954c56027.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function Service(_ref) {\n  var cardNumber = _ref.cardNumber;\n  var cardImageSource = require(\"../assets/visa.png\");\n  var getCardImageSource = function getCardImageSource() {\n    var cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n      case '41':\n      case '42':\n      case '43':\n      case '44':\n      case '45':\n        cardImageSource = require(\"../assets/visa.png\");\n        break;\n      case '51':\n      case '52':\n      case '53':\n      case '54':\n      case '55':\n        cardImageSource = require(\"../assets/mastercard.png\");\n        break;\n      case '34':\n      case '37':\n        cardImageSource = require(\"../assets/amex.png\");\n        break;\n      case '62':\n        cardImageSource = require(\"../assets/unionpay.png\");\n        break;\n      case '65':\n        cardImageSource = require(\"../assets/discover.png\");\n        break;\n      case '35':\n        cardImageSource = require(\"../assets/jcb.png\");\n        break;\n      case '30':\n      case '36':\n        cardImageSource = require(\"../assets/dinersclub.png\");\n        break;\n      case '97':\n        cardImageSource = require(\"../assets/troy.png\");\n        break;\n    }\n    return cardImageSource;\n  };\n  return _jsx(Image, {\n    source: getCardImageSource(),\n    style: styles.main\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 50,\n    height: null,\n    resizeMode: 'contain'\n  }\n});","map":{"version":3,"names":["React","StyleSheet","Image","jsx","_jsx","Service","_ref","cardNumber","cardImageSource","require","getCardImageSource","cardPrefix","toString","substring","source","style","styles","main","create","flex","width","height","resizeMode"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Service.js"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Image } from 'react-native';\n\nexport default function Service({ cardNumber }) {\n  let cardImageSource = require('../assets/visa.png');\n\n  const getCardImageSource = () => {\n    const cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n        case '41': // Visa commence par 41\n        case '42':\n        case '43':\n        case '44':\n        case '45':\n            cardImageSource = require('../assets/visa.png');\n            break;\n        case '51': // MasterCard commence par 51\n        case '52':\n        case '53':\n        case '54':\n        case '55':\n            cardImageSource = require('../assets/mastercard.png');\n            break;\n        case '34': // American Express commence par 34 ou 37\n        case '37':\n            cardImageSource = require('../assets/amex.png');\n            break;\n        case '62': // UnionPay commence par 62\n            cardImageSource = require('../assets/unionpay.png');\n            break;\n        case '65': // Discover commence par 65\n            cardImageSource = require('../assets/discover.png');\n            break;\n        case '35': // JCB commence par 35\n            cardImageSource = require('../assets/jcb.png');\n            break;\n        case '30': // Diners Club commence par 30 ou 36\n        case '36':\n            cardImageSource = require('../assets/dinersclub.png');\n            break;\n        case '97': // Troy commence par 97\n            cardImageSource = require('../assets/troy.png');\n            break;\n    }\n\n    return cardImageSource;\n  };\n\n  return (\n    <Image source={getCardImageSource()} style={styles.main} />\n  );\n}\n\nconst styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 50,\n    height: null,\n    resizeMode: 'contain'\n  },\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1B,eAAe,SAASC,OAAOA,CAAAC,IAAA,EAAiB;EAAA,IAAdC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAC1C,IAAIC,eAAe,GAAGC,OAAO,qBAAqB,CAAC;EAEnD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC/B,IAAMC,UAAU,GAAGJ,UAAU,CAACK,QAAQ,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACxD,QAAQF,UAAU;MACd,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLH,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,oBAAoB,CAAC;QAC9C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;IACR;IAEA,OAAOD,eAAe;EACxB,CAAC;EAED,OACEJ,IAAA,CAACF,KAAK;IAACY,MAAM,EAAEJ,kBAAkB,CAAC,CAAE;IAACK,KAAK,EAAEC,MAAM,CAACC;EAAK,CAAE,CAAC;AAE/D;AAEA,IAAMD,MAAM,GAAGf,UAAU,CAACiB,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,IAAI;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/c2679a6817c5f2c91561aa4d5e8c531e783e4707c8674a263990ab8dc17060db.json b/.expo/web/cache/development/babel-loader/c2679a6817c5f2c91561aa4d5e8c531e783e4707c8674a263990ab8dc17060db.json
new file mode 100644
index 0000000000000000000000000000000000000000..8c669da9319973cf9867ea19b5d331e7c967eff9
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/c2679a6817c5f2c91561aa4d5e8c531e783e4707c8674a263990ab8dc17060db.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"8%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"8%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/c9bc79cd47b1ab688e016c7cba9ec4b1a3afba01adfb79f9cde3a0f3e232090d.json b/.expo/web/cache/development/babel-loader/c9bc79cd47b1ab688e016c7cba9ec4b1a3afba01adfb79f9cde3a0f3e232090d.json
new file mode 100644
index 0000000000000000000000000000000000000000..e978d962b0179bc25a7a1a56ebbc40cd14f75062
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/c9bc79cd47b1ab688e016c7cba9ec4b1a3afba01adfb79f9cde3a0f3e232090d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cb2cdab330a1c5702e3a50e4bcfa9d7d31eb3139416fcbdef1cae5942e1af9b6.json b/.expo/web/cache/development/babel-loader/cb2cdab330a1c5702e3a50e4bcfa9d7d31eb3139416fcbdef1cae5942e1af9b6.json
new file mode 100644
index 0000000000000000000000000000000000000000..34c41c7e9d45331bee67abcee6be3005a5635c24
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cb2cdab330a1c5702e3a50e4bcfa9d7d31eb3139416fcbdef1cae5942e1af9b6.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {\n    borderColor: 'black',\n    borderWidth: 3\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n        borderColor: 'black',\n        borderWidth: 3\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cb37a4d160da8125397de6a1ce963a973a9847ad0062677b55da2be582dd22b1.json b/.expo/web/cache/development/babel-loader/cb37a4d160da8125397de6a1ce963a973a9847ad0062677b55da2be582dd22b1.json
new file mode 100644
index 0000000000000000000000000000000000000000..d51389994007472fb1b1680531f33e12e46bb256
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cb37a4d160da8125397de6a1ce963a973a9847ad0062677b55da2be582dd22b1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"5%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"5%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cbfb2fcb7ce46e4b8e156f6e64808db521b41f312cb22df80f8ee4490281a725.json b/.expo/web/cache/development/babel-loader/cbfb2fcb7ce46e4b8e156f6e64808db521b41f312cb22df80f8ee4490281a725.json
new file mode 100644
index 0000000000000000000000000000000000000000..3d031ddbf24e02a0fba4c4b8c7df4748ea53372b
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cbfb2fcb7ce46e4b8e156f6e64808db521b41f312cb22df80f8ee4490281a725.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/ccfc7ca821861b904931cd04629446574c0efb87370a6de07e801bb44aedae15.json b/.expo/web/cache/development/babel-loader/ccfc7ca821861b904931cd04629446574c0efb87370a6de07e801bb44aedae15.json
new file mode 100644
index 0000000000000000000000000000000000000000..ee2cb8d676d3e38c746d98ffdecf5cbfc1cae20c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/ccfc7ca821861b904931cd04629446574c0efb87370a6de07e801bb44aedae15.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cd44b2dda1cf4b60f596a1aff7b6a372003b6efb033f1134e730853b146e94a1.json b/.expo/web/cache/development/babel-loader/cd44b2dda1cf4b60f596a1aff7b6a372003b6efb033f1134e730853b146e94a1.json
new file mode 100644
index 0000000000000000000000000000000000000000..86a03b9c90974cd98ab517cda50f9f80da575fb6
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cd44b2dda1cf4b60f596a1aff7b6a372003b6efb033f1134e730853b146e94a1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cf169289e40c672e0dc68535536d5187d411b76ac54250d502e088f3566347d0.json b/.expo/web/cache/development/babel-loader/cf169289e40c672e0dc68535536d5187d411b76ac54250d502e088f3566347d0.json
new file mode 100644
index 0000000000000000000000000000000000000000..5c95e73fed432f17465c181742c4da79c35a3c71
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cf169289e40c672e0dc68535536d5187d411b76ac54250d502e088f3566347d0.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/cf22556fe70f0b498c4511d62ee9fd5ff89dca12fc56cf5381138c6827f29630.json b/.expo/web/cache/development/babel-loader/cf22556fe70f0b498c4511d62ee9fd5ff89dca12fc56cf5381138c6827f29630.json
new file mode 100644
index 0000000000000000000000000000000000000000..8503538bfed7c8c8976d8650401a3417524656e2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/cf22556fe70f0b498c4511d62ee9fd5ff89dca12fc56cf5381138c6827f29630.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 0\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","bottom","padding","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 0\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/d180e51200ded3e6e400c20ee1571f692367df3182aa47aa620da0122a93a3e0.json b/.expo/web/cache/development/babel-loader/d180e51200ded3e6e400c20ee1571f692367df3182aa47aa620da0122a93a3e0.json
new file mode 100644
index 0000000000000000000000000000000000000000..186094e343574fae1b6fb415f90a8891d1b53bb0
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/d180e51200ded3e6e400c20ee1571f692367df3182aa47aa620da0122a93a3e0.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {\n    transform: \"translateY(-50%)\"\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign","transform"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       \n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        transform: \"translateY(-50%)\"\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/d2bd83a48416d2211c5410b81cca424815418ed220880b23ef63ef2193b86161.json b/.expo/web/cache/development/babel-loader/d2bd83a48416d2211c5410b81cca424815418ed220880b23ef63ef2193b86161.json
new file mode 100644
index 0000000000000000000000000000000000000000..8caabad1c91fd98f3d71b610bf906dd62f457e72
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/d2bd83a48416d2211c5410b81cca424815418ed220880b23ef63ef2193b86161.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    position: 'relative',\n    top: \"-100%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        position: 'relative',\n        top: \"-100%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,YAAY,EAAE;EAClB,CAAC;EACDT,aAAa,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBR,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFwB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDzB,IAAI,EAAE;IACFqB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdoB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbG,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/d61a8dd4f502d0fbdb61f1432fb57f4207deddac6c97edb8cc83826daf8649ff.json b/.expo/web/cache/development/babel-loader/d61a8dd4f502d0fbdb61f1432fb57f4207deddac6c97edb8cc83826daf8649ff.json
new file mode 100644
index 0000000000000000000000000000000000000000..65094cfdac8aa5e84fc149189745edb6583432f5
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/d61a8dd4f502d0fbdb61f1432fb57f4207deddac6c97edb8cc83826daf8649ff.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/db29db1cae3503a5a0fa8f51de6b0cd8e8e571afce8950f68993ca1be2efdb85.json b/.expo/web/cache/development/babel-loader/db29db1cae3503a5a0fa8f51de6b0cd8e8e571afce8950f68993ca1be2efdb85.json
new file mode 100644
index 0000000000000000000000000000000000000000..870e8a62f9841c764cf0b488c9ab2ace14849300
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/db29db1cae3503a5a0fa8f51de6b0cd8e8e571afce8950f68993ca1be2efdb85.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    position: 'relative',\n    top: \"-82%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        position: 'relative',\n        top: \"-82%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/dcbb7b80f6c8776aaf8658eef5bb732c2c20cf1920697957a1c2d556b51c5428.json b/.expo/web/cache/development/babel-loader/dcbb7b80f6c8776aaf8658eef5bb732c2c20cf1920697957a1c2d556b51c5428.json
new file mode 100644
index 0000000000000000000000000000000000000000..e6b44f2fdf4032d582f3b96ff8e3130723add1f5
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/dcbb7b80f6c8776aaf8658eef5bb732c2c20cf1920697957a1c2d556b51c5428.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"2%\",\n    position: 'absolute',\n    bottom: 2\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","position","bottom","padding","borderWidth","borderRadius","color","fontSize","fontWeight"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"2%\",\n        position: 'absolute',\n        bottom: 2\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/e2360fcb7f0875876135b103a0e5d0aa6a9feb915266930f7b97937c0e482073.json b/.expo/web/cache/development/babel-loader/e2360fcb7f0875876135b103a0e5d0aa6a9feb915266930f7b97937c0e482073.json
new file mode 100644
index 0000000000000000000000000000000000000000..9eba9a957285eb2351b84133a392f48f68b4daf2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/e2360fcb7f0875876135b103a0e5d0aa6a9feb915266930f7b97937c0e482073.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        left: \"14%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/e29246ca0b623ac24e3ed1215d652b0689e6bf4c70bc93f767b706548d53cf17.json b/.expo/web/cache/development/babel-loader/e29246ca0b623ac24e3ed1215d652b0689e6bf4c70bc93f767b706548d53cf17.json
new file mode 100644
index 0000000000000000000000000000000000000000..2f00837074f89943185384543b3faa63600d092d
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/e29246ca0b623ac24e3ed1215d652b0689e6bf4c70bc93f767b706548d53cf17.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/e362887b47ee6f3cd7b1645f9dbd4fe797cb675374d7522096e12f4c45038eaf.json b/.expo/web/cache/development/babel-loader/e362887b47ee6f3cd7b1645f9dbd4fe797cb675374d7522096e12f4c45038eaf.json
new file mode 100644
index 0000000000000000000000000000000000000000..42b672e91de01cdd9a1de088649d86a401205357
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/e362887b47ee6f3cd7b1645f9dbd4fe797cb675374d7522096e12f4c45038eaf.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    marginTop: \"12%\",\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","marginTop","left","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        marginTop: \"12%\",\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/e8c20d96d4fe734b4927d60c992798aa434a2f712bd1ccb8fe4fe9dcafa86219.json b/.expo/web/cache/development/babel-loader/e8c20d96d4fe734b4927d60c992798aa434a2f712bd1ccb8fe4fe9dcafa86219.json
new file mode 100644
index 0000000000000000000000000000000000000000..e0cd830e154ccda0ecfcc4324554ce06f4c1d0ab
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/e8c20d96d4fe734b4927d60c992798aa434a2f712bd1ccb8fe4fe9dcafa86219.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/e931eb856562e63f0ae0df20a95c88721d30c409c6e4c35697e487f1e3a3bad1.json b/.expo/web/cache/development/babel-loader/e931eb856562e63f0ae0df20a95c88721d30c409c6e4c35697e487f1e3a3bad1.json
new file mode 100644
index 0000000000000000000000000000000000000000..5513e57f9303aecceca985dab44160332f56a84f
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/e931eb856562e63f0ae0df20a95c88721d30c409c6e4c35697e487f1e3a3bad1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    borderColor: \"black\",\n    position: 'relative',\n    top: \"-50%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        borderColor: \"black\",\n        position: 'relative',\n        top: \"-50%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/ec73968d5d5275d4a92b2262061b6e02d2a2a63995d0c923cb773f5a8d5d9586.json b/.expo/web/cache/development/babel-loader/ec73968d5d5275d4a92b2262061b6e02d2a2a63995d0c923cb773f5a8d5d9586.json
new file mode 100644
index 0000000000000000000000000000000000000000..dc58cf793cf6b3b105b80739fe4838c91e5502ae
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/ec73968d5d5275d4a92b2262061b6e02d2a2a63995d0c923cb773f5a8d5d9586.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput = input_text + \"##################################\";\n    formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n    if (amex) {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return formattedInput.replace(/[^0-9\\s]+$/g, '');\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput = input_text + \"##################################\";\n        formattedInput = formattedInput.substring(0, amex ? 15 : 16);\n        if(amex) {\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = formattedInput.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return formattedInput.replace(/[^0-9\\s]+$/g, '');\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/ecae0e4fddc1a44dc24bfb1b93c1e56d5760f0e716fa8d519dae5e3d750950c3.json b/.expo/web/cache/development/babel-loader/ecae0e4fddc1a44dc24bfb1b93c1e56d5760f0e716fa8d519dae5e3d750950c3.json
new file mode 100644
index 0000000000000000000000000000000000000000..882512d48a67b35ae3a15e361cdc19949dfbc3e2
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/ecae0e4fddc1a44dc24bfb1b93c1e56d5760f0e716fa8d519dae5e3d750950c3.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/ecc107d7a679e41421aebbaa29aac3eb605aa0287b0d5d42116fdad169d569ee.json b/.expo/web/cache/development/babel-loader/ecc107d7a679e41421aebbaa29aac3eb605aa0287b0d5d42116fdad169d569ee.json
new file mode 100644
index 0000000000000000000000000000000000000000..6ac7710519e2923229c722f6f7a1d67c66ca8cec
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/ecc107d7a679e41421aebbaa29aac3eb605aa0287b0d5d42116fdad169d569ee.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/efdb975d143ac493ede21f2a2c57e9610e65d11ccef592c8545b26fdee4f6e2d.json b/.expo/web/cache/development/babel-loader/efdb975d143ac493ede21f2a2c57e9610e65d11ccef592c8545b26fdee4f6e2d.json
new file mode 100644
index 0000000000000000000000000000000000000000..3946e75f6448816c65b955b755b11cd193fc2023
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/efdb975d143ac493ede21f2a2c57e9610e65d11ccef592c8545b26fdee4f6e2d.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    position: 'asbolute',\n    top: \"75%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\",\n    padding: 10,\n    position: 'absolute'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"15%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","top","left","padding","borderWidth","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        position: 'asbolute',\n        top: \"75%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\",\n        padding: 10,\n        position: 'absolute'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"15%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/f72f8717f7ea8f69c096bc034ad4c63713dd5ee489d89653c093d98d8d2b7930.json b/.expo/web/cache/development/babel-loader/f72f8717f7ea8f69c096bc034ad4c63713dd5ee489d89653c093d98d8d2b7930.json
new file mode 100644
index 0000000000000000000000000000000000000000..325b684bc1a9df0118dc24413da6e87feb66635a
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/f72f8717f7ea8f69c096bc034ad4c63713dd5ee489d89653c093d98d8d2b7930.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function Service(_ref) {\n  var cardNumber = _ref.cardNumber;\n  var cardImageSource = require(\"../assets/visa.png\");\n  var getCardImageSource = function getCardImageSource() {\n    var cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n      case '41':\n      case '42':\n      case '43':\n      case '44':\n      case '45':\n        cardImageSource = require(\"../assets/visa.png\");\n        break;\n      case '51':\n      case '52':\n      case '53':\n      case '54':\n      case '55':\n        cardImageSource = require(\"../assets/mastercard.png\");\n        break;\n      case '34':\n      case '37':\n        cardImageSource = require(\"../assets/amex.png\");\n        break;\n      case '62':\n        cardImageSource = require(\"../assets/unionpay.png\");\n        break;\n      case '65':\n        cardImageSource = require(\"../assets/discover.png\");\n        break;\n      case '35':\n        cardImageSource = require(\"../assets/jcb.png\");\n        break;\n      case '30':\n      case '36':\n        cardImageSource = require(\"../assets/dinersclub.png\");\n        break;\n      case '97':\n        cardImageSource = require(\"../assets/troy.png\");\n        break;\n    }\n    return cardImageSource;\n  };\n  return _jsx(Image, {\n    source: getCardImageSource(),\n    style: styles.main\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 80,\n    height: null,\n    resizeMode: 'contain'\n  }\n});","map":{"version":3,"names":["React","StyleSheet","Image","jsx","_jsx","Service","_ref","cardNumber","cardImageSource","require","getCardImageSource","cardPrefix","toString","substring","source","style","styles","main","create","flex","width","height","resizeMode"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Service.js"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, Image } from 'react-native';\n\nexport default function Service({ cardNumber }) {\n  let cardImageSource = require('../assets/visa.png');\n\n  const getCardImageSource = () => {\n    const cardPrefix = cardNumber.toString().substring(0, 2);\n    switch (cardPrefix) {\n        case '41': // Visa commence par 41\n        case '42':\n        case '43':\n        case '44':\n        case '45':\n            cardImageSource = require('../assets/visa.png');\n            break;\n        case '51': // MasterCard commence par 51\n        case '52':\n        case '53':\n        case '54':\n        case '55':\n            cardImageSource = require('../assets/mastercard.png');\n            break;\n        case '34': // American Express commence par 34 ou 37\n        case '37':\n            cardImageSource = require('../assets/amex.png');\n            break;\n        case '62': // UnionPay commence par 62\n            cardImageSource = require('../assets/unionpay.png');\n            break;\n        case '65': // Discover commence par 65\n            cardImageSource = require('../assets/discover.png');\n            break;\n        case '35': // JCB commence par 35\n            cardImageSource = require('../assets/jcb.png');\n            break;\n        case '30': // Diners Club commence par 30 ou 36\n        case '36':\n            cardImageSource = require('../assets/dinersclub.png');\n            break;\n        case '97': // Troy commence par 97\n            cardImageSource = require('../assets/troy.png');\n            break;\n    }\n\n    return cardImageSource;\n  };\n\n  return (\n    <Image source={getCardImageSource()} style={styles.main} />\n  );\n}\n\nconst styles = StyleSheet.create({\n  main: {\n    flex: 1,\n    width: 80,\n    height: null,\n    resizeMode: 'contain'\n  },\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG1B,eAAe,SAASC,OAAOA,CAAAC,IAAA,EAAiB;EAAA,IAAdC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAC1C,IAAIC,eAAe,GAAGC,OAAO,qBAAqB,CAAC;EAEnD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC/B,IAAMC,UAAU,GAAGJ,UAAU,CAACK,QAAQ,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACxD,QAAQF,UAAU;MACd,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLH,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,yBAAyB,CAAC;QACnD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,oBAAoB,CAAC;QAC9C;MACJ,KAAK,IAAI;MACT,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,2BAA2B,CAAC;QACrD;MACJ,KAAK,IAAI;QACLD,eAAe,GAAGC,OAAO,qBAAqB,CAAC;QAC/C;IACR;IAEA,OAAOD,eAAe;EACxB,CAAC;EAED,OACEJ,IAAA,CAACF,KAAK;IAACY,MAAM,EAAEJ,kBAAkB,CAAC,CAAE;IAACK,KAAK,EAAEC,MAAM,CAACC;EAAK,CAAE,CAAC;AAE/D;AAEA,IAAMD,MAAM,GAAGf,UAAU,CAACiB,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,IAAI;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/f87bd3fab8905291569059ce334ba2f7a0ca3cf6c9c22820454db461cb798f6f.json b/.expo/web/cache/development/babel-loader/f87bd3fab8905291569059ce334ba2f7a0ca3cf6c9c22820454db461cb798f6f.json
new file mode 100644
index 0000000000000000000000000000000000000000..ac4bfe63fdff1e8b545ae64d0b45d73a918cc09a
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/f87bd3fab8905291569059ce334ba2f7a0ca3cf6c9c22820454db461cb798f6f.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    position: 'relative',\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\"\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","position","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        position: 'relative',\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/f99bf44be41815a08caf8a406cb0668afd5e1e90a3ba692a7fcf135346b8a5b7.json b/.expo/web/cache/development/babel-loader/f99bf44be41815a08caf8a406cb0668afd5e1e90a3ba692a7fcf135346b8a5b7.json
new file mode 100644
index 0000000000000000000000000000000000000000..1e83464009437be260b0888f082c458725fb93ce
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/f99bf44be41815a08caf8a406cb0668afd5e1e90a3ba692a7fcf135346b8a5b7.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    position: 'relative',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        position: 'relative',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,YAAY,EAAE;EAClB,CAAC;EACDT,aAAa,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBR,QAAQ,EAAE,UAAU;IACpBE,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFwB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDzB,IAAI,EAAE;IACFqB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdoB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbG,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/fa7df77981f0184af9bba30275ce754c170d4ff942aa4eee371b62551e849b82.json b/.expo/web/cache/development/babel-loader/fa7df77981f0184af9bba30275ce754c170d4ff942aa4eee371b62551e849b82.json
new file mode 100644
index 0000000000000000000000000000000000000000..19afa76f6b93b6aa4e99c97d8ab7d11652626a4c
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/fa7df77981f0184af9bba30275ce754c170d4ff942aa4eee371b62551e849b82.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }]\n  },\n  dateContainer: {\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}]\n    },\n    dateContainer: {\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/fb8667c850f526eab0f44a19178a313fd0274656c34f77897f87aeac8c2297a1.json b/.expo/web/cache/development/babel-loader/fb8667c850f526eab0f44a19178a313fd0274656c34f77897f87aeac8c2297a1.json
new file mode 100644
index 0000000000000000000000000000000000000000..ddb7c3edf976a7575ed5e1deed17cb5f395dfd4a
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/fb8667c850f526eab0f44a19178a313fd0274656c34f77897f87aeac8c2297a1.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/slicedToArray\";\nimport React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport TouchableOpacity from \"react-native-web/dist/exports/TouchableOpacity\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport LabelledInput from \"./LabelledInput\";\nimport Card from \"./Card\";\nimport DatePicker from \"./DatePicker\";\nimport BackCard from \"./BackCard\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Form(props) {\n  var _useState = useState(''),\n    _useState2 = _slicedToArray(_useState, 2),\n    cardNumberBrut = _useState2[0],\n    setCardNumberBrut = _useState2[1];\n  var _useState3 = useState(false),\n    _useState4 = _slicedToArray(_useState3, 2),\n    cardNumberFocused = _useState4[0],\n    setCardNumberFocused = _useState4[1];\n  var _useState5 = useState(\"\"),\n    _useState6 = _slicedToArray(_useState5, 2),\n    cardName = _useState6[0],\n    setCardName = _useState6[1];\n  var _useState7 = useState(false),\n    _useState8 = _slicedToArray(_useState7, 2),\n    cardNameFocused = _useState8[0],\n    setCardNameFocused = _useState8[1];\n  var _useState9 = useState(\"01\"),\n    _useState10 = _slicedToArray(_useState9, 2),\n    month = _useState10[0],\n    setMonth = _useState10[1];\n  var _useState11 = useState(\"23\"),\n    _useState12 = _slicedToArray(_useState11, 2),\n    year = _useState12[0],\n    setYear = _useState12[1];\n  var _useState13 = useState(false),\n    _useState14 = _slicedToArray(_useState13, 2),\n    dateFocused = _useState14[0],\n    setDateFocused = _useState14[1];\n  var _useState15 = useState(\"\"),\n    _useState16 = _slicedToArray(_useState15, 2),\n    CVV = _useState16[0],\n    setCVV = _useState16[1];\n  var _useState17 = useState(false),\n    _useState18 = _slicedToArray(_useState17, 2),\n    CVVFocused = _useState18[0],\n    setCVVFocused = _useState18[1];\n  var computeCardNumberForTextInput = function computeCardNumberForTextInput(str) {\n    var digitsOnly = str.replace(/\\D/g, '');\n    var input_text = digitsOnly;\n    var amex = digitsOnly.substring(0, 2) == '34' || digitsOnly.substring(0, 2) == '37';\n    var formattedInput;\n    if (amex) {\n      formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    setCardNumberBrut(digitsOnly);\n    return input_text.substring(0, amex ? 15 : 16);\n  };\n  var computeCardName = function computeCardName(str) {\n    var name = str.substring(0, 20);\n    name = name.replace(/[^a-zA-Z]/g, '');\n    setCardName(name);\n    return name;\n  };\n  var computeCVV = function computeCVV(str) {\n    str = str.replace(/\\D/g, '');\n    setCVV(str.substring(0, 4));\n    return str.substring(0, 4);\n  };\n  var updateMonth = function updateMonth(str) {\n    setMonth(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  var updateYear = function updateYear(str) {\n    setYear(str);\n    setDateFocused(true);\n    setCardNumberFocused(false);\n    setCardNameFocused(false);\n    setCVVFocused(false);\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [CVVFocused ? _jsx(BackCard, {\n      cardNumber: cardNumberBrut,\n      CVV: CVV\n    }) : _jsx(Card, {\n      style: styles.card,\n      cardNumberBrut: cardNumberBrut,\n      dateFocused: dateFocused,\n      month: month,\n      year: year,\n      cardNumberFocused: cardNumberFocused,\n      cardNameFocused: cardNameFocused,\n      cardName: cardName\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNumberFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNumberFocused(false);\n      },\n      computeText: computeCardNumberForTextInput,\n      text: \"Card Number\",\n      placeholder: \"XXXX-XXXX-XXXX-XXXX\"\n    }), _jsx(LabelledInput, {\n      width: \"84%\",\n      marginLeft: \"8%\",\n      onFocus: function onFocus() {\n        setCardNameFocused(true);\n        setDateFocused(false);\n      },\n      onBlur: function onBlur() {\n        setCardNameFocused(false);\n      },\n      computeText: computeCardName,\n      text: \"Card Name\",\n      placeholder: \"Jacques Chirac\"\n    }), _jsxs(View, {\n      style: styles.dateAndCVV,\n      children: [_jsx(DatePicker, {\n        updateMonth: updateMonth,\n        updateYear: updateYear\n      }), _jsx(LabelledInput, {\n        width: \"30%\",\n        marginLeft: \"7%\",\n        onFocus: function onFocus() {\n          setCVVFocused(true), setDateFocused(false);\n        },\n        onBlur: function onBlur() {\n          setCVVFocused(false);\n        },\n        computeText: computeCVV,\n        text: \"CVV\",\n        placeholder: \"###\"\n      })]\n    }), _jsx(TouchableOpacity, {\n      style: styles.submitButton,\n      children: _jsx(Text, {\n        style: styles.submitButtonText,\n        children: \"Submit\"\n      })\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: '80%',\n    height: '50%',\n    backgroundColor: 'white',\n    borderRadius: 10,\n    shadowColor: '#171717',\n    shadowOffset: {\n      width: 0,\n      height: 6\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 10\n  },\n  dateAndCVV: {\n    display: 'flex',\n    flexDirection: 'row',\n    width: \"80%\",\n    marginLeft: \"10%\"\n  },\n  submitButton: {\n    padding: 10,\n    backgroundColor: \"#0055D4\",\n    borderRadius: 3,\n    width: \"84%\",\n    marginLeft: \"8%\"\n  },\n  submitButtonText: {\n    color: \"white\",\n    textAlign: 'center'\n  },\n  card: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","TouchableOpacity","Text","LabelledInput","Card","DatePicker","BackCard","jsx","_jsx","jsxs","_jsxs","Form","props","_useState","_useState2","_slicedToArray","cardNumberBrut","setCardNumberBrut","_useState3","_useState4","cardNumberFocused","setCardNumberFocused","_useState5","_useState6","cardName","setCardName","_useState7","_useState8","cardNameFocused","setCardNameFocused","_useState9","_useState10","month","setMonth","_useState11","_useState12","year","setYear","_useState13","_useState14","dateFocused","setDateFocused","_useState15","_useState16","CVV","setCVV","_useState17","_useState18","CVVFocused","setCVVFocused","computeCardNumberForTextInput","str","digitsOnly","replace","input_text","amex","substring","formattedInput","computeCardName","name","computeCVV","updateMonth","updateYear","style","styles","main","children","cardNumber","card","width","marginLeft","onFocus","onBlur","computeText","text","placeholder","dateAndCVV","submitButton","submitButtonText","create","height","backgroundColor","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","display","flexDirection","padding","color","textAlign"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Form.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet , View, Image, TouchableOpacity, Text } from 'react-native';\nimport LabelledInput from './LabelledInput';\nimport Card from './Card';\nimport DatePicker from './DatePicker';\nimport BackCard from './BackCard';\n\nexport default function Form(props) {\n    const [cardNumberBrut, setCardNumberBrut] = useState('');\n    const [cardNumberFocused, setCardNumberFocused] = useState(false);\n    const [cardName, setCardName] = useState(\"\");\n    const [cardNameFocused, setCardNameFocused] = useState(false);\n    const [month, setMonth] = useState(\"01\");\n    const [year, setYear] = useState(\"23\");\n    const [dateFocused, setDateFocused] = useState(false);\n    const [CVV, setCVV] = useState(\"\");\n    const [CVVFocused, setCVVFocused] = useState(false);\n\n    const computeCardNumberForTextInput = (str) => {\n        let digitsOnly = str.replace(/\\D/g, '');\n        let input_text = digitsOnly;\n        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';\n        let formattedInput;\n        if(amex) {\n            formattedInput = input_text.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        setCardNumberBrut(digitsOnly);\n        return input_text.substring(0, amex ? 15 : 16);\n    }\n\n    const computeCardName = (str) => {\n        let name = str.substring(0, 20);\n        name = name.replace(/[^a-zA-Z]/g, '');\n        setCardName(name);\n        return name;\n    }\n\n    const computeCVV = (str) => {\n        str = str.replace(/\\D/g, '');\n        setCVV(str.substring(0,4));\n        return str.substring(0,4);\n    }\n    \n    const updateMonth = (str) => {\n        setMonth(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    const updateYear = (str) => {\n        setYear(str);\n        setDateFocused(true);\n        setCardNumberFocused(false);\n        setCardNameFocused(false);\n        setCVVFocused(false);\n    }\n\n    return (\n        <View style={styles.main}>\n            {CVVFocused ? \n            <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>\n            :\n            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />\n            }\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>\n            <LabelledInput width=\"84%\" marginLeft=\"8%\" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>\n            <View style={styles.dateAndCVV}>\n                <DatePicker updateMonth={updateMonth} updateYear={updateYear}/>\n                <LabelledInput width=\"30%\" marginLeft=\"7%\" onFocus={() => {setCVVFocused(true), setDateFocused(false)}} onBlur={() => {setCVVFocused(false)}} computeText={computeCVV} text='CVV' placeholder='###'/>\n            </View>\n            <TouchableOpacity style={styles.submitButton}>\n                <Text style={styles.submitButtonText}>Submit</Text>\n            </TouchableOpacity>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: '80%',\n        height: '50%',\n        backgroundColor: 'white',\n        borderRadius: 10,\n        shadowColor: '#171717',\n        shadowOffset: {width: 0, height: 6},\n        shadowOpacity: 0.2,\n        shadowRadius: 10,\n    },\n    dateAndCVV: {\n        display: 'flex',\n        flexDirection: 'row',\n        width: \"80%\",\n        marginLeft: \"10%\"\n    },\n    submitButton: {\n        padding: 10,\n        backgroundColor: \"#0055D4\",\n        borderRadius: 3,\n        width: \"84%\",\n        marginLeft: \"8%\"\n    },\n    submitButtonText: {\n        color: \"white\",\n        textAlign: 'center'\n    },\n    card: {\n        \n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/fb8ae5ac64627c8cbef955b298c69e8db8d4a730f79e27871074ac67861142aa.json b/.expo/web/cache/development/babel-loader/fb8ae5ac64627c8cbef955b298c69e8db8d4a730f79e27871074ac67861142aa.json
new file mode 100644
index 0000000000000000000000000000000000000000..5a3c1532aba74cbc59fce86b5c87e02398d2f1dc
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/fb8ae5ac64627c8cbef955b298c69e8db8d4a730f79e27871074ac67861142aa.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    top: \"-100%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        top: \"-100%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEzB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACM,IAAK;MAACF,MAAM,EAAEC,OAAO,qBAAqB;IAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACO,gBAAiB;MAAAL,QAAA,EAACtB,IAAA,CAACH,OAAO;QAAC+B,UAAU,EAAExB,KAAK,CAACyB;MAAe,CAAE;IAAC,CAAM,CAAC,EAC1F7B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACQ,UAAU,EAAE;QAACE,WAAW,EAAE1B,KAAK,CAAC2B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAT,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAACyB,cAAc,EAAET,MAAM,CAACY,SAAS;IAAC,CACzD,CAAC,EACP9B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACa,iBAAiB,EAAE;QAACH,WAAW,EAAE1B,KAAK,CAAC8B,eAAe,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAZ,QAAA,GACpGtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACe,aAAc;QAAAb,QAAA,EAAC;MAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACgB,QAAS;QAAAd,QAAA,EACxBlB,KAAK,CAACgC;MAAQ,CACb,CAAC;IAAA,CACL,CAAC,EACPlC,KAAA,CAACR,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACiB,aAAa,EAAE;QAACP,WAAW,EAAE1B,KAAK,CAACkC,WAAW,GAAG,SAAS,GAAG;MAAW,CAAC,CAAE;MAAAhB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACmB,SAAU;QAAAjB,QAAA,EAAC;MAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;QAACW,KAAK,EAAEa,MAAM,CAACoB,IAAK;QAAAlB,QAAA,GAAElB,KAAK,CAACqC,KAAK,EAAC,KAAG,EAACrC,KAAK,CAACsC,IAAI;MAAA,CAAO,CAAC;IAAA,CAC3D,CAAC;EAAA,CACL,CAAC;AAEf;AAEA,IAAMtB,MAAM,GAAG3B,UAAU,CAACkD,MAAM,CAAC;EAC7BtB,IAAI,EAAE;IACFuB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,YAAY,EAAE;EAClB,CAAC;EACDT,aAAa,EAAE;IACXU,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfP,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE;EACb,CAAC;EACDb,SAAS,EAAE;IACPc,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDd,IAAI,EAAE;IACFa,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDtB,iBAAiB,EAAE;IACfuB,OAAO,EAAE,MAAM;IACfR,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXL,KAAK,EAAE,KAAK;IACZQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDf,QAAQ,EAAE;IACNiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDnB,aAAa,EAAE;IACXmB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACDzB,UAAU,EAAE;IACR2B,UAAU,EAAE,MAAM;IAClBP,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVR,KAAK,EAAE,KAAK;IACZY,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDzB,SAAS,EAAE;IACPqB,KAAK,EAAE;EACX,CAAC;EACD9B,IAAI,EAAE;IACFwB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE;EAClB,CAAC;EACDzB,IAAI,EAAE;IACFqB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfH,GAAG,EAAE,OAAO;IACZC,IAAI,EAAE;EACV,CAAC;EACDtB,gBAAgB,EAAE;IACdoB,QAAQ,EAAE,UAAU;IACpBH,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbG,GAAG,EAAE,OAAO;IACZU,KAAK,EAAE;EACX;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/fd683d0098f8cf7b1fdef8975cb88d4fe6e41c944ce3a66978ca87848a9ac9f4.json b/.expo/web/cache/development/babel-loader/fd683d0098f8cf7b1fdef8975cb88d4fe6e41c944ce3a66978ca87848a9ac9f4.json
new file mode 100644
index 0000000000000000000000000000000000000000..1c23f31b1c1ac33c151b7af08862e9c1aea416ba
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/fd683d0098f8cf7b1fdef8975cb88d4fe6e41c944ce3a66978ca87848a9ac9f4.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: [styles.cardNameContainer, {\n        borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.cardNameTitle,\n        children: \"Card Holder\"\n      }), _jsx(Text, {\n        style: styles.cardName,\n        children: props.cardName\n      })]\n    }), _jsxs(View, {\n      style: [styles.dateContainer, {\n        borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n      }],\n      children: [_jsx(Text, {\n        style: styles.dateTitle,\n        children: \"Expires\"\n      }), _jsxs(Text, {\n        style: styles.date,\n        children: [props.month, \" / \", props.year]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    marginBottom: \"-15%\"\n  },\n  dateContainer: {\n    position: 'relative',\n    top: \"-158%\",\n    left: \"86%\",\n    borderWidth: 2,\n    borderRadius: 3,\n    width: \"24%\",\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    top: \"-132%\",\n    left: \"16%\",\n    width: \"70%\",\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    position: 'relative',\n    top: \"-102%\",\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    position: 'relative',\n    width: \"100%\",\n    height: \"100%\",\n    top: \"-50%\",\n    left: \"12%\",\n    borderRadius: 11\n  },\n  chip: {\n    position: 'relative',\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    top: \"-143%\",\n    left: \"16%\"\n  },\n  serviceContainer: {\n    position: 'relative',\n    width: '30%',\n    height: '10%',\n    top: '-159%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","marginBottom","position","top","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","display","flexDirection","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.cardNameTitle}>\n                    Card Holder\n                </Text>\n                <Text style={styles.cardName}>\n                    {props.cardName}\n                </Text>\n            </View>\n            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                <Text style={styles.dateTitle}>Expires</Text>\n                <Text style={styles.date}>{props.month} / {props.year}</Text>\n            </View>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        marginBottom: \"-15%\"\n    },\n    dateContainer: {\n        position: 'relative',\n        top: \"-158%\",\n        left: \"86%\",\n        borderWidth: 2,\n        borderRadius: 3,\n        width: \"24%\",\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        top: \"-132%\",\n        left: \"16%\",\n        width: \"70%\",\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        position: 'relative',\n        top: \"-102%\",\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        position: 'relative',\n        width: \"100%\",\n        height: \"100%\",\n        top: \"-50%\",\n        left: \"12%\",\n        borderRadius: 11\n    },\n    chip: {\n        position: 'relative',\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        top: \"-143%\",\n        left: \"16%\"\n    },\n    serviceContainer: {\n        position: 'relative',\n        width: '30%',\n        height: '10%',\n        top: '-159%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/fdf3c6c13394677aeb94fc0cb5dae9fd7d558f000e414887be329ac07e4c4622.json b/.expo/web/cache/development/babel-loader/fdf3c6c13394677aeb94fc0cb5dae9fd7d558f000e414887be329ac07e4c4622.json
new file mode 100644
index 0000000000000000000000000000000000000000..4e16d73f25716056058f645742ec33028e6c1581
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/fdf3c6c13394677aeb94fc0cb5dae9fd7d558f000e414887be329ac07e4c4622.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    left: \"12%\"\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    borderColor: 'black',\n    borderWidth: 3\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        left: \"12%\"\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        borderColor: 'black',\n        borderWidth: 3\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEvB,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACM,YAAa;MAAAJ,QAAA,GAC7BtB,IAAA,CAACL,KAAK;QAACY,KAAK,EAAEa,MAAM,CAACO,IAAK;QAACH,MAAM,EAAEC,OAAO,qBAAqB;MAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;QAACa,KAAK,EAAEa,MAAM,CAACQ,gBAAiB;QAAAN,QAAA,EAACtB,IAAA,CAACH,OAAO;UAACgC,UAAU,EAAEzB,KAAK,CAAC0B;QAAe,CAAE;MAAC,CAAM,CAAC;IAAA,CACxF,CAAC,EAEP9B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACS,UAAU,EAAE;QAACE,WAAW,EAAE3B,KAAK,CAAC4B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAV,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAAC0B,cAAc,EAAEV,MAAM,CAACa,SAAS;IAAC,CACzD,CAAC,EACP/B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACc,eAAgB;MAAAZ,QAAA,GAChCpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACe,iBAAiB,EAAE;UAACJ,WAAW,EAAE3B,KAAK,CAACgC,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAd,QAAA,GACpGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACiB,aAAc;UAAAf,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACkB,QAAS;UAAAhB,QAAA,EACxBlB,KAAK,CAACkC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPpC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACmB,aAAa,EAAE;UAACR,WAAW,EAAE3B,KAAK,CAACoC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAlB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACqB,SAAU;UAAAnB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACsB,IAAK;UAAApB,QAAA,GAAElB,KAAK,CAACuC,KAAK,EAAC,KAAG,EAACvC,KAAK,CAACwC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACL,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMxB,MAAM,GAAG3B,UAAU,CAACoD,MAAM,CAAC;EAC7BxB,IAAI,EAAE;IACFyB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE;EAClB,CAAC;EACDhB,eAAe,EAAE;IACbY,KAAK,EAAE,KAAK;IACZK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,SAAS,EAAE,KAAK;IAChBC,IAAI,EAAE;EACV,CAAC;EACD7B,YAAY,EAAE;IACV8B,WAAW,EAAE,CAAC;IACdzB,WAAW,EAAE,OAAO;IACpBoB,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BE,IAAI,EAAE;EACV,CAAC;EACDhB,aAAa,EAAE;IACXiB,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE;EACb,CAAC;EACDjB,SAAS,EAAE;IACPkB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDlB,IAAI,EAAE;IACFiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACD1B,iBAAiB,EAAE;IACfgB,OAAO,EAAE,MAAM;IACfO,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDnB,QAAQ,EAAE;IACNqB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDvB,aAAa,EAAE;IACXuB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD9B,UAAU,EAAE;IACRgC,UAAU,EAAE,MAAM;IAClBN,IAAI,EAAE,KAAK;IACXK,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVZ,KAAK,EAAE,KAAK;IACZK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDnB,SAAS,EAAE;IACP0B,KAAK,EAAE;EACX,CAAC;EACDpC,IAAI,EAAE;IACFuB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdQ,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBK,QAAQ,EAAE;EACd,CAAC;EACDnC,IAAI,EAAE;IACFmB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVU,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACD3B,gBAAgB,EAAE;IACdG,WAAW,EAAE,OAAO;IACpByB,WAAW,EAAE;EACjB;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/feeeeaa4c916b1e6e9efe443be0c32254fd493ed919021dba302750f2a04c017.json b/.expo/web/cache/development/babel-loader/feeeeaa4c916b1e6e9efe443be0c32254fd493ed919021dba302750f2a04c017.json
new file mode 100644
index 0000000000000000000000000000000000000000..fd77cf9ba033f2ad1d27c8cc3568563bea93f731
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/feeeeaa4c916b1e6e9efe443be0c32254fd493ed919021dba302750f2a04c017.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsx(Image, {\n      style: styles.chip,\n      source: require(\"../assets/chip.png\")\n    }), _jsx(View, {\n      style: styles.serviceContainer,\n      children: _jsx(Service, {\n        cardNumber: props.cardNumberBrut\n      })\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\"\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: \"12%\",\n    left: \"14%\"\n  },\n  topContainer: {\n    borderWidth: 2,\n    borderColor: 'white',\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: ''\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"25%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'black'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    left: \"12%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: \"14%\",\n    height: \"19%\",\n    borderRadius: 5,\n    left: \"16%\"\n  },\n  serviceContainer: {\n    width: '30%',\n    height: '10%',\n    right: '-79%'\n  }\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","height","transform","translateY","marginBottom","display","flexDirection","justifyContent","marginTop","left","topContainer","borderWidth","borderRadius","padding","color","fontSize","fontWeight","position","right"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <Image style={styles.chip} source={require('../assets/chip.png')} />\n            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\"\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        marginTop: \"12%\",\n        left: \"14%\"\n    },\n    topContainer: {\n        borderWidth: 2,\n        borderColor: 'white',\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: ''\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"25%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    textStyle: {\n        color: 'black',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        left: \"12%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: \"14%\",\n        height: \"19%\",\n        borderRadius: 5,\n        left: \"16%\"\n    },\n    serviceContainer: {\n        width: '30%',\n        height: '10%',\n        right: '-79%',\n    }\n});"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/.expo/web/cache/development/babel-loader/ff548a87676d27eb2fbada132166af0006650615ac2f22e5b70aa51900a78c67.json b/.expo/web/cache/development/babel-loader/ff548a87676d27eb2fbada132166af0006650615ac2f22e5b70aa51900a78c67.json
new file mode 100644
index 0000000000000000000000000000000000000000..bb846be4f70c538b44d0bc68e2ca8023af75d7e3
--- /dev/null
+++ b/.expo/web/cache/development/babel-loader/ff548a87676d27eb2fbada132166af0006650615ac2f22e5b70aa51900a78c67.json
@@ -0,0 +1 @@
+{"ast":null,"code":"import React, { useState } from 'react';\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport Image from \"react-native-web/dist/exports/Image\";\nimport Text from \"react-native-web/dist/exports/Text\";\nimport Service from \"./Service\";\nimport { AnimatedCharacter } from \"./AnimatedCharacter\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Card(props) {\n  var renderAnimatedText = function renderAnimatedText(text, style) {\n    text += \"##########################\";\n    var str = text.substring(0, 16);\n    var amex = false;\n    var formattedInput;\n    if (str.substring(0, 2) == '34' || str.substring(0, 2) == '37') {\n      amex = true;\n      str = str.substring(0, 15);\n    }\n    if (amex) {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n    } else {\n      formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n    }\n    console.log(formattedInput);\n    if (formattedInput == \"\") formattedInput = \"#### #### #### ####\";\n    return formattedInput.split('').map(function (char, index) {\n      return _jsx(AnimatedCharacter, {\n        character: char,\n        style: style\n      }, `${char}-${index}`);\n    });\n  };\n  return _jsxs(View, {\n    style: styles.main,\n    children: [_jsx(Image, {\n      style: styles.card,\n      source: require(\"../assets/card.jpeg\")\n    }), _jsxs(View, {\n      style: styles.topContainer,\n      children: [_jsx(Image, {\n        style: styles.chip,\n        source: require(\"../assets/chip.png\")\n      }), _jsx(View, {\n        style: styles.serviceContainer,\n        children: _jsx(Service, {\n          cardNumber: props.cardNumberBrut\n        })\n      })]\n    }), _jsx(View, {\n      style: [styles.cardNumber, {\n        borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"\n      }],\n      children: renderAnimatedText(props.cardNumberBrut, styles.textStyle)\n    }), _jsxs(View, {\n      style: styles.bottomContainer,\n      children: [_jsxs(View, {\n        style: [styles.cardNameContainer, {\n          borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.cardNameTitle,\n          children: \"Card Holder\"\n        }), _jsx(Text, {\n          style: styles.cardName,\n          children: props.cardName\n        })]\n      }), _jsxs(View, {\n        style: [styles.dateContainer, {\n          borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'\n        }],\n        children: [_jsx(Text, {\n          style: styles.dateTitle,\n          children: \"Expires\"\n        }), _jsxs(Text, {\n          style: styles.date,\n          children: [props.month, \" / \", props.year]\n        })]\n      })]\n    })]\n  });\n}\nvar styles = StyleSheet.create({\n  main: {\n    width: \"80%\",\n    left: \"12%\",\n    height: \"35%\",\n    transform: [{\n      translateY: \"-50%\"\n    }],\n    marginBottom: \"-15%\",\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  bottomContainer: {\n    width: \"96%\",\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    borderWidth: 3,\n    borderColor: 'black',\n    left: \"2%\",\n    position: 'absolute'\n  },\n  topContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    padding: 10,\n    borderWidth: 3,\n    borderColor: 'black'\n  },\n  dateContainer: {\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 3\n  },\n  dateTitle: {\n    color: '#EFEFEF',\n    fontSize: 12\n  },\n  date: {\n    color: 'white',\n    fontWeight: 'bold'\n  },\n  cardNameContainer: {\n    display: 'flex',\n    padding: 3,\n    borderWidth: 2,\n    borderRadius: 3\n  },\n  cardName: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 13\n  },\n  cardNameTitle: {\n    fontSize: 12,\n    color: '#EFEFEF'\n  },\n  cardNumber: {\n    fontWeight: 'bold',\n    left: \"3%\",\n    fontSize: 15,\n    borderWidth: 2,\n    borderRadius: 3,\n    padding: 6,\n    marginTop: 10,\n    width: \"80%\",\n    display: 'flex',\n    flexDirection: 'row'\n  },\n  textStyle: {\n    color: 'white'\n  },\n  card: {\n    width: \"100%\",\n    height: \"100%\",\n    borderRadius: 11,\n    position: 'absolute'\n  },\n  chip: {\n    width: 50,\n    height: 40,\n    borderRadius: 5\n  },\n  serviceContainer: {}\n});","map":{"version":3,"names":["React","useState","StyleSheet","View","Image","Text","Service","AnimatedCharacter","jsx","_jsx","jsxs","_jsxs","Card","props","renderAnimatedText","text","style","str","substring","amex","formattedInput","replace","console","log","split","map","char","index","character","styles","main","children","card","source","require","topContainer","chip","serviceContainer","cardNumber","cardNumberBrut","borderColor","cardNumberFocused","textStyle","bottomContainer","cardNameContainer","cardNameFocused","cardNameTitle","cardName","dateContainer","dateFocused","dateTitle","date","month","year","create","width","left","height","transform","translateY","marginBottom","borderWidth","display","flexDirection","justifyContent","position","padding","borderRadius","color","fontSize","fontWeight","marginTop"],"sources":["/Users/alex/Desktop/Cours/InteractionProgramming/Lab2-TDDC73/Components/Card.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleSheet, View, Image, Text} from 'react-native';\nimport Service from './Service';\nimport { AnimatedCharacter } from './AnimatedCharacter';\n\nexport default function Card(props) {\n\n    const renderAnimatedText = (text, style) => {\n        text += \"##########################\";\n        let str = text.substring(0, 16);\n        let amex = false;\n        let formattedInput;\n        if(str.substring(0,2) == '34' || str.substring(0,2) == '37') {\n            amex = true;\n            str = str.substring(0, 15);\n        }\n        if(amex) {\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{0,6})([\\s\\S]{0,5})/, '$1 $2 $3');\n        }else{\n            formattedInput = str.replace(/([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})([\\s\\S]{4})/, '$1 $2 $3 $4');\n        }\n        console.log(formattedInput)\n        if(formattedInput == \"\") formattedInput = \"#### #### #### ####\"\n        return formattedInput.split('').map((char, index) => (\n            <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />\n        ));\n    };\n\n    return (\n        <View style={styles.main}>\n            <Image style={styles.card} source={require('../assets/card.jpeg')} />\n            <View style={styles.topContainer}>\n                <Image style={styles.chip} source={require('../assets/chip.png')} />\n                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>\n            </View>\n            \n            <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? \"#FFF\" : \"#FFFFFF00\"}]}>\n                {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}\n            </View>\n            <View style={styles.bottomContainer}>\n                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.cardNameTitle}>\n                        Card Holder\n                    </Text>\n                    <Text style={styles.cardName}>\n                        {props.cardName}\n                    </Text>\n                </View>\n                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>\n                    <Text style={styles.dateTitle}>Expires</Text>\n                    <Text style={styles.date}>{props.month} / {props.year}</Text>\n                </View>\n            </View>\n            \n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    main: {\n        width: \"80%\",\n        left: \"12%\",\n        height: \"35%\",\n        transform: [{translateY: \"-50%\"}],\n        marginBottom: \"-15%\",\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    bottomContainer: {\n        width: \"96%\",\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        borderWidth: 3,\n        borderColor: 'black',\n        left: \"2%\",\n        position: 'absolute'\n    },\n    topContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        padding: 10,\n        borderWidth: 3,\n        borderColor: 'black'\n    },\n    dateContainer: {\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 3\n    },\n    dateTitle: {\n        color: '#EFEFEF',\n        fontSize: 12\n    },\n    date: {\n        color: 'white',\n        fontWeight: 'bold'\n    },\n    cardNameContainer: {\n        display: 'flex',\n        padding: 3,\n        borderWidth: 2,\n        borderRadius: 3,\n    },\n    cardName: {\n        color: 'white',\n        fontWeight: 'bold',\n        fontSize: 13\n    },\n    cardNameTitle: {\n        fontSize: 12,\n        color: '#EFEFEF'\n    },\n    cardNumber: {\n        fontWeight: 'bold',\n        left: \"3%\",\n        fontSize: 15,\n        borderWidth: 2,\n        borderRadius: 3,\n        padding: 6,\n        marginTop: 10,\n        width: \"80%\",\n        display: 'flex',\n        flexDirection: 'row',\n    },\n    textStyle: {\n        color: 'white',\n    },\n    card: {\n        width: \"100%\",\n        height: \"100%\",\n        borderRadius: 11,\n        position: 'absolute'\n    },\n    chip: {\n        width: 50,\n        height: 40,\n        borderRadius: 5,\n    },\n    serviceContainer: {\n    }\n});"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAAC,OAAAC,UAAA;AAAA,OAAAC,IAAA;AAAA,OAAAC,KAAA;AAAA,OAAAC,IAAA;AAExC,OAAOC,OAAO;AACd,SAASC,iBAAiB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAExD,eAAe,SAASC,IAAIA,CAACC,KAAK,EAAE;EAEhC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,IAAI,EAAEC,KAAK,EAAK;IACxCD,IAAI,IAAI,4BAA4B;IACpC,IAAIE,GAAG,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/B,IAAIC,IAAI,GAAG,KAAK;IAChB,IAAIC,cAAc;IAClB,IAAGH,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,IAAID,GAAG,CAACC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,IAAI,EAAE;MACzDC,IAAI,GAAG,IAAI;MACXF,GAAG,GAAGA,GAAG,CAACC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC9B;IACA,IAAGC,IAAI,EAAE;MACLC,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IACrF,CAAC,MAAI;MACDD,cAAc,GAAGH,GAAG,CAACI,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IAC/F;IACAC,OAAO,CAACC,GAAG,CAACH,cAAc,CAAC;IAC3B,IAAGA,cAAc,IAAI,EAAE,EAAEA,cAAc,GAAG,qBAAqB;IAC/D,OAAOA,cAAc,CAACI,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAC5ClB,IAAA,CAACF,iBAAiB;QAA0BqB,SAAS,EAAEF,IAAK;QAACV,KAAK,EAAEA;MAAM,GAAjD,GAAEU,IAAK,IAAGC,KAAM,EAAmC,CAAC;IAAA,CAChF,CAAC;EACN,CAAC;EAED,OACIhB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEa,MAAM,CAACC,IAAK;IAAAC,QAAA,GACrBtB,IAAA,CAACL,KAAK;MAACY,KAAK,EAAEa,MAAM,CAACG,IAAK;MAACC,MAAM,EAAEC,OAAO,sBAAsB;IAAE,CAAE,CAAC,EACrEvB,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACM,YAAa;MAAAJ,QAAA,GAC7BtB,IAAA,CAACL,KAAK;QAACY,KAAK,EAAEa,MAAM,CAACO,IAAK;QAACH,MAAM,EAAEC,OAAO,qBAAqB;MAAE,CAAE,CAAC,EACpEzB,IAAA,CAACN,IAAI;QAACa,KAAK,EAAEa,MAAM,CAACQ,gBAAiB;QAAAN,QAAA,EAACtB,IAAA,CAACH,OAAO;UAACgC,UAAU,EAAEzB,KAAK,CAAC0B;QAAe,CAAE;MAAC,CAAM,CAAC;IAAA,CACxF,CAAC,EAEP9B,IAAA,CAACN,IAAI;MAACa,KAAK,EAAE,CAACa,MAAM,CAACS,UAAU,EAAE;QAACE,WAAW,EAAE3B,KAAK,CAAC4B,iBAAiB,GAAG,MAAM,GAAG;MAAW,CAAC,CAAE;MAAAV,QAAA,EAC3FjB,kBAAkB,CAACD,KAAK,CAAC0B,cAAc,EAAEV,MAAM,CAACa,SAAS;IAAC,CACzD,CAAC,EACP/B,KAAA,CAACR,IAAI;MAACa,KAAK,EAAEa,MAAM,CAACc,eAAgB;MAAAZ,QAAA,GAChCpB,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACe,iBAAiB,EAAE;UAACJ,WAAW,EAAE3B,KAAK,CAACgC,eAAe,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAd,QAAA,GACpGtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACiB,aAAc;UAAAf,QAAA,EAAC;QAEnC,CAAM,CAAC,EACPtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACkB,QAAS;UAAAhB,QAAA,EACxBlB,KAAK,CAACkC;QAAQ,CACb,CAAC;MAAA,CACL,CAAC,EACPpC,KAAA,CAACR,IAAI;QAACa,KAAK,EAAE,CAACa,MAAM,CAACmB,aAAa,EAAE;UAACR,WAAW,EAAE3B,KAAK,CAACoC,WAAW,GAAG,SAAS,GAAG;QAAW,CAAC,CAAE;QAAAlB,QAAA,GAC5FtB,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACqB,SAAU;UAAAnB,QAAA,EAAC;QAAO,CAAM,CAAC,EAC7CpB,KAAA,CAACN,IAAI;UAACW,KAAK,EAAEa,MAAM,CAACsB,IAAK;UAAApB,QAAA,GAAElB,KAAK,CAACuC,KAAK,EAAC,KAAG,EAACvC,KAAK,CAACwC,IAAI;QAAA,CAAO,CAAC;MAAA,CAC3D,CAAC;IAAA,CACL,CAAC;EAAA,CAEL,CAAC;AAEf;AAEA,IAAMxB,MAAM,GAAG3B,UAAU,CAACoD,MAAM,CAAC;EAC7BxB,IAAI,EAAE;IACFyB,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE,KAAK;IACXC,MAAM,EAAE,KAAK;IACbC,SAAS,EAAE,CAAC;MAACC,UAAU,EAAE;IAAM,CAAC,CAAC;IACjCC,YAAY,EAAE,MAAM;IACpBC,WAAW,EAAE,CAAC;IACdrB,WAAW,EAAE;EACjB,CAAC;EACDG,eAAe,EAAE;IACbY,KAAK,EAAE,KAAK;IACZO,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BH,WAAW,EAAE,CAAC;IACdrB,WAAW,EAAE,OAAO;IACpBgB,IAAI,EAAE,IAAI;IACVS,QAAQ,EAAE;EACd,CAAC;EACD9B,YAAY,EAAE;IACV2B,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BE,OAAO,EAAE,EAAE;IACXL,WAAW,EAAE,CAAC;IACdrB,WAAW,EAAE;EACjB,CAAC;EACDQ,aAAa,EAAE;IACXa,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE;EACb,CAAC;EACDhB,SAAS,EAAE;IACPkB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDlB,IAAI,EAAE;IACFiB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACD1B,iBAAiB,EAAE;IACfkB,OAAO,EAAE,MAAM;IACfI,OAAO,EAAE,CAAC;IACVL,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE;EAClB,CAAC;EACDpB,QAAQ,EAAE;IACNqB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDvB,aAAa,EAAE;IACXuB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD9B,UAAU,EAAE;IACRgC,UAAU,EAAE,MAAM;IAClBd,IAAI,EAAE,IAAI;IACVa,QAAQ,EAAE,EAAE;IACZR,WAAW,EAAE,CAAC;IACdM,YAAY,EAAE,CAAC;IACfD,OAAO,EAAE,CAAC;IACVK,SAAS,EAAE,EAAE;IACbhB,KAAK,EAAE,KAAK;IACZO,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDrB,SAAS,EAAE;IACP0B,KAAK,EAAE;EACX,CAAC;EACDpC,IAAI,EAAE;IACFuB,KAAK,EAAE,MAAM;IACbE,MAAM,EAAE,MAAM;IACdU,YAAY,EAAE,EAAE;IAChBF,QAAQ,EAAE;EACd,CAAC;EACD7B,IAAI,EAAE;IACFmB,KAAK,EAAE,EAAE;IACTE,MAAM,EAAE,EAAE;IACVU,YAAY,EAAE;EAClB,CAAC;EACD9B,gBAAgB,EAAE,CAClB;AACJ,CAAC,CAAC"},"metadata":{},"sourceType":"module","externalDependencies":[]}
\ No newline at end of file
diff --git a/Components/Card.js b/Components/Card.js
index 4cecc5a3cb8093df6dac3e80076463e00a5e97bd..94e774ec07df49212f4a524dbf0c176bbdffe5f6 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -19,7 +19,6 @@ export default function Card(props) {
         }else{
             formattedInput = str.replace(/([\s\S]{4})([\s\S]{4})([\s\S]{4})([\s\S]{4})/, '$1 $2 $3 $4');
         }
-        console.log(formattedInput)
         if(formattedInput == "") formattedInput = "#### #### #### ####"
         return formattedInput.split('').map((char, index) => (
             <AnimatedCharacter key={`${char}-${index}`} character={char} style={style} />
@@ -29,23 +28,29 @@ export default function Card(props) {
     return (
         <View style={styles.main}>
             <Image style={styles.card} source={require('../assets/card.jpeg')} />
-            <Image style={styles.chip} source={require('../assets/chip.png')} />
-            <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>
+            <View style={styles.topContainer}>
+                <Image style={styles.chip} source={require('../assets/chip.png')} />
+                <View style={styles.serviceContainer}><Service cardNumber={props.cardNumberBrut} /></View>
+            </View>
+            
             <View style={[styles.cardNumber, {borderColor: props.cardNumberFocused ? "#FFF" : "#FFFFFF00"}]}>
                 {renderAnimatedText(props.cardNumberBrut, styles.textStyle)}
             </View>
-            <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>
-                <Text style={styles.cardNameTitle}>
-                    Card Holder
-                </Text>
-                <Text style={styles.cardName}>
-                    {props.cardName}
-                </Text>
-            </View>
-            <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>
-                <Text style={styles.dateTitle}>Expires</Text>
-                <Text style={styles.date}>{props.month} / {props.year}</Text>
+            <View style={styles.bottomContainer}>
+                <View style={[styles.cardNameContainer, {borderColor: props.cardNameFocused ? '#FFFFFF' : '#00000000'}]}>
+                    <Text style={styles.cardNameTitle}>
+                        Card Holder
+                    </Text>
+                    <Text style={styles.cardName}>
+                        {props.cardName}
+                    </Text>
+                </View>
+                <View style={[styles.dateContainer, {borderColor: props.dateFocused ? '#FFFFFF' : '#00000000'}]}>
+                    <Text style={styles.dateTitle}>Expires</Text>
+                    <Text style={styles.date}>{props.month} / {props.year}</Text>
+                </View>
             </View>
+            
         </View>
     )
 }
@@ -53,16 +58,29 @@ export default function Card(props) {
 const styles = StyleSheet.create({
     main: {
         width: "80%",
+        left: "12%",
         height: "35%",
-        marginBottom: "-15%"
+        transform: [{translateY: "-50%"}],
+        marginBottom: "-15%",
+    },
+    bottomContainer: {
+        width: "96%",
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        left: "2%",
+        position: 'absolute',
+        bottom: 2
+    },
+    topContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding: 10,
     },
     dateContainer: {
-        position: 'relative',
-        top: "-158%",
-        left: "86%",
         borderWidth: 2,
         borderRadius: 3,
-        width: "24%",
         padding: 3
     },
     dateTitle: {
@@ -75,9 +93,6 @@ const styles = StyleSheet.create({
     },
     cardNameContainer: {
         display: 'flex',
-        top: "-132%",
-        left: "16%",
-        width: "70%",
         padding: 3,
         borderWidth: 2,
         borderRadius: 3,
@@ -93,41 +108,29 @@ const styles = StyleSheet.create({
     },
     cardNumber: {
         fontWeight: 'bold',
-        position: 'relative',
-        top: "-82%",
-        left: "25%",
+        left: "3%",
         fontSize: 15,
         borderWidth: 2,
         borderRadius: 3,
         padding: 6,
         width: "80%",
         display: 'flex',
-        flexDirection: 'row'
+        flexDirection: 'row',
     },
     textStyle: {
         color: 'white',
     },
     card: {
-        position: 'relative',
         width: "100%",
         height: "100%",
-        top: "-50%",
-        left: "12%",
-        borderRadius: 11
+        borderRadius: 11,
+        position: 'absolute'
     },
     chip: {
-        position: 'relative',
-        width: "14%",
-        height: "19%",
+        width: 50,
+        height: 40,
         borderRadius: 5,
-        top: "-143%",
-        left: "16%"
     },
     serviceContainer: {
-        position: 'relative',
-        width: '30%',
-        height: '10%',
-        top: '-159%',
-        right: '-79%',
     }
 });
\ No newline at end of file
diff --git a/Components/Form.js b/Components/Form.js
index dad7065d6cc99787088643fd0d2debb50c627de0..6de8dcfdf3d2ec97a9730aa3333c4e48d652c925 100644
--- a/Components/Form.js
+++ b/Components/Form.js
@@ -19,9 +19,16 @@ export default function Form(props) {
     const computeCardNumberForTextInput = (str) => {
         let digitsOnly = str.replace(/\D/g, '');
         let input_text = digitsOnly;
-        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';       
+        let amex = digitsOnly.substring(0,2) == '34' || digitsOnly.substring(0,2) == '37';
+        let formattedInput = input_text + "##################################";
+        formattedInput = formattedInput.substring(0, amex ? 15 : 16);
+        if(amex) {
+            formattedInput = formattedInput.replace(/([\s\S]{4})([\s\S]{0,6})([\s\S]{0,5})/, '$1 $2 $3');
+        }else{
+            formattedInput = formattedInput.replace(/([\s\S]{4})([\s\S]{4})([\s\S]{4})([\s\S]{4})/, '$1 $2 $3 $4');
+        }
         setCardNumberBrut(digitsOnly);
-        return input_text.substring(0, amex ? 15 : 16);
+        return formattedInput.replace(/[^0-9\s]/g, '').trim();
     }
 
     const computeCardName = (str) => {
@@ -58,7 +65,7 @@ export default function Form(props) {
             {CVVFocused ? 
             <BackCard cardNumber={cardNumberBrut} CVV={CVV}/>
             :
-            <Card cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />
+            <Card style={styles.card} cardNumberBrut={cardNumberBrut} dateFocused={dateFocused} month={month} year={year} cardNumberFocused={cardNumberFocused} cardNameFocused={cardNameFocused} cardName={cardName} />
             }
             <LabelledInput width="84%" marginLeft="8%" onFocus={() => {setCardNumberFocused(true); setDateFocused(false)}} onBlur={() => {setCardNumberFocused(false)}} computeText={computeCardNumberForTextInput} text='Card Number' placeholder='XXXX-XXXX-XXXX-XXXX'/>
             <LabelledInput width="84%" marginLeft="8%" onFocus={() => {setCardNameFocused(true); setDateFocused(false)}} onBlur={() => {setCardNameFocused(false)}} computeText={computeCardName} text='Card Name' placeholder='Jacques Chirac'/>
@@ -88,8 +95,7 @@ const styles = StyleSheet.create({
         display: 'flex',
         flexDirection: 'row',
         width: "80%",
-        marginLeft: "10%",
-        marginBottom: "-20%"
+        marginLeft: "10%"
     },
     submitButton: {
         padding: 10,
@@ -101,5 +107,8 @@ const styles = StyleSheet.create({
     submitButtonText: {
         color: "white",
         textAlign: 'center'
+    },
+    card: {
+        
     }
 });
\ No newline at end of file
diff --git a/Components/Service.js b/Components/Service.js
index f72e77f7959c26268f7e49b9f86c1428a876f43a..2ef7307ff83218fc4b4e72491ebbbd809085a766 100644
--- a/Components/Service.js
+++ b/Components/Service.js
@@ -54,7 +54,7 @@ export default function Service({ cardNumber }) {
 const styles = StyleSheet.create({
   main: {
     flex: 1,
-    width: null,
+    width: 50,
     height: null,
     resizeMode: 'contain'
   },
diff --git a/node_modules/.cache/web/web-development/0.pack b/node_modules/.cache/web/web-development/0.pack
index da16c4414f0cee8d9f8a21b64df8f7ebaacbcf72..3aa6ee6f390007e587bc97a084a7da5a12442044 100644
Binary files a/node_modules/.cache/web/web-development/0.pack and b/node_modules/.cache/web/web-development/0.pack differ
diff --git a/node_modules/.cache/web/web-development/1.pack b/node_modules/.cache/web/web-development/1.pack
index 0bc86995f4dfb637f2bcb1249415bf129b1c648d..a4b0ce5368d47d6ff13f559b03559ea0ad4c6fc2 100644
Binary files a/node_modules/.cache/web/web-development/1.pack and b/node_modules/.cache/web/web-development/1.pack differ
diff --git a/node_modules/.cache/web/web-development/10.pack b/node_modules/.cache/web/web-development/10.pack
new file mode 100644
index 0000000000000000000000000000000000000000..9a422d23f1db9cf32e8dbe610094cad3d098b53c
Binary files /dev/null and b/node_modules/.cache/web/web-development/10.pack differ
diff --git a/node_modules/.cache/web/web-development/11.pack b/node_modules/.cache/web/web-development/11.pack
new file mode 100644
index 0000000000000000000000000000000000000000..af7a8eee6c6af6edbb4eafe44e3a8bed3b939a90
Binary files /dev/null and b/node_modules/.cache/web/web-development/11.pack differ
diff --git a/node_modules/.cache/web/web-development/2.pack b/node_modules/.cache/web/web-development/2.pack
index 9074b5c89a121c014d6106f35da673f4362ee30f..8b36f26773c6351db457688bf8e37a1028da81b9 100644
Binary files a/node_modules/.cache/web/web-development/2.pack and b/node_modules/.cache/web/web-development/2.pack differ
diff --git a/node_modules/.cache/web/web-development/3.pack b/node_modules/.cache/web/web-development/3.pack
index a824ab8ee9c01baf707ef04e44eb1a9890d88a1e..0be69ffbf81fa6d69f06f9b9f8a3b97c87977e38 100644
Binary files a/node_modules/.cache/web/web-development/3.pack and b/node_modules/.cache/web/web-development/3.pack differ
diff --git a/node_modules/.cache/web/web-development/4.pack b/node_modules/.cache/web/web-development/4.pack
index 7967f6b7c2aba82fd4baedcc61b595268b1d8f76..6f18a179f8b832c0aa241f429ce4ffc5fbab5bb7 100644
Binary files a/node_modules/.cache/web/web-development/4.pack and b/node_modules/.cache/web/web-development/4.pack differ
diff --git a/node_modules/.cache/web/web-development/5.pack b/node_modules/.cache/web/web-development/5.pack
index 88ac3bdf6d3f0202cd8bffef34394a1e5db01d50..34a454451373da6f885a6c3226d3ef279cc2505c 100644
Binary files a/node_modules/.cache/web/web-development/5.pack and b/node_modules/.cache/web/web-development/5.pack differ
diff --git a/node_modules/.cache/web/web-development/6.pack b/node_modules/.cache/web/web-development/6.pack
new file mode 100644
index 0000000000000000000000000000000000000000..a72de8f9123ddd44b4073214abce56990082cd66
Binary files /dev/null and b/node_modules/.cache/web/web-development/6.pack differ
diff --git a/node_modules/.cache/web/web-development/7.pack b/node_modules/.cache/web/web-development/7.pack
new file mode 100644
index 0000000000000000000000000000000000000000..734ed9ce7759ea1db08074b1a3204b3214babfea
Binary files /dev/null and b/node_modules/.cache/web/web-development/7.pack differ
diff --git a/node_modules/.cache/web/web-development/8.pack b/node_modules/.cache/web/web-development/8.pack
new file mode 100644
index 0000000000000000000000000000000000000000..6517328053693982fd834736cc07cc1d8a333fac
Binary files /dev/null and b/node_modules/.cache/web/web-development/8.pack differ
diff --git a/node_modules/.cache/web/web-development/9.pack b/node_modules/.cache/web/web-development/9.pack
new file mode 100644
index 0000000000000000000000000000000000000000..fa4ee7b691dc8f85062c75c319ff17f95c2d9724
Binary files /dev/null and b/node_modules/.cache/web/web-development/9.pack differ
diff --git a/node_modules/.cache/web/web-development/index.pack b/node_modules/.cache/web/web-development/index.pack
index 1e1504b1ae19539828862fbe71a5b04fd467b3ed..8efd8214efb4efde2ebc8d141d8d50773fa31bf0 100644
Binary files a/node_modules/.cache/web/web-development/index.pack and b/node_modules/.cache/web/web-development/index.pack differ
diff --git a/node_modules/.cache/web/web-development/index.pack.old b/node_modules/.cache/web/web-development/index.pack.old
index 021cd4f5ebf14162ec4ef29dda4c99f21a937e63..43d793d48941ea455fbbb17a220f44c7cee5da24 100644
Binary files a/node_modules/.cache/web/web-development/index.pack.old and b/node_modules/.cache/web/web-development/index.pack.old differ