Added announcement to banner

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',
         }
     },
 };

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';

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>';

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"/>

styles.css

@@ -750,3 +750,13 @@ a {
   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;
+}