@jjlmoya/utils-tabletop 1.28.0 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.28.0",
+    "version": "1.29.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/mus-scoreboard/component.astro

@@ -2,19 +2,27 @@
 import './online-mus-scoreboard.css';
 import { musScoreboard } from './index';
 import type { KnownLocale } from '../../types';
+import type { MusScoreboardUI } from './ui';
 
 interface Props {
+  ui?: MusScoreboardUI;
   locale?: KnownLocale;
 }
 
-const { locale = 'en' } = Astro.props as Props;
-const loader = musScoreboard.i18n[locale] || musScoreboard.i18n.en;
-const content = await loader?.();
-if (!content) return null;
-const { ui } = content;
+const props = Astro.props as Props;
+let ui = props.ui;
+
+if (!ui) {
+  const locale = props.locale || 'en';
+  const loader = musScoreboard.i18n[locale] || musScoreboard.i18n.en;
+  const content = await loader?.();
+  ui = content?.ui;
+}
+
+if (!ui) return null;
 ---
 
-<div class="mus-scoreboard" data-mus-scoreboard>
+<div class="mus-scoreboard" data-mus-scoreboard data-ui={JSON.stringify(ui)}>
   <div class="mus-board-card">
     <section class="mus-onboarding" aria-labelledby="mus-how-to-use">
       <div class="mus-onboarding-mark" aria-hidden="true">
@@ -24,7 +32,7 @@ const { ui } = content;
         <span></span>
       </div>
       <div>
-        <p class="mus-kicker" id="mus-how-to-use">LIVE TABLE</p>
+        <p class="mus-kicker" id="mus-how-to-use">{ui.liveMatch}</p>
         <p class="mus-onboarding-copy">{ui.onboarding}</p>
       </div>
     </section>
@@ -32,7 +40,7 @@ const { ui } = content;
     <form class="mus-config" data-config-form>
       <div class="mus-config-heading">
         <div>
-          <p class="mus-kicker">SET THE TABLE</p>
+          <p class="mus-kicker">{ui.matchSettings}</p>
           <h2>{ui.matchSettings}</h2>
         </div>
         <span class="mus-rule-seal" aria-hidden="true">MUS</span>
@@ -160,10 +168,12 @@ const { ui } = content;
   </div>
 </div>
 
-<script type="application/json" data-mus-ui set:html={JSON.stringify(ui)}></script>
 <script>
   import { mountMusScoreboard } from './controller';
+
   const root = document.querySelector<HTMLElement>('[data-mus-scoreboard]');
-  const uiNode = document.querySelector<HTMLScriptElement>('[data-mus-ui]');
-  if (root && uiNode) mountMusScoreboard(root, JSON.parse(uiNode.textContent || '{}'));
+  if (root) {
+    const ui = JSON.parse(root.dataset.ui || '{}');
+    mountMusScoreboard(root, ui);
+  }
 </script>