CSSとJSで作る、世界の時間を円で見る回転時計

const languageFlags = [{
		code: 'ar-SA',
		name: 'Arabic',
		flag: '🇸🇦',
		bg: '#FFFFFF',
		mask: '#006C35'
	}, // 白 -> 緑
	{
		code: 'cs-CZ',
		name: 'Czech',
		flag: '🇨🇿',
		bg: '#FFFFFF',
		mask: '#D7141A'
	}, {
		code: 'da-DK',
		name: 'Danish',
		flag: '🇩🇰',
		bg: '#FFFFFF',
		mask: '#C60C30'
	}, // 白 -> 赤
	{
		code: 'de-DE',
		name: 'German',
		flag: '🇩🇪',
		bg: '#000000',
		mask: '#FFCE00'
	}, {
		code: 'el-GR',
		name: 'Greek',
		flag: '🇬🇷',
		bg: '#FFFFFF',
		mask: '#005BAE'
	}, // 白 -> 青
	{
		code: 'en-US',
		name: 'English (US)',
		flag: '🇺🇸',
		bg: '#3C3B6E',
		mask: '#B22234'
	}, {
		code: 'en-GB',
		name: 'English (UK)',
		flag: '🇬🇧',
		bg: '#012169',
		mask: '#C8102E'
	}, {
		code: 'es-ES',
		name: 'Spanish',
		flag: '🇪🇸',
		bg: '#C60B1E',
		mask: '#FFD700'
	}, {
		code: 'es-MX',
		name: 'Spanish (MX)',
		flag: '🇲🇽',
		bg: '#006847',
		mask: '#CE1126'
	}, {
		code: 'fi-FI',
		name: 'Finnish',
		flag: '🇫🇮',
		bg: '#FFFFFF',
		mask: '#003580'
	}, {
		code: 'fr-CA',
		name: 'French (CA)',
		flag: '🇨🇦',
		bg: '#FFFFFF',
		mask: '#FF0000'
	}, // 白 -> 赤
	{
		code: 'fr-FR',
		name: 'French (FR)',
		flag: '🇫🇷',
		bg: '#002395',
		mask: '#ED2939'
	}, {
		code: 'he-IL',
		name: 'Hebrew',
		flag: '🇮🇱',
		bg: '#FFFFFF',
		mask: '#0038B8'
	}, {
		code: 'hi-IN',
		name: 'Hindi',
		flag: '🇮🇳',
		bg: '#FF9933',
		mask: '#138808'
	}, {
		code: 'hu-HU',
		name: 'Hungarian',
		flag: '🇭🇺',
		bg: '#436F4D',
		mask: '#CE1126'
	}, // 白 -> 赤
	{
		code: 'it-IT',
		name: 'Italian',
		flag: '🇮🇹',
		bg: '#009246',
		mask: '#CD212A'
	}, {
		code: 'ja-JP',
		name: 'Japanese',
		flag: '🇯🇵',
		bg: '#FFFFFF',
		mask: '#b30000'
	}, {
		code: 'ko-KR',
		name: 'Korean',
		flag: '🇰🇷',
		bg: '#FFFFFF',
		mask: '#CD2E3A'
	}, {
		code: 'nl-NL',
		name: 'Dutch',
		flag: '🇳🇱',
		bg: '#AE1C28',
		mask: '#21468B'
	}, {
		code: 'no-NO',
		name: 'Norwegian',
		flag: '🇳🇴',
		bg: '#BA0C2F',
		mask: '#00205B'
	}, {
		code: 'pl-PL',
		name: 'Polish',
		flag: '🇵🇱',
		bg: '#FFFFFF',
		mask: '#DC143C'
	}, {
		code: 'pt-BR',
		name: 'Portuguese (BR)',
		flag: '🇧🇷',
		bg: '#009739',
		mask: '#FEDF00'
	}, {
		code: 'pt-PT',
		name: 'Portuguese (PT)',
		flag: '🇵🇹',
		bg: '#FF0000',
		mask: '#006600'
	}, {
		code: 'ro-RO',
		name: 'Romanian',
		flag: '🇷🇴',
		bg: '#002B7F',
		mask: '#FCD116'
	}, {
		code: 'ru-RU',
		name: 'Russian',
		flag: '🇷🇺',
		bg: '#FFFFFF',
		mask: '#DA2128'
	}, {
		code: 'sv-SE',
		name: 'Swedish',
		flag: '🇸🇪',
		bg: '#006AA7',
		mask: '#FECC00'
	}, {
		code: 'th-TH',
		name: 'Thai',
		flag: '🇹🇭',
		bg: '#2D2A4A',
		mask: '#A51931'
	}, // 白 -> 赤
	{
		code: 'tr-TR',
		name: 'Turkish',
		flag: '🇹🇷',
		bg: '#FFFFFF',
		mask: '#E30A17'
	}, // 白 -> 赤
	{
		code: 'vi-VN',
		name: 'Vietnamese',
		flag: '🇻🇳',
		bg: '#DA251D',
		mask: '#FFFF00'
	}, {
		code: 'zh-CN',
		name: 'Chinese',
		flag: '🇨🇳',
		bg: '#EE1C25',
		mask: '#FFFF00'
	},
];
const RADIUS_LANG = 140;
const defaultRegions = languageFlags.reduce((map, lang) => {
	const baseLang = lang.code.split('-')[0];
	if (!map[baseLang]) map[baseLang] = lang.code;
	return map;
}, {});

