preparing for Version 1.0.0

src/classes/alertHandler.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Alert handler
+ */
+export declare class AlertHandler {
+    /**
+     * Structures alert handler
+     * @param mode
+     * @returns structure
+     */
+    private structure;
+    /**
+     * Fires warning
+     * @param [message]
+     */
+    fireWarning(message?: string): void;
+    /**
+     * Fires success
+     * @param [message]
+     */
+    fireSuccess(message?: string): void;
+    /**
+     * Fires danger
+     * @param [message]
+     */
+    fireDanger(message?: string): void;
+    /**
+     * Fires info
+     * @param [message]
+     */
+    fireInfo(message?: string): void;
+    /**
+     * Fires light
+     * @param [message]
+     */
+    fireLight(message?: string): void;
+    /**
+     * Fires dark
+     * @param [message]
+     */
+    fireDark(message?: string): void;
+    /**
+     * Fires primary
+     * @param [message]
+     */
+    firePrimary(message?: string): void;
+    /**
+     * Fires secondary
+     * @param [message]
+     */
+    fireSecondary(message?: string): void;
+    /**
+     * Fires timer
+     * @param alert
+     */
+    private fireTimer;
+    private sleep;
+}

src/classes/alertHandler.ts

@@ -1,8 +1,121 @@
+import { TMode } from '../model/TMode'
+
 /**
  * Alert handler
  */
 export class AlertHandler {
-    constructor(parameters) {
-
+
+    /**
+     * Structures alert handler
+     * @param mode 
+     * @returns structure 
+     */
+    private structure(mode: TMode, content: string): string {
+        return '<div class="alert alert-' + mode + '" role="alert">' + content + '</div>'
+    }
+
+    /**
+     * Fires warning
+     * @param [message] 
+     */
+    public fireWarning(message?:string): void {
+        if (message == undefined) {
+            message = "Warning: Something went wrong!";
+        }
+        this.fireTimer(this.structure('warning', message ));
+    }
+
+    /**
+     * Fires success
+     * @param [message] 
+     */
+    public fireSuccess(message?:string): void {
+        if (message == undefined) {
+            message = "Success: Something went right!";
+        }
+        this.fireTimer(this.structure('success', message ));
+    }
+
+    /**
+     * Fires danger
+     * @param [message] 
+     */
+    public fireDanger(message?:string): void {
+        if (message == undefined) {
+            message = "Danger: Something went wrong!";
+        }
+        this.fireTimer(this.structure('danger', message ));
+    }
+
+    /**
+     * Fires info
+     * @param [message] 
+     */
+    public fireInfo(message?:string): void {
+        if (message == undefined) {
+            message = "Info: Something went right!";
+        }
+        this.fireTimer(this.structure('info', message ));
+    }
+
+    /**
+     * Fires light
+     * @param [message] 
+     */
+    public fireLight(message?:string): void {
+        if (message == undefined) {
+            message = "Light: Something went right!";
+        }
+        this.fireTimer(this.structure('light', message ));
+    }
+
+    /**
+     * Fires dark
+     * @param [message] 
+     */
+    public fireDark(message?:string): void {
+        if (message == undefined) {
+            message = "Dark: Something went right!";
+        }
+        this.fireTimer(this.structure('dark', message ));
+    }
+
+    /**
+     * Fires primary
+     * @param [message] 
+     */
+    public firePrimary(message?:string): void {
+        if (message == undefined) {
+            message = "Primary: Something went right!";
+        }
+        this.fireTimer(this.structure('primary', message ));
+    }
+
+    /**
+     * Fires secondary
+     * @param [message] 
+     */
+    public fireSecondary(message?:string): void {
+        if (message == undefined) {
+            message = "Secondary: Something went right!";
+        }
+        this.fireTimer(this.structure('secondary', message ));
+    }
+
+    /**
+     * Fires timer
+     * @param alert 
+     */
+    private async fireTimer(alert: string): Promise<void> {
+        let response = document.createElement('div');
+        response.innerHTML = alert;
+        document.getElementsByTagName('footer')[0]?.appendChild(response);
+        await this.sleep(5000);
+        document.getElementsByTagName('footer')[0]?.removeChild(response)
+    }
+
+    //generate a sleep function
+    private async sleep(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms));
     }
 }

src/classes/editor.d.ts

@@ -14,6 +14,10 @@ export declare class Editor {
      * Editor value
      */
     private editor;
+    /**
+     * Alert handler of editor
+     */
+    private alertHandler;
     /**
      * Creates an instance of editor.
      */

src/classes/editor.ts

@@ -1,5 +1,6 @@
 import CodeMirror from 'codemirror';
 import { Template } from '../model/template';
+import { AlertHandler } from './alertHandler';
 
 /**
  * Editor
@@ -21,10 +22,16 @@ export class Editor {
      */
     private editor: CodeMirror.Editor
 
+    /**
+     * Alert handler of editor
+     */
+    private alertHandler: AlertHandler 
+
     /**
      * Creates an instance of editor.
      */
     constructor() {
+        this.alertHandler = new AlertHandler();
         console.log('Editor initialized');
         this.target = document.getElementById('editor') as HTMLDivElement;
 
@@ -100,6 +107,7 @@ export class Editor {
                 template = new Template(width.value, height.value, name.value, templateString);
             } else {
                 console.log('Template is undefined');
+                this.alertHandler.fireDanger('Template is undefined');
                 return;
             }
 
@@ -110,10 +118,11 @@ export class Editor {
             a.href = URL.createObjectURL(file);
             a.download = name.value + '-template.ts';
             a.click();
-
             console.log('Saved');
+            this.alertHandler.fireSuccess('Saved');
         } else {
             console.log('Inputs are empty');
+            this.alertHandler.fireWarning('Inputs are empty');
         }
     }
 }

