diff --git a/index.html b/index.html index 6125f0f..f50fb8d 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@
+

Test

diff --git a/src/store.ts b/src/store.ts index 3e80702..adfafdf 100644 --- a/src/store.ts +++ b/src/store.ts @@ -31,7 +31,7 @@ const store = create( devtools((set) => ({ uid: null, showScore: false, - currentIntroStep: 0, + currentIntroStep: 1, revealablesFinished: 0, currentScene: Scenes.OVERVIEW, currentSubproject: null, diff --git a/src/ui/info.ts b/src/ui/info.ts index 6eb548d..37431e1 100644 --- a/src/ui/info.ts +++ b/src/ui/info.ts @@ -14,6 +14,7 @@ export class InfoMessage { type: RevealableTypes; name: string; infoMessage: HTMLElement; + infoMessageSubheadline: HTMLElement; infoMessageHeadline: HTMLElement; infoMessageContents: HTMLElement; infoMessageClose: HTMLElement; @@ -24,6 +25,7 @@ export class InfoMessage { constructor() { this.infoMessage = document.getElementById('info-message'); this.infoMessageHeadline = document.getElementById('info-message-headline'); + this.infoMessageSubheadline = document.getElementById('info-message-subheadline'); this.infoMessageContents = document.getElementById('info-message-contents'); this.infoMessageClose = document.getElementById('info-message-close'); this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement; @@ -47,6 +49,8 @@ export class InfoMessage { this.type = newMessage.type; this.name = newMessage.headline; + this.infoMessageSubheadline.innerHTML = this.getTextForType(); + if (newMessage.imgUrl) { this.setImg(newMessage.imgUrl); } else { @@ -64,6 +68,16 @@ export class InfoMessage { }); } + private getTextForType(): string { + if (this.type === RevealableTypes.CONTRIBUTOR) { + return 'Contributor'; + } else if (this.type === RevealableTypes.PACKAGE) { + return 'NPM Package'; + } else { + return 'Legacy Alert'; + } + } + private setContents(headline: string, innerHTML: string) { this.infoMessageHeadline.innerText = headline; this.infoMessageContents.innerHTML = innerHTML; diff --git a/styles.scss b/styles.scss index ae128ab..5905ea1 100644 --- a/styles.scss +++ b/styles.scss @@ -233,6 +233,13 @@ textarea { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + #info-message-subheadline { + text-transform: uppercase; + letter-spacing: 1px; + font-weight: bold; + color: #b0b7bf; + } + #info-message-header { display: flex; justify-content: space-between;