feat: Add coordinate-converter
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
parent
978e60c6d3
commit
de79281681
GPG key ID:
D2BBDF3EDE6BA9A6
3 changed files with 312 additions and 2 deletions
|
|
@ -4,6 +4,7 @@ export default function RootLayout() {
|
|||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="index" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="coordinate-converter" options={{ headerShown: false }} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
193
app/coordinate-converter.tsx
Normal file
193
app/coordinate-converter.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
import { useRouter } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import {
|
||||
ImageBackground,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { styles } from "./styles";
|
||||
const router = useRouter();
|
||||
|
||||
// Define your background image URI
|
||||
const converterBgImage = {
|
||||
uri: "https://s1.qwant.com/thumbr/474x296/1/c/30947af0647acb7b3ef1eb2b5697b5dde49d5468269c918e41bb86286b007e/OIP.MpGUIDhV0CzgCK1mQYFbHQHaEo.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.MpGUIDhV0CzgCK1mQYFbHQHaEo%3Fr%3D0%26pid%3DApi&q=0&b=1&p=0&a=0",
|
||||
};
|
||||
|
||||
export default function CoordinateConverter() {
|
||||
const [overworldX, setOverworldX] = useState("");
|
||||
const [overworldZ, setOverworldZ] = useState("");
|
||||
const [netherX, setNetherX] = useState("");
|
||||
const [netherZ, setNetherZ] = useState("");
|
||||
|
||||
const safeParseFloat = (value: string) => {
|
||||
const num = parseFloat(value);
|
||||
return isNaN(num) ? undefined : num;
|
||||
};
|
||||
|
||||
const convertOWToNether = useCallback(
|
||||
(xStr: string, zStr: string) => {
|
||||
const x = safeParseFloat(xStr);
|
||||
const z = safeParseFloat(zStr);
|
||||
if (x !== undefined && z !== undefined) {
|
||||
setNetherX(Math.floor(x / 8).toString());
|
||||
setNetherZ(Math.floor(z / 8).toString());
|
||||
} else {
|
||||
setNetherX("");
|
||||
setNetherZ("");
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const convertNetherToOW = useCallback(
|
||||
(xStr: string, zStr: string) => {
|
||||
const x = safeParseFloat(xStr);
|
||||
const z = safeParseFloat(zStr);
|
||||
if (x !== undefined && z !== undefined) {
|
||||
setOverworldX(Math.floor(x * 8).toString());
|
||||
setOverworldZ(Math.floor(z * 8).toString());
|
||||
} else {
|
||||
setOverworldX("");
|
||||
setOverworldZ("");
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleOverworldXChange = useCallback(
|
||||
(text: string) => {
|
||||
setOverworldX(text);
|
||||
convertOWToNether(text, overworldZ);
|
||||
},
|
||||
[overworldZ, convertOWToNether]
|
||||
);
|
||||
|
||||
const handleOverworldZChange = useCallback(
|
||||
(text: string) => {
|
||||
setOverworldZ(text);
|
||||
convertOWToNether(overworldX, text);
|
||||
},
|
||||
[overworldX, convertOWToNether]
|
||||
);
|
||||
|
||||
const handleNetherXChange = useCallback(
|
||||
(text: string) => {
|
||||
setNetherX(text);
|
||||
convertNetherToOW(text, netherZ);
|
||||
},
|
||||
[netherZ, convertNetherToOW]
|
||||
);
|
||||
|
||||
const handleNetherZChange = useCallback(
|
||||
(text: string) => {
|
||||
setNetherZ(text);
|
||||
convertNetherToOW(netherX, text);
|
||||
},
|
||||
[netherX, convertNetherToOW]
|
||||
);
|
||||
|
||||
const handleClear = useCallback(() => {
|
||||
setOverworldX("");
|
||||
setOverworldZ("");
|
||||
setNetherX("");
|
||||
setNetherZ("");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.converterSafeArea}>
|
||||
<ImageBackground
|
||||
source={converterBgImage}
|
||||
style={styles.converterBackgroundImage}
|
||||
resizeMode="cover"
|
||||
>
|
||||
<View style={styles.converterBackgroundOverlay}>
|
||||
<KeyboardAvoidingView
|
||||
style={styles.converterContainer}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()} // Correct!
|
||||
style={styles.backButton}
|
||||
>
|
||||
<Text style={styles.backButtonText}>← Go Back</Text>
|
||||
</TouchableOpacity>
|
||||
<ScrollView contentContainerStyle={styles.converterScrollContent}>
|
||||
<Text style={styles.converterTitle}>Coordinate Converter</Text>
|
||||
|
||||
{/* Overworld Row */}
|
||||
<View style={styles.dimensionContainer}>
|
||||
<Text style={styles.dimensionTitle}>Overworld (X, Z)</Text>
|
||||
<View style={styles.coordinatesRow}>
|
||||
<View style={styles.coordInputGroup}>
|
||||
<Text style={styles.coordInputLabel}>X:</Text>
|
||||
<TextInput
|
||||
style={styles.coordTextInput}
|
||||
keyboardType="numeric"
|
||||
placeholder="Enter X"
|
||||
placeholderTextColor="#ccc"
|
||||
value={overworldX}
|
||||
onChangeText={handleOverworldXChange}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.coordInputGroup}>
|
||||
<Text style={styles.coordInputLabel}>Z:</Text>
|
||||
<TextInput
|
||||
style={styles.coordTextInput}
|
||||
keyboardType="numeric"
|
||||
placeholder="Enter Z"
|
||||
placeholderTextColor="#ccc"
|
||||
value={overworldZ}
|
||||
onChangeText={handleOverworldZChange}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Nether Row */}
|
||||
<View style={styles.dimensionContainer}>
|
||||
<Text style={styles.dimensionTitle}>Nether (X, Z)</Text>
|
||||
<View style={styles.coordinatesRow}>
|
||||
<View style={styles.coordInputGroup}>
|
||||
<Text style={styles.coordInputLabel}>X:</Text>
|
||||
<TextInput
|
||||
style={styles.coordTextInput}
|
||||
keyboardType="numeric"
|
||||
placeholder="Enter X"
|
||||
placeholderTextColor="#ccc"
|
||||
value={netherX}
|
||||
onChangeText={handleNetherXChange}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.coordInputGroup}>
|
||||
<Text style={styles.coordInputLabel}>Z:</Text>
|
||||
<TextInput
|
||||
style={styles.coordTextInput}
|
||||
keyboardType="numeric"
|
||||
placeholder="Enter Z"
|
||||
placeholderTextColor="#ccc"
|
||||
value={netherZ}
|
||||
onChangeText={handleNetherZChange}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.clearButton}
|
||||
onPress={handleClear}
|
||||
>
|
||||
<Text style={styles.clearButtonText}>Clear All</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
120
app/styles.ts
120
app/styles.ts
|
|
@ -2,11 +2,12 @@
|
|||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
container: {
|
||||
// --- Global / Reusable Styles (or main index page specific) ---
|
||||
appContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: "#2e2e2e",
|
||||
},
|
||||
title: {
|
||||
mainTitle: {
|
||||
fontSize: 38,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
|
|
@ -50,4 +51,119 @@ export const styles = StyleSheet.create({
|
|||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 3,
|
||||
},
|
||||
|
||||
// --- Coordinate Converter Specific Styles (Adjusted and New) ---
|
||||
converterSafeArea: {
|
||||
flex: 1,
|
||||
},
|
||||
converterBackgroundImage: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
converterBackgroundOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
},
|
||||
converterContainer: {
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
},
|
||||
converterScrollContent: {
|
||||
flexGrow: 1,
|
||||
padding: 20,
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
},
|
||||
converterTitle: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
marginBottom: 30,
|
||||
marginTop: 20,
|
||||
textShadowColor: "rgba(0, 0, 0, 0.7)",
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 3,
|
||||
},
|
||||
dimensionContainer: {
|
||||
width: "90%",
|
||||
backgroundColor: "rgba(58, 58, 58, 0.7)",
|
||||
borderRadius: 10,
|
||||
borderColor: "#6a5acd",
|
||||
borderWidth: 2,
|
||||
padding: 15,
|
||||
marginBottom: 20,
|
||||
alignItems: "center",
|
||||
},
|
||||
dimensionTitle: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 15,
|
||||
textShadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 2,
|
||||
},
|
||||
coordinatesRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
},
|
||||
coordInputGroup: {
|
||||
flex: 1,
|
||||
marginHorizontal: 5,
|
||||
alignItems: "center",
|
||||
},
|
||||
coordInputLabel: {
|
||||
color: "#e0e0e0",
|
||||
fontSize: 16,
|
||||
marginBottom: 5,
|
||||
fontWeight: "500",
|
||||
textShadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 2,
|
||||
},
|
||||
coordTextInput: {
|
||||
backgroundColor: "rgba(58, 58, 58, 0.8)",
|
||||
color: "#fff",
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 10,
|
||||
borderRadius: 8,
|
||||
fontSize: 18,
|
||||
borderWidth: 1,
|
||||
borderColor: "#555",
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
},
|
||||
|
||||
clearButton: {
|
||||
backgroundColor: "#d32f2f",
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 25,
|
||||
borderRadius: 8,
|
||||
marginTop: 30,
|
||||
},
|
||||
clearButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
|
||||
backButton: {
|
||||
alignSelf: "flex-start",
|
||||
marginTop: 10,
|
||||
marginBottom: 20,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 15,
|
||||
backgroundColor: "rgba(106, 90, 205, 0.7)",
|
||||
borderRadius: 8,
|
||||
marginLeft: 10,
|
||||
},
|
||||
backButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue