geil

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

calculator/App.js

@@ -1,17 +1,51 @@
 import { StatusBar } from 'expo-status-bar';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View, Vibration } from 'react-native';
 import Button from './components/Button';
+import { ScrollView } from 'react-native';
 
 export default function App() {
-  return (
-    <View style={styles.container}>
+  const [display, setDisplay] = React.useState("0");
+  const [last, setLast] = React.useState("");
+
 
-      <Text>6,291 / 5</Text>
-      <Text>1,5258.2</Text>
 
-      <View>
-        <Button />
-
+  return (
+    <View style={styles.container}>
+      <View style={[{width: "85%", marginBottom: 30}]}>
+      <Text style={[{color: "rgba(255, 255, 255, 0.6)", fontSize: 40, alignSelf: "flex-end", marginBottom: 20}]}>{last}</Text>
+      <ScrollView style={[{alignSelf: "flex-end" }]} horizontal><Text style={[{color: "#fff", fontSize: 60, alignSelf: "flex-end", height: 70, textAlign: "right"}]} numberOfLines={1}>{display}</Text></ScrollView></View> 
+      <View style={[{ display: "flex", flexDirection: "column", gap: 20 }]}>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t1" text="C" pressHandler={() => setDisplay("")} />
+          <Button type="t1" text="+ / -" pressHandler={() => {display.startsWith("-") ? setDisplay(display.slice(1)) : setDisplay("-" + display)}} />
+          <Button type="t1" text="%" pressHandler={() => setDisplay(display + "%")}/>
+          <Button type="t2" text="/" pressHandler={() => setDisplay(display + "/")} />
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="7" pressHandler={() => setDisplay(display + "7")} />
+          <Button type="t3" text="8" pressHandler={() => setDisplay(display + "8")} />
+          <Button type="t3" text="9" pressHandler={() => setDisplay(display + "9")} />
+          <Button type="t2" text="*" pressHandler={() => setDisplay(display + "*")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="4" pressHandler={() => setDisplay(display + "4")}/>
+          <Button type="t3" text="5" pressHandler={() => setDisplay(display + "5")}/>
+          <Button type="t3" text="6" pressHandler={() => setDisplay(display + "6")}/>
+          <Button type="t2" text="-" pressHandler={() => setDisplay(display + "-")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="1" pressHandler={() => setDisplay(display + "1")}/>
+          <Button type="t3" text="2" pressHandler={() => setDisplay(display + "2")}/>
+          <Button type="t3" text="3" pressHandler={() => setDisplay(display + "3")}/>
+          <Button type="t2" text="+" pressHandler={() => setDisplay(display + "+")}/>
+        </View>
+        <View style={[{ display: "flex", flexDirection: "row", justifyContent: "space-between", width: "85%", alignSelf: "center" }]}>
+          <Button type="t3" text="." pressHandler={() => setDisplay(display + ".")}/>
+          <Button type="t3" text="0" pressHandler={() => setDisplay(display + "0")}/>
+          <Button type="t3" text="back" pressHandler={() => setDisplay(display.substring(0, display.length -1))} />
+          <Button type="t2" text="=" pressHandler={() => {try {setLast(display);setDisplay(eval(display.replace("%", " * 0.01"))) } catch {setDisplay(display)}}} />
+        </View> 
       </View>
     </View>
   );
@@ -20,7 +54,7 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#18171E',
     alignItems: 'center',
     justifyContent: 'center',
   },

calculator/components/Button.js

@@ -1,19 +1,53 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View, Image, Vibration, Platform } from 'react-native';
+import Icon from 'react-native-vector-icons/dist/FontAwesome';
 
-export default function Button({ text, pressHandler }) {
+export default function Button({ text, pressHandler, type }) {
+    const ONE_SECOND_IN_MS = 1000;
 
-    return (
-        <Pressable onPress={() => pressHandler()} style={[styles.button]}><Text style={[styles.text]}>C</Text></Pressable>
-    );
+  const PATTERN = [
+    1 * ONE_SECOND_IN_MS,
+    2 * ONE_SECOND_IN_MS,
+    3 * ONE_SECOND_IN_MS,
+  ];
+
+  const PATTERN_DESC =
+    Platform.OS === 'android'
+      ? 'wait 1s, vibrate 2s, wait 3s'
+      : 'wait 1s, vibrate, wait 2s, vibrate, wait 3s';
+
+
+
+    if (text == "back") {
+        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Image source={require("../assets/delete-left-white.png")} style={[{width: 30, height: 30, color: "#fff"}]} /></Pressable>
+    }
+
+
+    if (type == "t1") {
+        return (
+            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button]}><Text style={[styles.text]}>{text}</Text></Pressable>
+        );
+    }
+
+    if (type == "t2") {
+        return <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#4D5CFB"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+    }
+
+    if (type == "t3") {
+        return (
+            <Pressable onPress={() => {pressHandler();Vibration.vibrate(10 * ONE_SECOND_IN_MS)}} style={[styles.button, {backgroundColor: "#2F2F39"}]}><Text style={[styles.text]}>{text}</Text></Pressable>
+        );
+    }
 }
 
 const styles = StyleSheet.create({
     button: {
-        width: 50, height: 50, padding: 10, backgroundColor: "#4E505F", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", borderRadius: 15
+        width: 75, height: 75, padding: 10, backgroundColor: "#4E505F", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", borderRadius: 20
     },
     text: {
         color: "#fff",
-        display: "flex"
+        display: "flex",
+        fontSize: 25,
+        fontWeight: "600"
     }
 
 });

calculator/package.json

@@ -12,7 +12,8 @@
     "expo": "~50.0.14",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.6"
+    "react-native": "0.73.6",
+    "react-native-vector-icons": "^10.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

tunnel/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

tunnel/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}