refactor(example_manager): update to use new features

Author: swkeep

interactionMenu/lua/client/example_manager.lua

@@ -7,15 +7,13 @@
 --                             | |
 --                             |_|
 -- https://github.com/swkeep
+
 local selected_test = 1
 local test_refs = {}
 local global_test_refs = {}
 local global_status = ""
-local active_emoji_template = '|<span style="filter: hue-rotate(300deg);">%s</span>'
-local inactive_emoji_template = '|<span style="filter: hue-rotate(150deg);">%s</span>'
-local emoji_numbers = {
-    "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣"
-}
+local active_template = '<span class="test-badge-active">%s</span>'
+local inactive_template = '<span class="test-badge-inactive">%s</span>'
 
 local test_slots = {
     front = {
@@ -51,18 +49,19 @@ local function unload_selected_test()
 end
 
 local function update_global_status()
-    global_status = ''
+    global_status = ""
     for index, ref in pairs(global_test_refs) do
         if ref.active then
-            global_status = global_status .. active_emoji_template:format(emoji_numbers[index])
+            global_status = global_status .. active_template:format(index)
         else
-            global_status = global_status .. inactive_emoji_template:format(emoji_numbers[index])
+            global_status = global_status .. inactive_template:format(index)
         end
     end
-    global_status = global_status .. "|"
 end
 
-function InternalGetTestSlot(slot_name, index) return test_slots[slot_name][index] end
+function InternalGetTestSlot(slot_name, index)
+    return test_slots[slot_name] and test_slots[slot_name][index] or nil
+end
 
 function InternalRegisterTest(init_fn, cleanup_fn, name, display_name, icon, description, badge)
     test_refs[#test_refs + 1] = {
@@ -76,10 +75,12 @@ function InternalRegisterTest(init_fn, cleanup_fn, name, display_name, icon, des
     }
 end
 
-function InternalRegisterGlobalTest(init_fn, cleanup_fn, name, display_name, icon)
+function InternalRegisterGlobalTest(init_fn, cleanup_fn, name, display_name, icon, description, badge)
     global_test_refs[#global_test_refs + 1] = {
         name = name,
         display_name = display_name,
+        description = description,
+        badge = badge,
         init = init_fn,
         cleanup = cleanup_fn,
         icon = icon
@@ -88,19 +89,58 @@ end
 
 CreateThread(function()
     if not DEVMODE then return end
-    Wait(250)
+    Wait(250) -- wait for other examples to register
+
     table.sort(test_refs, function(a, b) return a.name < b.name end)
 
     local test_menu_options = {
         {
             template = [[
-<div class="menu-cell menu-span2" style="display:flex; justify-content:space-between; flex-direction:column; align-items:center; padding:10px; gap:16px;">
-    <div class="menu-label" style="font-weight:bold; color:#fff; font-size:1.8rem;">Payment Method</div>
-    <div class="menu-value" style="color:#00ffcc; font-size:3rem;">{{active_menu}}</div>
+<style>
+.menu-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  gap: 12px;
+  background: rgba(40,40,40,0.0);
+  border-radius: 12px;
+}
+
+.menu-span2 {
+  width: 100%;
+}
+
+.menu-label {
+  font-weight: 700;
+  color: #fff;
+  font-size: 1.4rem;
+}
+
+.menu-value {
+  color: #00ffcc;
+  font-size: 2.6rem;
+  text-align: center;
+  line-height: 1.1;
+  min-height: 2.2rem;
+}
+
+.center-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+<div class="menu-cell menu-span2 center-column">
+  <div class="menu-label">Selected Test</div>
+  <div class="menu-value">{{active_menu}}</div>
 </div>
 ]],
             bind = function()
-                return { active_menu = test_refs[selected_test].display_name }
+                return {
+                    active_menu = test_refs[selected_test] and test_refs[selected_test].display_name or "None",
+                }
             end
         }
     }
@@ -113,7 +153,7 @@ CreateThread(function()
             icon = test.icon,
             action = function()
                 if selected_test == index then
-                    warn('Test already selected')
+                    unload_selected_test()
                     return
                 end
                 unload_selected_test()
@@ -129,9 +169,71 @@ CreateThread(function()
     local global_menu_options = {
         {
             template = [[
-<div class="menu-cell menu-span2" style="display:flex; flex-direction:column; align-items:center; padding:10px; gap:8px; background:rgba(50,50,50,0.85); border-radius:8px; border:1px solid #444;">
-    <div class="menu-label" style="font-weight:bold; color:#fff; font-size:1.4rem;">Global Test Status</div>
-    <div class="menu-value" style="font-size:2rem; color:#ffcc00;">{{status}}</div>
+<style>
+.menu-status {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 20px;
+  background: rgba(30,30,30,0.95);
+  border-radius: 12px;
+  border: 2px solid #666;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+}
+
+.menu-status .menu-label {
+  font-weight: 700;
+  color: #fff;
+  font-size: 1.6rem;
+  margin-bottom: 12px;
+  text-shadow: 1px 1px 2px #000;
+}
+
+.menu-status .menu-value {
+  font-size: 2.4rem;
+  font-weight: 700;
+  text-align: center;
+  line-height: 2.4rem;
+  min-height: 3rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.test-badge-active {
+  color: #00ff00;
+  background: rgba(0,255,0,0.15);
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 6px;
+  display: inline-block;
+  transition: transform 0.2s ease;
+}
+
+.test-badge-active:hover {
+  transform: scale(1.2);
+}
+
+.test-badge-inactive {
+  color: #ff5555;
+  background: rgba(255,0,0,0.1);
+  font-weight: bold;
+  padding: 4px 8px;
+  border-radius: 6px;
+  display: inline-block;
+  opacity: 0.7;
+  transition: transform 0.2s ease;
+}
+
+.test-badge-inactive:hover {
+  transform: scale(1.1);
+}
+</style>
+<div class="menu-cell menu-span2 menu-status">
+  <div class="menu-label">Global Test Status</div>
+  <div class="menu-value">{{{status}}}</div>
 </div>
 ]],
             bind = function()
@@ -140,9 +242,9 @@ CreateThread(function()
         }
     }
 
-    for _, global_ref in pairs(global_test_refs) do
+    for index, global_ref in pairs(global_test_refs) do
         global_menu_options[#global_menu_options + 1] = {
-            label = global_ref.display_name,
+            label = ("[%d] %s"):format(index, global_ref.display_name),
             description = global_ref.description,
             icon = global_ref.icon,
             action = function()
@@ -198,6 +300,8 @@ CreateThread(function()
 
     AddEventHandler('onResourceStop', function(resource)
         if resource ~= GetCurrentResourceName() then return end
-        if selected_test then test_refs[selected_test].cleanup() end
+        if selected_test and test_refs[selected_test] and test_refs[selected_test].cleanup then
+            test_refs[selected_test].cleanup()
+        end
     end)
 end)