initial position and placement zone error

[KaraElBatson]

I'm trying to code a puzzle game with the React Native expo gesture handler library. Above is the world map, below are the continent pieces that will be placed on the world map, but I'm having trouble with the target location and the location of the continents when the game is first opened.
My code :
import React, { useState, useEffect, useRef } from 'react';
import {View,Text,StyleSheet,Dimensions,Image,TouchableOpacity,ImageBackground,Platform} from 'react-native';
import { Audio } from 'expo-av';
import FlashMessage, { showMessage } from 'react-native-flash-message';
import Menu from '../../components/menu';
import * as Speech from 'expo-speech';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { GestureHandlerRootView, GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
runOnJS
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

// Styles
import mainStyle from '../../styles/main.style';

const GAME_CONSTANTS = {
INITIAL_LIVES: 3,
POINTS_PER_CORRECT: 10,
AUDIO_DELAY: 1000,
NEW_ROUND_DELAY: 2000,
};

// Kıta bilgileri - yüzdelik değerlerle tanımlanmış - mavi ekrandaki etiketlere göre düzenlendi
const CONTINENTS = [
{
id: 1,
name: 'Kuzey Amerika',
image: require('../../assets/cont/namerıca.png'),
targetPosition: { xPercent: 0.18, yPercent: 0.3 }, // Sol üst etiket
widthPercent: 0.15,
heightPercent: 0.2
},
{
id: 2,
name: 'Güney Amerika',
image: require('../../assets/cont/samerıca.png'),
targetPosition: { xPercent: 0.18, yPercent: 0.7 }, // Sol alt etiket
widthPercent: 0.10,
heightPercent: 0.2
},
{
id: 3,
name: 'Avrupa',
image: require('../../assets/cont/eu.png'),
targetPosition: { xPercent: 0.35, yPercent: 0.3 }, // Orta üst etiket
widthPercent: 0.08,
heightPercent: 0.12
},
{
id: 4,
name: 'Afrika',
image: require('../../assets/cont/afrıca.png'),
targetPosition: { xPercent: 0.35, yPercent: 0.7 }, // Orta alt etiket
widthPercent: 0.12,
heightPercent: 0.2
},
{
id: 5,
name: 'Asya',
image: require('../../assets/cont/asıa.png'),
targetPosition: { xPercent: 0.52, yPercent: 0.3 }, // Sağ üst etiket
widthPercent: 0.16,
heightPercent: 0.2
},
{
id: 6,
name: 'Avustralya',
image: require('../../assets/cont/aus.png'),
targetPosition: { xPercent: 0.52, yPercent: 0.7 }, // Sağ alt etiket
widthPercent: 0.12,
heightPercent: 0.12
},
];

export default function ContinentPuzzleGame() {
const [score, setScore] = useState(0);
const [lives, setLives] = useState(GAME_CONSTANTS.INITIAL_LIVES);
const [gameOver, setGameOver] = useState(false);
const [sound, setSound] = useState(false);
const [placedContinents, setPlacedContinents] = useState([]);
const [continents, setContinents] = useState([]);

// Her kıta için pozisyon ve animasyon değerleri
const positions = useRef(
CONTINENTS.map(() => ({
x: useSharedValue(0),
y: useSharedValue(0),
isPlaced: useSharedValue(false),
scale: useSharedValue(1), // Animasyon için ölçek
zIndex: useSharedValue(1),
startX: useSharedValue(0),
startY: useSharedValue(0),
}))
).current;

const playSound = async (soundFile) => {
try {
const { sound } = await Audio.Sound.createAsync(soundFile);
await sound.playAsync();
sound.setOnPlaybackStatusUpdate((status) => {
if (status.didJustFinish) {
sound.unloadAsync();
}
});
setSound(true);
setTimeout(() => setSound(false), 1500);
} catch (error) {
console.error('Ses efekti hatası:', error);
}
};

const playAudio = async (type, message = '') => {
try {
await Speech.stop();

  if (type === 'correct') {
    await playSound(require('../../assets/sound/correct-choice.wav'));
  } else if (type === 'wrong') {
    await playSound(require('../../assets/sound/wronganswer.mp3'));
  }

  if (message) {
    setTimeout(async () => {
      await Speech.speak(message, {
        language: 'tr',
        pitch: 1.2,
        rate: 1.0,
      });
    }, GAME_CONSTANTS.AUDIO_DELAY);
  }
} catch (error) {
  console.error('Ses hatası:', error);
}

};

// Yüzdelikleri piksel değerlerine dönüştürme
const getPixelValues = (continent) => {
const width = GAME_AREA_WIDTH * continent.widthPercent;
const height = GAME_AREA_HEIGHT * 0.6 * continent.heightPercent;
const x = GAME_AREA_WIDTH * continent.targetPosition.xPercent;
const y = (GAME_AREA_HEIGHT * 0.6) * continent.targetPosition.yPercent;

return { width, height, x, y };

};

// Doğru yerleştirme geri bildirimi
const handleCorrectPlacement = (continentId, continentName, index) => {
if (!placedContinents.includes(continentId)) {
setPlacedContinents(prev => [...prev, continentId]);
const newScore = score + GAME_CONSTANTS.POINTS_PER_CORRECT;
setScore(newScore);

  // Kutlama sesi ve mesaj
  playAudio('correct', `${continentName} doğru yere yerleştirildi! Tebrikler!`);

  // Animasyon: Kıta büyüyüp küçülsün
  positions[index].scale.value = withSpring(1.2, { damping: 10 }, () => {
    positions[index].scale.value = withSpring(1, { damping: 10 });
  });

  showMessage({
    message: 'Tebrikler!',
    description: `${continentName} doğru yere yerleştirildi!`,
    type: 'success',
    duration: 2000,
  });

  if (Platform.OS === 'ios' || Platform.OS === 'android') {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  }

  if (placedContinents.length + 1 === CONTINENTS.length) {
    setTimeout(() => {
      playAudio('', 'Tebrikler! Tüm kıtaları doğru yerleştirdiniz!');
      showMessage({
        message: 'Oyun Tamamlandı!',
        description: `Toplam puanın: ${newScore}`,
        type: 'success',
        duration: 3000,
      });
      setGameOver(true);
    }, GAME_CONSTANTS.NEW_ROUND_DELAY);
  }
}

};

// Yanlış yerleştirme geri bildirimi
const handleWrongPlacement = (continentName, targetContinentName, index) => {
if (lives > 0) {
setLives(prev => prev - 1);
}

// Hata sesi ve mesaj
playAudio('wrong', `${continentName} yanlış yere yerleştirildi!`);

// Animasyon: Kıta sallansın
positions[index].x.value = withSpring(positions[index].x.value + 10, { damping: 5 }, () => {
  positions[index].x.value = withSpring(positions[index].x.value - 10, { damping: 5 }, () => {
    positions[index].x.value = withSpring(positions[index].startX.value, { damping: 10 });
  });
});

showMessage({
  message: 'Yanlış!',
  description: `${continentName} ${targetContinentName} yerine yerleştirilemez!`,
  type: 'warning',
  duration: 2000,
});

if (lives <= 1) {
  setTimeout(() => {
    setGameOver(true);
    playAudio('', 'Oyun bitti! Canların tükendi.');
    showMessage({
      message: 'Oyun Bitti!',
      description: `Toplam puanın: ${score}`,
      type: 'danger',
      duration: 3000,
    });
  }, 500);
}

};

const createPanGesture = (index) => {
return Gesture.Pan()
.onStart(() => {
console.log(Sürükleme başladı - Kıta: ${CONTINENTS[index].name});
positions[index].startX.value = positions[index].x.value;
positions[index].startY.value = positions[index].y.value;
})
.onUpdate((event) => {
if (positions[index].isPlaced.value && !gameOver) {
console.log(${CONTINENTS[index].name} zaten yerleştirilmiş, hareket etmiyor);
return;
}

    positions[index].x.value = positions[index].startX.value + event.translationX;
    positions[index].y.value = positions[index].startY.value + event.translationY;
    
    console.log(`Sürükleniyor - Kıta: ${CONTINENTS[index].name}, X: ${positions[index].x.value}, Y: ${positions[index].y.value}`);
  })
  .onEnd(() => {
    console.log(`Sürükleme bitti - Kıta: ${CONTINENTS[index].name}`);
    
    if (positions[index].isPlaced.value && !gameOver) {
      console.log(`${CONTINENTS[index].name} zaten yerleştirilmiş, işlem yapılmıyor`);
      return;
    }

    const pixelValues = getPixelValues(CONTINENTS[index]);
    
    const x = positions[index].x.value;
    const y = positions[index].y.value;
    const pieceWidth = pixelValues.width;
    const pieceHeight = pixelValues.height;

    let isPlacedCorrectly = false;
    let isPlacedWrongly = false;
    let targetContinentIndex = -1;

    const targetX = pixelValues.x;
    const targetY = pixelValues.y;
    const targetWidth = pixelValues.width;
    const targetHeight = pixelValues.height;

    console.log(`Hedef pozisyon - X: ${targetX}, Y: ${targetY}, Genişlik: ${targetWidth}, Yükseklik: ${targetHeight}`);
    console.log(`Parça pozisyonu - X: ${x}, Y: ${y}, Genişlik: ${pieceWidth}, Yükseklik: ${pieceHeight}`);

    const overlapX = Math.max(0, Math.min(x + pieceWidth, targetX + targetWidth) - Math.max(x, targetX));
    const overlapY = Math.max(0, Math.min(y + pieceHeight, targetY + targetHeight) - Math.max(y, targetY));
    const overlapArea = overlapX * overlapY;
    const pieceArea = pieceWidth * pieceHeight;
    const overlapPercentage = overlapArea / pieceArea;
    const overlapThreshold = 0.3;

    console.log(`Çakışma hesaplaması - X çakışması: ${overlapX}, Y çakışması: ${overlapY}`);
    console.log(`Çakışma alanı: ${overlapArea}, Parça alanı: ${pieceArea}`);
    console.log(`Çakışma yüzdesi: ${overlapPercentage}, Eşik değeri: ${overlapThreshold}`);

    if (overlapPercentage > overlapThreshold) {
      console.log(`${CONTINENTS[index].name} doğru hedefe yerleştirildi! (${overlapPercentage.toFixed(2)} > ${overlapThreshold})`);
      positions[index].x.value = withSpring(targetX, { damping: 20 });
      positions[index].y.value = withSpring(targetY, { damping: 20 });
      positions[index].isPlaced.value = true;
      isPlacedCorrectly = true;
      runOnJS(handleCorrectPlacement)(CONTINENTS[index].id, CONTINENTS[index].name, index);
    } else {
      console.log(`${CONTINENTS[index].name} doğru hedefe yerleştirilmedi, diğer hedefleri kontrol ediyor`);
      
      for (let i = 0; i < CONTINENTS.length; i++) {
        if (i !== index) {
          const otherPixelValues = getPixelValues(CONTINENTS[i]);
          const otherOverlapX = Math.max(0, Math.min(x + pieceWidth, otherPixelValues.x + otherPixelValues.width) - Math.max(x, otherPixelValues.x));
          const otherOverlapY = Math.max(0, Math.min(y + pieceHeight, otherPixelValues.y + otherPixelValues.height) - Math.max(y, otherPixelValues.y));
          const otherOverlapArea = otherOverlapX * otherOverlapY;
          const otherOverlapPercentage = otherOverlapArea / pieceArea;

          console.log(`${CONTINENTS[i].name} hedefiyle çakışma kontrolü: ${otherOverlapPercentage.toFixed(2)}`);

          if (otherOverlapPercentage > overlapThreshold) {
            console.log(`${CONTINENTS[index].name}, ${CONTINENTS[i].name} hedefine yanlış yerleştirildi!`);
            positions[index].x.value = withSpring(otherPixelValues.x, { damping: 20 });
            positions[index].y.value = withSpring(otherPixelValues.y, { damping: 20 });
            isPlacedWrongly = true;
            targetContinentIndex = i;
            break;
          }
        }
      }

      if (isPlacedWrongly && targetContinentIndex !== -1) {
        console.log(`Yanlış yerleştirme işleniyor: ${CONTINENTS[index].name} -> ${CONTINENTS[targetContinentIndex].name}`);
        setTimeout(() => {
          positions[index].x.value = withSpring(positions[index].startX.value, { damping: 15 });
          positions[index].y.value = withSpring(positions[index].startY.value, { damping: 15 });
        }, 500);
        runOnJS(handleWrongPlacement)(CONTINENTS[index].name, CONTINENTS[targetContinentIndex].name, index);
      } else if (!isPlacedCorrectly) {
        console.log(`${CONTINENTS[index].name} hiçbir hedefe yerleştirilmedi, başlangıç konumuna dönüyor`);
        positions[index].x.value = withSpring(positions[index].startX.value, { damping: 15 });
        positions[index].y.value = withSpring(positions[index].startY.value, { damping: 15 });
      }
    }

    positions[index].startX.value = positions[index].x.value;
    positions[index].startY.value = positions[index].y.value;
  })
  .minPointers(1)
  .maxPointers(1);

};

// Animasyon stilleri
const getAnimatedStyles = (index) => {
return useAnimatedStyle(() => {
return {
transform: [
{ translateX: positions[index].x.value },
{ translateY: positions[index].y.value },
{ scale: positions[index].scale.value },
],
opacity: positions[index].isPlaced.value ? 0.7 : 1,
zIndex: positions[index].zIndex.value,
};
});
};

const startGame = async () => {
setScore(0);
setLives(GAME_CONSTANTS.INITIAL_LIVES);
setGameOver(false);
setPlacedContinents([]);
const shuffledContinents = [...CONTINENTS].sort(() => Math.random() - 0.5);
setContinents(shuffledContinents);

// Kahverengi alan (draggableContainer) içinde kıtaları yerleştir
setTimeout(() => {
  const brownAreaY = GAME_AREA_HEIGHT * 0.65;
  const brownAreaHeight = GAME_AREA_HEIGHT * 0.35;
  const itemsPerRow = 3;
  
  positions.forEach((position, index) => {
    const row = Math.floor(index / itemsPerRow);
    const col = index % itemsPerRow;
    
    // Kıtanın piksel değerlerini hesapla
    const pixelValues = getPixelValues(CONTINENTS[index]);
    
    // X pozisyonu ekran genişliğine göre yüzdelik olarak hesaplanıyor
    const startXPercent = (col + 1) / (itemsPerRow + 1);
    const startX = GAME_AREA_WIDTH * startXPercent - pixelValues.width / 2;
    
    // Y pozisyonu kahverengi alanın içinde yüzdelik olarak hesaplanıyor
    const verticalPaddingPercent = 0.1; 
    const startY = brownAreaY + (brownAreaHeight * verticalPaddingPercent) + (row * brownAreaHeight * 0.25);
    
    position.x.value = startX;
    position.y.value = startY;
    position.startX.value = startX;
    position.startY.value = startY;
    position.isPlaced.value = false;
    position.scale.value = 1;
    position.zIndex.value = 1;
  });
}, 0);

await playAudio('', 'Kıta Eşleştirme oyununa hoş geldiniz! Kıtaları doğru konumlara sürükleyin.');
setSound(true);
setTimeout(() => setSound(false), 3000);

};

useEffect(() => {
const initGame = async () => {
await startGame();
};
initGame();
return () => {
Speech.stop();
};
}, []);

return (
<GestureHandlerRootView style={{ flex: 1 }}>
<ImageBackground
source={require('../../assets/background.jpg')}
style={styles.background}
>
Kıta Eşleştirme

    <View style={styles.statsContainer}>
      <Text style={styles.score}>🏆: {score}</Text>
      <Text style={styles.lives}>{'❤️'.repeat(lives)}</Text>
    </View>

    <View style={styles.gameContainer}>
      <View style={styles.mapContainer}>
        <Image 
          source={require('../../assets/cont/world.png')} 
          style={styles.worldMap}
          resizeMode="contain"
        />
      </View>

      <View style={styles.targetAreasContainer}>
        {CONTINENTS.map((continent) => {
          const pixelValues = getPixelValues(continent);
          
          return (
            <View
              key={`target-${continent.id}`}
              style={[
                styles.targetArea,
                {
                  left: pixelValues.x,
                  top: pixelValues.y,
                  width: pixelValues.width,
                  height: pixelValues.height,
                  borderColor: placedContinents.includes(continent.id) ? 'green' : '#FF6347',
                  backgroundColor: placedContinents.includes(continent.id) ? 'rgba(0, 255, 0, 0.1)' : 'rgba(255, 255, 255, 0.2)',
                },
              ]}
            >
              <Text style={styles.targetLabel}>{continent.name}</Text>
            </View>
          );
        })}
      </View>

      <View style={styles.draggableContainer}>
        {CONTINENTS.map((continent, index) => {
          const pixelValues = getPixelValues(continent);
          const panGesture = createPanGesture(index);
          const animatedStyles = getAnimatedStyles(index);

          return (
            <GestureDetector key={`continent-${continent.id}`} gesture={panGesture}>
              <Animated.View
                style={[
                  styles.draggableContinent,
                  {
                    width: pixelValues.width,
                    height: pixelValues.height,
                  },
                  animatedStyles,
                ]}
              >
                <Image 
                  source={continent.image} 
                  style={styles.continentImage}
                  resizeMode="contain"
                />
              </Animated.View>
            </GestureDetector>
          );
        })}
      </View>
    </View>

    {placedContinents.length === CONTINENTS.length && (
      <View style={styles.gameOverContainer}>
        <Text style={styles.gameOverText}>Oyun Tamamlandı!</Text>
        <Text style={styles.finalScore}>Toplam Puan: {score}</Text>
        <TouchableOpacity
          style={styles.restartButton}
          onPress={startGame}
          disabled={sound}
        >
          <Text style={styles.restartText}>
            <FontAwesome name='refresh' size={24} color='white' />
          </Text>
        </TouchableOpacity>
      </View>
    )}

    {!sound && <Menu active='games' />}
  </ImageBackground>
</GestureHandlerRootView>

);
}

const { width, height } = Dimensions.get('window');
const GAME_AREA_WIDTH = width > 600 ? width * 0.8 : width * 0.95;
const GAME_AREA_HEIGHT = height * 0.6;

const styles = StyleSheet.create({
background: {
flex: 1,
width: '100%',
height: '100%',
},
title: {
fontSize: 24,
fontFamily: 'Iceberg_400Regular',
textAlign: 'center',
marginBottom: 20,
color: '#333',
paddingTop: 50,
},
statsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 20,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
padding: 15,
borderRadius: 15,
marginHorizontal: 20,
},
score: {
fontSize: 20,
fontFamily: 'Iceberg_400Regular',
color: '#333',
paddingHorizontal: 20,
},
lives: {
fontSize: 20,
fontFamily: 'Iceberg_400Regular',
color: '#333',
paddingHorizontal: 20,
},
gameContainer: {
width: GAME_AREA_WIDTH,
height: GAME_AREA_HEIGHT,
alignSelf: 'center',
position: 'relative',
},
mapContainer: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: GAME_AREA_HEIGHT * 0.6,
backgroundColor: '#87CEEB',
borderWidth: 5,
borderColor: '#8B4513',
borderRadius: 10,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
},
worldMap: {
width: '70%',
height: '90%',
opacity: 0.7,
},
targetAreasContainer: {
position: 'absolute',
top: 0,
left: 0,
width: GAME_AREA_WIDTH,
height: GAME_AREA_HEIGHT * 0.6,
zIndex: 2,
},
targetArea: {
position: 'absolute',
borderWidth: 3,
borderRadius: 10,
borderStyle: 'dashed',
justifyContent: 'center',
alignItems: 'center',
zIndex: 3,
borderColor: 'rgba(255, 99, 71, 0.8)',
},
targetLabel: {
color: '#333',
fontSize: 10,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.7)',
padding: 2,
borderRadius: 5,
position: 'absolute',
bottom: 5,
},
draggableContainer: {
position: 'absolute',
top: GAME_AREA_HEIGHT * 0.65,
left: 0,
width: GAME_AREA_WIDTH,
height: GAME_AREA_HEIGHT * 0.35,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#8B4513',
borderWidth: 5,
borderColor: '#8B4513',
borderRadius: 10,
padding: 10,
},
draggableContinent: {
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
margin: 5,
elevation: 5,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
},
continentImage: {
width: '100%',
height: '100%',
},
gameOverContainer: {
position: 'absolute',
top: '40%',
left: '10%',
right: '10%',
backgroundColor: 'rgba(255, 255, 255, 0.95)',
padding: 20,
borderRadius: 15,
alignItems: 'center',
zIndex: 10,
},
gameOverText: {
fontSize: 24,
fontFamily: 'Iceberg_400Regular',
color: '#333',
marginBottom: 10,
},
finalScore: {
fontSize: 20,
fontFamily: 'Iceberg_400Regular',
color: '#333',
marginBottom: 20,
},
restartButton: {
backgroundColor: '#4CAF50',
padding: 15,
borderRadius: 10,
width: '100%',
alignItems: 'center',
},
restartText: {
color: 'white',
fontSize: 18,
fontFamily: 'Iceberg_400Regular',
},
});
Error target place loc:

Error start loc cont puzzle piece