Akaza and Koyuki

2026-03-25 08:19:58 +00:00
2 changed files with 73 additions and 2 deletions
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@ -7,7 +7,11 @@ const menuAside: MenuAsideItem[] = [
    icon: icon.mdiViewDashboardOutline,
    label: 'Dashboard',
  },
-  
+  {
+    href: '/scenes/akaza-roleplay',
+    label: 'Akaza Roleplay',
+    icon: icon.mdiChatOutline,
+  },
  {
    href: '/users/users-list',
    label: 'Users',
@ -104,4 +108,4 @@ const menuAside: MenuAsideItem[] = [
  },
 ]

-export default menuAside
+export default menuAside
--- a/frontend/src/pages/scenes/akaza-roleplay.tsx
+++ b/frontend/src/pages/scenes/akaza-roleplay.tsx
@ -0,0 +1,67 @@
+import { mdiChatOutline } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import BaseButton from '../../components/BaseButton';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { fetch } from '../../stores/scenes/scenesSlice';
+import { getPageTitle } from '../../config';
+import LoadingSpinner from '../../components/LoadingSpinner';
+
+const AkazaRoleplay = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { scenesId } = router.query;
+  const { scenes, loading } = useAppSelector((state) => state.scenes);
+
+  useEffect(() => {
+    if (scenesId) {
+      dispatch(fetch({ id: scenesId }));
+    }
+  }, [scenesId, dispatch]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Akaza Roleplay')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton icon={mdiChatOutline} title="Roleplay: Koyuki vs Akaza" main>
+          <BaseButton label="Exit Scene" color="danger" onClick={() => router.push('/scenes/scenes-list')} />
+        </SectionTitleLineWithButton>
+        <CardBox className="mb-6">
+          {loading ? (
+            <LoadingSpinner />
+          ) : (
+            <div>
+              <h2 className="text-xl font-bold mb-4">{scenes?.title || 'Loading Scene...'}</h2>
+              <div className="prose dark:prose-invert mb-6" dangerouslySetInnerHTML={{ __html: scenes?.premise || '' }} />
+              
+              <div className="border-t border-gray-200 dark:border-dark-700 pt-6">
+                  <h3 className="text-lg font-semibold mb-4">Conversation</h3>
+                  <div className="bg-gray-50 dark:bg-dark-900 p-4 rounded h-64 overflow-y-auto mb-4">
+                      {/* Chat messages will appear here */}
+                      <p className="text-gray-500 italic">Chat history will be loaded here...</p>
+                  </div>
+                  <div className="flex gap-2">
+                      <input className="flex-grow p-2 border rounded dark:bg-dark-800" placeholder="Type your message..." />
+                      <BaseButton label="Send" color="info" />
+                  </div>
+              </div>
+            </div>
+          )}
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+AkazaRoleplay.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default AkazaRoleplay;