Skip to content

Commit

Permalink
Updated etymology game
Browse files Browse the repository at this point in the history
  • Loading branch information
@ToonTalk
ToonTalk committed Oct 18, 2024
1 parent aacd368 commit 036d074
Showing 1 changed file with 229 additions and 18 deletions.
247 changes: 229 additions & 18 deletions apps/etymology map game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
<meta charset="UTF-8">
<title>Etymology Globe Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Globe.gl and Three.js via CDN -->
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/globe.gl/dist/globe.gl.min.js"></script>
<!-- Styles -->
<style>
body {
margin: 0;
Expand All @@ -27,6 +25,15 @@
width: 100%;
height: 600px;
margin: 0 auto;
position: relative;
}
#globeViz canvas {
display: block;
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
#word-display {
font-size: 1.5em;
Expand Down Expand Up @@ -81,18 +88,21 @@ <h1>Etymology Globe Game</h1>
<div id="word-display"></div>

<!-- Hint Button and Display -->
<button id="hint-btn" onclick="showHint()">Show Hint</button>
<button id="hint-btn">Show Hint</button>
<div id="hint"></div>

<!-- Globe Container -->
<div id="globeViz"></div>

<div id="result"></div>
<div id="etymology-card"></div>
<button id="next-btn" onclick="nextWord()">Next Word</button>
<button id="next-btn">Next Word</button>
</div>

<script>
<!-- Include Globe.gl via ES Module -->
<script type="module">
import Globe from 'https://unpkg.com/globe.gl/dist/globe.gl.module.js';

