diff mrjunejune/src/jrpg/index.html @ 261:b401627fc49e

Add JRPG mock flows and interactive previews Add scripted mock SSE commands, custom event forwarding, animated chat turns, full-height message navigation, and a cyberpunk resume dossier. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Wed, 05 Aug 2026 20:38:32 -0700
parents 1f9877b637e9
children 0f45474c1b1a
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/index.html	Wed Aug 05 09:19:41 2026 -0700
+++ b/mrjunejune/src/jrpg/index.html	Wed Aug 05 20:38:32 2026 -0700
@@ -18,7 +18,6 @@
 
             <mjj-jrpg-chat aria-labelledby="conversation-title">
               <div class="jrpg-panel-heading">
-                <span aria-hidden="true">QUEST 01</span>
                 <h1 id="conversation-title">Conversations</h1>
               </div>
               <zen-message-scroller>
@@ -27,23 +26,35 @@
                   data-zen-viewport
                   role="log"
                   aria-live="polite"
-                  aria-relevant="additions"
+                  aria-relevant="additions text"
                 >
                   <ol class="jrpg-messages" data-messages>
-                    <li class="jrpg-message" data-speaker="Epi">
+                    <li class="jrpg-message" data-speaker="Epi" data-turn-group="start">
                       <strong>Epi</strong>
                       <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p>
                     </li>
-                    <li class="jrpg-message" data-speaker="System">
+                    <li class="jrpg-message" data-speaker="System" data-turn-group="start">
                       <strong>System</strong>
                       <p>The Shiba terminal is ready.</p>
                     </li>
                   </ol>
                 </div>
               </zen-message-scroller>
-              <p class="jrpg-next" aria-hidden="true">
-                NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon>
-              </p>
+              <nav class="jrpg-turn-navigation" aria-label="Conversation turns">
+                <zen-button appearance="plain" size="sm">
+                  <button type="button" data-turn-previous aria-label="Previous turn" disabled>
+                    <zen-icon name="chevron-left"></zen-icon>
+                    Previous
+                  </button>
+                </zen-button>
+                <span data-turn-position aria-live="polite">START</span>
+                <zen-button appearance="plain" size="sm">
+                  <button type="button" data-turn-next aria-label="Next turn" disabled>
+                    Next
+                    <zen-icon name="chevron-right"></zen-icon>
+                  </button>
+                </zen-button>
+              </nav>
             </mjj-jrpg-chat>
           </section>
 
@@ -64,6 +75,20 @@
                   <h2 data-preview-title>Resume</h2>
                 </zen-heading>
                 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
+                <ul class="jrpg-work-showcase" data-work-showcase>
+                  <li>
+                    <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
+                      <span>Copilot Tasks</span>
+                      <small>Agentic execution</small>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
+                      <span>Copilot SuperApp</span>
+                      <small>AI platform</small>
+                    </a>
+                  </li>
+                </ul>
                 <dl class="jrpg-preview-stats">
                   <div>
                     <dt>TYPE</dt>
@@ -82,7 +107,7 @@
                       <zen-icon name="search"></zen-icon>
                     </button>
                   </zen-button>
-                  <dialog aria-labelledby="jrpg-dialog-title">
+                  <dialog class="jrpg-resume-dialog" aria-labelledby="jrpg-dialog-title">
                     <div class="jrpg-dialog-heading">
                       <p>DESTINATION DATA</p>
                       <zen-button appearance="plain" size="md">
@@ -93,12 +118,28 @@
                     </div>
                     <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
                     <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
-                    <zen-button appearance="plain" size="lg">
-                      <a href="/resume" data-preview-link>
-                        Open destination
-                        <zen-icon name="arrow-right"></zen-icon>
-                      </a>
-                    </zen-button>
+                    <section
+                      class="jrpg-resume-dossier"
+                      data-resume-dossier
+                      aria-label="Resume dossier"
+                    >
+                      <p data-resume-status>Loading resume dossier...</p>
+                      <div data-resume-content></div>
+                    </section>
+                    <div class="jrpg-dialog-actions">
+                      <zen-button appearance="plain" size="lg">
+                        <a href="/resume" data-preview-link>
+                          Open full page
+                          <zen-icon name="arrow-right"></zen-icon>
+                        </a>
+                      </zen-button>
+                      <zen-button appearance="plain" size="lg" data-resume-download>
+                        <a href="/public/resume.pdf">
+                          Download PDF
+                          <zen-icon name="download"></zen-icon>
+                        </a>
+                      </zen-button>
+                    </div>
                   </dialog>
                 </zen-dialog>
               </article>
@@ -118,18 +159,20 @@
                   required
                 ></textarea>
               </zen-field>
-              <zen-button appearance="plain" size="lg">
-                <button type="submit">
-                  Send
-                  <zen-icon name="arrow-right"></zen-icon>
-                </button>
-              </zen-button>
-              <zen-button appearance="plain" size="lg" data-cancel-control hidden>
-                <button type="button" data-cancel>
-                  Cancel
-                  <zen-icon name="close"></zen-icon>
-                </button>
-              </zen-button>
+              <div class="jrpg-composer-actions">
+                <zen-button appearance="plain" size="lg">
+                  <button type="submit">
+                    Send
+                    <zen-icon name="arrow-right"></zen-icon>
+                  </button>
+                </zen-button>
+                <zen-button appearance="plain" size="lg" data-cancel-control hidden>
+                  <button type="button" data-cancel>
+                    Cancel
+                    <zen-icon name="close"></zen-icon>
+                  </button>
+                </zen-button>
+              </div>
               <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
             </form>
           </mjj-jrpg-composer>