koylu-vampir-design 1.0.21 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayerView.d.ts","sourceRoot":"","sources":["../../src/Players/PlayerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"PlayerView.d.ts","sourceRoot":"","sources":["../../src/Players/PlayerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,SAAS,EACT,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAWtB,aAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6M1C,CAAC;AAsHF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAA8B,CAAC"}
|
|
@@ -34,7 +34,7 @@ const PlayerNumber_1 = require("./PlayerNumber");
|
|
|
34
34
|
const PlayerGifts_1 = require("./PlayerGifts");
|
|
35
35
|
const Typography_1 = require("../Typography");
|
|
36
36
|
const Themes_1 = require("../Themes");
|
|
37
|
-
const deadReasonMap = reason => {
|
|
37
|
+
const deadReasonMap = (reason) => {
|
|
38
38
|
switch (reason) {
|
|
39
39
|
case "exit":
|
|
40
40
|
return "kaçtı";
|
|
@@ -44,52 +44,53 @@ const deadReasonMap = reason => {
|
|
|
44
44
|
return "öldü";
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
|
-
const PlayerViewBase = ({ isSelf, name, avatar, userId, bg, bc, da, number, isAnonymous, fr, customName, size, space, empty, isDead, deadReason, isTarget, gifts, voiceUserId, role, visibleRole, onPress, onLongPress, micEffectComponent: MicEffectComponent, isAfkComponent: IsAfkComponent, roleVisible, targetPoint, myTarget, isSaved, targetNumber, isPaired, hideSelections }) => {
|
|
47
|
+
const PlayerViewBase = ({ isSelf, name, avatar, userId, bg, bc, da, number, isAnonymous, fr, customName, size, space, empty, isDead, deadReason, isTarget, gifts, voiceUserId, role, visibleRole, onPress, onLongPress, micEffectComponent: MicEffectComponent, isAfkComponent: IsAfkComponent, roleVisible, targetPoint, myTarget, isSaved, targetNumber, isPaired, hideSelections, }) => {
|
|
48
48
|
const { baseBackgroundColor, baseTextColor } = Themes_1.useColors();
|
|
49
49
|
const border = bc ? bc : !isAnonymous ? "#ffffff" : null;
|
|
50
50
|
const isRoleVisible = roleVisible || isSelf || isDead;
|
|
51
51
|
const radiusStyle = {
|
|
52
|
-
borderRadius: size && size < 100 ? 8 : 12
|
|
52
|
+
borderRadius: size && size < 100 ? 8 : 12,
|
|
53
53
|
};
|
|
54
54
|
const wrapperStyle = [
|
|
55
55
|
styles.wrapper,
|
|
56
56
|
size && { width: size },
|
|
57
57
|
size && space && { width: size - space * 2, margin: space },
|
|
58
|
-
radiusStyle
|
|
58
|
+
radiusStyle,
|
|
59
59
|
];
|
|
60
60
|
if (empty) {
|
|
61
61
|
return (react_1.default.createElement(Views_1.TouchableView, { accessibilityLabel: "Boş kutu.", style: wrapperStyle, onLongPress: onLongPress },
|
|
62
62
|
react_1.default.createElement(PlayerBg_1.PlayerBg, { bg: ["#00000044", "#33333322"], radius: size && size < 100 ? 8 : 12 })));
|
|
63
63
|
}
|
|
64
64
|
return (react_1.default.createElement(Views_1.TouchableView, Object.assign({ key: userId, style: wrapperStyle }, { onLongPress, onPress }),
|
|
65
|
-
react_1.default.createElement(PlayerBg_1.PlayerBg, Object.assign({}, { fr, bg, isDead, isTarget })),
|
|
66
|
-
!!isSaved && react_1.default.createElement(Animatable.View, { animation: "pulse", iterationCount: "infinite", style: styles.playerBorder },
|
|
65
|
+
react_1.default.createElement(PlayerBg_1.PlayerBg, Object.assign({}, { fr, bg, isDead }, { isTarget: hideSelections ? false : isTarget })),
|
|
66
|
+
!!isSaved && (react_1.default.createElement(Animatable.View, { animation: "pulse", iterationCount: "infinite", style: styles.playerBorder },
|
|
67
67
|
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderTR"), style: [styles.playerBorderTR, { tintColor: "yellow" }] }),
|
|
68
|
-
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderBL"), style: [styles.playerBorderBL, { tintColor: "yellow" }] })),
|
|
69
|
-
!!myTarget && react_1.default.createElement(Animatable.View, { animation: "pulse", iterationCount: "infinite", style: styles.playerBorder },
|
|
68
|
+
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderBL"), style: [styles.playerBorderBL, { tintColor: "yellow" }] }))),
|
|
69
|
+
!!myTarget && (react_1.default.createElement(Animatable.View, { animation: "pulse", iterationCount: "infinite", style: styles.playerBorder },
|
|
70
70
|
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderTR"), style: styles.playerBorderTR }),
|
|
71
|
-
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderBL"), style: styles.playerBorderBL })),
|
|
71
|
+
react_1.default.createElement(react_native_1.Image, { source: Utils_1.Assets.getSource("image", "playerBorderBL"), style: styles.playerBorderBL }))),
|
|
72
72
|
react_1.default.createElement(PlayerName_1.PlayerName, Object.assign({}, { name, customName, size })),
|
|
73
73
|
!!avatar && (react_1.default.createElement(react_native_1.View, { style: [styles.avatarWrapper, !!da && styles.deadAvatarWrapper] },
|
|
74
74
|
react_1.default.createElement(PlayerNumber_1.PlayerNumber, Object.assign({}, { number, isSelf, size })),
|
|
75
|
-
!!isDead && !!da ?
|
|
76
|
-
react_1.default.createElement(Animatable.Image, { animation: "slideInUp", source: Utils_1.Assets.getSource("tombStone", da), style: [styles.avatar, styles.deadAvatar] })
|
|
77
|
-
: react_1.default.createElement(Utils_1.FadeImage, { source: Utils_1.Assets.getSource("avatar", avatar), style: [styles.avatar] }),
|
|
75
|
+
!!isDead && !!da ? (react_1.default.createElement(Animatable.Image, { animation: "slideInUp", source: Utils_1.Assets.getSource("tombStone", da), style: [styles.avatar, styles.deadAvatar] })) : (react_1.default.createElement(Utils_1.FadeImage, { source: Utils_1.Assets.getSource("avatar", avatar), style: [styles.avatar] })),
|
|
78
76
|
react_1.default.createElement(PlayerGifts_1.PlayerGifts, { gifts: gifts, size: size }),
|
|
79
|
-
!!isPaired && react_1.default.createElement(Animatable.Image, { animation: "pulse", iterationCount: "infinite", source: Utils_1.Assets.getSource("icon", "eroPair"), style: [styles.erosPairImage, { tintColor: "#fa80fa" }] }),
|
|
80
|
-
!hideSelections && !!targetNumber && react_1.default.createElement(react_1.default.Fragment, null,
|
|
77
|
+
!!isPaired && (react_1.default.createElement(Animatable.Image, { animation: "pulse", iterationCount: "infinite", source: Utils_1.Assets.getSource("icon", "eroPair"), style: [styles.erosPairImage, { tintColor: "#fa80fa" }] })),
|
|
78
|
+
!hideSelections && !!targetNumber && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
81
79
|
react_1.default.createElement(Utils_1.Icon, { style: styles.targetNumberIcon, name: "chatbox" }),
|
|
82
|
-
react_1.default.createElement(Typography_1.Typography, { style: styles.targetNumber, color: "green", accessibilityLabel: `Seçtiği ${targetNumber}`, size: 11, bold: true }, targetNumber)))),
|
|
80
|
+
react_1.default.createElement(Typography_1.Typography, { style: styles.targetNumber, color: "green", accessibilityLabel: `Seçtiği ${targetNumber}`, size: 11, bold: true }, targetNumber))))),
|
|
83
81
|
react_1.default.createElement(react_native_1.View, { style: [styles.bottomInfo, { backgroundColor: baseBackgroundColor }], accessibilityLiveRegion: "assertive" },
|
|
84
82
|
!!IsAfkComponent && react_1.default.createElement(IsAfkComponent, { userId: userId }),
|
|
85
|
-
!!MicEffectComponent && react_1.default.createElement(MicEffectComponent, { voiceUserId: voiceUserId }),
|
|
86
|
-
|
|
87
|
-
!!role && isRoleVisible && react_1.default.createElement(Animatable.Image, { accessibilityLabel: `Rolü: ${role}.`, animation: "slideInUp", style: [styles.role, { tintColor: baseTextColor }], source: Utils_1.Assets.getSource("role", visibleRole || role, "small") }),
|
|
88
|
-
!!isDead && react_1.default.createElement(Typography_1.Typography, { size: 12, bold: true }, deadReasonMap(deadReason)),
|
|
89
|
-
!hideSelections && !!targetPoint && react_1.default.createElement(react_native_1.View, { style: styles.target },
|
|
90
|
-
react_1.default.createElement(Typography_1.Typography, { color: "red", accessibilityLabel: `üzerinde ${targetPoint} oy var.`, size: 11, bold: true }, targetPoint))),
|
|
91
|
-
!!border && react_1.default.createElement(react_native_1.View, { style: [
|
|
92
|
-
|
|
83
|
+
!!MicEffectComponent && (react_1.default.createElement(MicEffectComponent, { voiceUserId: voiceUserId })),
|
|
84
|
+
!!voiceUserId && !!IsAfkComponent && (react_1.default.createElement(Utils_1.Icon, { accessibilityLabel: "Microfonda.", name: "mic", color: baseTextColor })),
|
|
85
|
+
!!role && isRoleVisible && (react_1.default.createElement(Animatable.Image, { accessibilityLabel: `Rolü: ${role}.`, animation: "slideInUp", style: [styles.role, { tintColor: baseTextColor }], source: Utils_1.Assets.getSource("role", visibleRole || role, "small") })),
|
|
86
|
+
!!isDead && (react_1.default.createElement(Typography_1.Typography, { size: 12, bold: true }, deadReasonMap(deadReason))),
|
|
87
|
+
!hideSelections && !!targetPoint && (react_1.default.createElement(react_native_1.View, { style: styles.target },
|
|
88
|
+
react_1.default.createElement(Typography_1.Typography, { color: "red", accessibilityLabel: `üzerinde ${targetPoint} oy var.`, size: 11, bold: true }, targetPoint)))),
|
|
89
|
+
!!border && (react_1.default.createElement(react_native_1.View, { style: [
|
|
90
|
+
react_native_1.StyleSheet.absoluteFill,
|
|
91
|
+
radiusStyle,
|
|
92
|
+
{ borderColor: border, borderWidth: 2 },
|
|
93
|
+
] }))));
|
|
93
94
|
};
|
|
94
95
|
exports.PlayerViewBase = PlayerViewBase;
|
|
95
96
|
const { width, height } = react_native_1.Dimensions.get("window");
|
|
@@ -100,24 +101,24 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
100
101
|
position: "relative",
|
|
101
102
|
overflow: "hidden",
|
|
102
103
|
width: 180,
|
|
103
|
-
aspectRatio: isSmallDevice ? 1.3 : 1.1
|
|
104
|
+
aspectRatio: isSmallDevice ? 1.3 : 1.1,
|
|
104
105
|
},
|
|
105
106
|
radius: {
|
|
106
|
-
borderRadius: 12
|
|
107
|
+
borderRadius: 12,
|
|
107
108
|
},
|
|
108
109
|
avatarWrapper: {
|
|
109
110
|
position: "relative",
|
|
110
|
-
marginBottom: "auto"
|
|
111
|
+
marginBottom: "auto",
|
|
111
112
|
},
|
|
112
113
|
avatar: {
|
|
113
114
|
width: isSmallDevice ? "42%" : "52%",
|
|
114
115
|
aspectRatio: 1,
|
|
115
116
|
borderRadius: 8,
|
|
116
|
-
alignSelf: "center"
|
|
117
|
+
alignSelf: "center",
|
|
117
118
|
},
|
|
118
119
|
deadAvatarWrapper: {
|
|
119
120
|
marginTop: "auto",
|
|
120
|
-
marginBottom: 0
|
|
121
|
+
marginBottom: 0,
|
|
121
122
|
},
|
|
122
123
|
erosPairImage: {
|
|
123
124
|
width: 6 * 2.5,
|
|
@@ -125,7 +126,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
125
126
|
resizeMode: "contain",
|
|
126
127
|
position: "absolute",
|
|
127
128
|
bottom: 0,
|
|
128
|
-
left: "5%"
|
|
129
|
+
left: "5%",
|
|
129
130
|
},
|
|
130
131
|
targetNumber: {
|
|
131
132
|
position: "absolute",
|
|
@@ -133,7 +134,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
133
134
|
width: 20,
|
|
134
135
|
textAlign: "center",
|
|
135
136
|
marginLeft: -7,
|
|
136
|
-
left: "50%"
|
|
137
|
+
left: "50%",
|
|
137
138
|
},
|
|
138
139
|
targetNumberIcon: {
|
|
139
140
|
position: "absolute",
|
|
@@ -141,7 +142,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
141
142
|
left: "50%",
|
|
142
143
|
marginLeft: -8,
|
|
143
144
|
color: "#ffffff",
|
|
144
|
-
fontSize: 22
|
|
145
|
+
fontSize: 22,
|
|
145
146
|
},
|
|
146
147
|
target: {
|
|
147
148
|
width: 20,
|
|
@@ -152,7 +153,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
152
153
|
borderWidth: 1,
|
|
153
154
|
backgroundColor: "#ff000033",
|
|
154
155
|
alignItems: "center",
|
|
155
|
-
justifyContent: "center"
|
|
156
|
+
justifyContent: "center",
|
|
156
157
|
},
|
|
157
158
|
role: {
|
|
158
159
|
height: 20,
|
|
@@ -161,13 +162,13 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
161
162
|
width: 20,
|
|
162
163
|
marginTop: "auto",
|
|
163
164
|
marginBottom: "auto",
|
|
164
|
-
resizeMode: "contain"
|
|
165
|
+
resizeMode: "contain",
|
|
165
166
|
},
|
|
166
167
|
deadAvatar: {
|
|
167
168
|
borderRadius: 0,
|
|
168
169
|
marginTop: -10,
|
|
169
170
|
width: "60%",
|
|
170
|
-
marginBottom: -10
|
|
171
|
+
marginBottom: -10,
|
|
171
172
|
},
|
|
172
173
|
bottomInfo: {
|
|
173
174
|
position: "relative",
|
|
@@ -181,12 +182,12 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
181
182
|
paddingHorizontal: 16,
|
|
182
183
|
flexDirection: "row",
|
|
183
184
|
alignItems: "center",
|
|
184
|
-
justifyContent: "space-evenly"
|
|
185
|
+
justifyContent: "space-evenly",
|
|
185
186
|
},
|
|
186
187
|
playerBorder: {
|
|
187
188
|
position: "absolute",
|
|
188
189
|
width: "100%",
|
|
189
|
-
height: "80%"
|
|
190
|
+
height: "80%",
|
|
190
191
|
},
|
|
191
192
|
playerBorderTR: {
|
|
192
193
|
width: 20 * 2.5,
|
|
@@ -194,7 +195,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
194
195
|
resizeMode: "contain",
|
|
195
196
|
position: "absolute",
|
|
196
197
|
top: 7,
|
|
197
|
-
right: 7
|
|
198
|
+
right: 7,
|
|
198
199
|
},
|
|
199
200
|
playerBorderBL: {
|
|
200
201
|
width: 10 * 2.5,
|
|
@@ -202,7 +203,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
202
203
|
resizeMode: "contain",
|
|
203
204
|
position: "absolute",
|
|
204
205
|
bottom: 8,
|
|
205
|
-
left: 7
|
|
206
|
-
}
|
|
206
|
+
left: 7,
|
|
207
|
+
},
|
|
207
208
|
});
|
|
208
209
|
exports.PlayerView = react_1.default.memo(exports.PlayerViewBase);
|
|
@@ -29,7 +29,7 @@ export declare const useColors: () => {
|
|
|
29
29
|
dimBackgroundColorTransparent: string;
|
|
30
30
|
dimTextColorTransparent: string;
|
|
31
31
|
};
|
|
32
|
-
export declare const useFontSizes: () => Record<"
|
|
33
|
-
export declare const useSpaceSizes: () => Record<"
|
|
32
|
+
export declare const useFontSizes: () => Record<"small" | "medium" | "large" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge", number>;
|
|
33
|
+
export declare const useSpaceSizes: () => Record<"small" | "medium" | "none" | "large" | "xxsmall" | "xsmall" | "xlarge" | "xxlarge", number>;
|
|
34
34
|
export {};
|
|
35
35
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
package/dist/Views/ToastView.js
CHANGED
|
@@ -49,7 +49,7 @@ exports.ToastView = react_1.default.memo(({ visible = null, message }) => {
|
|
|
49
49
|
react_1.default.createElement(Typography_1.Typography, { color: "#ffffaa", style: styles.text }, message))));
|
|
50
50
|
});
|
|
51
51
|
const styles = react_native_1.StyleSheet.create({
|
|
52
|
-
wrapper: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { backgroundColor: "#00000000", alignItems: "center", justifyContent: "center" }),
|
|
52
|
+
wrapper: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { backgroundColor: "#00000000", alignItems: "center", justifyContent: "center", zIndex: 100, elevation: 10 }),
|
|
53
53
|
content: {
|
|
54
54
|
width: "80%",
|
|
55
55
|
borderRadius: 40,
|