@ait-co/devtools 0.1.7 → 0.1.8

package/dist/panel/index.js

@@ -71,7 +71,9 @@ const DEFAULT_STATE = {
 	},
 	ads: {
 		isLoaded: false,
-		nextEvent: "loaded"
+		nextEvent: "loaded",
+		forceNoFill: false,
+		lastEvent: null
 	},
 	game: {
 		profile: {
@@ -1335,6 +1337,192 @@ function renderDeviceTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/ads/index.ts
+/**
+* 광고 mock (GoogleAdMob, TossAds, FullScreenAd)
+*/
+function withIsSupported(fn) {
+	fn.isSupported = () => true;
+	return fn;
+}
+const GoogleAdMob = createMockProxy("GoogleAdMob", {
+	loadAppsInTossAdMob: withIsSupported((args) => {
+		setTimeout(() => {
+			if (aitState.state.ads.forceNoFill) {
+				args.onError(/* @__PURE__ */ new Error("No fill"));
+				return;
+			}
+			aitState.patch("ads", { isLoaded: true });
+			args.onEvent({
+				type: "loaded",
+				data: { adGroupId: args.options?.adGroupId }
+			});
+		}, 200);
+		return () => {};
+	}),
+	showAppsInTossAdMob: withIsSupported((args) => {
+		if (!aitState.state.ads.isLoaded) {
+			args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+			return () => {};
+		}
+		setTimeout(() => args.onEvent({ type: "requested" }), 50);
+		setTimeout(() => args.onEvent({ type: "show" }), 100);
+		setTimeout(() => args.onEvent({ type: "impression" }), 150);
+		setTimeout(() => {
+			args.onEvent({
+				type: "userEarnedReward",
+				data: {
+					unitType: "coins",
+					unitAmount: 10
+				}
+			});
+		}, 1e3);
+		setTimeout(() => {
+			args.onEvent({ type: "dismissed" });
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+		return () => {};
+	}),
+	isAppsInTossAdMobLoaded: withIsSupported(async (_options) => aitState.state.ads.isLoaded)
+});
+createMockProxy("TossAds", {
+	initialize: withIsSupported((_options) => {
+		console.log("[@ait-co/devtools] TossAds.initialize (mock)");
+	}),
+	attach: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:16px;text-align:center;color:#666;font-size:14px;";
+			placeholder.textContent = "[@ait-co/devtools] TossAds Placeholder";
+			el.appendChild(placeholder);
+		}
+	}),
+	attachBanner: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:12px;text-align:center;color:#666;font-size:12px;";
+			placeholder.textContent = "[@ait-co/devtools] Banner Ad Placeholder";
+			el.appendChild(placeholder);
+		}
+		return { destroy: () => {} };
+	}),
+	destroy: withIsSupported((_slotId) => {}),
+	destroyAll: withIsSupported(() => {})
+});
+const loadFullScreenAd = withIsSupported((args) => {
+	setTimeout(() => {
+		if (aitState.state.ads.forceNoFill) {
+			args.onError(/* @__PURE__ */ new Error("No fill"));
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		args.onEvent({
+			type: "loaded",
+			data: { adGroupId: args.options?.adGroupId }
+		});
+	}, 200);
+	return () => {};
+});
+const showFullScreenAd = withIsSupported((args) => {
+	if (!aitState.state.ads.isLoaded) {
+		args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+		return () => {};
+	}
+	setTimeout(() => args.onEvent({ type: "show" }), 100);
+	setTimeout(() => args.onEvent({ type: "dismissed" }), 1500);
+	return () => {};
+});
+//#endregion
+//#region src/panel/tabs/ads.ts
+function recordEvent(type) {
+	aitState.patch("ads", { lastEvent: {
+		type,
+		timestamp: Date.now()
+	} });
+}
+function recordError(message) {
+	recordEvent(`error: ${message}`);
+}
+function statusRow(label, value) {
+	return h("div", { className: "ait-row" }, h("label", {}, label), h("span", { style: "font-family:SF Mono,Menlo,monospace;font-size:11px;color:#aaa" }, value));
+}
+function lastEventLine() {
+	const last = aitState.state.ads.lastEvent;
+	if (!last) return h("div", { className: "ait-log-entry" }, h("span", { style: "color:#555" }, "No events yet"));
+	const time = new Date(last.timestamp).toLocaleTimeString();
+	return h("div", { className: "ait-log-entry" }, h("span", {
+		className: "ait-log-type",
+		style: last.type.startsWith("error:") ? "color:#e74c3c" : ""
+	}, last.type), h("span", { className: "ait-log-time" }, time));
+}
+function adSection(title, onLoad, onShow, disabled) {
+	const loadBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Load");
+	const showBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Show");
+	if (disabled) {
+		loadBtn.disabled = true;
+		showBtn.disabled = true;
+	}
+	loadBtn.addEventListener("click", onLoad);
+	showBtn.addEventListener("click", onShow);
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title), h("div", { className: "ait-btn-row" }, loadBtn, showBtn));
+}
+function renderAdsTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const forceNoFillCb = h("input", {
+		type: "checkbox",
+		className: "ait-checkbox"
+	});
+	forceNoFillCb.checked = s.ads.forceNoFill;
+	if (disabled) forceNoFillCb.disabled = true;
+	forceNoFillCb.addEventListener("change", () => {
+		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Ads State"), statusRow("isLoaded", String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, "Force \"no fill\""), forceNoFillCb), lastEventLine()), adSection("GoogleAdMob", () => {
+		GoogleAdMob.loadAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		GoogleAdMob.showAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled), adSection("TossAds", () => {
+		if (aitState.state.ads.forceNoFill) {
+			recordError("No fill");
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		recordEvent("loaded");
+	}, () => {
+		if (!aitState.state.ads.isLoaded) {
+			recordError("Ad not loaded");
+			return;
+		}
+		recordEvent("show");
+		setTimeout(() => {
+			recordEvent("dismissed");
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+	}, disabled), adSection("FullScreenAd", () => {
+		loadFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		showFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled));
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/analytics.ts
 function renderAnalyticsTab() {
 	const disabled = !aitState.state.panelEditable;
@@ -2281,6 +2469,10 @@ const TABS = [
 		id: "iap",
 		label: "IAP"
 	},
+	{
+		id: "ads",
+		label: "Ads"
+	},
 	{
 		id: "events",
 		label: "Events"
@@ -2302,6 +2494,7 @@ function createTabRenderers(refreshPanel) {
 		device: renderDeviceTab,
 		viewport: renderViewportTab,
 		iap: renderIapTab,
+		ads: renderAdsTab,
 		events: renderEventsTab,
 		analytics: renderAnalyticsTab,
 		storage: () => renderStorageTab(refreshPanel)
@@ -2502,7 +2695,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.7`), closeBtn);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.8`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of TABS) {
@@ -2541,7 +2734,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap")) refreshPanel();
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}