Display contributor and package additional information

index.html

@@ -28,13 +28,20 @@
         <button type="button" id="message-confirm">Weiter</button>
       </div>
       <div id="info-message">
-        <h4 id="info-message-subheadline"></h4>
         <div id="info-message-header">
-          <h2 id="info-message-headline">Test</h2>
           <img id="info-message-img" src="" />
+          <div id="info-message-header-text">
+            <h4 id="info-message-subheadline"></h4>
+            <h2 id="info-message-headline">Test</h2>
           </div>
-        <div id="info-message-contents">Test</div>
+        </div>
-        <a id="info-message-link" href="" target="_blank">Check this out on Github</a>
+        <div id="info-message-contents">
+          <div id="info-message-contents-text"></div>
+          <div id="info-message-contents-version"></div>
+          <h4 id="info-message-content-commits-headline">Last Commits</h4>
+          <div id="info-message-contents-commits"></div>
+        </div>
+        <a id="info-message-link" href="" target="_blank">Check this out in detail</a>
         <div id="info-message-close">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
             <path

package-lock.json

@@ -5480,6 +5480,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "animejs": "^3.2.1",
     "firebase": "^8.8.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "p5": "^1.4.0",
     "rxjs": "^7.2.0",
     "zustand": "^3.5.7"

src/sketchObjects/Revealable.ts

@@ -5,6 +5,7 @@ import { colors } from '../constants/colors';
 import { logger } from '../logger';
 import store from '../store';
 import { Area } from '../types';
