?
<!–?–>
WHERELE
GUESS
// Listen for a keydown event on the entire window
window.addEventListener(‘keydown’, function(event) {
// Check if the Enter key was pressed
if (event.key === ‘Enter’) {
// Prevent any default action
event.preventDefault();
// Get the button by its ID and click it
document.getElementById(‘submit-button’).click();
}
});
// Add an event listener to the button to perform some action when it’s clicked
document.getElementById(‘submit-button’).addEventListener(‘click’, function() {
});
<!– Facebook button
–>
<!– Instagram button
–>
SHARE WITH FRIENDS
let activeIndicatorIndex = 1;
initializeGuessBoxes();
let hasWon = false;
const suggestionsData = [
“AFGHANISTAN”, “ALBANIA”, “ALGERIA”, “ANDORRA”, “ANGOLA”, “ANTIGUA AND BARBUDA”, “ARGENTINA”, “ARMENIA”, “AUSTRALIA”, “AUSTRIA”, “AZERBAIJAN”,
“BAHAMAS”, “BAHRAIN”, “BANGLADESH”, “BARBADOS”, “BELARUS”, “BELGIUM”, “BELIZE”, “BENIN”, “BHUTAN”, “BOLIVIA”, “BOSNIA AND HERZEGOVINA”, “BOTSWANA”, “BRAZIL”, “BRUNEI”, “BULGARIA”, “BURKINA FASO”, “BURUNDI”,
“CAPE VERDE”, “CAMBODIA”, “CAMEROON”, “CANADA”, “CENTRAL AFRICAN REPUBLIC”, “CHAD”, “CHILE”, “CHINA”, “COLOMBIA”, “COMOROS”, “COSTA RICA”, “COTE D’IVOIRE”, “CROATIA”, “CUBA”, “CYPRUS”, “CZECHIA”, “DEMOCRATIC REPUBLIC OF THE CONGO”, “REPUBLIC OF THE CONGO”,
“DENMARK”, “DJIBOUTI”, “DOMINICA”, “DOMINICAN REPUBLIC”,
“ECUADOR”, “EGYPT”, “EL SALVADOR”, “EQUATORIAL GUINEA”, “ERITREA”, “ESTONIA”, “ESWATINI”, “ETHIOPIA”,
“FIJI”, “FINLAND”, “FRANCE”,
“GABON”, “GAMBIA”, “GEORGIA”, “GERMANY”, “GHANA”, “GREECE”, “GRENADA”, “GUATEMALA”, “GUINEA”, “GUINEA-BISSAU”, “GUYANA”,
“HAITI”, “HONDURAS”, “HUNGARY”,
“ICELAND”, “INDIA”, “INDONESIA”, “IRAN”, “IRAQ”, “IRELAND”, “ISRAEL”, “ITALY”,
“JAMAICA”, “JAPAN”, “JORDAN”,
“KAZAKHSTAN”, “KENYA”, “KIRIBATI”, “KOSOVO”, “KUWAIT”, “KYRGYZSTAN”,
“LAOS”, “LATVIA”, “LEBANON”, “LESOTHO”, “LIBERIA”, “LIBYA”, “LIECHTENSTEIN”, “LITHUANIA”, “LUXEMBOURG”,
“MADAGASCAR”, “MALAWI”, “MALAYSIA”, “MALDIVES”, “MALI”, “MALTA”, “MARSHALL ISLANDS”, “MAURITANIA”, “MAURITIUS”, “MEXICO”, “MICRONESIA”, “MOLDOVA”, “MONACO”, “MONGOLIA”, “MONTENEGRO”, “MOROCCO”, “MOZAMBIQUE”, “MYANMAR”,
“NAMIBIA”, “NAURU”, “NEPAL”, “NETHERLANDS”, “NEW ZEALAND”, “NICARAGUA”, “NIGER”, “NIGERIA”, “NORTH KOREA”, “NORTH MACEDONIA”, “NORWAY”,
“OMAN”,
“PAKISTAN”, “PALAU”, “PALESTINE”, “PANAMA”, “PAPUA NEW GUINEA”, “PARAGUAY”, “PERU”, “PHILIPPINES”, “POLAND”, “PORTUGAL”,
“QATAR”,
“ROMANIA”, “RUSSIA”, “RWANDA”,
“SAINT KITTS AND NEVIS”, “SAINT LUCIA”, “SAINT VINCENT AND THE GRENADINES”, “SAMOA”, “SAN MARINO”, “SAO TOME AND PRINCIPE”, “SAUDI ARABIA”, “SENEGAL”, “SERBIA”, “SEYCHELLES”, “SIERRA LEONE”, “SINGAPORE”, “SLOVAKIA”, “SLOVENIA”, “SOLOMON ISLANDS”, “SOMALIA”, “SOUTH AFRICA”, “SOUTH KOREA”, “SOUTH SUDAN”, “SPAIN”, “SRI LANKA”, “SUDAN”, “SURINAME”, “SWEDEN”, “SWITZERLAND”, “SYRIA”,
“TAIWAN”, “TAJIKISTAN”, “TANZANIA”, “THAILAND”, “TIMOR-LESTE”, “TOGO”, “TONGA”, “TRINIDAD AND TOBAGO”, “TUNISIA”, “TURKEY”, “TURKMENISTAN”, “TUVALU”,
“UGANDA”, “UKRAINE”, “UNITED ARAB EMIRATES”, “UNITED KINGDOM”, “UNITED STATES OF AMERICA”, “URUGUAY”, “UZBEKISTAN”,
“VANUATU”, “VATICAN CITY”, “VENEZUELA”, “VIETNAM”,
“YEMEN”,
“ZAMBIA”, “ZIMBABWE”
];
const searchBox = document.getElementById(“search-box”);
const suggestions = document.getElementById(“suggestions”);
const submitButton = document.getElementById(“submit-button”);
const gameResult = document.getElementById(“game-result”);
const cityImage = document.getElementById(“city-image”);
const incorrectMessage = document.getElementById(“incorrect-message”);
const imageIndicatorsContainer = document.getElementById(“image-indicators”);
const correctCity = “SPAIN”;
let answer = correctCity
let currentImageIndex = 1;
const maxImages = 5;
let guessCount = 0;
searchBox.addEventListener(“input”, () => {
const searchText = searchBox.value.toLowerCase();
if (searchText.trim() === “”) {
suggestions.style.display = “none”;
return;
}
const filteredSuggestions = suggestionsData.filter(suggestion => suggestion.toLowerCase().includes(searchText));
updateSuggestions(filteredSuggestions);
});
function initializeGuessBoxes() {
const firstGuessBox = document.getElementById(‘guess-box-1’);
firstGuessBox.textContent = ‘GUESS 1/5’;
}
function fireConfetti() {
confetti({
particleCount: 150, // number of confetti particles
spread: 70, // spread angle in degrees
origin: { y: 0.6 } // set the Y position of the confetti source
});
}
function unlockAllImages() {
const indicators = document.querySelectorAll(“.image-indicator”);
indicators.forEach(indicator => {
indicator.classList.add(“viewed”);
let idx = parseInt(indicator.id.split(“-“)[1]);
indicator.addEventListener(“click”, () => viewImageByIndex(idx));
});
}
submitButton.addEventListener(“click”, () => {
const userGuess = searchBox.value;
displayGuess(userGuess);
if (userGuess.toLowerCase() === correctCity.toLowerCase()) {
//currentImageIndex = maxImages; // Set the current image index to the max value
hasWon = true;
for (let i = guessCount + 1; i {
indicator.classList.add(“completed”);
});
unlockAllImages(); // Allow the user to view all images
} else {
updateCityImage();
if (guessCount === 5) {
gameResult.textContent = `The correct answer was ${answer}`;
searchBox.disabled = true;
submitButton.disabled = true;
}
}
searchBox.value = “”;
});
function updateCityImage() {
if (currentImageIndex {
indicator.classList.add(“viewed”);
});
}
function unlockAllImages() {
for (let i = 1; i {
currentImageIndex = i;
cityImage.src = `images/${currentImageIndex}.jpg`;
updateActiveIndicator(currentImageIndex);
});
}
}
function updateSuggestions(suggestionList) {
const suggestionContainer = document.getElementById(“suggestions”);
suggestionContainer.innerHTML = “”;
if (suggestionList.length > 0) {
suggestionContainer.style.display = “block”;
suggestionList.forEach(suggestion => {
const suggestionElement = document.createElement(“div”);
suggestionElement.className = “suggestion”;
suggestionElement.textContent = suggestion;
suggestionElement.addEventListener(“click”, () => {
searchBox.value = suggestion;
suggestionContainer.style.display = “none”;
});
suggestionContainer.appendChild(suggestionElement);
});
} else {
suggestionContainer.style.display = “none”;
}
}
function displayGuess(guess) {
guessCount++;
const guessBox = document.getElementById(`guess-box-${guessCount}`);
if (guessBox) {
guessBox.textContent = guess;
if (guess.toLowerCase() === correctCity.toLowerCase()) {
guessBox.classList.add(‘correct-guess’); // Turn the box green for correct guesses
} else {
guessBox.classList.add(‘incorrect-guess’); // Turn the box red for incorrect guesses
}
guessBox.classList.add(‘guess-made’); // Add the new class to change the border to solid
}
// If correct guess, unlock all images and show the last one
if (guess.toLowerCase() === correctCity.toLowerCase()) {
unlockAllIndicators();
}
// Increment the active indicator after every guess
if (activeIndicatorIndex < maxImages) {
activeIndicatorIndex++;
}
// Prepare the next guess box
if (guessCount {
indicator.classList.remove(“active”);
});
const targetIndicator = document.querySelector(`.image-indicator:nth-child(${index})`);
if (targetIndicator) {
targetIndicator.classList.add(“active”);
}
}
// Image indicator functions
for (let i = 1; i {
cityImage.src = `images/${i}.jpg`;
setActiveIndicator(i);
});
// Clear ‘active’ from all indicators
//const allIndicators = document.querySelectorAll(“.image-indicator”);
//allIndicators.forEach((ind) => {
//ind.classList.remove(“active”);
//});
// Add ‘active’ to the clicked indicator
//indicator.classList.add(“active”);
// Update the image based on the clicked indicator
//cityImage.src = `file:///C:/Users/benra_000/OneDrive/Wherele/Test%20pictures/${i}.jpg`;
// Highlight the clicked indicator
//setActiveIndicator(i);
//});
imageIndicatorsContainer.appendChild(indicator);
}
// Highlight the first indicator
document.querySelector(“.image-indicator”).classList.add(“active”);
function viewImagePostWin(index) {
cityImage.src = `images/${index}.jpg`;
setActiveIndicator(index); // No need to update the currentImageIndex after winning
}
function viewPreviousImage(index) {
cityImage.src = `images/${index}.jpg`;
// Highlight the clicked indicator and reset others
const indicators = document.querySelectorAll(“.image-indicator”);
indicators.forEach((indicator, idx) => {
if (idx + 1 === index) {
indicator.classList.add(“active”);
} else {
indicator.classList.remove(“active”);
}
});
}
function updateActiveIndicator(index) {
const indicators = document.querySelectorAll(“.image-indicator”);
indicators.forEach((indicator, idx) => {
if (idx === index – 1) {
indicator.classList.add(“active”);
indicator.style.display = ‘inline-block’; // Show the current indicator
} else {
indicator.classList.remove(“active”);
}
if (indicator.classList.contains(“completed”)) {
return; // Skip the ones already completed
}
if (idx {
indicator.addEventListener(“click”, () => {
if (hasWon) {
viewImagePostWin(idx + 1);
} else {
viewPreviousImage(idx + 1);
}
});
indicator.style.display = ‘inline-block’;
});
}
function updateIndicatorsDisplay() {
const indicators = document.querySelectorAll(“.image-indicator”);
indicators.forEach((indicator, idx) => {
if (idx + 1 === currentImageIndex) {
indicator.classList.add(“active”);
} else {
indicator.classList.remove(“active”);
}
});
}
function viewImageByIndex(index) {
if(hasWon) {
viewImagePostWin(index);
} else {
cityImage.src = `images/${index}.jpg`;
lastViewedImageIndex = index;
updateActiveIndicator(lastViewedImageIndex);
}
}
// Highlight the first indicator
document.querySelector(“.image-indicator”).classList.add(“active”);
document.addEventListener(‘DOMContentLoaded’, function() {
// Reference to the overlay and its content
const helpOverlay = document.getElementById(‘help-overlay’);
const helpContent = document.getElementById(‘help-content’);
document.getElementById(‘help-button’).addEventListener(‘click’, function() {
helpOverlay.style.display = ‘block’;
});
document.getElementById(‘close-help’).addEventListener(‘click’, function() {
helpOverlay.style.display = ‘none’;
});
// Event listener to detect clicks on the document
document.addEventListener(‘click’, function(event) {
// Check if the click was outside the help content and the help button
if (!helpContent.contains(event.target) && !event.target.matches(‘#help-button’)) {
helpOverlay.style.display = ‘none’;
}
});
});
document.getElementById(‘share-button’).addEventListener(‘click’, function() {
let shareText = “”;
let alertMessage = “”; // Message to show in the alert
// Assuming ‘hasWon’ and ‘guessCount’ are defined in your game’s logic
if (hasWon) {
// User has won
shareText = `I got WHERELE in ${guessCount} / 5 guesses today. Can you beat my score? Play now: wherele.app`;
alertMessage = ‘Your game result has been copied to your clipboard. Paste it in a message and send to your friends!’;
} else if (guessCount === 5) {
// User has used all guesses
shareText = `I used all my guesses at WHERELE today but couldn’t get the correct answer. Can you do better? Play now: wherele.app`;
alertMessage = ‘Your game result has been copied to your clipboard. Paste it in a message and send to your friends!’;
} else {
// The game is still ongoing or the user hasn’t started playing
shareText = `I’m playing WHERELE, the game where you use pictures to guess the location. Play now: wherele.app`;
alertMessage = ‘Info about this game copied to your clipboard! Paste it in a message and invite friends to play!’;
}
// Use the Clipboard API to copy the text to the clipboard
navigator.clipboard.writeText(shareText).then(function() {
// Inform the user that the text has been copied
alert(alertMessage);
})
.catch(function(error) {
// Handle any errors
alert(‘Failed to copy text: ‘ + error);
});
});
–>
<!– Instagram button
–>
SHARE WITH FRIENDS
Welcome to WHERELE
HOW TO PLAY
Use the picture provided to guess the name of the country.
Each incorrect guess reveals a new picture from the country.
To skip a picture leave the input box blank and click GUESS.
That’s it, have fun.
CloseUse the pictures provided to guess the name of the country in which they were taken.
Each picture is taken in the same country. You are trying to guess just one country.
The maximum number of pictures you will see is five. Therefore, you have five chances to guess the country.
Each incorrect guess reveals a new picture from that same country.
To skip a picture leave the input box blank and click GUESS.
BEN RANKIN 