Merge pull request #61 from immutable/feature/card-profiles

Added new format to display cards in a profile form
immutable · Jul 19, 2024 · 73064a9 · 73064a9
2 parents 69f7a6c + 1d61075
commit 73064a9
Show file tree

Hide file tree

Showing 9 changed files with 807 additions and 425 deletions.
diff --git a/dist/composited-card.packed.js b/dist/composited-card.packed.js
diff --git a/dist/composited-card.packed.js.map b/dist/composited-card.packed.js.map
diff --git a/docs/bundle.a50069acdaad25bbf3de.js → docs/bundle.01e7be99d40323c0ec21.js b/docs/bundle.a50069acdaad25bbf3de.js → docs/bundle.01e7be99d40323c0ec21.js
diff --git a/docs/bundle.01e7be99d40323c0ec21.js.map b/docs/bundle.01e7be99d40323c0ec21.js.map
diff --git a/docs/bundle.a50069acdaad25bbf3de.js.map b/docs/bundle.a50069acdaad25bbf3de.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -26,5 +26,5 @@
     <div class="tempRenderHolder">
       <div class="compositedCardDomRender"></div>
     </div>
-  <script type="text/javascript" src="bundle.a50069acdaad25bbf3de.js"></script></body>
+  <script type="text/javascript" src="bundle.01e7be99d40323c0ec21.js"></script></body>
 </html>
diff --git a/src/composited-card.component.ts b/src/composited-card.component.ts
@@ -10,7 +10,8 @@ import {
 
   baseArtworkLayersCompositionTemplate,
   imageLayersCompositionTemplate,
-  textLayersCompositionTemplate
+  textLayersCompositionTemplate,
+  profileArtworkLayersCompositionTemplate
 } from './templating';
 
 import './assets/fonts.css';
