unictive-angular 1.0.28 → 1.0.30

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.component.html

@@ -0,0 +1,20 @@
+<div class="fixed inset-0 bgs z-50 flex items-center justify-center">
+  <div class="absolute transition-all duration-100 ease-in-out transform hover:scale-110"
+    style="padding: 50px; box-sizing: content-box;"
+    [ngStyle]="{ top: boxPosition.top, left: boxPosition.left, position: 'absolute' }" (mouseenter)="onMouseEnterBox()">
+
+    <div (click)="onLogout()"
+      class=" w-40 h-20 bg-black text-white flex items-center text-center justify-center cursor-pointer rounded-xl  shadow-lg">
+      Tangkap
+    </div>
+  </div>
+
+  <div class="absolute top-5 right-5 text-white text-xl space-y-2 text-right bg-amber-900 p-2 rounded-2xl">
+    <div>Waktu: {{ timer }} detik</div>
+    <div>Skor: {{ score }}</div>
+  </div>
+
+  <div *ngIf="gameEnded" class="absolute bottom-10 text-white text-2xl font-bold">
+    Permainan Selesai! Skor akhir: {{ score }}
+  </div>
+</div>

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-widget_game',
+  templateUrl: './widget_game.component.html',
+  styleUrls: ['./widget_game.component.scss'],
+  standalone: false
+})
+export class Widget_gameComponent implements OnInit {
+
+  boxPosition = { top: '50%', left: '50%' };
+  gameStarted = false;
+  gameEnded = false;
+  timer = 60;
+  score = 0;
+  intervalId: any;
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit() {
+    this.startGame();
+  }
+  startGame() {
+    this.gameStarted = true;
+    this.timer = 60;
+    this.score = 0;
+    this.gameEnded = false;
+    this.moveBoxRandomly();
+
+    this.intervalId = setInterval(() => {
+      this.timer--;
+      if (this.timer <= 0) {
+        clearInterval(this.intervalId);
+        this.gameEnded = true;
+      }
+      this.cdr.detectChanges();
+    }, 1000);
+  }
+
+  onMouseEnterBox() {
+    if (!this.gameEnded) {
+      this.score++;
+      this.moveBoxRandomly();
+      // this.cdr.detectChanges();
+
+    }
+  }
+
+  moveBoxRandomly() {
+    const top = Math.random() * 90;
+    const left = Math.random() * 90;
+    this.boxPosition = {
+      top: `${top}%`,
+      left: `${left}%`,
+    };
+    this.cdr.detectChanges();
+
+  }
+
+  onLogout() {
+    // this.auth.onLogout();
+  }
+
+}

package/bin/utils/resource/src/app/shared/widgets/widget_game/widget_game.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Widget_gameComponent } from './widget_game.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [Widget_gameComponent],
+  declarations: [Widget_gameComponent]
+})
+export class Widget_gameModule { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unictive-angular",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "CLI untuk membuat project Angular dengan struktur kustom (Modules, Core, API, Shared).",
   "scripts": {
     "build": "npm version patch && npm publish --access public"