-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
-
- (null);
+ const [selectAvatar, setSelectAvatar] = useState(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const { turnHistory } = useBattleDataStore();
+ const { listAvatar } = useAvatarDataStore();
+ const { locale } = useLocaleStore();
+ const transI18n = useTranslations("DataAnalysisPage");
+ const turnListRef = useRef(null);
+
+ const parallelogramStyle: React.CSSProperties = {
+ transform: 'skew(-9deg)',
+ overflow: 'hidden',
+ };
+
+ const contentStyle: React.CSSProperties = {
+ transform: 'skew(9deg)',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ };
+
+ const handleShow = (modalId: string, avatar: AvatarType, turn: TurnBattleInfo) => {
+ const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+ if (modal) {
+ setSelectAvatar(avatar);
+ setSelectTurn(turn);
+ setIsModalOpen(true);
+ modal.showModal();
+ }
+ };
+
+ // Close modal handler
+ const handleCloseModal = (modalId: string) => {
+ setIsModalOpen(false);
+ setSelectAvatar(null);
+ const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+ if (modal) {
+ modal.close();
+ }
+ };
+
+ // Handle ESC key to close modal
+ useEffect(() => {
+ const handleEscKey = (event: KeyboardEvent) => {
+ if (event.key === 'Escape' && isModalOpen) {
+ handleCloseModal("action_detail_modal");
+ }
+ };
+
+ window.addEventListener('keydown', handleEscKey);
+ return () => window.removeEventListener('keydown', handleEscKey);
+ }, [isModalOpen]);
+
+ // Scroll to the bottom when new turns are added
+ useEffect(() => {
+ if (turnListRef.current && turnHistory.length > 0) {
+ turnListRef.current.scrollTop = turnListRef.current.scrollHeight;
+ }
+ }, [turnHistory.length]);
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/chart/damageLineForAll.tsx b/src/components/chart/damageLineForAll.tsx
new file mode 100644
index 0000000..ff666c4
--- /dev/null
+++ b/src/components/chart/damageLineForAll.tsx
@@ -0,0 +1,65 @@
+'use client';
+import {
+ Chart as ChartJS,
+ LineElement,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ Tooltip,
+ Legend,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { useDamageLinesForAll } from '@/hooks/useDamageLinesForAll';
+import useAvatarDataStore from '@/stores/avatarDataStore';
+import useLocaleStore from '@/stores/localeStore';
+import { getNameChar } from '@/helper';
+
+ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement, Tooltip, Legend);
+
+const colors = ['#f87171', '#34d399', '#60a5fa', '#facc15', '#a78bfa', '#fb923c'];
+
+export default function MultiCharLineChart({ mode = 0 }: { mode?: 0 | 1 }) {
+ const dataByAvatar = useDamageLinesForAll(mode);
+ const avatarIds = Object.keys(dataByAvatar).map(Number);
+ const { listAvatar } = useAvatarDataStore()
+ const { locale } = useLocaleStore();
+
+ const data = {
+ datasets: avatarIds.map((id, idx) => ({
+ label: getNameChar(locale, listAvatar.find(it => it.id == id.toString())),
+ data: dataByAvatar[id].map(({ x, y }: { x: number; y: number }) => {
+ return {
+ x: x.toFixed(2),
+ y: y.toFixed(2)
+ }
+ }),
+ borderColor: colors[idx % colors.length],
+ backgroundColor: colors[idx % colors.length],
+ fill: false,
+ tension: 0.3,
+ })),
+ };
+
+ const options = {
+ responsive: true,
+ scales: {
+ x: {
+ type: 'linear' as const,
+ position: 'bottom' as "bottom" | "center" | "left" | "top" | "right",
+ ticks: {
+ stepSize: 1,
+ },
+ },
+ y: {
+ beginAtZero: true,
+ },
+ },
+ plugins: {
+ datalabels: {
+ display: false,
+ },
+ },
+ };
+
+ return (null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const transI18n = useTranslations("DataAnalysisPage");
+ const { lineup } = useBattleDataStore();
+ const { listAvatar } = useAvatarDataStore();
+ const { locale } = useLocaleStore();
+ const [modeBar, setModeBar] = useState<0 | 1 | 2>(1);
+ const [modeLine, setModeLine] = useState<0 | 1>(1);
+
+
+ const totalDamage = useCalcTotalDmgAvatar(selectedCharacter ? Number(selectedCharacter.id) : 0);
+ const totalTurn = useCalcTotalTurnAvatar(selectedCharacter ? Number(selectedCharacter.id) : 0)
+
+
+ const lineupAvatars = listAvatar.filter(item =>
+ lineup.some(av => av.avatarId.toString() === item.id)
+ );
+
+ const handleShow = (modalId: string, item: AvatarType) => {
+ const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+ if (modal) {
+ setSelectedCharacter(item);
+ setIsModalOpen(true);
+ modal.showModal();
+ }
+ };
+
+ // Close modal handler
+ const handleCloseModal = (modalId: string) => {
+ setIsModalOpen(false);
+ setSelectedCharacter(null);
+ const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+ if (modal) {
+ modal.close()
+ }
+ };
+
+ // Handle ESC key to close modal
+ useEffect(() => {
+ const handleEscKey = (event: KeyboardEvent) => {
+ if (event.key === 'Escape' && isModalOpen) {
+ handleCloseModal("character_detail_modal");
+ }
+ };
+
+ window.addEventListener('keydown', handleEscKey);
+ return () => window.removeEventListener('keydown', handleEscKey);
+ }, [isModalOpen]);
+
+ return (
+ ({});
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+ const [theme, setTheme] = useState("light");
+
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ const storedTheme = localStorage.getItem("theme");
+ if (storedTheme) setTheme(storedTheme);
+ }
+ }, []);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const changeTheme = (nextTheme: string | null) => {
+ console.log(nextTheme)
+ if (nextTheme) {
+ setTheme(nextTheme);
+ if (typeof window !== "undefined") {
+ localStorage.setItem("theme", nextTheme);
+ }
+ } else {
+ setTheme((prev) => (prev === "light" ? "night" : "light"));
+ if (typeof window !== "undefined") {
+ localStorage.setItem("theme", theme);
+ }
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
\ No newline at end of file
diff --git a/src/helper/exportDataBattle.ts b/src/helper/exportDataBattle.ts
new file mode 100644
index 0000000..0d819b5
--- /dev/null
+++ b/src/helper/exportDataBattle.ts
@@ -0,0 +1,15 @@
+import { BattleDataStateJson } from "@/types/mics";
+
+export const exportBattleData = (
+ data: BattleDataStateJson,
+ filename = 'battle_data.json'
+ ) => {
+ const dataStr = JSON.stringify(data, null, 2);
+ const blob = new Blob([dataStr], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename;
+ a.click();
+ URL.revokeObjectURL(url);
+ };
\ No newline at end of file
diff --git a/src/helper/getNameChar.ts b/src/helper/getNameChar.ts
new file mode 100644
index 0000000..b71cff9
--- /dev/null
+++ b/src/helper/getNameChar.ts
@@ -0,0 +1,19 @@
+import { AvatarType } from "@/types";
+
+
+export function getNameChar(locale: string, data: AvatarType | undefined): string {
+ if (!data) {
+ return ""
+ }
+ let text = data.lang.get(locale) ?? "";
+ if (!text) {
+ text = data.lang.get("en") ?? "";
+ }
+ if (Number(data.id) % 2 === 0 && Number(data.id) > 8000) {
+ text = `Female ${data.damageType} MC`
+ } else if (Number(data.id) > 8000) {
+ text = `Male ${data.damageType} MC`
+ }
+
+ return text
+}
diff --git a/src/helper/importDataBattle.ts b/src/helper/importDataBattle.ts
new file mode 100644
index 0000000..ccefa99
--- /dev/null
+++ b/src/helper/importDataBattle.ts
@@ -0,0 +1,21 @@
+import { BattleDataStateJson } from "@/types/mics";
+
+export const importBattleData = (file: File, loadBattleDataFromJSON: (data: BattleDataStateJson) => void) => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () => {
+ try {
+ const result = reader.result as string;
+ const parsed = JSON.parse(result) as BattleDataStateJson;
+ loadBattleDataFromJSON(parsed);
+ resolve();
+ } catch (err) {
+ reject(err);
+ }
+ };
+ reader.onerror = () => reject(reader.error);
+ reader.readAsText(file);
+ });
+};
+
+
\ No newline at end of file
diff --git a/src/helper/index.ts b/src/helper/index.ts
new file mode 100644
index 0000000..f1cf26d
--- /dev/null
+++ b/src/helper/index.ts
@@ -0,0 +1,3 @@
+export * from "./getNameChar"
+export * from "./exportDataBattle"
+export * from "./importDataBattle"
\ No newline at end of file
diff --git a/src/hooks/useCalcAvatarData.ts b/src/hooks/useCalcAvatarData.ts
new file mode 100644
index 0000000..b4f98a4
--- /dev/null
+++ b/src/hooks/useCalcAvatarData.ts
@@ -0,0 +1,28 @@
+import useBattleDataStore from "@/stores/battleDataStore";
+import { useMemo } from "react";
+
+export function useCalcTotalDmgAvatar(avatarId: number) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ return turnHistory
+ .filter(t => t.avatarId === avatarId)
+ .reduce((sum, turn) => sum + turn.totalDamage, 0);
+ }, [avatarId, turnHistory]);
+}
+
+
+export function useCalcTotalTurnAvatar(avatarId: number) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const uniqueActionValues = new Set();
+ turnHistory.forEach(turn => {
+ if (turn.avatarId === avatarId) {
+ uniqueActionValues.add(turn.actionValue);
+ }
+ });
+
+ return uniqueActionValues.size;
+ }, [avatarId, turnHistory]);
+ }
\ No newline at end of file
diff --git a/src/hooks/useChangeTheme.ts b/src/hooks/useChangeTheme.ts
new file mode 100644
index 0000000..9007ded
--- /dev/null
+++ b/src/hooks/useChangeTheme.ts
@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { ThemeContext } from "@/components/themeController";
+
+export const useChangeTheme = () => useContext(ThemeContext);
\ No newline at end of file
diff --git a/src/hooks/useDamageLineForOne.ts b/src/hooks/useDamageLineForOne.ts
new file mode 100644
index 0000000..34e8cba
--- /dev/null
+++ b/src/hooks/useDamageLineForOne.ts
@@ -0,0 +1,31 @@
+import useBattleDataStore from "@/stores/battleDataStore";
+import { useMemo } from "react";
+
+export function useDamageLineForOne(avatarId: number, mode: 0 | 1 = 0) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const map = new Map();
+
+ for (const turn of turnHistory) {
+ if (turn.avatarId !== avatarId) continue;
+
+ const prev = map.get(turn.actionValue) || 0;
+ map.set(turn.actionValue, prev + turn.totalDamage);
+ }
+
+ const points = Array.from(map.entries())
+ .map(([x, y]) => ({ x, y }))
+ .sort((a, b) => a.x - b.x);
+
+ if (mode === 1) {
+ let cumulative = 0;
+ return points.map(p => {
+ cumulative += p.y;
+ return { x: p.x, y: Number(cumulative.toFixed(2)) };
+ });
+ }
+
+ return points.map(p => ({ x: p.x, y: Number(p.y.toFixed(2)) }));
+ }, [avatarId, turnHistory, mode]);
+}
diff --git a/src/hooks/useDamageLinesForAll.ts b/src/hooks/useDamageLinesForAll.ts
new file mode 100644
index 0000000..787e5cb
--- /dev/null
+++ b/src/hooks/useDamageLinesForAll.ts
@@ -0,0 +1,43 @@
+import useBattleDataStore from "@/stores/battleDataStore";
+import { useMemo } from "react";
+
+export function useDamageLinesForAll(mode: 0 | 1 = 0) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const avatarMap = new Map>();
+
+ for (const turn of turnHistory) {
+ if (!avatarMap.has(turn.avatarId)) {
+ avatarMap.set(turn.avatarId, new Map());
+ }
+
+ const charMap = avatarMap.get(turn.avatarId)!;
+ const prev = charMap.get(turn.actionValue) || 0;
+ charMap.set(turn.actionValue, prev + turn.totalDamage);
+ }
+
+ const result: Record = {};
+
+ for (const [avatarId, damageMap] of avatarMap.entries()) {
+ const points = Array.from(damageMap.entries())
+ .map(([x, y]) => ({ x, y }))
+ .sort((a, b) => a.x - b.x);
+
+ if (mode === 1) {
+ let cumulative = 0;
+ result[avatarId] = points.map(p => {
+ cumulative += p.y;
+ return { x: p.x, y: Number(cumulative.toFixed(2)) };
+ });
+ } else {
+ result[avatarId] = points.map(p => ({
+ x: p.x,
+ y: Number(p.y.toFixed(2)),
+ }));
+ }
+ }
+
+ return result;
+ }, [turnHistory, mode]);
+}
diff --git a/src/hooks/useDamagePerCycle.ts b/src/hooks/useDamagePerCycle.ts
new file mode 100644
index 0000000..d9e489f
--- /dev/null
+++ b/src/hooks/useDamagePerCycle.ts
@@ -0,0 +1,79 @@
+import useBattleDataStore from "@/stores/battleDataStore";
+import { useMemo } from "react";
+
+
+type Mode = 0 | 1 | 2;
+
+function getChunkIndex(av: number, mode: Mode): number {
+ let sum = 0;
+ let idx = 0;
+
+ if (mode === 0) {
+ while (sum <= av) {
+ sum += 100;
+ idx++;
+ }
+ } else if (mode === 1) {
+ if (av < 150) return 0;
+ sum = 150;
+ idx = 1;
+ while (sum <= av) {
+ sum += 100;
+ idx++;
+ }
+ } else {
+ if (av < 150) return 0;
+ if (av < 300) return 1;
+ sum = 300;
+ idx = 2;
+ while (sum <= av) {
+ sum += 100;
+ idx++;
+ }
+ }
+
+ return idx - 1;
+}
+
+export function useDamagePerCycleForOne(avatarId: number, mode: Mode) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const damageMap = new Map();
+
+ turnHistory
+ .filter(t => t.avatarId === avatarId)
+ .forEach(t => {
+ const idx = getChunkIndex(t.actionValue, mode);
+ damageMap.set(idx, (damageMap.get(idx) || 0) + t.totalDamage);
+ });
+
+ const maxIndex = Math.max(...Array.from(damageMap.keys()), 0);
+
+ return Array.from({ length: maxIndex + 1 }).map((_, i) => ({
+ x: `${i + 1}`,
+ y: damageMap.get(i) || 0,
+ }));
+ }, [avatarId, mode, turnHistory]);
+}
+
+
+export function useDamagePerCycleForAll(mode: Mode) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const damageMap = new Map();
+
+ turnHistory.forEach(t => {
+ const idx = getChunkIndex(t.actionValue, mode);
+ damageMap.set(idx, (damageMap.get(idx) || 0) + t.totalDamage);
+ });
+
+ const maxIndex = Math.max(...Array.from(damageMap.keys()), 0);
+
+ return Array.from({ length: maxIndex + 1 }).map((_, i) => ({
+ x: `${i + 1}`,
+ y: damageMap.get(i) || 0,
+ }));
+ }, [mode, turnHistory]);
+}
\ No newline at end of file
diff --git a/src/hooks/useDamagePercentPerAvatar.ts b/src/hooks/useDamagePercentPerAvatar.ts
new file mode 100644
index 0000000..72757a6
--- /dev/null
+++ b/src/hooks/useDamagePercentPerAvatar.ts
@@ -0,0 +1,21 @@
+import useBattleDataStore from "@/stores/battleDataStore";
+import { useMemo } from "react";
+
+export function useDamagePercentPerAvatar() {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const dmgByAvatar = new Map();
+
+ turnHistory.forEach(t => {
+ dmgByAvatar.set(t.avatarId, (dmgByAvatar.get(t.avatarId) || 0) + t.totalDamage);
+ });
+
+ const totalDmg = Array.from(dmgByAvatar.values()).reduce((sum, v) => sum + v, 0);
+
+ return Array.from(dmgByAvatar.entries()).map(([avatarId, dmg]) => ({
+ avatarId,
+ percent: totalDmg > 0 ? (dmg / totalDmg) * 100 : 0,
+ }));
+ }, [turnHistory]);
+}
diff --git a/src/hooks/useSkillDamageStats.ts b/src/hooks/useSkillDamageStats.ts
new file mode 100644
index 0000000..60371b1
--- /dev/null
+++ b/src/hooks/useSkillDamageStats.ts
@@ -0,0 +1,25 @@
+"use client";
+import { useMemo } from "react";
+import useBattleDataStore from "@/stores/battleDataStore";
+
+export function useSkillDamageByAvatar(avatarId: number) {
+ const { turnHistory } = useBattleDataStore.getState();
+
+ return useMemo(() => {
+ const skillTypes = ['technique', 'talent', 'basic', 'skill', 'ultimate', 'servant'];
+ const dmgMap = new Map();
+ skillTypes.forEach((type) => dmgMap.set(type, 0));
+
+ for (const turn of turnHistory) {
+ const type = turn.skillType.toLowerCase();
+ if (turn.avatarId === avatarId && dmgMap.has(type)) {
+ dmgMap.set(type, dmgMap.get(type)! + turn.totalDamage);
+ }
+ }
+
+ const labels = Array.from(dmgMap.keys());
+ const damageValues = Array.from(dmgMap.values());
+
+ return { labels, damageValues };
+ }, [avatarId, turnHistory]);
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
new file mode 100644
index 0000000..61e17b6
--- /dev/null
+++ b/src/lib/api.ts
@@ -0,0 +1,65 @@
+import useSocketStore from "@/stores/socketSettingStore";
+import { AvatarHakushiType, AvatarType } from "@/types/avatar";
+
+
+export async function checkConnectTcpApi(): Promise {
+ const { host, port, connectionType } = useSocketStore.getState()
+ let url = `${host}:${port}/check-tcp`
+ if (connectionType === "FireflyPSLocal") {
+ url = "http://localhost:21000/check-tcp"
+ }
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ return data.status
+ }
+ return false
+}
+
+export async function getCharacterListApi(): Promise {
+ const res = await fetch('/api/hakushin', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ if (!res.ok) {
+ console.log(`Error ${res.status}: ${res.statusText}`);
+ return [];
+ }
+
+ const data: Map = new Map(Object.entries(await res.json()));
+
+
+ return Array.from(data.entries()).map(([id, it]) => convertAvatar(id, it));
+}
+
+
+function convertAvatar(id: string, item: AvatarHakushiType): AvatarType {
+ const lang = new Map([
+ ['en', item.en],
+ ['kr', item.kr],
+ ['cn', item.cn],
+ ['jp', item.jp]
+ ]);
+
+ const result: AvatarType = {
+ release: item.release,
+ icon: item.icon,
+ rank: item.rank,
+ baseType: item.baseType,
+ damageType: item.damageType,
+ desc: item.desc,
+ lang: lang,
+ id: id
+ };
+
+ return result;
+}
\ No newline at end of file
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
new file mode 100644
index 0000000..7b3bbcb
--- /dev/null
+++ b/src/lib/socket.ts
@@ -0,0 +1,125 @@
+import { io, Socket } from "socket.io-client";
+import useSocketStore from "@/stores/socketSettingStore";
+import { toast } from 'react-toastify';
+import useBattleDataStore from "@/stores/battleDataStore";
+
+let socket: Socket | null = null;
+
+
+const onBattleBegin = () => {
+ notify("Battle Started!", "info")
+}
+
+const notify = (msg: string, type: 'info' | 'success' | 'error' = 'info') => {
+ if (type === 'success') toast.success(msg);
+ else if (type === 'error') toast.error(msg);
+ else toast.info(msg);
+};
+
+export const connectSocket = (): Socket => {
+ const { host, port, connectionType, setStatus } = useSocketStore.getState();
+ const {
+ onSetBattleLineupService,
+ onTurnEndService,
+ onUseSkillService,
+ onKillService,
+ onDamageService,
+ onBattleEndService,
+ onTurnBeginService
+ } = useBattleDataStore.getState();
+
+ let url = `${host}:${port}`;
+ if (connectionType === "FireflyPSLocal") {
+ url = "http://localhost:21000"
+ }
+
+ if (socket) {
+ socket.disconnect();
+ }
+
+ socket = io(url, {
+ reconnectionAttempts: 5,
+ timeout: 10000,
+ autoConnect: true,
+ });
+
+ socket.on("connect", () => {
+ console.log("Socket connected");
+ setStatus(true);
+ });
+
+ socket.on("disconnect", () => {
+ console.log("Socket disconnected");
+ setStatus(false);
+ });
+
+ socket.on("connect_error", (err) => {
+ console.error("Connection error:", err);
+ setStatus(false);
+ });
+
+ socket.on("connect_timeout", () => {
+ console.warn("Connection timeout");
+ setStatus(false);
+ });
+
+ socket.on("reconnect_failed", () => {
+ console.error("Reconnect failed");
+ setStatus(false);
+ });
+
+ const onConnect = () => {
+ setStatus(true);
+ notify(`Kết nối thành công với Socket ID: ${socket?.id}`, 'success');
+ };
+
+ if (isSocketConnected()) onConnect();
+
+ socket.on("SetBattleLineup", (json) => onSetBattleLineupService(JSON.parse(json)));
+ socket.on("TurnEnd", (json) => onTurnEndService(JSON.parse(json)));
+ socket.on("OnUseSkill", (json) => onUseSkillService(JSON.parse(json)));
+ socket.on("OnKill", (json) => onKillService(JSON.parse(json)));
+ socket.on("OnDamage", (json) => onDamageService(JSON.parse(json)));
+ socket.on('BattleBegin', () => onBattleBegin());
+ socket.on('TurnBegin', (json) => onTurnBeginService(JSON.parse(json)));
+ socket.on('BattleEnd', (json) => onBattleEndService(JSON.parse(json)));
+
+ socket.on("Error", (msg: string) => {
+ console.error("Server Error:", msg);
+ });
+
+ return socket;
+};
+
+export const disconnectSocket = (): void => {
+ const {
+ onSetBattleLineupService,
+ onTurnEndService,
+ onUseSkillService,
+ onKillService,
+ onDamageService,
+ onBattleEndService,
+ onTurnBeginService
+ } = useBattleDataStore.getState();
+ if (socket) {
+ socket.off("SetBattleLineup", (json) => onSetBattleLineupService(JSON.parse(json)));
+ socket.off("TurnEnd", (json) => onTurnEndService(JSON.parse(json)));
+ socket.off("OnUseSkill", (json) => onUseSkillService(JSON.parse(json)));
+ socket.off("OnKill", (json) => onKillService(JSON.parse(json)));
+ socket.off("OnDamage", (json) => onDamageService(JSON.parse(json)));
+ socket.off('BattleBegin', () => onBattleBegin());
+ socket.off('TurnBegin', (json) => onTurnBeginService(JSON.parse(json)));
+ socket.off('BattleEnd', (json) => onBattleEndService(JSON.parse(json)));
+ socket.offAny();
+ socket.disconnect();
+ useSocketStore.getState().setStatus(false);
+ }
+};
+
+export const isSocketConnected = (): boolean => {
+ return socket?.connected || false;
+};
+
+export const getSocket = (): Socket | null => {
+ return socket;
+};
diff --git a/src/stores/avatarDataStore.ts b/src/stores/avatarDataStore.ts
new file mode 100644
index 0000000..020a3ce
--- /dev/null
+++ b/src/stores/avatarDataStore.ts
@@ -0,0 +1,16 @@
+import { AvatarType } from '@/types';
+import { create } from 'zustand'
+
+
+interface AvatarDataState {
+ listAvatar: AvatarType[];
+ setListAvatar: (list: AvatarType[]) => void;
+}
+
+const useAvatarDataStore = create((set) => ({
+ listAvatar: [],
+ setListAvatar: (list: AvatarType[]) => set({ listAvatar: list }),
+
+}));
+
+export default useAvatarDataStore;
\ No newline at end of file
diff --git a/src/stores/battleDataStore.ts b/src/stores/battleDataStore.ts
new file mode 100644
index 0000000..3204b15
--- /dev/null
+++ b/src/stores/battleDataStore.ts
@@ -0,0 +1,129 @@
+import { AttackResultType, AvatarSkillType, BattleEndType, KillType, LineUpType, TurnBeginType, TurnEndType } from '@/types';
+import { AvatarBattleInfo, BattleDataStateJson, TurnBattleInfo } from '@/types/mics';
+import { create } from 'zustand'
+
+
+interface BattleDataState {
+ lineup: AvatarBattleInfo[];
+ turnHistory: TurnBattleInfo[]
+ totalAV: number;
+ totalDamage: number;
+ damagePerAV: number;
+
+ onSetBattleLineupService: (data: LineUpType) => void;
+ onTurnEndService: (data: TurnEndType) => void;
+ onBattleEndService: (data: BattleEndType) => void;
+ onUseSkillService: (data: AvatarSkillType) => void;
+ onKillService: (data: KillType) => void
+ onDamageService: (data: AttackResultType) => void;
+ onBattleStartService: () => void;
+ onTurnBeginService: (data: TurnBeginType) => void;
+ loadBattleDataFromJSON: (data: BattleDataStateJson) => void;
+}
+
+const useBattleDataStore = create((set, get) => ({
+ lineup: [],
+ turnHistory: [],
+ totalAV: 0,
+ totalDamage: 0,
+ damagePerAV: 0,
+
+ loadBattleDataFromJSON: (data: BattleDataStateJson) => {
+ set({
+ lineup: data.lineup,
+ turnHistory: data.turnHistory,
+ totalAV: data.totalAV,
+ totalDamage: data.totalDamage,
+ damagePerAV: data.damagePerAV,
+ })
+ },
+ onBattleStartService: () => {
+ set({
+ lineup: [],
+ turnHistory: [],
+ totalAV: 0,
+ totalDamage: 0,
+ damagePerAV: 0,
+ })
+ },
+ onDamageService: (data: AttackResultType) => {
+ const turnHistorys = get().turnHistory
+ const turnIdx = turnHistorys.findLastIndex(it => it.avatarId === data.attacker.id)
+ if (turnIdx === -1) {
+ return
+ }
+ const newTh = [...turnHistorys]
+ newTh[turnIdx].damageDetail.push(data.damage)
+ newTh[turnIdx].totalDamage += data.damage
+ set({
+ turnHistory: newTh,
+ totalDamage: get().totalDamage + data.damage,
+ damagePerAV: (get().totalDamage + data.damage) / (get().totalAV === 0 ? 1 : get().totalAV)
+ })
+ },
+
+ onKillService: (data: KillType) => {
+ const lineups = get().lineup
+ const avatarIdx = lineups.findIndex(it => it.avatarId === data.attacker.id)
+ if (avatarIdx === -1) {
+ return
+ }
+ const newLn = [...lineups]
+ newLn[avatarIdx].isDie = true
+ set({
+ lineup: newLn
+ })
+ },
+ onSetBattleLineupService: (data: LineUpType) => {
+ const lineups: AvatarBattleInfo[] = []
+ for (const avatar of data.avatars) {
+ lineups.push({ avatarId: avatar.id, isDie: false } as AvatarBattleInfo)
+ }
+ set({
+ lineup: lineups,
+ turnHistory: [],
+ totalAV: 0,
+ totalDamage: 0,
+ damagePerAV: 0,
+ });
+ },
+ onTurnBeginService: (data: TurnBeginType) => {
+ set((state) => ({
+ totalAV: data.action_value,
+ damagePerAV: state.totalDamage / (data.action_value === 0 ? 1 : data.action_value)
+ }))
+ },
+ onTurnEndService: (data: TurnEndType) => {
+ set((state) => ({
+ totalDamage: state.totalDamage === data.total_damage ? data.total_damage : state.totalDamage,
+ totalAV: data.action_value,
+ damagePerAV: (state.totalDamage === data.total_damage ? data.total_damage : state.totalDamage) / (data.action_value === 0 ? 1 : data.action_value)
+ }));
+ },
+ onUseSkillService: (data: AvatarSkillType) => {
+ set((state) => ({
+ turnHistory: [...state.turnHistory, {
+ avatarId: data.avatar.id,
+ damageDetail: [],
+ totalDamage: 0,
+ actionValue: state.totalAV,
+ skillType: data.skill.type,
+ skillName: data.skill.name
+ } as TurnBattleInfo]
+ }))
+ },
+ onBattleEndService: (data: BattleEndType) => {
+ const lineups: AvatarBattleInfo[] = []
+ for (const avatar of data.avatars) {
+ lineups.push({ avatarId: avatar.id, isDie: false } as AvatarBattleInfo)
+ }
+ set({
+ lineup: lineups,
+ totalDamage: data.total_damage,
+ totalAV: data.action_value,
+ damagePerAV: data.total_damage / (data.action_value === 0 ? 1 : data.action_value)
+ })
+ }
+}));
+
+export default useBattleDataStore;
\ No newline at end of file
diff --git a/src/stores/localeStore.ts b/src/stores/localeStore.ts
new file mode 100644
index 0000000..fe1a742
--- /dev/null
+++ b/src/stores/localeStore.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+
+interface LocaleState {
+ locale: string;
+ setLocale: (newLocale: string) => void;
+}
+
+const useLocaleStore = create((set) => ({
+ locale: "en",
+ setLocale: (newLocale: string) => set({ locale: newLocale }),
+
+}));
+
+export default useLocaleStore;
\ No newline at end of file
diff --git a/src/stores/socketSettingStore.ts b/src/stores/socketSettingStore.ts
new file mode 100644
index 0000000..006061e
--- /dev/null
+++ b/src/stores/socketSettingStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface SocketState {
+ host: string;
+ port: number;
+ status: boolean;
+ connectionType: string;
+ setHost: (host: string) => void;
+ setConnectionType: (host: string) => void;
+ setPort: (port: number) => void;
+ setStatus: (status: boolean) => void;
+}
+
+const useSocketStore = create()(
+ persist(
+ (set) => ({
+ host: "http://localhost",
+ port: 3443,
+ status: false,
+ connectionType: "FireflyPSLocal",
+ setHost: (host: string) => set({ host }),
+ setConnectionType: (connectionType: string) => set({ connectionType }),
+ setPort: (port: number) => set({ port }),
+ setStatus: (status: boolean) => set({ status }),
+ }),
+ {
+ name: 'socket-storage',
+ }
+ )
+);
+
+export default useSocketStore;
diff --git a/src/types/attack.ts b/src/types/attack.ts
new file mode 100644
index 0000000..2445920
--- /dev/null
+++ b/src/types/attack.ts
@@ -0,0 +1,6 @@
+import { AvatarInfo } from "./lineup";
+
+export interface AttackResultType {
+ attacker: AvatarInfo;
+ damage: number;
+}
\ No newline at end of file
diff --git a/src/types/avatar.ts b/src/types/avatar.ts
new file mode 100644
index 0000000..efa1096
--- /dev/null
+++ b/src/types/avatar.ts
@@ -0,0 +1,23 @@
+export interface AvatarHakushiType {
+ release: number;
+ icon: string;
+ rank: string;
+ baseType: string;
+ damageType: string;
+ en: string;
+ desc: string;
+ kr: string;
+ cn: string;
+ jp: string;
+}
+
+export interface AvatarType {
+ id: string;
+ release: number;
+ icon: string;
+ rank: string;
+ baseType: string;
+ damageType: string;
+ desc: string;
+ lang: Map;
+}
diff --git a/src/types/battle.ts b/src/types/battle.ts
new file mode 100644
index 0000000..fb7e8a7
--- /dev/null
+++ b/src/types/battle.ts
@@ -0,0 +1,14 @@
+import { AvatarInfo } from "./lineup";
+import { TurnInfo } from "./turn";
+
+export interface BattleEndType {
+ avatars: AvatarInfo[];
+ turn_history: TurnInfo[];
+ turn_count: number;
+ total_damage: number;
+ action_value: number;
+}
+export interface KillType {
+ attacker: AvatarInfo;
+}
+
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..70e35be
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,6 @@
+export * from "./attack"
+export * from "./avatar"
+export * from "./battle"
+export * from "./lineup"
+export * from "./skill"
+export * from "./turn"
\ No newline at end of file
diff --git a/src/types/lineup.ts b/src/types/lineup.ts
new file mode 100644
index 0000000..edd7687
--- /dev/null
+++ b/src/types/lineup.ts
@@ -0,0 +1,8 @@
+export interface AvatarInfo {
+ id: number;
+ name: string;
+}
+
+export interface LineUpType {
+ avatars: AvatarInfo[];
+}
\ No newline at end of file
diff --git a/src/types/mics.ts b/src/types/mics.ts
new file mode 100644
index 0000000..b3180ab
--- /dev/null
+++ b/src/types/mics.ts
@@ -0,0 +1,21 @@
+export interface AvatarBattleInfo {
+ avatarId: number;
+ isDie: boolean;
+}
+
+export interface TurnBattleInfo {
+ avatarId: number;
+ damageDetail: number[];
+ totalDamage: number;
+ actionValue: number;
+ skillType: string;
+ skillName: string;
+}
+
+export interface BattleDataStateJson {
+ lineup: AvatarBattleInfo[];
+ turnHistory: TurnBattleInfo[]
+ totalAV: number;
+ totalDamage: number;
+ damagePerAV: number;
+}
\ No newline at end of file
diff --git a/src/types/skill.ts b/src/types/skill.ts
new file mode 100644
index 0000000..8025a79
--- /dev/null
+++ b/src/types/skill.ts
@@ -0,0 +1,11 @@
+import { AvatarInfo } from "./lineup";
+
+export interface SkillInfo {
+ name: string;
+ type: string;
+}
+
+export interface AvatarSkillType {
+ avatar: AvatarInfo;
+ skill: SkillInfo;
+}
\ No newline at end of file
diff --git a/src/types/turn.ts b/src/types/turn.ts
new file mode 100644
index 0000000..b73528a
--- /dev/null
+++ b/src/types/turn.ts
@@ -0,0 +1,19 @@
+import { AvatarInfo } from "./lineup";
+
+
+export interface TurnInfo {
+ avatars_turn_damage: number[];
+ total_damage: number;
+ action_value: number;
+}
+
+export interface TurnBeginType {
+ action_value: number;
+}
+
+export interface TurnEndType {
+ avatars: AvatarInfo[];
+ avatars_damage: number[];
+ total_damage: number;
+ action_value: number;
+}
\ No newline at end of file
+
);
}
diff --git a/src/components/actionbar/index.tsx b/src/components/actionbar/index.tsx
new file mode 100644
index 0000000..356d434
--- /dev/null
+++ b/src/components/actionbar/index.tsx
@@ -0,0 +1,260 @@
+"use client";
+import useAvatarDataStore from "@/stores/avatarDataStore";
+import useBattleDataStore from "@/stores/battleDataStore";
+import useLocaleStore from "@/stores/localeStore";
+import { AvatarType } from "@/types";
+import { TurnBattleInfo } from "@/types/mics";
+import { useEffect, useState, useRef } from "react";
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+import { getNameChar } from "@/helper";
+
+export default function ActionBar() {
+ const [selectTurn, setSelectTurn] = useState
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+ {transI18n("totalDamage")}: {Number(totalDamage).toFixed(2)}
+
+
+ {transI18n("totalAV")}: {Number(totalAV).toFixed(2)}
+
+
+ {transI18n("damagePerAV")}: {Number(damagePerAV).toFixed(2)}
+
+
+
+
+
+ {expandedCharts.includes('chart1') ? (
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {expandedCharts.includes('chart3') ? (
+
+
+
+
+ {[0, 1].map((m) => (
+
+ ))}
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {[0, 1, 2].map((m) => (
+
+ ))}
+
+
+
+
+ {transI18n("actionBar")}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/card/characterCard.tsx b/src/components/card/characterCard.tsx
new file mode 100644
index 0000000..b611780
--- /dev/null
+++ b/src/components/card/characterCard.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { getNameChar } from '@/helper';
+import useLocaleStore from '@/stores/localeStore';
+import { AvatarType } from '@/types';
+
+interface CharacterCardProps {
+ data: AvatarType
+}
+
+export function parseRuby(text: string): string {
+ return text.replace(/\{RUBY_B#(.*?)\}(.*?)\{RUBY_E#\}/g, (_, furigana, kanji) => {
+ return `${kanji}`;
+ });
+}
+
+
+export default function CharacterCard({ data }: CharacterCardProps) {
+ const { locale } = useLocaleStore();
+ const text = getNameChar(locale, data)
+ return (
+
+
+
+
+
+ {/* Character Detail Modal */}
+
+
+ {turnHistory.length === 0 ? (
+
+
+
+ ) : (
+ turnHistory.map((turn, index) => {
+ const data = listAvatar.find(it => it.id === turn.avatarId.toString());
+ if (!data) return null;
+ const text = getNameChar(locale, data);
+
+ return (
+ {transI18n("noTurns")}
+
+
+ );
+ })
+ )}
+ handleShow("action_detail_modal", data, turn)}
+ style={parallelogramStyle}
+ className="flex border bg-base-100 w-full hover:bg-base-200 transition-colors duration-200 border-cyan-400 border-l-4 cursor-pointer"
+ >
+
+
+
+
+
+
+ 
+
+
+ {text}
+
+
+
+ {`${transI18n("useSkill")}: ${turn.skillType}`}
+
+
+ {`${transI18n("totalDamage")}: ${turn.totalDamage.toFixed(2)}`}
+
+
+
+
+
+ {locale === "jp" ? (
+
+ ) : (
+
+
+ }.webp`})
+ }.webp`})
+
+
+
+
+
+ {text}
+
+ )}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/lineupbar/index.tsx b/src/components/lineupbar/index.tsx
new file mode 100644
index 0000000..5cd06c0
--- /dev/null
+++ b/src/components/lineupbar/index.tsx
@@ -0,0 +1,274 @@
+"use client";
+import useAvatarDataStore from "@/stores/avatarDataStore";
+import useBattleDataStore from "@/stores/battleDataStore";
+import CharacterCard from "../card/characterCard";
+import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
+import { AvatarType } from "@/types";
+import useLocaleStore from "@/stores/localeStore";
+import { getNameChar } from '@/helper/getNameChar';
+import SkillBarChart from "../chart/skillBarChart";
+import SkillPieChart from "../chart/skillPieChart";
+import { motion } from "framer-motion";
+import { DamageLineForOne } from "../chart/damageLineForOne";
+import { DamagePerCycleForOne } from "../chart/damagePerCycleForOne";
+import { useCalcTotalDmgAvatar, useCalcTotalTurnAvatar } from "@/hooks/useCalcAvatarData";
+
+export default function LineupBar() {
+ const [selectedCharacter, setSelectedCharacter] = useState
+ {/* Mobile menu dropdown */}
+
+
+ {/* Desktop navigation */}
+
+
+
+ {/* Logo */}
+
+
+
+
+
+ -
+
- + + +
- + + +
- + + +
+ Firefly Analy + + sis + +
+For Veritas
+ + +
+
+
+
+ {/* Right side items */}
+ -
+
- + <> + { + const file = e.target.files?.[0]; + if (file) { + importBattleData(file, loadBattleDataFromJSON) + .then(() => console.log('Data loaded')) + .catch(err => alert('Failed to load data: ' + err.message)); + } + }} + /> + + + +
- + + +
- + + +
+
+
+
+
+
+ {/* Language selector - REFINED */}
+
+
+
+ {status ? transI18n("connected") : transI18n("unconnected")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* GitHub Link */}
+
+
+
+
+
+
+
+
+
+
+ -
+ {themes.map((theme) => (
+
- { + if (changeTheme) changeTheme(theme.label.toLowerCase()); + }} + > + + + ))} +
+
+ {transI18n("lineupInfo")}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/themeController/clientThemeWrapper.tsx b/src/components/themeController/clientThemeWrapper.tsx
new file mode 100644
index 0000000..704e8f5
--- /dev/null
+++ b/src/components/themeController/clientThemeWrapper.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { PropsWithChildren, useContext } from "react";
+import { ThemeContext } from "./themeContext";
+
+export function ClientThemeWrapper({ children }: PropsWithChildren) {
+ const { theme } = useContext(ThemeContext);
+ return
+ {lineupAvatars.length === 0 ? (
+
+
+
+ ) : (
+ {transI18n("noCharactersInLineup")}
+
+
+
+ )}
+
+ {/* Character Detail Modal */}
+
+
+ {lineupAvatars.map((item, index) => (
+ handleShow("character_detail_modal", item)}
+ >
+
+ ))}
+
+ {children}
;
+}
\ No newline at end of file
diff --git a/src/components/themeController/index.ts b/src/components/themeController/index.ts
new file mode 100644
index 0000000..5600303
--- /dev/null
+++ b/src/components/themeController/index.ts
@@ -0,0 +1,2 @@
+export * from "./clientThemeWrapper"
+export * from "./themeContext"
diff --git a/src/components/themeController/themeContext.tsx b/src/components/themeController/themeContext.tsx
new file mode 100644
index 0000000..18d3ee9
--- /dev/null
+++ b/src/components/themeController/themeContext.tsx
@@ -0,0 +1,41 @@
+"use client";
+import { createContext, PropsWithChildren, useEffect, useState } from "react";
+
+interface ThemeContextType {
+ theme?: string;
+ changeTheme?: (nextTheme: string | null) => void;
+}
+export const ThemeContext = createContext