refactor: move stuff around

src/app/app.config.ts

@@ -1,7 +1,6 @@
 import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
 import { provideRouter, withHashLocation, withInMemoryScrolling } from '@angular/router';
 import { routes } from './app.routes';
-import { flowbiteAppInitializer } from './flowbite';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { DATABASE_TABLE, databaseInitializerFactory, databaseInitializerFactoryDeps } from './services/database.service';
@@ -10,7 +9,6 @@ import { characterStoreInitializerFactory, characterStoreInitializerFactoryDeps
 
 export const appConfig: ApplicationConfig = {
     providers: [
-        { provide: APP_INITIALIZER, useFactory: () => flowbiteAppInitializer, multi: true },
         provideAnimations(),
         provideRouter(
             routes,

src/app/app.routes.ts

@@ -36,7 +36,7 @@ export const routes: Routes = [
         children: [
             {
                 path: 'dice',
-                loadComponent: () => import('./components/dice/dice.component'),
+                loadComponent: () => import('./components/tools/dice/dice.component'),
             },
         ],
     },

src/app/components/inputs/submit-button/submit-button.component.html

@@ -1,11 +1,13 @@
 <button
     [disabled]="disabled"
     class="w-full rounded-lg border border-transparent bg-blue-700 px-5 py-2.5 text-center text-sm font-medium
+    text-white
     hover:bg-blue-800
-    focus:outline-none focus:ring-4 focus:ring-blue-300
-    disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-white disabled:text-gray-400
-    dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-    disabled:dark:border-red-400 disabled:dark:bg-gray-950 sm:w-auto"
+    focus:outline-none
+    focus:ring-4 focus:ring-blue-300 disabled:cursor-not-allowed
+    disabled:border-gray-200 disabled:bg-white disabled:text-gray-400 dark:bg-blue-600
+    dark:hover:bg-blue-700 dark:focus:ring-blue-800
+    disabled:dark:border-gray-400 disabled:dark:bg-gray-950 sm:w-auto"
     type="submit">
     <ng-content></ng-content>
 </button>

src/app/components/root/root.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { HeaderComponent } from '../header/header.component';
+import { initFlowbite } from 'flowbite';
 
 @Component({
     selector: 'pap-root',
@@ -11,4 +12,8 @@ import { HeaderComponent } from '../header/header.component';
     templateUrl: './root.component.html',
     styleUrl: './root.component.css',
 })
-export class RootComponent {}
+export class RootComponent implements OnInit {
+    ngOnInit(): void {
+        initFlowbite();
+    }
+}

src/app/components/tools/dice/dice.component.html

@@ -0,0 +1,19 @@
+<pap-h1>Würfeln</pap-h1>
+
+<form class="mx-auto max-w-sm">
+    <div class="mb-5">
+        <label class="mb-2 block text-sm font-medium" for="dice">Definition</label>
+        <input
+            [(ngModel)]="dice"
+            class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            id="dice"
+            name="dice"
+            placeholder="2d20"
+            required
+            type="text" />
+    </div>
+    <pap-submit-button (click)="roll()" [disabled]="!dice"> Würfeln! </pap-submit-button>
+
+    <div class="mt-4">Ergebnis: {{ result }}</div>
+</form>
+<canvas class="mt-4 w-full border" id="dice-canvas"></canvas>

src/app/components/dice/dice.component.ts → src/app/components/tools/dice/dice.component.ts

@@ -1,11 +1,13 @@
 import { AfterViewInit, Component } from '@angular/core';
 import DiceBox from '@3d-dice/dice-box';
 import { FormsModule } from '@angular/forms';
+import { SubmitButtonComponent } from '../../inputs/submit-button/submit-button.component';
+import { H1Component } from '../../headings/h1/h1.component';
 
 @Component({
     selector: 'pap-dice',
     standalone: true,
-    imports: [FormsModule],
+    imports: [FormsModule, SubmitButtonComponent, H1Component],
     templateUrl: './dice.component.html',
     styleUrl: './dice.component.css',
 })