garvit-exe · February 27, 2025 13:44 · garvit-exe · Feb 27, 2025
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>GeoGuessr</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <style type="text/css">
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            .gm-iv-address {
                display: none;
            }

            button {
                width: 100px;
                height: 25px;
                color: white;
                background-color: red;
            }

            img {
                padding-top: 10px;
            }

            #street-view {
                height: 100%;
                /* Google inverts the colours if you don't have any billing set up.
        We can go around this by adding a counter invert filter on top of the street view */
            }

            #floating-panel {
                position: absolute;
                top: 10px;
                left: 5%;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
                text-align: center;
                font-family: "Roboto", "sans-serif";
                line-height: 30px;
                padding-left: 10px;
                width: 20%;
                height: 30%;
            }

            #floating-panel {
                margin-left: -100px;
            }
        </style>
        <script>
            // Set the starting score of the player to 0
            let score = 0;

            let panorama;

            // Set different places where the player will be spawned
            var places = [
                [{ lat: 60.171001, lng: 24.93935 }, { country: "Finland" }], // Helsinki, Finland
                [{ lat: 48.858093, lng: 2.294694 }, { country: "France" }], // Paris, France
                [
                    { lat: 51.51002, lng: -0.13473 },
                    { country: "Great Britain" },
                ], // London, Great Britain
                [{ lat: 41.8902, lng: 12.4922 }, { country: "Italy" }], // Rome, Italy
                [
                    { lat: 25.195302, lng: 55.272879 },
                    { country: "United Arab Emirates" },
                ], // Dubai, United Arab Emirates
                [{ lat: 1.283404, lng: 103.863134 }, { country: "Singapore" }], // Marina Bay, Singapore
                [{ lat: 29.976768, lng: 31.135538 }, { country: "Egypt" }], // Cairo, Egypt
                [
                    { lat: 40.757876, lng: -73.985592 },
                    { country: "United States" },
                ], // New York, USA
            ];

            let currentPlace =
                places[Math.floor(Math.random() * places.length)]; // Pick a random place to be spawned
            let coordinates = currentPlace[0]; // Get coordinates
            let country = currentPlace[1].country; // Get the name of the country

            // Reload game environment when a round is over
            let reconfigure = () => {
                document.getElementById("score").innerHTML =
                    "Your current score is: " + score;
                currentPlace =
                    places[Math.floor(Math.random() * places.length)];
                coordinates = currentPlace[0];
                country = currentPlace[1].country;

                initialize();
            };

            // Check if guess is correct and then execute reconfiguring function
            const guess = () => {
                var guess = window.prompt("Where are we? ");
                if (guess === country) {
                    score++;
                    alert("Correct! Current Score: " + score);
                    reconfigure();
                } else {
                    score = 0;
                    alert("Incorrect! Current Score: " + score);
                    reconfigure();
                }
            };

            // Set and configure streetview
            function initialize() {
                panorama = new google.maps.StreetViewPanorama(
                    document.getElementById("street-view"),
                    {
                        position: coordinates,
                        pov: { heading: 165, pitch: 0 },
                        zoom: 1,
                    }
                );
            }
        </script>
    </head>
    <body>
        <!-- The guess panel on top of the street view -->
        <div id="floating-panel">
            <img src="./location.png" alt="icon" width="50px" height="50px" />
            <h1>If you know where we are, make a guess!</h1>
            <h2 id="score"></h2>
            <button onclick="guess()">Guess</button>
        </div>

        <!-- Street view -->
        <div id="street-view"></div>

        <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
        <script
            src="https://maps.googleapis.com/maps/api/js?key={YOUR-GOOGLE-MAPS-JAVSCRIPT-API-KEY}&callback=initialize&libraries=&v=weekly"
            async
        ></script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>GeoGuessr</title>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
	<style type="text/css">
	html,
	body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.gm-iv-address {
	display: none;
	}

	button {
	width: 100px;
	height: 25px;
	color: white;
	background-color: red;
	}

	img {
	padding-top: 10px;
	}

	#street-view {
	height: 100%;
	/* Google inverts the colours if you don't have any billing set up.
	We can go around this by adding a counter invert filter on top of the street view */
	}

	#floating-panel {
	position: absolute;
	top: 10px;
	left: 5%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	text-align: center;
	font-family: "Roboto", "sans-serif";
	line-height: 30px;
	padding-left: 10px;
	width: 20%;
	height: 30%;
	}

	#floating-panel {
	margin-left: -100px;
	}
	</style>
	<script>
	// Set the starting score of the player to 0
	let score = 0;

	let panorama;

	// Set different places where the player will be spawned
	var places = [
	[{ lat: 60.171001, lng: 24.93935 }, { country: "Finland" }], // Helsinki, Finland
	[{ lat: 48.858093, lng: 2.294694 }, { country: "France" }], // Paris, France
	[
	{ lat: 51.51002, lng: -0.13473 },
	{ country: "Great Britain" },
	], // London, Great Britain
	[{ lat: 41.8902, lng: 12.4922 }, { country: "Italy" }], // Rome, Italy
	[
	{ lat: 25.195302, lng: 55.272879 },
	{ country: "United Arab Emirates" },
	], // Dubai, United Arab Emirates
	[{ lat: 1.283404, lng: 103.863134 }, { country: "Singapore" }], // Marina Bay, Singapore
	[{ lat: 29.976768, lng: 31.135538 }, { country: "Egypt" }], // Cairo, Egypt
	[
	{ lat: 40.757876, lng: -73.985592 },
	{ country: "United States" },
	], // New York, USA
	];

	let currentPlace =
	places[Math.floor(Math.random() * places.length)]; // Pick a random place to be spawned
	let coordinates = currentPlace[0]; // Get coordinates
	let country = currentPlace[1].country; // Get the name of the country

	// Reload game environment when a round is over
	let reconfigure = () => {
	document.getElementById("score").innerHTML =
	"Your current score is: " + score;
	currentPlace =
	places[Math.floor(Math.random() * places.length)];
	coordinates = currentPlace[0];
	country = currentPlace[1].country;

	initialize();
	};

	// Check if guess is correct and then execute reconfiguring function
	const guess = () => {
	var guess = window.prompt("Where are we? ");
	if (guess === country) {
	score++;
	alert("Correct! Current Score: " + score);
	reconfigure();
	} else {
	score = 0;
	alert("Incorrect! Current Score: " + score);
	reconfigure();
	}
	};

	// Set and configure streetview
	function initialize() {
	panorama = new google.maps.StreetViewPanorama(
	document.getElementById("street-view"),
	{
	position: coordinates,
	pov: { heading: 165, pitch: 0 },
	zoom: 1,
	}
	);
	}
	</script>
	</head>
	<body>
	<!-- The guess panel on top of the street view -->
	<div id="floating-panel">
	<img src="./location.png" alt="icon" width="50px" height="50px" />
	<h1>If you know where we are, make a guess!</h1>
	<h2 id="score"></h2>
	<button onclick="guess()">Guess</button>
	</div>

	<!-- Street view -->
	<div id="street-view"></div>

	<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
	<script
	src="https://maps.googleapis.com/maps/api/js?key={YOUR-GOOGLE-MAPS-JAVSCRIPT-API-KEY}&callback=initialize&libraries=&v=weekly"
	async
	></script>
	</body>
	</html>