+import { Commit } from '../ui/info';
 
 export enum RevealableTypes {
   LEGACY = 'LEGACY',
@@ -20,6 +21,8 @@ export interface RevealableInterface {
   size: number;
   path?: string;
   imageUrl?: string;
+  version?: string;
+  commits?: Commit[];
 }
 
 enum RevealableStates {
@@ -39,6 +42,8 @@ export class Revealable {
   contents: string;
   url: string;
   imageUrl: string;
+  version: string;
+  commits: Commit[];
 
   isHovered: boolean;
   isRevealed: boolean;
@@ -53,12 +58,17 @@ export class Revealable {
   pulseOpacity: number = 255;
   pulseCountUp: boolean;
 
-  constructor({ type, name, path, contents, url, imageUrl }: RevealableInterface, area: Area) {
+  constructor(
+    { type, name, path, contents, url, imageUrl, version, commits }: RevealableInterface,
+    area: Area
+  ) {
     this.type = type;
     this.name = name;
     this.path = path;
     this.contents = contents;
     this.url = url;
+    this.version = version;
+    this.commits = commits;
     this.imageUrl = imageUrl;
     this.area = area;
     this.currentSize = this.minSize;
@@ -170,6 +180,8 @@ export class Revealable {
         innerHTML: this.contents,
         imgUrl: this.imageUrl,
         url: this.url,
+        version: this.version,
+        commits: this.commits,
       });
     }
   }

src/ui/info.ts

@@ -1,13 +1,21 @@
+import moment from 'moment';
 import { logger } from '../logger';
 import { RevealableTypes } from '../sketchObjects/Revealable';
 import store from '../store';
 
+export interface Commit {
+  url: string;
+  message: string;
+  time: string;
+}
 export interface InfoMessageType {
   type: RevealableTypes;
   headline: string;
   innerHTML: string;
   imgUrl?: string;
   url?: string;
+  commits?: Commit[];
+  version?: string;
 }
 
 export class InfoMessage {
@@ -20,6 +28,10 @@ export class InfoMessage {
   infoMessageClose: HTMLElement;
   infoMessageImgRef: HTMLImageElement;
   infoMessageLinkRef: HTMLAnchorElement;
+
+  infoMessageCommitsHeadlineRef: HTMLElement;
+  infoMessageCommitsRef: HTMLElement;
+  infoMessageVersionRef: HTMLElement;
   backdrop: HTMLElement;
 
   constructor() {
@@ -30,6 +42,11 @@ export class InfoMessage {
     this.infoMessageClose = document.getElementById('info-message-close');
     this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
     this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
+    this.infoMessageCommitsRef = document.getElementById('info-message-contents-commits');
+    this.infoMessageCommitsHeadlineRef = document.getElementById(
+      'info-message-content-commits-headline'
+    );
+    this.infoMessageVersionRef = document.getElementById('info-message-contents-version');
     this.backdrop = document.getElementById('backdrop');
 
     this.backdrop.addEventListener('click', this.onBackdropClick);
@@ -63,6 +80,22 @@ export class InfoMessage {
           this.infoMessageLinkRef.style.display = 'none';
         }
 
+        if (this.type === RevealableTypes.CONTRIBUTOR) {
+          this.infoMessageCommitsRef.style.display = 'block';
+          this.infoMessageCommitsHeadlineRef.style.display = 'block';
+          this.setCommits(newMessage.commits);
+        } else {
+          this.infoMessageCommitsRef.style.display = 'none';
+          this.infoMessageCommitsHeadlineRef.style.display = 'none';
+        }
+
+        if (this.type === RevealableTypes.PACKAGE) {
+          this.infoMessageVersionRef.style.display = 'block';
+          this.setVersion(newMessage.version);
+        } else {
+          this.infoMessageVersionRef.style.display = 'none';
+        }
+
         store.setState({ infoMessageShown: true });
       }
     });
@@ -80,7 +113,28 @@ export class InfoMessage {
 
   private setContents(headline: string, innerHTML: string) {
     this.infoMessageHeadline.innerText = headline;
-    this.infoMessageContents.innerHTML = innerHTML;
+    // this.infoMessageContents.innerHTML = innerHTML;
+  }
+
+  private setVersion(version: string) {
+    this.infoMessageVersionRef.innerHTML = `This package is installed at<br/><h3>${version}</h3>`;
+  }
+
+  private setCommits(commits: Commit[]) {
+    const commitEls = commits.map(
+      ({ message, url, time }) =>
+        `<div class="info-message-contents-commit">
+         <p>${message}</p>
+         <div>
+            <span>${moment(time).format(
+              'LLL'
+            )}</span> • <a href="${url}" target="_blank">Take a look on Github</a>
+         </div>
+      </div>`
+    );
+    console.log(commitEls);
+
+    this.infoMessageCommitsRef.innerHTML = commitEls.join('');
   }
 
   private setImg(imgUrl: string) {

styles.scss

@@ -235,17 +235,66 @@ textarea {
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
       var(--tw-shadow);
 
-    #info-message-subheadline {
+    #info-message-contents {
+      #info-message-contents-text {
+        margin: 1.5rem 0;
+      }
+
+      h4 {
         text-transform: uppercase;
         letter-spacing: 1px;
         font-weight: bold;
         color: #b0b7bf;
+        margin: 0 0 1rem 0;
+      }
+
+      #info-message-contents-version {
+        h3 {
+          display: inline-block;
+          margin: 1rem 0 0 0;
+          padding: 0.4rem 0.6rem;
+          background-color: #4e4e4e;
+          color: #fff;
+          border-radius: 10px;
+          font-size: 30px;
+          letter-spacing: 2px;
+          font-weight: bold;
+        }
+      }
+
+      #info-message-contents-commits {
+        .info-message-contents-commit {
+          background-color: #d0d5d9;
+          border-radius: 10px;
+          padding: 1rem;
+
+          &:not(:last-child) {
+            margin-bottom: 1.5rem;
+          }
+
+          p {
+            margin: 0;
+          }
+
+          div {
+            span {
+              font-size: 14px;
+              color: #4e4e4e;
+            }
+
+            a {
+              color: #0d0d0d;
+              font-size: 14px;
+            }
+          }
+        }
+      }
     }
 
     #info-message-header {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
-      align-items: flex-end;
+      align-items: center;
       margin-bottom: 25px;
 
       #info-message-img {
@@ -253,11 +302,22 @@ textarea {
         height: 100px;
         width: 100px;
         border-radius: 50%;
+        margin-right: 1.5rem;
       }
 
+      #info-message-header-text {
+        #info-message-subheadline {
+          text-transform: uppercase;
+          letter-spacing: 1px;
+          font-weight: bold;
+          color: #b0b7bf;
+          margin: 0;
+        }
         #info-message-headline {
           margin: 0;
-        text-align: center;
+          padding: 0;
+          text-align: left;
+        }
       }
     }