shift/harmony
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reorganize presentation slides: move Octo to slide 9, streamline flow

Browse source
This commit is contained in:
Vincent Palmer 2025-09-30 20:05:41 +02:00
parent 854d352076
commit 4220ba4a6c
1 changed files with 55 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

120
presentation_no_iframe.html
View file

@ -402,129 +402,119 @@
</ul> </ul>
</div> </div>
<!-- Slide 3: Life hack --> <!-- Slide 3: Increased Complexity -->
<div class="slide content-slide" id="slide-3"> <div class="slide content-slide" id="slide-3">
<h2>Increased Complexity</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182227.jpg" alt="Game pieces detail" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 4: Life hack -->
<div class="slide content-slide" id="slide-4">
<h2>Life Hack</h2> <h2>Life Hack</h2>
<p style="font-size: 2.5em;">Old U-Bahn cards for Top Trumps</p> <p style="font-size: 2.5em;">Old U-Bahn cards for Top Trumps</p>
</div> </div>
<!-- Slide 4: Top Trumps image --> <!-- Slide 5: Top Trumps image -->
<div class="slide image-slide" id="slide-4"> <div class="slide image-slide" id="slide-5">
<h2>Top Trumps</h2> <h2>Top Trumps</h2>
<img src="images/top trumps.jpg" alt="Top Trumps cards"> <img src="images/top trumps.jpg" alt="Top Trumps cards">
</div> </div>
<!-- Slide 5: Backstory --> <!-- Slide 6: Backstory -->
<div class="slide content-slide" id="slide-5"> <div class="slide content-slide" id="slide-6">
<h2>Backstory</h2> <h2>Backstory</h2>
<p>In 1874 Mr. Ranmuchincinson found a carrot in his garden and he's dead now but he would probably have hacked games if he had watched this presentation.</p> <p>In 1874 Mr. Ranmuchincinson found a carrot in his garden and he's dead now but he would probably have hacked games if he had watched this presentation.</p>
</div> </div>
<!-- Slide 6: Royal Chess --> <!-- Slide 7: Royal Chess -->
<div class="slide image-slide" id="slide-6"> <div class="slide image-slide" id="slide-7">
<h2>Royal Chess</h2> <h2>Meeting People Over Games</h2>
<p>Meeting people over games</p>
<p>Imagine making a c-base Quarto</p>
<img src="images/IMG_20250924_174907.jpg" alt="Royal Chess"> <img src="images/IMG_20250924_174907.jpg" alt="Royal Chess">
</div> </div>
<!-- Slide 7: Penta Game --> <!-- Slide 8: Quatro -->
<div class="slide content-slide" id="slide-7"> <div class="slide content-slide" id="slide-8">
<h2>Quatro</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182505.jpg" alt="Complete game setup" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 9: Octo -->
<div class="slide content-slide" id="slide-9">
<h2>Octo</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182236.jpg" alt="Game in progress" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 10: Penta Game -->
<div class="slide content-slide" id="slide-10">
<h2>Penta Board Game</h2> <h2>Penta Board Game</h2>
<p>Colour scheme investigation - inspiration</p> <p>Colour scheme investigation - inspiration</p>
<p style="font-size: 1.5em; margin-top: 40px;">Game mechanics and visual design exploration</p> <p style="font-size: 1.5em; margin-top: 40px;">Game mechanics and visual design exploration</p>
</div> </div>
<!-- Slide 8: Hindu Gods Introduction --> <!-- Slide 11: Hindu Gods Introduction -->
<div class="slide hindu-slide" id="slide-8"> <div class="slide hindu-slide" id="slide-11">
<h2>Relationship to Hindu Gods</h2> <h2>Relationship to Hindu Gods</h2>
<p>Waiting for inspiration...</p> <p>Waiting for inspiration...</p>
<p>Idea to hack Quarto</p> <p>Idea to hack Quarto</p>
</div> </div>
<!-- Slide 9: Brahma Saraswati --> <!-- Slide 12: Brahma Saraswati -->
<div class="slide hindu-slide" id="slide-9"> <div class="slide hindu-slide" id="slide-12">
<h2>Brahma & Saraswati</h2> <h2>Brahma & Saraswati</h2>
<img src="images/brahma sarasiwati.svg" alt="Brahma and Saraswati"> <img src="images/brahma sarasiwati.svg" alt="Brahma and Saraswati">
<p>Wisdom and Creation</p> <p>Wisdom and Creation</p>
</div> </div>
<!-- Slide 10: Hanuman --> <!-- Slide 13: Hanuman -->
<div class="slide hindu-slide" id="slide-10"> <div class="slide hindu-slide" id="slide-13">
<h2>Hanuman & Surya Chala Devi</h2> <h2>Hanuman & Surya Chala Devi</h2>
<img src="images/hanuman and Survachala devi.svg" alt="Hanuman and Surya Chala Devi"> <img src="images/hanuman and Survachala devi.svg" alt="Hanuman and Surya Chala Devi">
<p>Strength and Devotion</p> <p>Strength and Devotion</p>
</div> </div>
<!-- Slide 11: Shiva & Parvati --> <!-- Slide 14: Shiva & Parvati -->
<div class="slide hindu-slide" id="slide-11"> <div class="slide hindu-slide" id="slide-14">
<h2>Shiva & Parvati</h2> <h2>Shiva & Parvati</h2>
<img src="images/shiva and parvati.svg" alt="Shiva and Parvati"> <img src="images/shiva and parvati.svg" alt="Shiva and Parvati">
<p>Destruction and Renewal</p> <p>Destruction and Renewal</p>
</div> </div>
<!-- Slide 12: Varuna & Gauri --> <!-- Slide 15: Varuna & Gauri -->
<div class="slide hindu-slide" id="slide-12"> <div class="slide hindu-slide" id="slide-15">
<h2>Varuna & Gauri</h2> <h2>Varuna & Gauri</h2>
<img src="images/varuna and Gauri.svg" alt="Varuna and Gauri"> <img src="images/varuna and Gauri.svg" alt="Varuna and Gauri">
<p>Water and Purity</p> <p>Water and Purity</p>
</div> </div>
<!-- Slide 13: Vishnu & Lakshmi --> <!-- Slide 16: Vishnu & Lakshmi -->
<div class="slide hindu-slide" id="slide-13"> <div class="slide hindu-slide" id="slide-16">
<h2>Vishnu & Lakshmi</h2> <h2>Vishnu & Lakshmi</h2>
<img src="images/visnu laksami.svg" alt="Vishnu and Lakshmi"> <img src="images/visnu laksami.svg" alt="Vishnu and Lakshmi">
<p>Preservation and Prosperity</p> <p>Preservation and Prosperity</p>
</div> </div>
<!-- Slide 14: Harmany image --> <!-- Slide 17: Harmany image -->
<div class="slide image-slide" id="slide-14"> <div class="slide image-slide" id="slide-17">
<h2>Harmany</h2> <h2>Harmany</h2>
<img src="images/drawing-1.svg" alt="Harmany concept"> <img src="images/drawing-1.svg" alt="Harmany concept">
</div> </div>
<!-- Slide 15: Physical Game Photo 1 --> <!-- Slide 18: Physical Game Photo 1 -->
<div class="slide content-slide" id="slide-15"> <div class="slide content-slide" id="slide-18">
<h2>Physical Game in Action</h2> <h2>Physical Game in Action</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;"> <div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182212.jpg" alt="Harmony game setup" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);"> <img src="images/IMG_20250930_182212.jpg" alt="Harmony game setup" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div> </div>
</div> </div>
<!-- Slide 16: Physical Game Photo 2 --> <!-- Slide 19: AI Research -->
<div class="slide content-slide" id="slide-16">
<h2>Game Board Detail</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182217.jpg" alt="Game board close-up" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 17: Physical Game Photo 3 -->
<div class="slide content-slide" id="slide-17">
<h2>Game Pieces & Elements</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182227.jpg" alt="Game pieces detail" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 18: Physical Game Photo 4 -->
<div class="slide content-slide" id="slide-18">
<h2>Gameplay in Progress</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182236.jpg" alt="Game in progress" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 19: Physical Game Photo 5 -->
<div class="slide content-slide" id="slide-19"> <div class="slide content-slide" id="slide-19">
<h2>Complete Game Setup</h2>
<div style="display: flex; justify-content: center; align-items: center; height: 70vh;">
<img src="images/IMG_20250930_182505.jpg" alt="Complete game setup" style="max-width: 90%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,255,255,0.3);">
</div>
</div>
<!-- Slide 20: AI Research -->
<div class="slide content-slide" id="slide-20">
<h2>More AI Bollocks?</h2> <h2>More AI Bollocks?</h2>
<p style="font-size: 1.8em; margin-bottom: 30px;">Want to see what AI agents can actually do?</p> <p style="font-size: 1.8em; margin-bottom: 30px;">Want to see what AI agents can actually do?</p>
<p style="font-size: 1.4em; margin-bottom: 20px;"><strong>HY300 Linux Porting Project</strong></p> <p style="font-size: 1.4em; margin-bottom: 20px;"><strong>HY300 Linux Porting Project</strong></p>
@ -534,8 +524,8 @@
<p style="font-size: 1.2em; margin-top: 30px; color: #0ff;"><strong>github.com/shift/sun50iw12p1-research</strong></p> <p style="font-size: 1.2em; margin-top: 30px; color: #0ff;"><strong>github.com/shift/sun50iw12p1-research</strong></p>
</div> </div>
<!-- Slide 21: Play Harmony --> <!-- Slide 20: Play Harmony -->
<div class="slide content-slide" id="slide-21"> <div class="slide content-slide" id="slide-20">
<h2>Ready to Play?</h2> <h2>Ready to Play?</h2>
<p style="font-size: 2em; margin-bottom: 30px;">Let's play some Harmony!</p> <p style="font-size: 2em; margin-bottom: 30px;">Let's play some Harmony!</p>
@ -572,13 +562,13 @@
<!-- Slide counter --> <!-- Slide counter -->
<div class="slide-counter"> <div class="slide-counter">
<span id="current-slide">1</span> / <span id="total-slides">16</span> <span id="current-slide">1</span> / <span id="total-slides">20</span>
</div> </div>
<script> <script>
// Slide navigation code // Slide navigation code
let currentSlideIndex = 0; let currentSlideIndex = 0;
const totalSlides = 21; const totalSlides = 20;
let isTransitioning = false; let isTransitioning = false;
function showSlide(index) { function showSlide(index) {