@mhmttosun/dnd 0.0.0-stage → 1.1.0

package/src/components/DNDPlayerElement.js

@@ -0,0 +1,191 @@
+/**
+ * <dnd-player> Web Component (Custom Element)
+ * 
+ * Herhangi bir framework (React, Vue, Svelte, Angular veya düz HTML) içinde
+ * standart bir HTML etiketi gibi çalışan bağımsız etkinlik oynatıcı bileşeni.
+ * 
+ * Kullanım Örneği:
+ * <dnd-player src="/samples/2_hayvanlar_eslestirme.json" sound="true"></dnd-player>
+ */
+
+import { ActivityPlayer } from '../ActivityPlayer.js';
+
+export class DNDPlayerElement extends HTMLElement {
+  static get observedAttributes() {
+    return ['src', 'sound', 'mode'];
+  }
+
+  constructor() {
+    super();
+    this._player = null;
+    this._data = null;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this._player) {
+      this._player.destroy();
+      this._player = null;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.isConnected) return;
+
+    if (name === 'src' && newValue) {
+      this.initPlayer();
+    } else if (name === 'sound' && this._player) {
+      this._player.setSound(newValue !== 'false');
+    } else if (name === 'mode' && this._player && (newValue === 'learning' || newValue === 'assessment')) {
+      this._player.setPlayMode(newValue);
+    }
+  }
+
+  /**
+   * Doğrudan JavaScript nesnesi olarak etkinlik verisi atanabilir:
+   * element.data = { ... }
+   */
+  get data() {
+    return this._data;
+  }
+
+  set data(val) {
+    this._data = val;
+    this.initPlayer();
+  }
+
+  get player() {
+    return this._player;
+  }
+
+  render() {
+    this.style.display = 'block';
+    this.style.position = 'relative';
+    this.style.width = '100%';
+    this.style.height = this.style.height || '100%';
+    this.style.minHeight = this.style.minHeight || '500px';
+
+    this.initPlayer();
+  }
+
+  initPlayer() {
+    if (this._player) {
+      this._player.destroy();
+      this._player = null;
+    }
+
+    const src = this.getAttribute('src');
+    const soundAttr = this.getAttribute('sound');
+    const sound = soundAttr !== 'false';
+    const modeAttr = this.getAttribute('mode') || 'learning';
+
+    if (!src && !this._data) return;
+
+    this._player = new ActivityPlayer({
+      target: this,
+      src: src || undefined,
+      data: this._data || undefined,
+      sound: sound,
+      playMode: modeAttr,
+      onComplete: (stats) => {
+        this.dispatchEvent(new CustomEvent('dnd:complete', { detail: stats, bubbles: true }));
+      },
+      onStep: (state) => {
+        this.dispatchEvent(new CustomEvent('dnd:step', { detail: state, bubbles: true }));
+      },
+      onDrop: (dropInfo) => {
+        this.dispatchEvent(new CustomEvent('dnd:drop', { detail: dropInfo, bubbles: true }));
+      },
+      onReset: (state) => {
+        this.dispatchEvent(new CustomEvent('dnd:reset', { detail: state, bubbles: true }));
+      },
+      onReady: (p) => {
+        this.dispatchEvent(new CustomEvent('dnd:ready', { detail: { player: p }, bubbles: true }));
+      }
+    });
+  }
+
+  /**
+   * Bir File veya Blob nesnesi yükler (<input type="file"> için)
+   */
+  loadFile(file) {
+    if (this._player) {
+      this._player.loadFromFile(file);
+    } else {
+      this._player = new ActivityPlayer({
+        target: this,
+        file: file,
+        sound: this.getAttribute('sound') !== 'false'
+      });
+    }
+  }
+
+  /**
+   * Ham JSON metni yükler
+   */
+  loadJsonString(jsonString) {
+    if (this._player) {
+      this._player.loadFromJsonString(jsonString);
+    } else {
+      this._player = new ActivityPlayer({
+        target: this,
+        jsonString: jsonString,
+        sound: this.getAttribute('sound') !== 'false'
+      });
+    }
+  }
+
+  /**
+   * Kontrol alanındaki geri bildirim mesajını günceller
+   */
+  setFeedback(message, type = 'info', duration = 0) {
+    if (this._player) {
+      this._player.setFeedback(message, type, duration);
+    }
+  }
+
+  /**
+   * Anlık geri bildirim durumunu döner
+   */
+  getFeedback() {
+    return this._player ? this._player.getFeedback() : null;
+  }
+
+  /**
+   * Etkinliği sıfırlama metodu
+   */
+  reset() {
+    if (this._player) this._player.reset();
+  }
+
+  /**
+   * Durum sorgulama metodu
+   */
+  getState() {
+    return this._player ? this._player.getState() : null;
+  }
+
+  /**
+   * Aktif oyun modunu döner ('learning' veya 'assessment')
+   */
+  getPlayMode() {
+    return this._player ? this._player.getPlayMode() : (this.getAttribute('mode') || 'learning');
+  }
+
+  /**
+   * Oyun modunu değiştirir ('learning' veya 'assessment')
+   * @param {'learning'|'assessment'} mode
+   */
+  setPlayMode(mode) {
+    if (this._player) this._player.setPlayMode(mode);
+    this.setAttribute('mode', mode);
+  }
+}
+
+// Custom element kaydı
+if (typeof customElements !== 'undefined' && !customElements.get('dnd-player')) {
+  customElements.define('dnd-player', DNDPlayerElement);
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/**
+ * DND Interactive Activity Library (Full Bundle Entrypoint)
+ * 
+ * Hem oynatıcıyı (ActivityPlayer / DNDPlayerElement) hem de
+ * görsel düzenleyici bileşenlerini dışa aktarır.
+ */
+
+export { ActivityPlayer } from './ActivityPlayer.js';
+export { DNDPlayerElement } from './components/DNDPlayerElement.js';
+
+// Global window.DND altındaki motor sınıfları
+export const getDND = () => (typeof window !== 'undefined' ? window.DND : {});

package/src/player.js

@@ -0,0 +1,13 @@
+/**
+ * DND Player Kütüphane Giriş Noktası (Player Only)
+ * 
+ * Sadece etkinlik oynatıcıyı iç projelerinde kullanmak isteyenler için hafif paket.
+ */
+
+export { ActivityPlayer } from './ActivityPlayer.js';
+export { DNDPlayerElement } from './components/DNDPlayerElement.js';
+
+// Eğer global window nesnesinde ActivityEngine varsa dışa aktar
+export const ActivityEngine = (typeof window !== 'undefined' && window.DND) ? window.DND.ActivityEngine : undefined;
+export const AudioSynthesizer = (typeof window !== 'undefined' && window.DND) ? window.DND.AudioSynthesizer : undefined;
+export const ValidationEngine = (typeof window !== 'undefined' && window.DND) ? window.DND.ValidationEngine : undefined;