Merge pull request #13 from TeachMeInc/SWQA-2121

Swqa 2121
TeachMeInc · Oct 2, 2024 · 71b2756 · 71b2756
2 parents f5f101c + ef71514
commit 71b2756
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 36 deletions.
diff --git a/platforms/html5/src/assets/share-icon.svg b/platforms/html5/src/assets/share-icon.svg
diff --git a/platforms/html5/src/data.ts b/platforms/html5/src/data.ts
@@ -66,6 +66,14 @@ export interface PostScoreOptions {
   meta?: any;
 }
 
+export interface GamePromoLink {
+  icon_url: string;
+  background_color: string;
+  title: string;
+  url: string;
+  type: string;
+}
+
 interface ScoreBodyData {
   game: string | null;
   level_key: string;
@@ -100,7 +108,8 @@ const methods = Emitter({
     'postDatastore': '/v1/datastore',
     'getDailyGameProgress': '/v1/dailygameprogress',
     'postDailyGameProgress': '/v1/dailygameprogress',
-    'getDailyGameStreak': '/v1/dailygamestreak'
+    'getDailyGameStreak': '/v1/dailygamestreak',
+    'getGamePromoLinks': '/v1/promolinks'
   },
 
 
@@ -408,6 +417,21 @@ const methods = Emitter({
 
     return false;
   },
+
+  getGamePromoLinks: async function () {
+    const params = { game: session[ 'api_key' ] };
+
+    const promise = new Promise<GamePromoLink[]>(function (resolve) {
+      methods.getAPIData({
+        method: methods.apiMethods[ 'getGamePromoLinks' ],
+        params: params
+      })
+        .then(function (gamepromolink: any) {
+          resolve(gamepromolink);
+        });
+    });
+    return promise;
+  },
 
   // #endregion
 

diff --git a/platforms/html5/src/styles/summary.scss b/platforms/html5/src/styles/summary.scss
@@ -176,3 +176,47 @@
     margin-right: 0.75rem;
   }
 }
+
+.swag-summary__promo-links {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
+  padding: 0;
+  align-items: center;
+
+  li {
+    padding: 0 1rem;
+    margin: 0.5rem;
+    border-radius: 14px;
+    background-color: #D9D9D9;
+    font-size: 12px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    width: 289px;
+    height: 67px;
+  }
+
+  img {
+    max-height: 45px;
+    height: auto;
+    width: 45px;
+    display: block;
+    margin-right: 1rem;
+  }
+}
+
+.swag-summary__button-container {
+  display: inline-flex;
+  margin-left: auto;
+  margin-right: auto;
+
+  > * {
+    margin: 0 0.75rem;
+  }
+
+  + .swag-summary__promo-links {
+    margin-top: 0;
+  }
+}
diff --git a/platforms/html5/src/summary.tsx b/platforms/html5/src/summary.tsx
@@ -31,7 +31,7 @@ function ShareStatsComponent (props: ShareStatsProps) {
 
   return (
     <button 
-      className='swag-summary__btn --outline'
+      className='swag-summary__btn'
       onClick={copyToClipboard}
     >
       {
@@ -77,6 +77,7 @@ interface SummaryProps {
   shareString: string;
   isSubscriber: boolean;
   relatedGames: { slug: string, title: string, icon: string }[];
+  promoLinks: { icon_url: string, background_color: string, title: string, url: string, type: string }[];
   onReplay?: () => void;
 }
 
@@ -85,10 +86,10 @@ function SummaryComponent (props: SummaryProps) {
   const navigateToTitle = (slug: string) => {
     messages.trySendMessage('swag.navigateToTitle', slug);
   };
-
-  const navigateToGameLanding = () => {
-    messages.trySendMessage('swag.navigateToGameLanding');
-  }
+  
+  const navigateToArchive = () => {
+    messages.trySendMessage('swag.navigateToArchive');
+  };
 
   return (
     <div className='swag-summary'>
@@ -119,39 +120,54 @@ function SummaryComponent (props: SummaryProps) {
             }
           </ul>
         </header>
-        <div>
+
+        <div className='swag-summary__button-container'>
           <ShareStatsComponent shareString={props.shareString} />
+          {
+            props.onReplay && (
+              <ReplayComponent 
+                onReplay={props.onReplay} 
+              />
+            )
+          }
         </div>
-        <p>
-          Ready for more? Play more games from the archive.
-        </p>
-        <div>
-          <button 
-            className='swag-summary__btn'
-            onClick={navigateToGameLanding}
-          >
-            View Archive
-          </button>
-        </div>
+
         {
-          props.onReplay && (
-            <ReplayComponent 
-              onReplay={props.onReplay} 
-            />
-          )
+          props.relatedGames.length 
+            ? (
+              <ul className='swag-summary__related-games'>
+                {
+                  props.relatedGames.map(({ slug, title, icon }) => {
+                    return (
+                      <li key={slug} onClick={() => navigateToTitle(slug)}>
+                        <img src={icon} alt={title} />
+                        <span>{title}</span>
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            ) : <></>
+        }
+
+        {
+          props.promoLinks.length
+            ? (
+              <ul className='swag-summary__promo-links'>
+                {
+                  props.promoLinks.map(({ icon_url, background_color, title, url, type }) => {
+                    const navMethod = type === 'archive' ? navigateToArchive : navigateToTitle;
+                    return (
+                      <li key={title} style={{ backgroundColor: background_color }} onClick={() => navMethod(url)}>
+                        <img src={icon_url} alt={title} />
+                        <span>{title}</span>
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            ) : <></>
         }
-        <ul className='swag-summary__related-games'>
-          {
-            props.relatedGames.map(({ slug, title, icon }) => {
-              return (
-                <li key={slug} onClick={() => navigateToTitle(slug)}>
-                  <img src={icon} alt={title} />
-                  <span>{title}</span>
-                </li>
-              );
-            })
-          }
-        </ul>
       </div>
     </div>
   );
@@ -300,6 +316,8 @@ class SummaryAPI {
       }
     );
 
+    const promoLinks = await data.getGamePromoLinks();
+
     let relatedGames;
     try {
       const event = await messages.trySendMessage('swag.getRelatedGames');
@@ -316,6 +334,7 @@ class SummaryAPI {
         titleHtml={titleHtml}
         resultHtml={resultHtml}
         relatedGames={relatedGames}
+        promoLinks={promoLinks}
         shareString={shareString}
         isSubscriber={isSubscriber}
         onReplay={unmount}