1e986d6c177db55e4a03c96d3b499216672bd046
[sketchy-heroes.git] / src / public / app / components.ts
1 type ProgressBarOptions = {
2   color: string;
3 }
4
5 function calculatePercent(current: number, max: number): number {
6   return (current / max) * 100;
7 }
8
9 export function progressBar(current: number, max: number, options: ProgressBarOptions): string {
10   const percent = calculatePercent(current, max)
11   return `
12   <div class="progress d-inline-block" title="${percent}%">
13   <div class="progress-bar bg-${options.color}" role="progressbar" style="width: ${percent}%;" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100">
14   ${current}/${max}
15   </div>
16   </div>
17   `;
18 }
19
20 export function actionLog(text: string, replace: boolean = true) {
21   const str = `<div class="log-item animated fadeIn" title="${Date.now()}">${text}</div>`;
22
23   replace ? $(`#action-log`).html(str): $(`#action-log`).append(str);
24 }