src/classes/renderer.d.ts

@@ -6,6 +6,10 @@ export declare class Renderer {
      * Instance of app
      */
     private static instance;
+    /**
+     * Alert handler of renderer
+     */
+    private alertHandler;
     /**
      * Creates an instance of renderer.
      */
@@ -20,4 +24,5 @@ export declare class Renderer {
      * @param appRoot
      */
     renderMain(appRoot: HTMLDivElement): void;
+    private copyToClipboard;
 }

src/classes/renderer.ts

@@ -1,3 +1,6 @@
+import { AlertHandler } from "./alertHandler";
+import $ from 'jquery';
+
 /**
  * Renderer
  */
@@ -8,10 +11,16 @@ export class Renderer {
      */
     private static instance: Renderer
 
+    /**
+     * Alert handler of renderer
+     */
+    private alertHandler: AlertHandler
+
     /**
      * Creates an instance of renderer.
      */
     private constructor() {
+        this.alertHandler = new AlertHandler();
         console.log('Renderer initialized');
     }
 
@@ -43,9 +52,8 @@ export class Renderer {
         const editor = document.createElement('div');
         const submitDrop = document.createElement('button');
         const saveButton = document.createElement('button');
-        const infoBox = document.createElement('div');
+        const infoBox = document.createElement('pre');
         const breakText = document.createElement('br');
-        const infoBoxText = document.createElement('p');
         const infoBoxText1 = document.createElement('code');
         const infoBoxText2 = document.createElement('code');
         const fileForm = document.createElement('form');
@@ -125,15 +133,24 @@ export class Renderer {
         //#region infoBox
         infoBox.classList.add('app-body__info-box');
         infoBox.id = 'info-box';
-        infoBoxText.classList.add('app-body__info-box-text');
-        infoBoxText.id = 'info-box-text';
-        infoBoxText.innerHTML = '';
         infoBoxText1.classList.add('app-body__info-box-text-1');
         infoBoxText1.id = 'info-box-text-1';
         infoBoxText1.innerHTML = 'Key for the player name:          {player}';
+        const cp1 = document.createElement('p');
+        cp1.innerHTML = '{player}';
+        infoBoxText1.onclick = () => {
+            this.copyToClipboard(cp1);
+            this.alertHandler.fireSuccess('"{player}" Copied to clipboard');
+        };
         infoBoxText2.classList.add('app-body__info-box-text-2');
         infoBoxText2.id = 'info-box-text-2';
         infoBoxText2.innerHTML = 'Key for the team name (optional): {team}';
+        const cp2 = document.createElement('p');
+        cp2.innerHTML = '{team}';
+        infoBoxText2.onclick = () => {
+            this.copyToClipboard(cp2);
+            this.alertHandler.fireSuccess('"{team}" Copied to clipboard');
+        };
         //#endregion
 
         //#region fileForm
@@ -158,10 +175,9 @@ export class Renderer {
 
         navigation.appendChild(optionMain);
 
-        infoBoxText.appendChild(infoBoxText1);
-        infoBoxText.appendChild(breakText);
-        infoBoxText.appendChild(infoBoxText2);
-        infoBox.appendChild(infoBoxText);
+        infoBox.appendChild(infoBoxText1);
+        infoBox.appendChild(breakText);
+        infoBox.appendChild(infoBoxText2);
 
         fileForm.appendChild(svgDropZone);
         fileForm.appendChild(submitDrop);
@@ -177,4 +193,13 @@ export class Renderer {
         appRoot.appendChild(appNavigation);
         appRoot.appendChild(appBody);
     }
+
+    // generate a function that copys the content of a string element to the clipboard
+    private copyToClipboard(element: HTMLElement): void {
+        var $temp = $("<input>");
+        $("body").append($temp);
+        $temp.val($(element).text()).select();
+        document.execCommand("copy");
+        $temp.remove();
+    }
 }

src/model/TMode.d.ts

@@ -0,0 +1 @@
+export declare type TMode = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

src/model/TMode.ts

@@ -0,0 +1 @@
+export type TMode = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

src/sass/_app-body.sass

@@ -35,4 +35,7 @@
     background-color: #f5f5f5
     border-style: inset
     border-radius: 0.25rem
-    padding: 1rem
+    padding: 1rem
+
+.app-body__info-box-text-1, .app-body__info-box-text-2
+    cursor: pointer	

src/sass/_header.sass

@@ -18,7 +18,8 @@ header
     h2
         padding: 0
         margin: 0
-        font-size: 1.4rem
+        font-size: 1.3rem
+        margin-left: 0.5rem
 
 .logo
     width: 1.5rem

src/sass/main.sass

@@ -24,6 +24,9 @@ main
     margin: 2rem
     height: 100%
 
+.alert
+    @include noselect
+
 /* width */
 ::-webkit-scrollbar
     width: 0.5rem

static/index.html

@@ -23,5 +23,7 @@ <h2> Template Generator</h2>
         </div>
     </main>
 </body>
+<footer>    
+</footer>
 <script src="../dist/app.bundle.js"></script>
 </html>