@@ -46,6 +47,7 @@ export interface ICompositionData {
   lock?: string[];
   tribe_bar?: string[];
   set?: string[];
+  profile?: string[];
 }
 
 export interface ICardCompsitionData extends ICardProtoData {
@@ -108,6 +110,7 @@ export class CompositedCard extends LitElement {
   @property({ type: Boolean }) useLegacyQualityMapping = false;
   @property({ type: Number }) compositionVersion: number = 1;
   @property({ type: String }) illustrationSource: string;
+  @property({ type: String }) format = "card";
 
   public compositionCardData: ICardCompsitionData = {
     type: '',
@@ -130,6 +133,7 @@ export class CompositedCard extends LitElement {
       wreath: [],
       lock: [],
       tribe_bar: [],
+      profile: [],
     }
   };
 
@@ -259,6 +263,10 @@ export class CompositedCard extends LitElement {
 
     if (this.compositionVersion == 2) {
 
+      if(this.format == "profile") {
+        return this.renderProfile()
+      }
+
       const baseArtworkLayersCompositionTemplateData = {
         illustration: this.compositionCardData.composition.illustration,
         responsiveSrcsetSizes: this.responsiveSrcsetSizes,
@@ -329,4 +337,25 @@ export class CompositedCard extends LitElement {
 
 
   }
+
+  renderProfile() {
+
+    const baseArtworkLayersCompositionTemplateData = {
+      illustration: this.compositionCardData.composition.illustration,
+      profile: this.compositionCardData.composition.profile,
+      responsiveSrcsetSizes: this.responsiveSrcsetSizes,
+    }
+
+    if(this.illustrationSource?.length > 0) baseArtworkLayersCompositionTemplateData["imageSrc"] = this.illustrationSource
+
+    return html`
+        <div class="profile__ratioConstrainer">
+          ${this.loading
+            ? loadingTemplate()
+            : html`
+              ${profileArtworkLayersCompositionTemplate(baseArtworkLayersCompositionTemplateData)}
+            `}
+        </div>
+      `;
+  }
 }
diff --git a/src/styles.ts b/src/styles.ts
@@ -176,4 +176,49 @@ export const getStyles = () => css`
     position: absolute;
     color: white;
   }
+
+  .profile__ratioConstrainer {
+    margin: auto;
+    display: flex;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+  }
+
+  .profile__artwork {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: ${offBlack};
+  }
+
+  .profile__artwork__img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .profile__frame {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    top: 0;
+    background-color: clear;
+  }
+
+  .profile__frame__img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    right: 0;
+    top: 0;
+    background-color: clear;
+  }
+
+
 `;
diff --git a/src/templating.ts b/src/templating.ts
@@ -915,3 +915,79 @@ export const textLayersCompositionTemplate = ({
       : null}
   `;
 };
+
+/* CARD PROFILE */
+
+export const profileArtworkLayersCompositionTemplate = ({
+  illustration,
+  profile,
+  responsiveSrcsetSizes = `${artQualities.normal}px`,
+  imageSrc = guImagesUrl,
+}) => {
+  return html`
+    <picture class="profile__artwork">
+      <source
+        srcset="
+          ${imageSrc}/art2/${artQualities.normal}/${illustration[0]}.webp ${artQualities.small}w,
+          ${imageSrc}/art2/${artQualities.large}/${illustration[0]}.webp ${artQualities.normal}w,
+          ${imageSrc}/art2/${artQualities.xLarge}/${illustration[0]}.webp ${artQualities.large}w,
+          ${imageSrc}/art2/${artQualities.xxLarge}/${illustration[0]}.webp ${artQualities.xLarge}w,
+          ${imageSrc}/art2/${artQualities.xxxLarge}/${illustration[0]}.webp ${artQualities.xxLarge}w,
+          ${imageSrc}/art2/${artQualities.xxxxLarge}/${illustration[0]}.webp ${artQualities.xxxLarge}w,
+          ${imageSrc}/art2/${artQualities.best}/${illustration[0]}.webp ${artQualities.xxxxLarge}w
+        "
+        sizes="${responsiveSrcsetSizes}"
+        type="image/webp"
+      />
+      <source
+        srcset="
+          ${imageSrc}/art2/${artQualities.normal}/${illustration[0]}.jpg ${artQualities.small}w,
+          ${imageSrc}/art2/${artQualities.large}/${illustration[0]}.jpg ${artQualities.normal}w,
+          ${imageSrc}/art2/${artQualities.xLarge}/${illustration[0]}.jpg ${artQualities.large}w,
+          ${imageSrc}/art2/${artQualities.xxLarge}/${illustration[0]}.jpg ${artQualities.xLarge}w,
+          ${imageSrc}/art2/${artQualities.xxxLarge}/${illustration[0]}.jpg ${artQualities.xxLarge}w,
+          ${imageSrc}/art2/${artQualities.xxxxLarge}/${illustration[0]}.jpg ${artQualities.xxxLarge}w,
+          ${imageSrc}/art2/${artQualities.best}/${illustration[0]}.jpg ${artQualities.xxxxLarge}w
+        "
+        sizes="${responsiveSrcsetSizes}"
+        type="image/jpg"
+      />
+      <img
+        srcset="${imageSrc}/art2/${artQualities.small}/${illustration[0]}.jpg"
+        class="profile__artwork__img"
+      />
+    </picture>
+    <picture class="profile__frame">
+      <source
+        srcset="
+          ${imageSrc}/profiles/${artQualities.normal}/${profile[0]}.webp ${artQualities.small}w,
+          ${imageSrc}/profiles/${artQualities.large}/${profile[0]}.webp ${artQualities.normal}w,
+          ${imageSrc}/profiles/${artQualities.xLarge}/${profile[0]}.webp ${artQualities.large}w,
+          ${imageSrc}/profiles/${artQualities.xxLarge}/${profile[0]}.webp ${artQualities.xLarge}w,
+          ${imageSrc}/profiles/${artQualities.xxxLarge}/${profile[0]}.webp ${artQualities.xxLarge}w,
+          ${imageSrc}/profiles/${artQualities.xxxxLarge}/${profile[0]}.webp ${artQualities.xxxLarge}w,
+          ${imageSrc}/profiles/${artQualities.best}/${profile[0]}.webp ${artQualities.xxxxLarge}w
+        "
+        sizes="${responsiveSrcsetSizes}"
+        type="image/webp"
+      />
+      <source
+        srcset="
+          ${imageSrc}/profiles/${artQualities.normal}/${profile[0]}.jpg ${artQualities.small}w,
+          ${imageSrc}/profiles/${artQualities.large}/${profile[0]}.jpg ${artQualities.normal}w,
+          ${imageSrc}/profiles/${artQualities.xLarge}/${profile[0]}.jpg ${artQualities.large}w,
+          ${imageSrc}/profiles/${artQualities.xxLarge}/${profile[0]}.jpg ${artQualities.xLarge}w,
+          ${imageSrc}/profiles/${artQualities.xxxLarge}/${profile[0]}.jpg ${artQualities.xxLarge}w,
+          ${imageSrc}/profiles/${artQualities.xxxxLarge}/${profile[0]}.jpg ${artQualities.xxxLarge}w,
+          ${imageSrc}/profiles/${artQualities.best}/${profile[0]}.jpg ${artQualities.xxxxLarge}w
+        "
+        sizes="${responsiveSrcsetSizes}"
+        type="image/jpg"
+      />
+      <img
+        srcset="${imageSrc}/profiles/${artQualities.small}/${profile[0]}.jpg"
+        class="profile__frame__img"
+      />
+    </picture>
+  `;
+};