koylu-vampir-design 1.0.24 → 1.0.25

package/dist/Alerts/AlertButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertButtons.d.ts","sourceRoot":"","sources":["../../src/Alerts/AlertButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,aAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+BxC,CAAC"}
+{"version":3,"file":"AlertButtons.d.ts","sourceRoot":"","sources":["../../src/Alerts/AlertButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,aAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkCxC,CAAC"}

package/dist/Alerts/AlertButtons.js

@@ -14,19 +14,23 @@ const AlertButtons = ({ options, payload }) => {
         options.onAccept(payload);
     };
     return (react_1.default.createElement(react_native_1.View, { style: styles.buttons },
-        react_1.default.createElement(__1.MenuButton, { style: styles.button, size: "medium", type: options.cancelType || "outline", onPress: options.onClose ? options.onClose : () => closeAlert() }, options.cancelText ? options.cancelText : options.onAccept ? "VAZGEÇ" : "KAPAT"),
+        react_1.default.createElement(__1.MenuButton, { style: styles.button, size: "medium", type: options.cancelType || "outline", onPress: options.onClose ? options.onClose : () => closeAlert() }, options.cancelText
+            ? options.cancelText
+            : options.onAccept
+                ? "VAZGEÇ"
+                : "KAPAT"),
         !!options.onAccept && (react_1.default.createElement(__1.MenuButton, { style: styles.button, size: "medium", type: options.acceptType || "success", onPress: onAcceptPress }, options.acceptText || "UYGULA"))));
 };
 exports.AlertButtons = AlertButtons;
 const styles = react_native_1.StyleSheet.create({
     base: {
-        marginTop: "auto"
+        marginTop: "auto",
     },
     background: {
         position: "relative",
         padding: 32,
         borderTopLeftRadius: 32,
-        borderTopRightRadius: 32
+        borderTopRightRadius: 32,
     },
     message: {
         alignItems: "center",
@@ -34,11 +38,11 @@ const styles = react_native_1.StyleSheet.create({
         width: "100%",
         padding: 0,
         minHeight: 100,
-        marginBottom: 20
+        marginBottom: 20,
     },
     messageText: {
         textAlign: "center",
-        width: "100%"
+        width: "100%",
     },
     buttons: {
         borderColor: "#77777733",
@@ -46,11 +50,12 @@ const styles = react_native_1.StyleSheet.create({
         paddingTop: 20,
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-evenly"
+        justifyContent: "space-evenly",
     },
     button: {
         marginBottom: 0,
-        minWidth: 120
+        minWidth: 120,
+        elevation: 0,
     },
     title: {
         position: "absolute",
@@ -68,17 +73,17 @@ const styles = react_native_1.StyleSheet.create({
         shadowColor: "#000000",
         shadowOffset: {
             width: 2,
-            height: 5
+            height: 5,
         },
         shadowOpacity: 0.25,
         shadowRadius: 0,
-        elevation: 5
+        elevation: 0,
     },
     titleText: {
         color: "#ffffff",
         fontWeight: "bold",
         fontFamily: "Righteous-Regular",
         fontSize: 14,
-        lineHeight: 20
-    }
+        lineHeight: 20,
+    },
 });

package/dist/Buttons/GameButton.js

@@ -59,7 +59,7 @@ const styles = react_native_1.StyleSheet.create({
         },
         shadowOpacity: 0.25,
         shadowRadius: 5,
-        elevation: 5,
+        elevation: 0,
     },
     blue: {
         backgroundColor: "#00B3FF",

package/dist/Buttons/ProfileScoreButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileScoreButton.d.ts","sourceRoot":"","sources":["../../src/Buttons/ProfileScoreButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAc,MAAM,cAAc,CAAC;AAIjE,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsBxD,CAAC"}
+{"version":3,"file":"ProfileScoreButton.d.ts","sourceRoot":"","sources":["../../src/Buttons/ProfileScoreButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAc,MAAM,cAAc,CAAC;AAIjE,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyBxD,CAAC"}

package/dist/Buttons/ProfileScoreButton.js

@@ -24,14 +24,18 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const Themes_1 = require("../Themes");
 const MenuButton_1 = require("./MenuButton");
-const ProfileScoreButton = ({ children, onPress, onLongPress, icon, disabled, color }) => {
+const ProfileScoreButton = ({ children, onPress, onLongPress, icon, disabled, color, }) => {
     const colors = Themes_1.useColors();
     return (React.createElement(MenuButton_1.MenuButton, { type: "outline-success", out: false, style: styles.button, textStyle: { color: color || colors.primaryColor }, size: "medium", onPress: onPress, onLongPress: onLongPress, disabled: disabled, icon: icon }, children));
 };
 exports.ProfileScoreButton = ProfileScoreButton;
 const styles = react_native_1.StyleSheet.create({
-    button: { borderWidth: 0, paddingHorizontal: 16, borderRadius: 16,
+    button: {
+        borderWidth: 0,
+        paddingHorizontal: 16,
+        borderRadius: 16,
         minWidth: 120,
-        backgroundColor: "#88888822"
-    }
+        backgroundColor: "#88888822",
+        elevation: 0,
+    },
 });

package/dist/GameParts/GiftPackBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GiftPackBar.d.ts","sourceRoot":"","sources":["../../src/GameParts/GiftPackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqHvC,CAAC"}
+{"version":3,"file":"GiftPackBar.d.ts","sourceRoot":"","sources":["../../src/GameParts/GiftPackBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsHvC,CAAC"}

package/dist/GameParts/GiftPackBar.js

@@ -29,14 +29,14 @@ const GiftPackBar = ({ title, onSelect, onBuyPress, pack, selected, remain, }) =
                     "Kalan Kullan\u0131m: ",
                     remain))),
             (pack.priceType !== "ad" || loaded) && (react_1.default.createElement(Buttons_1.GiftBuyButton, { onPress: () => onBuyPress(pack) }, buttonText || pack.buttonText))))),
-        react_1.default.createElement(react_native_1.View, { style: [styles.buttonIcons, { opacity: remain == 0 ? 0.6 : 1 }] },
-            !!customGifts.length && (react_1.default.createElement(react_native_1.View, { style: [
-                    styles.buttonIcons,
-                    { opacity: remain == 0 ? 0.6 : 1, marginBottom: 0 },
-                ] }, customGifts.map((item, key) => {
+        react_1.default.createElement(react_native_1.View, { style: [styles.buttonIcons] },
+            !!customGifts.length && (react_1.default.createElement(react_native_1.View, { style: [styles.buttonIcons, { marginBottom: 0 }] }, customGifts.map((item, key) => {
                 let giftElement = react_1.default.createElement(react_native_1.Text, null, item);
                 if (item.indexOf("a") === 0) {
-                    giftElement = (react_1.default.createElement(react_native_1.Image, { style: { width: 30, height: 30 }, accessibilityLabel: item, source: Utils_1.Assets.getSource("gift", item, "icon") }));
+                    giftElement = (react_1.default.createElement(react_native_1.Image, { style: [
+                            { width: 16, height: 16 },
+                            { opacity: remain == 0 ? 0.7 : 1 },
+                        ], accessibilityLabel: item, source: Utils_1.Assets.getSource("gift", item, "icon") }));
                 }
                 return (react_1.default.createElement(Views_1.TouchableView, { out: true, key: key, onPress: () => onSelect(item, pack.id), style: [
                         styles.button,
@@ -46,7 +46,10 @@ const GiftPackBar = ({ title, onSelect, onBuyPress, pack, selected, remain, }) =
             gifts.map((item, key) => {
                 let giftElement = react_1.default.createElement(react_native_1.Text, null, item);
                 if (item.indexOf("a") === 0) {
-                    giftElement = (react_1.default.createElement(react_native_1.Image, { style: { width: 30, height: 30 }, accessibilityLabel: item.toString(), source: Utils_1.Assets.getSource("gift", item, "icon") }));
+                    giftElement = (react_1.default.createElement(react_native_1.Image, { style: [
+                            { width: 16, height: 16 },
+                            { opacity: remain == 0 ? 0.7 : 1 },
+                        ], accessibilityLabel: item.toString(), source: Utils_1.Assets.getSource("gift", item, "icon") }));
                 }
                 return (react_1.default.createElement(Views_1.TouchableView, { out: true, key: key, onPress: () => onSelect(item, pack.id), style: [
                         styles.button,
@@ -76,9 +79,6 @@ const styles = react_native_1.StyleSheet.create({
         lineHeight: 14,
         fontSize: 12,
         color: "#ffffff",
-        textShadowColor: "rgba(0, 0, 0, 0.45)",
-        textShadowOffset: { width: 1, height: 1 },
-        textShadowRadius: 4,
         fontWeight: "bold",
     },
     sendWrapper: {
@@ -96,14 +96,14 @@ const styles = react_native_1.StyleSheet.create({
     },
     button: {
         padding: height < 700 ? (isMiniDevice ? 4 : 4) : 4,
-        backgroundColor: "#ffffff55",
+        backgroundColor: "#66aadd",
         margin: 1,
         borderRadius: 4,
         borderWidth: 1,
-        borderColor: "#ffffff44",
+        borderColor: "#66aadd",
     },
     buttonSelected: {
-        backgroundColor: "#ffffffff",
+        backgroundColor: "#ffffff",
         borderWidth: 1,
         borderColor: "#F9A01C",
     },

package/dist/GameParts/TreasureInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreasureInfo.d.ts","sourceRoot":"","sources":["../../src/GameParts/TreasureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAiC,MAAM,cAAc,CAAC;AAMpF,aAAK,KAAK,GAAG;IACX,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACvD,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuBvC,CAAC"}
+{"version":3,"file":"TreasureInfo.d.ts","sourceRoot":"","sources":["../../src/GameParts/TreasureInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,qBAAqB,EAKtB,MAAM,cAAc,CAAC;AAMtB,aAAK,KAAK,GAAG;IACX,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACvD,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0BxC,CAAC"}

package/dist/GameParts/TreasureInfo.js

@@ -47,11 +47,11 @@ const styles = react_native_1.StyleSheet.create({
         shadowColor: "#000000",
         shadowOffset: {
             width: 4,
-            height: 6
+            height: 6,
         },
-        shadowOpacity: .25,
+        shadowOpacity: 0.25,
         shadowRadius: 5,
-        elevation: 5
+        elevation: 0,
     },
     frame: {
         flex: 1,
@@ -61,28 +61,28 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: "space-evenly",
         alignItems: "center",
         paddingTop: 30,
-        paddingHorizontal: 30
+        paddingHorizontal: 30,
     },
     infoText: {
         flex: 1,
         fontSize: 14,
         color: "#ffffff",
-        textAlign: "center"
+        textAlign: "center",
     },
     boldText: {
         fontWeight: "bold",
-        fontSize: 20
+        fontSize: 20,
     },
     infoImage: {
         width: 120,
         height: 100,
         resizeMode: "contain",
         marginLeft: -10,
-        marginRight: -10
+        marginRight: -10,
     },
     info: {
         flexDirection: "row",
         alignItems: "center",
-        marginBottom: 20
-    }
+        marginBottom: 20,
+    },
 });

package/dist/Messages/MessageList.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     faded?: boolean;
     deadFocus?: boolean;
     vampiresFocus?: boolean;
+    myName?: string;
     appearance?: "dark" | "light";
     messages: Array<MessageItem>;
     labelFormatter: (user: string) => {

package/dist/Messages/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/Messages/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoD,SAAS,EAAE,MAAM,cAAc,CAAC;AAI3F,aAAK,WAAW,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAED,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC7B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,GAAG,CAAA;KAAE,CAAC;CAC5E,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFvC,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/Messages/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,aAAK,WAAW,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC7B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,GAAG,CAAA;KAAE,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqIvC,CAAC"}

package/dist/Messages/MessageList.js

@@ -26,21 +26,23 @@ exports.MessageList = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const Animatable = __importStar(require("react-native-animatable"));
-const Views_1 = require("../Views");
-const MessageList = ({ style, messages, labelFormatter, appearance = "light", faded, deadFocus, vampiresFocus }) => {
+const MessageList = ({ style, messages, labelFormatter, appearance = "light", faded, myName, deadFocus, vampiresFocus, }) => {
     const flatListRef = react_1.default.useRef(null);
-    const userLabelFormatter = !!labelFormatter ? labelFormatter : user => {
-        let displayName = user;
-        let labelStyle = {};
-        return { displayName, labelStyle };
-    };
+    const userLabelFormatter = !!labelFormatter
+        ? labelFormatter
+        : (user) => {
+            let displayName = user;
+            let labelStyle = {};
+            return { displayName, labelStyle };
+        };
+    const [scrollOffset, setScrollOffset] = react_1.default.useState(0);
     const _renderItem = ({ item, index }) => {
         const unFocusMessage = {};
         const isDark = appearance === "dark";
         const textColor = isDark ? styles.lightText : styles.darkText;
         const { displayName, labelStyle } = userLabelFormatter(item.user);
         if (item.vampirsOnly) {
-            labelStyle.backgroundColor = 'red';
+            labelStyle.backgroundColor = "red";
         }
         if (deadFocus && !item.deathsOnly) {
             unFocusMessage.opacity = 0.3;
@@ -54,50 +56,74 @@ const MessageList = ({ style, messages, labelFormatter, appearance = "light", fa
         if (!vampiresFocus && item.vampirsOnly) {
             return null;
         }
-        return react_1.default.createElement(Animatable.View, { animation: "fadeInUp", duration: 300, style: [styles.messageRow] },
-            react_1.default.createElement(react_native_1.View, { style: [styles.messageWrapper, unFocusMessage] },
-                react_1.default.createElement(react_native_1.View, { accessible: true, accessibilityLabel: `${item.number ? item.number + ' numara.' : ''} ${displayName}: ${item.message}`, style: [
+        const isSpecial = !item.number;
+        return (react_1.default.createElement(Animatable.View, { animation: "fadeInUp", duration: 300, style: [styles.messageRow] },
+            react_1.default.createElement(react_native_1.View, { style: [
+                    styles.messageWrapper,
+                    unFocusMessage,
+                    myName === item.user ? styles.myMessageRow : {},
+                ] },
+                react_1.default.createElement(react_native_1.View, { accessible: true, accessibilityLabel: `${item.number ? item.number + " numara." : ""} ${displayName}: ${item.message}`, style: [
                         styles.messageUserLabel,
                         isDark ? styles.messageUserLabelNight : {},
-                        labelStyle
+                        isSpecial ? styles.messageUserCenter : {},
+                        myName === item.user ? styles.myMessage : {},
                     ] },
-                    !!item.number && (react_1.default.createElement(react_native_1.View, { style: styles.messageNumber },
-                        react_1.default.createElement(react_native_1.Text, { style: styles.messageNumberText, accessible: false }, item.number))),
-                    react_1.default.createElement(react_native_1.Text, { style: [styles.messageUser], accessible: false }, displayName)),
-                react_1.default.createElement(react_native_1.Text, { style: [styles.messageText, textColor], accessible: false }, item.message)));
+                    !!item.number && (react_1.default.createElement(react_native_1.View, { style: [
+                            styles.messageNumber,
+                            myName === item.user ? styles.myMessageNumber : {},
+                        ] },
+                        react_1.default.createElement(react_native_1.Text, { style: [
+                                styles.messageNumberText,
+                                myName === item.user ? styles.myMessageNumberText : {},
+                            ], accessible: false }, item.number))),
+                    react_1.default.createElement(react_native_1.View, { style: [styles.messageUserView, labelStyle] },
+                        react_1.default.createElement(react_native_1.Text, { style: [styles.messageUser], accessible: false }, displayName))),
+                react_1.default.createElement(react_native_1.Text, { style: [
+                        styles.messageText,
+                        myName === item.user ? styles.myMessageText : {},
+                        textColor,
+                        isSpecial ? styles.messageTextCenter : {},
+                    ], accessible: false }, item.message))));
     };
     const _onContentSizeChange = () => {
         var _a;
-        if (messages.length > 3) {
+        if (messages.length > 3 && scrollOffset < 50) {
             (_a = flatListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ offset: 0, animated: true });
         }
     };
-    return react_1.default.createElement(Views_1.MaskedGradientView, { style: [styles.wrapper, style] },
-        react_1.default.createElement(react_native_1.FlatList, { ref: flatListRef, inverted: true, ListHeaderComponent: react_1.default.createElement(react_native_1.View, { style: styles.listBottomSpace }), keyExtractor: item => item.key, onContentSizeChange: _onContentSizeChange, data: messages, style: [styles.flatList, appearance === "dark" && styles.flatListDark], renderItem: _renderItem }));
+    return (react_1.default.createElement(react_native_1.View, { style: [styles.wrapper, style] },
+        react_1.default.createElement(react_native_1.FlatList, { ref: flatListRef, inverted: true, ListHeaderComponent: react_1.default.createElement(react_native_1.View, { style: styles.listBottomSpace }), keyExtractor: (item) => item.key, onContentSizeChange: _onContentSizeChange, onScroll: (event) => {
+                setScrollOffset(event.nativeEvent.contentOffset.y);
+            }, data: messages, contentContainerStyle: { paddingBottom: 10 }, style: [styles.flatList, appearance === "dark" && styles.flatListDark], renderItem: _renderItem })));
 };
 exports.MessageList = MessageList;
 const styles = react_native_1.StyleSheet.create({
     wrapper: {
         flex: 1,
         paddingHorizontal: 10,
-        marginBottom: -35
+        marginBottom: -35,
     },
     flatList: {
         paddingHorizontal: 8,
-        backgroundColor: "#ffffff99",
-        borderRadius: 16
+        backgroundColor: "#E2D2EE",
+        borderRadius: 16,
     },
     flatListDark: {
         backgroundColor: "#000000aa",
     },
     listBottomSpace: {
-        height: 35
+        height: 35,
     },
     messageRow: {
-        paddingBottom: 8
+        paddingBottom: 8,
+        paddingRight: 30,
+    },
+    myMessageRow: {
+        flexDirection: "column",
     },
     messageWrapper: {
-        flexDirection: "row",
+        flexDirection: "column",
     },
     messageUserLabel: {
         flexDirection: "row",
@@ -105,45 +131,74 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: "center",
         alignSelf: "flex-start",
         borderRadius: 6,
-        paddingVertical: 3,
+        paddingVertical: 0,
         paddingHorizontal: 6,
-        backgroundColor: "rgba(42,40,40,0.4)",
         marginRight: 5,
-        marginBottom: 5
+        marginBottom: 2,
+    },
+    myMessage: {
+        flexDirection: "row-reverse",
+        alignSelf: "flex-end",
     },
     messageUserLabelNight: {
-        backgroundColor: "rgba(162,157,157,0.4)"
+    //    backgroundColor: "rgba(162,157,157,0.4)",
+    },
+    messageUserCenter: {
+        alignSelf: "center",
+        paddingLeft: 30,
+    },
+    messageUserView: {
+        backgroundColor: "rgba(42,40,40,0.4)",
+        borderRadius: 12,
+        marginLeft: 6,
+        marginRight: 6,
     },
     messageUser: {
-        lineHeight: 16,
-        paddingBottom: 0,
-        marginBottom: 0,
+        lineHeight: 14,
         color: "#ffffff",
-        fontSize: 14
+        fontSize: 10,
+        paddingVertical: 2,
+        paddingHorizontal: 8,
     },
     messageText: {
-        alignSelf: "center",
-        marginBottom: 2,
+        alignSelf: "flex-start",
+        paddingLeft: 36,
+        marginBottom: 5,
         flex: 1,
-        fontSize: 12
+        fontSize: 12,
+    },
+    myMessageText: {
+        alignSelf: "flex-end",
+        paddingRight: 36,
+    },
+    messageTextCenter: {
+        paddingHorizontal: 20,
+        alignSelf: "center",
+        textAlign: "center",
     },
     messageNumber: {
         backgroundColor: "rgba(42,40,40,0.4)",
         width: 20,
         borderRadius: 10,
-        marginRight: 6,
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+    },
+    myMessageNumber: {
+        backgroundColor: "#fefe11",
+    },
+    myMessageNumberText: {
+        color: "#000000",
     },
     messageNumberText: {
         color: "#ffffff",
         textAlign: "center",
-        fontSize: 12
+        fontWeight: "bold",
+        fontSize: 12,
     },
     lightText: {
-        color: "#cecece"
+        color: "#cecece",
     },
     darkText: {
-        color: "#343434"
-    }
+        color: "#343434",
+    },
 });

package/dist/Screens/ScreenBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenBase.d.ts","sourceRoot":"","sources":["../../src/Screens/ScreenBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,mBAAmB,EAAc,SAAS,EAAoB,MAAM,cAAc,CAAC;AAO7G,oBAAY,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4FhD,CAAC"}
+{"version":3,"file":"ScreenBase.d.ts","sourceRoot":"","sources":["../../src/Screens/ScreenBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,mBAAmB,EAEnB,SAAS,EAGV,MAAM,cAAc,CAAC;AAOtB,oBAAY,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,CAAC"}

package/dist/Screens/ScreenBase.js

@@ -11,7 +11,7 @@ const ScreenFooter_1 = require("./ScreenFooter");
 const ScreenHeader_1 = require("./ScreenHeader");
 const Themes_1 = require("../Themes");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const ScreenBase = ({ children, style, contentStyle = {}, icon, title, onBack, background, scrollable, transparent, onAccept, noPaddings, renderHeader, acceptText, onLeftPress, leftButtonIcon, leftButtonLabel, leftButtonFont }) => {
+const ScreenBase = ({ children, style, contentStyle = {}, icon, title, onBack, background, scrollable, transparent, onAccept, noPaddings, renderHeader, acceptText, onLeftPress, leftButtonIcon, leftButtonLabel, leftButtonFont, }) => {
     const { dimBackgroundColorTransparent } = Themes_1.useColors();
     const insets = react_native_safe_area_context_1.useSafeAreaInsets();
     const renderContent = () => {
@@ -22,9 +22,9 @@ const ScreenBase = ({ children, style, contentStyle = {}, icon, title, onBack, b
                 styles.scrollBack,
                 {
                     marginBottom: -Math.max(10, insets.bottom),
-                    backgroundColor: dimBackgroundColorTransparent
+                    backgroundColor: dimBackgroundColorTransparent,
                 },
-                contentStyle
+                contentStyle,
             ] },
             react_1.default.createElement(react_native_1.ScrollView, { style: [styles.scroll] },
                 !noPaddings && react_1.default.createElement(Utils_1.Margin, { size: "xlarge" }),
@@ -40,11 +40,17 @@ const ScreenBase = ({ children, style, contentStyle = {}, icon, title, onBack, b
                     position: "relative",
                     zIndex: 1,
                     marginTop: hasCustomheader ? 0 : insets.top,
-                    marginBottom: Math.max(0, insets.bottom)
+                    marginBottom: Math.max(0, insets.bottom),
                 } },
                 react_1.default.createElement(react_native_1.View, { style: { flex: 1, position: "relative", zIndex: 1 } },
                     renderContent(),
-                    !hasCustomheader ? (react_1.default.createElement(ScreenHeader_1.ScreenHeader, Object.assign({}, { icon, onLeftPress, leftButtonIcon, leftButtonFont, leftButtonLabel }), title)) : null)),
+                    !hasCustomheader ? (react_1.default.createElement(ScreenHeader_1.ScreenHeader, Object.assign({}, {
+                        icon,
+                        onLeftPress,
+                        leftButtonIcon,
+                        leftButtonFont,
+                        leftButtonLabel,
+                    }), title)) : null)),
             react_1.default.createElement(ScreenFooter_1.ScreenFooter, { onBack: onBack, onAccept: onAccept, acceptText: acceptText })));
     };
     if (transparent) {
@@ -56,7 +62,7 @@ exports.ScreenBase = ScreenBase;
 const styles = react_native_1.StyleSheet.create({
     base: {
         flex: 1,
-        position: "relative"
+        position: "relative",
     },
     scrollBack: {
         flex: 1,
@@ -65,18 +71,18 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: "#00000099",
         borderRadius: 32,
         borderBottomStartRadius: 0,
-        borderBottomEndRadius: 0
+        borderBottomEndRadius: 0,
     },
     scroll: {
         flex: 1,
         borderRadius: 32,
         paddingBottom: 40,
         borderBottomStartRadius: 0,
-        borderBottomEndRadius: 0
+        borderBottomEndRadius: 0,
     },
     fixedBottom: {
         position: "absolute",
         left: 0,
-        bottom: 0
-    }
+        bottom: 0,
+    },
 });

package/dist/Screens/SplitScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitScreen.d.ts","sourceRoot":"","sources":["../../src/Screens/SplitScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,mBAAmB,EAAc,SAAS,EAAoB,MAAM,cAAc,CAAC;AAM7G,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFvC,CAAC"}
+{"version":3,"file":"SplitScreen.d.ts","sourceRoot":"","sources":["../../src/Screens/SplitScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,mBAAmB,EAEnB,SAAS,EAGV,MAAM,cAAc,CAAC;AAMtB,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,GAAG,KAAA,KAAK,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koylu-vampir-design",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "Design System for Koylu Vampir Game",
   "keywords": [
     "react-native",