From abdd43aa879e12f79e81273abb867923453b3159 Mon Sep 17 00:00:00 2001
From: Lucas Dower <lucasjdower@gmail.com>
Date: Thu, 4 Apr 2024 23:34:58 +0100
Subject: [PATCH] Added announcement to banner

---
 loc/en_GB.ts                |  1 +
 src/config.ts               |  2 +-
 src/ui/components/header.ts | 14 ++++++++++++++
 src/ui/icons.ts             | 11 +++++++++++
 styles.css                  | 10 ++++++++++
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/loc/en_GB.ts b/loc/en_GB.ts
index 01e68ca..4d496c5 100644
--- a/loc/en_GB.ts
+++ b/loc/en_GB.ts
@@ -182,6 +182,7 @@ export const en_GB = {
             open_github_repo: 'Open GitHub repo',
             open_github_issues: 'Open GitHub issues',
             join_discord: 'Join Discord server',
+            kofi_donate: 'Donate via Ko-fi',
         }
     },
 };
diff --git a/src/config.ts b/src/config.ts
index 8d0cbad..adea947 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -12,7 +12,7 @@ export class AppConfig {
     public readonly MAJOR_VERSION = 0;
     public readonly MINOR_VERSION = 8;
     public readonly HOTFIX_VERSION = 9;
-    public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'd'; // dev, alpha, or release build
+    public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'r'; // dev, alpha, or release build
     public readonly MINECRAFT_VERSION = '1.20.1';
 
     public readonly LOCALE = 'en-GB';
diff --git a/src/ui/components/header.ts b/src/ui/components/header.ts
index f34e4d0..382bd4f 100644
--- a/src/ui/components/header.ts
+++ b/src/ui/components/header.ts
@@ -15,6 +15,7 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
     private _githubButton: ToolbarItemComponent;
     private _bugButton: ToolbarItemComponent;
     private _discordButton: ToolbarItemComponent;
+    private _kofiButton: ToolbarItemComponent;
 
     private constructor() {
         super();
@@ -36,6 +37,12 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
                 window.open('https://discord.gg/McS2VrBZPD');
             })
             .setTooltip('toolbar.join_discord');
+
+        this._kofiButton = new ToolbarItemComponent({ id: 'kofi', iconSVG: AppIcons.KOFI })
+            .onClick(() => {
+                window.open('https://ko-fi.com/lucasdower');
+            })
+            .setTooltip('toolbar.kofi_donate');
     }
 
     // Header element shouldn't be
@@ -45,6 +52,9 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
 
     public override generateHTML(): string {
         return `
+            <div class="col-container announcement">
+                The next release of ObjToSchematic will be a major overhaul with new features coming later in 2024. Join the Discord for updates.
+            </div>
             <div class="col-container header-cols">
                 <div class="col-container">
                     <div class="col-item">
@@ -65,6 +75,7 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
                     ${this._githubButton.generateHTML()}
                     ${this._bugButton.generateHTML()}
                     ${this._discordButton.generateHTML()}
+                    ${this._kofiButton.generateHTML()}
                 </div>
             </div>
             <div class="row-container header-cols">
@@ -84,18 +95,21 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
         this._githubButton.updateTranslation();
         this._bugButton.updateTranslation();
         this._discordButton.updateTranslation();
+        this._kofiButton.updateTranslation();
     }
 
     public override registerEvents(): void {
         this._githubButton.registerEvents();
         this._bugButton.registerEvents();
         this._discordButton.registerEvents();
+        this._kofiButton.registerEvents();
     }
 
     public override finalise(): void {
         this._githubButton.finalise();
         this._bugButton.finalise();
         this._discordButton.finalise();
+        this._kofiButton.finalise();
         // const updateElement = UIUtil.getElementById('update-checker') as HTMLDivElement;
         // updateElement.style.animation = 'pulse-opacity 1.5s infinite';
         // updateElement.innerHTML = '<i style="animation: pulse-opacity 1.5s infinite;">Checking for updates...</i>';
diff --git a/src/ui/icons.ts b/src/ui/icons.ts
index 6b26a30..f786eed 100644
--- a/src/ui/icons.ts
+++ b/src/ui/icons.ts
@@ -180,6 +180,17 @@ export namespace AppIcons {
         </svg>
     `;
 
+    export const KOFI = `
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-coffee" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" />
+    <path d="M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
+    <path d="M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
+    <path d="M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" />
+    <path d="M16.746 16.726a3 3 0 1 0 .252 -5.555" />
+  </svg>
+    `;
+
     export const SELECT_ALL = `
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none"        stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
diff --git a/styles.css b/styles.css
index 76f37f5..f77e0e0 100644
--- a/styles.css
+++ b/styles.css
@@ -749,4 +749,14 @@ a {
 .privacy-disclaimer {
   font-size: var(--font-size-small);
   color: var(--text-dim);
+}
+
+.announcement {
+  border: 1px solid var(--blue-600);
+  background: var(--blue-500);
+  margin-bottom: 30px;
+  padding: 10px;
+  color: var(--text-bright);
+  border-radius: 3px;
+  font-size: smaller;
 }
\ No newline at end of file