anything

src/modules/comic/ComicReader.tsx

@@ -35,14 +35,60 @@ export function ComicReader() {
   const [showControls, setShowControls] = useState(true);
   const [showPageJump, setShowPageJump] = useState(false);
   const [jumpPage, setJumpPage] = useState('');
+  const [loadingChapter, setLoadingChapter] = useState(false);
   
   const imageRefs = useRef<{ [key: number]: HTMLImageElement | null }>({});
   const controlsTimeout = useRef<number | null>(null);
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
 
   const chapterData = location.state?.chapterData;
   const password = location.state?.password;
   const originalSessionId = location.state?.sessionId;
+  useEffect(() => {
+    if (!password || !originalSessionId) return;
+
+    const wsUrl = import.meta.env.VITE_WS_URL || 'wss://ditzzy-yuki.hf.space/ws';
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      console.log('[Reader WS] Connected');
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        
+        if (message.type === 'chapter_data_response') {
+          setLoadingChapter(false);
+          
+          if (message.success && message.data) {
+            setData(message.data);
+            setCurrentPage(1);
+            scrollContainerRef.current?.scrollTo({ top: 0 });
+          } else {
+            setError(message.error || 'Failed to load chapter');
+          }
+        }
+      } catch (err) {
+        console.error('[Reader WS] Parse error:', err);
+      }
+    };
+
+    ws.onerror = (err) => {
+      console.error('[Reader WS] Error:', err);
+      setLoadingChapter(false);
+    };
+
+    ws.onclose = () => {
+      console.log('[Reader WS] Disconnected');
+    };
+
+    return () => {
+      ws.close();
+    };
+  }, [password, originalSessionId]);
 
   useEffect(() => {
     if (chapterData) {
@@ -152,9 +198,26 @@ export function ComicReader() {
     }
   };
   
-  // @ts-ignore
   const handleChapterNavigation = (chapterSlug: string) => {
-    navigate(-1);
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      setError('Connection lost. Please refresh the page.');
+      return;
+    }
+
+    if (!password || !originalSessionId) {
+      setError('Missing authentication data');
+      return;
+    }
+
+    setLoadingChapter(true);
+    setShowMenu(false);
+
+    wsRef.current.send(JSON.stringify({
+      type: 'request_chapter_data',
+      sessionId: originalSessionId,
+      password: password,
+      chapterSlug: chapterSlug
+    }));
   };
 
   if (loading) {
@@ -166,6 +229,15 @@ export function ComicReader() {
     );
   }
 
+  if (loadingChapter) {
+    return (
+      <div className="reader-loading">
+        <div className="spinner"></div>
+        <p>Loading next chapter...</p>
+      </div>
+    );
+  }
+
   if (error || !data) {
     return (
       <div className="reader-error">
@@ -198,6 +270,7 @@ export function ComicReader() {
           ☰
         </button>
       </div>
+
       {showMenu && (
         <div className="hamburger-menu" onClick={() => setShowMenu(false)}>
           <div className="menu-content" onClick={(e) => e.stopPropagation()}>
@@ -242,6 +315,7 @@ export function ComicReader() {
           </div>
         </div>
       )}
+
       {showPageJump && (
         <div className="page-jump-modal" onClick={() => setShowPageJump(false)}>
           <div className="page-jump-content" onClick={(e) => e.stopPropagation()}>
@@ -263,6 +337,7 @@ export function ComicReader() {
           </div>
         </div>
       )}
+
       <div className="reader-content" ref={scrollContainerRef}>
         <div className="scroll-container">
           {data.images.map((img) => (
@@ -280,6 +355,7 @@ export function ComicReader() {
           ))}
         </div>
       </div>
+
       <div className="reader-footer">
         <div className="page-controls">
           <button 
@@ -310,6 +386,7 @@ export function ComicReader() {
             Next →
           </button>
         </div>
+
         {(data.prevChapter || data.nextChapter) && (
           <div className="chapter-navigation">
             {data.prevChapter && (