// Words data with 'continent' property added
const words = [
{
Expand All @@ -101,7 +111,6 @@ <h1>Etymology Globe Game</h1>
etymology: "From Greek 'astron' meaning 'star' and 'nomos' meaning 'law' or 'arrangement'.",
continent: "Europe"
},
// Add more words as needed
{
word: "Robot",
origin: { lat: 50.0755, lng: 14.4378 }, // Prague, Czech Republic
Expand All @@ -116,7 +125,7 @@ <h1>Etymology Globe Game</h1>
},
{
word: "Safari",
origin: { lat: -1.2921, lng: 36.8219 }, // Nairobi, Kenya (Swahili adoption)
origin: { lat: -1.2921, lng: 36.8219 }, // Nairobi, Kenya
etymology: "From Swahili 'safari', from Arabic 'safar' meaning 'journey'.",
continent: "Africa"
},
Expand All @@ -126,6 +135,199 @@ <h1>Etymology Globe Game</h1>
etymology: "From Arabic 'al-jabr' meaning 'reunion of broken parts'.",
continent: "Asia"
},
{
word: "Tsunami",
origin: { lat: 35.6895, lng: 139.6917 }, // Tokyo, Japan
etymology: "From Japanese 'tsu' meaning 'harbor' and 'nami' meaning 'wave'.",
continent: "Asia"
},
{
word: "Chocolate",
origin: { lat: 19.4326, lng: -99.1332 }, // Mexico City, Mexico
etymology: "From Nahuatl 'xocolātl' meaning 'bitter water'.",
continent: "North America"
},
{
word: "Kangaroo",
origin: { lat: -16.9203, lng: 145.7710 }, // Near Cooktown, Australia
etymology: "From the Guugu Yimithirr word 'gangurru' referring to a grey kangaroo.",
continent: "Australia"
},
{
word: "Vodka",
origin: { lat: 55.7558, lng: 37.6173 }, // Moscow, Russia
etymology: "From Russian 'vodka', diminutive of 'voda' meaning 'water'.",
continent: "Europe"
},
{
word: "Coffee",
origin: { lat: 6.8166, lng: 39.0473 }, // Kaffa, Ethiopia
etymology: "Named after the Kaffa region in Ethiopia where coffee originated.",
continent: "Africa"
},
{
word: "Bungalow",
origin: { lat: 22.5726, lng: 88.3639 }, // Kolkata, India
etymology: "From Hindi 'banglā' meaning 'Bengali' style house.",
continent: "Asia"
},
{
word: "Typhoon",
origin: { lat: 34.6937, lng: 135.5023 }, // Osaka, Japan
etymology: "From Chinese 'tai fung' or Arabic 'ṭūfān', meaning 'great wind'.",
continent: "Asia"
},
{
word: "Tobacco",
origin: { lat: 21.5218, lng: -77.7812 }, // Cuba
etymology: "From the Taino word 'tabako' referring to rolled tobacco leaves.",
continent: "North America"
},
{
word: "Igloo",
origin: { lat: 64.2008, lng: -149.4937 }, // Alaska, USA (Inuit regions)
etymology: "From Inuit 'iglu' meaning 'house'.",
continent: "North America"
},
{
word: "Shampoo",
origin: { lat: 28.6139, lng: 77.2090 }, // Delhi, India
etymology: "From Hindi 'chāmpo', imperative of 'chāmpnā' meaning 'to press, massage'.",
continent: "Asia"
},
{
word: "Cookie",
origin: { lat: 52.3676, lng: 4.9041 }, // Amsterdam, Netherlands
etymology: "From Dutch 'koekje' meaning 'little cake'.",
continent: "Europe"
},
{
word: "Sofa",
origin: { lat: 30.0444, lng: 31.2357 }, // Cairo, Egypt
etymology: "From Arabic 'ṣuffah' meaning 'bench'.",
continent: "Africa"
},
{
word: "Taco",
origin: { lat: 19.4326, lng: -99.1332 }, // Mexico City, Mexico
etymology: "From Mexican Spanish 'taco' meaning 'plug' or 'wad', referring to the tortilla.",
continent: "North America"
},
{
word: "Karaoke",
origin: { lat: 34.6937, lng: 135.5023 }, // Osaka, Japan
etymology: "From Japanese 'kara' meaning 'empty' and 'oke' short for 'orchestra'.",
continent: "Asia"
},
{
word: "Penguin",
origin: { lat: 51.4837, lng: -3.1681 }, // Cardiff, Wales
etymology: "Possibly from Welsh 'pen gwyn' meaning 'white head'.",
continent: "Europe"
},
{
word: "Bagel",
origin: { lat: 52.2297, lng: 21.0122 }, // Warsaw, Poland
etymology: "From Yiddish 'beygl', ultimately from Old High German 'boug' meaning 'ring'.",
continent: "Europe"
},
{
word: "Sushi",
origin: { lat: 35.6895, lng: 139.6917 }, // Tokyo, Japan
etymology: "From Japanese 'sushi' meaning 'sour rice'.",
continent: "Asia"
},
{
word: "Moccasin",
origin: { lat: 45.4215, lng: -75.6972 }, // Ottawa, Canada (Algonquian regions)
etymology: "From Algonquian 'makasin' meaning 'shoe'.",
continent: "North America"
},
{
word: "Piano",
origin: { lat: 44.4949, lng: 11.3426 }, // Bologna, Italy
etymology: "From Italian 'pianoforte' meaning 'soft-loud'.",
continent: "Europe"
},
{
word: "Boondocks",
origin: { lat: 14.5995, lng: 120.9842 }, // Manila, Philippines
etymology: "From Tagalog 'bundok' meaning 'mountain'.",
continent: "Asia"
},
{
word: "Curry",
origin: { lat: 13.0827, lng: 80.2707 }, // Chennai, India
etymology: "From Tamil 'kari' meaning 'sauce' or 'relish for rice'.",
continent: "Asia"
},
{
word: "Yogurt",
origin: { lat: 39.9334, lng: 32.8597 }, // Ankara, Turkey
etymology: "From Turkish 'yoğurt' meaning 'thickened milk'.",
continent: "Asia"
},
{
word: "Tattoo",
origin: { lat: -21.1789, lng: -175.1982 }, // Nuku'alofa, Tonga
etymology: "From Polynesian 'tatau' meaning 'mark made on the skin'.",
continent: "Oceania"
},
{
word: "Tea",
origin: { lat: 31.2304, lng: 121.4737 }, // Shanghai, China
etymology: "From Chinese 'te', the Min Nan pronunciation of 'tea'.",
continent: "Asia"
},
{
word: "Alcohol",
origin: { lat: 23.8859, lng: 45.0792 }, // Saudi Arabia (Arabic origin)
etymology: "From Arabic 'al-kuḥl' meaning 'the kohl', a fine powder.",
continent: "Asia"
},
{
word: "Banana",
origin: { lat: 9.0820, lng: 8.6753 }, // Nigeria
etymology: "Possibly from Wolof 'banana', a West African language.",
continent: "Africa"
},
{
word: "Mammoth",
origin: { lat: 61.5240, lng: 105.3188 }, // Siberia, Russia
etymology: "From Russian 'mamont', possibly from a Siberian language.",
continent: "Asia"
},
{
word: "Taboo",
origin: { lat: -21.2367, lng: -159.7777 }, // Cook Islands
etymology: "From Tongan 'tabu' meaning 'forbidden'.",
continent: "Oceania"
},
{
word: "Zombie",
origin: { lat: 18.1096, lng: -77.2975 }, // Jamaica
etymology: "From West African 'nzambi' meaning 'god' or 'zumbi' meaning 'fetish'.",
continent: "North America"
},
{
word: "Kimono",
origin: { lat: 35.0116, lng: 135.7681 }, // Kyoto, Japan
etymology: "From Japanese 'kimono' meaning 'thing to wear'.",
continent: "Asia"
},
{
word: "Cigar",
origin: { lat: 23.6345, lng: -102.5528 }, // Mexico
etymology: "From Spanish 'cigarro', possibly from Mayan 'sikar' meaning 'to smoke'.",
continent: "North America"
},
{
word: "Jazz",
origin: { lat: 29.9511, lng: -90.0715 }, // New Orleans, USA
etymology: "Origin uncertain; possibly from Creole or African languages.",
continent: "North America"
},
// Add more words as needed
];

