First commit

.gitignore

@@ -0,0 +1,27 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Package Managers
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+bun.lockb

.prettierrc

@@ -0,0 +1,12 @@
+{
+	"tabWidth": 4,
+	"semi": true,
+	"useTabs": true,
+	"printWidth": 100,
+	"endOfLine": "auto",
+	"singleQuote": true,
+	"trailingComma": "none",
+	"bracketSameLine": true,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,47 @@
+# Flagaroo
+
+Welcome to Flagaroo, a fun and interactive web-based game where you can test your knowledge of world flags!
+
+## Overview
+
+Flagaroo allows players to identify countries based on their flags. The game includes multiple categories and supports multiple languages.
+
+### Features
+
+-   **Two Game Modes**:
+
+    -   **Classic Mode**: Players can guess the name of any country without a time limit.
+    -   **Timer Mode**: Players race against the clock to guess as many countries as possible within a set time limit.
+
+-   **Multilingual Support**: Flagaroo supports multiple languages, ensuring that users can enjoy the game in their preferred language.
+
+-   **Multiple Categories**: The game features various categories that compile flags from different regions and cultures.
+
+-   **Configuration Options**: Players can change the game mode, adjust the time limit, enable hints (accuracy percentages), display names at the end of the game, and disable sound effects.
+
+### Sound Effects
+
+The sound effects used in Flagaroo are sourced from [Mixkit](https://mixkit.co/), under the Sound Effects Free License.
+
+### Flag Sources
+
+The SVG flags used in the game were compiled from:
+
+-   [Hampus Borgos Repository](https://github.com/hampusborgos/country-flags)
+-   [Wikimedia Commons](https://commons.wikimedia.org)
+
+### License
+
+This project is licensed under the [AGPL-3.0 License](https://opensource.org/licenses/AGPL-3.0).
+
+### Contributing
+
+If you would like to contribute to Flagaroo, feel free to submit a pull request or open an issue.
+
+### Getting Started
+
+To get started with Flagaroo, clone the repository, install the dependencies, and start the game! You can also access the game directly at [https://flags.zonian.dev](https://flags.zonian.dev).
+
+---
+
+Enjoy playing Flagaroo and test your knowledge of world flags!

package.json

@@ -0,0 +1,39 @@
+{
+	"name": "flagaroo",
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev --port 3614",
+		"build": "vite build",
+		"preview": "vite preview --port 3614",
+		"start": "vite build && vite preview --port 3614",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"update-data": "node scripts/downloadData.js && node --no-warnings scripts/updateResources.js"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.2.5",
+		"@sveltejs/kit": "^2.7.1",
+		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@types/eslint": "^9.6.1",
+		"eslint": "^9.13.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.45.1",
+		"esm": "^3.2.25",
+		"globals": "^15.11.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^4.2.19",
+		"svelte-check": "^4.0.5",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.10.0",
+		"vite": "^5.4.9"
+	},
+	"dependencies": {
+		"@elron/svelte-audio-store": "^1.0.0",
+		"@sveltejs/adapter-node": "^5.2.9",
+		"svelte-i18n": "^4.0.0"
+	}
+}

scripts/downloadData.js

@@ -0,0 +1,11 @@
+import https from 'https';
+import fs from 'fs';
+
+https.get(
+	'https://overpass-api.de/api/interpreter?data=[out:json][timeout:250];(node["place"="country"];relation(1993208);relation(1216719);relation(1278736);relation(270009);relation(36989);relation(1964272);relation(1703814);node(2000314677););out body;',
+	(res) => {
+		var data = '';
+		res.on('data', (chunk) => (data += chunk));
+		res.on('end', () => fs.writeFileSync(`./src/lib/data/data.json`, data));
+	}
+);

scripts/patches.json

@@ -0,0 +1,14 @@
+{
+	"us": {
+		"name": [{ "key": "en", "value": "United States of America" }]
+	},
+	"bh": {
+		"name": [{ "key": "es", "value": "Baréin" }]
+	},
+	"gv": {
+		"code": "gn"
+	},
+	"pu": {
+		"code": "gw"
+	}
+}

scripts/updateResources.js

@@ -0,0 +1,47 @@
+import fs from 'fs';
+
+import countriesData from '../src/lib/data/data.json' with { type: 'json' };
+import supportedLangs from '../supportedLangs.json' with { type: 'json' };
+import patches from './patches.json' with { type: 'json' };
+
+import { getCountryName, getCountryCode, getAltCountryName } from './utils.js';
+
+const countries = countriesData.elements
+	.filter((country) => typeof getCountryCode(country) === 'string')
+	.sort((a, b) => (getCountryName(a, 'en') < getCountryName(b, 'en') ? -1 : 1));
+
+for (const country of countries) {
+	let countryCode = getCountryCode(country).toLowerCase();
+	const data = {
+		name: {},
+		alt: []
+	};
+
+	supportedLangs.forEach((lang) => {
+		data.name[lang] = getCountryName(country, lang);
+		if (patches[countryCode]) {
+			const patch = patches[countryCode].name?.find((entry) => entry.key === lang);
+			if (patch) {
+				data.name[lang] = patch.value;
+			}
+		}
+
+		const alt = getAltCountryName(country, lang);
+		if (alt) {
+			data.alt = [...data.alt, ...alt];
+		}
+	});
+
+	const alt = getAltCountryName(country);
+	if (alt) {
+		data.alt = [...data.alt, ...alt];
+	}
+
+	if (patches[countryCode]?.code) {
+		countryCode = patches[countryCode].code;
+	}
+
+	fs.writeFileSync(`./src/lib/data/names/${countryCode}.json`, JSON.stringify(data, null, 2));
+}
+
+console.log('Update done!');

scripts/utils.js

@@ -0,0 +1,14 @@
+export function getCountryName(country, lang) {
+	return country.tags[`name:${lang}`] || country.tags['name:en'] || country.tags.name;
+}
+
+export function getAltCountryName(country, lang) {
+	if (lang) {
+		return country.tags[`alt_name:${lang}`]?.split(';');
+	}
+	return country.tags[`alt_name`]?.split(';');
+}
+
+export function getCountryCode(country) {
+	return country.tags.country_code_iso3166_1_alpha_2 || country.tags['ISO3166-1:alpha2'];
+}

src/app.css

@@ -0,0 +1,32 @@
+@font-face {
+	font-family: 'Outfit';
+	font-style: normal;
+	font-weight: 100 1000;
+	src: url('./lib/fonts/Outfit.woff2') format('woff2');
+}
+
+:root {
+	font-family: 'Outfit', sans-serif !important;
+	background-color: #1a1a1a;
+	color: #e0e0e0;
+	margin: 0;
+}
+
+/* Scrollbar */
+html,
+body {
+	overflow: auto;
+	margin: 0;
+}
+
+body::-webkit-scrollbar {
+	display: none;
+}
+
+html {
+	scrollbar-width: none;
+}
+
+body {
+	-ms-overflow-style: none;
+}

src/app.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="color-scheme" content="light dark" />
+		<title>Flagaroo</title>
+		<script
+			defer
+			src="https://umami.supa.codes/script.js"
+			data-website-id="b7eb97b3-ff3b-4732-a7ff-130df4ff8a5e"></script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/components/Footer.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { t } from 'svelte-i18n';
+</script>
+
+<footer>
+	<div class="footer-content">
+		<a href="https://github.com/ZonianMidian/flagaroo" target="_blank" aria-label="GitHub">
+			<svg
+				height="24"
+				width="24"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				xmlns="http://www.w3.org/2000/svg">
+				<path
+					d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.54 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.68 7.68 0 0 1 8 4.68c.68.003 1.37.092 2.01.27 1.52-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+			</svg>
+		</a>
+	</div>
+
+	<!-- <div class="disclaimer">
+		ZonianMidian
+	</div> -->
+</footer>
+
+<style>
+	:global(main) {
+		min-height: calc(100vh - 64px);
+		overflow: auto;
+	}
+
+	:global(main > *:not(footer)) {
+		flex: 1 0 auto;
+	}
+
+	footer {
+		background-color: #252525;
+		padding: 1rem;
+		flex-shrink: 0;
+		margin-top: 1rem;
+	}
+
+	.footer-content {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.footer-content svg {
+		vertical-align: middle;
+	}
+
+	.footer-content a {
+		color: white;
+		text-decoration: none;
+		font-size: 0.9rem;
+		transition: color 0.2s;
+		text-align: center;
+	}
+
+	.footer-content a:hover {
+		color: #d1d5db;
+	}
+
+	/* .disclaimer {
+		color: #a0a0a0;
+		font-size: 0.8rem;
+		text-align: center;
+	} */
+</style>

src/components/Spinner.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let isDiv: Boolean;
+</script>
+
+<div class="loading" class:loading-div={isDiv}>
+	<div class="spinner"></div>
+</div>
+
+<style>
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.spinner {
+		border: 10px solid rgba(0, 0, 0, 0.1);
+		border-left: 10px solid #767676;
+		border-radius: 50%;
+		width: 30vh;
+		height: 30vh;
+		animation: spin 2s linear infinite;
+	}
+
+	.loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+	}
+
+	.loading-div {
+		height: 100% !important;
+	}
+</style>

src/hooks.server.ts

@@ -0,0 +1,10 @@
+import type { Handle } from '@sveltejs/kit';
+import { locale } from 'svelte-i18n';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const lang = event.request.headers.get('accept-language')?.split(',')[0];
+	if (lang) {
+		locale.set(lang);
+	}
+	return resolve(event);
+};