feat: remove start / stop buttons

Author: d-koppenhagen

src/index.html

@@ -10,11 +10,6 @@ <h1>🍣 Sushi mit RxJS</h1>
 
   <p>Lass uns Sushi essen! Du kannst den Flattening-Operator in der <code>index.ts</code> ändern, um verschiedene Strategien auszuprobieren!</p>
 
-  <div class="button-container">
-    <button id="startBtn" type="button">Starten</button>
-    <button id="stopBtn" type="button">Stoppen</button>
-  </div>
-
   <!-- UI Container wird von initUI() in ui.ts erstellt und hier eingefügt -->
   <div id="sushi-ui-placeholder"></div>
 

src/index.ts

@@ -1,9 +1,9 @@
 import './style.css';
-import { Observable, Subject } from 'rxjs';
-import { filter, concatMap, mergeMap, switchMap, exhaustMap, withLatestFrom, takeUntil, tap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { filter, concatMap, mergeMap, switchMap, exhaustMap, withLatestFrom, tap } from 'rxjs/operators';
 
 import { SushiWithSoja, sushiBelt$, soja$, iWantThis, getSushiFromPlate } from './helpers'
-import { initUI, onPlateAppear, onPlateSelected, onSushiConsumed, onStart, onStop } from './ui'
+import { initUI, onPlateAppear, onPlateSelected, onSushiConsumed, onStart } from './ui'
 
 // Initialize UI on load
 initUI();
@@ -18,22 +18,11 @@ const sushi$: Observable<SushiWithSoja> = sushiBelt$.pipe(
   ))
 );
 
-// Subject to signal stream termination
-const stop$ = new Subject<void>();
+// Auto-start on page load
+onStart();
 
-document.getElementById('stopBtn')?.addEventListener('click', () => {
-  stop$.next();
-  onStop();
-});
+// Log all plates from the belt
+sushiBelt$.subscribe(plate => onPlateAppear(plate));
 
-document.getElementById('startBtn')?.addEventListener('click', () => {
-  onStart();
-
-  // Log all plates from the belt
-  sushiBelt$.pipe(takeUntil(stop$))
-    .subscribe(plate => onPlateAppear(plate))
-
-  // Log consumed sushi with soy sauce
-  sushi$.pipe(takeUntil(stop$))
-    .subscribe(sushi => onSushiConsumed(sushi));
-});
+// Log consumed sushi with soy sauce
+sushi$.subscribe(sushi => onSushiConsumed(sushi));

src/style.css

@@ -59,76 +59,6 @@ p code {
   color: #ffd93d;
 }
 
-/* Button container */
-.button-container {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  justify-content: center;
-  margin-bottom: 1.5rem;
-}
-
-button {
-  padding: 1rem 2.5rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  border: none;
-  border-radius: 50px;
-  cursor: pointer;
-  margin: 0.5rem;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-button::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-button:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-#startBtn {
-  background: linear-gradient(135deg, #6bcf7f 0%, #4ecdc4 100%);
-  color: #1a1a2e;
-  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
-}
-
-#startBtn:hover {
-  transform: translateY(-3px) scale(1.05);
-  box-shadow: 0 8px 25px rgba(78, 205, 196, 0.6);
-}
-
-#startBtn:active {
-  transform: translateY(0) scale(0.98);
-}
-
-#stopBtn {
-  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
-  color: #fff;
-  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
-}
-
-#stopBtn:hover {
-  transform: translateY(-3px) scale(1.05);
-  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
-}
-
-#stopBtn:active {
-  transform: translateY(0) scale(0.98);
-}
-
 /* Plate animation on the side */
 @keyframes plateSlide {
   0% { transform: translateX(-100vw) rotate(0deg); }
@@ -145,11 +75,6 @@ button:hover::before {
     font-size: 0.9rem;
     padding: 0 1rem;
   }
-
-  button {
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-  }
 }
 
 /* ============================================

src/ui.ts

@@ -143,10 +143,11 @@ export function initUI(): void {
   sushiApp.appendChild(tableArea);  // Table Area zwischen Belt und Bottom Section
   sushiApp.appendChild(bottomSection);
 
-  // In das bestehende HTML einfügen (nach dem Button-Container)
-  const buttonContainer = document.querySelector('.button-container');
-  if (buttonContainer && buttonContainer.parentNode) {
-    buttonContainer.parentNode.insertBefore(sushiApp, buttonContainer.nextSibling);
+  // In das bestehende HTML einfügen (nach dem Placeholder oder Paragraph)
+  const placeholder = document.getElementById('sushi-ui-placeholder');
+  if (placeholder && placeholder.parentNode) {
+    placeholder.parentNode.insertBefore(sushiApp, placeholder);
+    placeholder.remove();
   } else {
     // Fallback: Am Ende des Body einfügen
     document.body.appendChild(sushiApp);