Add Dawn of Chaos screenshots

Tuprules.tup

@@ -13,6 +13,11 @@ HTML_TEMPLATE = main.html
 	%f | sed 's|%%webRoot%%|&(root)|g' > %o \
 	|> %B.html
 
+# Images
+!png = |> convert %f %o |> %B.png
 !compress_png = |> zopflipng %f %o |>
 !compress_jpg = |> cjpeg -quality 80 -progressive -outfile %o %f |>
-!thumbnail = |> convert %f -resize 400x400 -blur 0x8 %o |>
+
+JPG_OPT = -quality 80 -strip -interlace Plane
+!blur_mini = |> convert %f -resize 400x400 -blur 0x8 $(JPG_OPT) %o |> blur_mini.jpg
+!thumbnail = |> convert %f -resize 200x200 $(JPG_OPT) %o |>

css/style.css

@@ -77,27 +77,6 @@ code {
 	background-color: var(--code-color);
 }
 
-div.projects {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	grid-auto-rows: minmax(100px, auto);
-	gap: 10px;
-	grid-gap: var(gap); /* fallback */
-
-	list-style: none;
-	padding-left: 0;
-	font-size: 14pt;
-}
-
-div.item {
-	display: grid;
-	text-align: center;
-	align-items: center;
-	border: 1pt solid #ddd;
-	height: 100%;
-	text-transform: uppercase;
-}
-
 ul.projects {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -126,6 +105,26 @@ ul.projects a {
 	background-position: center;
 }
 
+ul.screenshots {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	grid-auto-rows: minmax(150px, auto);
+	gap: 10px;
+
+	list-style: none;
+	padding-left: 0;
+}
+
+ul.screenshots a {
+	display: grid;
+	align-items: center;
+	border: 1pt solid #ddd;
+	height: 100%;
+
+	background-size: cover;
+	background-position: center;
+}
+
 #footer {
 	max-width: 800px;
 	margin: 0 auto;

projects.md

@@ -8,5 +8,5 @@ title: Projects
 <li><a href="projects/trailr/index.html" style="background-image: url(projects/trailr/thumb.jpg);">Trailr</a></li>
 <li><a href="projects/whereiscar/index.html" style="background-image: url(projects/whereiscar/thumb.png);">Where is my car?</a></li>
 <li><a href="projects/maestro/index.html" style="background-image: url(projects/maestro/thumb.png);">Maestro</a></li>
-<li><a href="projects/dawnchaos/index.html" style="background-image: url(projects/dawnchaos/thumb.jpg);">Dawn of Chaos</a></li>
+<li><a href="projects/dawnchaos/index.html" style="background-image: url(projects/dawnchaos/blur_mini.jpg);">Dawn of Chaos</a></li>
 </ul>

projects/dawnchaos/Tupfile

@@ -1,6 +1,8 @@
 include_rules
 
 : index.md |> !html |>
-: shot_01.png |> !thumbnail |> thumb_temp.jpg
-: thumb_temp.jpg |> !compress_jpg |> thumb.jpg
-: foreach *.png |> !compress_png |> %g_opt.png
+
+: dawnchaos_03.png |> !blur_mini |>
+
+: foreach dawnchaos_*.png |> cp %f %o |> img/%g.png
+: foreach dawnchaos_*.png |> !thumbnail |> img/%g_thumb.jpg

projects/dawnchaos/generate_thumbnails.tup

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+for i in *.png; do
+	base=$(basename $i)
+	filename="${base%.*}"
+	echo ": $i |> !tup_preserve |>"
+	echo ": $i |> !mini |> ${filename}_mini_tmp.jpg"
+	echo ": ${filename}_mini_tmp.jpg |> !compress_jpg |> ${filename}_mini.jpg"
+done
+
+#echo ": foreach *_tmp.jpg |> !compress_jpg |> %g.jpg"

projects/dawnchaos/index.md

@@ -14,13 +14,13 @@ we do ourselves. As such, we were lacking best practices and we learned along
 the way. The development was quite hard, because at the time we had no
 programming skill. Moreover, our team quickly fell out, with one member quitting
 the school after a few months and another one struggling with programming. It
-ended up being a two-persons project.
+ended up being a two-person project.
 
 Nevertheless, this was a truly rewarding experience since I learned the basics
 of video game creation and DirectX programming.
 
 
-GRAPHIC ENGINE
+Graphic engine
 --------------
 
 We had the choice between DirectX and OpenGL for developing our graphic engine.
@@ -50,14 +50,14 @@ tweak the sprites size manually in order to make the game look as expected on
 screen.
 
 
-PATHFINDING
+Pathfinding
 -----------
 
 For the pathfinding, I used the classic A*. Each tile of the map is enabled or
 not, make a boolean map on which I applied the pathfinding.
 
 
-SOUND ENGINE
+Sound engine
 ------------
 
 "Sound engine" might sound a bit fancy for what was done. At first I thought I
@@ -84,7 +84,7 @@ enough. The enemy goes back to making his rounds if he is almost dead or if the
 hero is getting away (the hero is of course faster than any enemy).
 
 
-WHAT WAS DONE BY OTHERS
+What was done by others
 -----------------------
 
 My friend created a truly rich map editor that was used for making the game. He
@@ -92,12 +92,27 @@ also created the elements of the world. He was then able to define position and
 rounds for the enemies directly from his editor. Our game engine only had to
 get his data from the editor in order to generate the levels.
 
-At last, he was in charge for the management of the hero: life, equipment, etc.
+He was also in charge for the management of the hero: life, equipment, etc.
 
 
-LAST WORDS
+Last words
 ----------
 
 Our game was quite pretty but it was very slow due to the too detailled models
 used for the hero and the enemies. It lacks animation too. I really wanted to
 incorporate animation but I wasn't able to.
+
+Screenshots
+-----------
+
+<ul class="screenshots">
+<li><a href="img/01.png" style="background-image: url(img/01_thumb.jpg);"> </a></li>
+<li><a href="img/02.png" style="background-image: url(img/02_thumb.jpg);"> </a></li>
+<li><a href="img/03.png" style="background-image: url(img/03_thumb.jpg);"> </a></li>
+<li><a href="img/04.png" style="background-image: url(img/04_thumb.jpg);"> </a></li>
+<li><a href="img/05.png" style="background-image: url(img/05_thumb.jpg);"> </a></li>
+<li><a href="img/06.png" style="background-image: url(img/06_thumb.jpg);"> </a></li>
+<li><a href="img/07.png" style="background-image: url(img/07_thumb.jpg);"> </a></li>
+<li><a href="img/08.png" style="background-image: url(img/08_thumb.jpg);"> </a></li>
+<li><a href="img/09.png" style="background-image: url(img/09_thumb.jpg);"> </a></li>
+</ul>

rsync_excludes.txt

@@ -1,4 +1,4 @@
 templates*
 tup.config
 README.html
-*_temp.*
+*_tmp.*