pejobo/kaenguru.html

## kaenguru.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
</head>
<body>
   <div id="output"><img id="image" width="100%" src="https://via.placeholder.com/800x250.png?text=:("/></div>
</body>
<script>
	const MILLIS_PER_DAY = 24*60*60*1000;
	const START_KEY = '2020-11-29';
	const LAST_DATE = new Date('2023-03-06')
	const RES = (screen.width > screen.height) ? 'original' : 'original__mobile';
	const BASE = 'https://img.zeit.de/administratives/kaenguru-comics';
	let date;
	let key;
	let image = document.getElementById('image');
	let direction = +1;
	if (location.href.indexOf('#') > -1) {
		let i = location.href.indexOf('#');
		date = new Date(location.href.substring(i + 1));
		if (isNaN(date)) date = new Date(START_KEY);
	} else {
		date = new Date(START_KEY);
	}
	date.setHours(12, 0, 0, 0);

	function f(i) {
		return (i < 10) ? '0' + i : i
	}

	function gen_url() {
		if (key >= '2021-01-19') return `${BASE}/${date.getFullYear()}-${f(date.getMonth() + 1)}/${f(date.getDate())}/${RES}`;
		if (key >= START_KEY) {
			if (key === '2021-01-09') return `${BASE}/kaenguru-038-2/${RES}`;
			if (key === '2020-12-19') return `${BASE.replace('k', '2020-12/k')}-kaenguru-019/${RES}`;
			let day_num = 1 + (new Date(key) - new Date(START_KEY)) / MILLIS_PER_DAY;
			if (day_num > 8 && (day_num - 1) % 7 === 0) return 'https://placehold.co/800x250.png?text=Kein%20Känguru+gefunden+für+' + key;
			let pic_num = day_num - Math.floor((day_num - 1) / 7);
			if (key > '2020-12-22') pic_num++; // glitch in the matrix
			if (key >= '2021-01-13' && key !== '2021-01-18') return `${BASE}/kaenguru-${pic_num}/${RES}`;
			if (pic_num > 4) return `${BASE}/kaenguru-0${f(pic_num)}/${RES}`;
			if (pic_num === 4) return `${BASE}/warnung-kaenguru/${RES}`;
			if (pic_num === 3) return `${BASE}/der-baum-kaenguru/${RES}`;
			if (pic_num === 2) return `${BASE}/pow-kaenguru/${RES}`;
			if (pic_num === 1) return `${BASE}/pilot-kaenguru/${RES}`;
		}
		location.href = location.href.replace(/#.*/,'') + '#' + START_KEY;
	}

	function change_image(e) {
		let x = e.clientX;
		let w = image.width;
		direction = (x < (w / 2)) ? -1 : 1;
		set_next_image();
	}

	function set_next_image() {
		date.setTime(date.getTime() + direction * MILLIS_PER_DAY);
		if (date.getDay() === 0 && ! date.toISOString().startsWith(START_KEY)) { // skip sundays despite 2020-11-29
			date.setTime(date.getTime() + direction * MILLIS_PER_DAY);
		}
		if (date.toISOString() < START_KEY) {
			date = new Date(LAST_DATE.toISOString().substring(0, 10));
		} else if (date.getTime() > LAST_DATE.getTime() + MILLIS_PER_DAY) {
			date = new Date(START_KEY);
		}
		date.setHours(12, 0, 0, 0);
		set_image(true);
	}

	function set_image(push2history) {
		key = `${date.getFullYear()}-${f(date.getMonth() + 1)}-${f(date.getDate())}`
		image.src = gen_url();
		// console.log(image.src);
		if (push2history) {
			history.pushState(key, key, location.href.replace(/#.*/,'') + '#' + key);
		}
	}

	function onerror() {
		console.error('error', key, image.src);
		image.src = 'https://placehold.co/800x250.png?text=Kein%20Känguru+gefunden+für+' + key;
	}

	window.onpopstate = (e) => {
		if (e.state) {
			date = new Date(e.state + " 12:00");
			set_image(false);
		}
	};

	image.onerror = onerror;
	image.onclick = change_image;
	set_image(false);
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="utf-8">
	<head>
	</head>
	<body>
	<div id="output"><img id="image" width="100%" src="https://via.placeholder.com/800x250.png?text=:("/></div>
	</body>
	<script>
	const MILLIS_PER_DAY = 246060*1000;
	const START_KEY = '2020-11-29';
	const LAST_DATE = new Date('2023-03-06')
	const RES = (screen.width > screen.height) ? 'original' : 'original__mobile';
	const BASE = 'https://img.zeit.de/administratives/kaenguru-comics';
	let date;
	let key;
	let image = document.getElementById('image');
	let direction = +1;
	if (location.href.indexOf('#') > -1) {
	let i = location.href.indexOf('#');
	date = new Date(location.href.substring(i + 1));
	if (isNaN(date)) date = new Date(START_KEY);
	} else {
	date = new Date(START_KEY);
	}
	date.setHours(12, 0, 0, 0);

	function f(i) {
	return (i < 10) ? '0' + i : i
	}

	function gen_url() {
	if (key >= '2021-01-19') return `${BASE}/${date.getFullYear()}-${f(date.getMonth() + 1)}/${f(date.getDate())}/${RES}`;
	if (key >= START_KEY) {
	if (key === '2021-01-09') return `${BASE}/kaenguru-038-2/${RES}`;
	if (key === '2020-12-19') return `${BASE.replace('k', '2020-12/k')}-kaenguru-019/${RES}`;
	let day_num = 1 + (new Date(key) - new Date(START_KEY)) / MILLIS_PER_DAY;
	if (day_num > 8 && (day_num - 1) % 7 === 0) return 'https://placehold.co/800x250.png?text=Kein%20Känguru+gefunden+für+' + key;
	let pic_num = day_num - Math.floor((day_num - 1) / 7);
	if (key > '2020-12-22') pic_num++; // glitch in the matrix
	if (key >= '2021-01-13' && key !== '2021-01-18') return `${BASE}/kaenguru-${pic_num}/${RES}`;
	if (pic_num > 4) return `${BASE}/kaenguru-0${f(pic_num)}/${RES}`;
	if (pic_num === 4) return `${BASE}/warnung-kaenguru/${RES}`;
	if (pic_num === 3) return `${BASE}/der-baum-kaenguru/${RES}`;
	if (pic_num === 2) return `${BASE}/pow-kaenguru/${RES}`;
	if (pic_num === 1) return `${BASE}/pilot-kaenguru/${RES}`;
	}
	location.href = location.href.replace(/#.*/,'') + '#' + START_KEY;
	}

	function change_image(e) {
	let x = e.clientX;
	let w = image.width;
	direction = (x < (w / 2)) ? -1 : 1;
	set_next_image();
	}

	function set_next_image() {
	date.setTime(date.getTime() + direction * MILLIS_PER_DAY);
	if (date.getDay() === 0 && ! date.toISOString().startsWith(START_KEY)) { // skip sundays despite 2020-11-29
	date.setTime(date.getTime() + direction * MILLIS_PER_DAY);
	}
	if (date.toISOString() < START_KEY) {
	date = new Date(LAST_DATE.toISOString().substring(0, 10));
	} else if (date.getTime() > LAST_DATE.getTime() + MILLIS_PER_DAY) {
	date = new Date(START_KEY);
	}
	date.setHours(12, 0, 0, 0);
	set_image(true);
	}

	function set_image(push2history) {
	key = `${date.getFullYear()}-${f(date.getMonth() + 1)}-${f(date.getDate())}`
	image.src = gen_url();
	// console.log(image.src);
	if (push2history) {
	history.pushState(key, key, location.href.replace(/#.*/,'') + '#' + key);
	}
	}

	function onerror() {
	console.error('error', key, image.src);
	image.src = 'https://placehold.co/800x250.png?text=Kein%20Känguru+gefunden+für+' + key;
	}

	window.onpopstate = (e) => {
	if (e.state) {
	date = new Date(e.state + " 12:00");
	set_image(false);
	}
	};

	image.onerror = onerror;
	image.onclick = change_image;
	set_image(false);
	</script>
	</html>