{% extends "base.html" %}

{% block content %}
<h1>My Work</h1>

<div class="columns">
	<div style="min-width: 70%;">
		<div class="slideshow">
			<a href="https://store.steampowered.com/app/2399420/Le_Mans_Ultimate/">
				<div class="title">Le Mans Ultimate</div>
				<img src="/showreel/le-mans-ultimate-hud.png" />
				<div class="summary">World Endurance Championship racing simulation.</div>
			</a>

			<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
				<div class="title">Afterglow</div>
				<img src="/showreel/afterglow.png" />
				<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
			</a>

			<a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
				<div class="title">Afterglow</div>
				<img src="/showreel/afterglow-menu.png" />
				<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
			</a>

			<a href="https://sauce.pizzawednes.day/protectorate/game">
				<div class="title">Protectorate Map Editor</div>
				<img src="/showreel/protectorate-interior-editor.png" />
				<div class="summary">Interior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
			</a>

			<a href="https://sauce.pizzawednes.day/protectorate/game">
				<div class="title">Protectorate Map Editor</div>
				<img src="/showreel/protectorate-exterior-editor.png" />
				<div class="summary">Exterior map editor for a turn-based RPG-lite built in the Godot game engine.</div>
			</a>

			<a href="https://www.myenergygame.net/">
				<div class="title">My Energy Game® Quest</div>
				<img src="/showreel/my-energy-game-intro.png" />
				<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
			</a>

			<a href="https://www.myenergygame.net/">
				<div class="title">My Energy Game® Quest</div>
				<img src="/showreel/my-energy-game-activity.png" />
				<div class="summary">Sports therapy simulation designed to help athletes with their mental state.</div>
			</a>
		</div>

		<h1>Articles</h1>

		{% set blog_section = get_section(path="blog/_index.md") %}

		{% for page in blog_section.pages %}
		<div>
			<a href="{{ page.permalink }}"><h2>{{ page.title }}</h2></a>
			
			{% set day = page.date | date(format="%e") %}
			{% set month = page.date | date(format="%B") %}
			{% set year = page.date | date(format="%Y") %}

			{% set day_suffix = "" %}
			{% if day in ["1", "21", "31"] %}
				{% set day_suffix = "st" %}
			{% elif day in ["2", "22"] %}
				{% set day_suffix = "nd" %}
			{% elif day in ["3", "23"] %}
				{% set day_suffix = "rd" %}
			{% else %}
				{% set day_suffix = "th" %}
			{% endif %}

			Posted {{ day }}{{ day_suffix }} {{ month }} {{ year }}

			<p>{{ page.content | striptags | truncate(length=255) }}</p>
		</div>
		{% endfor %}
	</div>

	<div style="min-width: 30%;">
		<div>Here's what I'm working on over at my <a href="https://sauce.pizzawednes.day/kayomn">Gitea instance</a>.</div>
		<div id="git-feed"></div>
	</div>
</div>

<style>
.slideshow {
	min-height: 320px;
	background-color: black;
	position: relative;
	color: white;
	border-radius: 5px;
	text-wrap: nowrap;
	text-overflow: ellipsis;
}

.slideshow a {
	color: white;
	text-decoration: none;
}

.slideshow .title {
	font-size: 1.5em;
	font-weight: bold;
	padding: 5px 15px;
}

.slideshow img {
	max-width: 100%;
	margin: auto;
	display: block;
}

.slideshow .summary {
	font-size: 1em;
	font-weight: bold;
	padding: 5px 15px;
}
</style>

<script type="module">
const slideshowIntervalSeconds = 5; 

window.addEventListener("load", async () => {
	let slideshows = document.getElementsByClassName("slideshow");

	for (let slideshow of slideshows) {
		if (!slideshow.hasChildNodes()) {
			continue;
		}

		let slideIndex = 0;
		let intervalId;

		const startSlideshow = () => {
			intervalId = setInterval(() => {
				let children = slideshow.children;
				slideIndex = (slideIndex + 1) % children.length;

				for (let index = 0; index < children.length; index += 1) {
					children[index].style.display = (index === slideIndex) ? "block" : "none";
				}
			}, slideshowIntervalSeconds * 1000);
		};

		slideshow.addEventListener("mouseenter", () => {
			clearInterval(intervalId);
		});

		slideshow.addEventListener("mouseleave", startSlideshow);

		let children = slideshow.children;
		children[0].style.display = "block";

		for (let index = 1; index < children.length; index += 1) {
			children[index].style.display = "none";
		}

		startSlideshow();
	}
});
</script>

<script type="module">
import {fetchRepos} from "/scripts/gitea.js"

window.addEventListener("load", async () => {
	const feed = document.getElementById("git-feed")

	fetchRepos("kayomn").catch(reason => {
		console.warn(reason)

		feed.innerHTML = `<div style="font-style: italic;">Feed unavailable at this time.</div>`
	}).then(repos => {
		const htmlBlocks = []

		for (const repo of repos.sort((a, b) => (b.stars_count - a.stars_count))) {
			if (!repo.fork) htmlBlocks.push(`<div style="animation: slide-up 0.4s ease; margin: 15px 0;">
				<a class="subtitle" href="${repo.html_url}">${repo.name}</a>
				<div>${repo.description || `<span style="font-style: italic;">No description.</span>`}</div>
			</div>`)
		}

		feed.innerHTML = htmlBlocks.join("\n")
	})
})
</script>
{% endblock content %}