function getLocale() {
	let language = (navigator.languages && navigator.languages[0]) || navigator.language || 'ja-JP';
	if (language.length === 2) {
		language = defaultRegions[language] || `${language}-${language.toUpperCase()}`;
	}
	return language;
}
let locale = getLocale();
const currentLangDisplay = document.getElementById('kumonosu-current-lang');
const languageDialog = document.getElementById('kumonosu-language-dialog');
const languageOptionsContainer = document.getElementById('kumonosu-language-options');
const closeButton = document.getElementById('kumonosu-btn-dialog-close');

function drawClockFaces() {
	const clockFaces = document.querySelectorAll('.kumonosu-clock-face');
	const currentDate = new Date();
	const currentDay = currentDate.getDate();
	const currentMonth = currentDate.getMonth();
	const currentYear = currentDate.getFullYear();
	const currentWeekday = currentDate.getDay();
	const currentHours = currentDate.getHours();
	const currentMinutes = currentDate.getMinutes();
	const currentSeconds = currentDate.getSeconds();
	const totalDaysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
	const weekdayNames = Array.from({
		length: 7
	}, (_, i) => new Intl.DateTimeFormat(locale, {
		weekday: 'long'
	}).format(new Date(2021, 0, i + 3)));
	const monthNames = Array.from({
		length: 12
	}, (_, i) => new Intl.DateTimeFormat(locale, {
		month: 'long'
	}).format(new Date(2021, i)));
	clockFaces.forEach(clockFace => {
		clockFace.innerHTML = '';
		const clockType = clockFace.getAttribute('data-clock');
		const numbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
		const RADIUS = (clockFace.offsetWidth / 2) - 20;
		const center = clockFace.offsetWidth / 2;
		let valueSet;
		let currentValue;
		switch (clockType) {
			case 'seconds':
				valueSet = Array.from({
					length: 60
				}, (_, i) => String(i).padStart(2, '0'));
				currentValue = String(currentSeconds).padStart(2, '0');
				break;
			case 'minutes':
				valueSet = Array.from({
					length: 60
				}, (_, i) => String(i).padStart(2, '0'));
				currentValue = String(currentMinutes).padStart(2, '0');
				break;
			case 'hours':
				valueSet = Array.from({
					length: 24
				}, (_, i) => String(i).padStart(2, '0'));
				currentValue = String(currentHours).padStart(2, '0');
				break;
			case 'days':
				valueSet = Array.from({
					length: totalDaysInMonth
				}, (_, i) => i + 1);
				currentValue = currentDay;
				break;
			case 'months':
				valueSet = monthNames;
				currentValue = currentMonth;
				break;
			case 'years':
				valueSet = Array.from({
					length: 101
				}, (_, i) => 2000 + i);
				currentValue = currentYear;
				break;
			case 'day-names':
				valueSet = weekdayNames;
				currentValue = currentWeekday;
				break;
			default:
				return;
		}
		valueSet.forEach((value, i) => {
			const angle = (i * (360 / numbers));
			const x = center + RADIUS * Math.cos((angle * Math.PI) / 180);
			const y = center + RADIUS * Math.sin((angle * Math.PI) / 180);
			const element = document.createElement('span');
			element.classList.add('kumonosu-number');
			element.textContent = value;
			element.style.left = `${x}px`;
			element.style.top = `${y}px`;
			element.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
			clockFace.appendChild(element);
		});
		const currentIndex = valueSet.indexOf(typeof valueSet[0] === 'string' ? String(currentValue) : currentValue);
		const rotationAngle = -((currentIndex / numbers) * 360);
		clockFace.style.transform = `rotate(${rotationAngle}deg)`;
	});
}
const lastAngles = {};