let currentWordIndex = 0;
Expand All @@ -134,9 +336,8 @@ <h1>Etymology Globe Game</h1>

// Initialize the globe
const myGlobe = Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.backgroundColor('#111')
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg') // Optional built-in texture
.pointOfView({ lat: 20, lng: 0, altitude: 2 });

const globeContainer = document.getElementById('globeViz');
Expand All @@ -145,11 +346,14 @@ <h1>Etymology Globe Game</h1>
// Add click event listener
myGlobe.onGlobeClick(onGlobeClick);

// Initialize the game
displayWord();

function displayWord() {
document.getElementById('result').innerText = '';
document.getElementById('etymology-card').style.display = 'none';
document.getElementById('next-btn').style.display = 'none';
document.getElementById('hint').innerText = ''; // Reset the hint display
document.getElementById('hint').innerText = '';
guesses = 0;

const wordObj = words[currentWordIndex];
Expand All @@ -160,9 +364,17 @@ <h1>Etymology Globe Game</h1>

// Enable globe clicks
myGlobe.onGlobeClick(onGlobeClick);

// Set up hint button
document.getElementById('hint-btn').onclick = showHint;

// Set up next word button
document.getElementById('next-btn').onclick = nextWord;
}

function onGlobeClick(clickLatLng) {
console.log('Globe clicked at:', clickLatLng.lat, clickLatLng.lng);

const wordObj = words[currentWordIndex];
const playerLatLng = { lat: clickLatLng.lat, lng: clickLatLng.lng };
const originLatLng = wordObj.origin;
Expand All @@ -171,7 +383,12 @@ <h1>Etymology Globe Game</h1>
addMarker(playerLatLng.lat, playerLatLng.lng, 'blue');

// Calculate distance
const distance = distanceBetweenPoints(playerLatLng.lat, playerLatLng.lng, originLatLng.lat, originLatLng.lng);
const distance = distanceBetweenPoints(
playerLatLng.lat,
playerLatLng.lng,
originLatLng.lat,
originLatLng.lng
);

const resultDiv = document.getElementById('result');

Expand Down Expand Up @@ -236,12 +453,6 @@ <h1>Etymology Globe Game</h1>
const wordObj = words[currentWordIndex];
document.getElementById('hint').innerText = `Hint: The origin is in ${wordObj.continent}.`;
}

// Initialize the game after the DOM is fully loaded
window.onload = function() {
displayWord();
};
</script>

</body>
</html>

0 comments on commit 036d074

Please sign in to comment.