Start adding an attribution area for animation and skeletons. This might be too complicated

Author: scottpetrovic

src/credits.css

@@ -0,0 +1,28 @@
+#credits-dialog {
+    display:none; 
+    position: fixed; 
+    top: 0; 
+    left: 0; 
+    width: 100vw; 
+    height: 100vh; 
+    background: rgba(0,0,0,0.5); /* grey out bg, so don't use theme colors */
+    z-index: 10000; 
+    align-items: center; 
+    justify-content: center;
+}
+
+#credits-contents {
+   background: var(--bg-primary); 
+   color: var(--text-primary);
+   padding: 2rem; 
+   border-radius: 8px; 
+   max-width: 90vw; 
+   max-height: 80vh; 
+   overflow-y: auto; 
+   position: relative; 
+   box-shadow: 0 4px 32px #000a;
+}
+
+button#close-credits-dialog {
+ 
+}

src/index.html

@@ -12,6 +12,7 @@
     <link href="./styles.css" rel="stylesheet" crossorigin="anonymous" />
     <link rel="stylesheet" href="./radio-button-group.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="./animation-player.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="./credits.css" crossorigin="anonymous" />
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 
@@ -258,8 +259,20 @@
                     <!-- javascript will populate this item with animations
                          that we get from the animations file(s)  -->
                     <div id="animations-items"> </div>
-        
-        
+
+                    <!-- Attribution. clicking will open dialog with attribution information -->
+                    <a href="#" id="attribution-link">Attribution</a>
+                    <div id="attribution-message" style="display: none;"></div>
+                     <div id="credits-dialog">
+                         <div id="credits-contents" >
+                            <div style="display: flex; align-items: center; gap: 2rem;">
+                                <h2 style="margin:0;">Attribution for skeleton &amp; animations</h2>
+                                <button id="close-credits-dialog" >&times;</button>
+                            </div>
+                            <div id="credits-content"></div>
+                        </div>
+                    </div>
+
                     <!-- slider to control arm extension (hide this feature until the base functionality is more stable) -->
                     <div id="a-pose-correction-options">
                         <div style="display: flex; flex-direction: row; align-items: center;">
@@ -342,5 +355,6 @@
     <!-- 3d view control hit box. It is just a container to help with 3d view controls. -->
     <div id="view-control-hitbox"></div>
 
+   
 </body>
 </html>

src/lib/CreditsDialog.ts

@@ -0,0 +1,81 @@
+// Attribution/Credits Dialog Logic as a TypeScript class
+export interface CreditEntry {
+  name: string
+  url: string
+}
+
+export class CreditsDialog {
+  private readonly attribution_link: HTMLElement | null
+  private readonly credits_dialog: HTMLElement | null
+  private readonly close_button: HTMLElement | null
+  private readonly credits_content: HTMLElement | null
+  private readonly skeleton_credits: Record<string, CreditEntry[]>
+
+  constructor () {
+    this.attribution_link = document.getElementById('attribution-link')
+    this.credits_dialog = document.getElementById('credits-dialog')
+    this.close_button = document.getElementById('close-credits-dialog')
+    this.credits_content = document.getElementById('credits-content')
+
+    this.skeleton_credits = {
+      human: [
+        { name: 'Quaternius', url: 'https://quaternius.com/' },
+        { name: 'Scott Petrovic', url: 'https://scottpetrovic.com' }
+      ],
+      fox: [
+        { name: 'Scott Petrovic', url: 'https://scottpetrovic.com' }
+      ],
+      bird: [
+        { name: 'Scott Petrovic', url: 'https://scottpetrovic.com' }
+      ]
+    }
+
+    this.addEventListeners()
+  }
+
+  private get_current_skeleton_type (): string {
+    const sel = document.getElementById('skeleton-selection') as HTMLSelectElement | null
+    if (sel && sel.value) {
+      return sel.value
+    }
+    return 'human'
+  }
+
+  public show (): void {
+    if ((this.credits_dialog == null) || (this.credits_content == null)) return
+
+    const skeleton_type = this.get_current_skeleton_type()
+    const credits = this.skeleton_credits[skeleton_type] || []
+    this.credits_dialog.style.display = 'flex'
+
+    if (credits.length === 0) {
+      this.credits_content.innerHTML = '<p>No credits available for this skeleton type.</p>'
+      return
+    }
+
+    this.credits_content.innerHTML = '<ul style="padding-left: 1.2em;">' +
+        credits.map(c => `<li><a href="${c.url}" target="_blank" rel="noopener">${c.name}</a></li>`)
+               .join('') + '</ul>'
+  }
+
+  public hide (): void {
+    if (this.credits_dialog != null) this.credits_dialog.style.display = 'none'
+  }
+
+  private addEventListeners (): void {
+    this.attribution_link?.addEventListener('click', (e) => {
+      e.preventDefault()
+      this.show()
+    })
+
+    this.close_button?.addEventListener('click', () => {
+      this.hide()
+    })
+
+    this.credits_dialog?.addEventListener('click', (e) => {
+      if (e.target === this.credits_dialog) {
+        this.hide()
+      }
+    })
+  }
+}

src/script.ts

@@ -1,3 +1,4 @@
+import { CreditsDialog } from './lib/CreditsDialog.ts';
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
@@ -87,6 +88,9 @@ export class Bootstrap {
     this.process_step = this.process_step_changed(ProcessStep.LoadModel)
     this.animate() // start the render loop which will continue rendering the scene
     this.inject_build_version()
+
+    // Create the credits dialog
+    const creds_dialog: CreditsDialog = new CreditsDialog()
   }
 
   private inject_build_version (): void {

src/styles.css

@@ -5,6 +5,7 @@
   /* Dark theme (default) */
   --text-primary: white;
   --text-alternate: #dae2e6;
+  --link-color: #d0d0d0;
 
   --bg-primary: #2b4353;
   --bg-alternate: #426074;
@@ -24,6 +25,7 @@
 [data-theme="light"] {
   --text-primary: #2c3e50;
   --text-alternate: #96a5ac;
+  --link-color: #3b6081;
 
   --bg-primary: #ecf0f1;
   --bg-alternate: #bac9d2;
@@ -54,9 +56,18 @@ h1, h2, h3, h4, h5, h6, input, button, select {
     color: var(--text-primary);
     font-family: 'Jost', sans-serif;
     font-size: 14px;
+    font-weight: 400;
     display: inline-block;
 }
 
+ a {
+    color: var(--link-color);
+    font-size: 80%;
+ }
+ a:hover {
+    text-decoration: none;
+ }
+
 /* Icon toggle for show skeleton */
 .icon-toggle label {
     cursor: pointer;