document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.891, 139.824], 16); // 初期位置を指定
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);


// ピンの座標を指定
    var pin1LatLng = L.latLng([38.929707, 139.859449]);
    var pin2LatLng = L.latLng([38.934472, 139.843791]);

// ピンの情報
    var pins = [
        { name: "町田商店", coordinates: pin1LatLng },
        { name: "ラーメン大", coordinates: pin2LatLng }
    ];


//現在のピンと、最後に触ったピンの初期化
    var pinIndex = null;
    var lastClickedPin = null;
    
    
    var gpsmarker = L.marker([0, 0]).addTo(mymap); // 初期値を[0, 0]に設定
    gpsmarker.bindPopup("現在の位置").openPopup();

    var watchId = null;
    var nTrial = 100;

// GPS停止
    function stopGPS() {
        console.log("Stopping GPS");
        navigator.geolocation.clearWatch(watchId); // 監視を停止
        document.getElementById("title").textContent = "stop";
        gpsmarker.setPopupContent("停めました");
        watchId = null;
    }

// GPSの監視を開始
    function tryWatchGPS() {
        stopGPS();
        nTrial = 100;
        pinIndex = null;

        // 2つのピンを表示
        var pin1 = L.marker(pin1LatLng).addTo(mymap).bindPopup("町田商店");
        var pin2 = L.marker(pin2LatLng).addTo(mymap).bindPopup("ラーメン大");

        // クリックしたピンの情報を保存
        pin1.on('click', function () {
            lastClickedPin = pins[0];
        });

        pin2.on('click', function () {
            lastClickedPin = pins[1];
        });

        // 現在の位置をピンとして設定
        navigator.geolocation.getCurrentPosition((pos) => {
        	
            // Geolocation APIから取得した位置情報を元に Leaflet の LatLng オブジェクトを作成
            var currentLatLng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
            
            // マップを取得した位置に移動させる
            mymap.panTo(currentLatLng);
            
            // GPS マーカーの位置を取得した位置に設定し、ポップアップの内容を更新
            gpsmarker.setLatLng(currentLatLng).setPopupContent("現在の位置").openPopup();
        });

        // ピン情報を表示
        document.getElementById("pin-info").textContent = `Pin 1: ${pins[0].name}, Pin 2: ${pins[1].name}`;
        
        // ユーザーの位置情報の変化を監視
        watchId = navigator.geolocation.watchPosition(
        
            onSuccess, onError, { maximumAge: 0, timeout: 3000, enableHighAccuracy: true });
            
            
	// ゲームが開始されたことを示すメッセージを表示
        document.getElementById("title").textContent = "START!!";
    }

    //成功した場合
    function onSuccess(pos) {
    	
    // Geolocation APIから取得した位置情報を元にLeafletのLatLngオブジェクトを作成
        var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
        
    // マップを取得した位置に移動させる
        mymap.panTo(latlng);
        
   // コンソールに現在の座標をログとして出力
        console.log(latlng);

   // ピンが選択されている場合の処理
        if (pinIndex !== null) {
        // ピンが選択されている場合の処理
        	
        // 選択されたピンの座標を取得
            var pinCoordinates = pins[pinIndex].coordinates;
            
        // 選択されたピンの座標をLeafletのLatLngオブジェクトに変換
            var pinLatLng = L.latLng(pinCoordinates);
            
        // 現在位置から選択されたピンまでの距離を計算
            var distance = latlng.distanceTo(pinLatLng);
            
	// GPSマーカーの位置を現在位置に設定し、ポップアップの内容を更新
            gpsmarker.setLatLng(latlng).setPopupContent(
                `距離: ${distance.toFixed(2)} メートル` //toFixed(2)=小数第2位まで
            ).openPopup();
        }
    }

//エラーの場合
    function onError(err) {
        var restN = "あと" + (--nTrial) + "回試行します。";
        gpsmarker.setPopupContent("捕捉失敗:" + restN).openPopup();
        if (nTrial <= 0) {
            navigator.geolocation.clearWatch(watchId);
        }
    }

    function finishGame() {
    // 最後にクリックされたピンが存在する場合
        if (lastClickedPin !== null) {
        	
        // GPS 監視を停止
            stopGPS();
        
        // 最後にクリックされたピンの座標を取得
            var pinCoordinates = lastClickedPin.coordinates;
            
        // 最後にクリックされたピンの座標を Leaflet の LatLng オブジェクトに変換
            var pinLatLng = L.latLng(pinCoordinates);
            
        // 現在の地図の中心から最後にクリックされたピンまでの距離を計算
            var distance = mymap.getCenter().distanceTo(pinLatLng);
            
        // アラートを表示してゲーム終了メッセージを表示
            alert(`ゲーム終了！\n${lastClickedPin.name}への距離: ${distance.toFixed(2)} メートル`);
        } else {
        	
        // 最後にクリックされたピンが存在しない場合、ゲーム開始メッセージを表示
            alert("まずはSTARTボタンを押してゲームを始めてください！");
        }
    }

    // 初回の位置取得
    navigator.geolocation.getCurrentPosition((pos) => {
    	
    // Geolocation APIから取得した位置情報を元にLeafletのLatLngオブジェクトを作成
        var currentLatLng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
        
    // マップを取得した位置に移動させ、指定されたズームレベルで設定
        mymap.setView(currentLatLng, 16);
        
    // GPS マーカーの位置を取得した位置に設定し、ポップアップの内容を更新
        gpsmarker.setLatLng(currentLatLng).setPopupContent("現在の位置").openPopup();
    });

    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
    document.getElementById("finish").addEventListener("click", finishGame);

});
