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":"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"},"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":";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;IAClB,IAAGF,IAAI,EAAE;MACLE,cAAc,GAAGH,UAAU,CAACD,OAAO,CAAC,uCAAuC,EAAE,UAAU,CAAC;IAC5F,CAAC,MAAI;MACDI,cAAc,GAAGH,UAAU,CAACD,OAAO,CAAC,8CAA8C,EAAE,aAAa,CAAC;IACtG;IACApC,iBAAiB,CAACmC,UAAU,CAAC;IAC7B,OAAOK,cAAc,CAACD,SAAS,CAAC,CAAC,EAAED,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;EACtD,CAAC;EAED,IAAMG,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/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":"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"},"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":"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"},"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":"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"},"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":"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"},"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":"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;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;EACD1B,UAAU,EAAE;IACR4B,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;EACD1B,SAAS,EAAE;IACPsB,KAAK,EAAE;EACX,CAAC;EACD/B,IAAI,EAAE;IACFsB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdI,IAAI,EAAE,KAAK;IACXE,YAAY,EAAE,EAAE;IAChBO,QAAQ,EAAE;EACd,CAAC;EACDjC,IAAI,EAAE;IACFmB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbM,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACDvB,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/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":"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"},"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":";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,CAEN;AACJ,CAAC,CAAC"},"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":"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;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;EACDC,YAAY,EAAE;IACVC,WAAW,EAAE,CAAC;IACd1B,WAAW,EAAE,OAAO;IACpBoB,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BE,IAAI,EAAE;EACV,CAAC;EACDhB,aAAa,EAAE;IACXkB,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE;EACb,CAAC;EACDlB,SAAS,EAAE;IACPmB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDnB,IAAI,EAAE;IACFkB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACD3B,iBAAiB,EAAE;IACfgB,OAAO,EAAE,MAAM;IACfQ,OAAO,EAAE,CAAC;IACVF,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE;EAClB,CAAC;EACDpB,QAAQ,EAAE;IACNsB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDxB,aAAa,EAAE;IACXwB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD/B,UAAU,EAAE;IACRiC,UAAU,EAAE,MAAM;IAClBP,IAAI,EAAE,KAAK;IACXM,QAAQ,EAAE,EAAE;IACZJ,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVb,KAAK,EAAE,KAAK;IACZK,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDnB,SAAS,EAAE;IACP2B,KAAK,EAAE;EACX,CAAC;EACDpC,IAAI,EAAE;IACFsB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdQ,IAAI,EAAE,KAAK;IACXG,YAAY,EAAE,EAAE;IAChBK,QAAQ,EAAE;EACd,CAAC;EACDpC,IAAI,EAAE;IACFmB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbW,YAAY,EAAE,CAAC;IACfH,IAAI,EAAE;EACV,CAAC;EACD3B,gBAAgB,EAAE;IACdkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbiB,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/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":"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;IACpBO,WAAW,EAAE,CAAC;IACdtB,WAAW,EAAE,OAAO;IACpBiB,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/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":"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"},"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":"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"},"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":"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;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/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":";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;IACtE,IAAGC,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;IACAK,OAAO,CAACC,GAAG,CAACF,cAAc,CAAC;IAC3BxC,iBAAiB,CAACmC,UAAU,CAAC;IAC7B,OAAOK,cAAc;EACzB,CAAC;EAED,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIT,GAAG,EAAK;IAC7B,IAAIU,IAAI,GAAGV,GAAG,CAACK,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC;IAC/BK,IAAI,GAAGA,IAAI,CAACR,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC;IACrC5B,WAAW,CAACoC,IAAI,CAAC;IACjB,OAAOA,IAAI;EACf,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIX,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,IAAMO,WAAW,GAAG,SAAdA,WAAWA,CAAIZ,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,IAAMe,UAAU,GAAG,SAAbA,UAAUA,CAAIb,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;IAACkE,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,GACpBpB,UAAU,GACXxC,IAAA,CAACF,QAAQ;MAAC+D,UAAU,EAAErD,cAAe;MAAC4B,GAAG,EAAEA;IAAI,CAAC,CAAC,GAEjDpC,IAAA,CAACJ,IAAI;MAAC6D,KAAK,EAAEC,MAAM,CAACI,IAAK;MAACtD,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;MAACoE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAACpD,oBAAoB,CAAC,IAAI,CAAC;QAAEoB,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAACiC,MAAM,EAAE,SAAAA,OAAA,EAAM;QAACrD,oBAAoB,CAAC,KAAK,CAAC;MAAA,CAAE;MAACsD,WAAW,EAAEzB,6BAA8B;MAAC0B,IAAI,EAAC,aAAa;MAACC,WAAW,EAAC;IAAqB,CAAC,CAAC,EAC9PrE,IAAA,CAACL,aAAa;MAACoE,KAAK,EAAC,KAAK;MAACC,UAAU,EAAC,IAAI;MAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;QAAC5C,kBAAkB,CAAC,IAAI,CAAC;QAAEY,cAAc,CAAC,KAAK,CAAC;MAAA,CAAE;MAACiC,MAAM,EAAE,SAAAA,OAAA,EAAM;QAAC7C,kBAAkB,CAAC,KAAK,CAAC;MAAA,CAAE;MAAC8C,WAAW,EAAEf,eAAgB;MAACgB,IAAI,EAAC,WAAW;MAACC,WAAW,EAAC;IAAgB,CAAC,CAAC,EACrOnE,KAAA,CAACX,IAAI;MAACkE,KAAK,EAAEC,MAAM,CAACY,UAAW;MAAAV,QAAA,GAC3B5D,IAAA,CAACH,UAAU;QAAC0D,WAAW,EAAEA,WAAY;QAACC,UAAU,EAAEA;MAAW,CAAC,CAAC,EAC/DxD,IAAA,CAACL,aAAa;QAACoE,KAAK,EAAC,KAAK;QAACC,UAAU,EAAC,IAAI;QAACC,OAAO,EAAE,SAAAA,QAAA,EAAM;UAACxB,aAAa,CAAC,IAAI,CAAC,EAAER,cAAc,CAAC,KAAK,CAAC;QAAA,CAAE;QAACiC,MAAM,EAAE,SAAAA,OAAA,EAAM;UAACzB,aAAa,CAAC,KAAK,CAAC;QAAA,CAAE;QAAC0B,WAAW,EAAEb,UAAW;QAACc,IAAI,EAAC,KAAK;QAACC,WAAW,EAAC;MAAK,CAAC,CAAC;IAAA,CACnM,CAAC,EACPrE,IAAA,CAACP,gBAAgB;MAACgE,KAAK,EAAEC,MAAM,CAACa,YAAa;MAAAX,QAAA,EACzC5D,IAAA,CAACN,IAAI;QAAC+D,KAAK,EAAEC,MAAM,CAACc,gBAAiB;QAAAZ,QAAA,EAAC;MAAM,CAAM;IAAC,CACrC,CAAC;EAAA,CACjB,CAAC;AAEf;AAEA,IAAMF,MAAM,GAAGpE,UAAU,CAACmF,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/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":"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"},"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":"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"},"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":"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"},"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":"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"},"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":"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,aAAa,EAAE,KAAK;IACpBC,SAAS,EAAE,KAAK;IAChBC,IAAI,EAAE;EACV,CAAC;EACDhB,aAAa,EAAE;IACXY,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE;EACb,CAAC;EACDhB,SAAS,EAAE;IACPiB,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACd,CAAC;EACDjB,IAAI,EAAE;IACFgB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE;EAChB,CAAC;EACDzB,iBAAiB,EAAE;IACfiB,OAAO,EAAE,MAAM;IACfK,OAAO,EAAE,CAAC;IACVN,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE;EAClB,CAAC;EACDlB,QAAQ,EAAE;IACNoB,KAAK,EAAE,OAAO;IACdE,UAAU,EAAE,MAAM;IAClBD,QAAQ,EAAE;EACd,CAAC;EACDtB,aAAa,EAAE;IACXsB,QAAQ,EAAE,EAAE;IACZD,KAAK,EAAE;EACX,CAAC;EACD7B,UAAU,EAAE;IACR+B,UAAU,EAAE,MAAM;IAClBL,IAAI,EAAE,KAAK;IACXI,QAAQ,EAAE,EAAE;IACZR,WAAW,EAAE,CAAC;IACdK,YAAY,EAAE,CAAC;IACfC,OAAO,EAAE,CAAC;IACVX,KAAK,EAAE,KAAK;IACZM,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACnB,CAAC;EACDpB,SAAS,EAAE;IACPyB,KAAK,EAAE;EACX,CAAC;EACDlC,IAAI,EAAE;IACFsB,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdQ,IAAI,EAAE,KAAK;IACXC,YAAY,EAAE,EAAE;IAChBK,QAAQ,EAAE;EACd,CAAC;EACDlC,IAAI,EAAE;IACFmB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbS,YAAY,EAAE,CAAC;IACfD,IAAI,EAAE;EACV,CAAC;EACD3B,gBAAgB,EAAE;IACdkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbe,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/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":"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;IACpBO,WAAW,EAAE,CAAC;IACdtB,WAAW,EAAE,OAAO;IACpBiB,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,UAAU;IACpBO,WAAW,EAAE,CAAC;IACdtB,WAAW,EAAE;EACjB,CAAC;EACDQ,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/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":"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,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,eAAe;IAC/BC,SAAS,EAAE,KAAK;IAChBC,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;EACDnC,IAAI,EAAE;IACFsB,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,KAAK;IACZC,MAAM,EAAE,KAAK;IACbU,YAAY,EAAE,CAAC;IACfF,IAAI,EAAE;EACV,CAAC;EACD3B,gBAAgB,EAAE;IACdkB,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,KAAK;IACbgB,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/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":"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;EAClB,CAAC;EACD7B,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/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":";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;IAEjFvC,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,CAEN;AACJ,CAAC,CAAC"},"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":"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"},"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":"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,MAAM;IACXC,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/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":"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"},"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":"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"},"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":"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"},"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":"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"},"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