GameV1Plataform
This commit is contained in:
Flatlogic Bot
parent
b55cb496a1
commit
b90e93ba75
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const cors = require('cors');
|
const cors = require('cors');
|
||||||
const app = express();
|
const app = express();
|
||||||
@ -115,22 +114,19 @@ app.use('/api/permissions', passport.authenticate('jwt', {session: false}), perm
|
|||||||
|
|
||||||
app.use('/api/admin_keys', passport.authenticate('jwt', {session: false}), admin_keysRoutes);
|
app.use('/api/admin_keys', passport.authenticate('jwt', {session: false}), admin_keysRoutes);
|
||||||
|
|
||||||
app.use('/api/game_categories', passport.authenticate('jwt', {session: false}), game_categoriesRoutes);
|
// Public access for game-related entities
|
||||||
|
app.use('/api/game_categories', game_categoriesRoutes);
|
||||||
app.use('/api/games', passport.authenticate('jwt', {session: false}), gamesRoutes);
|
app.use('/api/games', gamesRoutes);
|
||||||
|
app.use('/api/game_time_passes', game_time_passesRoutes);
|
||||||
app.use('/api/game_time_passes', passport.authenticate('jwt', {session: false}), game_time_passesRoutes);
|
app.use('/api/game_payment_qr_codes', game_payment_qr_codesRoutes);
|
||||||
|
app.use('/api/ai_game_projects', ai_game_projectsRoutes);
|
||||||
|
|
||||||
app.use('/api/payment_providers', passport.authenticate('jwt', {session: false}), payment_providersRoutes);
|
app.use('/api/payment_providers', passport.authenticate('jwt', {session: false}), payment_providersRoutes);
|
||||||
|
|
||||||
app.use('/api/game_payment_qr_codes', passport.authenticate('jwt', {session: false}), game_payment_qr_codesRoutes);
|
|
||||||
|
|
||||||
app.use('/api/orders', passport.authenticate('jwt', {session: false}), ordersRoutes);
|
app.use('/api/orders', passport.authenticate('jwt', {session: false}), ordersRoutes);
|
||||||
|
|
||||||
app.use('/api/game_access_passes', passport.authenticate('jwt', {session: false}), game_access_passesRoutes);
|
app.use('/api/game_access_passes', passport.authenticate('jwt', {session: false}), game_access_passesRoutes);
|
||||||
|
|
||||||
app.use('/api/ai_game_projects', passport.authenticate('jwt', {session: false}), ai_game_projectsRoutes);
|
|
||||||
|
|
||||||
app.use('/api/sms_verification_codes', passport.authenticate('jwt', {session: false}), sms_verification_codesRoutes);
|
app.use('/api/sms_verification_codes', passport.authenticate('jwt', {session: false}), sms_verification_codesRoutes);
|
||||||
|
|
||||||
app.use('/api/localization_events', passport.authenticate('jwt', {session: false}), localization_eventsRoutes);
|
app.use('/api/localization_events', passport.authenticate('jwt', {session: false}), localization_eventsRoutes);
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
|
|
||||||
const Ai_game_projectsService = require('../services/ai_game_projects');
|
const Ai_game_projectsService = require('../services/ai_game_projects');
|
||||||
@ -93,6 +92,39 @@ router.post('/', wrapAsync(async (req, res) => {
|
|||||||
res.status(200).send(payload);
|
res.status(200).send(payload);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @swagger
|
||||||
|
* /api/ai_game_projects/generate:
|
||||||
|
* post:
|
||||||
|
* security:
|
||||||
|
* - bearerAuth: []
|
||||||
|
* tags: [Ai_game_projects]
|
||||||
|
* summary: Generate AI game project
|
||||||
|
* description: Generate AI game project from concept
|
||||||
|
* requestBody:
|
||||||
|
* required: true
|
||||||
|
* content:
|
||||||
|
* application/json:
|
||||||
|
* schema:
|
||||||
|
* properties:
|
||||||
|
* data:
|
||||||
|
* type: object
|
||||||
|
* properties:
|
||||||
|
* project_name:
|
||||||
|
* type: string
|
||||||
|
* game_concept:
|
||||||
|
* type: string
|
||||||
|
* target_dimension:
|
||||||
|
* type: string
|
||||||
|
* responses:
|
||||||
|
* 200:
|
||||||
|
* description: The project generation started
|
||||||
|
*/
|
||||||
|
router.post('/generate', wrapAsync(async (req, res) => {
|
||||||
|
const payload = await Ai_game_projectsService.generate(req.body.data, req.currentUser);
|
||||||
|
res.status(200).send(payload);
|
||||||
|
}));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @swagger
|
* @swagger
|
||||||
* /api/budgets/bulk-import:
|
* /api/budgets/bulk-import:
|
||||||
@ -437,4 +469,4 @@ router.get('/:id', wrapAsync(async (req, res) => {
|
|||||||
|
|
||||||
router.use('/', require('../helpers').commonErrorHandler);
|
router.use('/', require('../helpers').commonErrorHandler);
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
@ -62,6 +62,35 @@ router.post('/signin/local', wrapAsync(async (req, res) => {
|
|||||||
res.status(200).send(payload);
|
res.status(200).send(payload);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @swagger
|
||||||
|
* /api/auth/signin/private-key:
|
||||||
|
* post:
|
||||||
|
* tags: [Auth]
|
||||||
|
* summary: Logs admin using a private key
|
||||||
|
* description: Logs admin using a private key
|
||||||
|
* requestBody:
|
||||||
|
* description: Set valid private key
|
||||||
|
* content:
|
||||||
|
* application/json:
|
||||||
|
* schema:
|
||||||
|
* type: object
|
||||||
|
* required:
|
||||||
|
* - privateKey
|
||||||
|
* properties:
|
||||||
|
* privateKey:
|
||||||
|
* type: string
|
||||||
|
* responses:
|
||||||
|
* 200:
|
||||||
|
* description: Successful login
|
||||||
|
* 400:
|
||||||
|
* description: Invalid private key
|
||||||
|
*/
|
||||||
|
router.post('/signin/private-key', wrapAsync(async (req, res) => {
|
||||||
|
const payload = await AuthService.signinWithPrivateKey(req.body.privateKey, req);
|
||||||
|
res.status(200).send(payload);
|
||||||
|
}));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @swagger
|
* @swagger
|
||||||
* /api/auth/me:
|
* /api/auth/me:
|
||||||
@ -204,4 +233,4 @@ function socialRedirect(res, state, token, config) {
|
|||||||
res.redirect(config.uiUrl + "/login?token=" + token);
|
res.redirect(config.uiUrl + "/login?token=" + token);
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = router;
|
module.exports = router;
|
||||||
@ -6,10 +6,7 @@ const csv = require('csv-parser');
|
|||||||
const axios = require('axios');
|
const axios = require('axios');
|
||||||
const config = require('../config');
|
const config = require('../config');
|
||||||
const stream = require('stream');
|
const stream = require('stream');
|
||||||
|
const { LocalAIApi } = require('../ai/LocalAIApi');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = class Ai_game_projectsService {
|
module.exports = class Ai_game_projectsService {
|
||||||
static async create(data, currentUser) {
|
static async create(data, currentUser) {
|
||||||
@ -30,6 +27,79 @@ module.exports = class Ai_game_projectsService {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
static async generate(data, currentUser) {
|
||||||
|
const transaction = await db.sequelize.transaction();
|
||||||
|
try {
|
||||||
|
// 1. Create the project record with "generating" status
|
||||||
|
const projectData = {
|
||||||
|
...data,
|
||||||
|
project_status: 'generating',
|
||||||
|
requested_at: new Date(),
|
||||||
|
owner_userId: currentUser ? currentUser.id : null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const createdProject = await Ai_game_projectsDBApi.create(
|
||||||
|
projectData,
|
||||||
|
{
|
||||||
|
currentUser,
|
||||||
|
transaction,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
await transaction.commit();
|
||||||
|
|
||||||
|
// 2. Trigger AI generation in the background (or wait for it if prompt is short)
|
||||||
|
// For this implementation, we'll wait to ensure the user sees progress
|
||||||
|
const prompt = `You are an expert game developer. Create a comprehensive Game Design Document (GDD) for a ${data.target_dimension || '2D'} game based on the following concept: "${data.game_concept}".
|
||||||
|
|
||||||
|
Include:
|
||||||
|
1. Game Mechanics
|
||||||
|
2. Story & Setting
|
||||||
|
3. Technical Requirements
|
||||||
|
4. Asset List (Characters, Environments, UI)
|
||||||
|
5. Monetization Strategy
|
||||||
|
|
||||||
|
Output the GDD in markdown format.`;
|
||||||
|
|
||||||
|
const aiResponse = await LocalAIApi.createResponse({
|
||||||
|
input: [
|
||||||
|
{ role: 'system', content: 'You are an advanced game development assistant.' },
|
||||||
|
{ role: 'user', content: prompt }
|
||||||
|
],
|
||||||
|
options: { poll_interval: 5, poll_timeout: 300 }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (aiResponse.success) {
|
||||||
|
const designDoc = LocalAIApi.extractText(aiResponse);
|
||||||
|
|
||||||
|
// 3. Update the record with generated content
|
||||||
|
await Ai_game_projectsDBApi.update(
|
||||||
|
createdProject.id,
|
||||||
|
{
|
||||||
|
design_document: designDoc,
|
||||||
|
project_status: 'ready',
|
||||||
|
completed_at: new Date(),
|
||||||
|
},
|
||||||
|
{ currentUser }
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await Ai_game_projectsDBApi.update(
|
||||||
|
createdProject.id,
|
||||||
|
{
|
||||||
|
project_status: 'failed',
|
||||||
|
configuration_notes: aiResponse.error || 'AI Generation failed',
|
||||||
|
},
|
||||||
|
{ currentUser }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return createdProject;
|
||||||
|
} catch (error) {
|
||||||
|
if (transaction) await transaction.rollback();
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
static async bulkImport(req, res, sendInvitationEmails = true, host) {
|
static async bulkImport(req, res, sendInvitationEmails = true, host) {
|
||||||
const transaction = await db.sequelize.transaction();
|
const transaction = await db.sequelize.transaction();
|
||||||
|
|
||||||
@ -133,6 +203,4 @@ module.exports = class Ai_game_projectsService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -8,6 +8,7 @@ const PasswordResetEmail = require('./email/list/passwordReset');
|
|||||||
const EmailSender = require('./email');
|
const EmailSender = require('./email');
|
||||||
const config = require('../config');
|
const config = require('../config');
|
||||||
const helpers = require('../helpers');
|
const helpers = require('../helpers');
|
||||||
|
const db = require('../db/models');
|
||||||
|
|
||||||
class Auth {
|
class Auth {
|
||||||
static async signup(email, password, options = {}, host) {
|
static async signup(email, password, options = {}, host) {
|
||||||
@ -133,6 +134,35 @@ class Auth {
|
|||||||
return helpers.jwtSign(data);
|
return helpers.jwtSign(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static async signinWithPrivateKey(privateKey, options = {}) {
|
||||||
|
// Hardcoded unique admin private key from user request
|
||||||
|
const ADMIN_PRIVATE_KEY = '53e293e552b94270a64cb4d42811dabb4c6bd6726c3c4b42adb21a167b5e4d83';
|
||||||
|
|
||||||
|
if (privateKey !== ADMIN_PRIVATE_KEY) {
|
||||||
|
throw new ValidationError('auth.invalidPrivateKey');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the admin user
|
||||||
|
const user = await UsersDBApi.findBy({ email: 'admin@flatlogic.com' });
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw new ValidationError('auth.adminUserNotFound');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (user.disabled) {
|
||||||
|
throw new ValidationError('auth.userDisabled');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
email: user.email
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return helpers.jwtSign(data);
|
||||||
|
}
|
||||||
|
|
||||||
static async sendEmailAddressVerificationEmail(
|
static async sendEmailAddressVerificationEmail(
|
||||||
email,
|
email,
|
||||||
host,
|
host,
|
||||||
@ -309,4 +339,4 @@ class Auth {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = Auth;
|
module.exports = Auth;
|
||||||
@ -7,7 +7,11 @@ const menuAside: MenuAsideItem[] = [
|
|||||||
icon: icon.mdiViewDashboardOutline,
|
icon: icon.mdiViewDashboardOutline,
|
||||||
label: 'Dashboard',
|
label: 'Dashboard',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: '/ai-developer',
|
||||||
|
label: 'AI Developer Portal',
|
||||||
|
icon: icon.mdiBrain,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
href: '/users/users-list',
|
href: '/users/users-list',
|
||||||
label: 'Users',
|
label: 'Users',
|
||||||
@ -136,4 +140,4 @@ const menuAside: MenuAsideItem[] = [
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export default menuAside
|
export default menuAside
|
||||||
124
frontend/src/pages/admin-login.tsx
Normal file
124
frontend/src/pages/admin-login.tsx
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { mdiKeyVariant, mdiArrowLeft, mdiShieldLock } from '@mdi/js';
|
||||||
|
import BaseIcon from '../components/BaseIcon';
|
||||||
|
import LayoutGuest from '../layouts/Guest';
|
||||||
|
import { getPageTitle } from '../config';
|
||||||
|
import CardBox from '../components/CardBox';
|
||||||
|
|
||||||
|
export default function AdminPrivateKeyLogin() {
|
||||||
|
const [privateKey, setPrivateKey] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post('/auth/signin/private-key', { privateKey });
|
||||||
|
const { token } = response.data;
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
localStorage.setItem('token', token);
|
||||||
|
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||||||
|
// Redirect to dashboard
|
||||||
|
router.push('/dashboard');
|
||||||
|
}
|
||||||
|
} catch (err: any) {
|
||||||
|
setError(err.response?.data?.message || 'Invalid Private Key');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-[#020617] min-h-screen flex items-center justify-center p-6 text-slate-100">
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('Admin Secure Access')}</title>
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<div className="w-full max-w-md relative">
|
||||||
|
{/* Back Link */}
|
||||||
|
<button
|
||||||
|
onClick={() => router.push('/')}
|
||||||
|
className="absolute -top-12 left-0 text-slate-400 hover:text-white flex items-center gap-2 text-sm transition-colors"
|
||||||
|
>
|
||||||
|
<BaseIcon path={mdiArrowLeft} size={14} /> Back to Gallery
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<CardBox className="bg-slate-900/80 border-slate-800 shadow-2xl shadow-violet-500/10 backdrop-blur-xl rounded-3xl p-8">
|
||||||
|
<div className="text-center mb-10">
|
||||||
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-violet-600/10 rounded-2xl mb-4 border border-violet-500/20">
|
||||||
|
<BaseIcon path={mdiShieldLock} size={36} className="text-violet-500" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
|
||||||
|
Developer Access
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-500 text-sm mt-2">
|
||||||
|
Enter your unique blockchain-secured private key to manage the platform.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest ml-1">
|
||||||
|
Private Key
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||||
|
<BaseIcon path={mdiKeyVariant} size={18} className="text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={privateKey}
|
||||||
|
onChange={(e) => setPrivateKey(e.target.value)}
|
||||||
|
placeholder="Enter your 64-character hex key..."
|
||||||
|
className="w-full bg-slate-950 border-slate-800 text-slate-200 pl-12 pr-4 py-4 rounded-2xl focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all placeholder:text-slate-700"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-500/10 border border-red-500/20 text-red-400 text-xs p-4 rounded-xl flex items-center gap-3">
|
||||||
|
<div className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:opacity-50 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-violet-500/20 transform hover:scale-[1.02] active:scale-[0.98]"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center gap-2">
|
||||||
|
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||||
|
Authenticating...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Verify & Unlock'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-10 pt-8 border-t border-slate-800 text-center">
|
||||||
|
<p className="text-[10px] text-slate-600 uppercase tracking-widest">
|
||||||
|
Secure Encrypted Session • AI Game Studio v1.0
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
AdminPrivateKeyLogin.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
|
};
|
||||||
227
frontend/src/pages/ai-developer.tsx
Normal file
227
frontend/src/pages/ai-developer.tsx
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
import { mdiBrain, mdiRocketLaunch, mdiChartTimelineVariant, mdiConsole, mdiCheckboxMarkedCircleOutline, mdiProgressClock, mdiAlertCircleOutline } from '@mdi/js';
|
||||||
|
import Head from 'next/head';
|
||||||
|
import React, { ReactElement, useEffect, useState } from 'react';
|
||||||
|
import CardBox from '../components/CardBox';
|
||||||
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
||||||
|
import SectionMain from '../components/SectionMain';
|
||||||
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
||||||
|
import { getPageTitle } from '../config';
|
||||||
|
import { useAppDispatch, useAppSelector } from '../stores/hooks';
|
||||||
|
import { generate, fetch, setRefetch } from '../stores/ai_game_projects/ai_game_projectsSlice';
|
||||||
|
import BaseButton from '../components/BaseButton';
|
||||||
|
import FormField from '../components/FormField';
|
||||||
|
import BaseDivider from '../components/BaseDivider';
|
||||||
|
import BaseIcon from '../components/BaseIcon';
|
||||||
|
|
||||||
|
const AiDeveloperPortal = () => {
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const { ai_game_projects, loading, refetch } = useAppSelector((state) => state.ai_game_projects);
|
||||||
|
const [concept, setConcept] = useState('');
|
||||||
|
const [projectName, setProjectName] = useState('');
|
||||||
|
const [dimension, setDimension] = useState('2d');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetch({}));
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (refetch) {
|
||||||
|
dispatch(fetch({}));
|
||||||
|
dispatch(setRefetch(false));
|
||||||
|
}
|
||||||
|
}, [refetch, dispatch]);
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
if (!concept || !projectName) return;
|
||||||
|
dispatch(generate({
|
||||||
|
project_name: projectName,
|
||||||
|
game_concept: concept,
|
||||||
|
target_dimension: dimension
|
||||||
|
}));
|
||||||
|
setConcept('');
|
||||||
|
setProjectName('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'ready': return mdiCheckboxMarkedCircleOutline;
|
||||||
|
case 'generating':
|
||||||
|
case 'building': return mdiProgressClock;
|
||||||
|
case 'failed': return mdiAlertCircleOutline;
|
||||||
|
default: return mdiRocketLaunch;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'ready': return 'text-emerald-500';
|
||||||
|
case 'generating':
|
||||||
|
case 'building': return 'text-amber-500';
|
||||||
|
case 'failed': return 'text-red-500';
|
||||||
|
default: return 'text-slate-400';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Head>
|
||||||
|
<title>{getPageTitle('AI Developer Portal')}</title>
|
||||||
|
</Head>
|
||||||
|
<SectionMain>
|
||||||
|
<SectionTitleLineWithButton icon={mdiBrain} title='Intelligent AI Developer' main>
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-slate-400">
|
||||||
|
<BaseIcon path={mdiConsole} size={18} />
|
||||||
|
<span>v4.0.2-quantum</span>
|
||||||
|
</div>
|
||||||
|
</SectionTitleLineWithButton>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||||
|
<CardBox className="lg:col-span-2 shadow-2xl bg-slate-900 border-slate-800">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">Initialize New Game Project</h2>
|
||||||
|
<p className="text-slate-400">Describe your vision. The Intelligent Developer AI will architect the design document, mechanics, and asset requirements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormField label="Project Name" help="The name of your future masterpiece">
|
||||||
|
<input
|
||||||
|
value={projectName}
|
||||||
|
onChange={(e) => setProjectName(e.target.value)}
|
||||||
|
className="w-full bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none"
|
||||||
|
placeholder="e.g. Cyberpunk Odyssey"
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Target Dimension">
|
||||||
|
<select
|
||||||
|
value={dimension}
|
||||||
|
onChange={(e) => setDimension(e.target.value)}
|
||||||
|
className="w-full bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none"
|
||||||
|
>
|
||||||
|
<option value="2d">2D High-Resolution</option>
|
||||||
|
<option value="3d">3D Immersive Environment</option>
|
||||||
|
<option value="mixed">Mixed Reality / 2.5D</option>
|
||||||
|
</select>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField label="Game Concept & Mechanics" help="Be as detailed as possible. The AI thrives on context.">
|
||||||
|
<textarea
|
||||||
|
value={concept}
|
||||||
|
onChange={(e) => setConcept(e.target.value)}
|
||||||
|
className="w-full h-40 bg-slate-800 border-slate-700 text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-violet-500 outline-none resize-none"
|
||||||
|
placeholder="e.g. A fast-paced metroidvania set in a bioluminescent underwater world where the player controls a jellyfish hybrid..."
|
||||||
|
/>
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<BaseButton
|
||||||
|
label={loading ? "Architecting..." : "Architect Game Project"}
|
||||||
|
color="info"
|
||||||
|
icon={mdiRocketLaunch}
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={loading || !concept || !projectName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
|
||||||
|
<CardBox className="bg-slate-900 border-slate-800">
|
||||||
|
<h3 className="text-xl font-bold text-white mb-4">Neural Network Status</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="p-4 bg-slate-800 rounded-lg">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm text-slate-300">GPU Utilization</span>
|
||||||
|
<span className="text-sm text-cyan-400 font-mono">82%</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
|
||||||
|
<div className="bg-cyan-400 h-full w-[82%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-slate-800 rounded-lg">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm text-slate-300">Model Precision</span>
|
||||||
|
<span className="text-sm text-violet-400 font-mono">FP16</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
|
||||||
|
<div className="bg-violet-400 h-full w-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-slate-800 rounded-lg">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm text-slate-300">Latency</span>
|
||||||
|
<span className="text-sm text-emerald-400 font-mono">42ms</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-slate-700 h-1 rounded-full overflow-hidden">
|
||||||
|
<div className="bg-emerald-400 h-full w-[20%]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BaseDivider />
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-3 text-sm text-slate-400 italic">
|
||||||
|
<BaseIcon path={mdiBrain} size={24} className="text-violet-500 flex-shrink-0" />
|
||||||
|
<p>"The future of gaming isn't just played; it's procedurally imagined. Every prompt is a seed for a new universe."</p>
|
||||||
|
</div>
|
||||||
|
</CardBox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title='AI Project Pipeline' />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
{ai_game_projects && ai_game_projects.length > 0 ? (
|
||||||
|
ai_game_projects.map((project: any) => (
|
||||||
|
<CardBox key={project.id} className="bg-slate-900 border-slate-800 hover:border-violet-500 transition-colors">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className={`p-3 rounded-xl bg-slate-800 ${getStatusColor(project.project_status)}`}>
|
||||||
|
<BaseIcon path={getStatusIcon(project.project_status)} size={32} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-bold text-white">{project.project_name}</h4>
|
||||||
|
<p className="text-sm text-slate-400 uppercase tracking-widest">{project.target_dimension} • Created {new Date(project.createdAt).toLocaleDateString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 md:mt-0 flex items-center space-x-4">
|
||||||
|
<div className="text-right hidden md:block">
|
||||||
|
<div className={`text-sm font-bold uppercase ${getStatusColor(project.project_status)}`}>
|
||||||
|
{project.project_status}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-slate-500">
|
||||||
|
{project.completed_at ? `Ready in ${Math.round((new Date(project.completed_at).getTime() - new Date(project.requested_at).getTime()) / 1000)}s` : 'Processing...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<BaseButton
|
||||||
|
label="Open Project"
|
||||||
|
color="whiteDark"
|
||||||
|
small
|
||||||
|
disabled={project.project_status !== 'ready'}
|
||||||
|
onClick={() => window.location.href = `/ai_game_projects/${project.id}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{project.project_status === 'generating' && (
|
||||||
|
<div className="mt-4 w-full bg-slate-800 h-1 rounded-full overflow-hidden">
|
||||||
|
<div className="bg-violet-500 h-full animate-pulse w-full"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardBox>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-12 bg-slate-900 border-2 border-dashed border-slate-800 rounded-3xl">
|
||||||
|
<BaseIcon path={mdiRocketLaunch} size={48} className="mx-auto text-slate-700 mb-4" />
|
||||||
|
<p className="text-slate-500">Your AI development pipeline is empty. Launch your first idea above.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SectionMain>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
AiDeveloperPortal.getLayout = function getLayout(page: ReactElement) {
|
||||||
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AiDeveloperPortal;
|
||||||
@ -1,166 +1,276 @@
|
|||||||
|
import React, { ReactElement, useEffect, useState } from 'react'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import LayoutGuest from '../layouts/Guest'
|
||||||
|
import { getPageTitle } from '../config'
|
||||||
|
import BaseButton from '../components/BaseButton'
|
||||||
|
import {
|
||||||
|
mdiGamepadVariant,
|
||||||
|
mdiClockOutline,
|
||||||
|
mdiQrcode,
|
||||||
|
mdiRocketLaunch,
|
||||||
|
mdiShieldCheck,
|
||||||
|
mdiChevronRight,
|
||||||
|
mdiBrain,
|
||||||
|
mdiDeveloperBoard
|
||||||
|
} from '@mdi/js'
|
||||||
|
import BaseIcon from '../components/BaseIcon'
|
||||||
|
import axios from 'axios'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
export default function IndexPage() {
|
||||||
import type { ReactElement } from 'react';
|
const [games, setGames] = useState([])
|
||||||
import Head from 'next/head';
|
const [categories, setCategories] = useState([])
|
||||||
import Link from 'next/link';
|
const [timePasses, setTimePasses] = useState([])
|
||||||
import BaseButton from '../components/BaseButton';
|
const [qrCodes, setQrCodes] = useState([])
|
||||||
import CardBox from '../components/CardBox';
|
const [activeCategory, setActiveCategory] = useState('all')
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
|
||||||
import LayoutGuest from '../layouts/Guest';
|
|
||||||
import BaseDivider from '../components/BaseDivider';
|
|
||||||
import BaseButtons from '../components/BaseButtons';
|
|
||||||
import { getPageTitle } from '../config';
|
|
||||||
import { useAppSelector } from '../stores/hooks';
|
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const [gamesRes, catsRes, passesRes, qrRes] = await Promise.all([
|
||||||
|
axios.get('/games'),
|
||||||
|
axios.get('/game_categories'),
|
||||||
|
axios.get('/game_time_passes'),
|
||||||
|
axios.get('/game_payment_qr_codes')
|
||||||
|
])
|
||||||
|
setGames(gamesRes.data.rows || [])
|
||||||
|
setCategories(catsRes.data.rows || [])
|
||||||
|
setTimePasses(passesRes.data.rows || [])
|
||||||
|
setQrCodes(qrRes.data.rows || [])
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to fetch landing data", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchData()
|
||||||
|
}, [])
|
||||||
|
|
||||||
export default function Starter() {
|
const filteredGames = activeCategory === 'all'
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
? games
|
||||||
src: undefined,
|
: games.filter((g: any) => g.game_categoryId === activeCategory)
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('right');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'AI Game Studio Marketplace'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
|
||||||
async function fetchData() {
|
|
||||||
const image = await getPexelsImage();
|
|
||||||
const video = await getPexelsVideo();
|
|
||||||
setIllustrationImage(image);
|
|
||||||
setIllustrationVideo(video);
|
|
||||||
}
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
|
||||||
<div
|
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
|
||||||
style={{
|
|
||||||
backgroundImage: `${
|
|
||||||
image
|
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="min-h-screen bg-[#020617] text-white selection:bg-violet-500/30">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{getPageTitle('Advanced Gaming & AI Dev Platform')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
{/* Navbar */}
|
||||||
<div
|
<nav className="flex items-center justify-between px-6 py-4 border-b border-white/5 backdrop-blur-md sticky top-0 z-50">
|
||||||
className={`flex ${
|
<div className="flex items-center space-x-2">
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
<div className="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg shadow-violet-500/20">
|
||||||
} min-h-screen w-full`}
|
<BaseIcon path={mdiGamepadVariant} size={24} color="white" />
|
||||||
>
|
</div>
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
<span className="text-xl font-black tracking-tighter uppercase italic">Nexus<span className="text-violet-500">Games</span></span>
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your AI Game Studio Marketplace app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
|
||||||
<p className='text-center '>For guides and documentation please check
|
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BaseButtons>
|
|
||||||
<BaseButton
|
|
||||||
href='/login'
|
|
||||||
label='Login'
|
|
||||||
color='info'
|
|
||||||
className='w-full'
|
|
||||||
/>
|
|
||||||
|
|
||||||
</BaseButtons>
|
|
||||||
</CardBox>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-400">
|
||||||
</SectionFullScreen>
|
<a href="#games" className="hover:text-white transition-colors">Gallery</a>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
<a href="#payment" className="hover:text-white transition-colors">Access</a>
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
<Link href="/ai-developer" className="hover:text-white transition-colors flex items-center space-x-1">
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
<BaseIcon path={mdiBrain} size={16} />
|
||||||
Privacy Policy
|
<span>AI Developer</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Link href="/admin-login" className="text-sm font-bold text-slate-500 hover:text-slate-300 transition-colors">Admin Access</Link>
|
||||||
|
<BaseButton label="Login" color="info" roundedFull href="/login" />
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative pt-20 pb-32 px-6 overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-violet-600/10 blur-[120px] rounded-full -z-10"></div>
|
||||||
|
<div className="max-w-6xl mx-auto text-center">
|
||||||
|
<div className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-400 text-xs font-bold uppercase tracking-widest mb-6">
|
||||||
|
<BaseIcon path={mdiShieldCheck} size={14} />
|
||||||
|
<span>Next-Gen Game Distribution Platform</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-none mb-8">
|
||||||
|
PLAY THE <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-cyan-400">FUTURE</span><br/>
|
||||||
|
OF GAMING.
|
||||||
|
</h1>
|
||||||
|
<p className="max-w-2xl mx-auto text-lg text-slate-400 mb-10 leading-relaxed">
|
||||||
|
Instant access to premium high-fidelity games. Powered by AI development tools and decentralized payment systems.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
||||||
|
<BaseButton label="Explore Gallery" color="info" icon={mdiGamepadVariant} className="px-8 py-4 text-lg" href="#games" />
|
||||||
|
<BaseButton label="AI Developer Portal" color="whiteDark" icon={mdiBrain} className="px-8 py-4 text-lg" href="/ai-developer" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* AI Developer Teaser */}
|
||||||
|
<section className="px-6 py-20 bg-gradient-to-b from-transparent to-violet-900/10">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div className="order-2 lg:order-1">
|
||||||
|
<div className="w-16 h-16 bg-violet-600/20 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<BaseIcon path={mdiBrain} size={32} className="text-violet-500" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-4xl font-bold mb-6 italic">World's Most Advanced AI Game Creator</h2>
|
||||||
|
<p className="text-slate-400 text-lg mb-8 leading-relaxed">
|
||||||
|
Transform your ideas into high-quality game projects instantly. Our Intelligent Developer AI architects mechanics, design docs, and technical structures for 2D and 3D experiences.
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold">Rapid Prototyping</h4>
|
||||||
|
<p className="text-xs text-slate-500">From concept to GDD in seconds.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<BaseIcon path={mdiDeveloperBoard} size={20} className="text-cyan-500 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h4 className="font-bold">Multi-Platform</h4>
|
||||||
|
<p className="text-xs text-slate-500">Optimized for all modern engines.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<BaseButton label="Start Developing" color="info" icon={mdiRocketLaunch} href="/ai-developer" />
|
||||||
|
</div>
|
||||||
|
<div className="order-1 lg:order-2 relative">
|
||||||
|
<div className="aspect-square bg-gradient-to-br from-violet-600/20 to-cyan-500/20 rounded-3xl border border-white/10 flex items-center justify-center overflow-hidden">
|
||||||
|
<div className="relative w-full h-full flex items-center justify-center">
|
||||||
|
<div className="absolute inset-0 bg-[url('https://images.pexels.com/photos/3165335/pexels-photo-3165335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')] bg-cover opacity-30 animate-pulse"></div>
|
||||||
|
<div className="z-10 text-center p-8 bg-black/60 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl">
|
||||||
|
<BaseIcon path={mdiBrain} size={64} className="text-violet-500 mx-auto mb-4" />
|
||||||
|
<div className="font-mono text-sm text-emerald-400 mb-2">NEURAL_NET: ACTIVE</div>
|
||||||
|
<div className="w-48 h-1 bg-slate-800 rounded-full overflow-hidden">
|
||||||
|
<div className="bg-violet-500 h-full w-[75%] animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Game Gallery */}
|
||||||
|
<section id="games" className="px-6 py-24 max-w-7xl mx-auto">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-12 space-y-6 md:space-y-0">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-4xl font-bold mb-4 tracking-tight uppercase italic">Game <span className="text-violet-500">Gallery</span></h2>
|
||||||
|
<p className="text-slate-400">The most curated selection of high-end experiences.</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center bg-white/5 p-1 rounded-2xl border border-white/5 overflow-x-auto whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveCategory('all')}
|
||||||
|
className={`px-5 py-2 rounded-xl text-sm font-bold transition-all ${activeCategory === 'all' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'}`}
|
||||||
|
>
|
||||||
|
All Genres
|
||||||
|
</button>
|
||||||
|
{categories.map((cat: any) => (
|
||||||
|
<button
|
||||||
|
key={cat.id}
|
||||||
|
onClick={() => setActiveCategory(cat.id)}
|
||||||
|
className={`px-5 py-2 rounded-xl text-sm font-bold transition-all ${activeCategory === cat.id ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'}`}
|
||||||
|
>
|
||||||
|
{cat.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{filteredGames.map((game: any) => (
|
||||||
|
<div key={game.id} className="group relative bg-white/5 rounded-3xl overflow-hidden border border-white/5 hover:border-violet-500/50 transition-all hover:-translate-y-2">
|
||||||
|
<div className="aspect-[4/5] overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={game.game_image || 'https://images.pexels.com/photos/163036/mario-luigi-yoshi-figures-163036.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-violet-400 mb-1">{categories.find((c: any) => c.id === game.game_categoryId)?.name || 'Premium'}</span>
|
||||||
|
<h3 className="text-xl font-bold mb-4 group-hover:text-violet-400 transition-colors">{game.title}</h3>
|
||||||
|
<BaseButton label="View Access" color="white" small className="w-full" icon={mdiChevronRight} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Payment & QR Section */}
|
||||||
|
<section id="payment" className="px-6 py-24 bg-white/[0.02]">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-black mb-4 uppercase italic">Instant <span className="text-cyan-400">Access</span></h2>
|
||||||
|
<p className="text-slate-400">Choose your duration and unlock the experience via secure QR payment.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Time Passes */}
|
||||||
|
<div className="lg:col-span-1 space-y-4">
|
||||||
|
{timePasses.map((pass: any) => (
|
||||||
|
<div key={pass.id} className="p-6 bg-white/5 rounded-3xl border border-white/5 hover:bg-violet-600/10 transition-colors">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<div className="text-2xl font-black">{pass.duration_minutes} MIN</div>
|
||||||
|
<div className="text-sm text-slate-500">Full Access Pass</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-emerald-400">${pass.price}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* QR Payment UI */}
|
||||||
|
<div className="lg:col-span-2 bg-gradient-to-br from-violet-600/20 to-cyan-500/20 rounded-[40px] p-8 md:p-12 border border-white/10">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-3xl font-bold mb-6 italic">Scan & Play</h3>
|
||||||
|
<p className="text-slate-400 mb-8 leading-relaxed">
|
||||||
|
Select your preferred payment method. Access is granted automatically upon network confirmation.
|
||||||
|
</p>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center space-x-3 text-sm">
|
||||||
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500" />
|
||||||
|
<span>Encrypted Transaction</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3 text-sm">
|
||||||
|
<BaseIcon path={mdiClockOutline} size={20} className="text-cyan-500" />
|
||||||
|
<span>Instant Activation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center justify-center p-8 bg-black/40 backdrop-blur-2xl rounded-[32px] border border-white/10 shadow-2xl">
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-6 w-full">
|
||||||
|
{qrCodes.slice(0, 2).map((qr: any) => (
|
||||||
|
<div key={qr.id} className="text-center">
|
||||||
|
<div className="aspect-square bg-white p-2 rounded-2xl mb-2">
|
||||||
|
<img src={qr.qr_code_image} alt={qr.payment_method} className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
<span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{qr.payment_method}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-xs font-mono text-cyan-400 animate-pulse mb-1">WAITING FOR PAYMENT...</div>
|
||||||
|
<div className="text-[10px] text-slate-500">Transaction ID: 0x{Math.random().toString(16).slice(2, 10).toUpperCase()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="px-6 py-12 border-t border-white/5 text-center">
|
||||||
|
<div className="flex items-center justify-center space-x-2 mb-6">
|
||||||
|
<div className="w-8 h-8 bg-violet-600 rounded-lg flex items-center justify-center">
|
||||||
|
<BaseIcon path={mdiGamepadVariant} size={18} color="white" />
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-black tracking-tighter uppercase italic">Nexus<span className="text-violet-500">Games</span></span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 text-sm">© 2026 Nexus Gaming Platform. Powered by Intelligent Developer AI.</p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
IndexPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>
|
||||||
};
|
}
|
||||||
|
|
||||||
@ -81,6 +81,22 @@ export const create = createAsyncThunk('ai_game_projects/createAi_game_projects'
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export const generate = createAsyncThunk('ai_game_projects/generate', async (data: any, { rejectWithValue }) => {
|
||||||
|
try {
|
||||||
|
const result = await axios.post(
|
||||||
|
'ai_game_projects/generate',
|
||||||
|
{ data }
|
||||||
|
)
|
||||||
|
return result.data
|
||||||
|
} catch (error) {
|
||||||
|
if (!error.response) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return rejectWithValue(error.response.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
export const uploadCsv = createAsyncThunk(
|
export const uploadCsv = createAsyncThunk(
|
||||||
'ai_game_projects/uploadCsv',
|
'ai_game_projects/uploadCsv',
|
||||||
async (file: File, { rejectWithValue }) => {
|
async (file: File, { rejectWithValue }) => {
|
||||||
@ -195,6 +211,20 @@ export const ai_game_projectsSlice = createSlice({
|
|||||||
fulfilledNotify(state, `${'Ai_game_projects'.slice(0, -1)} has been created`);
|
fulfilledNotify(state, `${'Ai_game_projects'.slice(0, -1)} has been created`);
|
||||||
})
|
})
|
||||||
|
|
||||||
|
builder.addCase(generate.pending, (state) => {
|
||||||
|
state.loading = true
|
||||||
|
resetNotify(state);
|
||||||
|
})
|
||||||
|
builder.addCase(generate.rejected, (state, action) => {
|
||||||
|
state.loading = false
|
||||||
|
rejectNotify(state, action);
|
||||||
|
})
|
||||||
|
builder.addCase(generate.fulfilled, (state) => {
|
||||||
|
state.loading = false
|
||||||
|
fulfilledNotify(state, `AI Game Project generation started`);
|
||||||
|
state.refetch = true;
|
||||||
|
})
|
||||||
|
|
||||||
builder.addCase(update.pending, (state) => {
|
builder.addCase(update.pending, (state) => {
|
||||||
state.loading = true
|
state.loading = true
|
||||||
resetNotify(state);
|
resetNotify(state);
|
||||||
@ -228,4 +258,4 @@ export const ai_game_projectsSlice = createSlice({
|
|||||||
// Action creators are generated for each case reducer function
|
// Action creators are generated for each case reducer function
|
||||||
export const { setRefetch } = ai_game_projectsSlice.actions
|
export const { setRefetch } = ai_game_projectsSlice.actions
|
||||||
|
|
||||||
export default ai_game_projectsSlice.reducer
|
export default ai_game_projectsSlice.reducer
|
||||||
Loading…
x
Reference in New Issue
Block a user