feat: handle templates in embed.js, closes #482

SpaceCowMedia · Jan 7, 2025 · 32980a9 · 32980a9
1 parent 85fb172
commit 32980a9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 24 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,6 +8,12 @@
     },
     "peacock.color": "#007fff",
     "eslint.format.enable": true,
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
     "svg.preview.background": "transparent",
     "files.associations": {
         "*.css": "tailwindcss",
@@ -19,4 +25,4 @@
     "files.insertFinalNewline": false,
     "files.trimFinalNewlines": true,
     "files.eol": "\n",
-}
+}
diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js
diff --git a/public/embed.js b/public/embed.js
@@ -1,18 +1,22 @@
 {
   function nameToId(name) {
-    return name.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9\-]/g, '');
+    return name
+      .toLowerCase()
+      .replace(/ /g, '-')
+      .replace(/[^a-z0-9-]/g, '');
   }
 
   const url = new URL(document.currentScript.src);
   const params = new URLSearchParams(url.searchParams);
   const uses = JSON.parse(params.get('uses'));
+  const requires = JSON.parse(params.get('requires'));
   const produces = JSON.parse(params.get('produces'));
   const id = params.get('id');
   const color = params.get('color');
   const extraRequirementCount = params.get('extraRequirementCount');
   const parent = document.currentScript.parentElement;
 
-  parent.querySelector("#csbLoad").remove();
+  parent.querySelector('#csbLoad').remove();
 
   parent.innerHTML = `
 <link href="//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css" rel="stylesheet" type="text/css" />
@@ -85,40 +89,67 @@
 </style>
 <a href="https://commanderspellbook.com/combo/${id}" rel="noopener noreferrer" target="_blank" class="outer">
   <div class="idContainer">
-    ${color.split("").map((c) => `<i class="ms ms-${c.toLowerCase()} ms-cost ms-shadow"></i>`).join(' ')}
+    ${color
+      .split('')
+      .map((c) => `<i class="ms ms-${c.toLowerCase()} ms-cost ms-shadow"></i>`)
+      .join(' ')}
   </div>
 
   <div class="list">
-    ${uses.map((cardName) => `
+    ${uses
+      .map(
+        (cardName) => `
       <div id="${nameToId(cardName)}" class="cardEntry">
         ${cardName}
-       </div>`).join('')}
-    ${extraRequirementCount > 0 ? `
+       </div>`,
+      )
+      .join('')}
+    ${requires
+      .map(
+        (cardName) => `
+      <div class="cardEntry">
+        ${cardName}
+       </div>`,
+      )
+      .join('')}
+    ${
+      extraRequirementCount > 0
+        ? `
       <div class="cardEntry otherPrereq">
         +${extraRequirementCount} other prerequisite${extraRequirementCount > 1 ? 's' : ''}
-        </div>` : ''}
+        </div>`
+        : ''
+    }
   </div>
   <div class="list noborder">
-    ${produces.map((feature) => `
+    ${produces
+      .map(
+        (feature) => `
       <div class="cardEntry">
         ${feature}
-       </div>`).join('')}
+       </div>`,
+      )
+      .join('')}
   </div>
   <div class="logoContainer">
     <img src="https://commanderspellbook.com/images/gear.svg" height="30"  />
     <span>Commander Spellbook</span>
   </div>
 </a>
 <div id="card-hover" class="cardHover"></div>
-`
+`;
 
-  const hoverElement = parent.querySelector("#card-hover");
-  if (!hoverElement) throw new Error("No hover element found");
+  const hoverElement = parent.querySelector('#card-hover');
+  if (!hoverElement) {
+    throw new Error('No hover element found');
+  }
 
   uses.forEach((cardName) => {
     const cardId = nameToId(cardName);
     const el = parent.querySelector(`#${cardId}`);
-    if (!el) return;
+    if (!el) {
+      return;
+    }
     el.addEventListener('mousemove', (e) => {
       hoverElement.style.display = 'block';
       hoverElement.style.left = `${e.clientX + 25}px`;
@@ -127,6 +158,6 @@
     });
     el.addEventListener('mouseout', () => {
       hoverElement.style.display = 'none';
-    })
+    });
   });
 }
diff --git a/src/components/combo/ComboSidebarLinks/Embed/Embed.tsx b/src/components/combo/ComboSidebarLinks/Embed/Embed.tsx
@@ -14,15 +14,16 @@ const Embed = ({ combo }: Props) => {
 
   let query = `v=1`;
   query += `&uses=${encodeURIComponent(JSON.stringify(combo.uses.map((card) => card.card.name)))}`;
+  query += `&requires=${encodeURIComponent(JSON.stringify(combo.requires.map((card) => card.template.name)))}`;
   query += `&produces=${encodeURIComponent(JSON.stringify(combo.produces.map((feature) => feature.feature.name)))}`;
   query += `&id=${combo.id}`;
   query += `&color=${combo.identity}`;
-  query += `&extraRequirementCount=${combo.requires.length + (combo.otherPrerequisites ? combo.otherPrerequisites.split('.').filter((s) => s.trim().length).length : 0)}`;
+  query += `&extraRequirementCount=${combo.otherPrerequisites ? combo.otherPrerequisites.split('.').filter((s) => s.trim().length).length : 0}`;
 
   // The empty iframe ensures that wordpress detects the embed
   const embedCode = imageMode
-    ? `<a href="https://commanderspellbook.com/combo/${combo.id}" rel="noopener noreferrer" target="_blank">
-    <img src="https://commanderspellbook.com/api/combo/${combo.id}/generate-image" alt="Preview of the combo with id ${combo.id}" /></a>`
+    ? `<a href="${process.env.NEXT_PUBLIC_CLIENT_URL}/combo/${combo.id}" rel="noopener noreferrer" target="_blank">
+    <img src="${process.env.NEXT_PUBLIC_CLIENT_URL}/api/combo/${combo.id}/generate-image" alt="Preview of the combo with id ${combo.id}" /></a>`
     : `<div style="width:100%; position:relative; overflow: visible; display: flex; justify-content: center" id="${combo.id}">
     <img alt="csb logo" src="${process.env.NEXT_PUBLIC_CLIENT_URL}/images/gear.svg" width="300" id="csbLoad"/>
     <script id="${combo.id}" src="${process.env.NEXT_PUBLIC_CLIENT_URL}/embed.js?${query}"></script>