function rotateClockFaces() {
	const clockFaces = document.querySelectorAll('.kumonosu-clock-face');

	function updateRotations() {
		const now = new Date();
		const currentSecond = now.getSeconds();
		const currentMinute = now.getMinutes();
		const currentHour = now.getHours();
		const currentDay = now.getDate();
		const currentMonth = now.getMonth();
		const currentYear = now.getFullYear();
		const currentWeekday = now.getDay();
		clockFaces.forEach(clockFace => {
			const clockType = clockFace.getAttribute('data-clock');
			const totalNumbers = parseInt(clockFace.getAttribute('data-numbers'), 10);
			let currentValue;
			switch (clockType) {
				case 'seconds':
					currentValue = currentSecond;
					break;
				case 'minutes':
					currentValue = currentMinute;
					break;
				case 'hours':
					currentValue = currentHour;
					break;
				case 'days':
					currentValue = currentDay - 1;
					break;
				case 'months':
					currentValue = currentMonth;
					break;
				case 'years':
					currentValue = currentYear - 2000;
					break;
				case 'day-names':
					currentValue = currentWeekday;
					break;
				default:
					return;
			}
			const targetAngle = (360 / totalNumbers) * currentValue;
			const clockId = clockFace.id || clockType;
			const lastAngle = lastAngles[clockId] || 0;
			const delta = targetAngle - lastAngle;
			const shortestDelta = ((delta + 540) % 360) - 180;
			const newAngle = lastAngle + shortestDelta;
			clockFace.style.transform = `rotate(${newAngle * -1}deg)`;
			lastAngles[clockId] = newAngle;
			const numbers = clockFace.querySelectorAll('.kumonosu-number');
			numbers.forEach((number, index) => {
				if (index === currentValue) number.classList.add('kumonosu-active');
				else number.classList.remove('kumonosu-active');
			});
		});
		requestAnimationFrame(updateRotations);
	}
	updateRotations();
}

function createLanguageOptions() {
	const centerX = languageOptionsContainer.offsetWidth / 2;
	const centerY = languageOptionsContainer.offsetHeight / 2;
	languageOptionsContainer.innerHTML = '';
	languageFlags.forEach((lang, index, arr) => {
		const angle = (index / arr.length) * 2 * Math.PI;
		const x = centerX + RADIUS_LANG * Math.cos(angle);
		const y = centerY + RADIUS_LANG * Math.sin(angle);
		const radioWrapper = document.createElement('label');
		radioWrapper.title = lang.name;
		radioWrapper.style.left = `${x}px`;
		radioWrapper.style.top = `${y}px`;
		const radioInput = document.createElement('input');
		radioInput.type = 'radio';
		radioInput.name = 'language';
		radioInput.value = lang.code;
		if (lang.code === locale) {
			radioInput.checked = true;
			radioWrapper.classList.add('kumonosu-active');
		}
		const flag = document.createElement('span');
		flag.classList.add('kumonosu-flag-icon');
		flag.innerText = lang.flag;
		radioWrapper.appendChild(radioInput);
		radioWrapper.appendChild(flag);
		languageOptionsContainer.appendChild(radioWrapper);
		radioWrapper.addEventListener('mouseover', () => showTitle(lang.name));
		radioWrapper.addEventListener('mouseleave', () => hideTitle());
		radioInput.addEventListener('change', () => {
			locale = radioInput.value;
			setCurrentLangDisplay(lang);
			drawClockFaces();
			document.querySelector('label.kumonosu-active')?.classList.remove('kumonosu-active');
			radioWrapper.classList.add('kumonosu-active');
			closeDialog();
		});
	});
}
let titleDisplay = null;

function showTitle(languageName) {
	if (!titleDisplay) {
		titleDisplay = document.createElement('div');
		titleDisplay.classList.add('kumonosu-language-title');
		languageOptionsContainer.appendChild(titleDisplay);
	}
	titleDisplay.textContent = languageName;
}

function hideTitle() {
	if (titleDisplay) titleDisplay.textContent = '';
}

function getContrastColor(hexcolor) {
	if (!hexcolor || hexcolor === 'transparent') return '#000000';
	const hex = hexcolor.replace('#', '');
	const r = parseInt(hex.substr(0, 2), 16);
	const g = parseInt(hex.substr(2, 2), 16);
	const b = parseInt(hex.substr(4, 2), 16);
	const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
	return (yiq >= 128) ? '#000000' : '#FFFFFF';
}

function setCurrentLangDisplay(lang) {
	if (lang) {
		currentLangDisplay.textContent = lang.flag;
		currentLangDisplay.title = lang.name;
		document.documentElement.style.setProperty('--bg-clr', lang.bg);
		document.documentElement.style.setProperty('--theme-color', lang.mask);
		const normalTextClr = getContrastColor(lang.bg);
		document.documentElement.style.setProperty('--clock-numbers-clr', normalTextClr);
		let activeTextClr;
		if (normalTextClr === '#000000') {
			activeTextClr = '#000000';
		} else {
			activeTextClr = getContrastColor(lang.mask);
		}
		document.documentElement.style.setProperty('--active-numbers-clr', activeTextClr);
	}
}

function openDialog() {
	languageDialog.showModal();
	createLanguageOptions();
	languageDialog.addEventListener('click', closeDialogOnClickOutside);
}

function closeDialog() {
	languageDialog.close();
	languageDialog.removeEventListener('click', closeDialogOnClickOutside);
}

function closeDialogOnClickOutside(e) {
	if (e.target === languageDialog) closeDialog();
}
closeButton.addEventListener('click', closeDialog);
currentLangDisplay.addEventListener('click', openDialog);
// Initialize
drawClockFaces();
rotateClockFaces();
setCurrentLangDisplay(languageFlags.find(lang => lang.code === locale) || languageFlags.find(l => l.code === 'ja-JP'));