Compare commits
16 Commits
master
..
751b317af2
| Author | SHA1 | Date | |
|---|---|---|---|
 zhipu
|
751b317af2 | ||
|
zhipu
|
315490cedb | ||
|
zhipu
|
2ca5d8b7f8 | ||
|
zhipu
|
1d2dce75cc | ||
|
zhipu
|
4f4cbeb527 | ||
|
zhipu
|
ee0268d9f6 | ||
|
zhipu
|
6f2f022cb9 | ||
|
zhipu
|
aeabebdd9f | ||
|
zhipu
|
81a72a1ed7 | ||
|
zhipu
|
5e9f560f26 | ||
|
zhipu
|
3386ffc41e | ||
|
zhipu
|
390b1de203 | ||
|
zhipu
|
ff5ecd82ca | ||
 Z User
|
7c5f2f30f0 | ||
|
Z User
|
3b2e89db74 | ||
|
Z User
|
5b6e50c0bd |
Executable
@@ -0,0 +1,128 @@
|
||||
{
|
||||
"Meta": {
|
||||
"Strict": true,
|
||||
"Retries": 10,
|
||||
"MaxDeletes": 10,
|
||||
"SkipDirNlink": 20,
|
||||
"CaseInsensi": false,
|
||||
"ReadOnly": false,
|
||||
"NoBGJob": true,
|
||||
"OpenCache": 0,
|
||||
"OpenCacheLimit": 10000,
|
||||
"Heartbeat": 12000000000,
|
||||
"MountPoint": "/tmp/storage/containers/rundjuicefs-31fe40a7-808b-4861-a3c6-5e1361ba66cd-my-project",
|
||||
"Subdir": "/0954660f-fdaf-430e-9c08-43d856f4b183/chat-97147419-5634-40fa-8c67-d722ea396734/my-project",
|
||||
"AtimeMode": "noatime",
|
||||
"DirStatFlushPeriod": 1000000000,
|
||||
"SkipDirMtime": 100000000,
|
||||
"Sid": 4039678,
|
||||
"SortDir": false,
|
||||
"FastStatfs": false,
|
||||
"TTLCleanupInterval": 1800000000000
|
||||
},
|
||||
"Format": {
|
||||
"Name": "pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
|
||||
"UUID": "ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
|
||||
"Storage": "oss",
|
||||
"Bucket": "https://pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3.oss-cn-hongkong-internal.aliyuncs.com",
|
||||
"AccessKey": "STS.NXg1AmEjJ1XZCYZMa5mH1q66p",
|
||||
"SecretKey": "removed",
|
||||
"SessionToken": "removed",
|
||||
"BlockSize": 4096,
|
||||
"Compression": "none",
|
||||
"HashPrefix": true,
|
||||
"EncryptAlgo": "aes256gcm-rsa",
|
||||
"TrashDays": 0,
|
||||
"MetaVersion": 1,
|
||||
"MinClientVersion": "1.1.0-A",
|
||||
"DirStats": true,
|
||||
"EnableACL": false,
|
||||
"Consul": "21.0.14.104:8500",
|
||||
"CustomLabels": "cluster:pfs-j6cm9t56111f4x38;uid:1936221977589032",
|
||||
"PushGateway": "http://cn-hongkong-intranet.arms.aliyuncs.com/prometheus/322760eec05a83d258d354fca51498ab/1047553595254976/tiwz7q7d94/cn-hongkong/api/v2"
|
||||
},
|
||||
"Chunk": {
|
||||
"CacheDir": "/var/jfsCache/ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
|
||||
"CacheMode": 384,
|
||||
"CacheSize": 107374182400,
|
||||
"CacheItems": 0,
|
||||
"CacheChecksum": "extend",
|
||||
"CacheEviction": "2-random",
|
||||
"CacheScanInterval": 3600000000000,
|
||||
"CacheExpire": 0,
|
||||
"OSCache": true,
|
||||
"FreeSpace": 0.1,
|
||||
"AutoCreate": true,
|
||||
"Compress": "none",
|
||||
"MaxUpload": 20,
|
||||
"MaxStageWrite": 1000,
|
||||
"MaxRetries": 10,
|
||||
"UploadLimit": 0,
|
||||
"DownloadLimit": 0,
|
||||
"Writeback": false,
|
||||
"UploadDelay": 0,
|
||||
"UploadHours": "",
|
||||
"HashPrefix": true,
|
||||
"BlockSize": 4194304,
|
||||
"GetTimeout": 60000000000,
|
||||
"PutTimeout": 60000000000,
|
||||
"CacheFullBlock": true,
|
||||
"CacheLargeWrite": false,
|
||||
"BufferSize": 314572800,
|
||||
"Readahead": 33554432,
|
||||
"Prefetch": 1
|
||||
},
|
||||
"Security": {
|
||||
"EnableCap": false,
|
||||
"EnableSELinux": false
|
||||
},
|
||||
"Port": {},
|
||||
"Version": "1.3.0+2025-11-13.7d12dfcb",
|
||||
"AttrTimeout": 1000000000,
|
||||
"DirEntryTimeout": 1000000000,
|
||||
"NegEntryTimeout": 0,
|
||||
"EntryTimeout": 1000000000,
|
||||
"ReaddirCache": false,
|
||||
"BackupMeta": 3600000000000,
|
||||
"BackupSkipTrash": false,
|
||||
"PrefixInternal": false,
|
||||
"HideInternal": false,
|
||||
"AllSquash": {
|
||||
"Uid": 1001,
|
||||
"Gid": 1001
|
||||
},
|
||||
"NonDefaultPermission": true,
|
||||
"UMask": 0,
|
||||
"Pid": 221,
|
||||
"PPid": 212,
|
||||
"CommPath": "/tmp/fuse_fd_comm.212",
|
||||
"StatePath": "/tmp/state212.json",
|
||||
"FuseOpts": {
|
||||
"AllowOther": true,
|
||||
"Options": [
|
||||
"nonempty",
|
||||
"default_permissions"
|
||||
],
|
||||
"MaxBackground": 200,
|
||||
"MaxWrite": 0,
|
||||
"MaxReadAhead": 1048576,
|
||||
"IgnoreSecurityLabels": false,
|
||||
"RememberInodes": false,
|
||||
"FsName": "JuiceFS:pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
|
||||
"Name": "juicefs",
|
||||
"SingleThreaded": false,
|
||||
"DisableXAttrs": true,
|
||||
"Debug": false,
|
||||
"EnableLocks": true,
|
||||
"EnableSymlinkCaching": true,
|
||||
"ExplicitDataCacheControl": false,
|
||||
"DirectMount": true,
|
||||
"DirectMountFlags": 0,
|
||||
"EnableAcl": false,
|
||||
"EnableWriteback": false,
|
||||
"DontUmask": true,
|
||||
"OtherCaps": 0,
|
||||
"NoAllocForRead": false,
|
||||
"Timeout": 900000000000
|
||||
}
|
||||
}
|
||||
Executable → Regular
Executable → Regular
+1
-1
@@ -48,4 +48,4 @@ prompt
|
||||
|
||||
server.log
|
||||
# Skills directory
|
||||
.desloppify/
|
||||
/skills/
|
||||
@@ -1,16 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
|
||||
|
||||
if echo "$changed_files" | grep --quiet -E "package.json|package-lock.json"; then
|
||||
echo "📦 Dependencies changed. Syncing..."
|
||||
|
||||
# --no-progress stops the terminal spam
|
||||
# --loglevel error ensures we only see the bad stuff
|
||||
if npm install --no-progress --loglevel error; then
|
||||
echo "✅ Node modules are up to date."
|
||||
else
|
||||
echo "❌ npm install failed! Please check your connection or package.json."
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
@@ -1,27 +0,0 @@
|
||||
#!/bin/sh
|
||||
|
||||
echo "🔍 Running pre-commit checks..."
|
||||
|
||||
# Get staged files (added, copied, modified)
|
||||
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM)
|
||||
|
||||
if [ -n "$STAGED_FILES" ]; then
|
||||
echo "📏 Checking file sizes..."
|
||||
node .husky/scripts/check-file-size.js $STAGED_FILES
|
||||
if [ $? -ne 0 ]; then
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# Generate project structure
|
||||
echo "🗺️ Updating project structure..."
|
||||
node .husky/scripts/generate-project-tree.js
|
||||
node .husky/scripts/generate-dependency-graph.js
|
||||
if [ $? -ne 0 ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Auto-add the generated project structure to the commit
|
||||
git add docs/project-structure.txt
|
||||
|
||||
echo "✅ All pre-commit checks passed!"
|
||||
@@ -1,63 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const MAX_LINES = 400;
|
||||
|
||||
// List of file patterns to ignore (optional, can be customized)
|
||||
const IGNORE_PATTERNS = [
|
||||
/\.lock$/, // Lock files
|
||||
/\.min\.js$/, // Minified files
|
||||
/\.map$/, // Source maps
|
||||
/package-lock\.json$/,
|
||||
/bun\.lock$/,
|
||||
/tsconfig\.tsbuildinfo$/,
|
||||
/\.md$/, // Markdown documentation files
|
||||
/context\.md$/, // Context files for sub-agents
|
||||
/project-structure\.txt$/, // Generated project structure
|
||||
/dependency-graph\.json$/,
|
||||
];
|
||||
|
||||
function shouldIgnore(filePath) {
|
||||
return IGNORE_PATTERNS.some(pattern => pattern.test(filePath));
|
||||
}
|
||||
|
||||
const files = process.argv.slice(2);
|
||||
if (files.length === 0) {
|
||||
console.log('ℹ️ No files to check');
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
let hasError = false;
|
||||
|
||||
files.forEach(file => {
|
||||
// Skip ignored patterns
|
||||
if (shouldIgnore(file)) {
|
||||
console.log(`⏭️ Skipping ${file} (ignored pattern)`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if file exists (it might have been deleted)
|
||||
if (!fs.existsSync(file)) {
|
||||
console.log(`⏭️ Skipping ${file} (file does not exist)`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const content = fs.readFileSync(file, 'utf8');
|
||||
const lines = content.split('\n').length;
|
||||
|
||||
if (lines > MAX_LINES) {
|
||||
console.error(`❌ ${file} is too large (${lines} lines, max ${MAX_LINES}). AI agents will struggle. Please refactor!`);
|
||||
hasError = true;
|
||||
} else {
|
||||
console.log(`✅ ${file} (${lines} lines) - OK`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`⚠️ Error reading ${file}: ${err.message}`);
|
||||
// Don't fail on read errors, just warn
|
||||
}
|
||||
});
|
||||
|
||||
if (hasError) {
|
||||
process.exit(1);
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* generate-dependency-graph.js
|
||||
*
|
||||
* Generates two files in docs/ on every commit:
|
||||
*
|
||||
* docs/dependency-graph.json — full import graph for src/lib/game/
|
||||
* docs/circular-deps.txt — list of circular dependency chains (empty = clean)
|
||||
*
|
||||
* Run manually: node .husky/scripts/generate-dependency-graph.js
|
||||
* Requires: bun add -d madge
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
const ROOT = path.resolve(__dirname, '../../');
|
||||
const DOCS_DIR = path.join(ROOT, 'docs');
|
||||
const GRAPH_OUT = path.join(DOCS_DIR, 'dependency-graph.json');
|
||||
const CIRCULAR_OUT = path.join(DOCS_DIR, 'circular-deps.txt');
|
||||
|
||||
// Check madge is available
|
||||
function madgeAvailable() {
|
||||
try {
|
||||
execSync('bunx madge --version', { stdio: 'ignore', cwd: ROOT });
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function run(cmd) {
|
||||
return execSync(cmd, { cwd: ROOT, encoding: 'utf8' });
|
||||
}
|
||||
|
||||
if (!madgeAvailable()) {
|
||||
console.error('madge not found. Install with: bun add -d madge');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (!fs.existsSync(DOCS_DIR)) {
|
||||
fs.mkdirSync(DOCS_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
// ── 1. Full dependency graph for the game library ─────────────────────────
|
||||
try {
|
||||
const graphJson = run(
|
||||
'bunx madge --json --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
|
||||
);
|
||||
// Parse and re-serialize with readable formatting
|
||||
const graph = JSON.parse(graphJson);
|
||||
|
||||
// Annotate with metadata for AI agents
|
||||
const output = {
|
||||
_meta: {
|
||||
generated: new Date().toISOString(),
|
||||
description:
|
||||
'Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.',
|
||||
usage:
|
||||
'To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry.',
|
||||
},
|
||||
graph,
|
||||
};
|
||||
|
||||
fs.writeFileSync(GRAPH_OUT, JSON.stringify(output, null, 2));
|
||||
const nodeCount = Object.keys(graph).length;
|
||||
console.log(`✅ Dependency graph: ${nodeCount} modules → docs/dependency-graph.json`);
|
||||
} catch (err) {
|
||||
console.error('Failed to generate dependency graph:', err.message);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// ── 2. Circular dependency report ─────────────────────────────────────────
|
||||
try {
|
||||
let circularOutput = '';
|
||||
try {
|
||||
// madge exits with code 1 when circulars are found; capture stdout anyway
|
||||
circularOutput = run(
|
||||
'bunx madge --circular --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
|
||||
);
|
||||
} catch (e) {
|
||||
// exitCode 1 = circulars found; stdout contains the list
|
||||
circularOutput = e.stdout || '';
|
||||
}
|
||||
|
||||
const lines = circularOutput.trim().split('\n').filter(Boolean);
|
||||
// madge circular output starts with "Found N circular dependencies!"
|
||||
const circularLines = lines.filter(
|
||||
(l) => !l.startsWith('Found') && !l.startsWith('✔') && l.trim()
|
||||
);
|
||||
|
||||
let content;
|
||||
if (circularLines.length === 0) {
|
||||
content = `# Circular Dependencies\nGenerated: ${new Date().toISOString()}\n\nNo circular dependencies found. ✅\n`;
|
||||
console.log('✅ No circular dependencies found');
|
||||
} else {
|
||||
content = [
|
||||
`# Circular Dependencies`,
|
||||
`Generated: ${new Date().toISOString()}`,
|
||||
`Found: ${circularLines.length} circular chain(s) — these MUST be fixed before modifying involved files.`,
|
||||
'',
|
||||
...circularLines.map((l, i) => `${i + 1}. ${l.trim()}`),
|
||||
'',
|
||||
'## How to fix',
|
||||
'1. Identify which import in the chain can be extracted to a shared types/utils file.',
|
||||
'2. Move the shared type or function there.',
|
||||
'3. Both files import from the new shared module instead of each other.',
|
||||
'4. Run: bunx madge --circular src/lib/game (should return clean)',
|
||||
].join('\n');
|
||||
console.warn(`⚠️ Found ${circularLines.length} circular dependency chain(s) — see docs/circular-deps.txt`);
|
||||
}
|
||||
|
||||
fs.writeFileSync(CIRCULAR_OUT, content);
|
||||
} catch (err) {
|
||||
console.error('Failed to check circular dependencies:', err.message);
|
||||
// Non-fatal: write a note to the file and continue
|
||||
fs.writeFileSync(CIRCULAR_OUT, `# Circular Dependencies\nError running check: ${err.message}\n`);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { execSync } = require('node:child_process');
|
||||
|
||||
// Directory to start from (project root)
|
||||
const ROOT_DIR = process.cwd();
|
||||
// Output file path
|
||||
const OUTPUT_FILE = path.join(ROOT_DIR, 'docs', 'project-structure.txt');
|
||||
|
||||
// Function to check if a path is ignored by git
|
||||
function isGitIgnored(filePath) {
|
||||
try {
|
||||
// git check-ignore -q returns 0 if ignored, 1 if not
|
||||
execSync(`git check-ignore -q "${filePath}"`, {
|
||||
cwd: ROOT_DIR,
|
||||
stdio: 'ignore'
|
||||
});
|
||||
return true; // Ignored
|
||||
} catch (e) {
|
||||
return false; // Not ignored
|
||||
}
|
||||
}
|
||||
|
||||
// Function to generate tree structure
|
||||
function generateTree(dir, prefix = '', isRoot = true) {
|
||||
let structure = '';
|
||||
|
||||
// Add root directory name if it's the root
|
||||
if (isRoot) {
|
||||
structure += `${path.basename(dir)}/\n`;
|
||||
}
|
||||
|
||||
let items;
|
||||
try {
|
||||
items = fs.readdirSync(dir);
|
||||
} catch (e) {
|
||||
console.error(`Error reading directory ${dir}: ${e.message}`);
|
||||
return structure;
|
||||
}
|
||||
|
||||
// Sort items: directories first, then files
|
||||
const dirs = [];
|
||||
const files = [];
|
||||
|
||||
items.forEach(item => {
|
||||
const itemPath = path.join(dir, item);
|
||||
|
||||
// Explicitly skip .git directory and husky internal directory
|
||||
if (item === '.git' && dir === ROOT_DIR) {
|
||||
return;
|
||||
}
|
||||
if (item === '_' && path.basename(dir) === '.husky') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if ignored by git
|
||||
if (isGitIgnored(itemPath)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const stat = fs.statSync(itemPath);
|
||||
if (stat.isDirectory()) {
|
||||
dirs.push(item);
|
||||
} else {
|
||||
files.push(item);
|
||||
}
|
||||
} catch (e) {
|
||||
// Skip items we can't stat
|
||||
}
|
||||
});
|
||||
|
||||
// Sort directories and files alphabetically
|
||||
dirs.sort();
|
||||
files.sort();
|
||||
|
||||
const allItems = [...dirs, ...files];
|
||||
|
||||
allItems.forEach((item, index) => {
|
||||
const isLast = index === allItems.length - 1;
|
||||
const connector = isLast ? '└── ' : '├── ';
|
||||
const itemPath = path.join(dir, item);
|
||||
|
||||
structure += `${prefix}${connector}${item}${dirs.includes(item) ? '/' : ''}\n`;
|
||||
|
||||
// Recurse into directories
|
||||
if (dirs.includes(item)) {
|
||||
const newPrefix = prefix + (isLast ? ' ' : '│ ');
|
||||
structure += generateTree(itemPath, newPrefix, false);
|
||||
}
|
||||
});
|
||||
|
||||
return structure;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('🗺️ Generating project structure...');
|
||||
|
||||
// Ensure docs directory exists
|
||||
const docsDir = path.join(ROOT_DIR, 'docs');
|
||||
if (!fs.existsSync(docsDir)) {
|
||||
fs.mkdirSync(docsDir, { recursive: true });
|
||||
console.log('📁 Created docs directory');
|
||||
}
|
||||
|
||||
// Generate tree
|
||||
const tree = generateTree(ROOT_DIR, '', true);
|
||||
|
||||
// Write to file
|
||||
fs.writeFileSync(OUTPUT_FILE, tree);
|
||||
console.log(`✅ Project structure updated: ${OUTPUT_FILE}`);
|
||||
|
||||
} catch (err) {
|
||||
console.error(`❌ Error generating project structure: ${err.message}`);
|
||||
process.exit(1);
|
||||
}
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
#!/bin/bash
|
||||
|
||||
# 将 stderr 重定向到 stdout，避免 execute_command 因为 stderr 输出而报错
|
||||
exec 2>&1
|
||||
|
||||
set -e
|
||||
|
||||
# 获取脚本所在目录（.zscripts 目录，即 workspace-agent/.zscripts）
|
||||
# 使用 $0 获取脚本路径（兼容 sh 和 bash）
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
|
||||
# Next.js 项目路径
|
||||
NEXTJS_PROJECT_DIR="/home/z/my-project"
|
||||
|
||||
# 检查 Next.js 项目目录是否存在
|
||||
if [ ! -d "$NEXTJS_PROJECT_DIR" ]; then
|
||||
echo "❌ 错误: Next.js 项目目录不存在: $NEXTJS_PROJECT_DIR"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "🚀 开始构建 Next.js 应用和 mini-services..."
|
||||
echo "📁 Next.js 项目路径: $NEXTJS_PROJECT_DIR"
|
||||
|
||||
# 切换到 Next.js 项目目录
|
||||
cd "$NEXTJS_PROJECT_DIR" || exit 1
|
||||
|
||||
# 设置环境变量
|
||||
export NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
BUILD_DIR="/tmp/build_fullstack_$BUILD_ID"
|
||||
echo "📁 清理并创建构建目录: $BUILD_DIR"
|
||||
mkdir -p "$BUILD_DIR"
|
||||
|
||||
# 安装依赖
|
||||
echo "📦 安装依赖..."
|
||||
bun install
|
||||
|
||||
# 构建 Next.js 应用
|
||||
echo "🔨 构建 Next.js 应用..."
|
||||
bun run build
|
||||
|
||||
# 构建 mini-services
|
||||
# 检查 Next.js 项目目录下是否有 mini-services 目录
|
||||
if [ -d "$NEXTJS_PROJECT_DIR/mini-services" ]; then
|
||||
echo "🔨 构建 mini-services..."
|
||||
# 使用 workspace-agent 目录下的 mini-services 脚本
|
||||
sh "$SCRIPT_DIR/mini-services-install.sh"
|
||||
sh "$SCRIPT_DIR/mini-services-build.sh"
|
||||
|
||||
# 复制 mini-services-start.sh 到 mini-services-dist 目录
|
||||
echo " - 复制 mini-services-start.sh 到 $BUILD_DIR"
|
||||
cp "$SCRIPT_DIR/mini-services-start.sh" "$BUILD_DIR/mini-services-start.sh"
|
||||
chmod +x "$BUILD_DIR/mini-services-start.sh"
|
||||
else
|
||||
echo "ℹ️ mini-services 目录不存在，跳过"
|
||||
fi
|
||||
|
||||
# 将所有构建产物复制到临时构建目录
|
||||
echo "📦 收集构建产物到 $BUILD_DIR..."
|
||||
|
||||
# 复制 Next.js standalone 构建输出
|
||||
if [ -d ".next/standalone" ]; then
|
||||
echo " - 复制 .next/standalone"
|
||||
cp -r .next/standalone "$BUILD_DIR/next-service-dist/"
|
||||
fi
|
||||
|
||||
# 复制 Next.js 静态文件
|
||||
if [ -d ".next/static" ]; then
|
||||
echo " - 复制 .next/static"
|
||||
mkdir -p "$BUILD_DIR/next-service-dist/.next"
|
||||
cp -r .next/static "$BUILD_DIR/next-service-dist/.next/"
|
||||
fi
|
||||
|
||||
# 复制 public 目录
|
||||
if [ -d "public" ]; then
|
||||
echo " - 复制 public"
|
||||
cp -r public "$BUILD_DIR/next-service-dist/"
|
||||
fi
|
||||
|
||||
# 最后再迁移数据库到 BUILD_DIR/db
|
||||
if [ "$(ls -A ./db 2>/dev/null)" ]; then
|
||||
echo "🗄️ 检测到数据库文件，运行数据库迁移..."
|
||||
DATABASE_URL=file:$BUILD_DIR/db/custom.db bun run db:push
|
||||
echo "✅ 数据库迁移完成"
|
||||
ls -lah $BUILD_DIR/db
|
||||
else
|
||||
echo "ℹ️ db 目录为空，跳过数据库迁移"
|
||||
fi
|
||||
|
||||
# 复制 Caddyfile（如果存在）
|
||||
if [ -f "Caddyfile" ]; then
|
||||
echo " - 复制 Caddyfile"
|
||||
cp Caddyfile "$BUILD_DIR/"
|
||||
else
|
||||
echo "ℹ️ Caddyfile 不存在，跳过"
|
||||
fi
|
||||
|
||||
# 复制 start.sh 脚本
|
||||
echo " - 复制 start.sh 到 $BUILD_DIR"
|
||||
cp "$SCRIPT_DIR/start.sh" "$BUILD_DIR/start.sh"
|
||||
chmod +x "$BUILD_DIR/start.sh"
|
||||
|
||||
# 打包到 $BUILD_DIR.tar.gz
|
||||
PACKAGE_FILE="${BUILD_DIR}.tar.gz"
|
||||
echo ""
|
||||
echo "📦 打包构建产物到 $PACKAGE_FILE..."
|
||||
cd "$BUILD_DIR" || exit 1
|
||||
tar -czf "$PACKAGE_FILE" .
|
||||
cd - > /dev/null || exit 1
|
||||
|
||||
# # 清理临时目录
|
||||
# rm -rf "$BUILD_DIR"
|
||||
|
||||
echo ""
|
||||
echo "✅ 构建完成！所有产物已打包到 $PACKAGE_FILE"
|
||||
echo "📊 打包文件大小:"
|
||||
ls -lh "$PACKAGE_FILE"
|
||||
Executable
+1227
File diff suppressed because it is too large
Load Diff
Executable
+1
@@ -0,0 +1 @@
|
||||
488
|
||||
Executable
+154
@@ -0,0 +1,154 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# 获取脚本所在目录（.zscripts）
|
||||
# 使用 $0 获取脚本路径（与 build.sh 保持一致）
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
|
||||
log_step_start() {
|
||||
local step_name="$1"
|
||||
echo "=========================================="
|
||||
echo "[$(date '+%Y-%m-%d %H:%M:%S')] Starting: $step_name"
|
||||
echo "=========================================="
|
||||
export STEP_START_TIME
|
||||
STEP_START_TIME=$(date +%s)
|
||||
}
|
||||
|
||||
log_step_end() {
|
||||
local step_name="${1:-Unknown step}"
|
||||
local end_time
|
||||
end_time=$(date +%s)
|
||||
local duration=$((end_time - STEP_START_TIME))
|
||||
echo "=========================================="
|
||||
echo "[$(date '+%Y-%m-%d %H:%M:%S')] Completed: $step_name"
|
||||
echo "[LOG] Step: $step_name | Duration: ${duration}s"
|
||||
echo "=========================================="
|
||||
echo ""
|
||||
}
|
||||
|
||||
start_mini_services() {
|
||||
local mini_services_dir="$PROJECT_DIR/mini-services"
|
||||
local started_count=0
|
||||
|
||||
log_step_start "Starting mini-services"
|
||||
if [ ! -d "$mini_services_dir" ]; then
|
||||
echo "Mini-services directory not found, skipping..."
|
||||
log_step_end "Starting mini-services"
|
||||
return 0
|
||||
fi
|
||||
|
||||
echo "Found mini-services directory, scanning for sub-services..."
|
||||
|
||||
for service_dir in "$mini_services_dir"/*; do
|
||||
if [ ! -d "$service_dir" ]; then
|
||||
continue
|
||||
fi
|
||||
|
||||
local service_name
|
||||
service_name=$(basename "$service_dir")
|
||||
echo "Checking service: $service_name"
|
||||
|
||||
if [ ! -f "$service_dir/package.json" ]; then
|
||||
echo "[$service_name] No package.json found, skipping..."
|
||||
continue
|
||||
fi
|
||||
|
||||
if ! grep -q '"dev"' "$service_dir/package.json"; then
|
||||
echo "[$service_name] No dev script found, skipping..."
|
||||
continue
|
||||
fi
|
||||
|
||||
echo "Starting $service_name in background..."
|
||||
(
|
||||
cd "$service_dir"
|
||||
echo "[$service_name] Installing dependencies..."
|
||||
bun install
|
||||
echo "[$service_name] Running bun run dev..."
|
||||
exec bun run dev
|
||||
) >"$PROJECT_DIR/.zscripts/mini-service-${service_name}.log" 2>&1 &
|
||||
|
||||
local service_pid=$!
|
||||
echo "[$service_name] Started in background (PID: $service_pid)"
|
||||
echo "[$service_name] Log: $PROJECT_DIR/.zscripts/mini-service-${service_name}.log"
|
||||
disown "$service_pid" 2>/dev/null || true
|
||||
started_count=$((started_count + 1))
|
||||
done
|
||||
|
||||
echo "Mini-services startup completed. Started $started_count service(s)."
|
||||
log_step_end "Starting mini-services"
|
||||
}
|
||||
|
||||
wait_for_service() {
|
||||
local host="$1"
|
||||
local port="$2"
|
||||
local service_name="$3"
|
||||
local max_attempts="${4:-60}"
|
||||
local attempt=1
|
||||
|
||||
echo "Waiting for $service_name to be ready on $host:$port..."
|
||||
|
||||
while [ "$attempt" -le "$max_attempts" ]; do
|
||||
if curl -s --connect-timeout 2 --max-time 5 "http://$host:$port" >/dev/null 2>&1; then
|
||||
echo "$service_name is ready!"
|
||||
return 0
|
||||
fi
|
||||
|
||||
echo "Attempt $attempt/$max_attempts: $service_name not ready yet, waiting..."
|
||||
sleep 1
|
||||
attempt=$((attempt + 1))
|
||||
done
|
||||
|
||||
echo "ERROR: $service_name failed to start within $max_attempts seconds"
|
||||
return 1
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
if [ -n "${DEV_PID:-}" ] && kill -0 "$DEV_PID" >/dev/null 2>&1; then
|
||||
echo "Stopping Next.js dev server (PID: $DEV_PID)..."
|
||||
kill "$DEV_PID" >/dev/null 2>&1 || true
|
||||
fi
|
||||
}
|
||||
|
||||
trap cleanup EXIT INT TERM
|
||||
|
||||
cd "$PROJECT_DIR"
|
||||
|
||||
if ! command -v bun >/dev/null 2>&1; then
|
||||
echo "ERROR: bun is not installed or not in PATH"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
log_step_start "bun install"
|
||||
echo "[BUN] Installing dependencies..."
|
||||
bun install
|
||||
log_step_end "bun install"
|
||||
|
||||
log_step_start "bun run db:push"
|
||||
echo "[BUN] Setting up database..."
|
||||
bun run db:push
|
||||
log_step_end "bun run db:push"
|
||||
|
||||
log_step_start "Starting Next.js dev server"
|
||||
echo "[BUN] Starting development server..."
|
||||
bun run dev &
|
||||
DEV_PID=$!
|
||||
log_step_end "Starting Next.js dev server"
|
||||
|
||||
log_step_start "Waiting for Next.js dev server"
|
||||
wait_for_service "localhost" "3000" "Next.js dev server"
|
||||
log_step_end "Waiting for Next.js dev server"
|
||||
|
||||
log_step_start "Health check"
|
||||
echo "[BUN] Performing health check..."
|
||||
curl -fsS localhost:3000 >/dev/null
|
||||
echo "[BUN] Health check passed"
|
||||
log_step_end "Health check"
|
||||
|
||||
start_mini_services
|
||||
|
||||
echo "Next.js dev server is running in background (PID: $DEV_PID)."
|
||||
echo "Use 'kill $DEV_PID' to stop it."
|
||||
disown "$DEV_PID" 2>/dev/null || true
|
||||
unset DEV_PID
|
||||
Executable
+78
@@ -0,0 +1,78 @@
|
||||
#!/bin/bash
|
||||
|
||||
# 配置项
|
||||
ROOT_DIR="/home/z/my-project/mini-services"
|
||||
DIST_DIR="/tmp/build_fullstack_$BUILD_ID/mini-services-dist"
|
||||
|
||||
main() {
|
||||
echo "🚀 开始批量构建..."
|
||||
|
||||
# 检查 rootdir 是否存在
|
||||
if [ ! -d "$ROOT_DIR" ]; then
|
||||
echo "ℹ️ 目录 $ROOT_DIR 不存在，跳过构建"
|
||||
return
|
||||
fi
|
||||
|
||||
# 创建输出目录（如果不存在）
|
||||
mkdir -p "$DIST_DIR"
|
||||
|
||||
# 统计变量
|
||||
success_count=0
|
||||
fail_count=0
|
||||
|
||||
# 遍历 mini-services 目录下的所有文件夹
|
||||
for dir in "$ROOT_DIR"/*; do
|
||||
# 检查是否是目录且包含 package.json
|
||||
if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
|
||||
project_name=$(basename "$dir")
|
||||
|
||||
# 智能查找入口文件 (按优先级查找)
|
||||
entry_path=""
|
||||
for entry in "src/index.ts" "index.ts" "src/index.js" "index.js"; do
|
||||
if [ -f "$dir/$entry" ]; then
|
||||
entry_path="$dir/$entry"
|
||||
break
|
||||
fi
|
||||
done
|
||||
|
||||
if [ -z "$entry_path" ]; then
|
||||
echo "⚠️ 跳过 $project_name: 未找到入口文件 (index.ts/js)"
|
||||
continue
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "📦 正在构建: $project_name..."
|
||||
|
||||
# 使用 bun build CLI 构建
|
||||
output_file="$DIST_DIR/mini-service-$project_name.js"
|
||||
|
||||
if bun build "$entry_path" \
|
||||
--outfile "$output_file" \
|
||||
--target bun \
|
||||
--minify; then
|
||||
echo "✅ $project_name 构建成功 -> $output_file"
|
||||
success_count=$((success_count + 1))
|
||||
else
|
||||
echo "❌ $project_name 构建失败"
|
||||
fail_count=$((fail_count + 1))
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
if [ -f ./.zscripts/mini-services-start.sh ]; then
|
||||
cp ./.zscripts/mini-services-start.sh "$DIST_DIR/mini-services-start.sh"
|
||||
chmod +x "$DIST_DIR/mini-services-start.sh"
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "🎉 所有任务完成！"
|
||||
if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
|
||||
echo "✅ 成功: $success_count 个"
|
||||
if [ $fail_count -gt 0 ]; then
|
||||
echo "❌ 失败: $fail_count 个"
|
||||
fi
|
||||
fi
|
||||
}
|
||||
|
||||
main
|
||||
|
||||
Executable
+65
@@ -0,0 +1,65 @@
|
||||
#!/bin/bash
|
||||
|
||||
# 配置项
|
||||
ROOT_DIR="/home/z/my-project/mini-services"
|
||||
|
||||
main() {
|
||||
echo "🚀 开始批量安装依赖..."
|
||||
|
||||
# 检查 rootdir 是否存在
|
||||
if [ ! -d "$ROOT_DIR" ]; then
|
||||
echo "ℹ️ 目录 $ROOT_DIR 不存在，跳过安装"
|
||||
return
|
||||
fi
|
||||
|
||||
# 统计变量
|
||||
success_count=0
|
||||
fail_count=0
|
||||
failed_projects=""
|
||||
|
||||
# 遍历 mini-services 目录下的所有文件夹
|
||||
for dir in "$ROOT_DIR"/*; do
|
||||
# 检查是否是目录且包含 package.json
|
||||
if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
|
||||
project_name=$(basename "$dir")
|
||||
echo ""
|
||||
echo "📦 正在安装依赖: $project_name..."
|
||||
|
||||
# 进入项目目录并执行 bun install
|
||||
if (cd "$dir" && bun install); then
|
||||
echo "✅ $project_name 依赖安装成功"
|
||||
success_count=$((success_count + 1))
|
||||
else
|
||||
echo "❌ $project_name 依赖安装失败"
|
||||
fail_count=$((fail_count + 1))
|
||||
if [ -z "$failed_projects" ]; then
|
||||
failed_projects="$project_name"
|
||||
else
|
||||
failed_projects="$failed_projects $project_name"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
# 汇总结果
|
||||
echo ""
|
||||
echo "=================================================="
|
||||
if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
|
||||
echo "🎉 安装完成！"
|
||||
echo "✅ 成功: $success_count 个"
|
||||
if [ $fail_count -gt 0 ]; then
|
||||
echo "❌ 失败: $fail_count 个"
|
||||
echo ""
|
||||
echo "失败的项目:"
|
||||
for project in $failed_projects; do
|
||||
echo " - $project"
|
||||
done
|
||||
fi
|
||||
else
|
||||
echo "ℹ️ 未找到任何包含 package.json 的项目"
|
||||
fi
|
||||
echo "=================================================="
|
||||
}
|
||||
|
||||
main
|
||||
|
||||
Executable
+123
@@ -0,0 +1,123 @@
|
||||
#!/bin/sh
|
||||
|
||||
# 配置项
|
||||
DIST_DIR="./mini-services-dist"
|
||||
|
||||
# 存储所有子进程的 PID
|
||||
pids=""
|
||||
|
||||
# 清理函数：优雅关闭所有服务
|
||||
cleanup() {
|
||||
echo ""
|
||||
echo "🛑 正在关闭所有服务..."
|
||||
|
||||
# 发送 SIGTERM 信号给所有子进程
|
||||
for pid in $pids; do
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
|
||||
echo " 关闭进程 $pid ($service_name)..."
|
||||
kill -TERM "$pid" 2>/dev/null
|
||||
fi
|
||||
done
|
||||
|
||||
# 等待所有进程退出（最多等待 5 秒）
|
||||
sleep 1
|
||||
for pid in $pids; do
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
# 如果还在运行，等待最多 4 秒
|
||||
timeout=4
|
||||
while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
|
||||
sleep 1
|
||||
timeout=$((timeout - 1))
|
||||
done
|
||||
# 如果仍然在运行，强制关闭
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
echo " 强制关闭进程 $pid..."
|
||||
kill -KILL "$pid" 2>/dev/null
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
echo "✅ 所有服务已关闭"
|
||||
}
|
||||
|
||||
main() {
|
||||
echo "🚀 开始启动所有 mini services..."
|
||||
|
||||
# 检查 dist 目录是否存在
|
||||
if [ ! -d "$DIST_DIR" ]; then
|
||||
echo "ℹ️ 目录 $DIST_DIR 不存在"
|
||||
return
|
||||
fi
|
||||
|
||||
# 查找所有 mini-service-*.js 文件
|
||||
service_files=""
|
||||
for file in "$DIST_DIR"/mini-service-*.js; do
|
||||
if [ -f "$file" ]; then
|
||||
if [ -z "$service_files" ]; then
|
||||
service_files="$file"
|
||||
else
|
||||
service_files="$service_files $file"
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
# 计算服务文件数量
|
||||
service_count=0
|
||||
for file in $service_files; do
|
||||
service_count=$((service_count + 1))
|
||||
done
|
||||
|
||||
if [ $service_count -eq 0 ]; then
|
||||
echo "ℹ️ 未找到任何 mini service 文件"
|
||||
return
|
||||
fi
|
||||
|
||||
echo "📦 找到 $service_count 个服务，开始启动..."
|
||||
echo ""
|
||||
|
||||
# 启动每个服务
|
||||
for file in $service_files; do
|
||||
service_name=$(basename "$file" .js | sed 's/mini-service-//')
|
||||
echo "▶️ 启动服务: $service_name..."
|
||||
|
||||
# 使用 bun 运行服务（后台运行）
|
||||
bun "$file" &
|
||||
pid=$!
|
||||
if [ -z "$pids" ]; then
|
||||
pids="$pid"
|
||||
else
|
||||
pids="$pids $pid"
|
||||
fi
|
||||
|
||||
# 等待一小段时间检查进程是否成功启动
|
||||
sleep 0.5
|
||||
if ! kill -0 "$pid" 2>/dev/null; then
|
||||
echo "❌ $service_name 启动失败"
|
||||
# 从字符串中移除失败的 PID
|
||||
pids=$(echo "$pids" | sed "s/\b$pid\b//" | sed 's/ */ /g' | sed 's/^ *//' | sed 's/ *$//')
|
||||
else
|
||||
echo "✅ $service_name 已启动 (PID: $pid)"
|
||||
fi
|
||||
done
|
||||
|
||||
# 计算运行中的服务数量
|
||||
running_count=0
|
||||
for pid in $pids; do
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
running_count=$((running_count + 1))
|
||||
fi
|
||||
done
|
||||
|
||||
echo ""
|
||||
echo "🎉 所有服务已启动！共 $running_count 个服务正在运行"
|
||||
echo ""
|
||||
echo "💡 按 Ctrl+C 停止所有服务"
|
||||
echo ""
|
||||
|
||||
# 等待所有后台进程
|
||||
wait
|
||||
}
|
||||
|
||||
main
|
||||
|
||||
Executable
+126
@@ -0,0 +1,126 @@
|
||||
#!/bin/sh
|
||||
|
||||
set -e
|
||||
|
||||
# 获取脚本所在目录
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
BUILD_DIR="$SCRIPT_DIR"
|
||||
|
||||
# 存储所有子进程的 PID
|
||||
pids=""
|
||||
|
||||
# 清理函数：优雅关闭所有服务
|
||||
cleanup() {
|
||||
echo ""
|
||||
echo "🛑 正在关闭所有服务..."
|
||||
|
||||
# 发送 SIGTERM 信号给所有子进程
|
||||
for pid in $pids; do
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
|
||||
echo " 关闭进程 $pid ($service_name)..."
|
||||
kill -TERM "$pid" 2>/dev/null
|
||||
fi
|
||||
done
|
||||
|
||||
# 等待所有进程退出（最多等待 5 秒）
|
||||
sleep 1
|
||||
for pid in $pids; do
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
# 如果还在运行，等待最多 4 秒
|
||||
timeout=4
|
||||
while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
|
||||
sleep 1
|
||||
timeout=$((timeout - 1))
|
||||
done
|
||||
# 如果仍然在运行，强制关闭
|
||||
if kill -0 "$pid" 2>/dev/null; then
|
||||
echo " 强制关闭进程 $pid..."
|
||||
kill -KILL "$pid" 2>/dev/null
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
echo "✅ 所有服务已关闭"
|
||||
exit 0
|
||||
}
|
||||
|
||||
echo "🚀 开始启动所有服务..."
|
||||
echo ""
|
||||
|
||||
# 切换到构建目录
|
||||
cd "$BUILD_DIR" || exit 1
|
||||
|
||||
ls -lah
|
||||
|
||||
# 初始化数据库（如果存在）
|
||||
if [ -d "./next-service-dist/db" ] && [ "$(ls -A ./next-service-dist/db 2>/dev/null)" ] && [ -d "/db" ]; then
|
||||
echo "🗄️ 初始化数据库从 ./next-service-dist/db 到 /db..."
|
||||
cp -r ./next-service-dist/db/* /db/ 2>/dev/null || echo " ⚠️ 无法复制到 /db，跳过数据库初始化"
|
||||
echo "✅ 数据库初始化完成"
|
||||
fi
|
||||
|
||||
# 启动 Next.js 服务器
|
||||
if [ -f "./next-service-dist/server.js" ]; then
|
||||
echo "🚀 启动 Next.js 服务器..."
|
||||
cd next-service-dist/ || exit 1
|
||||
|
||||
# 设置环境变量
|
||||
export NODE_ENV=production
|
||||
export PORT=${PORT:-3000}
|
||||
export HOSTNAME=${HOSTNAME:-0.0.0.0}
|
||||
|
||||
# 后台启动 Next.js
|
||||
bun server.js &
|
||||
NEXT_PID=$!
|
||||
pids="$NEXT_PID"
|
||||
|
||||
# 等待一小段时间检查进程是否成功启动
|
||||
sleep 1
|
||||
if ! kill -0 "$NEXT_PID" 2>/dev/null; then
|
||||
echo "❌ Next.js 服务器启动失败"
|
||||
exit 1
|
||||
else
|
||||
echo "✅ Next.js 服务器已启动 (PID: $NEXT_PID, Port: $PORT)"
|
||||
fi
|
||||
|
||||
cd ../
|
||||
else
|
||||
echo "⚠️ 未找到 Next.js 服务器文件: ./next-service-dist/server.js"
|
||||
fi
|
||||
|
||||
# 启动 mini-services
|
||||
if [ -f "./mini-services-start.sh" ]; then
|
||||
echo "🚀 启动 mini-services..."
|
||||
|
||||
# 运行启动脚本（从根目录运行，脚本内部会处理 mini-services-dist 目录）
|
||||
sh ./mini-services-start.sh &
|
||||
MINI_PID=$!
|
||||
pids="$pids $MINI_PID"
|
||||
|
||||
# 等待一小段时间检查进程是否成功启动
|
||||
sleep 1
|
||||
if ! kill -0 "$MINI_PID" 2>/dev/null; then
|
||||
echo "⚠️ mini-services 可能启动失败，但继续运行..."
|
||||
else
|
||||
echo "✅ mini-services 已启动 (PID: $MINI_PID)"
|
||||
fi
|
||||
elif [ -d "./mini-services-dist" ]; then
|
||||
echo "⚠️ 未找到 mini-services 启动脚本，但目录存在"
|
||||
else
|
||||
echo "ℹ️ mini-services 目录不存在，跳过"
|
||||
fi
|
||||
|
||||
# 启动 Caddy（如果存在 Caddyfile）
|
||||
echo "🚀 启动 Caddy..."
|
||||
|
||||
# Caddy 作为前台进程运行（主进程）
|
||||
echo "✅ Caddy 已启动（前台运行）"
|
||||
echo ""
|
||||
echo "🎉 所有服务已启动！"
|
||||
echo ""
|
||||
echo "💡 按 Ctrl+C 停止所有服务"
|
||||
echo ""
|
||||
|
||||
# Caddy 作为主进程运行
|
||||
exec caddy run --config Caddyfile --adapter caddyfile
|
||||
@@ -1,96 +1,345 @@
|
||||
# Mana Loop — Agent Guide
|
||||
# Mana Loop - Project Architecture Guide
|
||||
|
||||
Browser incremental/idle game. Next.js 16 + Zustand, no backend.
|
||||
This document provides a comprehensive overview of the project architecture for AI agents working on this codebase.
|
||||
|
||||
## 🔑 Git
|
||||
---
|
||||
|
||||
## ⚠️ MANDATORY GIT WORKFLOW - MUST BE FOLLOWED
|
||||
|
||||
**Before starting ANY work, you MUST:**
|
||||
|
||||
1. **Pull the latest changes:**
|
||||
```bash
|
||||
cd /home/z/my-project && git pull origin master
|
||||
```
|
||||
|
||||
2. **Do your task** - Make all necessary code changes
|
||||
|
||||
3. **Before finishing, commit and push:**
|
||||
```bash
|
||||
cd /home/z/my-project
|
||||
git add -A
|
||||
git commit -m "descriptive message about changes"
|
||||
git push origin master
|
||||
```
|
||||
|
||||
**This workflow is ENFORCED and NON-NEGOTIABLE.** Every agent session must:
|
||||
- Start with `git pull`
|
||||
- End with `git add`, `git commit`, `git push`
|
||||
|
||||
**Git Remote:** `git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git`
|
||||
|
||||
---
|
||||
|
||||
## Project Overview
|
||||
|
||||
**Mana Loop** is an incremental/idle game built with:
|
||||
- **Framework**: Next.js 16 with App Router
|
||||
- **Language**: TypeScript 5
|
||||
- **Styling**: Tailwind CSS 4 with shadcn/ui components
|
||||
- **State Management**: Zustand with persist middleware
|
||||
- **Database**: Prisma ORM with SQLite (for persistence features)
|
||||
|
||||
## Core Game Loop
|
||||
|
||||
1. **Mana Gathering**: Click or auto-generate mana over time
|
||||
2. **Studying**: Spend mana to learn skills and spells
|
||||
3. **Combat**: Climb the Spire, defeat guardians, sign pacts
|
||||
4. **Crafting**: Enchant equipment with spell effects
|
||||
5. **Prestige**: Reset progress for permanent bonuses (Insight)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
https://n8n-gitea:tkF9HFgxL2k4cmT@gitea.tailf367e3.ts.net/Anexim/Mana-Loop.git
|
||||
```
|
||||
```bash
|
||||
git config --global user.name "n8n-gitea"
|
||||
git config --global user.email "n8n-gitea@anexim.local"
|
||||
src/
|
||||
├── app/
|
||||
│ ├── page.tsx # Main game UI (~1700 lines, single page application)
|
||||
│ ├── layout.tsx # Root layout with providers
|
||||
│ └── api/ # API routes (minimal use)
|
||||
├── components/
|
||||
│ ├── ui/ # shadcn/ui components (auto-generated)
|
||||
│ └── game/
|
||||
│ ├── index.ts # Barrel exports
|
||||
│ ├── ActionButtons.tsx # Main action buttons (Meditate, Climb, Study, etc.)
|
||||
│ ├── CalendarDisplay.tsx # Day calendar with incursion indicators
|
||||
│ ├── CraftingProgress.tsx # Design/preparation/application progress bars
|
||||
│ ├── StudyProgress.tsx # Current study progress with cancel button
|
||||
│ ├── ManaDisplay.tsx # Mana/gathering section with progress bar
|
||||
│ ├── TimeDisplay.tsx # Day/hour display with pause toggle
|
||||
│ └── tabs/ # Tab-specific components
|
||||
│ ├── index.ts # Tab component exports
|
||||
│ ├── CraftingTab.tsx # Enchantment crafting UI
|
||||
│ ├── LabTab.tsx # Skill upgrade and lab features
|
||||
│ ├── SpellsTab.tsx # Spell management and equipment spells
|
||||
│ └── SpireTab.tsx # Combat and spire climbing
|
||||
└── lib/
|
||||
├── game/
|
||||
│ ├── store.ts # Zustand store (~1650 lines, main state + tick logic)
|
||||
│ ├── computed-stats.ts # Computed stats functions (extracted utilities)
|
||||
│ ├── navigation-slice.ts # Floor navigation actions (setClimbDirection, changeFloor)
|
||||
│ ├── study-slice.ts # Study system actions (startStudying*, cancelStudy)
|
||||
│ ├── crafting-slice.ts # Equipment/enchantment logic
|
||||
│ ├── familiar-slice.ts # Familiar system actions
|
||||
│ ├── effects.ts # Unified effect computation
|
||||
│ ├── upgrade-effects.ts # Skill upgrade effect definitions
|
||||
│ ├── constants.ts # Game definitions (spells, skills, etc.)
|
||||
│ ├── skill-evolution.ts # Skill tier progression paths
|
||||
│ ├── types.ts # TypeScript interfaces
|
||||
│ ├── formatting.ts # Display formatters
|
||||
│ ├── utils.ts # Utility functions
|
||||
│ └── data/
|
||||
│ ├── equipment.ts # Equipment type definitions
|
||||
│ └── enchantment-effects.ts # Enchantment effect catalog
|
||||
└── utils.ts # General utilities (cn function)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
## Key Systems
|
||||
|
||||
```bash
|
||||
cd /home/user/repos/Mana-Loop && git pull origin master
|
||||
# ... work ...
|
||||
git add -A && git commit -m "type: desc" && git push origin master
|
||||
### 1. State Management (`store.ts`)
|
||||
|
||||
The game uses a Zustand store organized with **slice pattern** for better maintainability:
|
||||
|
||||
#### Store Slices
|
||||
- **Main Store** (`store.ts`): Core state, tick logic, and main actions
|
||||
- **Navigation Slice** (`navigation-slice.ts`): Floor navigation (setClimbDirection, changeFloor)
|
||||
- **Study Slice** (`study-slice.ts`): Study system (startStudyingSkill, startStudyingSpell, cancelStudy)
|
||||
- **Crafting Slice** (`crafting-slice.ts`): Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment)
|
||||
- **Familiar Slice** (`familiar-slice.ts`): Familiar system (addFamiliar, removeFamiliar)
|
||||
|
||||
#### Computed Stats (`computed-stats.ts`)
|
||||
Extracted utility functions for stat calculations:
|
||||
- `computeMaxMana()`, `computeRegen()`, `computeEffectiveRegen()`
|
||||
- `calcDamage()`, `calcInsight()`, `getElementalBonus()`
|
||||
- `getFloorMaxHP()`, `getFloorElement()`, `getMeditationBonus()`
|
||||
- `canAffordSpellCost()`, `deductSpellCost()`
|
||||
|
||||
```typescript
|
||||
interface GameState {
|
||||
// Time
|
||||
day: number;
|
||||
hour: number;
|
||||
paused: boolean;
|
||||
|
||||
// Mana
|
||||
rawMana: number;
|
||||
elements: Record<string, ElementState>;
|
||||
|
||||
// Combat
|
||||
currentFloor: number;
|
||||
floorHP: number;
|
||||
activeSpell: string;
|
||||
castProgress: number;
|
||||
|
||||
// Progression
|
||||
skills: Record<string, number>;
|
||||
spells: Record<string, SpellState>;
|
||||
skillUpgrades: Record<string, string[]>;
|
||||
skillTiers: Record<string, number>;
|
||||
|
||||
// Equipment
|
||||
equipmentInstances: Record<string, EquipmentInstance>;
|
||||
equippedInstances: Record<string, string | null>;
|
||||
enchantmentDesigns: EnchantmentDesign[];
|
||||
|
||||
// Prestige
|
||||
insight: number;
|
||||
prestigeUpgrades: Record<string, number>;
|
||||
signedPacts: number[];
|
||||
}
|
||||
```
|
||||
|
||||
## Session Start
|
||||
### 2. Effect System (`effects.ts`)
|
||||
|
||||
1. `docs/project-structure.txt`
|
||||
2. `docs/dependency-graph.json`
|
||||
3. `get_repo_summary` → resume in-progress or pick top todo
|
||||
4. `update_issue_status` → `ai:in-progress`
|
||||
5. Work, log with `add_comment`, then `update_issue_status` → `ai:done`
|
||||
**CRITICAL**: All stat modifications flow through the unified effect system.
|
||||
|
||||
## Labels
|
||||
```typescript
|
||||
// Effects come from two sources:
|
||||
// 1. Skill Upgrades (milestone bonuses)
|
||||
// 2. Equipment Enchantments (crafted bonuses)
|
||||
|
||||
`ai:todo` | `ai:in-progress` | `ai:review` | `ai:blocked` | `ai:done`
|
||||
|
||||
## Terminal Tool
|
||||
|
||||
Always pair `run_command` → `get_process_status` in same turn. Use `wait: 120` for long tasks.
|
||||
|
||||
## Sub-Agents
|
||||
|
||||
Use for 3+ sequential independent calls. Zero context from parent — paste everything needed.
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Stack:** Next.js 16, TS 5, Tailwind 4 + shadcn/ui, Zustand+persist, Vitest/Playwright, Bun
|
||||
- **Active stores:** `src/lib/game/stores/{game,mana,combat,prestige,discipline,ui}Store.ts`
|
||||
- **Legacy (migrating):** `src/lib/game/store/` and `store-modules/`
|
||||
- **Crafting:** 3-step flow — Design → Prepare → Apply via `crafting-actions/`
|
||||
- **Disciplines:** `data/disciplines/` + `stores/discipline-slice.ts` + `utils/discipline-math.ts`
|
||||
- **Effects:** All stat mods through `getUnifiedEffects()` — discipline bonuses enter via `computeDisciplineEffects()`
|
||||
|
||||
### Adding Effects
|
||||
1. `data/enchantment-effects.ts`
|
||||
2. `effects.ts` → `computeEquipmentEffects()`
|
||||
3. Access via `getUnifiedEffects(state)`
|
||||
|
||||
### Adding Disciplines
|
||||
1. Choose the correct data file under `data/disciplines/`:
|
||||
- `base.ts` — available to all attunements
|
||||
- `enchanter.ts` — requires Enchanter attunement
|
||||
- `invoker.ts` — requires Invoker attunement
|
||||
- `fabricator.ts` — requires Fabricator attunement
|
||||
2. Define a `DisciplineDefinition` (see `types/disciplines.ts`):
|
||||
- `statBonus.stat` must match a key consumed by `computeDisciplineEffects()`
|
||||
- Set `difficultyFactor` and `scalingFactor` to control growth rate
|
||||
- Add perks (`once`, `capped`, or `infinite`)
|
||||
3. Re-export from `data/disciplines/index.ts` so it appears in `ALL_DISCIPLINES`
|
||||
4. Add any new `statBonus.stat` keys to `discipline-effects.ts` → `computeDisciplineEffects()`
|
||||
|
||||
### Discipline Math (quick reference)
|
||||
getUnifiedEffects(state) => UnifiedEffects {
|
||||
maxManaBonus, maxManaMultiplier,
|
||||
regenBonus, regenMultiplier,
|
||||
clickManaBonus, clickManaMultiplier,
|
||||
baseDamageBonus, baseDamageMultiplier,
|
||||
attackSpeedMultiplier,
|
||||
critChanceBonus, critDamageMultiplier,
|
||||
studySpeedMultiplier,
|
||||
specials: Set<string>, // Special effect IDs
|
||||
}
|
||||
```
|
||||
StatBonus = baseValue × (XP / scalingFactor)^0.65
|
||||
ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
|
||||
|
||||
**When adding new stats**:
|
||||
1. Add to `ComputedEffects` interface in `upgrade-effects.ts`
|
||||
2. Add mapping in `computeEquipmentEffects()` in `effects.ts`
|
||||
3. Apply in the relevant game logic (tick, damage calc, etc.)
|
||||
|
||||
### 3. Combat System
|
||||
|
||||
Combat uses a **cast speed** system:
|
||||
- Each spell has `castSpeed` (casts per hour)
|
||||
- Cast progress accumulates: `progress += castSpeed * attackSpeedMultiplier * HOURS_PER_TICK`
|
||||
- When `progress >= 1`, spell is cast (cost deducted, damage dealt)
|
||||
- DPS = `damagePerCast * castsPerSecond`
|
||||
|
||||
Damage calculation order:
|
||||
1. Base spell damage
|
||||
2. Skill bonuses (combatTrain, arcaneFury, etc.)
|
||||
3. Upgrade effects (multipliers, bonuses)
|
||||
4. Special effects (Overpower, Berserker, etc.)
|
||||
5. Elemental modifiers (same element +25%, super effective +50%)
|
||||
|
||||
### 4. Crafting/Enchantment System
|
||||
|
||||
Three-stage process:
|
||||
1. **Design**: Select effects, takes time based on complexity
|
||||
2. **Prepare**: Pay mana to prepare equipment, takes time
|
||||
3. **Apply**: Apply design to equipment, costs mana per hour
|
||||
|
||||
Equipment has **capacity** that limits total enchantment power.
|
||||
|
||||
### 5. Skill Evolution System
|
||||
|
||||
Skills have 5 tiers of evolution:
|
||||
- At level 5: Choose 2 of 4 milestone upgrades
|
||||
- At level 10: Choose 2 more upgrades, then tier up
|
||||
- Each tier multiplies the skill's base effect by 10x
|
||||
|
||||
## Important Patterns
|
||||
|
||||
### Adding a New Effect
|
||||
|
||||
1. **Define in `enchantment-effects.ts`**:
|
||||
```typescript
|
||||
my_new_effect: {
|
||||
id: 'my_new_effect',
|
||||
name: 'Effect Name',
|
||||
description: '+10% something',
|
||||
category: 'combat',
|
||||
baseCapacityCost: 30,
|
||||
maxStacks: 3,
|
||||
allowedEquipmentCategories: ['caster', 'hands'],
|
||||
effect: { type: 'multiplier', stat: 'attackSpeed', value: 1.10 }
|
||||
}
|
||||
```
|
||||
- XP accrues every tick the discipline is active and mana drain is met
|
||||
- `concurrentLimit` starts at 1 and expands by 1 per 500 total XP (max +3)
|
||||
|
||||
### Adding Spells
|
||||
1. `constants/spells.ts`
|
||||
2. `data/enchantment-effects.ts`
|
||||
3. `EFFECT_RESEARCH_MAPPING`
|
||||
2. **Add stat mapping in `effects.ts`** (if new stat):
|
||||
```typescript
|
||||
// In computeEquipmentEffects()
|
||||
if (effect.stat === 'myNewStat') {
|
||||
bonuses.myNewStat = (bonuses.myNewStat || 0) + effect.value;
|
||||
}
|
||||
```
|
||||
|
||||
## Banned
|
||||
3. **Apply in game logic**:
|
||||
```typescript
|
||||
const effects = getUnifiedEffects(state);
|
||||
damage *= effects.myNewStatMultiplier;
|
||||
```
|
||||
|
||||
Lifesteal/healing, scroll crafting, ascension skills, LabTab, pause, mana types: `life`, `blood`, `wood`, `mental`, `force`
|
||||
### Adding a New Skill
|
||||
|
||||
## File Limit
|
||||
1. **Define in `constants.ts` SKILLS_DEF**
|
||||
2. **Add evolution path in `skill-evolution.ts`**
|
||||
3. **Add prerequisite checks in `store.ts`**
|
||||
4. **Update UI in `page.tsx`**
|
||||
|
||||
400 lines max (pre-commit hook enforces).
|
||||
### Adding a New Spell
|
||||
|
||||
## Mana Types
|
||||
1. **Define in `constants.ts` SPELLS_DEF**
|
||||
2. **Add spell enchantment in `enchantment-effects.ts`**
|
||||
3. **Add research skill in `constants.ts`**
|
||||
4. **Map research to effect in `EFFECT_RESEARCH_MAPPING`**
|
||||
|
||||
**Base (7):** Fire 🔥 Water 💧 Air 🌬️ Earth ⛰️ Light ☀️ Dark 🌑 Death 💀
|
||||
**Utility (1):** Transference 🔗
|
||||
**Compound (3):** Fire+Earth=Metal, Earth+Water=Sand, Fire+Air=Lightning
|
||||
**Exotic (3):** Sand+Sand+Light=Crystal, Fire+Fire+Light=Stellar, Dark+Dark+Death=Void
|
||||
## Common Pitfalls
|
||||
|
||||
1. **Forgetting to call `getUnifiedEffects()`**: Always use unified effects for stat calculations
|
||||
2. **Direct stat modification**: Never modify stats directly; use effect system
|
||||
3. **Missing tier multiplier**: Use `getTierMultiplier(skillId)` for tiered skills
|
||||
4. **Ignoring special effects**: Check `hasSpecial(effects, SPECIAL_EFFECTS.X)` for special abilities
|
||||
|
||||
## Testing Guidelines
|
||||
|
||||
- Run `bun run lint` after changes
|
||||
- Check dev server logs at `/home/z/my-project/dev.log`
|
||||
- Test with fresh game state (clear localStorage)
|
||||
|
||||
## Slice Pattern for Store Organization
|
||||
|
||||
The store uses a **slice pattern** to organize related actions into separate files. This improves maintainability and makes the codebase more modular.
|
||||
|
||||
### Creating a New Slice
|
||||
|
||||
1. **Create the slice file** (e.g., `my-feature-slice.ts`):
|
||||
```typescript
|
||||
// Define the actions interface
|
||||
export interface MyFeatureActions {
|
||||
doSomething: (param: string) => void;
|
||||
undoSomething: () => void;
|
||||
}
|
||||
|
||||
// Create the slice factory
|
||||
export function createMyFeatureSlice(
|
||||
set: StoreApi<GameStore>['setState'],
|
||||
get: StoreApi<GameStore>['getState']
|
||||
): MyFeatureActions {
|
||||
return {
|
||||
doSomething: (param: string) => {
|
||||
set((state) => {
|
||||
// Update state
|
||||
});
|
||||
},
|
||||
undoSomething: () => {
|
||||
set((state) => {
|
||||
// Update state
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
2. **Add to main store** (`store.ts`):
|
||||
```typescript
|
||||
import { createMyFeatureSlice, MyFeatureActions } from './my-feature-slice';
|
||||
|
||||
// Extend GameStore interface
|
||||
interface GameStore extends GameState, MyFeatureActions, /* other slices */ {}
|
||||
|
||||
// Spread into store creation
|
||||
const useGameStore = create<GameStore>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
...createMyFeatureSlice(set, get),
|
||||
// other slices and state
|
||||
}),
|
||||
// persist config
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### Existing Slices
|
||||
|
||||
| Slice | File | Purpose |
|
||||
|-------|------|---------|
|
||||
| Navigation | `navigation-slice.ts` | Floor navigation (setClimbDirection, changeFloor) |
|
||||
| Study | `study-slice.ts` | Study system (startStudyingSkill, startStudyingSpell, cancelStudy) |
|
||||
| Crafting | `crafting-slice.ts` | Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment) |
|
||||
| Familiar | `familiar-slice.ts` | Familiar system (addFamiliar, removeFamiliar) |
|
||||
|
||||
## File Size Guidelines
|
||||
|
||||
### Current File Sizes (After Refactoring)
|
||||
| File | Lines | Notes |
|
||||
|------|-------|-------|
|
||||
| `store.ts` | ~1650 | Core state + tick logic (reduced from 2138, 23% reduction) |
|
||||
| `page.tsx` | ~1695 | Main UI (reduced from 2554, 34% reduction) |
|
||||
| `computed-stats.ts` | ~200 | Extracted utility functions |
|
||||
| `navigation-slice.ts` | ~50 | Navigation actions |
|
||||
| `study-slice.ts` | ~100 | Study system actions |
|
||||
|
||||
### Guidelines
|
||||
- Keep `page.tsx` under 2000 lines by extracting to components (ActionButtons, ManaDisplay, etc.)
|
||||
- Keep `store.ts` under 1800 lines by extracting to slices (navigation, study, crafting, familiar)
|
||||
- Extract computed stats and utility functions to `computed-stats.ts` when >50 lines
|
||||
- Use barrel exports (`index.ts`) for clean imports
|
||||
- Follow the slice pattern for store organization (see below)
|
||||
|
||||
+313
@@ -0,0 +1,313 @@
|
||||
# Mana Loop - Codebase Audit Report
|
||||
|
||||
**Task ID:** 4
|
||||
**Date:** Audit of unimplemented effects, upgrades, and missing functionality
|
||||
|
||||
---
|
||||
|
||||
## 1. Special Effects Status
|
||||
|
||||
### SPECIAL_EFFECTS Constant (upgrade-effects.ts)
|
||||
|
||||
The `SPECIAL_EFFECTS` constant defines 32 special effect IDs. Here's the implementation status:
|
||||
|
||||
| Effect ID | Name | Status | Notes |
|
||||
|-----------|------|--------|-------|
|
||||
| `MANA_CASCADE` | Mana Cascade | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but that function is NOT called from store.ts |
|
||||
| `STEADY_STREAM` | Steady Stream | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called from tick |
|
||||
| `MANA_TORRENT` | Mana Torrent | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called |
|
||||
| `FLOW_SURGE` | Flow Surge | ❌ Missing | Not implemented anywhere |
|
||||
| `MANA_EQUILIBRIUM` | Mana Equilibrium | ❌ Missing | Not implemented |
|
||||
| `DESPERATE_WELLS` | Desperate Wells | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called |
|
||||
| `MANA_ECHO` | Mana Echo | ❌ Missing | Not implemented in gatherMana() |
|
||||
| `EMERGENCY_RESERVE` | Emergency Reserve | ❌ Missing | Not implemented in startNewLoop() |
|
||||
| `BATTLE_FURY` | Battle Fury | ⚠️ Partially Implemented | In `computeDynamicDamage()` but function not called |
|
||||
| `ARMOR_PIERCE` | Armor Pierce | ❌ Missing | Floor defense not implemented |
|
||||
| `OVERPOWER` | Overpower | ✅ Implemented | store.ts line 627 |
|
||||
| `BERSERKER` | Berserker | ✅ Implemented | store.ts line 632 |
|
||||
| `COMBO_MASTER` | Combo Master | ❌ Missing | Not implemented |
|
||||
| `ADRENALINE_RUSH` | Adrenaline Rush | ❌ Missing | Not implemented on enemy defeat |
|
||||
| `PERFECT_MEMORY` | Perfect Memory | ❌ Missing | Not implemented in cancel study |
|
||||
| `QUICK_MASTERY` | Quick Mastery | ❌ Missing | Not implemented |
|
||||
| `PARALLEL_STUDY` | Parallel Study | ⚠️ Partially Implemented | State exists but logic incomplete |
|
||||
| `STUDY_INSIGHT` | Study Insight | ❌ Missing | Not implemented |
|
||||
| `STUDY_MOMENTUM` | Study Momentum | ❌ Missing | Not implemented |
|
||||
| `KNOWLEDGE_ECHO` | Knowledge Echo | ❌ Missing | Not implemented |
|
||||
| `KNOWLEDGE_TRANSFER` | Knowledge Transfer | ❌ Missing | Not implemented |
|
||||
| `MENTAL_CLARITY` | Mental Clarity | ❌ Missing | Not implemented |
|
||||
| `STUDY_REFUND` | Study Refund | ❌ Missing | Not implemented |
|
||||
| `FREE_STUDY` | Free Study | ❌ Missing | Not implemented |
|
||||
| `MIND_PALACE` | Mind Palace | ❌ Missing | Not implemented |
|
||||
| `STUDY_RUSH` | Study Rush | ❌ Missing | Not implemented |
|
||||
| `CHAIN_STUDY` | Chain Study | ❌ Missing | Not implemented |
|
||||
| `ELEMENTAL_HARMONY` | Elemental Harmony | ❌ Missing | Not implemented |
|
||||
| `DEEP_STORAGE` | Deep Storage | ❌ Missing | Not implemented |
|
||||
| `DOUBLE_CRAFT` | Double Craft | ❌ Missing | Not implemented |
|
||||
| `ELEMENTAL_RESONANCE` | Elemental Resonance | ❌ Missing | Not implemented |
|
||||
| `PURE_ELEMENTS` | Pure Elements | ❌ Missing | Not implemented |
|
||||
|
||||
**Summary:** 2 fully implemented, 6 partially implemented (function exists but not called), 24 not implemented.
|
||||
|
||||
---
|
||||
|
||||
## 2. Enchantment Effects Status
|
||||
|
||||
### Equipment Enchantment Effects (enchantment-effects.ts)
|
||||
|
||||
The following effect types are defined:
|
||||
|
||||
| Effect Type | Status | Notes |
|
||||
|-------------|--------|-------|
|
||||
| **Spell Effects** (`type: 'spell'`) | ✅ Working | Spells granted via `getSpellsFromEquipment()` |
|
||||
| **Bonus Effects** (`type: 'bonus'`) | ✅ Working | Applied in `computeEquipmentEffects()` |
|
||||
| **Multiplier Effects** (`type: 'multiplier'`) | ✅ Working | Applied in `computeEquipmentEffects()` |
|
||||
| **Special Effects** (`type: 'special'`) | ⚠️ Tracked Only | Added to `specials` Set but NOT applied in game logic |
|
||||
|
||||
### Special Enchantment Effects Not Applied:
|
||||
|
||||
| Effect ID | Description | Issue |
|
||||
|-----------|-------------|-------|
|
||||
| `spellEcho10` | 10% chance cast twice | Tracked but not implemented in combat |
|
||||
| `lifesteal5` | 5% damage as mana | Tracked but not implemented in combat |
|
||||
| `overpower` | +50% damage at 80% mana | Tracked but separate from skill upgrade version |
|
||||
|
||||
**Location of Issue:**
|
||||
```typescript
|
||||
// effects.ts line 58-60
|
||||
} else if (effect.type === 'special' && effect.specialId) {
|
||||
specials.add(effect.specialId);
|
||||
}
|
||||
// Effect is tracked but never used in combat/damage calculations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Skill Effects Status
|
||||
|
||||
### SKILLS_DEF Analysis (constants.ts)
|
||||
|
||||
Skills with direct effects that should apply per level:
|
||||
|
||||
| Skill | Effect | Status |
|
||||
|-------|--------|--------|
|
||||
| `manaWell` | +100 max mana per level | ✅ Implemented |
|
||||
| `manaFlow` | +1 regen/hr per level | ✅ Implemented |
|
||||
| `elemAttune` | +50 elem mana cap | ✅ Implemented |
|
||||
| `manaOverflow` | +25% click mana | ✅ Implemented |
|
||||
| `quickLearner` | +10% study speed | ✅ Implemented |
|
||||
| `focusedMind` | -5% study cost | ✅ Implemented |
|
||||
| `meditation` | 2.5x regen after 4hrs | ✅ Implemented |
|
||||
| `knowledgeRetention` | +20% progress saved | ⚠️ Partially Implemented |
|
||||
| `enchanting` | Unlocks designs | ✅ Implemented |
|
||||
| `efficientEnchant` | -5% capacity cost | ⚠️ Not verified |
|
||||
| `disenchanting` | 20% mana recovery | ⚠️ Not verified |
|
||||
| `enchantSpeed` | -10% enchant time | ⚠️ Not verified |
|
||||
| `scrollCrafting` | Create scrolls | ❌ Not implemented |
|
||||
| `essenceRefining` | +10% effect power | ⚠️ Not verified |
|
||||
| `effCrafting` | -10% craft time | ⚠️ Not verified |
|
||||
| `fieldRepair` | +15% repair | ❌ Repair not implemented |
|
||||
| `elemCrafting` | +25% craft output | ✅ Implemented |
|
||||
| `manaTap` | +1 mana/click | ✅ Implemented |
|
||||
| `manaSurge` | +3 mana/click | ✅ Implemented |
|
||||
| `manaSpring` | +2 regen | ✅ Implemented |
|
||||
| `deepTrance` | 3x after 6hrs | ✅ Implemented |
|
||||
| `voidMeditation` | 5x after 8hrs | ✅ Implemented |
|
||||
| `insightHarvest` | +10% insight | ✅ Implemented |
|
||||
| `temporalMemory` | Keep spells | ✅ Implemented |
|
||||
| `guardianBane` | +20% vs guardians | ⚠️ Tracked but not verified |
|
||||
|
||||
---
|
||||
|
||||
## 4. Missing Implementations
|
||||
|
||||
### 4.1 Dynamic Effect Functions Not Called
|
||||
|
||||
The following functions exist in `upgrade-effects.ts` but are NOT called from `store.ts`:
|
||||
|
||||
```typescript
|
||||
// upgrade-effects.ts - EXISTS but NOT USED
|
||||
export function computeDynamicRegen(
|
||||
effects: ComputedEffects,
|
||||
baseRegen: number,
|
||||
maxMana: number,
|
||||
currentMana: number,
|
||||
incursionStrength: number
|
||||
): number { ... }
|
||||
|
||||
export function computeDynamicDamage(
|
||||
effects: ComputedEffects,
|
||||
baseDamage: number,
|
||||
floorHPPct: number,
|
||||
currentMana: number,
|
||||
maxMana: number,
|
||||
consecutiveHits: number
|
||||
): number { ... }
|
||||
```
|
||||
|
||||
**Where it should be called:**
|
||||
- `store.ts` tick() function around line 414 for regen
|
||||
- `store.ts` tick() function around line 618 for damage
|
||||
|
||||
### 4.2 Missing Combat Special Effects
|
||||
|
||||
Location: `store.ts` tick() combat section (lines 510-760)
|
||||
|
||||
Missing implementations:
|
||||
```typescript
|
||||
// BATTLE_FURY - +10% damage per consecutive hit
|
||||
if (hasSpecial(effects, SPECIAL_EFFECTS.BATTLE_FURY)) {
|
||||
// Need to track consecutiveHits in state
|
||||
}
|
||||
|
||||
// ARMOR_PIERCE - Ignore 10% floor defense
|
||||
// Floor defense not implemented in game
|
||||
|
||||
// COMBO_MASTER - Every 5th attack deals 3x damage
|
||||
if (hasSpecial(effects, SPECIAL_EFFECTS.COMBO_MASTER)) {
|
||||
// Need to track hitCount in state
|
||||
}
|
||||
|
||||
// ADRENALINE_RUSH - Restore 5% mana on kill
|
||||
// Should be added after floorHP <= 0 check
|
||||
```
|
||||
|
||||
### 4.3 Missing Study Special Effects
|
||||
|
||||
Location: `store.ts` tick() study section (lines 440-485)
|
||||
|
||||
Missing implementations:
|
||||
```typescript
|
||||
// MENTAL_CLARITY - +10% study speed when mana > 75%
|
||||
// STUDY_RUSH - First hour is 2x speed
|
||||
// STUDY_REFUND - 25% mana back on completion
|
||||
// KNOWLEDGE_ECHO - 10% instant study chance
|
||||
// STUDY_MOMENTUM - +5% speed per consecutive hour
|
||||
```
|
||||
|
||||
### 4.4 Missing Loop/Click Effects
|
||||
|
||||
Location: `store.ts` gatherMana() and startNewLoop()
|
||||
|
||||
```typescript
|
||||
// gatherMana() - MANA_ECHO
|
||||
// 10% chance to gain double mana from clicks
|
||||
if (hasSpecial(effects, SPECIAL_EFFECTS.MANA_ECHO) && Math.random() < 0.1) {
|
||||
cm *= 2;
|
||||
}
|
||||
|
||||
// startNewLoop() - EMERGENCY_RESERVE
|
||||
// Keep 10% max mana when starting new loop
|
||||
if (hasSpecial(effects, SPECIAL_EFFECTS.EMERGENCY_RESERVE)) {
|
||||
newState.rawMana = maxMana * 0.1;
|
||||
}
|
||||
```
|
||||
|
||||
### 4.5 Parallel Study Incomplete
|
||||
|
||||
`parallelStudyTarget` exists in state but the logic is not fully implemented in tick():
|
||||
- State field exists (line 203)
|
||||
- No tick processing for parallel study
|
||||
- UI may show it but actual progress not processed
|
||||
|
||||
---
|
||||
|
||||
## 5. Balance Concerns
|
||||
|
||||
### 5.1 Weak Upgrades
|
||||
|
||||
| Upgrade | Issue | Suggestion |
|
||||
|---------|-------|------------|
|
||||
| `manaThreshold` | +20% mana for -10% regen is a net negative early | Change to +30% mana for -5% regen |
|
||||
| `manaOverflow` | +25% click mana at 5 levels is only +5%/level | Increase to +10% per level |
|
||||
| `fieldRepair` | Repair system not implemented | Remove or implement repair |
|
||||
| `scrollCrafting` | Scroll system not implemented | Remove or implement scrolls |
|
||||
|
||||
### 5.2 Tier Scaling Issues
|
||||
|
||||
From `skill-evolution.ts`, tier multipliers are 10x per tier:
|
||||
- Tier 1: multiplier 1
|
||||
- Tier 2: multiplier 10
|
||||
- Tier 3: multiplier 100
|
||||
- Tier 4: multiplier 1000
|
||||
- Tier 5: multiplier 10000
|
||||
|
||||
This creates massive power jumps that may trivialize content when tiering up.
|
||||
|
||||
### 5.3 Special Effect Research Costs
|
||||
|
||||
Research skills for effects are expensive but effects may not be implemented:
|
||||
- `researchSpecialEffects` costs 500 mana + 10 hours study
|
||||
- Effects like `spellEcho10` are tracked but not applied
|
||||
- Player invests resources for non-functional upgrades
|
||||
|
||||
---
|
||||
|
||||
## 6. Critical Issues
|
||||
|
||||
### 6.1 computeDynamicRegen Not Used
|
||||
|
||||
**File:** `computed-stats.ts` lines 210-225
|
||||
|
||||
The function exists but only applies incursion penalty. It should call the more comprehensive `computeDynamicRegen` from `upgrade-effects.ts` that handles:
|
||||
- Mana Cascade
|
||||
- Mana Torrent
|
||||
- Desperate Wells
|
||||
- Steady Stream
|
||||
|
||||
### 6.2 No Consecutive Hit Tracking
|
||||
|
||||
`BATTLE_FURY` and `COMBO_MASTER` require tracking consecutive hits, but this state doesn't exist. Need:
|
||||
```typescript
|
||||
// In GameState
|
||||
consecutiveHits: number;
|
||||
totalHitsThisLoop: number;
|
||||
```
|
||||
|
||||
### 6.3 Enchantment Special Effects Not Applied
|
||||
|
||||
The `specials` Set is populated but never checked in combat for enchantment-specific effects like:
|
||||
- `lifesteal5`
|
||||
- `spellEcho10`
|
||||
|
||||
---
|
||||
|
||||
## 7. Recommendations
|
||||
|
||||
### Priority 1 - Core Effects
|
||||
1. Call `computeDynamicRegen()` from tick() instead of inline calculation
|
||||
2. Call `computeDynamicDamage()` from combat section
|
||||
3. Implement MANA_ECHO in gatherMana()
|
||||
4. Implement EMERGENCY_RESERVE in startNewLoop()
|
||||
|
||||
### Priority 2 - Combat Effects
|
||||
1. Add `consecutiveHits` to GameState
|
||||
2. Implement BATTLE_FURY damage scaling
|
||||
3. Implement COMBO_MASTER every 5th hit
|
||||
4. Implement ADRENALINE_RUSH on kill
|
||||
|
||||
### Priority 3 - Study Effects
|
||||
1. Implement MENTAL_CLARITY conditional speed
|
||||
2. Implement STUDY_RUSH first hour bonus
|
||||
3. Implement STUDY_REFUND on completion
|
||||
4. Implement KNOWLEDGE_ECHO instant chance
|
||||
|
||||
### Priority 4 - Missing Systems
|
||||
1. Implement or remove `scrollCrafting` skill
|
||||
2. Implement or remove `fieldRepair` skill
|
||||
3. Complete parallel study tick processing
|
||||
4. Implement floor defense for ARMOR_PIERCE
|
||||
|
||||
---
|
||||
|
||||
## 8. Files Affected
|
||||
|
||||
| File | Changes Needed |
|
||||
|------|----------------|
|
||||
| `src/lib/game/store.ts` | Call dynamic effect functions, implement specials |
|
||||
| `src/lib/game/computed-stats.ts` | Integrate with upgrade-effects dynamic functions |
|
||||
| `src/lib/game/types.ts` | Add consecutiveHits to GameState |
|
||||
| `src/lib/game/skill-evolution.ts` | Consider removing unimplementable upgrades |
|
||||
|
||||
---
|
||||
|
||||
**End of Audit Report**
|
||||
Executable → Regular
+65
-9
@@ -1,20 +1,76 @@
|
||||
FROM node:20-alpine AS base
|
||||
# Mana Loop - Next.js Game Docker Image
|
||||
|
||||
FROM node:20-alpine AS builder
|
||||
WORKDIR /app
|
||||
RUN apk add --no-cache libc6-compat openssl
|
||||
RUN npm install -g bun
|
||||
|
||||
# Install dependencies
|
||||
RUN apk add --no-cache libc6-compat openssl
|
||||
|
||||
# Install bun
|
||||
RUN npm install -g bun
|
||||
|
||||
# Copy package files first for better caching
|
||||
COPY package.json bun.lockb* ./
|
||||
COPY prisma ./prisma/
|
||||
|
||||
# Install dependencies
|
||||
COPY package.json bun.lock* bun.lockb* ./
|
||||
RUN bun install --frozen-lockfile
|
||||
# Copy source
|
||||
|
||||
# Copy the rest of the application
|
||||
COPY . .
|
||||
|
||||
# Set environment variables for build
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
ENV NODE_ENV=production
|
||||
ENV DATABASE_URL="file:./dev.db"
|
||||
|
||||
# Generate Prisma client
|
||||
RUN bunx prisma generate --schema=./prisma/schema.prisma
|
||||
|
||||
# Build the application
|
||||
RUN bun run build
|
||||
|
||||
# Production image
|
||||
FROM node:20-alpine AS runner
|
||||
WORKDIR /app
|
||||
|
||||
# Install openssl for Prisma
|
||||
RUN apk add --no-cache openssl
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
RUN bun run build
|
||||
ENV DATABASE_URL="file:./data/dev.db"
|
||||
|
||||
# Create non-root user for security
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
# Create data directory for SQLite
|
||||
RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
|
||||
|
||||
# Copy necessary files from builder
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder /app/.next/standalone ./
|
||||
COPY --from=builder /app/.next/static ./.next/static
|
||||
COPY --from=builder /app/prisma ./prisma
|
||||
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
|
||||
COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
|
||||
|
||||
# Set correct ownership
|
||||
RUN chown -R nextjs:nodejs /app
|
||||
|
||||
# Switch to non-root user
|
||||
USER nextjs
|
||||
|
||||
# Expose port
|
||||
EXPOSE 3000
|
||||
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME=0.0.0.0
|
||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
# Health check
|
||||
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
|
||||
CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
|
||||
CMD ["bun", "run", "start"]
|
||||
|
||||
# Start the server
|
||||
CMD ["node", "server.js"]
|
||||
|
||||
@@ -1,126 +1,85 @@
|
||||
# Mana Loop
|
||||
|
||||
<p align="center">
|
||||
<img src="public/logo.svg" alt="Mana Loop Logo" width="200" />
|
||||
<br />
|
||||
<em>An incremental/idle game about climbing a magical spire, mastering skills, and uncovering ancient secrets.</em>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://gitea.tailf367e3.ts.net/Anexim/Mana-Loop">Repository</a> ·
|
||||
<a href="#getting-started">Getting Started</a> ·
|
||||
<a href="#game-systems">Game Systems</a> ·
|
||||
<a href="#contributing">Contributing</a> ·
|
||||
<a href="#deployment">Deployment</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://img.shields.io/badge/version-0.2.0-blue" alt="Version" />
|
||||
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
|
||||
<img src="https://img.shields.io/badge/Next.js-16.1.1-black" alt="Next.js" />
|
||||
<img src="https://img.shields.io/badge/TypeScript-5-blue" alt="TypeScript" />
|
||||
<img src="https://img.shields.io/badge/React-19-61DAFB" alt="React" />
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Features](#features)
|
||||
- [Tech Stack](#tech-stack)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Project Structure](#project-structure)
|
||||
- [Game Systems](#game-systems)
|
||||
- [Deployment](#deployment)
|
||||
- [Contributing](#contributing)
|
||||
- [Banned Content](#banned-content)
|
||||
- [License](#license)
|
||||
- [Acknowledgments](#acknowledgments)
|
||||
|
||||
---
|
||||
An incremental/idle game about climbing a magical spire, mastering skills, and uncovering the secrets of an ancient tower.
|
||||
|
||||
## Overview
|
||||
|
||||
**Mana Loop** is a browser-based incremental/idle game where players gather mana, master skills, climb a mysterious 100-floor spire, craft enchanted equipment, and summon magical golems. The game features a unique time-loop prestige system (Insight) that provides permanent progression bonuses across playthroughs.
|
||||
**Mana Loop** is a browser-based incremental game where players gather mana, study skills and spells, climb the floors of a mysterious spire, and craft enchanted equipment. The game features a prestige system (Insight) that provides permanent progression bonuses across playthroughs.
|
||||
|
||||
### Core Game Loop
|
||||
### The Game Loop
|
||||
|
||||
1. **Gather Mana** - Click to collect mana or let it regenerate automatically (14 total mana types)
|
||||
2. **Study Skills & Spells** - 20+ skills with 5-tier evolution system and milestone upgrades
|
||||
3. **Climb the Spire** - Battle through 100 procedurally-generated floors, defeat guardians, sign pacts
|
||||
4. **Craft & Enchant** - 3-stage equipment enchantment system with capacity limits
|
||||
5. **Summon Golems** - Magical constructs that fight alongside you (4 base + 6 hybrid types)
|
||||
6. **Prestige (Loop)** - Reset progress for Insight currency, gain permanent bonuses
|
||||
1. **Gather Mana** - Click to collect mana or let it regenerate automatically
|
||||
2. **Study Skills & Spells** - Spend mana to learn new abilities and unlock upgrades
|
||||
3. **Climb the Spire** - Battle through floors, defeat guardians, and sign pacts for power
|
||||
4. **Craft Equipment** - Enchant your gear with powerful effects
|
||||
5. **Prestige** - Reset for Insight, gaining permanent bonuses
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
### 🔮 Mana System
|
||||
- **14 Mana Types**: 7 base elements + 1 utility + 3 compound + 3 exotic
|
||||
- Elemental conversion, regeneration mechanics, and meditation bonuses
|
||||
- Mana types: Fire, Water, Air, Earth, Light, Dark, Death (base), Transference (utility), Metal, Sand, Lightning (compound), Crystal, Stellar, Void (exotic)
|
||||
### Mana Gathering & Management
|
||||
- Click-based mana collection with automatic regeneration
|
||||
- Elemental mana system with five elements (Fire, Water, Earth, Air, Void)
|
||||
- Mana conversion between raw and elemental forms
|
||||
- Meditation system for boosted regeneration
|
||||
|
||||
### 📜 Skill & Spell System
|
||||
- 20+ skills across multiple categories (mana, study, enchanting, golemancy)
|
||||
### Skill Progression with Tier Evolution
|
||||
- 20+ skills across multiple categories (mana, combat, enchanting, familiar)
|
||||
- 5-tier evolution system for each skill
|
||||
- Milestone upgrades at levels 5 and 10 per tier
|
||||
- Milestone upgrades at levels 5 and 10 for each tier
|
||||
- Unique special effects unlocked through skill upgrades
|
||||
|
||||
### ⚔️ Combat & Spire
|
||||
- Cast-speed based combat system
|
||||
- Multi-spell support from equipped weapons
|
||||
- 100-floor spire with elemental themes
|
||||
- Floor guardians with unique mechanics and pacts
|
||||
- Golem allies that deal automatic damage each tick
|
||||
|
||||
### 🛡️ Equipment & Enchanting
|
||||
- 3-stage enchantment process: Design → Prepare → Apply
|
||||
### Equipment Crafting & Enchanting
|
||||
- 3-stage enchantment process (Design → Prepare → Apply)
|
||||
- Equipment capacity system limiting total enchantment power
|
||||
- Enchantment effects: stat bonuses, multipliers, spell grants
|
||||
- Disenchanting to recover mana (only in Prepare stage)
|
||||
- Weapon/armor slots with 2-handed weapon support
|
||||
- Enchantment effects including stat bonuses, multipliers, and spell grants
|
||||
- Disenchanting to recover mana from unwanted enchantments
|
||||
|
||||
### 🤖 Golemancy System
|
||||
- Summon magical constructs (Earth, Steel, Crystal, Sand + 6 hybrid types)
|
||||
- Golem slots unlock every 2 Fabricator levels (max 5 slots at Level 10)
|
||||
- Hybrid golems require Enchanter 5 + Fabricator 5
|
||||
- Golem maintenance costs and stat upgrades via skills
|
||||
### Combat System
|
||||
- Cast speed-based spell casting
|
||||
- Multi-spell support from equipped weapons
|
||||
- Elemental damage bonuses and effectiveness
|
||||
- Floor guardians with unique boons and pacts
|
||||
|
||||
### 🔄 Prestige (Insight)
|
||||
- Reset progress for permanent Insight currency
|
||||
### Familiar System
|
||||
- Collect and train magical companions
|
||||
- Familiars provide passive bonuses and active abilities
|
||||
- Growth and evolution mechanics
|
||||
|
||||
### Floor Navigation & Guardian Battles
|
||||
- Procedurally generated spire floors
|
||||
- Elemental floor themes affecting combat
|
||||
- Guardian bosses with unique mechanics
|
||||
- Pact system for permanent power boosts
|
||||
|
||||
### Prestige System (Insight)
|
||||
- Reset progress for permanent bonuses
|
||||
- Insight upgrades across multiple categories
|
||||
- Signed pacts and attunements persist through prestige
|
||||
- Three attunement classes: Enchanter (Transference), Invoker (Spells), Fabricator (Golems/Equipment)
|
||||
- Signed pacts persist through prestige
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Technology | Version | Purpose |
|
||||
|------------|---------|---------|
|
||||
| **Next.js** | ^16.1.1 | Full-stack framework (App Router) |
|
||||
| **React** | ^19.0.0 | UI library |
|
||||
| **TypeScript** | ^5 | Type-safe development |
|
||||
| **Tailwind CSS** | ^4 | Utility-first styling |
|
||||
| **shadcn/ui** | Radix-based | Reusable UI components |
|
||||
| **Zustand** | ^5.0.6 | Client state management (with persist) |
|
||||
| **Prisma ORM** | ^6.11.1 | Database abstraction (SQLite) |
|
||||
| **Bun** | Latest | JavaScript runtime & package manager |
|
||||
| **Vitest** | ^4.1.2 | Unit testing framework |
|
||||
| **ESLint** | ^9 | Code linting |
|
||||
| **@tanstack/react-query** | ^5.82.0 | Data fetching/caching |
|
||||
| **Framer Motion** | ^12.23.2 | Animation library |
|
||||
| Technology | Purpose |
|
||||
|------------|---------|
|
||||
| **Next.js 16** | Full-stack framework with App Router |
|
||||
| **TypeScript 5** | Type-safe development |
|
||||
| **Tailwind CSS 4** | Utility-first styling |
|
||||
| **shadcn/ui** | Reusable UI components |
|
||||
| **Zustand** | Client state management with persistence |
|
||||
| **Prisma ORM** | Database abstraction (SQLite) |
|
||||
| **Bun** | JavaScript runtime and package manager |
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- **Bun** runtime (recommended) or Node.js 18+
|
||||
- **SQLite** (for local development, included with Prisma)
|
||||
- Git
|
||||
|
||||
- **Node.js** 18+ or **Bun** runtime
|
||||
- **npm**, **yarn**, or **bun** package manager
|
||||
|
||||
### Installation
|
||||
|
||||
@@ -129,10 +88,9 @@
|
||||
git clone git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git
|
||||
cd Mana-Loop
|
||||
|
||||
# Install dependencies (using Bun - recommended)
|
||||
# Install dependencies
|
||||
bun install
|
||||
|
||||
# Or using npm
|
||||
# or
|
||||
npm install
|
||||
|
||||
# Set up the database
|
||||
@@ -144,7 +102,7 @@ npm run db:push
|
||||
### Development
|
||||
|
||||
```bash
|
||||
# Start the development server (runs on port 3000)
|
||||
# Start the development server
|
||||
bun run dev
|
||||
# or
|
||||
npm run dev
|
||||
@@ -152,152 +110,117 @@ npm run dev
|
||||
|
||||
The game will be available at `http://localhost:3000`.
|
||||
|
||||
### Available Scripts
|
||||
### Other Commands
|
||||
|
||||
| Script | Description |
|
||||
|--------|-------------|
|
||||
| `dev` | Start Next.js development server with logging |
|
||||
| `build` | Build for production (outputs to `.next/standalone`) |
|
||||
| `start` | Start production server (requires build first) |
|
||||
| `lint` | Run ESLint |
|
||||
| `test` | Run Vitest tests |
|
||||
| `test:coverage` | Run tests with coverage report |
|
||||
| `db:push` | Push Prisma schema to database |
|
||||
| `db:generate` | Generate Prisma client |
|
||||
| `db:migrate` | Run database migrations |
|
||||
| `db:reset` | Reset database |
|
||||
```bash
|
||||
# Run linting
|
||||
bun run lint
|
||||
|
||||
# Build for production
|
||||
bun run build
|
||||
|
||||
# Start production server
|
||||
bun run start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
Mana-Loop/
|
||||
├── src/ # Application source code
|
||||
│ ├── app/ # Next.js App Router
|
||||
│ │ ├── layout.tsx # Root layout (metadata, fonts, providers)
|
||||
│ │ ├── page.tsx # Main game UI (~583 lines)
|
||||
│ │ ├── globals.css # Global styles
|
||||
│ │ └── api/ # API routes (minimal)
|
||||
│ ├── components/ # React components
|
||||
│ │ ├── ui/ # shadcn/ui components (20+ components)
|
||||
│ │ └── game/ # Game-specific components
|
||||
│ │ ├── tabs/ # Tab components (SpireTab, SkillsTab, etc.)
|
||||
│ │ ├── ManaDisplay.tsx, ActionButtons.tsx, TimeDisplay.tsx
|
||||
│ │ └── crafting/, debug/, shared/, stats/ subdirectories
|
||||
│ ├── hooks/ # Custom React hooks (use-mobile, use-toast)
|
||||
│ ├── lib/ # Utility libraries
|
||||
│ │ ├── game/ # Core game logic
|
||||
│ │ │ ├── store.ts # Main Zustand store (~2862 lines)
|
||||
│ │ │ ├── crafting-slice.ts, study-slice.ts, navigation-slice.ts
|
||||
│ │ │ ├── effects.ts, upgrade-effects.ts
|
||||
│ │ │ ├── skill-evolution.ts (~3400 lines)
|
||||
│ │ │ ├── constants/ # Game definitions (elements, spells, skills)
|
||||
│ │ │ ├── data/ # Game data (equipment, golems, recipes)
|
||||
│ │ │ └── __tests__/ # Test files for game logic
|
||||
│ │ └── db.ts, utils.ts
|
||||
│ └── test/ # Test setup
|
||||
├── prisma/ # Database schema and migrations
|
||||
│ └── schema.prisma # SQLite schema
|
||||
├── public/ # Static assets (logo.svg, robots.txt)
|
||||
├── docs/ # Project documentation
|
||||
│ ├── AGENTS.md # Comprehensive architecture guide
|
||||
│ ├── GAME_BRIEFING.md # Game design document
|
||||
│ └── task/ # Task tracking documentation
|
||||
├── .next/ # Next.js build output (generated)
|
||||
├── node_modules/ # Dependencies (generated)
|
||||
├── Configuration Files:
|
||||
│ ├── package.json # Project metadata and scripts
|
||||
│ ├── tsconfig.json # TypeScript configuration
|
||||
│ ├── next.config.ts # Next.js config (standalone output)
|
||||
│ ├── vitest.config.ts # Vitest test configuration
|
||||
│ ├── eslint.config.mjs # ESLint configuration
|
||||
│ ├── Dockerfile # Docker multi-stage build
|
||||
│ ├── docker-compose.yml # Docker Compose setup
|
||||
│ ├── Caddyfile # Reverse proxy configuration
|
||||
│ └── .gitea/workflows/ # Gitea Actions CI/CD pipeline
|
||||
└── README.md # This file
|
||||
src/
|
||||
├── app/
|
||||
│ ├── page.tsx # Main game UI (single-page application)
|
||||
│ ├── layout.tsx # Root layout with providers
|
||||
│ └── api/ # API routes
|
||||
├── components/
|
||||
│ ├── ui/ # shadcn/ui components
|
||||
│ └── game/ # Game-specific components
|
||||
│ ├── tabs/ # Tab-based UI components
|
||||
│ │ ├── CraftingTab.tsx
|
||||
│ │ ├── LabTab.tsx
|
||||
│ │ ├── SpellsTab.tsx
|
||||
│ │ ├── SpireTab.tsx
|
||||
│ │ └── FamiliarTab.tsx
|
||||
│ ├── ManaDisplay.tsx
|
||||
│ ├── TimeDisplay.tsx
|
||||
│ ├── ActionButtons.tsx
|
||||
│ └── ...
|
||||
└── lib/
|
||||
├── game/
|
||||
│ ├── store.ts # Zustand store (state + actions)
|
||||
│ ├── effects.ts # Unified effect computation
|
||||
│ ├── upgrade-effects.ts # Skill upgrade definitions
|
||||
│ ├── skill-evolution.ts # Tier progression paths
|
||||
│ ├── constants.ts # Game data definitions
|
||||
│ ├── computed-stats.ts # Stat calculation functions
|
||||
│ ├── crafting-slice.ts # Equipment/enchantment actions
|
||||
│ ├── familiar-slice.ts # Familiar system actions
|
||||
│ ├── navigation-slice.ts # Floor navigation actions
|
||||
│ ├── study-slice.ts # Study system actions
|
||||
│ ├── types.ts # TypeScript interfaces
|
||||
│ ├── formatting.ts # Display formatters
|
||||
│ ├── utils.ts # Utility functions
|
||||
│ └── data/
|
||||
│ ├── equipment.ts # Equipment definitions
|
||||
│ ├── enchantment-effects.ts # Enchantment catalog
|
||||
│ ├── familiars.ts # Familiar definitions
|
||||
│ ├── crafting-recipes.ts # Crafting recipes
|
||||
│ ├── achievements.ts # Achievement definitions
|
||||
│ └── loot-drops.ts # Loot drop tables
|
||||
└── utils.ts # General utilities
|
||||
```
|
||||
|
||||
For detailed architecture patterns and coding guidelines, see [AGENTS.md](./docs/AGENTS.md).
|
||||
For detailed architecture documentation, see [AGENTS.md](./AGENTS.md).
|
||||
|
||||
---
|
||||
|
||||
## Game Systems
|
||||
## Game Systems Overview
|
||||
|
||||
### Mana System
|
||||
The core resource of the game with 14 distinct types organized in a hierarchy:
|
||||
- **Base Elements (7)**: Fire, Water, Air, Earth, Light, Dark, Death
|
||||
- **Utility (1)**: Transference (Enchanter attunement)
|
||||
- **Compound (3)**: Metal (Fire+Earth), Sand (Earth+Water), Lightning (Fire+Air)
|
||||
- **Exotic (3)**: Crystal (Sand+Sand+Light), Stellar (Fire+Fire+Light), Void (Dark+Dark+Death)
|
||||
The core resource of the game. Mana is gathered manually or automatically and used for studying skills, casting spells, and crafting.
|
||||
|
||||
**Key Files**: `src/lib/game/store.ts`, `src/lib/game/constants/elements.ts`
|
||||
**Key Files:**
|
||||
- `store.ts` - Mana state and actions
|
||||
- `computed-stats.ts` - Mana calculations
|
||||
|
||||
### Skill Evolution System
|
||||
Each skill progresses through 5 tiers with upgrades at levels 5 and 10 per tier:
|
||||
- **Tier 1**: Basic functionality
|
||||
- **Tier 2-5**: Unlock new mechanics and bonuses
|
||||
- **Evolution Paths**: Defined in `src/lib/game/skill-evolution.ts` (~3400 lines)
|
||||
### Skill System
|
||||
Skills provide passive bonuses and unlock new abilities. Each skill can evolve through 5 tiers with milestone upgrades.
|
||||
|
||||
**Key Files:**
|
||||
- `constants.ts` - Skill definitions (`SKILLS_DEF`)
|
||||
- `skill-evolution.ts` - Evolution paths and upgrades
|
||||
- `upgrade-effects.ts` - Effect computation
|
||||
|
||||
### Combat System
|
||||
- Cast-speed based spell casting with DPS calculations
|
||||
- Elemental damage bonuses and effectiveness
|
||||
- Multi-spell support from equipped weapons
|
||||
- Golem allies deal automatic damage each tick
|
||||
Combat uses a cast-speed system where each spell has a unique cast rate. Damage is calculated with skill bonuses, elemental modifiers, and special effects.
|
||||
|
||||
**Key Files**: `src/lib/game/store.ts` (combat tick logic), `src/lib/game/constants/spells.ts`
|
||||
**Key Files:**
|
||||
- `store.ts` - Combat tick logic
|
||||
- `constants.ts` - Spell definitions (`SPELLS_DEF`)
|
||||
- `effects.ts` - Damage calculations
|
||||
|
||||
### Enchanting System
|
||||
3-stage equipment enchantment process:
|
||||
1. **Design**: Choose effects for your equipment type
|
||||
2. **Prepare**: Prepare equipment (ONLY way to disenchant existing enchantments)
|
||||
3. **Apply**: Apply designed enchantments (cannot re-enchant already enchanted gear)
|
||||
### Crafting System
|
||||
A 3-stage enchantment system for equipment. Design effects, prepare equipment, and apply enchantments within capacity limits.
|
||||
|
||||
**Key Files**: `src/lib/game/crafting-slice.ts`, `src/lib/game/data/enchantment-effects.ts`
|
||||
**Key Files:**
|
||||
- `crafting-slice.ts` - Crafting actions
|
||||
- `data/equipment.ts` - Equipment types
|
||||
- `data/enchantment-effects.ts` - Available effects
|
||||
|
||||
### Golemancy System
|
||||
- **Base Golems**: Earth (Fabricator 2), Steel (Metal), Crystal, Sand
|
||||
- **Hybrid Golems** (Enchanter 5 + Fabricator 5): Lava, Galvanic, Obsidian, Prism, Quicksilver, Voidstone
|
||||
- **Golem Slots**: 1 slot at Fabricator Level 2, +1 every 2 levels (max 5 at Level 10)
|
||||
### Familiar System
|
||||
Magical companions that provide bonuses and can be trained and evolved.
|
||||
|
||||
**Key Files**: `src/lib/game/data/golems.ts`, `src/lib/game/store.ts`
|
||||
**Key Files:**
|
||||
- `familiar-slice.ts` - Familiar actions
|
||||
- `data/familiars.ts` - Familiar definitions
|
||||
|
||||
### Prestige (Insight)
|
||||
Reset progress to gain Insight currency for permanent upgrades:
|
||||
- Signed pacts persist through prestige
|
||||
- Attunement choices affect gameplay (Enchanter/Invoker/Fabricator)
|
||||
- Insight upgrades provide bonuses across all loops
|
||||
### Prestige System
|
||||
Reset progress for Insight, which provides permanent bonuses. Signed pacts persist through prestige.
|
||||
|
||||
---
|
||||
|
||||
## Deployment
|
||||
|
||||
### Docker Deployment
|
||||
The project includes Docker configuration for containerized deployment:
|
||||
|
||||
```bash
|
||||
# Build and run with Docker Compose
|
||||
docker-compose up -d
|
||||
|
||||
# Or build manually
|
||||
docker build -t mana-loop .
|
||||
docker run -p 3000:3000 mana-loop
|
||||
```
|
||||
|
||||
### CI/CD Pipeline
|
||||
- **Gitea Actions**: `.gitea/workflows/docker-build.yaml` automatically builds and pushes Docker images to `gitea.tailf367e3.ts.net/anexim/mana-loop:latest` on push to `master`/`main` branches
|
||||
- **Multi-platform**: Builds for linux/amd64 architecture
|
||||
- **Image Tags**: Branch name, commit SHA, "latest"
|
||||
|
||||
### Reverse Proxy
|
||||
A `Caddyfile` is included for reverse proxy setup (forwards port 81 to 3000).
|
||||
|
||||
### Production Build
|
||||
```bash
|
||||
bun run build
|
||||
NODE_ENV=production bun .next/standalone/server.js
|
||||
```
|
||||
**Key Files:**
|
||||
- `store.ts` - Prestige logic
|
||||
- `constants.ts` - Insight upgrades
|
||||
|
||||
---
|
||||
|
||||
@@ -306,52 +229,29 @@ NODE_ENV=production bun .next/standalone/server.js
|
||||
We welcome contributions! Please follow these guidelines:
|
||||
|
||||
### Development Workflow
|
||||
1. **Pull latest changes** before starting work: `git pull origin master`
|
||||
2. **Create a feature branch** for your changes: `git checkout -b feature/your-feature`
|
||||
3. **Follow existing patterns** in the codebase (see AGENTS.md)
|
||||
4. **Run linting** before committing: `bun run lint`
|
||||
5. **Test your changes** thoroughly: `bun run test`
|
||||
6. **Commit and push** to your branch, then create a pull request
|
||||
|
||||
1. **Pull the latest changes** before starting work
|
||||
2. **Create a feature branch** for your changes
|
||||
3. **Follow existing patterns** in the codebase
|
||||
4. **Run linting** before committing (`bun run lint`)
|
||||
5. **Test your changes** thoroughly
|
||||
|
||||
### Code Style
|
||||
|
||||
- TypeScript throughout with strict typing
|
||||
- Use existing shadcn/ui components over custom implementations
|
||||
- Follow the slice pattern for Zustand store actions
|
||||
- Keep components focused (extract to separate files when >50 lines)
|
||||
- Use path aliases: `@/*` maps to `./src/*`
|
||||
- Follow the slice pattern for store actions
|
||||
- Keep components focused and extract to separate files when >50 lines
|
||||
|
||||
### Adding New Features
|
||||
For detailed patterns on adding new effects, skills, spells, or systems, see the comprehensive [AGENTS.md](./docs/AGENTS.md) guide, which includes:
|
||||
- Architecture overview
|
||||
- Coding patterns
|
||||
- Git workflow (mandatory pull before work, commit & push after)
|
||||
- Credentials for automation (if applicable)
|
||||
|
||||
---
|
||||
|
||||
## Banned Content
|
||||
|
||||
The following content has been removed from the game and should not be re-added:
|
||||
|
||||
### Banned Mechanics
|
||||
- **Lifesteal** - Player cannot heal from dealing damage
|
||||
- **Healing** - Player cannot heal themselves (floors take damage, not player)
|
||||
|
||||
### Banned Mana Types
|
||||
- **Life** - Removed (healing theme conflicts with core design)
|
||||
- **Blood** - Removed (life derivative)
|
||||
- **Wood** - Removed (life derivative)
|
||||
- **Mental** - Removed
|
||||
- **Force** - Removed
|
||||
|
||||
### Banned Systems
|
||||
- **Familiar System** - Removed in favor of Golemancy and Pact systems
|
||||
For detailed patterns on adding new effects, skills, spells, or systems, see [AGENTS.md](./AGENTS.md).
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the MIT License - see the LICENSE section below for details.
|
||||
This project is licensed under the MIT License.
|
||||
|
||||
```
|
||||
MIT License
|
||||
@@ -377,20 +277,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
```
|
||||
|
||||
**Note**: A `LICENSE` file is not currently present in the project root. It is recommended to create one with the above MIT License text.
|
||||
|
||||
---
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- Built with modern web technologies (Next.js, React, TypeScript, Tailwind CSS)
|
||||
- UI components from [shadcn/ui](https://ui.shadcn.com/)
|
||||
- State management with [Zustand](https://github.com/pmndrs/zustand)
|
||||
- Game icons from [Lucide React](https://lucide.dev/)
|
||||
- Special thanks to the open-source community for the amazing tools that make this project possible.
|
||||
|
||||
---
|
||||
|
||||
<p align="center">
|
||||
<em>Climb the spire. Master the mana. Uncover the loop.</em>
|
||||
</p>
|
||||
Built with love using modern web technologies. Special thanks to the open-source community for the amazing tools that make this project possible.
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +0,0 @@
|
||||
[test]
|
||||
dir = "./src/test"
|
||||
preload = ["./src/test/setup.ts"]
|
||||
Executable
BIN
Binary file not shown.
Executable → Regular
@@ -1,847 +0,0 @@
|
||||
# Mana-Loop: Comprehensive Game Briefing Document
|
||||
|
||||
**Document Version:** 2.0
|
||||
**Updated:** Disciplines Refactor (skills system removed; disciplines replace it entirely)
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Executive Summary](#executive-summary)
|
||||
2. [Core Game Loop](#core-game-loop)
|
||||
3. [Mana System](#mana-system)
|
||||
4. [Time & Incursion System](#time--incursion-system)
|
||||
5. [Spire & Floor System](#spire--floor-system)
|
||||
6. [Combat System](#combat-system)
|
||||
7. [Guardian & Pact System](#guardian--pact-system)
|
||||
8. [Attunement System](#attunement-system)
|
||||
9. [Discipline System](#discipline-system)
|
||||
10. [Equipment & Enchantment System](#equipment--enchantment-system)
|
||||
11. [Golemancy System](#golemancy-system)
|
||||
12. [Prestige/Loop System](#prestigeloop-system)
|
||||
13. [Achievement System](#achievement-system)
|
||||
14. [Formulas & Calculations](#formulas--calculations)
|
||||
15. [System Interactions](#system-interactions)
|
||||
16. [Code Architecture](#code-architecture)
|
||||
|
||||
---
|
||||
|
||||
## Executive Summary
|
||||
|
||||
**Mana-Loop** is a browser-based incremental/idle game with a 30-day time loop mechanic. Players gather mana, practice disciplines, climb a 100-floor spire, defeat guardians, sign pacts, enchant equipment, and prestige for permanent progression.
|
||||
|
||||
**Key Differentiators:**
|
||||
- 3-class Attunement system (Enchanter, Invoker, Fabricator)
|
||||
- Equipment-based spell system (spells come from enchanted gear)
|
||||
- Practice-based Discipline system — no discrete skill levels, only continuous XP growth
|
||||
- Time pressure through the incursion mechanic
|
||||
- Guardian pacts provide permanent multipliers
|
||||
|
||||
**Code Architecture:** Modular stores, crafting actions, discipline data, and constants. The old skill system (study, skill tiers, milestone upgrades) has been fully removed and replaced by the Discipline system.
|
||||
|
||||
---
|
||||
|
||||
## Core Game Loop
|
||||
|
||||
### Primary Loop (Within Each Run)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ TIME LOOP (30 Days) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────┐ ┌────────────┐ ┌───────────┐ ┌──────┐ │
|
||||
│ │ GATHER │───▶│ PRACTICE │───▶│ CLIMB │───▶│CRAFT │ │
|
||||
│ │ MANA │ │ DISCIPLINES│ │ SPIRE │ │ GEAR │ │
|
||||
│ └─────────┘ └────────────┘ └───────────┘ └──────┘ │
|
||||
│ │ │ │ │ │
|
||||
│ └───────────────┴────────────────┴───────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ DEFEAT GUARDIANS → SIGN PACTS │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌─────────────────────────────────────────────────────┐ │
|
||||
│ │ DAY 30: LOOP ENDS → GAIN INSIGHT │ │
|
||||
│ └─────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Game Actions
|
||||
|
||||
| Action | Effect | Time Cost |
|
||||
|--------|--------|-----------|
|
||||
| **Meditate** | Regen mana with meditation bonus multiplier | Passive (auto-selected after actions) |
|
||||
| **Climb** | Progress through spire floors, cast spells | Active combat |
|
||||
| **Practice** | Run active disciplines, consuming mana each tick | Continuous |
|
||||
| **Craft** | Create/enchant equipment | Hours per stage |
|
||||
| **Convert** | Auto-convert raw mana to elements | Per tick |
|
||||
| **Design** | Create enchantment designs (limited to owned gear types) | Hours |
|
||||
| **Prepare** | Ready equipment for enchanting | Hours + mana |
|
||||
| **Enchant** | Apply enchantment to equipment | Hours + mana |
|
||||
|
||||
### Action Transitions
|
||||
|
||||
- After completing Design, Prepare, Enchant, or Craft the game automatically transitions to **Meditate**
|
||||
- Action buttons are hidden when in Spire Mode
|
||||
- `currentAction` state lives in `stores/gameStore.ts`
|
||||
|
||||
---
|
||||
|
||||
## Mana System
|
||||
|
||||
### Mana Types Hierarchy
|
||||
|
||||
```
|
||||
Raw Mana (Base Resource)
|
||||
│
|
||||
├──▶ Base Elements (7) ─────────────────────────────────────┐
|
||||
│ Fire*, Water*, Air*, Earth*, Light, Dark, Death │
|
||||
│ *Locked at start - must be unlocked │
|
||||
│ │
|
||||
├──▶ Utility Element (1) ───────────────────────────────────┤
|
||||
│ Transference (Enchanter attunement - UNLOCKED at start) │
|
||||
│ │
|
||||
├──▶ Compound Elements (3) ── Created from 2 base ──────────┤
|
||||
│ Metal = Fire + Earth │
|
||||
│ Sand = Earth + Water │
|
||||
│ Lightning = Fire + Air │
|
||||
│ │
|
||||
└──▶ Exotic Elements (3) ── Created from advanced recipes ──┤
|
||||
Crystal = Sand + Sand + Light │
|
||||
Stellar = Fire + Fire + Light │
|
||||
Void = Dark + Dark + Death │
|
||||
```
|
||||
|
||||
Fire, Water, Air, and Earth are **locked at start**. Only Transference is unlocked initially.
|
||||
|
||||
### Mana Formulas
|
||||
|
||||
**Maximum Raw Mana:**
|
||||
```
|
||||
maxMana = (100 + (manaWellLevel × 100) + (prestigeManaWell × 500) + equipmentBonuses) × maxManaMultiplier
|
||||
```
|
||||
|
||||
**Maximum Elemental Mana:**
|
||||
```
|
||||
elementMax = (10 + (elemAttuneLevel × 50) + (prestigeElemAttune × 25)) × elementCapMultiplier
|
||||
```
|
||||
|
||||
**Base Regeneration (per hour):**
|
||||
```
|
||||
baseRegen = 2 + (manaFlowLevel × 1) + (manaSpringLevel × 2) + (prestigeManaFlow × 0.5)
|
||||
effectiveRegen = baseRegen × (1 - incursionStrength) × meditationMultiplier
|
||||
```
|
||||
|
||||
**Meditation Bonus:**
|
||||
```
|
||||
Base: 1 + min(hours/4, 0.5) → up to 1.5× after 4 hours
|
||||
```
|
||||
|
||||
**Attunement Mana Conversion:**
|
||||
- Enchanter: Raw → Transference at 0.2/hour base (scales with level)
|
||||
- Fabricator: Raw → Earth at 0.25/hour base (scales with level)
|
||||
|
||||
### Starting Elements
|
||||
|
||||
| Element | Unlocked at Start |
|
||||
|---------|-------------------|
|
||||
| Transference | ✅ Yes |
|
||||
| Fire | ❌ No |
|
||||
| Water | ❌ No |
|
||||
| Air | ❌ No |
|
||||
| Earth | ❌ No |
|
||||
| Light | ❌ No |
|
||||
| Dark | ❌ No |
|
||||
| Death | ❌ No |
|
||||
|
||||
### Mana Conversion Cost
|
||||
- **100 Raw Mana = 1 Elemental Mana** (for base elements)
|
||||
- Compound/Exotic elements are crafted, not converted
|
||||
|
||||
---
|
||||
|
||||
## Time & Incursion System
|
||||
|
||||
### Time Constants
|
||||
|
||||
| Constant | Value | Description |
|
||||
|----------|-------|-------------|
|
||||
| `TICK_MS` | 200ms | Real time per game tick |
|
||||
| `HOURS_PER_TICK` | 0.04 | Game hours per tick |
|
||||
| `MAX_DAY` | 30 | Days per loop |
|
||||
| `INCURSION_START_DAY` | 20 | When incursion begins |
|
||||
|
||||
### Time Progression
|
||||
- 1 real second = 5 game hours (at 5 ticks/second)
|
||||
- 1 game day = 24 game hours = 4.8 real seconds
|
||||
- Full 30-day loop ≈ 2.4 real minutes
|
||||
|
||||
### Incursion Mechanic
|
||||
|
||||
```
|
||||
if (day < 20): incursionStrength = 0
|
||||
else: incursionStrength = min(0.95, (totalHours / maxHours) × 0.95)
|
||||
```
|
||||
|
||||
Reduces mana regeneration by `(1 - incursionStrength)`. Starts at 0% on Day 20, reaches 95% by Day 30.
|
||||
|
||||
---
|
||||
|
||||
## Spire & Floor System
|
||||
|
||||
### Floor Generation
|
||||
|
||||
**Floor Element Cycle:**
|
||||
```javascript
|
||||
FLOOR_ELEM_CYCLE = ["fire", "water", "air", "earth", "light", "dark", "death"]
|
||||
element = FLOOR_ELEM_CYCLE[(floor - 1) % 7]
|
||||
```
|
||||
|
||||
**Floor HP Formula:**
|
||||
```
|
||||
normalFloorHP = floor(100 + floor × 50 + floor^1.7)
|
||||
guardianFloorHP = GUARDIANS[floor].hp // in constants/guardians.ts
|
||||
```
|
||||
|
||||
**Guardian Floors:** 10, 20, 30, 40, 50, 60, 80, 90, 100
|
||||
|
||||
### Room Types
|
||||
|
||||
| Room Type | Chance | Description |
|
||||
|-----------|--------|-------------|
|
||||
| **Combat** | Default | Single enemy, normal combat |
|
||||
| **Guardian** | Fixed | Boss floor |
|
||||
| **Swarm** | 15% | 3–6 enemies with 40% HP each |
|
||||
| **Speed** | 10% | Enemy with dodge chance (25% base + 0.5%/floor) |
|
||||
| **Puzzle** | 20% on puzzle floors | Progress-based, faster with relevant attunement |
|
||||
|
||||
### Armor Scaling
|
||||
```javascript
|
||||
FLOOR_ARMOR_CONFIG = {
|
||||
baseChance: 0, // No armor before floor 10
|
||||
chancePerFloor: 0.01, // +1% chance per floor after 10
|
||||
maxArmorChance: 0.5, // Max 50% of floors have armor
|
||||
minArmor: 0.05, // Min 5% damage reduction
|
||||
maxArmor: 0.25 // Max 25% on non-guardians
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Combat System
|
||||
|
||||
### Spell Casting Mechanics
|
||||
|
||||
```
|
||||
progressPerTick = HOURS_PER_TICK × spellCastSpeed × totalAttackSpeed
|
||||
```
|
||||
|
||||
Lightning spells get +30% effective cast speed.
|
||||
|
||||
### Damage Calculation
|
||||
```
|
||||
baseDamage = spellDamage + disciplineBonus(combatStat)
|
||||
pctBonus = 1 + disciplineMultiplier
|
||||
pactMultiplier = product of all signed pact multipliers
|
||||
elementalBonus = getElementalBonus(spellElement, floorElement)
|
||||
|
||||
finalDamage = baseDamage × pctBonus × pactMultiplier × elementalBonus
|
||||
```
|
||||
|
||||
### Elemental Effectiveness
|
||||
|
||||
| Condition | Multiplier |
|
||||
|-----------|------------|
|
||||
| Spell same element as floor | 1.25× |
|
||||
| Spell is opposite of floor element | 1.50× (Super Effective) |
|
||||
| Spell's opposite matches floor | 0.75× (Not Very Effective) |
|
||||
| Raw mana spells | 1.00× |
|
||||
|
||||
**Element Opposites:**
|
||||
```
|
||||
Fire ↔ Water Air ↔ Earth Light ↔ Dark
|
||||
Lightning — no opposite (has armor pierce instead)
|
||||
```
|
||||
|
||||
### Armor & Damage Reduction
|
||||
|
||||
```
|
||||
effectiveArmor = max(0, enemyArmor - armorPierce)
|
||||
damageDealt = damage × (1 - effectiveArmor)
|
||||
```
|
||||
|
||||
### Critical Hits
|
||||
|
||||
Critical chance and multiplier come from discipline bonuses (no fixed skill levels).
|
||||
|
||||
### Special Combat Effects
|
||||
|
||||
| Effect | Description |
|
||||
|--------|-------------|
|
||||
| **Burn** | Damage over time |
|
||||
| **Freeze** | Prevents dodge |
|
||||
| **Stun** | Temporary disable |
|
||||
| **Pierce** | Ignores % armor |
|
||||
| **Chain** | Hits multiple targets |
|
||||
| **AOE** | Area damage |
|
||||
| **Buff** | Damage multiplier |
|
||||
|
||||
---
|
||||
|
||||
## Guardian & Pact System
|
||||
|
||||
### Guardian Floors & Stats
|
||||
|
||||
| Floor | Guardian | Element | HP | Pact Mult | Armor | Unique Perk |
|
||||
|-------|----------|---------|-----|-----------|-------|-------------|
|
||||
| 10 | Ignis Prime | Fire | 5,000 | 1.5× | 10% | Fire spells cast 10% faster |
|
||||
| 20 | Aqua Regia | Water | 15,000 | 1.75× | 15% | Water spells +15% damage |
|
||||
| 30 | Ventus Rex | Air | 30,000 | 2.0× | 18% | Air spells 15% crit chance |
|
||||
| 40 | Terra Firma | Earth | 50,000 | 2.25× | 25% | Earth spells +25% vs guardians |
|
||||
| 50 | Lux Aeterna | Light | 80,000 | 2.5× | 20% | Light spells reveal weaknesses |
|
||||
| 60 | Umbra Mortis | Dark | 120,000 | 2.75× | 22% | Dark spells +25% vs armored |
|
||||
| 80 | Mors Ultima | Death | 250,000 | 3.25× | 25% | Death spells execute <20% HP |
|
||||
| 90 | Primordialis | Void | 400,000 | 4.0× | 30% | Void spells ignore 30% resistance |
|
||||
| 100 | The Awakened One | Stellar | 1,000,000 | 5.0× | 35% | All spells +50% dmg, 25% faster |
|
||||
|
||||
### Guardian Boons (on pact)
|
||||
|
||||
| Boon Type | Effect |
|
||||
|-----------|--------|
|
||||
| `maxMana` | +Max raw mana |
|
||||
| `manaRegen` | +Regen/hour |
|
||||
| `castingSpeed` | +% cast speed |
|
||||
| `elementalDamage` | +% element damage |
|
||||
| `rawDamage` | +% all damage |
|
||||
| `critChance` | +% crit chance |
|
||||
| `critDamage` | +% crit multiplier |
|
||||
| `insightGain` | +% insight |
|
||||
|
||||
### Victory Condition
|
||||
Defeat floor 100 guardian **and** sign the pact → 3× normal insight.
|
||||
|
||||
---
|
||||
|
||||
## Attunement System
|
||||
|
||||
Attunements are class-like specializations that unlock discipline pools and grant unique capabilities.
|
||||
|
||||
### The Three Attunements
|
||||
|
||||
#### 1. Enchanter (Right Hand) ✅
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| **Slot** | Right Hand |
|
||||
| **Primary Mana** | Transference |
|
||||
| **Raw Regen** | +0.5/hour base |
|
||||
| **Conversion** | 0.2 raw→transference/hour |
|
||||
| **Unlock** | Starting attunement |
|
||||
|
||||
**Disciplines Unlocked:** Enchanter discipline pool (`data/disciplines/enchanter.ts`)
|
||||
**Capabilities:** Enchanting & disenchanting equipment
|
||||
|
||||
#### 2. Invoker (Chest) ✅
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| **Slot** | Chest |
|
||||
| **Primary Mana** | None (gains from pacts) |
|
||||
| **Raw Regen** | +0.3/hour base |
|
||||
| **Conversion** | None |
|
||||
| **Unlock** | Defeat first guardian |
|
||||
|
||||
**Disciplines Unlocked:** Invoker discipline pool (`data/disciplines/invoker.ts`)
|
||||
**Capabilities:** Form pacts with guardians, access guardian powers
|
||||
|
||||
#### 3. Fabricator (Left Hand) ✅
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| **Slot** | Left Hand |
|
||||
| **Primary Mana** | Earth |
|
||||
| **Raw Regen** | +0.4/hour base |
|
||||
| **Conversion** | 0.25 raw→earth/hour |
|
||||
| **Unlock** | Prove crafting worth |
|
||||
|
||||
**Disciplines Unlocked:** Fabricator discipline pool (`data/disciplines/fabricator.ts`)
|
||||
**Capabilities:** Golem crafting, gear crafting, Earth shaping
|
||||
|
||||
### Attunement Leveling
|
||||
|
||||
```javascript
|
||||
Level 2: 1,000 XP
|
||||
Level 3: 2,500 XP
|
||||
Level 4: 5,000 XP
|
||||
Level 5: 10,000 XP
|
||||
// Each level ≈ 2× previous; Max Level: 10
|
||||
|
||||
regenMultiplier = 1.5^(level - 1)
|
||||
conversionRate = baseRate × 1.5^(level - 1)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Discipline System
|
||||
|
||||
Disciplines replace the old skill system entirely. There are no discrete levels or study actions — disciplines grow **continuously** through practice. The player activates a discipline and it drains mana each tick in exchange for permanent stat growth.
|
||||
|
||||
### Core Concept
|
||||
|
||||
> The more you practice a discipline, the stronger its effect — but the more mana it costs to maintain.
|
||||
|
||||
- **XP** accumulates each tick the discipline is active and has enough mana to drain
|
||||
- **Stat bonus** grows as a power curve of XP (never resets within a run)
|
||||
- **Mana drain** also increases with XP — mastery has a cost
|
||||
- **Perks** unlock at XP thresholds, granting bonus effects
|
||||
|
||||
### Disciplines vs Old Skills
|
||||
|
||||
| Old Skill System | Discipline System |
|
||||
|-----------------|-------------------|
|
||||
| Discrete levels (1–10 per tier) | Continuous XP accumulation |
|
||||
| Mana cost paid once on study | Mana drained every tick |
|
||||
| Required hours to level up | Grows passively while active |
|
||||
| Milestone upgrades at L5/L10 | Perks unlock at XP thresholds |
|
||||
| 5-tier evolution (T1–T5) | Single continuous curve per discipline |
|
||||
|
||||
### Formulas
|
||||
|
||||
**Stat Bonus (continuous):**
|
||||
```
|
||||
StatBonus = baseValue × (XP / scalingFactor)^0.65
|
||||
```
|
||||
|
||||
**Mana Drain Per Tick:**
|
||||
```
|
||||
ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
|
||||
```
|
||||
|
||||
- `scalingFactor` controls how quickly stats grow
|
||||
- `difficultyFactor` controls how quickly drain increases
|
||||
- Higher `scalingFactor` → slower stat gain; higher `difficultyFactor` → slower drain increase
|
||||
|
||||
### Concurrent Discipline Limit
|
||||
|
||||
```
|
||||
concurrentLimit = 1 + floor(totalXP / 500) // capped at base + 3
|
||||
```
|
||||
|
||||
Players start with 1 active discipline slot. As total XP across all disciplines grows, additional slots unlock (max 4 total).
|
||||
|
||||
### Perk Types
|
||||
|
||||
| Type | Behaviour |
|
||||
|------|-----------|
|
||||
| `once` | Unlocks permanently when XP reaches `threshold` |
|
||||
| `capped` | Grants stacking bonus tiers; each tier requires another `interval` XP beyond `threshold` |
|
||||
| `infinite` | Repeating bonus — a new stack every `interval` XP past `threshold` (no cap) |
|
||||
|
||||
### Attunement Pools
|
||||
|
||||
| Pool | File | Requires |
|
||||
|------|------|---------|
|
||||
| Base | `data/disciplines/base.ts` | None (all attunements) |
|
||||
| Enchanter | `data/disciplines/enchanter.ts` | Enchanter attunement |
|
||||
| Invoker | `data/disciplines/invoker.ts` | Invoker attunement |
|
||||
| Fabricator | `data/disciplines/fabricator.ts` | Fabricator attunement |
|
||||
|
||||
### Example Disciplines
|
||||
|
||||
| Discipline | Attunement | Mana Type | Stat Bonus | Description |
|
||||
|------------|------------|-----------|------------|-------------|
|
||||
| Raw Mana Mastery | Base | Raw | `maxManaBonus` | More raw mana from practice |
|
||||
| Elemental Attunement | Base | Fire | `elementCap_fire` | Expanded fire capacity |
|
||||
| Lightning Surge | Invoker | Lightning | `lightningDamage` | Boosts lightning spell damage |
|
||||
| Void Echo | Invoker | Void | `voidCastSpeed` | Increases void spell cast speed |
|
||||
| Metalworking | Fabricator | Metal | `craftSpeed_metal` | Faster metal equipment crafting |
|
||||
| Crystal Shaping | Fabricator | Crystal | `durability_crystal` | More durable crystal equipment |
|
||||
| Soulforge | Enchanter | Light | `enchantPower` | Stronger enchantment effects |
|
||||
| Mana Prism | Enchanter | Light | `manaReflect` | Prismatic mana focusing |
|
||||
|
||||
### Discipline Lifecycle
|
||||
|
||||
```
|
||||
1. Player opens Disciplines tab → sees available disciplines for their attunements
|
||||
2. Player activates discipline (costs nothing up-front; requires mana type unlocked)
|
||||
3. Each game tick:
|
||||
a. ManaDrain deducted from mana pool
|
||||
b. If insufficient mana → discipline auto-pauses
|
||||
c. If sufficient mana → disc.xp += 1; stat bonuses recomputed
|
||||
4. Player can manually pause/resume disciplines
|
||||
5. On loop end, XP resets (stat bonuses are per-run, not permanent)
|
||||
— Prestige upgrades may eventually preserve some XP
|
||||
```
|
||||
|
||||
### Discipline UI
|
||||
|
||||
`src/components/game/tabs/DisciplinesTab.tsx`
|
||||
`src/lib/game/stores/discipline-slice.ts` — Zustand store (persisted)
|
||||
`src/lib/game/effects/discipline-effects.ts` — integrates into `getUnifiedEffects()`
|
||||
|
||||
---
|
||||
|
||||
## Equipment & Enchantment System
|
||||
|
||||
### Equipment Slots
|
||||
|
||||
```
|
||||
mainHand - Staves (2H), Wands, Swords
|
||||
offHand - Shields, Catalysts (blocked by 2-handed weapons)
|
||||
head - Hoods, Hats, Helms
|
||||
body - Robes, Armor
|
||||
hands - Gloves, Gauntlets
|
||||
feet - Boots, Shoes
|
||||
accessory1 - Rings, Amulets
|
||||
accessory2 - Rings, Amulets
|
||||
```
|
||||
|
||||
### Two-Handed Weapons
|
||||
|
||||
2-handed weapons (Staves) occupy both `mainHand` and `offHand`. The offhand slot is **blocked** when a 2H weapon is equipped. The UI shows a "Blocked by 2-handed weapon" label on the offhand slot.
|
||||
|
||||
### Equipment Instance Structure
|
||||
|
||||
```typescript
|
||||
interface EquipmentInstance {
|
||||
instanceId: string;
|
||||
typeId: string;
|
||||
name: string;
|
||||
enchantments: AppliedEnchantment[];
|
||||
usedCapacity: number;
|
||||
totalCapacity: number;
|
||||
rarity: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary' | 'mythic';
|
||||
quality: number; // 0–100
|
||||
}
|
||||
```
|
||||
|
||||
### Enchantment Process (3 Stages)
|
||||
|
||||
#### Stage 1: Design
|
||||
- Select effects from unlocked pool (`data/enchantment-effects.ts`)
|
||||
- Limited to owned gear types
|
||||
- Time: 1h base + 0.5h per effect stack
|
||||
- Implemented in `crafting-actions/design-actions.ts`
|
||||
|
||||
#### Stage 2: Prepare
|
||||
- Mana cost: `capacity × 10`
|
||||
- Time: `2h + 1h per 50 capacity`
|
||||
- Auto-transitions to Meditate on complete
|
||||
- Implemented in `crafting-actions/preparation-actions.ts`
|
||||
|
||||
#### Stage 3: Apply
|
||||
- Mana per hour: `20 + 5 per effect stack`
|
||||
- Time: `2h + 1h per effect stack`
|
||||
- Grants Enchanter XP: 1 XP per 10 capacity
|
||||
- Auto-transitions to Meditate on complete
|
||||
- Implemented in `crafting-actions/application-actions.ts`
|
||||
|
||||
### Enchantment Effect Categories
|
||||
|
||||
| Category | Description | Equipment Types |
|
||||
|----------|-------------|-----------------|
|
||||
| **Spell** | Grants spell ability | Casters only |
|
||||
| **Mana** | Max/regen/click bonuses | Casters, Catalysts, Head, Body, Accessories |
|
||||
| **Combat** | Damage, crit, speed | Casters, Hands |
|
||||
| **Utility** | Meditation, insight | Most equipment |
|
||||
| **Special** | Unique effects | Various |
|
||||
| **Elemental** | Weapon enchantments | Swords, Casters |
|
||||
|
||||
### Starting Equipment
|
||||
|
||||
| Slot | Item | Enchantment | Capacity |
|
||||
|------|------|-------------|----------|
|
||||
| Main Hand | Basic Staff | Mana Bolt spell | 50/50 |
|
||||
| Body | Civilian Shirt | None | 0/30 |
|
||||
| Feet | Civilian Shoes | None | 0/15 |
|
||||
|
||||
---
|
||||
|
||||
## Golemancy System
|
||||
|
||||
### Golem Slots
|
||||
|
||||
```
|
||||
Fabricator Level 2: 1 slot
|
||||
Fabricator Level 4: 2 slots
|
||||
Fabricator Level 6: 3 slots
|
||||
Fabricator Level 8: 4 slots
|
||||
Fabricator Level 10: 5 slots
|
||||
|
||||
slots = floor(fabricatorLevel / 2)
|
||||
```
|
||||
|
||||
### Golem Types
|
||||
|
||||
#### Base Golems
|
||||
|
||||
| Golem | Element | Damage | Speed | Armor Pierce | Unlock |
|
||||
|-------|---------|--------|-------|--------------|--------|
|
||||
| Earth Golem | Earth | 8 | 1.5/h | 15% | Fabricator 2 |
|
||||
|
||||
#### Elemental Variants
|
||||
|
||||
| Golem | Element | Damage | Speed | Pierce | Unlock |
|
||||
|-------|---------|--------|-------|--------|--------|
|
||||
| Steel Golem | Metal | 12 | 1.2/h | 35% | Metal mana unlocked |
|
||||
| Crystal Golem | Crystal | 18 | 1.0/h | 25% | Crystal mana unlocked |
|
||||
| Sand Golem | Sand | 6 | 2.0/h | 10% | Sand mana unlocked |
|
||||
|
||||
#### Advanced Hybrid Golems (Enchanter 5 + Fabricator 5)
|
||||
|
||||
| Golem | Elements | Damage | Speed | Pierce | Special |
|
||||
|-------|----------|--------|-------|--------|---------|
|
||||
| Lava Golem | Earth + Fire | 15 | 1.0/h | 20% | AOE 2 |
|
||||
| Galvanic Golem | Metal + Lightning | 10 | 3.5/h | 45% | Fast |
|
||||
| Obsidian Golem | Earth + Dark | 25 | 0.8/h | 50% | High damage |
|
||||
| Prism Golem | Crystal + Light | 20 | 1.5/h | 35% | AOE 3 |
|
||||
| Quicksilver Golem | Metal + Water | 8 | 4.0/h | 30% | Very fast |
|
||||
| Voidstone Golem | Earth + Void | 40 | 0.6/h | 60% | Ultimate |
|
||||
|
||||
### Golem Combat
|
||||
|
||||
```
|
||||
progressPerTick = HOURS_PER_TICK × attackSpeed × efficiencyBonus
|
||||
damage = baseDamage × (1 + golemMasteryBonus) // bonus from discipline
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prestige/Loop System
|
||||
|
||||
### Loop End Conditions
|
||||
|
||||
| Condition | Result |
|
||||
|-----------|--------|
|
||||
| Day 30 reached | Loop ends, gain insight |
|
||||
| Floor 100 + Pact 100 signed | Victory! 3× insight |
|
||||
|
||||
### Insight Formula
|
||||
|
||||
```
|
||||
baseInsight = floor(maxFloorReached × 15 + totalManaGathered / 500 + signedPacts.length × 150)
|
||||
finalInsight = floor(baseInsight × (1 + insightAmpLevel × 0.25) × disciplineBonus)
|
||||
```
|
||||
|
||||
### Prestige Upgrades
|
||||
|
||||
| Upgrade | Max | Cost | Effect |
|
||||
|---------|-----|------|--------|
|
||||
| Mana Well | 5 | 500 | +500 starting max mana |
|
||||
| Mana Flow | 10 | 750 | +0.5 permanent regen |
|
||||
| Deep Memory | 5 | 1000 | +1 memory slot |
|
||||
| Insight Amp | 4 | 1500 | +25% insight gain |
|
||||
| Spire Key | 5 | 4000 | Start at floor +2 |
|
||||
| Temporal Echo | 5 | 3000 | +10% mana generation |
|
||||
| Steady Hand | 5 | 1200 | -15% durability loss |
|
||||
| Ancient Knowledge | 5 | 2000 | Start with blueprint |
|
||||
| Elemental Attune | 10 | 600 | +25 element cap |
|
||||
| Spell Memory | 3 | 2500 | Start with random spell |
|
||||
| Guardian Pact | 5 | 3500 | +10% pact multiplier |
|
||||
| Quick Start | 3 | 400 | +100 starting mana |
|
||||
| Elem. Start | 3 | 800 | +5 each unlocked element |
|
||||
|
||||
### Memory System
|
||||
|
||||
- **Base slots:** 3
|
||||
- **Additional:** +1 per Deep Memory prestige level
|
||||
- **Memories:** Spells preserved across loops
|
||||
|
||||
---
|
||||
|
||||
## Achievement System
|
||||
|
||||
### Categories
|
||||
|
||||
| Category | Description |
|
||||
|----------|-------------|
|
||||
| `mana` | Mana gathering milestones |
|
||||
| `combat` | Combat achievements |
|
||||
| `progression` | Floor/guardian progression |
|
||||
| `crafting` | Equipment and enchanting |
|
||||
| `prestige` | Loop and insight milestones |
|
||||
|
||||
### Reward Types
|
||||
|
||||
| Reward | Effect |
|
||||
|--------|--------|
|
||||
| `insight` | One-time insight bonus |
|
||||
| `manaBonus` | Permanent max mana |
|
||||
| `damageBonus` | Permanent damage increase |
|
||||
| `regenBonus` | Permanent regen increase |
|
||||
| `title` | Cosmetic title |
|
||||
| `unlockEffect` | Unlocks enchantment effect |
|
||||
|
||||
---
|
||||
|
||||
## Formulas & Calculations
|
||||
|
||||
### Damage Calculation (Complete)
|
||||
|
||||
```javascript
|
||||
function calcDamage(state, spellId, floorElement) {
|
||||
const spell = SPELLS_DEF[spellId]; // constants/spells.ts
|
||||
|
||||
// Base damage + discipline bonuses
|
||||
let damage = spell.dmg + disciplineBonus('combatDamage');
|
||||
|
||||
// Discipline multiplier bonus
|
||||
damage *= 1 + disciplineBonus('damagePct');
|
||||
|
||||
// Guardian bane (vs guardians only)
|
||||
if (isGuardian) {
|
||||
damage *= 1 + disciplineBonus('guardianBane');
|
||||
}
|
||||
|
||||
// Pact multiplier
|
||||
damage *= state.signedPacts.reduce((m, f) => m * GUARDIANS[f].pact, 1);
|
||||
|
||||
// Elemental effectiveness
|
||||
damage *= getElementalBonus(spell.elem, floorElement);
|
||||
|
||||
// Critical hit (from discipline crit bonus)
|
||||
const critChance = disciplineBonus('critChance');
|
||||
if (Math.random() < critChance) damage *= 1.5;
|
||||
|
||||
// Equipment effects
|
||||
damage *= effects.baseDamageMultiplier;
|
||||
damage += effects.baseDamageBonus;
|
||||
|
||||
// Armor reduction
|
||||
const effectiveArmor = Math.max(0, enemyArmor - armorPierce);
|
||||
damage *= (1 - effectiveArmor);
|
||||
|
||||
return Math.floor(damage);
|
||||
}
|
||||
```
|
||||
|
||||
### DPS Calculation
|
||||
|
||||
```javascript
|
||||
dps = (damage × castSpeed × attackSpeedMultiplier) / hour
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## System Interactions
|
||||
|
||||
### Primary Interaction Map
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────┐
|
||||
│ CORE SYSTEM INTERACTIONS │
|
||||
├─────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────┐ ┌────────────┐ ┌──────────┐ │
|
||||
│ │ MANA │───────▶│ DISCIPLINES│───────▶│ COMBAT │ │
|
||||
│ └──────────┘ └────────────┘ └──────────┘ │
|
||||
│ │ │ │ │
|
||||
│ │ │ │ │
|
||||
│ ▼ ▼ ▼ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ATTUNEMENT│───────▶│ENCHANTING│────────▶│ SPIRE │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │ │ │ │
|
||||
│ │ │ │ │
|
||||
│ ▼ ▼ ▼ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │GOLEMANCY │ │EQUIPMENT │────────▶│ GUARDIAN │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────┐ │
|
||||
│ │ PACT │ │
|
||||
│ └──────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────┐ │
|
||||
│ │ PRESTIGE │ │
|
||||
│ └──────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Key System Dependencies
|
||||
|
||||
| System | Depends On | Unlocks/Enables |
|
||||
|--------|------------|-----------------|
|
||||
| **Disciplines** | Mana (drain cost), Attunement (pool access) | All combat/crafting stat bonuses |
|
||||
| **Enchanting** | Enchanter attunement, Enchanter disciplines | Equipment spells, bonuses |
|
||||
| **Golemancy** | Fabricator attunement, Earth mana | Additional combat damage |
|
||||
| **Pacts** | Guardian defeat | Permanent multipliers, boons |
|
||||
| **Prestige** | Loop completion | Permanent upgrades, memories |
|
||||
| **Equipment** | Crafting/Blueprints | Spell access, stat bonuses |
|
||||
|
||||
### Progression Gates
|
||||
|
||||
1. **Early Game (Floors 1–10):** Mana gathering and regen, base disciplines, starting equipment
|
||||
2. **Mid Game (Floors 10–40):** First guardian pacts, attunement unlocking, attunement discipline pools, equipment enchanting, Golemancy
|
||||
3. **Late Game (Floors 40–80):** Compound/exotic elements, hybrid golems, advanced discipline perks, advanced enchantments
|
||||
4. **End Game (Floors 80–100):** Void/Stellar/Crystal spells, ultimate golems, victory preparation
|
||||
|
||||
---
|
||||
|
||||
## Code Architecture
|
||||
|
||||
### Modular Structure Overview
|
||||
|
||||
#### Store Architecture
|
||||
|
||||
**Active Stores (`src/lib/game/stores/`):**
|
||||
- **gameStore.ts** — Core state, tick logic, main actions
|
||||
- **manaStore.ts** — Mana gathering, elements, conversion
|
||||
- **combatStore.ts** — Combat system, spells, floor progression
|
||||
- **prestigeStore.ts** — Prestige/loop system, insight, upgrades
|
||||
- **discipline-slice.ts** — Discipline activation, XP ticking, perk evaluation
|
||||
- **uiStore.ts** — UI state, modals, debug settings
|
||||
|
||||
**Legacy Store (Migration in Progress):**
|
||||
- **store.ts** — Legacy monolithic store (reduced)
|
||||
- **store/** — Legacy store slices being migrated to `stores/`
|
||||
- **store-modules/** — Legacy store utilities
|
||||
|
||||
#### Discipline System (`src/lib/game/`)
|
||||
- `data/disciplines/` — Per-attunement discipline definitions
|
||||
- `types/disciplines.ts` — `DisciplineDefinition`, `DisciplineState`, perk types
|
||||
- `utils/discipline-math.ts` — `calculateStatBonus`, `calculateManaDrain`, perk helpers
|
||||
- `effects/discipline-effects.ts` — `computeDisciplineEffects()` → feeds `getUnifiedEffects()`
|
||||
- `stores/discipline-slice.ts` — Zustand store for active discipline state
|
||||
|
||||
#### Crafting System (`src/lib/game/crafting-actions/`)
|
||||
- Modular action files for each crafting stage
|
||||
- Design, preparation, application, equipment, disenchant actions
|
||||
|
||||
#### Constants (`src/lib/game/constants/`)
|
||||
- Domain-specific constant files: elements, guardians, spells, rooms, prestige
|
||||
- Barrel exports via `constants/index.ts`
|
||||
|
||||
#### Game Data (`src/lib/game/data/`)
|
||||
- Enchantment effects, equipment types, golems, disciplines, achievements, loot tables
|
||||
- Organized by domain for easy navigation
|
||||
|
||||
### File Size Guidelines
|
||||
|
||||
All files kept under **400 lines** (enforced by pre-commit hook).
|
||||
|
||||
---
|
||||
|
||||
## Appendix: Removed Systems
|
||||
|
||||
The following systems no longer exist and should not be re-introduced:
|
||||
|
||||
| Removed | Replacement |
|
||||
|---------|-------------|
|
||||
| Skill System (study, tiers T1–T5, milestone upgrades) | Discipline System |
|
||||
| `skillStore.ts` | `discipline-slice.ts` |
|
||||
| `skill-evolution-modules/` | `data/disciplines/` + `discipline-math.ts` |
|
||||
| `docs/skills.md` | This document (Discipline System section) |
|
||||
| `docs/strategy/` | Fully implemented; folder removed |
|
||||
| Ascension skills | Deleted (no replacement) |
|
||||
| Scroll crafting | Deleted (violates no-instant-finishing pillar) |
|
||||
| Lifesteal/healing | Banned permanently |
|
||||
|
||||
---
|
||||
|
||||
*Document Version: 2.0 — Disciplines Refactor*
|
||||
*End of Game Briefing Document*
|
||||
@@ -1,14 +0,0 @@
|
||||
# Circular Dependencies
|
||||
Generated: 2026-05-20T19:05:27.642Z
|
||||
Found: 4 circular chain(s) — these MUST be fixed before modifying involved files.
|
||||
|
||||
1. Processed 126 files (1.3s) (3 warnings)
|
||||
2. 1) stores/gameStore.ts > stores/gameActions.ts
|
||||
3. 2) stores/gameStore.ts > stores/gameLoopActions.ts
|
||||
4. 3) stores/gameStore.ts > stores/tick-pipeline.ts
|
||||
|
||||
## How to fix
|
||||
1. Identify which import in the chain can be extracted to a shared types/utils file.
|
||||
2. Move the shared type or function there.
|
||||
3. Both files import from the new shared module instead of each other.
|
||||
4. Run: bunx madge --circular src/lib/game (should return clean)
|
||||
@@ -1,624 +0,0 @@
|
||||
{
|
||||
"_meta": {
|
||||
"generated": "2026-05-20T19:05:26.102Z",
|
||||
"description": "Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.",
|
||||
"usage": "To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry."
|
||||
},
|
||||
"graph": {
|
||||
"constants.ts": [
|
||||
"constants/index.ts"
|
||||
],
|
||||
"constants/core.ts": [],
|
||||
"constants/elements.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"constants/guardians.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"constants/index.ts": [
|
||||
"constants/core.ts",
|
||||
"constants/elements.ts",
|
||||
"constants/guardians.ts",
|
||||
"constants/prestige.ts",
|
||||
"constants/rooms.ts",
|
||||
"constants/spells.ts",
|
||||
"types/game.ts"
|
||||
],
|
||||
"constants/prestige.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"constants/rooms.ts": [
|
||||
"types/game.ts"
|
||||
],
|
||||
"constants/spells-modules/advanced-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/aoe-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/basic-elemental-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/compound-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/enchantment-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/legendary-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/lightning-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/master-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/raw-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells-modules/utility-spells.ts": [
|
||||
"constants/elements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"constants/spells.ts": [
|
||||
"constants/spells-modules/advanced-spells.ts",
|
||||
"constants/spells-modules/aoe-spells.ts",
|
||||
"constants/spells-modules/basic-elemental-spells.ts",
|
||||
"constants/spells-modules/compound-spells.ts",
|
||||
"constants/spells-modules/enchantment-spells.ts",
|
||||
"constants/spells-modules/legendary-spells.ts",
|
||||
"constants/spells-modules/lightning-spells.ts",
|
||||
"constants/spells-modules/master-spells.ts",
|
||||
"constants/spells-modules/raw-spells.ts",
|
||||
"constants/spells-modules/utility-spells.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-actions/application-actions.ts": [
|
||||
"crafting-apply.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-actions/computed-getters.ts": [
|
||||
"data/enchantment-effects.ts",
|
||||
"stores/craftingStore.types.ts"
|
||||
],
|
||||
"crafting-actions/crafting-equipment-actions.ts": [
|
||||
"crafting-equipment.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-actions/design-actions.ts": [
|
||||
"crafting-design.ts",
|
||||
"crafting-utils.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-actions/disenchant-actions.ts": [
|
||||
"stores/craftingStore.types.ts"
|
||||
],
|
||||
"crafting-actions/equipment-actions.ts": [
|
||||
"crafting-utils.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-actions/index.ts": [
|
||||
"crafting-actions/application-actions.ts",
|
||||
"crafting-actions/computed-getters.ts",
|
||||
"crafting-actions/crafting-equipment-actions.ts",
|
||||
"crafting-actions/design-actions.ts",
|
||||
"crafting-actions/disenchant-actions.ts",
|
||||
"crafting-actions/equipment-actions.ts",
|
||||
"crafting-actions/preparation-actions.ts"
|
||||
],
|
||||
"crafting-actions/preparation-actions.ts": [
|
||||
"crafting-prep.ts",
|
||||
"stores/craftingStore.types.ts"
|
||||
],
|
||||
"crafting-apply.ts": [
|
||||
"crafting-utils.ts",
|
||||
"data/attunements.ts",
|
||||
"data/enchantment-effects.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-attunements.ts": [
|
||||
"data/attunements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-design.ts": [
|
||||
"data/attunements.ts",
|
||||
"data/enchantment-effects.ts",
|
||||
"data/equipment/index.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-equipment.ts": [
|
||||
"crafting-utils.ts",
|
||||
"data/crafting-recipes.ts",
|
||||
"data/equipment/index.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-loot.ts": [
|
||||
"data/crafting-recipes.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-prep.ts": [
|
||||
"crafting-utils.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"crafting-utils.ts": [
|
||||
"data/crafting-recipes.ts",
|
||||
"data/equipment/index.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"data/achievements.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"data/attunements.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"data/crafting-recipes.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/disciplines/base.ts": [
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"data/disciplines/enchanter.ts": [
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"data/disciplines/fabricator.ts": [
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"data/disciplines/index.ts": [
|
||||
"data/disciplines/base.ts",
|
||||
"data/disciplines/enchanter.ts",
|
||||
"data/disciplines/fabricator.ts",
|
||||
"data/disciplines/invoker.ts",
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"data/disciplines/invoker.ts": [
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"data/enchantment-effects.ts": [
|
||||
"data/enchantments/index.ts"
|
||||
],
|
||||
"data/enchantment-types.ts": [
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/combat-effects.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/defense-effects.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/elemental-effects.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/index.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/enchantments/combat-effects.ts",
|
||||
"data/enchantments/defense-effects.ts",
|
||||
"data/enchantments/elemental-effects.ts",
|
||||
"data/enchantments/mana-effects.ts",
|
||||
"data/enchantments/special-effects.ts",
|
||||
"data/enchantments/spell-effects/index.ts",
|
||||
"data/enchantments/utility-effects.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/mana-effects.ts": [
|
||||
"constants.ts",
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/special-effects.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/basic-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/index.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/enchantments/spell-effects/basic-spells.ts",
|
||||
"data/enchantments/spell-effects/legendary-spells.ts",
|
||||
"data/enchantments/spell-effects/lightning-spells.ts",
|
||||
"data/enchantments/spell-effects/metal-spells.ts",
|
||||
"data/enchantments/spell-effects/sand-spells.ts",
|
||||
"data/enchantments/spell-effects/tier2-spells.ts",
|
||||
"data/enchantments/spell-effects/tier3-spells.ts",
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/legendary-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/lightning-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/metal-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/sand-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/tier2-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/tier3-spells.ts": [
|
||||
"data/enchantments/spell-effects/types.ts"
|
||||
],
|
||||
"data/enchantments/spell-effects/types.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/enchantments/utility-effects.ts": [
|
||||
"data/enchantment-types.ts",
|
||||
"data/equipment/index.ts"
|
||||
],
|
||||
"data/equipment/accessories.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/body.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/casters.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/catalysts.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/equipment-types-data.ts": [
|
||||
"data/equipment/accessories.ts",
|
||||
"data/equipment/body.ts",
|
||||
"data/equipment/casters.ts",
|
||||
"data/equipment/catalysts.ts",
|
||||
"data/equipment/feet.ts",
|
||||
"data/equipment/hands.ts",
|
||||
"data/equipment/head.ts",
|
||||
"data/equipment/shields.ts",
|
||||
"data/equipment/swords.ts"
|
||||
],
|
||||
"data/equipment/feet.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/hands.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/head.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/index.ts": [
|
||||
"data/equipment/accessories.ts",
|
||||
"data/equipment/body.ts",
|
||||
"data/equipment/casters.ts",
|
||||
"data/equipment/catalysts.ts",
|
||||
"data/equipment/equipment-types-data.ts",
|
||||
"data/equipment/feet.ts",
|
||||
"data/equipment/hands.ts",
|
||||
"data/equipment/head.ts",
|
||||
"data/equipment/shields.ts",
|
||||
"data/equipment/swords.ts",
|
||||
"data/equipment/types.ts",
|
||||
"data/equipment/utils.ts"
|
||||
],
|
||||
"data/equipment/shields.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/swords.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/equipment/types.ts": [
|
||||
"types/equipmentSlot.ts"
|
||||
],
|
||||
"data/equipment/utils.ts": [
|
||||
"data/equipment/equipment-types-data.ts",
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/fabricator-recipes.ts": [
|
||||
"data/equipment/types.ts"
|
||||
],
|
||||
"data/golems/base-golems.ts": [
|
||||
"data/golems/types.ts"
|
||||
],
|
||||
"data/golems/elemental-golems.ts": [
|
||||
"data/golems/types.ts"
|
||||
],
|
||||
"data/golems/golems-data.ts": [
|
||||
"data/golems/base-golems.ts",
|
||||
"data/golems/elemental-golems.ts",
|
||||
"data/golems/hybrid-golems.ts"
|
||||
],
|
||||
"data/golems/hybrid-golems.ts": [
|
||||
"data/golems/types.ts"
|
||||
],
|
||||
"data/golems/index.ts": [
|
||||
"data/golems/golems-data.ts",
|
||||
"data/golems/types.ts",
|
||||
"data/golems/utils.ts"
|
||||
],
|
||||
"data/golems/types.ts": [],
|
||||
"data/golems/utils.ts": [
|
||||
"data/golems/golems-data.ts",
|
||||
"data/golems/types.ts"
|
||||
],
|
||||
"data/guardian-encounters.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"data/loot-drops.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"effects.ts": [
|
||||
"data/enchantment-effects.ts",
|
||||
"effects/discipline-effects.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.ts",
|
||||
"effects/upgrade-effects.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"effects/discipline-effects.ts": [
|
||||
"data/disciplines/index.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"types/disciplines.ts",
|
||||
"utils/discipline-math.ts"
|
||||
],
|
||||
"effects/dynamic-compute.ts": [
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.types.ts"
|
||||
],
|
||||
"effects/special-effects.ts": [
|
||||
"effects/upgrade-effects.types.ts"
|
||||
],
|
||||
"effects/upgrade-effects.ts": [
|
||||
"effects/upgrade-effects.types.ts"
|
||||
],
|
||||
"effects/upgrade-effects.types.ts": [],
|
||||
"hooks/useGameDerived.ts": [
|
||||
"constants.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"utils/index.ts",
|
||||
"utils/pact-utils.ts"
|
||||
],
|
||||
"stores/attunementStore.ts": [
|
||||
"data/attunements.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"stores/combat-actions.ts": [
|
||||
"constants.ts",
|
||||
"effects/discipline-effects.ts",
|
||||
"stores/combat-state.types.ts",
|
||||
"types.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/combat-state.types.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"stores/combatStore.ts": [
|
||||
"stores/combat-actions.ts",
|
||||
"stores/combat-state.types.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"types.ts",
|
||||
"utils/activity-log.ts",
|
||||
"utils/index.ts",
|
||||
"utils/room-utils.ts"
|
||||
],
|
||||
"stores/craftingStore.ts": [
|
||||
"crafting-actions/application-actions.ts",
|
||||
"crafting-actions/preparation-actions.ts",
|
||||
"crafting-design.ts",
|
||||
"crafting-equipment.ts",
|
||||
"crafting-utils.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/uiStore.ts",
|
||||
"types.ts",
|
||||
"types/equipmentSlot.ts"
|
||||
],
|
||||
"stores/craftingStore.types.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"stores/discipline-slice.ts": [
|
||||
"data/disciplines/base.ts",
|
||||
"data/disciplines/enchanter.ts",
|
||||
"data/disciplines/fabricator.ts",
|
||||
"data/disciplines/invoker.ts",
|
||||
"types/disciplines.ts",
|
||||
"utils/discipline-math.ts"
|
||||
],
|
||||
"stores/gameActions.ts": [
|
||||
"effects/discipline-effects.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/uiStore.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/gameHooks.ts": [
|
||||
"constants.ts",
|
||||
"effects.ts",
|
||||
"effects/discipline-effects.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/craftingStore.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/uiStore.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/gameLoopActions.ts": [
|
||||
"constants.ts",
|
||||
"effects/discipline-effects.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/uiStore.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/gameStore.ts": [
|
||||
"constants.ts",
|
||||
"data/attunements.ts",
|
||||
"effects.ts",
|
||||
"effects/discipline-effects.ts",
|
||||
"effects/special-effects.ts",
|
||||
"effects/upgrade-effects.types.ts",
|
||||
"stores/attunementStore.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/craftingStore.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameActions.ts",
|
||||
"stores/gameLoopActions.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/tick-pipeline.ts",
|
||||
"stores/uiStore.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/index.ts": [
|
||||
"constants.ts",
|
||||
"stores/attunementStore.ts",
|
||||
"stores/combat-state.types.ts",
|
||||
"stores/combatStore.ts",
|
||||
"stores/craftingStore.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameHooks.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/uiStore.ts",
|
||||
"utils/index.ts"
|
||||
],
|
||||
"stores/manaStore.ts": [
|
||||
"constants.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"stores/prestigeStore.ts": [
|
||||
"constants.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"stores/tick-pipeline.ts": [
|
||||
"stores/attunementStore.ts",
|
||||
"stores/combat-state.types.ts",
|
||||
"stores/craftingStore.types.ts",
|
||||
"stores/discipline-slice.ts",
|
||||
"stores/gameStore.ts",
|
||||
"stores/manaStore.ts",
|
||||
"stores/prestigeStore.ts",
|
||||
"stores/uiStore.ts"
|
||||
],
|
||||
"stores/uiStore.ts": [],
|
||||
"types.ts": [
|
||||
"data/equipment/types.ts",
|
||||
"types/attunements.ts",
|
||||
"types/elements.ts",
|
||||
"types/equipment.ts",
|
||||
"types/equipmentSlot.ts",
|
||||
"types/game.ts",
|
||||
"types/spells.ts"
|
||||
],
|
||||
"types/attunements.ts": [],
|
||||
"types/disciplines.ts": [
|
||||
"types/elements.ts"
|
||||
],
|
||||
"types/elements.ts": [],
|
||||
"types/equipment.ts": [
|
||||
"types/equipmentSlot.ts"
|
||||
],
|
||||
"types/equipmentSlot.ts": [],
|
||||
"types/game.ts": [
|
||||
"types/attunements.ts",
|
||||
"types/elements.ts",
|
||||
"types/equipment.ts",
|
||||
"types/spells.ts"
|
||||
],
|
||||
"types/index.ts": [
|
||||
"types/attunements.ts",
|
||||
"types/elements.ts",
|
||||
"types/equipment.ts",
|
||||
"types/equipmentSlot.ts",
|
||||
"types/game.ts",
|
||||
"types/spells.ts"
|
||||
],
|
||||
"types/spells.ts": [],
|
||||
"utils/activity-log.ts": [
|
||||
"types.ts"
|
||||
],
|
||||
"utils/combat-utils.ts": [
|
||||
"constants.ts",
|
||||
"data/enchantment-effects.ts",
|
||||
"types.ts",
|
||||
"utils/mana-utils.ts"
|
||||
],
|
||||
"utils/discipline-math.ts": [
|
||||
"types/disciplines.ts"
|
||||
],
|
||||
"utils/enemy-generator.ts": [
|
||||
"types.ts",
|
||||
"utils/enemy-utils.ts",
|
||||
"utils/floor-utils.ts"
|
||||
],
|
||||
"utils/enemy-utils.ts": [
|
||||
"constants.ts",
|
||||
"types.ts",
|
||||
"utils/floor-utils.ts"
|
||||
],
|
||||
"utils/floor-utils.ts": [
|
||||
"constants.ts"
|
||||
],
|
||||
"utils/formatting.ts": [],
|
||||
"utils/index.ts": [
|
||||
"utils/combat-utils.ts",
|
||||
"utils/floor-utils.ts",
|
||||
"utils/formatting.ts",
|
||||
"utils/mana-utils.ts"
|
||||
],
|
||||
"utils/mana-utils.ts": [
|
||||
"constants.ts",
|
||||
"data/attunements.ts",
|
||||
"effects/upgrade-effects.types.ts",
|
||||
"types.ts"
|
||||
],
|
||||
"utils/pact-utils.ts": [
|
||||
"constants.ts"
|
||||
],
|
||||
"utils/room-utils.ts": [
|
||||
"constants.ts",
|
||||
"types.ts",
|
||||
"utils/enemy-utils.ts",
|
||||
"utils/floor-utils.ts"
|
||||
],
|
||||
"utils/spire-utils.ts": [
|
||||
"constants.ts",
|
||||
"data/guardian-encounters.ts",
|
||||
"types.ts",
|
||||
"utils/enemy-utils.ts",
|
||||
"utils/floor-utils.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,373 +0,0 @@
|
||||
Mana-Loop/
|
||||
├── .gitea/
|
||||
│ └── workflows/
|
||||
│ └── docker-build.yaml
|
||||
├── .husky/
|
||||
│ ├── scripts/
|
||||
│ │ ├── check-file-size.js
|
||||
│ │ ├── generate-dependency-graph.js
|
||||
│ │ └── generate-project-tree.js
|
||||
│ ├── post-merge
|
||||
│ └── pre-commit
|
||||
├── docs/
|
||||
│ ├── GAME_BRIEFING.md
|
||||
│ ├── circular-deps.txt
|
||||
│ ├── dependency-graph.json
|
||||
│ └── project-structure.txt
|
||||
├── e2e/
|
||||
├── playwright-report/
|
||||
│ ├── data/
|
||||
│ │ ├── 1513ea5b9ea5985996f67ca36f2bc4d34add51f1.webm
|
||||
│ │ ├── 23eb0c541b68af33d962c3ac20ba74eb9ba477b3.md
|
||||
│ │ ├── 25af666b2659e25b596f1eb58ca5629f38f0fa74.png
|
||||
│ │ ├── 294ed85dfd5fbd79486f5274129a1d8b83cfa676.png
|
||||
│ │ ├── 37c584c77b029af648d58a063f9724538662c6d0.webm
|
||||
│ │ ├── 4d1229974e5326e2351c32921095bff6e989005e.png
|
||||
│ │ ├── 4f22caa1a2b454f813b4c68c510a2ef0b340a248.md
|
||||
│ │ ├── 6408809a17a0a92b06e5cc75fcee95e9778138c4.md
|
||||
│ │ ├── 66a1f85e1e6a655dfb90f10bd1a60887cffa87da.md
|
||||
│ │ ├── 6b97a6c84cfda4c717249f240d0a80e1b195498a.png
|
||||
│ │ ├── 6c1c7d873c0c5262ffca286974649ec3bf1eb3f4.md
|
||||
│ │ ├── 72280c2048aa77a6b58afc7bba8f9db3dfd1c68b.webm
|
||||
│ │ ├── 8035d8abad1bfb2166374e25b55f52324fef1275.png
|
||||
│ │ ├── 8396039272c615989307eaf4113a77b0d77cfbdd.webm
|
||||
│ │ ├── a69b7491fd34ee0580bc0153a90dc146b509aac3.md
|
||||
│ │ ├── bb3c9d51cafcb654c796b093c72c5b702f52faed.webm
|
||||
│ │ ├── bee318a3f485bd3e98088a4735e02181585e431b.png
|
||||
│ │ ├── c0f44af041cac0f5d5efaec8a9a9e5d165c8d26a.png
|
||||
│ │ ├── cf49b56fde3bacf27d842ef4bfeed4887d97f01e.webm
|
||||
│ │ ├── dbea283cbcf6aaed195161609c68ab7de0c6adfa.png
|
||||
│ │ ├── dc2d9fe97c08dd61f42a27ead0829c2d74322ccc.webm
|
||||
│ │ ├── e3d1abb209771785e7247c38fd372d8fd61b7ea4.md
|
||||
│ │ ├── e59720b989841926cc856d6a00be0a6f8365cf49.webm
|
||||
│ │ └── f5ba77f8b20c452bd2c31718b44897276882a465.md
|
||||
│ └── index.html
|
||||
├── public/
|
||||
│ ├── fonts/
|
||||
│ │ ├── GeistMonoVF.woff
|
||||
│ │ └── GeistVF.woff
|
||||
│ ├── logo.svg
|
||||
│ └── robots.txt
|
||||
├── src/
|
||||
│ ├── app/
|
||||
│ │ ├── components/
|
||||
│ │ │ ├── GameOverScreen.tsx
|
||||
│ │ │ ├── GrimoireTab.tsx
|
||||
│ │ │ └── LeftPanel.tsx
|
||||
│ │ ├── globals.css
|
||||
│ │ ├── layout.tsx
|
||||
│ │ └── page.tsx
|
||||
│ ├── components/
|
||||
│ │ ├── game/
|
||||
│ │ │ ├── LootInventory/
|
||||
│ │ │ │ ├── BlueprintsSection.tsx
|
||||
│ │ │ │ ├── EquipmentItem.tsx
|
||||
│ │ │ │ ├── EssenceItem.tsx
|
||||
│ │ │ │ ├── MaterialItem.tsx
|
||||
│ │ │ │ ├── icons.ts
|
||||
│ │ │ │ └── types.ts
|
||||
│ │ │ ├── crafting/
|
||||
│ │ │ │ ├── EnchantmentDesigner/
|
||||
│ │ │ │ │ ├── DesignForm.tsx
|
||||
│ │ │ │ │ ├── EffectSelector.tsx
|
||||
│ │ │ │ │ ├── EquipmentTypeSelector.tsx
|
||||
│ │ │ │ │ ├── SavedDesigns.tsx
|
||||
│ │ │ │ │ ├── types.ts
|
||||
│ │ │ │ │ └── utils.ts
|
||||
│ │ │ │ ├── EnchantmentApplier.tsx
|
||||
│ │ │ │ ├── EnchantmentDesigner.tsx
|
||||
│ │ │ │ ├── EnchantmentPreparer.tsx
|
||||
│ │ │ │ ├── EquipmentCrafter.tsx
|
||||
│ │ │ │ └── index.tsx
|
||||
│ │ │ ├── debug/
|
||||
│ │ │ │ ├── AttunementDebug.tsx
|
||||
│ │ │ │ ├── ElementDebug.tsx
|
||||
│ │ │ │ ├── GameStateDebug.tsx
|
||||
│ │ │ │ ├── GolemDebug.tsx
|
||||
│ │ │ │ ├── PactDebug.tsx
|
||||
│ │ │ │ ├── debug-context.tsx
|
||||
│ │ │ │ └── index.tsx
|
||||
│ │ │ ├── shared/
|
||||
│ │ │ ├── tabs/
|
||||
│ │ │ │ ├── CraftingTab/
|
||||
│ │ │ │ │ ├── EnchanterSubTab.tsx
|
||||
│ │ │ │ │ └── FabricatorSubTab.tsx
|
||||
│ │ │ │ ├── DebugTab/
|
||||
│ │ │ │ │ ├── AchievementDebugSection.tsx
|
||||
│ │ │ │ │ ├── AttunementDebugSection.tsx
|
||||
│ │ │ │ │ ├── DisciplineDebugSection.tsx
|
||||
│ │ │ │ │ ├── ElementDebugSection.tsx
|
||||
│ │ │ │ │ ├── GameStateDebugSection.tsx
|
||||
│ │ │ │ │ ├── GolemDebugSection.tsx
|
||||
│ │ │ │ │ ├── PactDebugSection.tsx
|
||||
│ │ │ │ │ └── SpireDebugSection.tsx
|
||||
│ │ │ │ ├── EquipmentTab/
|
||||
│ │ │ │ │ ├── EquipmentEffectsSummary.tsx
|
||||
│ │ │ │ │ ├── EquipmentSlotGrid.tsx
|
||||
│ │ │ │ │ └── InventoryList.tsx
|
||||
│ │ │ │ ├── SpireCombatPage/
|
||||
│ │ │ │ │ ├── RoomDisplay.tsx
|
||||
│ │ │ │ │ ├── SpireActivityLog.tsx
|
||||
│ │ │ │ │ ├── SpireCombatControls.tsx
|
||||
│ │ │ │ │ ├── SpireCombatPage.tsx
|
||||
│ │ │ │ │ ├── SpireHeader.tsx
|
||||
│ │ │ │ │ ├── SpireManaDisplay.tsx
|
||||
│ │ │ │ │ └── index.ts
|
||||
│ │ │ │ ├── StatsTab/
|
||||
│ │ │ │ │ ├── CombatStatsSection.tsx
|
||||
│ │ │ │ │ ├── ElementStatsSection.tsx
|
||||
│ │ │ │ │ ├── LoopStatsSection.tsx
|
||||
│ │ │ │ │ ├── ManaStatsSection.tsx
|
||||
│ │ │ │ │ ├── PactStatusSection.tsx
|
||||
│ │ │ │ │ └── StudyStatsSection.tsx
|
||||
│ │ │ │ ├── AchievementsTab.tsx
|
||||
│ │ │ │ ├── ActivityLog.tsx
|
||||
│ │ │ │ ├── AttunementsTab.test.ts
|
||||
│ │ │ │ ├── AttunementsTab.tsx
|
||||
│ │ │ │ ├── CraftingTab.test.ts
|
||||
│ │ │ │ ├── CraftingTab.tsx
|
||||
│ │ │ │ ├── DebugTab.test.ts
|
||||
│ │ │ │ ├── DebugTab.tsx
|
||||
│ │ │ │ ├── DisciplinesTab.tsx
|
||||
│ │ │ │ ├── EquipmentTab.test.ts
|
||||
│ │ │ │ ├── EquipmentTab.tsx
|
||||
│ │ │ │ ├── GolemancyTab.test.ts
|
||||
│ │ │ │ ├── GolemancyTab.tsx
|
||||
│ │ │ │ ├── GuardianPactsTab.test.ts
|
||||
│ │ │ │ ├── GuardianPactsTab.tsx
|
||||
│ │ │ │ ├── PrestigeTab.test.ts
|
||||
│ │ │ │ ├── PrestigeTab.tsx
|
||||
│ │ │ │ ├── SpellsTab.tsx
|
||||
│ │ │ │ ├── SpireSummaryTab.test.ts
|
||||
│ │ │ │ ├── SpireSummaryTab.tsx
|
||||
│ │ │ │ ├── StatsTab.tsx
|
||||
│ │ │ │ ├── guardian-pacts-components.tsx
|
||||
│ │ │ │ └── index.ts
|
||||
│ │ │ ├── ActionButtons.tsx
|
||||
│ │ │ ├── ActivityLogPanel.tsx
|
||||
│ │ │ ├── AttunementStatus.tsx
|
||||
│ │ │ ├── GameToast.tsx
|
||||
│ │ │ ├── ManaDisplay.tsx
|
||||
│ │ │ ├── TimeDisplay.tsx
|
||||
│ │ │ ├── UpgradeDialog.tsx
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ └── types.ts
|
||||
│ │ ├── ui/
|
||||
│ │ │ ├── action-button.tsx
|
||||
│ │ │ ├── alert-dialog.tsx
|
||||
│ │ │ ├── badge.tsx
|
||||
│ │ │ ├── button.tsx
|
||||
│ │ │ ├── card.tsx
|
||||
│ │ │ ├── dialog.tsx
|
||||
│ │ │ ├── element-badge.tsx
|
||||
│ │ │ ├── game-card.tsx
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ ├── input.tsx
|
||||
│ │ │ ├── label.tsx
|
||||
│ │ │ ├── mana-bar.tsx
|
||||
│ │ │ ├── progress.tsx
|
||||
│ │ │ ├── scroll-area.tsx
|
||||
│ │ │ ├── section-header.tsx
|
||||
│ │ │ ├── select.tsx
|
||||
│ │ │ ├── separator.tsx
|
||||
│ │ │ ├── sheet.tsx
|
||||
│ │ │ ├── skeleton.tsx
|
||||
│ │ │ ├── stat-row.tsx
|
||||
│ │ │ ├── stepper.tsx
|
||||
│ │ │ ├── switch.tsx
|
||||
│ │ │ ├── tabs.tsx
|
||||
│ │ │ ├── toast.tsx
|
||||
│ │ │ ├── toaster.tsx
|
||||
│ │ │ ├── toggle.tsx
|
||||
│ │ │ ├── tooltip-info.tsx
|
||||
│ │ │ ├── tooltip.tsx
|
||||
│ │ │ └── value-display.tsx
|
||||
│ │ └── ErrorBoundary.tsx
|
||||
│ ├── hooks/
|
||||
│ │ ├── use-mobile.ts
|
||||
│ │ └── use-toast.ts
|
||||
│ └── lib/
|
||||
│ ├── game/
|
||||
│ │ ├── __tests__/
|
||||
│ │ │ ├── store-method-tests/
|
||||
│ │ │ ├── achievements.test.ts
|
||||
│ │ │ ├── bug-fixes.test.ts
|
||||
│ │ │ ├── combat-utils.test.ts
|
||||
│ │ │ ├── computed-stats.test.ts
|
||||
│ │ │ ├── discipline-math.test.ts
|
||||
│ │ │ ├── enemy-generator.test.ts
|
||||
│ │ │ ├── floor-utils.test.ts
|
||||
│ │ │ ├── formatting.test.ts
|
||||
│ │ │ ├── mana-utils.test.ts
|
||||
│ │ │ ├── regression-fixes.test.ts
|
||||
│ │ │ ├── spire-utils.test.ts
|
||||
│ │ │ ├── store-actions-combat-prestige.test.ts
|
||||
│ │ │ ├── store-actions-discipline.test.ts
|
||||
│ │ │ ├── store-actions-mana.test.ts
|
||||
│ │ │ ├── store-actions.test.ts
|
||||
│ │ │ └── tick-integration.test.ts
|
||||
│ │ ├── constants/
|
||||
│ │ │ ├── spells-modules/
|
||||
│ │ │ │ ├── advanced-spells.ts
|
||||
│ │ │ │ ├── aoe-spells.ts
|
||||
│ │ │ │ ├── basic-elemental-spells.ts
|
||||
│ │ │ │ ├── compound-spells.ts
|
||||
│ │ │ │ ├── enchantment-spells.ts
|
||||
│ │ │ │ ├── legendary-spells.ts
|
||||
│ │ │ │ ├── lightning-spells.ts
|
||||
│ │ │ │ ├── master-spells.ts
|
||||
│ │ │ │ ├── raw-spells.ts
|
||||
│ │ │ │ └── utility-spells.ts
|
||||
│ │ │ ├── core.ts
|
||||
│ │ │ ├── elements.ts
|
||||
│ │ │ ├── guardians.ts
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ ├── prestige.ts
|
||||
│ │ │ ├── rooms.ts
|
||||
│ │ │ └── spells.ts
|
||||
│ │ ├── crafting-actions/
|
||||
│ │ │ ├── application-actions.ts
|
||||
│ │ │ ├── computed-getters.ts
|
||||
│ │ │ ├── crafting-equipment-actions.ts
|
||||
│ │ │ ├── design-actions.ts
|
||||
│ │ │ ├── disenchant-actions.ts
|
||||
│ │ │ ├── equipment-actions.ts
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ └── preparation-actions.ts
|
||||
│ │ ├── data/
|
||||
│ │ │ ├── disciplines/
|
||||
│ │ │ │ ├── base.ts
|
||||
│ │ │ │ ├── enchanter.ts
|
||||
│ │ │ │ ├── fabricator.ts
|
||||
│ │ │ │ ├── index.ts
|
||||
│ │ │ │ └── invoker.ts
|
||||
│ │ │ ├── enchantments/
|
||||
│ │ │ │ ├── spell-effects/
|
||||
│ │ │ │ │ ├── basic-spells.ts
|
||||
│ │ │ │ │ ├── index.ts
|
||||
│ │ │ │ │ ├── legendary-spells.ts
|
||||
│ │ │ │ │ ├── lightning-spells.ts
|
||||
│ │ │ │ │ ├── metal-spells.ts
|
||||
│ │ │ │ │ ├── sand-spells.ts
|
||||
│ │ │ │ │ ├── tier2-spells.ts
|
||||
│ │ │ │ │ ├── tier3-spells.ts
|
||||
│ │ │ │ │ └── types.ts
|
||||
│ │ │ │ ├── combat-effects.ts
|
||||
│ │ │ │ ├── defense-effects.ts
|
||||
│ │ │ │ ├── elemental-effects.ts
|
||||
│ │ │ │ ├── index.ts
|
||||
│ │ │ │ ├── mana-effects.ts
|
||||
│ │ │ │ ├── special-effects.ts
|
||||
│ │ │ │ └── utility-effects.ts
|
||||
│ │ │ ├── equipment/
|
||||
│ │ │ │ ├── accessories.ts
|
||||
│ │ │ │ ├── body.ts
|
||||
│ │ │ │ ├── casters.ts
|
||||
│ │ │ │ ├── catalysts.ts
|
||||
│ │ │ │ ├── equipment-types-data.ts
|
||||
│ │ │ │ ├── feet.ts
|
||||
│ │ │ │ ├── hands.ts
|
||||
│ │ │ │ ├── head.ts
|
||||
│ │ │ │ ├── index.ts
|
||||
│ │ │ │ ├── shields.ts
|
||||
│ │ │ │ ├── swords.ts
|
||||
│ │ │ │ ├── types.ts
|
||||
│ │ │ │ └── utils.ts
|
||||
│ │ │ ├── golems/
|
||||
│ │ │ │ ├── base-golems.ts
|
||||
│ │ │ │ ├── elemental-golems.ts
|
||||
│ │ │ │ ├── golems-data.ts
|
||||
│ │ │ │ ├── hybrid-golems.ts
|
||||
│ │ │ │ ├── index.ts
|
||||
│ │ │ │ ├── types.ts
|
||||
│ │ │ │ └── utils.ts
|
||||
│ │ │ ├── achievements.ts
|
||||
│ │ │ ├── attunements.ts
|
||||
│ │ │ ├── crafting-recipes.ts
|
||||
│ │ │ ├── enchantment-effects.ts
|
||||
│ │ │ ├── enchantment-types.ts
|
||||
│ │ │ ├── fabricator-recipes.ts
|
||||
│ │ │ ├── guardian-encounters.ts
|
||||
│ │ │ └── loot-drops.ts
|
||||
│ │ ├── effects/
|
||||
│ │ │ ├── discipline-effects.ts
|
||||
│ │ │ ├── dynamic-compute.ts
|
||||
│ │ │ ├── special-effects.ts
|
||||
│ │ │ ├── upgrade-effects.ts
|
||||
│ │ │ └── upgrade-effects.types.ts
|
||||
│ │ ├── hooks/
|
||||
│ │ │ └── useGameDerived.ts
|
||||
│ │ ├── stores/
|
||||
│ │ │ ├── attunementStore.ts
|
||||
│ │ │ ├── combat-actions.ts
|
||||
│ │ │ ├── combat-state.types.ts
|
||||
│ │ │ ├── combatStore.ts
|
||||
│ │ │ ├── craftingStore.ts
|
||||
│ │ │ ├── craftingStore.types.ts
|
||||
│ │ │ ├── discipline-slice.ts
|
||||
│ │ │ ├── gameActions.ts
|
||||
│ │ │ ├── gameHooks.ts
|
||||
│ │ │ ├── gameLoopActions.ts
|
||||
│ │ │ ├── gameStore.ts
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ ├── manaStore.ts
|
||||
│ │ │ ├── prestigeStore.ts
|
||||
│ │ │ ├── tick-pipeline.ts
|
||||
│ │ │ └── uiStore.ts
|
||||
│ │ ├── types/
|
||||
│ │ │ ├── attunements.ts
|
||||
│ │ │ ├── disciplines.ts
|
||||
│ │ │ ├── elements.ts
|
||||
│ │ │ ├── equipment.ts
|
||||
│ │ │ ├── equipmentSlot.ts
|
||||
│ │ │ ├── game.ts
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ └── spells.ts
|
||||
│ │ ├── utils/
|
||||
│ │ │ ├── activity-log.ts
|
||||
│ │ │ ├── combat-utils.ts
|
||||
│ │ │ ├── discipline-math.ts
|
||||
│ │ │ ├── enemy-generator.ts
|
||||
│ │ │ ├── enemy-utils.ts
|
||||
│ │ │ ├── floor-utils.ts
|
||||
│ │ │ ├── formatting.ts
|
||||
│ │ │ ├── index.ts
|
||||
│ │ │ ├── mana-utils.ts
|
||||
│ │ │ ├── pact-utils.ts
|
||||
│ │ │ ├── result.ts
|
||||
│ │ │ ├── room-utils.ts
|
||||
│ │ │ ├── safe-persist.ts
|
||||
│ │ │ └── spire-utils.ts
|
||||
│ │ ├── constants.ts
|
||||
│ │ ├── crafting-apply.ts
|
||||
│ │ ├── crafting-attunements.ts
|
||||
│ │ ├── crafting-design.ts
|
||||
│ │ ├── crafting-equipment.ts
|
||||
│ │ ├── crafting-loot.ts
|
||||
│ │ ├── crafting-prep.ts
|
||||
│ │ ├── crafting-utils.ts
|
||||
│ │ ├── effects.ts
|
||||
│ │ └── types.ts
|
||||
│ └── utils.ts
|
||||
├── test-results/
|
||||
│ └── .last-run.json
|
||||
├── .dockerignore
|
||||
├── .gitignore
|
||||
├── AGENTS.md
|
||||
├── Caddyfile
|
||||
├── Dockerfile
|
||||
├── README.md
|
||||
├── bun.lock
|
||||
├── bunfig.toml
|
||||
├── components.json
|
||||
├── docker-compose.yml
|
||||
├── eslint.config.mjs
|
||||
├── next.config.ts
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
├── playwright.config.ts
|
||||
├── postcss.config.mjs
|
||||
├── scorecard.png
|
||||
├── tailwind.config.ts
|
||||
├── tsconfig.json
|
||||
└── vitest.config.ts
|
||||
Executable
Generated
-13694
File diff suppressed because it is too large
Load Diff
+64
-67
@@ -3,95 +3,92 @@
|
||||
"version": "0.2.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3000 --hostname 0.0.0.0 2>&1 | tee dev.log",
|
||||
"dev": "next dev -p 3000 2>&1 | tee dev.log",
|
||||
"build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
|
||||
"start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "eslint .",
|
||||
"test": "vitest",
|
||||
"test:e2e": "playwright test",
|
||||
"test:coverage": "vitest --coverage",
|
||||
"prepare": "husky"
|
||||
"db:push": "prisma db push",
|
||||
"db:generate": "prisma generate",
|
||||
"db:migrate": "prisma migrate dev",
|
||||
"db:reset": "prisma migrate reset"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@radix-ui/react-accordion": "^1.2.12",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.8",
|
||||
"@radix-ui/react-avatar": "^1.1.11",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-hover-card": "^1.1.15",
|
||||
"@radix-ui/react-label": "^2.1.8",
|
||||
"@radix-ui/react-menubar": "^1.1.16",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-progress": "^1.1.8",
|
||||
"@radix-ui/react-radio-group": "^1.3.8",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.8",
|
||||
"@radix-ui/react-slider": "^1.3.6",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-switch": "^1.2.6",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-toast": "^1.2.15",
|
||||
"@radix-ui/react-toggle": "^1.1.10",
|
||||
"@radix-ui/react-toggle-group": "^1.1.11",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@reactuses/core": "^6.3.1",
|
||||
"@tanstack/react-query": "^5.100.10",
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@mdxeditor/editor": "^3.39.1",
|
||||
"@prisma/client": "^6.11.1",
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.14",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.7",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.2",
|
||||
"@radix-ui/react-collapsible": "^1.1.11",
|
||||
"@radix-ui/react-context-menu": "^2.2.15",
|
||||
"@radix-ui/react-dialog": "^1.1.14",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||
"@radix-ui/react-hover-card": "^1.1.14",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-menubar": "^1.1.15",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.13",
|
||||
"@radix-ui/react-popover": "^1.1.14",
|
||||
"@radix-ui/react-progress": "^1.1.7",
|
||||
"@radix-ui/react-radio-group": "^1.3.7",
|
||||
"@radix-ui/react-scroll-area": "^1.2.9",
|
||||
"@radix-ui/react-select": "^2.2.5",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slider": "^1.3.5",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-switch": "^1.2.5",
|
||||
"@radix-ui/react-tabs": "^1.1.12",
|
||||
"@radix-ui/react-toast": "^1.2.14",
|
||||
"@radix-ui/react-toggle": "^1.1.9",
|
||||
"@radix-ui/react-toggle-group": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.7",
|
||||
"@reactuses/core": "^6.0.5",
|
||||
"@tanstack/react-query": "^5.82.0",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"framer-motion": "^12.38.0",
|
||||
"husky": "^9.1.7",
|
||||
"framer-motion": "^12.23.2",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^0.525.0",
|
||||
"next": "^16.2.6",
|
||||
"next": "^16.1.1",
|
||||
"next-auth": "^4.24.11",
|
||||
"next-intl": "^4.3.4",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.2.6",
|
||||
"react-day-picker": "^9.14.0",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-hook-form": "^7.76.0",
|
||||
"prisma": "^6.11.1",
|
||||
"react": "^19.0.0",
|
||||
"react-day-picker": "^9.8.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.60.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^3.0.6",
|
||||
"react-syntax-highlighter": "^15.6.6",
|
||||
"react-resizable-panels": "^3.0.3",
|
||||
"react-syntax-highlighter": "^15.6.1",
|
||||
"recharts": "^2.15.4",
|
||||
"sharp": "^0.34.5",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"sharp": "^0.34.3",
|
||||
"sonner": "^2.0.6",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"uuid": "^11.1.1",
|
||||
"uuid": "^11.1.0",
|
||||
"vaul": "^1.1.2",
|
||||
"zod": "^4.4.3",
|
||||
"zustand": "^5.0.13"
|
||||
"z-ai-web-dev-sdk": "^0.0.17",
|
||||
"zod": "^4.0.2",
|
||||
"zustand": "^5.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@tailwindcss/postcss": "^4.3.0",
|
||||
"@testing-library/jest-dom": "^6.9.1",
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"bun-types": "^1.3.14",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-config-next": "^16.2.6",
|
||||
"jsdom": "^29.1.1",
|
||||
"lint-staged": "^17.0.5",
|
||||
"madge": "^8.0.0",
|
||||
"tailwindcss": "^4.3.0",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vitest": "^4.1.6"
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"bun-types": "^1.3.4",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "^16.1.1",
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.3.5",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -1,285 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: combat.spec.ts >> Combat System >> shows floor information in spire mode
|
||||
- Location: e2e/combat.spec.ts:65:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(locator).toBeVisible() failed
|
||||
|
||||
Locator: locator('text="Floor"').first()
|
||||
Expected: visible
|
||||
Timeout: 5000ms
|
||||
Error: element(s) not found
|
||||
|
||||
Call log:
|
||||
- Expect "toBeVisible" with timeout 5000ms
|
||||
- waiting for locator('text="Floor"').first()
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [active] [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 02:04
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "15"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +3.0 mana/hr
|
||||
- generic [ref=e23]: (1.5x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- generic [ref=e40]:
|
||||
- generic [ref=e41]: "1"
|
||||
- generic [ref=e42]: "2"
|
||||
- generic [ref=e43]: "3"
|
||||
- generic [ref=e44]: "4"
|
||||
- generic [ref=e45]: "5"
|
||||
- generic [ref=e46]: "6"
|
||||
- generic [ref=e47]: "7"
|
||||
- generic [ref=e48]: "8"
|
||||
- generic [ref=e49]: "9"
|
||||
- generic [ref=e50]: "10"
|
||||
- generic [ref=e51]: "11"
|
||||
- generic [ref=e52]: "12"
|
||||
- generic [ref=e53]: "13"
|
||||
- generic [ref=e54]: "14"
|
||||
- generic [ref=e55]: "15"
|
||||
- generic [ref=e56]: "16"
|
||||
- generic [ref=e57]: "17"
|
||||
- generic [ref=e58]: "18"
|
||||
- generic [ref=e59]: "19"
|
||||
- generic [ref=e60]: "20"
|
||||
- generic [ref=e61]: "21"
|
||||
- generic [ref=e62]: "22"
|
||||
- generic [ref=e63]: "23"
|
||||
- generic [ref=e64]: "24"
|
||||
- generic [ref=e65]: "25"
|
||||
- generic [ref=e66]: "26"
|
||||
- generic [ref=e67]: "27"
|
||||
- generic [ref=e68]: "28"
|
||||
- generic [ref=e69]: "29"
|
||||
- generic [ref=e70]: "30"
|
||||
- generic [ref=e72]:
|
||||
- tablist [ref=e73]:
|
||||
- tab "⚔️ Spire" [selected] [ref=e74]
|
||||
- tab "✨ Attune" [ref=e75]
|
||||
- tab "🗿 Golems" [ref=e76]
|
||||
- tab "📚 Skills" [ref=e77]
|
||||
- tab "🔮 Spells" [ref=e78]
|
||||
- tab "🛡️ Gear" [ref=e79]
|
||||
- tab "🔧 Craft" [ref=e80]
|
||||
- tab "💎 Loot" [ref=e81]
|
||||
- tab "🏆 Achieve" [ref=e82]
|
||||
- tab "📊 Stats" [ref=e83]
|
||||
- tab "🐛 Debug" [ref=e84]
|
||||
- tab "📖 Grimoire" [ref=e85]
|
||||
- tabpanel "⚔️ Spire" [ref=e86]:
|
||||
- generic [ref=e87]:
|
||||
- generic [ref=e89]:
|
||||
- button "Exit Spire Mode" [ref=e90]:
|
||||
- img
|
||||
- text: Exit Spire Mode
|
||||
- generic [ref=e91]: Climb down to floor 1 to return to the main game
|
||||
- generic [ref=e92]:
|
||||
- heading "Current Floor 🐝 Swarm" [level=3] [ref=e94]:
|
||||
- generic [ref=e95]: Current Floor
|
||||
- generic [ref=e96]: 🐝 Swarm
|
||||
- generic [ref=e97]:
|
||||
- generic [ref=e98]:
|
||||
- generic [ref=e99]: "1"
|
||||
- generic [ref=e100]: / 100
|
||||
- generic [ref=e101]: 🔥 Fire
|
||||
- generic [ref=e102]:
|
||||
- text: "Best: Floor"
|
||||
- strong [ref=e103]: "1"
|
||||
- text: "• Pacts:"
|
||||
- strong [ref=e104]: "0"
|
||||
- generic [ref=e106]:
|
||||
- generic [ref=e108]: Active Spells (1)
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]:
|
||||
- generic [ref=e112]: Mana BoltBasic
|
||||
- generic [ref=e113]: ✓
|
||||
- generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]: Swarm Enemies (6)
|
||||
- generic [ref=e118]:
|
||||
- generic [ref=e119]:
|
||||
- img [ref=e120]
|
||||
- generic [ref=e125]: Emberling
|
||||
- generic [ref=e126]: 🔥 60/60 HP
|
||||
- generic [ref=e130]:
|
||||
- generic [ref=e131]:
|
||||
- img [ref=e132]
|
||||
- generic [ref=e137]: Fire Imp
|
||||
- generic [ref=e138]: 🔥 60/60 HP
|
||||
- generic [ref=e142]:
|
||||
- generic [ref=e143]:
|
||||
- img [ref=e144]
|
||||
- generic [ref=e149]: Scorchling
|
||||
- generic [ref=e150]: 🔥 60/60 HP
|
||||
- generic [ref=e154]:
|
||||
- generic [ref=e155]:
|
||||
- img [ref=e156]
|
||||
- generic [ref=e161]: Flame Sprite
|
||||
- generic [ref=e162]: 🔥 60/60 HP
|
||||
- generic [ref=e166]:
|
||||
- generic [ref=e167]:
|
||||
- img [ref=e168]
|
||||
- generic [ref=e173]: Emberling
|
||||
- generic [ref=e174]: 🔥 60/60 HP
|
||||
- generic [ref=e178]:
|
||||
- generic [ref=e179]:
|
||||
- img [ref=e180]
|
||||
- generic [ref=e185]: Inferno Whelp
|
||||
- generic [ref=e186]: 🔥 60/60 HP
|
||||
- generic [ref=e189]:
|
||||
- generic [ref=e191]: Floor Navigation
|
||||
- generic [ref=e192]:
|
||||
- generic [ref=e193]:
|
||||
- button "Climb Up" [ref=e194]:
|
||||
- img
|
||||
- text: Climb Up
|
||||
- button "Climb Down" [disabled]:
|
||||
- img
|
||||
- text: Climb Down
|
||||
- generic [ref=e195]: Click Climb Up/Down to begin climbing
|
||||
- generic [ref=e196]:
|
||||
- generic [ref=e198]: Combat Stats
|
||||
- generic [ref=e199]:
|
||||
- generic [ref=e200]: "Total DPS: —"
|
||||
- generic [ref=e201]:
|
||||
- generic [ref=e202]: Active Spells
|
||||
- generic [ref=e203]:
|
||||
- generic [ref=e204]:
|
||||
- generic [ref=e205]:
|
||||
- text: Mana Bolt
|
||||
- generic [ref=e206]: Basic
|
||||
- generic [ref=e207]: ✓
|
||||
- generic [ref=e208]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
|
||||
- generic [ref=e210]: "Study Speed: 100%"
|
||||
- generic [ref=e211]:
|
||||
- generic [ref=e213]: Activity Log
|
||||
- generic [ref=e219]: No activity yet...
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e225] [cursor=pointer]:
|
||||
- img [ref=e226]
|
||||
- alert [ref=e229]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for combat system:
|
||||
5 | * - Entering spire mode (climbing)
|
||||
6 | * - Casting spells and seeing progress
|
||||
7 | * - Enemy HP reduction
|
||||
8 | * - Floor advancement
|
||||
9 | */
|
||||
10 |
|
||||
11 | test.describe('Combat System', () => {
|
||||
12 | test.beforeEach(async ({ page }) => {
|
||||
13 | await page.goto('/');
|
||||
14 | // Clear game state to ensure a fresh start
|
||||
15 | await page.evaluate(() => {
|
||||
16 | Object.keys(localStorage)
|
||||
17 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
18 | .forEach((k) => localStorage.removeItem(k));
|
||||
19 | });
|
||||
20 | await page.reload();
|
||||
21 | await page.waitForLoadState('networkidle');
|
||||
22 | });
|
||||
23 |
|
||||
24 | test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
|
||||
25 | // The Spire tab uses an icon + text, so match by the tab role
|
||||
26 | const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
|
||||
27 | await expect(spireTab).toBeVisible();
|
||||
28 |
|
||||
29 | // Main page should show "Climb the Spire" button
|
||||
30 | const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
|
||||
31 | await expect(climbBtn).toBeVisible();
|
||||
32 | });
|
||||
33 |
|
||||
34 | test('can enter Spire mode by clicking Climb button', async ({ page }) => {
|
||||
35 | // Click "Climb the Spire" button on the main page (via left panel)
|
||||
36 | await page.getByRole('button', { name: 'Climb the Spire' }).click();
|
||||
37 |
|
||||
38 | // Should now see Spire mode UI elements
|
||||
39 | // The "Enter Spire Mode" button appears when on the Spire tab
|
||||
40 | const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
41 | await expect(enterBtn).toBeVisible({ timeout: 5000 });
|
||||
42 | });
|
||||
43 |
|
||||
44 | test('can navigate to Spire tab', async ({ page }) => {
|
||||
45 | // Click the Spire tab specifically (using role=tab to disambiguate)
|
||||
46 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
47 |
|
||||
48 | // Should see Spire-specific UI
|
||||
49 | const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
50 | await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
|
||||
51 | });
|
||||
52 |
|
||||
53 | test('can enter spire mode from the Spire tab', async ({ page }) => {
|
||||
54 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
55 |
|
||||
56 | const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
57 | await expect(enterBtn).toBeEnabled();
|
||||
58 | await enterBtn.click();
|
||||
59 |
|
||||
60 | // After entering, should see exit button
|
||||
61 | const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
|
||||
62 | await expect(exitBtn).toBeVisible({ timeout: 5000 });
|
||||
63 | });
|
||||
64 |
|
||||
65 | test('shows floor information in spire mode', async ({ page }) => {
|
||||
66 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
67 | await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
|
||||
68 |
|
||||
69 | // Should display floor number - look for "Floor" label or the floor counter
|
||||
70 | const floorDisplay = page.locator('text="Floor"').first();
|
||||
> 71 | await expect(floorDisplay).toBeVisible({ timeout: 5000 });
|
||||
| ^ Error: expect(locator).toBeVisible() failed
|
||||
72 | });
|
||||
73 | });
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 258 KiB |
@@ -1,348 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: equipment.spec.ts >> Equipment Management >> can unequip an item from a slot
|
||||
- Location: e2e/equipment.spec.ts:113:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(locator).toBeVisible() failed
|
||||
|
||||
Locator: locator('text=Hands').locator('..').locator('button').first()
|
||||
Expected: visible
|
||||
Timeout: 5000ms
|
||||
Error: element(s) not found
|
||||
|
||||
Call log:
|
||||
- Expect "toBeVisible" with timeout 5000ms
|
||||
- waiting for locator('text=Hands').locator('..').locator('button').first()
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 01:55
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "14"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.8 mana/hr
|
||||
- generic [ref=e23]: (1.4x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [active] [selected] [ref=e87]
|
||||
- tab "🔧 Craft" [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🛡️ Gear" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]:
|
||||
- generic [ref=e97]:
|
||||
- heading "Equipped Gear" [level=3] [ref=e98]
|
||||
- generic [ref=e100]: 4 / 8 slots filled
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e102]:
|
||||
- heading "Weapon & Shield" [level=4] [ref=e103]
|
||||
- generic [ref=e104]:
|
||||
- 'button "Main Hand slot: Basic Staff" [ref=e106]':
|
||||
- generic [ref=e107]:
|
||||
- generic [ref=e108]:
|
||||
- img [ref=e109]
|
||||
- generic [ref=e114]: Main Hand
|
||||
- button "Unequip Basic Staff" [ref=e115]:
|
||||
- img [ref=e116]
|
||||
- generic [ref=e119]:
|
||||
- generic [ref=e120]:
|
||||
- text: Basic Staff
|
||||
- generic [ref=e121]: 2-Handed
|
||||
- generic [ref=e122]: "Enchantments: 1/50"
|
||||
- generic [ref=e124]: Mana Bolt
|
||||
- button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
|
||||
- generic [ref=e127]:
|
||||
- img [ref=e128]
|
||||
- generic [ref=e130]: Off Hand
|
||||
- generic [ref=e131]:
|
||||
- img
|
||||
- text: Occupied — 2H Weapon
|
||||
- generic [ref=e132]:
|
||||
- img [ref=e133]
|
||||
- text: Blocked by 2-handed weapon
|
||||
- generic [ref=e135]:
|
||||
- heading "Armor" [level=4] [ref=e136]
|
||||
- generic [ref=e137]:
|
||||
- button "Head slot (empty)" [ref=e139]:
|
||||
- generic [ref=e141]:
|
||||
- img [ref=e142]
|
||||
- generic [ref=e147]: Head
|
||||
- generic [ref=e148]: Head
|
||||
- 'button "Body slot: Civilian Shirt" [ref=e150]':
|
||||
- generic [ref=e151]:
|
||||
- generic [ref=e152]:
|
||||
- img [ref=e153]
|
||||
- generic [ref=e155]: Body
|
||||
- button "Unequip Civilian Shirt" [ref=e156]:
|
||||
- img [ref=e157]
|
||||
- generic [ref=e160]:
|
||||
- generic [ref=e161]: Civilian Shirt
|
||||
- generic [ref=e162]: "Enchantments: 0/30"
|
||||
- 'button "Hands slot: Civilian Gloves" [ref=e164]':
|
||||
- generic [ref=e165]:
|
||||
- generic [ref=e166]:
|
||||
- img [ref=e167]
|
||||
- generic [ref=e172]: Hands
|
||||
- button "Unequip Civilian Gloves" [ref=e173]:
|
||||
- img [ref=e174]
|
||||
- generic [ref=e177]:
|
||||
- generic [ref=e178]: Civilian Gloves
|
||||
- generic [ref=e179]: "Enchantments: 0/20"
|
||||
- 'button "Feet slot: Civilian Shoes" [ref=e181]':
|
||||
- generic [ref=e182]:
|
||||
- generic [ref=e183]:
|
||||
- img [ref=e184]
|
||||
- generic [ref=e187]: Feet
|
||||
- button "Unequip Civilian Shoes" [ref=e188]:
|
||||
- img [ref=e189]
|
||||
- generic [ref=e192]:
|
||||
- generic [ref=e193]: Civilian Shoes
|
||||
- generic [ref=e194]: "Enchantments: 0/15"
|
||||
- generic [ref=e195]:
|
||||
- heading "Accessories" [level=4] [ref=e196]
|
||||
- generic [ref=e197]:
|
||||
- button "Accessory 1 slot (empty)" [ref=e199]:
|
||||
- generic [ref=e201]:
|
||||
- img [ref=e202]
|
||||
- generic [ref=e205]: Accessory 1
|
||||
- generic [ref=e206]: Accessory 1
|
||||
- button "Accessory 2 slot (empty)" [ref=e208]:
|
||||
- generic [ref=e210]:
|
||||
- img [ref=e211]
|
||||
- generic [ref=e214]: Accessory 2
|
||||
- generic [ref=e215]: Accessory 2
|
||||
- generic [ref=e216]:
|
||||
- heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
|
||||
- status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
|
||||
- generic [ref=e220]:
|
||||
- heading "Equipment Stats Summary" [level=3] [ref=e222]
|
||||
- generic [ref=e223]:
|
||||
- generic [ref=e224]:
|
||||
- generic [ref=e225]: "4"
|
||||
- generic [ref=e226]: Total Items
|
||||
- generic [ref=e227]:
|
||||
- generic [ref=e228]: "4"
|
||||
- generic [ref=e229]: Equipped
|
||||
- generic [ref=e230]:
|
||||
- generic [ref=e231]: "0"
|
||||
- generic [ref=e232]: In Inventory
|
||||
- generic [ref=e233]:
|
||||
- generic [ref=e234]: "1"
|
||||
- generic [ref=e235]: Total Enchantments
|
||||
- generic [ref=e236]:
|
||||
- heading "✨ Enchantment Power" [level=3] [ref=e238]
|
||||
- generic [ref=e239]:
|
||||
- generic [ref=e240]:
|
||||
- generic [ref=e241]: "Enchantment Power:"
|
||||
- generic [ref=e242]: 1.00×
|
||||
- paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
|
||||
- generic [ref=e244]:
|
||||
- generic [ref=e245]: "Active Effects from Equipment:"
|
||||
- generic [ref=e247]: No active effects
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
|
||||
- img [ref=e254]
|
||||
- alert [ref=e257]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
28 |
|
||||
29 | // Verify equipment UI elements
|
||||
30 | const equippedGearHeading = page.locator('text="Equipped Gear"');
|
||||
31 | await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
|
||||
32 | });
|
||||
33 |
|
||||
34 | test('shows equipment slots with labels', async ({ page }) => {
|
||||
35 | await page.goto('/');
|
||||
36 | await page.evaluate(() => {
|
||||
37 | Object.keys(localStorage)
|
||||
38 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
39 | .forEach((k) => localStorage.removeItem(k));
|
||||
40 | });
|
||||
41 | await page.reload();
|
||||
42 | await page.waitForLoadState('networkidle');
|
||||
43 |
|
||||
44 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
45 |
|
||||
46 | // Check for expected slot labels - use role=heading or more specific selectors
|
||||
47 | // Main Hand slot
|
||||
48 | const mainHandSection = page.locator('text=Main Hand');
|
||||
49 | await expect(mainHandSection.first()).toBeVisible();
|
||||
50 |
|
||||
51 | // Off Hand
|
||||
52 | const offHandSection = page.locator('text=Off Hand');
|
||||
53 | await expect(offHandSection.first()).toBeVisible();
|
||||
54 |
|
||||
55 | // Head
|
||||
56 | const headSection = page.locator('text=Head');
|
||||
57 | await expect(headSection.first()).toBeVisible();
|
||||
58 |
|
||||
59 | // Body
|
||||
60 | const bodySection = page.locator('text=Body');
|
||||
61 | await expect(bodySection.first()).toBeVisible();
|
||||
62 |
|
||||
63 | // Hands
|
||||
64 | const handsSection = page.locator('text=Hands');
|
||||
65 | await expect(handsSection.first()).toBeVisible();
|
||||
66 |
|
||||
67 | // Feet
|
||||
68 | const feetSection = page.locator('text=Feet');
|
||||
69 | await expect(feetSection.first()).toBeVisible();
|
||||
70 |
|
||||
71 | // Accessory 1 and 2
|
||||
72 | const acc1Section = page.locator('text=Accessory 1');
|
||||
73 | await expect(acc1Section.first()).toBeVisible();
|
||||
74 | const acc2Section = page.locator('text=Accessory 2');
|
||||
75 | await expect(acc2Section.first()).toBeVisible();
|
||||
76 | });
|
||||
77 |
|
||||
78 | test('shows starting equipment already equipped', async ({ page }) => {
|
||||
79 | await page.goto('/');
|
||||
80 | await page.evaluate(() => {
|
||||
81 | Object.keys(localStorage)
|
||||
82 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
83 | .forEach((k) => localStorage.removeItem(k));
|
||||
84 | });
|
||||
85 | await page.reload();
|
||||
86 | await page.waitForLoadState('networkidle');
|
||||
87 |
|
||||
88 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
89 |
|
||||
90 | // The player starts with a Basic Staff in main hand (as an equipped item)
|
||||
91 | const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
|
||||
92 | await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
|
||||
93 | });
|
||||
94 |
|
||||
95 | test('2-handed weapon blocks offhand slot', async ({ page }) => {
|
||||
96 | await page.goto('/');
|
||||
97 | await page.evaluate(() => {
|
||||
98 | Object.keys(localStorage)
|
||||
99 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
100 | .forEach((k) => localStorage.removeItem(k));
|
||||
101 | });
|
||||
102 | await page.reload();
|
||||
103 | await page.waitForLoadState('networkidle');
|
||||
104 |
|
||||
105 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
106 |
|
||||
107 | // The starting basic staff is 2-handed
|
||||
108 | // The offhand slot should show as blocked with "Occupied — 2H Weapon"
|
||||
109 | const offHandBlocked = page.locator('text=Occupied').first();
|
||||
110 | await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
|
||||
111 | });
|
||||
112 |
|
||||
113 | test('can unequip an item from a slot', async ({ page }) => {
|
||||
114 | await page.goto('/');
|
||||
115 | await page.evaluate(() => {
|
||||
116 | Object.keys(localStorage)
|
||||
117 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
118 | .forEach((k) => localStorage.removeItem(k));
|
||||
119 | });
|
||||
120 | await page.reload();
|
||||
121 | await page.waitForLoadState('networkidle');
|
||||
122 |
|
||||
123 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
124 |
|
||||
125 | // Find an equiped slot with an unequip button (the X button)
|
||||
126 | // The hands slot has civilian gloves equipped
|
||||
127 | const handsSlot = page.locator('text=Hands >> .. >> button').first();
|
||||
> 128 | await expect(handsSlot).toBeVisible({ timeout: 5000 });
|
||||
| ^ Error: expect(locator).toBeVisible() failed
|
||||
129 | // Note: exact behavior of unequip depends on implementation state
|
||||
130 | });
|
||||
131 | });
|
||||
```
|
||||
@@ -1,285 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: enchanting.spec.ts >> Enchanting Flow >> can navigate to Crafting tab
|
||||
- Location: e2e/enchanting.spec.ts:28:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(locator).toBeVisible() failed
|
||||
|
||||
Locator: getByRole('button')
|
||||
Expected: visible
|
||||
Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
|
||||
2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
|
||||
3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
|
||||
4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
|
||||
5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
|
||||
6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
|
||||
|
||||
Call log:
|
||||
- Expect "toBeVisible" with timeout 5000ms
|
||||
- waiting for getByRole('button')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 00:55
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "11"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.4 mana/hr
|
||||
- generic [ref=e23]: (1.2x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [ref=e87]
|
||||
- tab "🔧 Craft" [active] [selected] [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🔧 Craft" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e97]:
|
||||
- button "Fabricate" [ref=e98]:
|
||||
- img
|
||||
- text: Fabricate
|
||||
- button "Enchant" [ref=e99]:
|
||||
- img
|
||||
- text: Enchant
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e103]:
|
||||
- img [ref=e104]
|
||||
- text: Available Blueprints
|
||||
- generic [ref=e113]:
|
||||
- img [ref=e114]
|
||||
- paragraph [ref=e118]: No blueprints discovered yet.
|
||||
- paragraph [ref=e119]: Defeat guardians to find blueprints!
|
||||
- generic [ref=e120]:
|
||||
- generic [ref=e122]:
|
||||
- img [ref=e123]
|
||||
- text: Materials (0)
|
||||
- generic [ref=e131]:
|
||||
- img [ref=e132]
|
||||
- paragraph [ref=e134]: No materials collected yet.
|
||||
- paragraph [ref=e135]: Defeat floors to gather materials!
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
|
||||
- img [ref=e142]
|
||||
- alert [ref=e145]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for the 3-step enchantment flow:
|
||||
5 | * Design → Prepare → Apply
|
||||
6 | *
|
||||
7 | * These tests validate the core crafting loop works end-to-end.
|
||||
8 | */
|
||||
9 |
|
||||
10 | test.describe('Enchanting Flow', () => {
|
||||
11 | /**
|
||||
12 | * Before each test, ensure we start with a clean state.
|
||||
13 | * The game persists state in localStorage, so we clear it.
|
||||
14 | */
|
||||
15 | test.beforeEach(async ({ page }) => {
|
||||
16 | await page.goto('/');
|
||||
17 | // Clear game state to ensure a fresh start
|
||||
18 | await page.evaluate(() => {
|
||||
19 | Object.keys(localStorage)
|
||||
20 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
21 | .forEach((k) => localStorage.removeItem(k));
|
||||
22 | });
|
||||
23 | await page.reload();
|
||||
24 | // Wait for the game to initialize
|
||||
25 | await page.waitForLoadState('networkidle');
|
||||
26 | });
|
||||
27 |
|
||||
28 | test('can navigate to Crafting tab', async ({ page }) => {
|
||||
29 | // The tab bar contains a "Craft" tab
|
||||
30 | const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
|
||||
31 | await expect(craftTab).toBeVisible();
|
||||
32 | await craftTab.click();
|
||||
33 |
|
||||
34 | // Verify we're on the crafting tab by checking for sub-tabs
|
||||
35 | const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
|
||||
36 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
> 37 | await expect(fabricateBtn).toBeVisible();
|
||||
| ^ Error: expect(locator).toBeVisible() failed
|
||||
38 | await expect(enchantBtn).toBeVisible();
|
||||
39 | });
|
||||
40 |
|
||||
41 | test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
|
||||
42 | await page.goto('/');
|
||||
43 | await page.evaluate(() => {
|
||||
44 | Object.keys(localStorage)
|
||||
45 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
46 | .forEach((k) => localStorage.removeItem(k));
|
||||
47 | });
|
||||
48 | await page.reload();
|
||||
49 | await page.waitForLoadState('networkidle');
|
||||
50 |
|
||||
51 | // Navigate to Crafting tab
|
||||
52 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
53 |
|
||||
54 | // Click Enchant sub-tab
|
||||
55 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
56 | await enchantBtn.click();
|
||||
57 |
|
||||
58 | // Should see the design stage UI
|
||||
59 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
60 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
61 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
62 | await expect(designBtn).toBeVisible();
|
||||
63 | await expect(prepareBtn).toBeVisible();
|
||||
64 | await expect(applyBtn).toBeVisible();
|
||||
65 | });
|
||||
66 |
|
||||
67 | test('can select equipment type and effect in Design stage', async ({ page }) => {
|
||||
68 | await page.goto('/');
|
||||
69 | await page.evaluate(() => {
|
||||
70 | Object.keys(localStorage)
|
||||
71 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
72 | .forEach((k) => localStorage.removeItem(k));
|
||||
73 | });
|
||||
74 | await page.reload();
|
||||
75 | await page.waitForLoadState('networkidle');
|
||||
76 |
|
||||
77 | // Navigate to Crafting > Enchant > Design
|
||||
78 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
79 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
80 |
|
||||
81 | // The design section should show effect selectors once an equipment type is chosen
|
||||
82 | // Look for any element matching equipment type buttons and effect-related content
|
||||
83 | const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
|
||||
84 | const count = await equipmentButtons.count();
|
||||
85 | expect(count).toBeGreaterThan(0);
|
||||
86 | });
|
||||
87 |
|
||||
88 | test('can navigate through all 3 enchant stages', async ({ page }) => {
|
||||
89 | await page.goto('/');
|
||||
90 | await page.evaluate(() => {
|
||||
91 | Object.keys(localStorage)
|
||||
92 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
93 | .forEach((k) => localStorage.removeItem(k));
|
||||
94 | });
|
||||
95 | await page.reload();
|
||||
96 | await page.waitForLoadState('networkidle');
|
||||
97 |
|
||||
98 | // Navigate to Crafting > Enchant
|
||||
99 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
100 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
101 |
|
||||
102 | // Verify Design stage is active
|
||||
103 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
104 | await expect(designBtn).toBeVisible();
|
||||
105 |
|
||||
106 | // Switch to Prepare stage
|
||||
107 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
108 | await prepareBtn.click();
|
||||
109 |
|
||||
110 | // Should see preparation UI
|
||||
111 | const prepareHeading = page.locator('text=Select Equipment to Prepare');
|
||||
112 | await expect(prepareHeading).toBeVisible({ timeout: 5000 });
|
||||
113 |
|
||||
114 | // Switch to Apply stage
|
||||
115 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
116 | await applyBtn.click();
|
||||
117 |
|
||||
118 | // Should see application UI
|
||||
119 | const applyHeading = page.locator('text=Select Equipment & Design');
|
||||
120 | await expect(applyHeading).toBeVisible({ timeout: 5000 });
|
||||
121 | });
|
||||
122 | });
|
||||
```
|
||||
@@ -1,260 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: combat.spec.ts >> Combat System >> can enter Spire mode by clicking Climb button
|
||||
- Location: e2e/combat.spec.ts:34:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(locator).toBeVisible() failed
|
||||
|
||||
Locator: getByRole('button', { name: 'Enter Spire Mode' })
|
||||
Expected: visible
|
||||
Timeout: 5000ms
|
||||
Error: element(s) not found
|
||||
|
||||
Call log:
|
||||
- Expect "toBeVisible" with timeout 5000ms
|
||||
- waiting for getByRole('button', { name: 'Enter Spire Mode' })
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [active] [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 01:43
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "14"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.9 mana/hr
|
||||
- generic [ref=e23]: (1.4x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- generic [ref=e40]:
|
||||
- generic [ref=e41]: "1"
|
||||
- generic [ref=e42]: "2"
|
||||
- generic [ref=e43]: "3"
|
||||
- generic [ref=e44]: "4"
|
||||
- generic [ref=e45]: "5"
|
||||
- generic [ref=e46]: "6"
|
||||
- generic [ref=e47]: "7"
|
||||
- generic [ref=e48]: "8"
|
||||
- generic [ref=e49]: "9"
|
||||
- generic [ref=e50]: "10"
|
||||
- generic [ref=e51]: "11"
|
||||
- generic [ref=e52]: "12"
|
||||
- generic [ref=e53]: "13"
|
||||
- generic [ref=e54]: "14"
|
||||
- generic [ref=e55]: "15"
|
||||
- generic [ref=e56]: "16"
|
||||
- generic [ref=e57]: "17"
|
||||
- generic [ref=e58]: "18"
|
||||
- generic [ref=e59]: "19"
|
||||
- generic [ref=e60]: "20"
|
||||
- generic [ref=e61]: "21"
|
||||
- generic [ref=e62]: "22"
|
||||
- generic [ref=e63]: "23"
|
||||
- generic [ref=e64]: "24"
|
||||
- generic [ref=e65]: "25"
|
||||
- generic [ref=e66]: "26"
|
||||
- generic [ref=e67]: "27"
|
||||
- generic [ref=e68]: "28"
|
||||
- generic [ref=e69]: "29"
|
||||
- generic [ref=e70]: "30"
|
||||
- generic [ref=e72]:
|
||||
- tablist [ref=e73]:
|
||||
- tab "⚔️ Spire" [selected] [ref=e74]
|
||||
- tab "✨ Attune" [ref=e75]
|
||||
- tab "🗿 Golems" [ref=e76]
|
||||
- tab "📚 Skills" [ref=e77]
|
||||
- tab "🔮 Spells" [ref=e78]
|
||||
- tab "🛡️ Gear" [ref=e79]
|
||||
- tab "🔧 Craft" [ref=e80]
|
||||
- tab "💎 Loot" [ref=e81]
|
||||
- tab "🏆 Achieve" [ref=e82]
|
||||
- tab "📊 Stats" [ref=e83]
|
||||
- tab "🐛 Debug" [ref=e84]
|
||||
- tab "📖 Grimoire" [ref=e85]
|
||||
- tabpanel "⚔️ Spire" [ref=e86]:
|
||||
- generic [ref=e87]:
|
||||
- generic [ref=e89]:
|
||||
- button "Exit Spire Mode" [ref=e90]:
|
||||
- img
|
||||
- text: Exit Spire Mode
|
||||
- generic [ref=e91]: Climb down to floor 1 to return to the main game
|
||||
- generic [ref=e92]:
|
||||
- heading "Current Floor ⚔️ Combat" [level=3] [ref=e94]:
|
||||
- generic [ref=e95]: Current Floor
|
||||
- generic [ref=e96]: ⚔️ Combat
|
||||
- generic [ref=e97]:
|
||||
- generic [ref=e98]:
|
||||
- generic [ref=e99]: "1"
|
||||
- generic [ref=e100]: / 100
|
||||
- generic [ref=e101]: 🔥 Fire
|
||||
- generic [ref=e102]:
|
||||
- text: "Best: Floor"
|
||||
- strong [ref=e103]: "1"
|
||||
- text: "• Pacts:"
|
||||
- strong [ref=e104]: "0"
|
||||
- generic [ref=e106]:
|
||||
- generic [ref=e108]: Active Spells (1)
|
||||
- generic [ref=e110]:
|
||||
- generic [ref=e111]:
|
||||
- generic [ref=e112]: Mana BoltBasic
|
||||
- generic [ref=e113]: ✓
|
||||
- generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
|
||||
- generic [ref=e115]:
|
||||
- generic [ref=e116]:
|
||||
- generic [ref=e117]:
|
||||
- img [ref=e118]
|
||||
- generic [ref=e123]: Inferno Whelp
|
||||
- generic [ref=e124]: 🔥 Fire
|
||||
- generic [ref=e129]: 151 / 151 HP
|
||||
- generic [ref=e130]:
|
||||
- generic [ref=e132]: Floor Navigation
|
||||
- generic [ref=e133]:
|
||||
- generic [ref=e134]:
|
||||
- button "Climb Up" [ref=e135]:
|
||||
- img
|
||||
- text: Climb Up
|
||||
- button "Climb Down" [disabled]:
|
||||
- img
|
||||
- text: Climb Down
|
||||
- generic [ref=e136]: Click Climb Up/Down to begin climbing
|
||||
- generic [ref=e137]:
|
||||
- generic [ref=e139]: Combat Stats
|
||||
- generic [ref=e140]:
|
||||
- generic [ref=e141]: "Total DPS: —"
|
||||
- generic [ref=e142]:
|
||||
- generic [ref=e143]: Active Spells
|
||||
- generic [ref=e144]:
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]:
|
||||
- text: Mana Bolt
|
||||
- generic [ref=e147]: Basic
|
||||
- generic [ref=e148]: ✓
|
||||
- generic [ref=e149]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
|
||||
- generic [ref=e151]: "Study Speed: 100%"
|
||||
- generic [ref=e152]:
|
||||
- generic [ref=e154]: Activity Log
|
||||
- generic [ref=e160]: No activity yet...
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e166] [cursor=pointer]:
|
||||
- img [ref=e167]
|
||||
- alert [ref=e170]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for combat system:
|
||||
5 | * - Entering spire mode (climbing)
|
||||
6 | * - Casting spells and seeing progress
|
||||
7 | * - Enemy HP reduction
|
||||
8 | * - Floor advancement
|
||||
9 | */
|
||||
10 |
|
||||
11 | test.describe('Combat System', () => {
|
||||
12 | test.beforeEach(async ({ page }) => {
|
||||
13 | await page.goto('/');
|
||||
14 | // Clear game state to ensure a fresh start
|
||||
15 | await page.evaluate(() => {
|
||||
16 | Object.keys(localStorage)
|
||||
17 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
18 | .forEach((k) => localStorage.removeItem(k));
|
||||
19 | });
|
||||
20 | await page.reload();
|
||||
21 | await page.waitForLoadState('networkidle');
|
||||
22 | });
|
||||
23 |
|
||||
24 | test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
|
||||
25 | // The Spire tab uses an icon + text, so match by the tab role
|
||||
26 | const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
|
||||
27 | await expect(spireTab).toBeVisible();
|
||||
28 |
|
||||
29 | // Main page should show "Climb the Spire" button
|
||||
30 | const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
|
||||
31 | await expect(climbBtn).toBeVisible();
|
||||
32 | });
|
||||
33 |
|
||||
34 | test('can enter Spire mode by clicking Climb button', async ({ page }) => {
|
||||
35 | // Click "Climb the Spire" button on the main page (via left panel)
|
||||
36 | await page.getByRole('button', { name: 'Climb the Spire' }).click();
|
||||
37 |
|
||||
38 | // Should now see Spire mode UI elements
|
||||
39 | // The "Enter Spire Mode" button appears when on the Spire tab
|
||||
40 | const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
> 41 | await expect(enterBtn).toBeVisible({ timeout: 5000 });
|
||||
| ^ Error: expect(locator).toBeVisible() failed
|
||||
42 | });
|
||||
43 |
|
||||
44 | test('can navigate to Spire tab', async ({ page }) => {
|
||||
45 | // Click the Spire tab specifically (using role=tab to disambiguate)
|
||||
46 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
47 |
|
||||
48 | // Should see Spire-specific UI
|
||||
49 | const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
50 | await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
|
||||
51 | });
|
||||
52 |
|
||||
53 | test('can enter spire mode from the Spire tab', async ({ page }) => {
|
||||
54 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
55 |
|
||||
56 | const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
|
||||
57 | await expect(enterBtn).toBeEnabled();
|
||||
58 | await enterBtn.click();
|
||||
59 |
|
||||
60 | // After entering, should see exit button
|
||||
61 | const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
|
||||
62 | await expect(exitBtn).toBeVisible({ timeout: 5000 });
|
||||
63 | });
|
||||
64 |
|
||||
65 | test('shows floor information in spire mode', async ({ page }) => {
|
||||
66 | await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
|
||||
67 | await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
|
||||
68 |
|
||||
69 | // Should display floor number - look for "Floor" label or the floor counter
|
||||
70 | const floorDisplay = page.locator('text="Floor"').first();
|
||||
71 | await expect(floorDisplay).toBeVisible({ timeout: 5000 });
|
||||
72 | });
|
||||
73 | });
|
||||
```
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
@@ -1,280 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: enchanting.spec.ts >> Enchanting Flow >> can switch to Enchant sub-tab and see design UI
|
||||
- Location: e2e/enchanting.spec.ts:41:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
|
||||
2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
|
||||
3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
|
||||
4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
|
||||
5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
|
||||
6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
|
||||
|
||||
Call log:
|
||||
- waiting for getByRole('button')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 01:04
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "12"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.3 mana/hr
|
||||
- generic [ref=e23]: (1.1x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [ref=e87]
|
||||
- tab "🔧 Craft" [active] [selected] [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🔧 Craft" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e97]:
|
||||
- button "Fabricate" [ref=e98]:
|
||||
- img
|
||||
- text: Fabricate
|
||||
- button "Enchant" [ref=e99]:
|
||||
- img
|
||||
- text: Enchant
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e103]:
|
||||
- img [ref=e104]
|
||||
- text: Available Blueprints
|
||||
- generic [ref=e113]:
|
||||
- img [ref=e114]
|
||||
- paragraph [ref=e118]: No blueprints discovered yet.
|
||||
- paragraph [ref=e119]: Defeat guardians to find blueprints!
|
||||
- generic [ref=e120]:
|
||||
- generic [ref=e122]:
|
||||
- img [ref=e123]
|
||||
- text: Materials (0)
|
||||
- generic [ref=e131]:
|
||||
- img [ref=e132]
|
||||
- paragraph [ref=e134]: No materials collected yet.
|
||||
- paragraph [ref=e135]: Defeat floors to gather materials!
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
|
||||
- img [ref=e142]
|
||||
- alert [ref=e145]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for the 3-step enchantment flow:
|
||||
5 | * Design → Prepare → Apply
|
||||
6 | *
|
||||
7 | * These tests validate the core crafting loop works end-to-end.
|
||||
8 | */
|
||||
9 |
|
||||
10 | test.describe('Enchanting Flow', () => {
|
||||
11 | /**
|
||||
12 | * Before each test, ensure we start with a clean state.
|
||||
13 | * The game persists state in localStorage, so we clear it.
|
||||
14 | */
|
||||
15 | test.beforeEach(async ({ page }) => {
|
||||
16 | await page.goto('/');
|
||||
17 | // Clear game state to ensure a fresh start
|
||||
18 | await page.evaluate(() => {
|
||||
19 | Object.keys(localStorage)
|
||||
20 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
21 | .forEach((k) => localStorage.removeItem(k));
|
||||
22 | });
|
||||
23 | await page.reload();
|
||||
24 | // Wait for the game to initialize
|
||||
25 | await page.waitForLoadState('networkidle');
|
||||
26 | });
|
||||
27 |
|
||||
28 | test('can navigate to Crafting tab', async ({ page }) => {
|
||||
29 | // The tab bar contains a "Craft" tab
|
||||
30 | const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
|
||||
31 | await expect(craftTab).toBeVisible();
|
||||
32 | await craftTab.click();
|
||||
33 |
|
||||
34 | // Verify we're on the crafting tab by checking for sub-tabs
|
||||
35 | const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
|
||||
36 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
37 | await expect(fabricateBtn).toBeVisible();
|
||||
38 | await expect(enchantBtn).toBeVisible();
|
||||
39 | });
|
||||
40 |
|
||||
41 | test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
|
||||
42 | await page.goto('/');
|
||||
43 | await page.evaluate(() => {
|
||||
44 | Object.keys(localStorage)
|
||||
45 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
46 | .forEach((k) => localStorage.removeItem(k));
|
||||
47 | });
|
||||
48 | await page.reload();
|
||||
49 | await page.waitForLoadState('networkidle');
|
||||
50 |
|
||||
51 | // Navigate to Crafting tab
|
||||
52 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
53 |
|
||||
54 | // Click Enchant sub-tab
|
||||
55 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
> 56 | await enchantBtn.click();
|
||||
| ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
57 |
|
||||
58 | // Should see the design stage UI
|
||||
59 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
60 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
61 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
62 | await expect(designBtn).toBeVisible();
|
||||
63 | await expect(prepareBtn).toBeVisible();
|
||||
64 | await expect(applyBtn).toBeVisible();
|
||||
65 | });
|
||||
66 |
|
||||
67 | test('can select equipment type and effect in Design stage', async ({ page }) => {
|
||||
68 | await page.goto('/');
|
||||
69 | await page.evaluate(() => {
|
||||
70 | Object.keys(localStorage)
|
||||
71 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
72 | .forEach((k) => localStorage.removeItem(k));
|
||||
73 | });
|
||||
74 | await page.reload();
|
||||
75 | await page.waitForLoadState('networkidle');
|
||||
76 |
|
||||
77 | // Navigate to Crafting > Enchant > Design
|
||||
78 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
79 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
80 |
|
||||
81 | // The design section should show effect selectors once an equipment type is chosen
|
||||
82 | // Look for any element matching equipment type buttons and effect-related content
|
||||
83 | const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
|
||||
84 | const count = await equipmentButtons.count();
|
||||
85 | expect(count).toBeGreaterThan(0);
|
||||
86 | });
|
||||
87 |
|
||||
88 | test('can navigate through all 3 enchant stages', async ({ page }) => {
|
||||
89 | await page.goto('/');
|
||||
90 | await page.evaluate(() => {
|
||||
91 | Object.keys(localStorage)
|
||||
92 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
93 | .forEach((k) => localStorage.removeItem(k));
|
||||
94 | });
|
||||
95 | await page.reload();
|
||||
96 | await page.waitForLoadState('networkidle');
|
||||
97 |
|
||||
98 | // Navigate to Crafting > Enchant
|
||||
99 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
100 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
101 |
|
||||
102 | // Verify Design stage is active
|
||||
103 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
104 | await expect(designBtn).toBeVisible();
|
||||
105 |
|
||||
106 | // Switch to Prepare stage
|
||||
107 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
108 | await prepareBtn.click();
|
||||
109 |
|
||||
110 | // Should see preparation UI
|
||||
111 | const prepareHeading = page.locator('text=Select Equipment to Prepare');
|
||||
112 | await expect(prepareHeading).toBeVisible({ timeout: 5000 });
|
||||
113 |
|
||||
114 | // Switch to Apply stage
|
||||
115 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
116 | await applyBtn.click();
|
||||
117 |
|
||||
118 | // Should see application UI
|
||||
119 | const applyHeading = page.locator('text=Select Equipment & Design');
|
||||
120 | await expect(applyHeading).toBeVisible({ timeout: 5000 });
|
||||
121 | });
|
||||
122 | });
|
||||
```
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
Binary file not shown.
@@ -1,375 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: equipment.spec.ts >> Equipment Management >> shows starting equipment already equipped
|
||||
- Location: e2e/equipment.spec.ts:78:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(locator).toBeVisible() failed
|
||||
|
||||
Locator: locator('text=Main Hand').locator('..').locator('text=Basic Staff')
|
||||
Expected: visible
|
||||
Timeout: 5000ms
|
||||
Error: element(s) not found
|
||||
|
||||
Call log:
|
||||
- Expect "toBeVisible" with timeout 5000ms
|
||||
- waiting for locator('text=Main Hand').locator('..').locator('text=Basic Staff')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 01:52
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "14"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.7 mana/hr
|
||||
- generic [ref=e23]: (1.4x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [active] [selected] [ref=e87]
|
||||
- tab "🔧 Craft" [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🛡️ Gear" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e96]:
|
||||
- generic [ref=e97]:
|
||||
- heading "Equipped Gear" [level=3] [ref=e98]
|
||||
- generic [ref=e100]: 4 / 8 slots filled
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e102]:
|
||||
- heading "Weapon & Shield" [level=4] [ref=e103]
|
||||
- generic [ref=e104]:
|
||||
- 'button "Main Hand slot: Basic Staff" [ref=e106]':
|
||||
- generic [ref=e107]:
|
||||
- generic [ref=e108]:
|
||||
- img [ref=e109]
|
||||
- generic [ref=e114]: Main Hand
|
||||
- button "Unequip Basic Staff" [ref=e115]:
|
||||
- img [ref=e116]
|
||||
- generic [ref=e119]:
|
||||
- generic [ref=e120]:
|
||||
- text: Basic Staff
|
||||
- generic [ref=e121]: 2-Handed
|
||||
- generic [ref=e122]: "Enchantments: 1/50"
|
||||
- generic [ref=e124]: Mana Bolt
|
||||
- button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
|
||||
- generic [ref=e127]:
|
||||
- img [ref=e128]
|
||||
- generic [ref=e130]: Off Hand
|
||||
- generic [ref=e131]:
|
||||
- img
|
||||
- text: Occupied — 2H Weapon
|
||||
- generic [ref=e132]:
|
||||
- img [ref=e133]
|
||||
- text: Blocked by 2-handed weapon
|
||||
- generic [ref=e135]:
|
||||
- heading "Armor" [level=4] [ref=e136]
|
||||
- generic [ref=e137]:
|
||||
- button "Head slot (empty)" [ref=e139]:
|
||||
- generic [ref=e141]:
|
||||
- img [ref=e142]
|
||||
- generic [ref=e147]: Head
|
||||
- generic [ref=e148]: Head
|
||||
- 'button "Body slot: Civilian Shirt" [ref=e150]':
|
||||
- generic [ref=e151]:
|
||||
- generic [ref=e152]:
|
||||
- img [ref=e153]
|
||||
- generic [ref=e155]: Body
|
||||
- button "Unequip Civilian Shirt" [ref=e156]:
|
||||
- img [ref=e157]
|
||||
- generic [ref=e160]:
|
||||
- generic [ref=e161]: Civilian Shirt
|
||||
- generic [ref=e162]: "Enchantments: 0/30"
|
||||
- 'button "Hands slot: Civilian Gloves" [ref=e164]':
|
||||
- generic [ref=e165]:
|
||||
- generic [ref=e166]:
|
||||
- img [ref=e167]
|
||||
- generic [ref=e172]: Hands
|
||||
- button "Unequip Civilian Gloves" [ref=e173]:
|
||||
- img [ref=e174]
|
||||
- generic [ref=e177]:
|
||||
- generic [ref=e178]: Civilian Gloves
|
||||
- generic [ref=e179]: "Enchantments: 0/20"
|
||||
- 'button "Feet slot: Civilian Shoes" [ref=e181]':
|
||||
- generic [ref=e182]:
|
||||
- generic [ref=e183]:
|
||||
- img [ref=e184]
|
||||
- generic [ref=e187]: Feet
|
||||
- button "Unequip Civilian Shoes" [ref=e188]:
|
||||
- img [ref=e189]
|
||||
- generic [ref=e192]:
|
||||
- generic [ref=e193]: Civilian Shoes
|
||||
- generic [ref=e194]: "Enchantments: 0/15"
|
||||
- generic [ref=e195]:
|
||||
- heading "Accessories" [level=4] [ref=e196]
|
||||
- generic [ref=e197]:
|
||||
- button "Accessory 1 slot (empty)" [ref=e199]:
|
||||
- generic [ref=e201]:
|
||||
- img [ref=e202]
|
||||
- generic [ref=e205]: Accessory 1
|
||||
- generic [ref=e206]: Accessory 1
|
||||
- button "Accessory 2 slot (empty)" [ref=e208]:
|
||||
- generic [ref=e210]:
|
||||
- img [ref=e211]
|
||||
- generic [ref=e214]: Accessory 2
|
||||
- generic [ref=e215]: Accessory 2
|
||||
- generic [ref=e216]:
|
||||
- heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
|
||||
- status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
|
||||
- generic [ref=e220]:
|
||||
- heading "Equipment Stats Summary" [level=3] [ref=e222]
|
||||
- generic [ref=e223]:
|
||||
- generic [ref=e224]:
|
||||
- generic [ref=e225]: "4"
|
||||
- generic [ref=e226]: Total Items
|
||||
- generic [ref=e227]:
|
||||
- generic [ref=e228]: "4"
|
||||
- generic [ref=e229]: Equipped
|
||||
- generic [ref=e230]:
|
||||
- generic [ref=e231]: "0"
|
||||
- generic [ref=e232]: In Inventory
|
||||
- generic [ref=e233]:
|
||||
- generic [ref=e234]: "1"
|
||||
- generic [ref=e235]: Total Enchantments
|
||||
- generic [ref=e236]:
|
||||
- heading "✨ Enchantment Power" [level=3] [ref=e238]
|
||||
- generic [ref=e239]:
|
||||
- generic [ref=e240]:
|
||||
- generic [ref=e241]: "Enchantment Power:"
|
||||
- generic [ref=e242]: 1.00×
|
||||
- paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
|
||||
- generic [ref=e244]:
|
||||
- generic [ref=e245]: "Active Effects from Equipment:"
|
||||
- generic [ref=e247]: No active effects
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
|
||||
- img [ref=e254]
|
||||
- alert [ref=e257]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for equipment management:
|
||||
5 | * - Equipping items to slots
|
||||
6 | * - 2-handed weapon blocking offhand slot
|
||||
7 | * - Unequipping items back to inventory
|
||||
8 | */
|
||||
9 |
|
||||
10 | test.describe('Equipment Management', () => {
|
||||
11 | test.beforeEach(async ({ page }) => {
|
||||
12 | await page.goto('/');
|
||||
13 | // Clear game state for a fresh start
|
||||
14 | await page.evaluate(() => {
|
||||
15 | Object.keys(localStorage)
|
||||
16 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
17 | .forEach((k) => localStorage.removeItem(k));
|
||||
18 | });
|
||||
19 | await page.reload();
|
||||
20 | await page.waitForLoadState('networkidle');
|
||||
21 | });
|
||||
22 |
|
||||
23 | test('can navigate to Equipment tab', async ({ page }) => {
|
||||
24 | // Use the tab with the shield icon to disambiguate
|
||||
25 | const gearTab = page.getByRole('tab', { name: /🛡️ Gear/ });
|
||||
26 | await expect(gearTab).toBeVisible();
|
||||
27 | await gearTab.click();
|
||||
28 |
|
||||
29 | // Verify equipment UI elements
|
||||
30 | const equippedGearHeading = page.locator('text="Equipped Gear"');
|
||||
31 | await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
|
||||
32 | });
|
||||
33 |
|
||||
34 | test('shows equipment slots with labels', async ({ page }) => {
|
||||
35 | await page.goto('/');
|
||||
36 | await page.evaluate(() => {
|
||||
37 | Object.keys(localStorage)
|
||||
38 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
39 | .forEach((k) => localStorage.removeItem(k));
|
||||
40 | });
|
||||
41 | await page.reload();
|
||||
42 | await page.waitForLoadState('networkidle');
|
||||
43 |
|
||||
44 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
45 |
|
||||
46 | // Check for expected slot labels - use role=heading or more specific selectors
|
||||
47 | // Main Hand slot
|
||||
48 | const mainHandSection = page.locator('text=Main Hand');
|
||||
49 | await expect(mainHandSection.first()).toBeVisible();
|
||||
50 |
|
||||
51 | // Off Hand
|
||||
52 | const offHandSection = page.locator('text=Off Hand');
|
||||
53 | await expect(offHandSection.first()).toBeVisible();
|
||||
54 |
|
||||
55 | // Head
|
||||
56 | const headSection = page.locator('text=Head');
|
||||
57 | await expect(headSection.first()).toBeVisible();
|
||||
58 |
|
||||
59 | // Body
|
||||
60 | const bodySection = page.locator('text=Body');
|
||||
61 | await expect(bodySection.first()).toBeVisible();
|
||||
62 |
|
||||
63 | // Hands
|
||||
64 | const handsSection = page.locator('text=Hands');
|
||||
65 | await expect(handsSection.first()).toBeVisible();
|
||||
66 |
|
||||
67 | // Feet
|
||||
68 | const feetSection = page.locator('text=Feet');
|
||||
69 | await expect(feetSection.first()).toBeVisible();
|
||||
70 |
|
||||
71 | // Accessory 1 and 2
|
||||
72 | const acc1Section = page.locator('text=Accessory 1');
|
||||
73 | await expect(acc1Section.first()).toBeVisible();
|
||||
74 | const acc2Section = page.locator('text=Accessory 2');
|
||||
75 | await expect(acc2Section.first()).toBeVisible();
|
||||
76 | });
|
||||
77 |
|
||||
78 | test('shows starting equipment already equipped', async ({ page }) => {
|
||||
79 | await page.goto('/');
|
||||
80 | await page.evaluate(() => {
|
||||
81 | Object.keys(localStorage)
|
||||
82 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
83 | .forEach((k) => localStorage.removeItem(k));
|
||||
84 | });
|
||||
85 | await page.reload();
|
||||
86 | await page.waitForLoadState('networkidle');
|
||||
87 |
|
||||
88 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
89 |
|
||||
90 | // The player starts with a Basic Staff in main hand (as an equipped item)
|
||||
91 | const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
|
||||
> 92 | await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
|
||||
| ^ Error: expect(locator).toBeVisible() failed
|
||||
93 | });
|
||||
94 |
|
||||
95 | test('2-handed weapon blocks offhand slot', async ({ page }) => {
|
||||
96 | await page.goto('/');
|
||||
97 | await page.evaluate(() => {
|
||||
98 | Object.keys(localStorage)
|
||||
99 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
100 | .forEach((k) => localStorage.removeItem(k));
|
||||
101 | });
|
||||
102 | await page.reload();
|
||||
103 | await page.waitForLoadState('networkidle');
|
||||
104 |
|
||||
105 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
106 |
|
||||
107 | // The starting basic staff is 2-handed
|
||||
108 | // The offhand slot should show as blocked with "Occupied — 2H Weapon"
|
||||
109 | const offHandBlocked = page.locator('text=Occupied').first();
|
||||
110 | await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
|
||||
111 | });
|
||||
112 |
|
||||
113 | test('can unequip an item from a slot', async ({ page }) => {
|
||||
114 | await page.goto('/');
|
||||
115 | await page.evaluate(() => {
|
||||
116 | Object.keys(localStorage)
|
||||
117 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
118 | .forEach((k) => localStorage.removeItem(k));
|
||||
119 | });
|
||||
120 | await page.reload();
|
||||
121 | await page.waitForLoadState('networkidle');
|
||||
122 |
|
||||
123 | await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
|
||||
124 |
|
||||
125 | // Find an equiped slot with an unequip button (the X button)
|
||||
126 | // The hands slot has civilian gloves equipped
|
||||
127 | const handsSlot = page.locator('text=Hands >> .. >> button').first();
|
||||
128 | await expect(handsSlot).toBeVisible({ timeout: 5000 });
|
||||
129 | // Note: exact behavior of unequip depends on implementation state
|
||||
130 | });
|
||||
131 | });
|
||||
```
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 243 KiB |
Binary file not shown.
@@ -1,280 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: enchanting.spec.ts >> Enchanting Flow >> can select equipment type and effect in Design stage
|
||||
- Location: e2e/enchanting.spec.ts:67:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
|
||||
2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
|
||||
3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
|
||||
4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
|
||||
5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
|
||||
6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
|
||||
|
||||
Call log:
|
||||
- waiting for getByRole('button')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 01:02
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "12"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.3 mana/hr
|
||||
- generic [ref=e23]: (1.1x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [ref=e87]
|
||||
- tab "🔧 Craft" [active] [selected] [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🔧 Craft" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e97]:
|
||||
- button "Fabricate" [ref=e98]:
|
||||
- img
|
||||
- text: Fabricate
|
||||
- button "Enchant" [ref=e99]:
|
||||
- img
|
||||
- text: Enchant
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e103]:
|
||||
- img [ref=e104]
|
||||
- text: Available Blueprints
|
||||
- generic [ref=e113]:
|
||||
- img [ref=e114]
|
||||
- paragraph [ref=e118]: No blueprints discovered yet.
|
||||
- paragraph [ref=e119]: Defeat guardians to find blueprints!
|
||||
- generic [ref=e120]:
|
||||
- generic [ref=e122]:
|
||||
- img [ref=e123]
|
||||
- text: Materials (0)
|
||||
- generic [ref=e131]:
|
||||
- img [ref=e132]
|
||||
- paragraph [ref=e134]: No materials collected yet.
|
||||
- paragraph [ref=e135]: Defeat floors to gather materials!
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
|
||||
- img [ref=e142]
|
||||
- alert [ref=e145]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for the 3-step enchantment flow:
|
||||
5 | * Design → Prepare → Apply
|
||||
6 | *
|
||||
7 | * These tests validate the core crafting loop works end-to-end.
|
||||
8 | */
|
||||
9 |
|
||||
10 | test.describe('Enchanting Flow', () => {
|
||||
11 | /**
|
||||
12 | * Before each test, ensure we start with a clean state.
|
||||
13 | * The game persists state in localStorage, so we clear it.
|
||||
14 | */
|
||||
15 | test.beforeEach(async ({ page }) => {
|
||||
16 | await page.goto('/');
|
||||
17 | // Clear game state to ensure a fresh start
|
||||
18 | await page.evaluate(() => {
|
||||
19 | Object.keys(localStorage)
|
||||
20 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
21 | .forEach((k) => localStorage.removeItem(k));
|
||||
22 | });
|
||||
23 | await page.reload();
|
||||
24 | // Wait for the game to initialize
|
||||
25 | await page.waitForLoadState('networkidle');
|
||||
26 | });
|
||||
27 |
|
||||
28 | test('can navigate to Crafting tab', async ({ page }) => {
|
||||
29 | // The tab bar contains a "Craft" tab
|
||||
30 | const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
|
||||
31 | await expect(craftTab).toBeVisible();
|
||||
32 | await craftTab.click();
|
||||
33 |
|
||||
34 | // Verify we're on the crafting tab by checking for sub-tabs
|
||||
35 | const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
|
||||
36 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
37 | await expect(fabricateBtn).toBeVisible();
|
||||
38 | await expect(enchantBtn).toBeVisible();
|
||||
39 | });
|
||||
40 |
|
||||
41 | test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
|
||||
42 | await page.goto('/');
|
||||
43 | await page.evaluate(() => {
|
||||
44 | Object.keys(localStorage)
|
||||
45 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
46 | .forEach((k) => localStorage.removeItem(k));
|
||||
47 | });
|
||||
48 | await page.reload();
|
||||
49 | await page.waitForLoadState('networkidle');
|
||||
50 |
|
||||
51 | // Navigate to Crafting tab
|
||||
52 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
53 |
|
||||
54 | // Click Enchant sub-tab
|
||||
55 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
56 | await enchantBtn.click();
|
||||
57 |
|
||||
58 | // Should see the design stage UI
|
||||
59 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
60 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
61 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
62 | await expect(designBtn).toBeVisible();
|
||||
63 | await expect(prepareBtn).toBeVisible();
|
||||
64 | await expect(applyBtn).toBeVisible();
|
||||
65 | });
|
||||
66 |
|
||||
67 | test('can select equipment type and effect in Design stage', async ({ page }) => {
|
||||
68 | await page.goto('/');
|
||||
69 | await page.evaluate(() => {
|
||||
70 | Object.keys(localStorage)
|
||||
71 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
72 | .forEach((k) => localStorage.removeItem(k));
|
||||
73 | });
|
||||
74 | await page.reload();
|
||||
75 | await page.waitForLoadState('networkidle');
|
||||
76 |
|
||||
77 | // Navigate to Crafting > Enchant > Design
|
||||
78 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
> 79 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
| ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
80 |
|
||||
81 | // The design section should show effect selectors once an equipment type is chosen
|
||||
82 | // Look for any element matching equipment type buttons and effect-related content
|
||||
83 | const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
|
||||
84 | const count = await equipmentButtons.count();
|
||||
85 | expect(count).toBeGreaterThan(0);
|
||||
86 | });
|
||||
87 |
|
||||
88 | test('can navigate through all 3 enchant stages', async ({ page }) => {
|
||||
89 | await page.goto('/');
|
||||
90 | await page.evaluate(() => {
|
||||
91 | Object.keys(localStorage)
|
||||
92 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
93 | .forEach((k) => localStorage.removeItem(k));
|
||||
94 | });
|
||||
95 | await page.reload();
|
||||
96 | await page.waitForLoadState('networkidle');
|
||||
97 |
|
||||
98 | // Navigate to Crafting > Enchant
|
||||
99 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
100 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
101 |
|
||||
102 | // Verify Design stage is active
|
||||
103 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
104 | await expect(designBtn).toBeVisible();
|
||||
105 |
|
||||
106 | // Switch to Prepare stage
|
||||
107 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
108 | await prepareBtn.click();
|
||||
109 |
|
||||
110 | // Should see preparation UI
|
||||
111 | const prepareHeading = page.locator('text=Select Equipment to Prepare');
|
||||
112 | await expect(prepareHeading).toBeVisible({ timeout: 5000 });
|
||||
113 |
|
||||
114 | // Switch to Apply stage
|
||||
115 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
116 | await applyBtn.click();
|
||||
117 |
|
||||
118 | // Should see application UI
|
||||
119 | const applyHeading = page.locator('text=Select Equipment & Design');
|
||||
120 | await expect(applyHeading).toBeVisible({ timeout: 5000 });
|
||||
121 | });
|
||||
122 | });
|
||||
```
|
||||
Binary file not shown.
@@ -1,280 +0,0 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: enchanting.spec.ts >> Enchanting Flow >> can navigate through all 3 enchant stages
|
||||
- Location: e2e/enchanting.spec.ts:88:7
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
|
||||
2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
|
||||
3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
|
||||
4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
|
||||
5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
|
||||
6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
|
||||
|
||||
Call log:
|
||||
- waiting for getByRole('button')
|
||||
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- generic [ref=e1]:
|
||||
- generic [ref=e2]:
|
||||
- banner [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- heading "MANA LOOP" [level=1] [ref=e5]
|
||||
- generic [ref=e7]:
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]: Day 1
|
||||
- generic [ref=e10]: 00:55
|
||||
- generic [ref=e11]:
|
||||
- generic [ref=e12]: "0"
|
||||
- generic [ref=e13]: Insight
|
||||
- main [ref=e14]:
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e17]:
|
||||
- generic [ref=e18]:
|
||||
- generic [ref=e19]:
|
||||
- generic [ref=e20]: "11"
|
||||
- generic [ref=e21]: / 100
|
||||
- generic [ref=e22]:
|
||||
- text: +2.2 mana/hr
|
||||
- generic [ref=e23]: (1.1x med)
|
||||
- progressbar [ref=e24]
|
||||
- button "Gather +1 Mana" [ref=e26]:
|
||||
- img
|
||||
- text: Gather +1 Mana
|
||||
- generic [ref=e27]:
|
||||
- button "Elemental Mana (1)" [ref=e28]:
|
||||
- generic [ref=e29]: Elemental Mana (1)
|
||||
- img [ref=e30]
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]:
|
||||
- generic [ref=e35]: 🔗
|
||||
- generic [ref=e36]: Transference
|
||||
- generic [ref=e39]: 0/10
|
||||
- button "Climb the Spire" [ref=e40]:
|
||||
- img
|
||||
- text: Climb the Spire
|
||||
- generic [ref=e42]:
|
||||
- generic [ref=e43]:
|
||||
- img [ref=e44]
|
||||
- generic [ref=e46]: Current Activity
|
||||
- generic [ref=e47]: Meditating
|
||||
- generic [ref=e48]:
|
||||
- generic [ref=e49]: "1"
|
||||
- generic [ref=e50]: "2"
|
||||
- generic [ref=e51]: "3"
|
||||
- generic [ref=e52]: "4"
|
||||
- generic [ref=e53]: "5"
|
||||
- generic [ref=e54]: "6"
|
||||
- generic [ref=e55]: "7"
|
||||
- generic [ref=e56]: "8"
|
||||
- generic [ref=e57]: "9"
|
||||
- generic [ref=e58]: "10"
|
||||
- generic [ref=e59]: "11"
|
||||
- generic [ref=e60]: "12"
|
||||
- generic [ref=e61]: "13"
|
||||
- generic [ref=e62]: "14"
|
||||
- generic [ref=e63]: "15"
|
||||
- generic [ref=e64]: "16"
|
||||
- generic [ref=e65]: "17"
|
||||
- generic [ref=e66]: "18"
|
||||
- generic [ref=e67]: "19"
|
||||
- generic [ref=e68]: "20"
|
||||
- generic [ref=e69]: "21"
|
||||
- generic [ref=e70]: "22"
|
||||
- generic [ref=e71]: "23"
|
||||
- generic [ref=e72]: "24"
|
||||
- generic [ref=e73]: "25"
|
||||
- generic [ref=e74]: "26"
|
||||
- generic [ref=e75]: "27"
|
||||
- generic [ref=e76]: "28"
|
||||
- generic [ref=e77]: "29"
|
||||
- generic [ref=e78]: "30"
|
||||
- generic [ref=e80]:
|
||||
- tablist [ref=e81]:
|
||||
- tab "⚔️ Spire" [ref=e82]
|
||||
- tab "✨ Attune" [ref=e83]
|
||||
- tab "🗿 Golems" [ref=e84]
|
||||
- tab "📚 Skills" [ref=e85]
|
||||
- tab "🔮 Spells" [ref=e86]
|
||||
- tab "🛡️ Gear" [ref=e87]
|
||||
- tab "🔧 Craft" [active] [selected] [ref=e88]
|
||||
- tab "💎 Loot" [ref=e89]
|
||||
- tab "🏆 Achieve" [ref=e90]
|
||||
- tab "📊 Stats" [ref=e91]
|
||||
- tab "🐛 Debug" [ref=e92]
|
||||
- tab "📖 Grimoire" [ref=e93]
|
||||
- tabpanel "🔧 Craft" [ref=e94]:
|
||||
- generic [ref=e95]:
|
||||
- generic [ref=e97]:
|
||||
- button "Fabricate" [ref=e98]:
|
||||
- img
|
||||
- text: Fabricate
|
||||
- button "Enchant" [ref=e99]:
|
||||
- img
|
||||
- text: Enchant
|
||||
- generic [ref=e100]:
|
||||
- generic [ref=e101]:
|
||||
- generic [ref=e103]:
|
||||
- img [ref=e104]
|
||||
- text: Available Blueprints
|
||||
- generic [ref=e113]:
|
||||
- img [ref=e114]
|
||||
- paragraph [ref=e118]: No blueprints discovered yet.
|
||||
- paragraph [ref=e119]: Defeat guardians to find blueprints!
|
||||
- generic [ref=e120]:
|
||||
- generic [ref=e122]:
|
||||
- img [ref=e123]
|
||||
- text: Materials (0)
|
||||
- generic [ref=e131]:
|
||||
- img [ref=e132]
|
||||
- paragraph [ref=e134]: No materials collected yet.
|
||||
- paragraph [ref=e135]: Defeat floors to gather materials!
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- region "Notifications (F8)":
|
||||
- list
|
||||
- button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
|
||||
- img [ref=e142]
|
||||
- alert [ref=e145]
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
1 | import { test, expect } from '@playwright/test';
|
||||
2 |
|
||||
3 | /**
|
||||
4 | * E2E tests for the 3-step enchantment flow:
|
||||
5 | * Design → Prepare → Apply
|
||||
6 | *
|
||||
7 | * These tests validate the core crafting loop works end-to-end.
|
||||
8 | */
|
||||
9 |
|
||||
10 | test.describe('Enchanting Flow', () => {
|
||||
11 | /**
|
||||
12 | * Before each test, ensure we start with a clean state.
|
||||
13 | * The game persists state in localStorage, so we clear it.
|
||||
14 | */
|
||||
15 | test.beforeEach(async ({ page }) => {
|
||||
16 | await page.goto('/');
|
||||
17 | // Clear game state to ensure a fresh start
|
||||
18 | await page.evaluate(() => {
|
||||
19 | Object.keys(localStorage)
|
||||
20 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
21 | .forEach((k) => localStorage.removeItem(k));
|
||||
22 | });
|
||||
23 | await page.reload();
|
||||
24 | // Wait for the game to initialize
|
||||
25 | await page.waitForLoadState('networkidle');
|
||||
26 | });
|
||||
27 |
|
||||
28 | test('can navigate to Crafting tab', async ({ page }) => {
|
||||
29 | // The tab bar contains a "Craft" tab
|
||||
30 | const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
|
||||
31 | await expect(craftTab).toBeVisible();
|
||||
32 | await craftTab.click();
|
||||
33 |
|
||||
34 | // Verify we're on the crafting tab by checking for sub-tabs
|
||||
35 | const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
|
||||
36 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
37 | await expect(fabricateBtn).toBeVisible();
|
||||
38 | await expect(enchantBtn).toBeVisible();
|
||||
39 | });
|
||||
40 |
|
||||
41 | test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
|
||||
42 | await page.goto('/');
|
||||
43 | await page.evaluate(() => {
|
||||
44 | Object.keys(localStorage)
|
||||
45 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
46 | .forEach((k) => localStorage.removeItem(k));
|
||||
47 | });
|
||||
48 | await page.reload();
|
||||
49 | await page.waitForLoadState('networkidle');
|
||||
50 |
|
||||
51 | // Navigate to Crafting tab
|
||||
52 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
53 |
|
||||
54 | // Click Enchant sub-tab
|
||||
55 | const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
|
||||
56 | await enchantBtn.click();
|
||||
57 |
|
||||
58 | // Should see the design stage UI
|
||||
59 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
60 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
61 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
62 | await expect(designBtn).toBeVisible();
|
||||
63 | await expect(prepareBtn).toBeVisible();
|
||||
64 | await expect(applyBtn).toBeVisible();
|
||||
65 | });
|
||||
66 |
|
||||
67 | test('can select equipment type and effect in Design stage', async ({ page }) => {
|
||||
68 | await page.goto('/');
|
||||
69 | await page.evaluate(() => {
|
||||
70 | Object.keys(localStorage)
|
||||
71 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
72 | .forEach((k) => localStorage.removeItem(k));
|
||||
73 | });
|
||||
74 | await page.reload();
|
||||
75 | await page.waitForLoadState('networkidle');
|
||||
76 |
|
||||
77 | // Navigate to Crafting > Enchant > Design
|
||||
78 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
79 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
80 |
|
||||
81 | // The design section should show effect selectors once an equipment type is chosen
|
||||
82 | // Look for any element matching equipment type buttons and effect-related content
|
||||
83 | const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
|
||||
84 | const count = await equipmentButtons.count();
|
||||
85 | expect(count).toBeGreaterThan(0);
|
||||
86 | });
|
||||
87 |
|
||||
88 | test('can navigate through all 3 enchant stages', async ({ page }) => {
|
||||
89 | await page.goto('/');
|
||||
90 | await page.evaluate(() => {
|
||||
91 | Object.keys(localStorage)
|
||||
92 | .filter((k) => k.startsWith('mana-loop-'))
|
||||
93 | .forEach((k) => localStorage.removeItem(k));
|
||||
94 | });
|
||||
95 | await page.reload();
|
||||
96 | await page.waitForLoadState('networkidle');
|
||||
97 |
|
||||
98 | // Navigate to Crafting > Enchant
|
||||
99 | await page.getByRole('tab', { name: /🔧 Craft/ }).click();
|
||||
> 100 | await page.getByRole('button', { hasText: 'Enchant' }).click();
|
||||
| ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
|
||||
101 |
|
||||
102 | // Verify Design stage is active
|
||||
103 | const designBtn = page.getByRole('button', { hasText: 'Design' });
|
||||
104 | await expect(designBtn).toBeVisible();
|
||||
105 |
|
||||
106 | // Switch to Prepare stage
|
||||
107 | const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
|
||||
108 | await prepareBtn.click();
|
||||
109 |
|
||||
110 | // Should see preparation UI
|
||||
111 | const prepareHeading = page.locator('text=Select Equipment to Prepare');
|
||||
112 | await expect(prepareHeading).toBeVisible({ timeout: 5000 });
|
||||
113 |
|
||||
114 | // Switch to Apply stage
|
||||
115 | const applyBtn = page.getByRole('button', { hasText: 'Apply' });
|
||||
116 | await applyBtn.click();
|
||||
117 |
|
||||
118 | // Should see application UI
|
||||
119 | const applyHeading = page.locator('text=Select Equipment & Design');
|
||||
120 | await expect(applyHeading).toBeVisible({ timeout: 5000 });
|
||||
121 | });
|
||||
122 | });
|
||||
```
|
||||
File diff suppressed because one or more lines are too long
@@ -1,22 +0,0 @@
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
|
||||
export default defineConfig({
|
||||
testDir: 'e2e',
|
||||
fullyParallel: true,
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
reporter: 'html',
|
||||
use: {
|
||||
baseURL: 'http://localhost:3000',
|
||||
trace: 'on-first-retry',
|
||||
screenshot: 'only-on-failure',
|
||||
video: 'retain-on-failure',
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
],
|
||||
});
|
||||
Executable
+32
@@ -0,0 +1,32 @@
|
||||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
|
||||
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "sqlite"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model User {
|
||||
id String @id @default(cuid())
|
||||
email String @unique
|
||||
name String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
|
||||
model Post {
|
||||
id String @id @default(cuid())
|
||||
title String
|
||||
content String?
|
||||
published Boolean @default(false)
|
||||
authorId String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Executable
+5
@@ -0,0 +1,5 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json({ message: "Hello, world!" });
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { fmt } from '@/lib/game/stores';
|
||||
import { useGameStore } from '@/lib/game/stores';
|
||||
|
||||
interface GameOverScreenProps {
|
||||
day: number;
|
||||
hour: number;
|
||||
insightGained: number;
|
||||
totalInsight: number;
|
||||
}
|
||||
|
||||
export function GameOverScreen({ day, hour, insightGained, totalInsight }: GameOverScreenProps) {
|
||||
const startNewLoop = () => {
|
||||
useGameStore.getState().startNewLoop();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
|
||||
<Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl text-center game-title text-amber-400">
|
||||
LOOP ENDS
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-center text-gray-400">
|
||||
The time loop resets... but you remember.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-amber-400 game-mono">{fmt(insightGained)}</div>
|
||||
<div className="text-xs text-gray-400">Insight Gained</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-blue-400 game-mono">{day}</div>
|
||||
<div className="text-xs text-gray-400">Day Reached</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-purple-400 game-mono">{hour}</div>
|
||||
<div className="text-xs text-gray-400">Hour</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-green-400 game-mono">{fmt(totalInsight)}</div>
|
||||
<div className="text-xs text-gray-400">Total Insight</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
|
||||
size="lg"
|
||||
onClick={startNewLoop}
|
||||
>
|
||||
Begin New Loop
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { DebugName } from '@/components/game/debug/debug-context';
|
||||
import { SPELLS_DEF } from '@/lib/game/constants';
|
||||
import type { SpellDef } from '@/lib/game/types';
|
||||
|
||||
export function GrimoireTab() {
|
||||
const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined' && SPELLS_DEF) {
|
||||
setGrimoireSpells(
|
||||
Object.entries(SPELLS_DEF).filter((entry): entry is [string, SpellDef] => !!entry[1].grimoire)
|
||||
);
|
||||
}
|
||||
setLoaded(true);
|
||||
}, []);
|
||||
|
||||
if (!loaded) {
|
||||
return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
|
||||
}
|
||||
|
||||
if (grimoireSpells.length === 0) {
|
||||
return (
|
||||
<div className="p-4 text-center text-gray-400">
|
||||
No grimoire spells available yet. Defeat guardians to unlock spells.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const availablePages = Math.ceil(grimoireSpells.length / 12);
|
||||
|
||||
return (
|
||||
<DebugName name="GrimoireTab">
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-gray-400">
|
||||
<p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
|
||||
<p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{grimoireSpells.map(([id, spell]) => (
|
||||
<div
|
||||
key={id}
|
||||
className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<span className="font-bold text-gray-100">{spell.name}</span>
|
||||
<Badge variant="outline" className="border-gray-600">
|
||||
{spell.elem}
|
||||
</Badge>
|
||||
</div>
|
||||
{spell.desc && <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>}
|
||||
<div className="text-xs text-gray-500 space-y-1">
|
||||
<div>Cost: {spell.cost.amount} {
|
||||
spell.cost.type === 'element'
|
||||
? spell.cost.element
|
||||
: 'raw mana'
|
||||
}</div>
|
||||
<div>Power: {spell.dmg}</div>
|
||||
{spell.effects && spell.effects.length > 0 && (
|
||||
<div>Effects: {spell.effects.map(e => e.type).join(', ')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</DebugName>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Mountain } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { ManaDisplay } from '@/components/game';
|
||||
import { ActionButtons } from '@/components/game';
|
||||
import { AttunementStatus } from '@/components/game/AttunementStatus';
|
||||
import { ActivityLogPanel } from '@/components/game/ActivityLogPanel';
|
||||
import { DebugName } from '@/components/game/debug/debug-context';
|
||||
import { useGameStore, useManaStore, useCombatStore, useCraftingStore, usePrestigeStore } from '@/lib/game/stores';
|
||||
import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
|
||||
import { getUnifiedEffects } from '@/lib/game/effects';
|
||||
import { getMeditationBonus, getIncursionStrength } from '@/lib/game/stores';
|
||||
import { computeTotalMaxMana, computeTotalRegen, computeTotalClickMana } from '@/lib/game/effects';
|
||||
|
||||
export function LeftPanel() {
|
||||
const [isGathering, setIsGathering] = useState(false);
|
||||
|
||||
const rawMana = useManaStore((s) => s.rawMana);
|
||||
const elements = useManaStore((s) => s.elements);
|
||||
const meditateTicks = useManaStore((s) => s.meditateTicks);
|
||||
const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
|
||||
const equippedInstances = useCraftingStore((s) => s.equippedInstances);
|
||||
const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
|
||||
const gatherMana = useGameStore((s) => s.gatherMana);
|
||||
const spireMode = useCombatStore((s) => s.spireMode);
|
||||
const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
|
||||
const currentAction = useCombatStore((s) => s.currentAction);
|
||||
const designProgress = useCraftingStore((s) => s.designProgress);
|
||||
const designProgress2 = useCraftingStore((s) => s.designProgress2);
|
||||
const preparationProgress = useCraftingStore((s) => s.preparationProgress);
|
||||
const applicationProgress = useCraftingStore((s) => s.applicationProgress);
|
||||
const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
|
||||
|
||||
const handleGatherStart = () => { setIsGathering(true); gatherMana(); };
|
||||
const handleGatherEnd = () => { setIsGathering(false); };
|
||||
|
||||
useEffect(() => {
|
||||
if (!isGathering) return;
|
||||
let lastGatherTime = 0;
|
||||
const minGatherInterval = 100;
|
||||
let animationFrameId: number;
|
||||
const gatherLoop = (timestamp: number) => {
|
||||
if (timestamp - lastGatherTime >= minGatherInterval) {
|
||||
gatherMana();
|
||||
lastGatherTime = timestamp;
|
||||
}
|
||||
animationFrameId = requestAnimationFrame(gatherLoop);
|
||||
};
|
||||
animationFrameId = requestAnimationFrame(gatherLoop);
|
||||
return () => cancelAnimationFrame(animationFrameId);
|
||||
}, [isGathering, gatherMana]);
|
||||
|
||||
const upgradeEffects = getUnifiedEffects({ skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances });
|
||||
const maxMana = computeTotalMaxMana({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
|
||||
const baseRegen = computeTotalRegen({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
|
||||
const clickMana = computeTotalClickMana({ skills: {}, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
|
||||
const meditationMultiplier = getMeditationBonus(meditateTicks, {}, upgradeEffects.meditationEfficiency);
|
||||
const incursionStrength = getIncursionStrength(useGameStore((s) => s.day), useGameStore((s) => s.hour));
|
||||
const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
|
||||
|
||||
return (
|
||||
<div className="md:w-80 space-y-3 flex-shrink-0 p-1">
|
||||
{/* 1. Mana Display */}
|
||||
<DebugName name="ManaDisplay">
|
||||
<ManaDisplay
|
||||
rawMana={rawMana}
|
||||
maxMana={maxMana}
|
||||
effectiveRegen={effectiveRegen}
|
||||
meditationMultiplier={meditationMultiplier}
|
||||
clickMana={clickMana}
|
||||
isGathering={isGathering}
|
||||
onGatherStart={handleGatherStart}
|
||||
onGatherEnd={handleGatherEnd}
|
||||
elements={elements}
|
||||
/>
|
||||
</DebugName>
|
||||
|
||||
{/* 2. Spire Entry */}
|
||||
{!spireMode && (
|
||||
<DebugName name="ClimbSpireButton">
|
||||
<Button className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-600 text-white" size="lg" onClick={enterSpireMode}>
|
||||
<Mountain className="w-5 h-5 mr-2" />
|
||||
Climb the Spire
|
||||
</Button>
|
||||
</DebugName>
|
||||
)}
|
||||
|
||||
{/* 3. Current Action */}
|
||||
{!spireMode && (
|
||||
<DebugName name="ActionButtons">
|
||||
<Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
|
||||
<CardContent className="pt-3">
|
||||
<ActionButtons
|
||||
currentAction={currentAction}
|
||||
designProgress={designProgress}
|
||||
designProgress2={designProgress2}
|
||||
preparationProgress={preparationProgress}
|
||||
applicationProgress={applicationProgress}
|
||||
equipmentCraftingProgress={equipmentCraftingProgress}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DebugName>
|
||||
)}
|
||||
|
||||
{/* 4. Attunement Status */}
|
||||
{!spireMode && (
|
||||
<DebugName name="AttunementStatus">
|
||||
<Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
|
||||
<CardContent className="pt-3">
|
||||
<AttunementStatus />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</DebugName>
|
||||
)}
|
||||
|
||||
{/* 5. Activity Log */}
|
||||
<DebugName name="ActivityLogPanel">
|
||||
<ActivityLogPanel />
|
||||
</DebugName>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+117
-163
@@ -1,163 +1,136 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* === Background Colors (Depth Levels) === */
|
||||
--bg-base: #060811;
|
||||
--bg-surface: #0C1020;
|
||||
--bg-elevated: #111628;
|
||||
--bg-sunken: #181f35;
|
||||
|
||||
/* === Border Colors === */
|
||||
--border-subtle: #1e2a45;
|
||||
--border-default: #2a3a60;
|
||||
--border-focus: #5B8FFF;
|
||||
|
||||
/* === Text Colors === */
|
||||
--text-primary: #c8d8f8;
|
||||
--text-secondary: #7a92c0;
|
||||
--text-muted: #4a5f8a;
|
||||
--text-disabled: #2a3a60;
|
||||
|
||||
/* === Mana Element Colors === */
|
||||
--mana-fire: #E8734A;
|
||||
--mana-water: #3BAFDA;
|
||||
--mana-air: #C8D8F8;
|
||||
--mana-earth: #B8860B;
|
||||
--mana-light: #D4A843;
|
||||
--mana-dark: #4B0082;
|
||||
--mana-death: #8B7D8B;
|
||||
--mana-transfer: #00CED1;
|
||||
--mana-metal: #708090;
|
||||
--mana-sand: #C2B280;
|
||||
--mana-lightning: #FFD700;
|
||||
--mana-crystal: #B0E0E6;
|
||||
--mana-stellar: #FF8C00;
|
||||
--mana-void: #1A0A2E;
|
||||
|
||||
/* === Semantic UI Colors === */
|
||||
--color-success: #27AE60;
|
||||
--color-warning: #F39C12;
|
||||
--color-danger: #C0392B;
|
||||
--color-info: #3B6FE8;
|
||||
|
||||
/* === Rarity Colors === */
|
||||
--rarity-common: #9CA3AF;
|
||||
--rarity-common-glow: rgba(156, 163, 175, 0.25);
|
||||
--rarity-uncommon: #22C55E;
|
||||
--rarity-uncommon-glow: rgba(34, 197, 94, 0.25);
|
||||
--rarity-rare: #3B82F6;
|
||||
--rarity-rare-glow: rgba(59, 130, 246, 0.25);
|
||||
--rarity-epic: #A855F7;
|
||||
--rarity-epic-glow: rgba(168, 85, 247, 0.25);
|
||||
--rarity-legendary: #F59E0B;
|
||||
--rarity-legendary-glow: rgba(245, 158, 11, 0.375);
|
||||
--rarity-mythic: #E8734A;
|
||||
--rarity-mythic-glow: rgba(232, 115, 74, 0.25);
|
||||
|
||||
/* === Interactive Colors === */
|
||||
--interactive-primary: #3B6FE8;
|
||||
--interactive-primary-hover: #5B8FFF;
|
||||
--interactive-secondary: #2a3a60;
|
||||
--interactive-secondary-hover: #3a4a70;
|
||||
--interactive-danger: #C0392B;
|
||||
--interactive-danger-hover: #E74C3C;
|
||||
--interactive-disabled: #1e2a45;
|
||||
|
||||
/* === Typography === */
|
||||
--font-display: 'Cinzel', serif;
|
||||
--font-body: 'Source Serif 4', 'Crimson Text', Georgia, serif;
|
||||
--font-ui: 'JetBrains Mono', monospace;
|
||||
|
||||
/* === Shadow System === */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow-gold: 0 0 15px rgba(212, 168, 67, 0.4);
|
||||
--shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
|
||||
--shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
|
||||
|
||||
/* === Mana Loop Design Tokens (Strategy Spec) === */
|
||||
--bg-void: #0d0d0f;
|
||||
--bg-panel: #141418;
|
||||
--bg-raised: #242430;
|
||||
--mana-raw: #8b7fd4;
|
||||
--mana-transference: #1abc9c;
|
||||
--border-accent: rgba(255, 255, 255, 0.22);
|
||||
|
||||
/* === Legacy Shadcn Variables (mapped to new system) === */
|
||||
--background: var(--bg-base);
|
||||
--foreground: var(--text-primary);
|
||||
--card: var(--bg-surface);
|
||||
--card-foreground: var(--text-primary);
|
||||
--popover: var(--bg-elevated);
|
||||
--popover-foreground: var(--text-primary);
|
||||
--primary: var(--interactive-primary);
|
||||
--radius: 0.625rem;
|
||||
--background: #060811;
|
||||
--foreground: #c8d8f8;
|
||||
--card: #0C1020;
|
||||
--card-foreground: #c8d8f8;
|
||||
--popover: #111628;
|
||||
--popover-foreground: #c8d8f8;
|
||||
--primary: #3B6FE8;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: var(--bg-sunken);
|
||||
--secondary-foreground: var(--text-primary);
|
||||
--muted: var(--bg-sunken);
|
||||
--muted-foreground: var(--text-secondary);
|
||||
--accent: var(--interactive-secondary);
|
||||
--accent-foreground: var(--text-primary);
|
||||
--destructive: var(--color-danger);
|
||||
--border: var(--border-subtle);
|
||||
--input: var(--border-subtle);
|
||||
--ring: var(--border-focus);
|
||||
--chart-1: var(--mana-fire);
|
||||
--chart-2: var(--mana-water);
|
||||
--chart-3: var(--mana-light);
|
||||
--chart-4: var(--color-success);
|
||||
--chart-5: var(--mana-lightning);
|
||||
--sidebar: var(--bg-surface);
|
||||
--sidebar-foreground: var(--text-primary);
|
||||
--sidebar-primary: var(--mana-light);
|
||||
--secondary: #1e2a45;
|
||||
--secondary-foreground: #c8d8f8;
|
||||
--muted: #181f35;
|
||||
--muted-foreground: #7a92c0;
|
||||
--accent: #2a3a60;
|
||||
--accent-foreground: #c8d8f8;
|
||||
--destructive: #C0392B;
|
||||
--border: #1e2a45;
|
||||
--input: #1e2a45;
|
||||
--ring: #3B6FE8;
|
||||
--chart-1: #FF6B35;
|
||||
--chart-2: #4ECDC4;
|
||||
--chart-3: #9B59B6;
|
||||
--chart-4: #2ECC71;
|
||||
--chart-5: #FFD700;
|
||||
--sidebar: #0C1020;
|
||||
--sidebar-foreground: #c8d8f8;
|
||||
--sidebar-primary: #D4A843;
|
||||
--sidebar-primary-foreground: #0C1020;
|
||||
--sidebar-accent: var(--interactive-secondary);
|
||||
--sidebar-accent-foreground: var(--text-primary);
|
||||
--sidebar-border: var(--border-subtle);
|
||||
--sidebar-ring: var(--mana-light);
|
||||
--sidebar-accent: #1e2a45;
|
||||
--sidebar-accent-foreground: #c8d8f8;
|
||||
--sidebar-border: #1e2a45;
|
||||
--sidebar-ring: #D4A843;
|
||||
|
||||
/* Legacy game colors (kept for compatibility) */
|
||||
--game-bg: var(--bg-base);
|
||||
--game-bg1: var(--bg-surface);
|
||||
--game-bg2: var(--bg-elevated);
|
||||
--game-bg3: var(--bg-sunken);
|
||||
--game-border: var(--border-subtle);
|
||||
--game-border2: var(--border-default);
|
||||
--game-text: var(--text-primary);
|
||||
--game-text2: var(--text-secondary);
|
||||
--game-text3: var(--text-muted);
|
||||
--game-gold: var(--mana-light);
|
||||
/* Game-specific colors */
|
||||
--game-bg: #060811;
|
||||
--game-bg1: #0C1020;
|
||||
--game-bg2: #111628;
|
||||
--game-bg3: #181f35;
|
||||
--game-border: #1e2a45;
|
||||
--game-border2: #2a3a60;
|
||||
--game-text: #c8d8f8;
|
||||
--game-text2: #7a92c0;
|
||||
--game-text3: #4a5f8a;
|
||||
--game-gold: #D4A843;
|
||||
--game-gold2: #A87830;
|
||||
--game-purple: #7C5CBF;
|
||||
--game-purpleL: #A07EE0;
|
||||
--game-accent: var(--interactive-primary);
|
||||
--game-accentL: var(--interactive-primary-hover);
|
||||
--game-danger: var(--color-danger);
|
||||
--game-success: var(--color-success);
|
||||
--game-accent: #3B6FE8;
|
||||
--game-accentL: #5B8FFF;
|
||||
--game-danger: #C0392B;
|
||||
--game-success: #27AE60;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #060811;
|
||||
--foreground: #c8d8f8;
|
||||
--card: #0C1020;
|
||||
--card-foreground: #c8d8f8;
|
||||
--popover: #111628;
|
||||
--popover-foreground: #c8d8f8;
|
||||
--primary: #5B8FFF;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #1e2a45;
|
||||
--secondary-foreground: #c8d8f8;
|
||||
--muted: #181f35;
|
||||
--muted-foreground: #7a92c0;
|
||||
--accent: #2a3a60;
|
||||
--accent-foreground: #c8d8f8;
|
||||
--destructive: #C0392B;
|
||||
--border: #1e2a45;
|
||||
--input: #1e2a45;
|
||||
--ring: #5B8FFF;
|
||||
--chart-1: #FF6B35;
|
||||
--chart-2: #4ECDC4;
|
||||
--chart-3: #9B59B6;
|
||||
--chart-4: #2ECC71;
|
||||
--chart-5: #FFD700;
|
||||
--sidebar: #0C1020;
|
||||
--sidebar-foreground: #c8d8f8;
|
||||
--sidebar-primary: #D4A843;
|
||||
--sidebar-primary-foreground: #0C1020;
|
||||
--sidebar-accent: #1e2a45;
|
||||
--sidebar-accent-foreground: #c8d8f8;
|
||||
--sidebar-border: #1e2a45;
|
||||
--sidebar-ring: #D4A843;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -166,13 +139,13 @@
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-body);
|
||||
font-family: 'Crimson Text', Georgia, serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* Game-specific styles */
|
||||
.game-root {
|
||||
font-family: var(--font-body);
|
||||
font-family: 'Crimson Text', Georgia, serif;
|
||||
background: var(--game-bg);
|
||||
color: var(--game-text);
|
||||
min-height: 100vh;
|
||||
@@ -186,7 +159,7 @@
|
||||
}
|
||||
|
||||
.game-title {
|
||||
font-family: var(--font-display);
|
||||
font-family: 'Cinzel', serif;
|
||||
background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-purpleL) 50%, var(--game-accentL) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -194,13 +167,13 @@
|
||||
}
|
||||
|
||||
.game-panel-title {
|
||||
font-family: var(--font-display);
|
||||
font-family: 'Cinzel', serif;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.game-mono {
|
||||
font-family: var(--font-ui);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
@@ -245,25 +218,6 @@
|
||||
box-shadow: 0 0 15px rgba(60, 111, 232, 0.4);
|
||||
}
|
||||
|
||||
/* Gather button glow animation */
|
||||
@keyframes gather-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(59, 111, 232, 0.3), 0 0 10px rgba(59, 111, 232, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 15px rgba(59, 111, 232, 0.5), 0 0 25px rgba(59, 111, 232, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gather-glow {
|
||||
animation: gather-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Active scale effect for buttons - using CSS only */
|
||||
.active\:scale-95:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.btn-game {
|
||||
transition: all 0.2s ease;
|
||||
|
||||
+26
-16
@@ -1,25 +1,38 @@
|
||||
import type { Metadata } from "next";
|
||||
import localFont from "next/font/local";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import { GameToaster } from "@/components/game/GameToast";
|
||||
import { DebugProvider } from "@/components/game/debug/debug-context";
|
||||
|
||||
const geistSans = localFont({
|
||||
src: '../../public/fonts/GeistVF.woff',
|
||||
variable: '--font-geist-sans',
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = localFont({
|
||||
src: '../../public/fonts/GeistMonoVF.woff',
|
||||
variable: '--font-geist-mono',
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Mana Loop",
|
||||
description: "A time-loop incremental game where you climb the Spire and sign pacts with guardians.",
|
||||
keywords: ["Mana Loop", "incremental game", "idle game", "time loop"],
|
||||
authors: [{ name: "Mana Loop Team" }],
|
||||
title: "Z.ai Code Scaffold - AI-Powered Development",
|
||||
description: "Modern Next.js scaffold optimized for AI-powered development with Z.ai. Built with TypeScript, Tailwind CSS, and shadcn/ui.",
|
||||
keywords: ["Z.ai", "Next.js", "TypeScript", "Tailwind CSS", "shadcn/ui", "AI development", "React"],
|
||||
authors: [{ name: "Z.ai Team" }],
|
||||
icons: {
|
||||
icon: "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
|
||||
},
|
||||
openGraph: {
|
||||
title: "Z.ai Code Scaffold",
|
||||
description: "AI-powered development with modern React stack",
|
||||
url: "https://chat.z.ai",
|
||||
siteName: "Z.ai",
|
||||
type: "website",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Z.ai Code Scaffold",
|
||||
description: "AI-powered development with modern React stack",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -32,11 +45,8 @@ export default function RootLayout({
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
|
||||
>
|
||||
<DebugProvider>
|
||||
{children}
|
||||
<Toaster />
|
||||
<GameToaster />
|
||||
</DebugProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
Regular → Executable
+384
-187
@@ -1,237 +1,434 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, lazy, Suspense } from 'react';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
|
||||
import {
|
||||
useGameStore,
|
||||
useUIStore,
|
||||
useManaStore,
|
||||
useCombatStore,
|
||||
usePrestigeStore,
|
||||
useCraftingStore,
|
||||
fmt,
|
||||
computeMaxMana,
|
||||
computeRegen,
|
||||
computeClickMana,
|
||||
getMeditationBonus,
|
||||
getIncursionStrength,
|
||||
} from '@/lib/game/stores';
|
||||
import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
|
||||
import { useGameLoop } from '@/lib/game/stores/gameHooks';
|
||||
import { getUnifiedEffects } from '@/lib/game/effects';
|
||||
import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
|
||||
import { TimeDisplay } from '@/components/game';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useGameStore, useGameLoop, fmt, fmtDec, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost, getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/store';
|
||||
import { getDamageBreakdown } from '@/lib/game/computed-stats';
|
||||
import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
|
||||
import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
|
||||
import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
|
||||
import { formatHour } from '@/lib/game/formatting';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { ErrorBoundary } from '@/components/ErrorBoundary';
|
||||
import { DebugName } from '@/components/game/debug/debug-context';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { RotateCcw } from 'lucide-react';
|
||||
import { CraftingTab, SpireTab, SpellsTab, LabTab, SkillsTab, StatsTab } from '@/components/game/tabs';
|
||||
import { FamiliarTab } from '@/components/game/tabs/FamiliarTab';
|
||||
import { ComboMeter, ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
|
||||
import { LootInventoryDisplay } from '@/components/game/LootInventory';
|
||||
import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
|
||||
|
||||
import { GameOverScreen } from './components/GameOverScreen';
|
||||
import { LeftPanel } from './components/LeftPanel';
|
||||
import { GrimoireTab } from './components/GrimoireTab';
|
||||
export default function ManaLoopGame() {
|
||||
const [activeTab, setActiveTab] = useState('spire');
|
||||
const [convertTarget, setConvertTarget] = useState('fire');
|
||||
const [isGathering, setIsGathering] = useState(false);
|
||||
|
||||
// Lazy load tab components
|
||||
const DisciplinesTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DisciplinesTab })));
|
||||
const SpellsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.SpellsTab })));
|
||||
const StatsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.StatsTab })));
|
||||
const DebugTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DebugTab })));
|
||||
const AchievementsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.AchievementsTab })));
|
||||
const AttunementsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.AttunementsTab })));
|
||||
const PrestigeTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.PrestigeTab })));
|
||||
const EquipmentTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.EquipmentTab })));
|
||||
const GolemancyTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.GolemancyTab })));
|
||||
const GuardianPactsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.GuardianPactsTab })));
|
||||
const SpireSummaryTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.SpireSummaryTab })));
|
||||
const CraftingTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.CraftingTab })));
|
||||
const SpireCombatPage = lazy(() => import('@/components/game/tabs/SpireCombatPage').then(m => ({ default: m.SpireCombatPage })));
|
||||
// Game store
|
||||
const store = useGameStore();
|
||||
const gameLoop = useGameLoop();
|
||||
|
||||
const TabFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
|
||||
// Computed effects from upgrades and equipment
|
||||
const upgradeEffects = getUnifiedEffects(store);
|
||||
|
||||
function TabErrorFallback({ name }: { name: string }) {
|
||||
return <div className="p-4 text-red-400">{name} tab failed to load.</div>;
|
||||
}
|
||||
|
||||
// ─── Derived Stats Hook ──────────────────────────────────────────────────────
|
||||
|
||||
function useGameDerivedStats() {
|
||||
const { prestigeUpgrades } = usePrestigeStore(useShallow(s => ({
|
||||
prestigeUpgrades: s.prestigeUpgrades,
|
||||
})));
|
||||
const { meditateTicks } = useManaStore(useShallow(s => ({
|
||||
meditateTicks: s.meditateTicks,
|
||||
})));
|
||||
const equippedInstances = useCraftingStore((s) => s.equippedInstances);
|
||||
const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
|
||||
const day = useGameStore((s) => s.day);
|
||||
const hour = useGameStore((s) => s.hour);
|
||||
|
||||
const upgradeEffects = getUnifiedEffects({
|
||||
skillUpgrades: {},
|
||||
skillTiers: {},
|
||||
equippedInstances,
|
||||
equipmentInstances,
|
||||
});
|
||||
|
||||
const disciplineEffects = computeDisciplineEffects();
|
||||
|
||||
const maxMana = computeMaxMana({
|
||||
skills: {},
|
||||
prestigeUpgrades,
|
||||
skillUpgrades: {},
|
||||
skillTiers: {},
|
||||
}, upgradeEffects, disciplineEffects);
|
||||
|
||||
const baseRegen = computeRegen({
|
||||
skills: {},
|
||||
prestigeUpgrades,
|
||||
skillUpgrades: {},
|
||||
skillTiers: {},
|
||||
attunements: {},
|
||||
}, upgradeEffects, disciplineEffects);
|
||||
|
||||
const clickMana = computeClickMana({ skills: {} }, disciplineEffects);
|
||||
const meditationMultiplier = getMeditationBonus(meditateTicks, {}, upgradeEffects.meditationEfficiency);
|
||||
const incursionStrength = getIncursionStrength(day, hour);
|
||||
// Derived stats
|
||||
const maxMana = computeMaxMana(store, upgradeEffects);
|
||||
const baseRegen = computeRegen(store, upgradeEffects);
|
||||
const clickMana = computeClickMana(store);
|
||||
const floorElem = getFloorElement(store.currentFloor);
|
||||
const floorElemDef = ELEMENTS[floorElem];
|
||||
const isGuardianFloor = !!GUARDIANS[store.currentFloor];
|
||||
const currentGuardian = GUARDIANS[store.currentFloor];
|
||||
const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, upgradeEffects.meditationEfficiency);
|
||||
const incursionStrength = getIncursionStrength(store.day, store.hour);
|
||||
const studySpeedMult = getStudySpeedMultiplier(store.skills);
|
||||
const studyCostMult = getStudyCostMultiplier(store.skills);
|
||||
|
||||
// Effective regen with incursion penalty
|
||||
const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
|
||||
|
||||
// Mana Cascade bonus
|
||||
const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE)
|
||||
? Math.floor(maxMana / 100) * 0.1
|
||||
: 0;
|
||||
|
||||
const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
|
||||
? Math.floor(maxMana / 100) * 0.25
|
||||
: 0;
|
||||
// Effective regen
|
||||
const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus) * meditationMultiplier;
|
||||
|
||||
const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
|
||||
// Get all active spells from equipment
|
||||
const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
|
||||
|
||||
return { maxMana, effectiveRegen, clickMana, meditationMultiplier };
|
||||
}
|
||||
|
||||
// ─── Tab Triggers ────────────────────────────────────────────────────────────
|
||||
|
||||
function TabTriggers() {
|
||||
return (
|
||||
<TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
|
||||
<TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
|
||||
<TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
|
||||
<TabsTrigger value="disciplines" className="text-xs px-2 py-1">📚 Disciplines</TabsTrigger>
|
||||
<TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
|
||||
<TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
|
||||
<TabsTrigger value="attunements" className="text-xs px-2 py-1">⚗️ Attunements</TabsTrigger>
|
||||
<TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achievements</TabsTrigger>
|
||||
<TabsTrigger value="prestige" className="text-xs px-2 py-1">✨ Prestige</TabsTrigger>
|
||||
<TabsTrigger value="equipment" className="text-xs px-2 py-1">⚔️ Equipment</TabsTrigger>
|
||||
<TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golemancy</TabsTrigger>
|
||||
<TabsTrigger value="pacts" className="text-xs px-2 py-1">📜 Pacts</TabsTrigger>
|
||||
<TabsTrigger value="spire" className="text-xs px-2 py-1">🏔️ Spire</TabsTrigger>
|
||||
<TabsTrigger value="crafting" className="text-xs px-2 py-1">⚒️ Crafting</TabsTrigger>
|
||||
</TabsList>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Lazy Tab Content ────────────────────────────────────────────────────────
|
||||
|
||||
function LazyTab({ name, children }: { name: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<ErrorBoundary fallback={<TabErrorFallback name={name} />}>
|
||||
<Suspense fallback={<TabFallback />}>
|
||||
{children}
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Game Component ─────────────────────────────────────────────────────
|
||||
|
||||
export default function ManaLoopGame() {
|
||||
const [activeTab, setActiveTab] = useState('spells');
|
||||
|
||||
useGameLoop();
|
||||
|
||||
const { day, hour, initGame } = useGameStore(useShallow(s => ({
|
||||
day: s.day,
|
||||
hour: s.hour,
|
||||
initGame: s.initGame,
|
||||
})));
|
||||
const { insight, loopInsight } = usePrestigeStore(useShallow(s => ({
|
||||
insight: s.insight,
|
||||
loopInsight: s.loopInsight,
|
||||
})));
|
||||
const spireMode = useCombatStore((s) => s.spireMode);
|
||||
const gameOver = useUIStore((s) => s.gameOver);
|
||||
|
||||
useGameDerivedStats();
|
||||
// Compute total DPS
|
||||
const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
|
||||
|
||||
// Auto-gather while holding
|
||||
useEffect(() => {
|
||||
initGame();
|
||||
}, [initGame]);
|
||||
if (!isGathering) return;
|
||||
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
|
||||
let lastGatherTime = 0;
|
||||
const minGatherInterval = 100;
|
||||
let animationFrameId: number;
|
||||
|
||||
const gatherLoop = (timestamp: number) => {
|
||||
if (timestamp - lastGatherTime >= minGatherInterval) {
|
||||
store.gatherMana();
|
||||
lastGatherTime = timestamp;
|
||||
}
|
||||
animationFrameId = requestAnimationFrame(gatherLoop);
|
||||
};
|
||||
|
||||
animationFrameId = requestAnimationFrame(gatherLoop);
|
||||
return () => cancelAnimationFrame(animationFrameId);
|
||||
}, [isGathering, store]);
|
||||
|
||||
// Handle gather button events
|
||||
const handleGatherStart = () => {
|
||||
setIsGathering(true);
|
||||
store.gatherMana();
|
||||
};
|
||||
|
||||
const handleGatherEnd = () => {
|
||||
setIsGathering(false);
|
||||
};
|
||||
|
||||
// Start game loop
|
||||
useEffect(() => {
|
||||
if (spireMode) {
|
||||
setActiveTab('spells'); // eslint-disable-line react-hooks/set-state-in-effect
|
||||
}
|
||||
}, [spireMode]);
|
||||
const cleanup = gameLoop.start();
|
||||
return cleanup;
|
||||
}, [gameLoop]);
|
||||
|
||||
if (gameOver) {
|
||||
return <GameOverScreen day={day} hour={hour} insightGained={loopInsight} totalInsight={insight} />;
|
||||
}
|
||||
// Check if spell can be cast
|
||||
const canCastSpell = (spellId: string): boolean => {
|
||||
const spell = SPELLS_DEF[spellId];
|
||||
if (!spell) return false;
|
||||
return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
|
||||
};
|
||||
|
||||
if (!mounted) return <div className="p-4 text-center text-gray-400">Loading...</div>;
|
||||
|
||||
if (spireMode) {
|
||||
// Game Over Screen
|
||||
if (store.gameOver) {
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<Suspense fallback={<div className="p-4 text-center text-gray-400">Loading spire...</div>}>
|
||||
<SpireCombatPage />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
<div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
|
||||
<Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
|
||||
{store.victory ? 'VICTORY!' : 'LOOP ENDS'}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-center text-gray-400">
|
||||
{store.victory
|
||||
? 'The Awakened One falls! Your power echoes through eternity.'
|
||||
: 'The time loop resets... but you remember.'}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-amber-400 game-mono">{fmt(store.loopInsight)}</div>
|
||||
<div className="text-xs text-gray-400">Insight Gained</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
|
||||
<div className="text-xs text-gray-400">Best Floor</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
|
||||
<div className="text-xs text-gray-400">Pacts Signed</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800 rounded">
|
||||
<div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
|
||||
<div className="text-xs text-gray-400">Total Loops</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
|
||||
size="lg"
|
||||
onClick={() => store.startNewLoop()}
|
||||
>
|
||||
Begin New Loop
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<TooltipProvider>
|
||||
<div className="game-root min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-gradient-to-b from-gray-900 to-gray-900/80 border-b border-gray-700 px-4 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<TimeDisplay day={day} hour={hour} insight={insight} />
|
||||
<TimeDisplay
|
||||
day={store.day}
|
||||
hour={store.hour}
|
||||
isPaused={store.isPaused}
|
||||
togglePause={store.togglePause}
|
||||
/>
|
||||
|
||||
<ComboMeter comboCount={store.comboCount} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
|
||||
<LeftPanel />
|
||||
{/* Left Panel - Mana & Actions */}
|
||||
<div className="md:w-80 space-y-4 flex-shrink-0">
|
||||
{/* Mana Display */}
|
||||
<ManaDisplay
|
||||
rawMana={store.rawMana}
|
||||
maxMana={maxMana}
|
||||
effectiveRegen={effectiveRegen}
|
||||
isGathering={isGathering}
|
||||
onGatherStart={handleGatherStart}
|
||||
onGatherEnd={handleGatherEnd}
|
||||
/>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<ActionButtons
|
||||
store={store}
|
||||
isClimbing={store.isClimbing}
|
||||
currentStudyTarget={store.currentStudyTarget}
|
||||
currentFloor={store.currentFloor}
|
||||
currentGuardian={currentGuardian}
|
||||
isGuardianFloor={isGuardianFloor}
|
||||
floorElem={floorElem}
|
||||
floorElemDef={floorElemDef}
|
||||
activeSpell={store.activeSpell}
|
||||
convertTarget={convertTarget}
|
||||
setConvertTarget={setConvertTarget}
|
||||
canCastSpell={canCastSpell}
|
||||
activeEquipmentSpells={activeEquipmentSpells}
|
||||
totalDPS={totalDPS}
|
||||
/>
|
||||
|
||||
{/* Calendar */}
|
||||
<CalendarDisplay
|
||||
day={store.day}
|
||||
hour={store.hour}
|
||||
incursionStrength={incursionStrength}
|
||||
/>
|
||||
|
||||
{/* Loot Inventory */}
|
||||
<LootInventoryDisplay
|
||||
loot={store.loot}
|
||||
onSellLoot={store.sellLoot}
|
||||
/>
|
||||
|
||||
{/* Achievements */}
|
||||
<AchievementsDisplay
|
||||
achievements={store.achievements}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Tabs */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabTriggers />
|
||||
<TabsList className="grid grid-cols-8 w-full mb-4">
|
||||
<TabsTrigger value="spire">⚔️ Spire</TabsTrigger>
|
||||
<TabsTrigger value="skills">📚 Skills</TabsTrigger>
|
||||
<TabsTrigger value="spells">✨ Spells</TabsTrigger>
|
||||
<TabsTrigger value="crafting">🔧 Craft</TabsTrigger>
|
||||
<TabsTrigger value="lab">🔬 Lab</TabsTrigger>
|
||||
<TabsTrigger value="familiar">🐾 Familiar</TabsTrigger>
|
||||
<TabsTrigger value="stats">📊 Stats</TabsTrigger>
|
||||
<TabsTrigger value="grimoire">📖 Grimoire</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="spells"><LazyTab name="spells"><SpellsTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="stats"><LazyTab name="stats"><StatsTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="disciplines"><LazyTab name="disciplines"><DisciplinesTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="grimoire"><GrimoireTab /></TabsContent>
|
||||
<TabsContent value="debug"><LazyTab name="debug"><DebugTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="attunements"><LazyTab name="attunements"><AttunementsTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="achievements"><LazyTab name="achievements"><AchievementsTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="prestige"><LazyTab name="prestige"><PrestigeTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="equipment"><LazyTab name="equipment"><EquipmentTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="golemancy"><LazyTab name="golemancy"><GolemancyTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="pacts"><LazyTab name="pacts"><GuardianPactsTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="spire"><LazyTab name="spire"><SpireSummaryTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="crafting"><LazyTab name="crafting"><CraftingTab /></LazyTab></TabsContent>
|
||||
<TabsContent value="spire">
|
||||
<SpireTab
|
||||
store={store}
|
||||
floorElem={floorElem}
|
||||
isGuardianFloor={isGuardianFloor}
|
||||
currentGuardian={currentGuardian}
|
||||
activeEquipmentSpells={activeEquipmentSpells}
|
||||
totalDPS={totalDPS}
|
||||
upgradeEffects={upgradeEffects}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="skills">
|
||||
<SkillsTab store={store} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="spells">
|
||||
<SpellsTab store={store} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="crafting">
|
||||
<CraftingTab store={store} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="lab">
|
||||
<LabTab store={store} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="familiar">
|
||||
<FamiliarTab store={store} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="stats">
|
||||
<StatsTab
|
||||
store={store}
|
||||
upgradeEffects={upgradeEffects}
|
||||
maxMana={maxMana}
|
||||
baseRegen={baseRegen}
|
||||
clickMana={clickMana}
|
||||
meditationMultiplier={meditationMultiplier}
|
||||
effectiveRegen={effectiveRegen}
|
||||
incursionStrength={incursionStrength}
|
||||
manaCascadeBonus={manaCascadeBonus}
|
||||
studySpeedMult={studySpeedMult}
|
||||
studyCostMult={studyCostMult}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="grimoire">
|
||||
{renderGrimoireTab()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
// Grimoire Tab (Prestige)
|
||||
function renderGrimoireTab() {
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Current Status */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs">Loop Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-amber-400 game-mono">{store.loopCount}</div>
|
||||
<div className="text-xs text-gray-400">Loops Completed</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-purple-400 game-mono">{fmt(store.insight)}</div>
|
||||
<div className="text-xs text-gray-400">Current Insight</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-blue-400 game-mono">{fmt(store.totalInsight)}</div>
|
||||
<div className="text-xs text-gray-400">Total Insight</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-green-400 game-mono">{store.memorySlots}</div>
|
||||
<div className="text-xs text-gray-400">Memory Slots</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Signed Pacts */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs">Signed Pacts</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{store.signedPacts.length === 0 ? (
|
||||
<div className="text-gray-500 text-sm">No pacts signed yet. Defeat guardians to earn pacts.</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{store.signedPacts.map((floor) => {
|
||||
const guardian = GUARDIANS[floor];
|
||||
if (!guardian) return null;
|
||||
return (
|
||||
<div
|
||||
key={floor}
|
||||
className="flex items-center justify-between p-2 rounded border"
|
||||
style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold text-sm" style={{ color: guardian.color }}>
|
||||
{guardian.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Floor {floor}</div>
|
||||
</div>
|
||||
<Badge className="bg-amber-900/50 text-amber-300">
|
||||
{guardian.pact}x multiplier
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Prestige Upgrades */}
|
||||
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs">Insight Upgrades (Permanent)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{Object.entries(PRESTIGE_DEF).map(([id, def]) => {
|
||||
const level = store.prestigeUpgrades[id] || 0;
|
||||
const maxed = level >= def.max;
|
||||
const canBuy = !maxed && store.insight >= def.cost;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-3 rounded border border-gray-700 bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="font-semibold text-amber-400 text-sm">{def.name}</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{level}/{def.max}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 italic mb-2">{def.desc}</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={canBuy ? 'default' : 'outline'}
|
||||
className="w-full"
|
||||
disabled={!canBuy}
|
||||
onClick={() => store.doPrestige(id)}
|
||||
>
|
||||
{maxed ? 'Maxed' : `Upgrade (${fmt(def.cost)} insight)`}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Reset Game Button */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">Reset All Progress</div>
|
||||
<div className="text-xs text-gray-500">Clear all data and start fresh</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-red-600/50 text-red-400 hover:bg-red-900/20"
|
||||
onClick={() => {
|
||||
if (confirm('Are you sure you want to reset ALL progress? This cannot be undone!')) {
|
||||
store.resetGame();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Import TooltipProvider
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Component, ReactNode } from 'react';
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return this.props.fallback || (
|
||||
<div className="p-4 bg-red-900/20 border border-red-600/50 rounded">
|
||||
<h3 className="text-red-400 font-bold mb-2">Something went wrong:</h3>
|
||||
<pre className="text-xs text-red-300">{this.state.error?.message}</pre>
|
||||
<pre className="text-xs text-gray-500 mt-2">{this.state.error?.stack}</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Trophy, Lock, CheckCircle, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import type { AchievementState } from '@/lib/game/types';
|
||||
import { ACHIEVEMENTS, ACHIEVEMENT_CATEGORY_COLORS, getAchievementsByCategory, isAchievementRevealed } from '@/lib/game/data/achievements';
|
||||
import { GameState } from '@/lib/game/types';
|
||||
|
||||
interface AchievementsProps {
|
||||
achievements: AchievementState;
|
||||
gameState: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'totalSpellsCast' | 'totalDamageDealt' | 'totalCraftsCompleted' | 'combo'>;
|
||||
}
|
||||
|
||||
export function AchievementsDisplay({ achievements, gameState }: AchievementsProps) {
|
||||
const [expandedCategory, setExpandedCategory] = useState<string | null>('combat');
|
||||
|
||||
const categories = getAchievementsByCategory();
|
||||
const unlockedCount = achievements.unlocked.length;
|
||||
const totalCount = Object.keys(ACHIEVEMENTS).length;
|
||||
|
||||
// Calculate progress for each achievement
|
||||
const getProgress = (achievementId: string): number => {
|
||||
const achievement = ACHIEVEMENTS[achievementId];
|
||||
if (!achievement) return 0;
|
||||
if (achievements.unlocked.includes(achievementId)) return achievement.requirement.value;
|
||||
|
||||
const { type, subType } = achievement.requirement;
|
||||
|
||||
switch (type) {
|
||||
case 'floor':
|
||||
if (subType === 'noPacts') {
|
||||
return gameState.maxFloorReached >= achievement.requirement.value && gameState.signedPacts.length === 0
|
||||
? achievement.requirement.value
|
||||
: gameState.maxFloorReached;
|
||||
}
|
||||
return gameState.maxFloorReached;
|
||||
case 'combo':
|
||||
return gameState.combo?.maxCombo || 0;
|
||||
case 'spells':
|
||||
return gameState.totalSpellsCast || 0;
|
||||
case 'damage':
|
||||
return gameState.totalDamageDealt || 0;
|
||||
case 'mana':
|
||||
return gameState.totalManaGathered || 0;
|
||||
case 'pact':
|
||||
return gameState.signedPacts.length;
|
||||
case 'craft':
|
||||
return gameState.totalCraftsCompleted || 0;
|
||||
default:
|
||||
return achievements.progress[achievementId] || 0;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4" />
|
||||
Achievements
|
||||
<Badge className="ml-auto bg-amber-900/50 text-amber-300">
|
||||
{unlockedCount} / {totalCount}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-64">
|
||||
<div className="space-y-2">
|
||||
{Object.entries(categories).map(([category, categoryAchievements]) => (
|
||||
<div key={category} className="space-y-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-between text-xs"
|
||||
onClick={() => setExpandedCategory(expandedCategory === category ? null : category)}
|
||||
>
|
||||
<span style={{ color: ACHIEVEMENT_CATEGORY_COLORS[category] }}>
|
||||
{category.charAt(0).toUpperCase() + category.slice(1)}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{categoryAchievements.filter(a => achievements.unlocked.includes(a.id)).length} / {categoryAchievements.length}
|
||||
</span>
|
||||
{expandedCategory === category ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{expandedCategory === category && (
|
||||
<div className="pl-2 space-y-2">
|
||||
{categoryAchievements.map((achievement) => {
|
||||
const isUnlocked = achievements.unlocked.includes(achievement.id);
|
||||
const progress = getProgress(achievement.id);
|
||||
const isRevealed = isAchievementRevealed(achievement, progress);
|
||||
const progressPercent = Math.min(100, (progress / achievement.requirement.value) * 100);
|
||||
|
||||
if (!isRevealed && !isUnlocked) {
|
||||
return (
|
||||
<div key={achievement.id} className="p-2 rounded bg-gray-800/30 border border-gray-700">
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<Lock className="w-4 h-4" />
|
||||
<span className="text-sm">???</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={achievement.id}
|
||||
className={`p-2 rounded border ${
|
||||
isUnlocked
|
||||
? 'bg-amber-900/20 border-amber-600/50'
|
||||
: 'bg-gray-800/30 border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
{isUnlocked ? (
|
||||
<CheckCircle className="w-4 h-4 text-amber-400" />
|
||||
) : (
|
||||
<Trophy className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
<span className={`text-sm font-semibold ${isUnlocked ? 'text-amber-300' : 'text-gray-300'}`}>
|
||||
{achievement.name}
|
||||
</span>
|
||||
</div>
|
||||
{achievement.reward.title && isUnlocked && (
|
||||
<Badge className="text-xs bg-purple-900/50 text-purple-300">
|
||||
Title
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-400 mb-2">
|
||||
{achievement.desc}
|
||||
</div>
|
||||
|
||||
{!isUnlocked && (
|
||||
<div className="space-y-1">
|
||||
<Progress value={progressPercent} className="h-1 bg-gray-700" />
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>{progress.toLocaleString()} / {achievement.requirement.value.toLocaleString()}</span>
|
||||
<span>{progressPercent.toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isUnlocked && achievement.reward && (
|
||||
<div className="text-xs text-amber-400/70">
|
||||
Reward:
|
||||
{achievement.reward.insight && ` +${achievement.reward.insight} Insight`}
|
||||
{achievement.reward.manaBonus && ` +${achievement.reward.manaBonus} Max Mana`}
|
||||
{achievement.reward.damageBonus && ` +${(achievement.reward.damageBonus * 100).toFixed(0)}% Damage`}
|
||||
{achievement.reward.title && ` "${achievement.reward.title}"`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Executable → Regular
+59
-124
@@ -1,152 +1,87 @@
|
||||
'use client';
|
||||
|
||||
import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sparkles, Swords, BookOpen, FlaskConical, Target } from 'lucide-react';
|
||||
import type { GameAction } from '@/lib/game/types';
|
||||
|
||||
interface ActionButtonsProps {
|
||||
currentAction: GameAction;
|
||||
currentStudyTarget: { type: 'skill' | 'spell'; id: string; progress: number; required: number } | null;
|
||||
designProgress: { progress: number; required: number } | null;
|
||||
designProgress2: { progress: number; required: number } | null;
|
||||
preparationProgress: { progress: number; required: number } | null;
|
||||
applicationProgress: { progress: number; required: number } | null;
|
||||
equipmentCraftingProgress: { progress: number; required: number } | null;
|
||||
}
|
||||
|
||||
// Map action IDs to labels and icons
|
||||
const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
|
||||
meditate: { label: 'Meditating', icon: Sparkles, color: 'text-blue-400' },
|
||||
climb: { label: 'Climbing', icon: Swords, color: 'text-green-400' },
|
||||
study: { label: 'Studying', icon: BookOpen, color: 'text-yellow-400' },
|
||||
design: { label: 'Designing Enchantment', icon: Target, color: 'text-purple-400' },
|
||||
prepare: { label: 'Preparing Equipment', icon: FlaskConical, color: 'text-purple-400' },
|
||||
enchant: { label: 'Enchanting', icon: Sparkles, color: 'text-purple-400' },
|
||||
craft: { label: 'Crafting Equipment', icon: Hammer, color: 'text-orange-400' },
|
||||
convert: { label: 'Converting Mana', icon: Cog, color: 'text-cyan-400' },
|
||||
};
|
||||
|
||||
function ProgressBar({ progress, required, label }: { progress: number; required: number; label?: string }) {
|
||||
const percentage = Math.min(100, (progress / required) * 100);
|
||||
return (
|
||||
<div className="mt-1">
|
||||
{label && <div className="text-xs text-gray-400 mb-0.5">{label}</div>}
|
||||
<div className="w-full bg-gray-700 rounded-full h-1.5">
|
||||
<div
|
||||
className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
setAction: (action: GameAction) => void;
|
||||
}
|
||||
|
||||
export function ActionButtons({
|
||||
currentAction,
|
||||
currentStudyTarget,
|
||||
designProgress,
|
||||
designProgress2,
|
||||
preparationProgress,
|
||||
applicationProgress,
|
||||
equipmentCraftingProgress,
|
||||
setAction,
|
||||
}: ActionButtonsProps) {
|
||||
const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
|
||||
const Icon = config.icon;
|
||||
const actions: { id: GameAction; label: string; icon: typeof Swords }[] = [
|
||||
{ id: 'meditate', label: 'Meditate', icon: Sparkles },
|
||||
{ id: 'climb', label: 'Climb', icon: Swords },
|
||||
{ id: 'study', label: 'Study', icon: BookOpen },
|
||||
{ id: 'convert', label: 'Convert', icon: FlaskConical },
|
||||
];
|
||||
|
||||
// Calculate additional info for specific actions
|
||||
const getActionDetails = () => {
|
||||
switch (currentAction) {
|
||||
case 'study':
|
||||
if (currentStudyTarget) {
|
||||
const progress = currentStudyTarget.progress;
|
||||
const required = currentStudyTarget.required;
|
||||
const percentage = Math.min(100, (progress / required) * 100);
|
||||
return (
|
||||
<ProgressBar
|
||||
progress={progress}
|
||||
required={required}
|
||||
label={`${currentStudyTarget.type === 'skill' ? 'Skill' : 'Spell'}: ${percentage.toFixed(0)}%`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'design':
|
||||
if (designProgress) {
|
||||
return (
|
||||
<ProgressBar
|
||||
progress={designProgress.progress}
|
||||
required={designProgress.required}
|
||||
label="Design progress"
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'prepare':
|
||||
if (preparationProgress) {
|
||||
return (
|
||||
<ProgressBar
|
||||
progress={preparationProgress.progress}
|
||||
required={preparationProgress.required}
|
||||
label="Preparation progress"
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'enchant':
|
||||
if (applicationProgress) {
|
||||
return (
|
||||
<ProgressBar
|
||||
progress={applicationProgress.progress}
|
||||
required={applicationProgress.required}
|
||||
label="Enchantment progress"
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'craft':
|
||||
if (equipmentCraftingProgress) {
|
||||
return (
|
||||
<ProgressBar
|
||||
progress={equipmentCraftingProgress.progress}
|
||||
required={equipmentCraftingProgress.required}
|
||||
label="Crafting progress"
|
||||
/>
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
const hasDesignProgress = designProgress !== null;
|
||||
const hasPrepProgress = preparationProgress !== null;
|
||||
const hasAppProgress = applicationProgress !== null;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={`w-4 h-4 ${config.color}`} />
|
||||
<span className="text-sm font-medium text-gray-200">Current Activity</span>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{actions.map(({ id, label, icon: Icon }) => (
|
||||
<Button
|
||||
key={id}
|
||||
variant={currentAction === id ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={`h-9 ${currentAction === id ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
|
||||
onClick={() => setAction(id)}
|
||||
>
|
||||
<Icon className="w-4 h-4 mr-1" />
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
<div className={`text-lg font-semibold mt-1 ${config.color}`}>
|
||||
{config.label}
|
||||
</div>
|
||||
{getActionDetails()}
|
||||
|
||||
{/* Show second design slot if active */}
|
||||
{designProgress2 && (
|
||||
<div className="mt-2 pt-2 border-t border-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Target className="w-3 h-3 text-purple-400" />
|
||||
<span className="text-xs text-gray-400">Second Design Slot</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
progress={designProgress2.progress}
|
||||
required={designProgress2.required}
|
||||
label="Design progress"
|
||||
/>
|
||||
{/* Crafting actions row - shown when there's active crafting progress */}
|
||||
{(hasDesignProgress || hasPrepProgress || hasAppProgress) && (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
variant={currentAction === 'design' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
disabled={!hasDesignProgress}
|
||||
className={`h-9 ${currentAction === 'design' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
|
||||
onClick={() => hasDesignProgress && setAction('design')}
|
||||
>
|
||||
<Target className="w-4 h-4 mr-1" />
|
||||
Design
|
||||
</Button>
|
||||
<Button
|
||||
variant={currentAction === 'prepare' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
disabled={!hasPrepProgress}
|
||||
className={`h-9 ${currentAction === 'prepare' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
|
||||
onClick={() => hasPrepProgress && setAction('prepare')}
|
||||
>
|
||||
<FlaskConical className="w-4 h-4 mr-1" />
|
||||
Prepare
|
||||
</Button>
|
||||
<Button
|
||||
variant={currentAction === 'enchant' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
disabled={!hasAppProgress}
|
||||
className={`h-9 ${currentAction === 'enchant' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
|
||||
onClick={() => hasAppProgress && setAction('enchant')}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 mr-1" />
|
||||
Enchant
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ActionButtons.displayName = "ActionButtons";
|
||||
ProgressBar.displayName = "ProgressBar";
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useCombatStore } from '@/lib/game/stores';
|
||||
import { ActivityLog } from './tabs/ActivityLog';
|
||||
|
||||
/**
|
||||
* Activity log panel for the left sidebar.
|
||||
* Wraps the existing ActivityLog tab component with store integration,
|
||||
* showing only the most recent 20 entries.
|
||||
*/
|
||||
export function ActivityLogPanel() {
|
||||
const activityLog = useCombatStore((s) => s.activityLog);
|
||||
|
||||
return (
|
||||
<ActivityLog activityLog={activityLog} maxEntries={20} />
|
||||
);
|
||||
}
|
||||
|
||||
ActivityLogPanel.displayName = 'ActivityLogPanel';
|
||||
@@ -1,103 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useAttunementStore } from '@/lib/game/stores';
|
||||
import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
|
||||
const SLOT_LABELS: Record<string, string> = {
|
||||
rightHand: 'R. Hand',
|
||||
leftHand: 'L. Hand',
|
||||
head: 'Head',
|
||||
back: 'Back',
|
||||
chest: 'Chest',
|
||||
leftLeg: 'L. Leg',
|
||||
rightLeg: 'R. Leg',
|
||||
};
|
||||
|
||||
export function AttunementStatus() {
|
||||
const attunements = useAttunementStore((s) => s.attunements);
|
||||
|
||||
const activeAttunements = Object.entries(attunements)
|
||||
.filter(([, state]) => state.active)
|
||||
.sort(([, a], [, b]) => {
|
||||
const orderA = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === a.id);
|
||||
const orderB = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === b.id);
|
||||
return orderA - orderB;
|
||||
});
|
||||
|
||||
const xpForNext = (level: number) => {
|
||||
if (level <= 1) return 0;
|
||||
if (level === 2) return 1000;
|
||||
return Math.floor(1000 * Math.pow(2, level - 2) * (level >= 3 ? 1.25 : 1));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
|
||||
<span className="text-[10px] text-[var(--text-muted)]">{activeAttunements.length} active</span>
|
||||
</div>
|
||||
<Separator className="bg-[var(--border-subtle)]" />
|
||||
<div className="space-y-1.5">
|
||||
{activeAttunements.length === 0 ? (
|
||||
<div className="text-[10px] text-[var(--text-muted)] italic">No attunements active</div>
|
||||
) : (
|
||||
activeAttunements.map(([id, state]) => {
|
||||
const def = ATTUNEMENTS_DEF[id];
|
||||
if (!def) return null;
|
||||
const nextXp = xpForNext(state.level);
|
||||
const xpProgress = nextXp > 0 ? (state.experience / nextXp) * 100 : 0;
|
||||
|
||||
return (
|
||||
<TooltipProvider key={id}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex items-center gap-2 p-1.5 rounded bg-[var(--bg-sunken)]/50 border border-[var(--border-subtle)]">
|
||||
<span className="text-sm">{def.icon}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-[11px] font-medium text-[var(--text-primary)] truncate">
|
||||
{def.name}
|
||||
</span>
|
||||
<span className="text-[10px] text-[var(--text-secondary)] font-mono">
|
||||
Lv.{state.level}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-[var(--text-muted)]">
|
||||
<span className="capitalize">{SLOT_LABELS[def.slot] || def.slot}</span>
|
||||
{nextXp > 0 && (
|
||||
<span className="ml-1.5 font-mono">
|
||||
{Math.floor(state.experience).toLocaleString()}/{nextXp.toLocaleString()} XP
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{nextXp > 0 && (
|
||||
<div className="w-full h-0.5 bg-[var(--border-subtle)] rounded-full mt-0.5 overflow-hidden">
|
||||
<div
|
||||
className="h-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${Math.min(100, xpProgress)}%`,
|
||||
backgroundColor: def.color,
|
||||
opacity: 0.7,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-[220px]">{def.desc}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
AttunementStatus.displayName = 'AttunementStatus';
|
||||
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { MAX_DAY, INCURSION_START_DAY } from '@/lib/game/constants';
|
||||
|
||||
interface CalendarDisplayProps {
|
||||
currentDay: number;
|
||||
}
|
||||
|
||||
export function CalendarDisplay({ currentDay }: CalendarDisplayProps) {
|
||||
const days: React.ReactElement[] = [];
|
||||
|
||||
for (let d = 1; d <= MAX_DAY; d++) {
|
||||
let dayClass = 'w-7 h-7 rounded text-xs flex items-center justify-center font-mono border transition-all ';
|
||||
|
||||
if (d < currentDay) {
|
||||
dayClass += 'bg-blue-900/30 border-blue-800/50 text-blue-400';
|
||||
} else if (d === currentDay) {
|
||||
dayClass += 'bg-blue-600/40 border-blue-500 text-blue-300 shadow-lg shadow-blue-500/30';
|
||||
} else {
|
||||
dayClass += 'bg-gray-800/30 border-gray-700/50 text-gray-500';
|
||||
}
|
||||
|
||||
if (d >= INCURSION_START_DAY) {
|
||||
dayClass += ' border-red-600/50';
|
||||
}
|
||||
|
||||
days.push(
|
||||
<Tooltip key={d}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className={dayClass}>
|
||||
{d}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Day {d}</p>
|
||||
{d >= INCURSION_START_DAY && <p className="text-red-400">Incursion Active</p>}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{days}</>;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
'use client';
|
||||
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Zap, Flame, Sparkles } from 'lucide-react';
|
||||
import type { ComboState } from '@/lib/game/types';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
|
||||
interface ComboMeterProps {
|
||||
combo: ComboState;
|
||||
isClimbing: boolean;
|
||||
}
|
||||
|
||||
export function ComboMeter({ combo, isClimbing }: ComboMeterProps) {
|
||||
const comboPercent = Math.min(100, combo.count);
|
||||
const multiplierPercent = Math.min(100, ((combo.multiplier - 1) / 2) * 100); // Max 300% = 200% bonus
|
||||
|
||||
// Combo tier names
|
||||
const getComboTier = (count: number): { name: string; color: string } => {
|
||||
if (count >= 100) return { name: 'LEGENDARY', color: 'text-amber-400' };
|
||||
if (count >= 75) return { name: 'Master', color: 'text-purple-400' };
|
||||
if (count >= 50) return { name: 'Expert', color: 'text-blue-400' };
|
||||
if (count >= 25) return { name: 'Adept', color: 'text-green-400' };
|
||||
if (count >= 10) return { name: 'Novice', color: 'text-cyan-400' };
|
||||
return { name: 'Building...', color: 'text-gray-400' };
|
||||
};
|
||||
|
||||
const tier = getComboTier(combo.count);
|
||||
const hasElementChain = combo.elementChain.length === 3 && new Set(combo.elementChain).size === 3;
|
||||
|
||||
if (!isClimbing && combo.count === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Zap className="w-4 h-4" />
|
||||
Combo Meter
|
||||
{combo.count >= 10 && (
|
||||
<Badge className={`ml-auto ${tier.color} bg-gray-800`}>
|
||||
{tier.name}
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* Combo Count */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-400">Hits</span>
|
||||
<span className={`font-bold ${tier.color}`}>
|
||||
{combo.count}
|
||||
{combo.maxCombo > combo.count && (
|
||||
<span className="text-gray-500 text-xs ml-2">max: {combo.maxCombo}</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={comboPercent}
|
||||
className="h-2 bg-gray-800"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Multiplier */}
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-400">Multiplier</span>
|
||||
<span className="font-bold text-amber-400">
|
||||
{combo.multiplier.toFixed(2)}x
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-gray-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${multiplierPercent}%`,
|
||||
background: `linear-gradient(90deg, #F59E0B, #EF4444)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Element Chain */}
|
||||
{combo.elementChain.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-400">Element Chain</span>
|
||||
{hasElementChain && (
|
||||
<span className="text-green-400 text-xs">+25% bonus!</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{combo.elementChain.map((elem, i) => {
|
||||
const elemDef = ELEMENTS[elem];
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="w-8 h-8 rounded border flex items-center justify-center text-xs"
|
||||
style={{
|
||||
borderColor: elemDef?.color || '#60A5FA',
|
||||
backgroundColor: `${elemDef?.color}20`,
|
||||
color: elemDef?.color || '#60A5FA',
|
||||
}}
|
||||
>
|
||||
{elemDef?.sym || '?'}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* Empty slots */}
|
||||
{Array.from({ length: 3 - combo.elementChain.length }).map((_, i) => (
|
||||
<div
|
||||
key={`empty-${i}`}
|
||||
className="w-8 h-8 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-center text-gray-600"
|
||||
>
|
||||
?
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Decay Warning */}
|
||||
{isClimbing && combo.count > 0 && combo.decayTimer <= 3 && (
|
||||
<div className="text-xs text-red-400 flex items-center gap-1">
|
||||
<Flame className="w-3 h-3" />
|
||||
Combo decaying soon!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Not climbing warning */}
|
||||
{!isClimbing && combo.count > 0 && (
|
||||
<div className="text-xs text-amber-400 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Resume climbing to maintain combo
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Target, FlaskConical, Sparkles, Play, Pause, X } from 'lucide-react';
|
||||
import { fmt } from '@/lib/game/store';
|
||||
import { formatStudyTime } from '@/lib/game/formatting';
|
||||
import type { EquipmentInstance, EnchantmentDesign } from '@/lib/game/types';
|
||||
|
||||
interface CraftingProgressProps {
|
||||
designProgress: { designId: string; progress: number; required: number } | null;
|
||||
preparationProgress: { equipmentInstanceId: string; progress: number; required: number; manaCostPaid: number } | null;
|
||||
applicationProgress: { equipmentInstanceId: string; designId: string; progress: number; required: number; manaPerHour: number; paused: boolean } | null;
|
||||
equipmentInstances: Record<string, EquipmentInstance>;
|
||||
enchantmentDesigns: EnchantmentDesign[];
|
||||
cancelDesign: () => void;
|
||||
cancelPreparation: () => void;
|
||||
pauseApplication: () => void;
|
||||
resumeApplication: () => void;
|
||||
cancelApplication: () => void;
|
||||
}
|
||||
|
||||
export function CraftingProgress({
|
||||
designProgress,
|
||||
preparationProgress,
|
||||
applicationProgress,
|
||||
equipmentInstances,
|
||||
enchantmentDesigns,
|
||||
cancelDesign,
|
||||
cancelPreparation,
|
||||
pauseApplication,
|
||||
resumeApplication,
|
||||
cancelApplication,
|
||||
}: CraftingProgressProps) {
|
||||
const progressSections: React.ReactNode[] = [];
|
||||
|
||||
// Design progress
|
||||
if (designProgress) {
|
||||
const progressPct = Math.min(100, (designProgress.progress / designProgress.required) * 100);
|
||||
progressSections.push(
|
||||
<div key="design" className="p-3 rounded border border-cyan-600/50 bg-cyan-900/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Target className="w-4 h-4 text-cyan-400" />
|
||||
<span className="text-sm font-semibold text-cyan-300">
|
||||
Designing Enchantment
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-gray-400 hover:text-white"
|
||||
onClick={cancelDesign}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Progress value={progressPct} className="h-2 bg-gray-800" />
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>{formatStudyTime(designProgress.progress)} / {formatStudyTime(designProgress.required)}</span>
|
||||
<span>Design Time</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Preparation progress
|
||||
if (preparationProgress) {
|
||||
const progressPct = Math.min(100, (preparationProgress.progress / preparationProgress.required) * 100);
|
||||
const instance = equipmentInstances[preparationProgress.equipmentInstanceId];
|
||||
progressSections.push(
|
||||
<div key="prepare" className="p-3 rounded border border-green-600/50 bg-green-900/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<FlaskConical className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm font-semibold text-green-300">
|
||||
Preparing {instance?.name || 'Equipment'}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-gray-400 hover:text-white"
|
||||
onClick={cancelPreparation}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Progress value={progressPct} className="h-2 bg-gray-800" />
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>{formatStudyTime(preparationProgress.progress)} / {formatStudyTime(preparationProgress.required)}</span>
|
||||
<span>Mana spent: {fmt(preparationProgress.manaCostPaid)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Application progress
|
||||
if (applicationProgress) {
|
||||
const progressPct = Math.min(100, (applicationProgress.progress / applicationProgress.required) * 100);
|
||||
const instance = equipmentInstances[applicationProgress.equipmentInstanceId];
|
||||
const design = enchantmentDesigns.find(d => d.id === applicationProgress.designId);
|
||||
progressSections.push(
|
||||
<div key="enchant" className="p-3 rounded border border-amber-600/50 bg-amber-900/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4 text-amber-400" />
|
||||
<span className="text-sm font-semibold text-amber-300">
|
||||
Enchanting {instance?.name || 'Equipment'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{applicationProgress.paused ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-green-400 hover:text-green-300"
|
||||
onClick={resumeApplication}
|
||||
>
|
||||
<Play className="w-4 h-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-yellow-400 hover:text-yellow-300"
|
||||
onClick={pauseApplication}
|
||||
>
|
||||
<Pause className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-gray-400 hover:text-white"
|
||||
onClick={cancelApplication}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Progress value={progressPct} className="h-2 bg-gray-800" />
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>{formatStudyTime(applicationProgress.progress)} / {formatStudyTime(applicationProgress.required)}</span>
|
||||
<span>Mana/hr: {fmt(applicationProgress.manaPerHour)}</span>
|
||||
</div>
|
||||
{design && (
|
||||
<div className="text-xs text-amber-400/70 mt-1">
|
||||
Applying: {design.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return progressSections.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{progressSections}
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import {
|
||||
Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from '@/components/ui/toast';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
Info,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
// Toast type definitions
|
||||
type ToastType = 'success' | 'warning' | 'error' | 'info';
|
||||
|
||||
interface ToastIconProps {
|
||||
type: ToastType;
|
||||
}
|
||||
|
||||
// Icon mapping for toast types
|
||||
function ToastIcon({ type }: ToastIconProps) {
|
||||
const iconClass = 'h-4 w-4 shrink-0';
|
||||
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return <CheckCircle className={cn(iconClass, 'text-[var(--color-success)]')} />;
|
||||
case 'warning':
|
||||
return <AlertTriangle className={cn(iconClass, 'text-[var(--color-warning)]')} />;
|
||||
case 'error':
|
||||
return <AlertCircle className={cn(iconClass, 'text-[var(--color-danger)]')} />;
|
||||
case 'info':
|
||||
return <Info className={cn(iconClass, 'text-[var(--color-info)]')} />;
|
||||
}
|
||||
}
|
||||
|
||||
// Color mapping for toast types using design system tokens
|
||||
const TOAST_TYPE_STYLES: Record<ToastType, string> = {
|
||||
success: 'border-[var(--color-success)]/50 bg-[var(--color-success)]/10',
|
||||
warning: 'border-[var(--color-warning)]/50 bg-[var(--color-warning)]/10',
|
||||
error: 'border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10',
|
||||
info: 'border-[var(--color-info)]/50 bg-[var(--color-info)]/10',
|
||||
};
|
||||
|
||||
const TOAST_TYPE_TEXT: Record<ToastType, string> = {
|
||||
success: 'text-[var(--color-success)]',
|
||||
warning: 'text-[var(--color-warning)]',
|
||||
error: 'text-[var(--color-danger)]',
|
||||
info: 'text-[var(--color-info)]',
|
||||
};
|
||||
|
||||
export function GameToaster() {
|
||||
const { toasts } = useToast();
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map((toast) => {
|
||||
// Determine toast type from className or default to info
|
||||
const toastType: ToastType =
|
||||
toast.variant === 'destructive' ? 'error' :
|
||||
(toast as { toastType?: ToastType }).toastType || 'info';
|
||||
|
||||
return (
|
||||
<Toast
|
||||
key={toast.id}
|
||||
className={cn(
|
||||
'group pointer-events-auto relative flex w-full items-center justify-between space-x-3 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
|
||||
TOAST_TYPE_STYLES[toastType]
|
||||
)}
|
||||
{...toast}
|
||||
>
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<ToastIcon type={toastType} />
|
||||
<div className="grid gap-1 flex-1">
|
||||
{toast.title && (
|
||||
<ToastTitle className={cn('text-sm font-semibold', TOAST_TYPE_TEXT[toastType])}>
|
||||
{toast.title}
|
||||
</ToastTitle>
|
||||
)}
|
||||
{toast.description && (
|
||||
<ToastDescription className="text-xs text-[var(--text-secondary)]">
|
||||
{toast.description}
|
||||
</ToastDescription>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ToastClose className="absolute right-1 top-1 rounded-md p-1 text-[var(--text-muted)] opacity-0 transition-opacity hover:text-[var(--text-primary)] focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-70">
|
||||
<X className="h-3 w-3" />
|
||||
</ToastClose>
|
||||
</Toast>
|
||||
);
|
||||
})}
|
||||
{/*
|
||||
Viewport positioning:
|
||||
- Desktop: bottom-right
|
||||
- Mobile: bottom-center, full-width
|
||||
*/}
|
||||
<ToastViewport
|
||||
className={cn(
|
||||
'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
|
||||
// Desktop: bottom-right, fixed width
|
||||
'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]',
|
||||
// Mobile: bottom-center, full-width
|
||||
'max-sm:bottom-0 max-sm:left-0 max-sm:flex-col max-sm:items-center'
|
||||
)}
|
||||
/>
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Custom hook to show typed toasts
|
||||
export function useGameToast() {
|
||||
const { toast } = useToast();
|
||||
|
||||
return (type: ToastType, title: ReactNode, description?: ReactNode) => {
|
||||
const toastTypeClass = `toast-type-${type}`;
|
||||
|
||||
return toast({
|
||||
title,
|
||||
description,
|
||||
className: toastTypeClass,
|
||||
// Store the type for styling
|
||||
...{ toastType: type },
|
||||
} as {
|
||||
title: ReactNode;
|
||||
description?: ReactNode;
|
||||
className?: string;
|
||||
toastType?: ToastType;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export { type ToastType };
|
||||
@@ -0,0 +1,460 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Gem, Sparkles, Scroll, Droplet, Trash2, Search,
|
||||
Package, Sword, Shield, Shirt, Crown, ArrowUpDown,
|
||||
Wrench, AlertTriangle
|
||||
} from 'lucide-react';
|
||||
import type { LootInventory as LootInventoryType, EquipmentInstance, ElementState } from '@/lib/game/types';
|
||||
import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
interface LootInventoryProps {
|
||||
inventory: LootInventoryType;
|
||||
elements?: Record<string, ElementState>;
|
||||
equipmentInstances?: Record<string, EquipmentInstance>;
|
||||
onDeleteMaterial?: (materialId: string, amount: number) => void;
|
||||
onDeleteEquipment?: (instanceId: string) => void;
|
||||
}
|
||||
|
||||
type SortMode = 'name' | 'rarity' | 'count';
|
||||
type FilterMode = 'all' | 'materials' | 'essence' | 'blueprints' | 'equipment';
|
||||
|
||||
const RARITY_ORDER = {
|
||||
common: 0,
|
||||
uncommon: 1,
|
||||
rare: 2,
|
||||
epic: 3,
|
||||
legendary: 4,
|
||||
mythic: 5,
|
||||
};
|
||||
|
||||
const CATEGORY_ICONS: Record<string, typeof Sword> = {
|
||||
caster: Sword,
|
||||
shield: Shield,
|
||||
catalyst: Sparkles,
|
||||
head: Crown,
|
||||
body: Shirt,
|
||||
hands: Wrench,
|
||||
feet: Package,
|
||||
accessory: Gem,
|
||||
};
|
||||
|
||||
export function LootInventoryDisplay({
|
||||
inventory,
|
||||
elements,
|
||||
equipmentInstances = {},
|
||||
onDeleteMaterial,
|
||||
onDeleteEquipment,
|
||||
}: LootInventoryProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [sortMode, setSortMode] = useState<SortMode>('rarity');
|
||||
const [filterMode, setFilterMode] = useState<FilterMode>('all');
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'material' | 'equipment'; id: string; name: string } | null>(null);
|
||||
|
||||
// Count items
|
||||
const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
|
||||
const essenceCount = elements ? Object.values(elements).reduce((a, e) => a + e.current, 0) : 0;
|
||||
const blueprintCount = inventory.blueprints.length;
|
||||
const equipmentCount = Object.keys(equipmentInstances).length;
|
||||
const totalItems = materialCount + blueprintCount + equipmentCount;
|
||||
|
||||
// Filter and sort materials
|
||||
const filteredMaterials = Object.entries(inventory.materials)
|
||||
.filter(([id, count]) => {
|
||||
if (count <= 0) return false;
|
||||
const drop = LOOT_DROPS[id];
|
||||
if (!drop) return false;
|
||||
if (searchTerm && !drop.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
|
||||
return true;
|
||||
})
|
||||
.sort(([aId, aCount], [bId, bCount]) => {
|
||||
const aDrop = LOOT_DROPS[aId];
|
||||
const bDrop = LOOT_DROPS[bId];
|
||||
if (!aDrop || !bDrop) return 0;
|
||||
|
||||
switch (sortMode) {
|
||||
case 'name':
|
||||
return aDrop.name.localeCompare(bDrop.name);
|
||||
case 'rarity':
|
||||
return RARITY_ORDER[bDrop.rarity] - RARITY_ORDER[aDrop.rarity];
|
||||
case 'count':
|
||||
return bCount - aCount;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Filter and sort essence
|
||||
const filteredEssence = elements
|
||||
? Object.entries(elements)
|
||||
.filter(([id, state]) => {
|
||||
if (!state.unlocked || state.current <= 0) return false;
|
||||
if (searchTerm && !ELEMENTS[id]?.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
|
||||
return true;
|
||||
})
|
||||
.sort(([aId, aState], [bId, bState]) => {
|
||||
switch (sortMode) {
|
||||
case 'name':
|
||||
return (ELEMENTS[aId]?.name || aId).localeCompare(ELEMENTS[bId]?.name || bId);
|
||||
case 'count':
|
||||
return bState.current - aState.current;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
})
|
||||
: [];
|
||||
|
||||
// Filter and sort equipment
|
||||
const filteredEquipment = Object.entries(equipmentInstances)
|
||||
.filter(([id, instance]) => {
|
||||
if (searchTerm && !instance.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
|
||||
return true;
|
||||
})
|
||||
.sort(([aId, aInst], [bId, bInst]) => {
|
||||
switch (sortMode) {
|
||||
case 'name':
|
||||
return aInst.name.localeCompare(bInst.name);
|
||||
case 'rarity':
|
||||
return RARITY_ORDER[bInst.rarity] - RARITY_ORDER[aInst.rarity];
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Check if we have anything to show
|
||||
const hasItems = totalItems > 0 || essenceCount > 0;
|
||||
|
||||
if (!hasItems) {
|
||||
return (
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Gem className="w-4 h-4" />
|
||||
Inventory
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-gray-500 text-sm text-center py-4">
|
||||
No items collected yet. Defeat floors and guardians to find loot!
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDeleteMaterial = (materialId: string) => {
|
||||
const drop = LOOT_DROPS[materialId];
|
||||
if (drop) {
|
||||
setDeleteConfirm({ type: 'material', id: materialId, name: drop.name });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteEquipment = (instanceId: string) => {
|
||||
const instance = equipmentInstances[instanceId];
|
||||
if (instance) {
|
||||
setDeleteConfirm({ type: 'equipment', id: instanceId, name: instance.name });
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (!deleteConfirm) return;
|
||||
|
||||
if (deleteConfirm.type === 'material' && onDeleteMaterial) {
|
||||
onDeleteMaterial(deleteConfirm.id, inventory.materials[deleteConfirm.id] || 0);
|
||||
} else if (deleteConfirm.type === 'equipment' && onDeleteEquipment) {
|
||||
onDeleteEquipment(deleteConfirm.id);
|
||||
}
|
||||
|
||||
setDeleteConfirm(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Gem className="w-4 h-4" />
|
||||
Inventory
|
||||
<Badge className="ml-auto bg-gray-800 text-gray-300 text-xs">
|
||||
{totalItems} items
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* Search and Filter Controls */}
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-500" />
|
||||
<Input
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="h-7 pl-7 bg-gray-800/50 border-gray-700 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 px-2 bg-gray-800/50"
|
||||
onClick={() => setSortMode(sortMode === 'rarity' ? 'name' : sortMode === 'name' ? 'count' : 'rarity')}
|
||||
>
|
||||
<ArrowUpDown className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{[
|
||||
{ mode: 'all' as FilterMode, label: 'All' },
|
||||
{ mode: 'materials' as FilterMode, label: `Materials (${materialCount})` },
|
||||
{ mode: 'essence' as FilterMode, label: `Essence (${essenceCount})` },
|
||||
{ mode: 'blueprints' as FilterMode, label: `Blueprints (${blueprintCount})` },
|
||||
{ mode: 'equipment' as FilterMode, label: `Equipment (${equipmentCount})` },
|
||||
].map(({ mode, label }) => (
|
||||
<Button
|
||||
key={mode}
|
||||
variant={filterMode === mode ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className={`h-6 px-2 text-xs ${filterMode === mode ? 'bg-amber-600 hover:bg-amber-700' : 'bg-gray-800/50'}`}
|
||||
onClick={() => setFilterMode(mode)}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Separator className="bg-gray-700" />
|
||||
|
||||
<ScrollArea className="h-64">
|
||||
<div className="space-y-3">
|
||||
{/* Materials */}
|
||||
{(filterMode === 'all' || filterMode === 'materials') && filteredMaterials.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Materials
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{filteredMaterials.map(([id, count]) => {
|
||||
const drop = LOOT_DROPS[id];
|
||||
if (!drop) return null;
|
||||
const rarityStyle = RARITY_COLORS[drop.rarity];
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-2 rounded border bg-gray-800/50 group relative"
|
||||
style={{
|
||||
borderColor: rarityStyle?.color || '#9CA3AF',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-semibold" style={{ color: rarityStyle?.color }}>
|
||||
{drop.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
x{count}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 capitalize">
|
||||
{drop.rarity}
|
||||
</div>
|
||||
</div>
|
||||
{onDeleteMaterial && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
||||
onClick={() => handleDeleteMaterial(id)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Essence */}
|
||||
{(filterMode === 'all' || filterMode === 'essence') && filteredEssence.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
|
||||
<Droplet className="w-3 h-3" />
|
||||
Elemental Essence
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{filteredEssence.map(([id, state]) => {
|
||||
const elem = ELEMENTS[id];
|
||||
if (!elem) return null;
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-2 rounded border bg-gray-800/50"
|
||||
style={{
|
||||
borderColor: elem.color,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<span style={{ color: elem.color }}>{elem.sym}</span>
|
||||
<span className="text-xs font-semibold" style={{ color: elem.color }}>
|
||||
{elem.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{state.current} / {state.max}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Blueprints */}
|
||||
{(filterMode === 'all' || filterMode === 'blueprints') && inventory.blueprints.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
|
||||
<Scroll className="w-3 h-3" />
|
||||
Blueprints (permanent)
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{inventory.blueprints.map((id) => {
|
||||
const drop = LOOT_DROPS[id];
|
||||
if (!drop) return null;
|
||||
const rarityStyle = RARITY_COLORS[drop.rarity];
|
||||
return (
|
||||
<Badge
|
||||
key={id}
|
||||
className="text-xs"
|
||||
style={{
|
||||
backgroundColor: `${rarityStyle?.color}20`,
|
||||
color: rarityStyle?.color,
|
||||
borderColor: rarityStyle?.color,
|
||||
}}
|
||||
>
|
||||
{drop.name}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1 italic">
|
||||
Blueprints are permanent unlocks - use them to craft equipment
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Equipment */}
|
||||
{(filterMode === 'all' || filterMode === 'equipment') && filteredEquipment.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
|
||||
<Package className="w-3 h-3" />
|
||||
Equipment
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{filteredEquipment.map(([id, instance]) => {
|
||||
const type = EQUIPMENT_TYPES[instance.typeId];
|
||||
const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
|
||||
const rarityStyle = RARITY_COLORS[instance.rarity];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-2 rounded border bg-gray-800/50 group"
|
||||
style={{
|
||||
borderColor: rarityStyle?.color || '#9CA3AF',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-2">
|
||||
<Icon className="w-4 h-4 mt-0.5" style={{ color: rarityStyle?.color }} />
|
||||
<div>
|
||||
<div className="text-xs font-semibold" style={{ color: rarityStyle?.color }}>
|
||||
{instance.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 capitalize">
|
||||
{instance.rarity} • {instance.enchantments.length} enchants
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{onDeleteEquipment && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
||||
onClick={() => handleDeleteEquipment(id)}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
|
||||
<AlertDialogContent className="bg-gray-900 border-gray-700">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-amber-400 flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
Delete Item
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-gray-300">
|
||||
Are you sure you want to delete <strong>{deleteConfirm?.name}</strong>?
|
||||
{deleteConfirm?.type === 'material' && (
|
||||
<span className="block mt-2 text-red-400">
|
||||
This will delete ALL {inventory.materials[deleteConfirm?.id || ''] || 0} of this material!
|
||||
</span>
|
||||
)}
|
||||
{deleteConfirm?.type === 'equipment' && (
|
||||
<span className="block mt-2 text-red-400">
|
||||
This equipment and all its enchantments will be permanently lost!
|
||||
</span>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel className="bg-gray-800 border-gray-700">Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
onClick={confirmDelete}
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Scroll } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
|
||||
import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
|
||||
|
||||
interface BlueprintsSectionProps {
|
||||
blueprints: string[];
|
||||
}
|
||||
|
||||
export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
|
||||
if (blueprints.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
|
||||
<Scroll className="w-3 h-3" />
|
||||
Blueprints (permanent)
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{blueprints.map((id) => {
|
||||
const drop = LOOT_DROPS[id];
|
||||
if (!drop) return null;
|
||||
const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
|
||||
return (
|
||||
<Badge
|
||||
key={id}
|
||||
className="text-xs"
|
||||
style={{
|
||||
backgroundColor: `${RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)'}`,
|
||||
color: rarityColor,
|
||||
borderColor: rarityColor,
|
||||
}}
|
||||
>
|
||||
{drop.name}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] mt-1 italic">
|
||||
Blueprints are permanent unlocks - use them to craft equipment
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Package, Trash2 } from 'lucide-react';
|
||||
import type { EquipmentInstance } from '@/lib/game/types';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { CATEGORY_ICONS } from './icons';
|
||||
import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
|
||||
interface EquipmentItemProps {
|
||||
instanceId: string;
|
||||
instance: EquipmentInstance;
|
||||
onDelete?: (instanceId: string) => void;
|
||||
}
|
||||
|
||||
export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemProps) {
|
||||
const type = EQUIPMENT_TYPES[instance.typeId];
|
||||
const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
|
||||
const rarityColor = RARITY_CSS_VAR[instance.rarity] || 'var(--rarity-common)';
|
||||
const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="p-2 rounded border bg-[var(--bg-sunken)] group"
|
||||
style={{
|
||||
borderColor: rarityColor,
|
||||
backgroundColor: rarityGlow,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-2">
|
||||
<Icon className="w-4 h-4 mt-0.5" style={{ color: rarityColor }} />
|
||||
<div>
|
||||
<div className="text-xs font-semibold" style={{ color: rarityColor }}>
|
||||
{instance.name}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">
|
||||
{type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] capitalize">
|
||||
{instance.rarity} • {instance.enchantments.length} enchants
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{onDelete && (
|
||||
<ActionButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
|
||||
onClick={() => onDelete(instanceId)}
|
||||
aria-label={`Delete ${instance.name}`}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EquipmentSectionProps {
|
||||
equipment: [string, EquipmentInstance][];
|
||||
onDeleteEquipment?: (instanceId: string) => void;
|
||||
}
|
||||
|
||||
export function EquipmentSection({ equipment, onDeleteEquipment }: EquipmentSectionProps) {
|
||||
if (equipment.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
|
||||
<Package className="w-3 h-3" />
|
||||
Equipment
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{equipment.map(([id, instance]) => (
|
||||
<EquipmentItem
|
||||
key={id}
|
||||
instanceId={id}
|
||||
instance={instance}
|
||||
onDelete={onDeleteEquipment}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Droplet } from 'lucide-react';
|
||||
import { ElementBadge } from '@/components/ui/element-badge';
|
||||
import type { ElementState } from '@/lib/game/types';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
|
||||
interface EssenceItemProps {
|
||||
elementId: string;
|
||||
state: ElementState;
|
||||
}
|
||||
|
||||
export function EssenceItem({ elementId, state }: EssenceItemProps) {
|
||||
const elem = ELEMENTS[elementId];
|
||||
if (!elem) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="p-2 rounded border bg-[var(--bg-sunken)]"
|
||||
style={{
|
||||
borderColor: `var(--mana-${elementId})`,
|
||||
backgroundColor: `var(--mana-${elementId})20`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<ElementBadge element={elementId} showIcon={true} size="sm" />
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-secondary)] mt-1">
|
||||
{state.current} / {state.max}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EssenceSectionProps {
|
||||
essence: [string, ElementState][];
|
||||
}
|
||||
|
||||
export function EssenceSection({ essence }: EssenceSectionProps) {
|
||||
if (essence.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
|
||||
<Droplet className="w-3 h-3" />
|
||||
Elemental Essence
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{essence.map(([id, state]) => (
|
||||
<EssenceItem key={id} elementId={id} state={state} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { LootInventory } from '@/lib/game/types';
|
||||
// For backward compatibility
|
||||
type LootInventoryType = LootInventory;
|
||||
import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
|
||||
import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
|
||||
import { Sparkles, Trash2 } from 'lucide-react';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
|
||||
interface MaterialItemProps {
|
||||
materialId: string;
|
||||
count: number;
|
||||
onDelete?: (materialId: string) => void;
|
||||
}
|
||||
|
||||
export function MaterialItem({ materialId, count, onDelete }: MaterialItemProps) {
|
||||
const drop = LOOT_DROPS[materialId];
|
||||
if (!drop) return null;
|
||||
|
||||
const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
|
||||
const rarityGlow = RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)';
|
||||
|
||||
return (
|
||||
<div
|
||||
className="p-2 rounded border bg-[var(--bg-sunken)] group relative"
|
||||
style={{
|
||||
borderColor: rarityColor,
|
||||
backgroundColor: rarityGlow,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-semibold" style={{ color: rarityColor }}>
|
||||
{drop.name}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-secondary)]">
|
||||
x{count}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] capitalize">
|
||||
{drop.rarity}
|
||||
</div>
|
||||
</div>
|
||||
{onDelete && (
|
||||
<ActionButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
|
||||
onClick={() => onDelete(materialId)}
|
||||
aria-label={`Delete ${drop.name}`}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MaterialsSectionProps {
|
||||
materials: [string, number][];
|
||||
onDeleteMaterial?: (materialId: string) => void;
|
||||
}
|
||||
|
||||
export function MaterialsSection({ materials, onDeleteMaterial }: MaterialsSectionProps) {
|
||||
if (materials.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Materials
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{materials.map(([id, count]) => (
|
||||
<MaterialItem
|
||||
key={id}
|
||||
materialId={id}
|
||||
count={count}
|
||||
onDelete={onDeleteMaterial}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Gem, Sparkles, Scroll, Droplet, Trash2, Search,
|
||||
Package, Sword, Shield, Shirt, Crown, ArrowUpDown,
|
||||
Wrench, AlertTriangle } from 'lucide-react';
|
||||
import type { EquipmentCategory } from '@/lib/game/data/equipment';
|
||||
|
||||
export const CATEGORY_ICONS: Record<string, typeof Sword> = {
|
||||
caster: Sword,
|
||||
shield: Shield,
|
||||
catalyst: Sparkles,
|
||||
head: Crown,
|
||||
body: Shirt,
|
||||
hands: Wrench,
|
||||
feet: Package,
|
||||
accessory: Gem,
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { LootInventory as LootInventoryType, EquipmentInstance, ElementState } from '@/lib/game/types';
|
||||
import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
|
||||
export type SortMode = 'name' | 'rarity' | 'count';
|
||||
export type FilterMode = 'all' | 'materials' | 'essence' | 'blueprints' | 'equipment';
|
||||
|
||||
export const RARITY_ORDER = {
|
||||
common: 0,
|
||||
uncommon: 1,
|
||||
rare: 2,
|
||||
epic: 3,
|
||||
legendary: 4,
|
||||
mythic: 5,
|
||||
};
|
||||
|
||||
// Map rarity to CSS variable for colors
|
||||
export const RARITY_CSS_VAR: Record<string, string> = {
|
||||
common: 'var(--rarity-common)',
|
||||
uncommon: 'var(--rarity-uncommon)',
|
||||
rare: 'var(--rarity-rare)',
|
||||
epic: 'var(--rarity-epic)',
|
||||
legendary: 'var(--rarity-legendary)',
|
||||
mythic: 'var(--rarity-mythic)',
|
||||
};
|
||||
|
||||
// Map rarity to CSS variable for glow/background
|
||||
export const RARITY_GLOW_CSS_VAR: Record<string, string> = {
|
||||
common: 'var(--rarity-common-glow)',
|
||||
uncommon: 'var(--rarity-uncommon-glow)',
|
||||
rare: 'var(--rarity-rare-glow)',
|
||||
epic: 'var(--rarity-epic-glow)',
|
||||
legendary: 'var(--rarity-legendary-glow)',
|
||||
mythic: 'var(--rarity-mythic-glow)',
|
||||
};
|
||||
Executable → Regular
+10
-88
@@ -3,10 +3,8 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { fmt, fmtDec } from '@/lib/game/stores';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
import { useState } from 'react';
|
||||
import { Zap } from 'lucide-react';
|
||||
import { fmt, fmtDec } from '@/lib/game/store';
|
||||
|
||||
interface ManaDisplayProps {
|
||||
rawMana: number;
|
||||
@@ -17,7 +15,6 @@ interface ManaDisplayProps {
|
||||
isGathering: boolean;
|
||||
onGatherStart: () => void;
|
||||
onGatherEnd: () => void;
|
||||
elements: Record<string, { current: number; max: number; unlocked: boolean }>;
|
||||
}
|
||||
|
||||
export function ManaDisplay({
|
||||
@@ -29,47 +26,27 @@ export function ManaDisplay({
|
||||
isGathering,
|
||||
onGatherStart,
|
||||
onGatherEnd,
|
||||
elements,
|
||||
}: ManaDisplayProps) {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
|
||||
// Get unlocked elements with current > 0, sorted by current amount
|
||||
const unlockedElements = Object.entries(elements)
|
||||
.filter(([, state]) => state.unlocked && state.current > 0)
|
||||
.sort((a, b) => b[1].current - a[1].current);
|
||||
|
||||
return (
|
||||
<Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardContent className="pt-4 space-y-3">
|
||||
{/* Raw Mana - Main Display */}
|
||||
<div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-3xl font-bold game-mono" style={{ color: 'var(--mana-raw)' }}>{fmt(rawMana)}</span>
|
||||
<span className="text-sm" style={{ color: 'var(--text-muted)' }}>/ {fmt(maxMana)}</span>
|
||||
<span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
|
||||
<span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
|
||||
</div>
|
||||
<div className="text-xs" style={{ color: 'var(--text-muted)' }}>
|
||||
+{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span style={{ color: 'var(--mana-light)' }}>({fmtDec(meditationMultiplier, 1)}x med)</span>}
|
||||
<div className="text-xs text-gray-400">
|
||||
+{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Progress
|
||||
value={(rawMana / maxMana) * 100}
|
||||
className="h-2 bg-[var(--bg-sunken)]"
|
||||
style={{ '--progress-bg': 'var(--mana-raw)' } as React.CSSProperties}
|
||||
className="h-2 bg-gray-800"
|
||||
/>
|
||||
|
||||
<Button
|
||||
className={`w-full transition-all text-[var(--font-display)] tracking-wider
|
||||
${isGathering
|
||||
? 'animate-gather-glow'
|
||||
: 'hover:scale-[1.02]'}
|
||||
`}
|
||||
style={{
|
||||
background: 'var(--mana-raw)',
|
||||
border: '1px solid var(--border-accent)',
|
||||
color: '#0C1020',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
|
||||
onMouseDown={onGatherStart}
|
||||
onMouseUp={onGatherEnd}
|
||||
onMouseLeave={onGatherEnd}
|
||||
@@ -78,64 +55,9 @@ export function ManaDisplay({
|
||||
>
|
||||
<Zap className="w-4 h-4 mr-2" />
|
||||
Gather +{clickMana} Mana
|
||||
{isGathering && <span className="ml-2 text-xs" style={{ opacity: 0.8 }}>(Holding...)</span>}
|
||||
{isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
|
||||
</Button>
|
||||
|
||||
{/* Elemental Mana Pools */}
|
||||
{unlockedElements.length > 0 && (
|
||||
<div className="border-t border-[var(--border-subtle)] pt-3 mt-3">
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="flex items-center justify-between w-full text-xs transition-colors"
|
||||
style={{ color: 'var(--text-muted)' }}
|
||||
>
|
||||
<span style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.5px' }}>ELEMENTAL MANA ({unlockedElements.length})</span>
|
||||
{expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<div className="grid grid-cols-2 gap-2 mt-2">
|
||||
{unlockedElements.map(([id, state]) => {
|
||||
const elem = ELEMENTS[id];
|
||||
if (!elem) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-2 transition-all border rounded-sm"
|
||||
style={{
|
||||
background: 'var(--bg-sunken)/30',
|
||||
borderColor: `${elem.color}30`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<span style={{ color: elem.color }}>{elem.sym}</span>
|
||||
<span className="text-xs font-medium" style={{ color: elem.color }}>
|
||||
{elem.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-void)' }}>
|
||||
<div
|
||||
className="h-full transition-all rounded-full"
|
||||
style={{
|
||||
width: `${Math.min(100, (state.current / state.max) * 100)}%`,
|
||||
backgroundColor: elem.color
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs game-mono" style={{ color: 'var(--text-muted)' }}>
|
||||
{fmt(state.current)}/{fmt(state.max)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
ManaDisplay.displayName = "ManaDisplay";
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { BookOpen, X } from 'lucide-react';
|
||||
import { SKILLS_DEF, SPELLS_DEF } from '@/lib/game/constants';
|
||||
import { formatStudyTime } from '@/lib/game/formatting';
|
||||
import type { StudyTarget } from '@/lib/game/types';
|
||||
|
||||
interface StudyProgressProps {
|
||||
currentStudyTarget: StudyTarget | null;
|
||||
skills: Record<string, number>;
|
||||
studySpeedMult: number;
|
||||
cancelStudy: () => void;
|
||||
}
|
||||
|
||||
export function StudyProgress({
|
||||
currentStudyTarget,
|
||||
skills,
|
||||
studySpeedMult,
|
||||
cancelStudy,
|
||||
}: StudyProgressProps) {
|
||||
if (!currentStudyTarget) return null;
|
||||
|
||||
const target = currentStudyTarget;
|
||||
const progressPct = Math.min(100, (target.progress / target.required) * 100);
|
||||
const isSkill = target.type === 'skill';
|
||||
const def = isSkill ? SKILLS_DEF[target.id] : SPELLS_DEF[target.id];
|
||||
const currentLevel = isSkill ? (skills[target.id] || 0) : 0;
|
||||
|
||||
return (
|
||||
<div className="p-3 rounded border border-purple-600/50 bg-purple-900/20">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm font-semibold text-purple-300">
|
||||
{def?.name}
|
||||
{isSkill && ` Lv.${currentLevel + 1}`}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-gray-400 hover:text-white"
|
||||
onClick={cancelStudy}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Progress value={progressPct} className="h-2 bg-gray-800" />
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>{formatStudyTime(target.progress)} / {formatStudyTime(target.required)}</span>
|
||||
<span>{studySpeedMult.toFixed(1)}x speed</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Executable → Regular
+17
-4
@@ -1,18 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import { fmt } from '@/lib/game/stores';
|
||||
import { formatHour } from '@/lib/game/utils/formatting';
|
||||
import { Play, Pause } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { fmt } from '@/lib/game/store';
|
||||
import { formatHour } from '@/lib/game/formatting';
|
||||
|
||||
interface TimeDisplayProps {
|
||||
day: number;
|
||||
hour: number;
|
||||
insight: number;
|
||||
paused: boolean;
|
||||
onTogglePause: () => void;
|
||||
}
|
||||
|
||||
export function TimeDisplay({
|
||||
day,
|
||||
hour,
|
||||
insight,
|
||||
paused,
|
||||
onTogglePause,
|
||||
}: TimeDisplayProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -31,8 +37,15 @@ export function TimeDisplay({
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Insight</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onTogglePause}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
{paused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
TimeDisplay.displayName = "TimeDisplay";
|
||||
|
||||
Executable → Regular
+3
-3
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { SKILLS_DEF } from '@/lib/game/constants';
|
||||
import type { SkillUpgradeChoice } from '@/lib/game/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -32,6 +33,7 @@ export function UpgradeDialog({
|
||||
}: UpgradeDialogProps) {
|
||||
if (!skillId) return null;
|
||||
|
||||
const skillDef = SKILLS_DEF[skillId];
|
||||
const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
|
||||
|
||||
return (
|
||||
@@ -39,7 +41,7 @@ export function UpgradeDialog({
|
||||
<DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-amber-400">
|
||||
Choose Upgrade - {skillId}
|
||||
Choose Upgrade - {skillDef?.name || skillId}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400">
|
||||
Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
|
||||
@@ -111,5 +113,3 @@ export function UpgradeDialog({
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
UpgradeDialog.displayName = "UpgradeDialog";
|
||||
|
||||
@@ -1,280 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import type { EquipmentSlot } from '@/lib/game/data/equipment';
|
||||
import { fmt } from '@/lib/game/stores';
|
||||
import { CheckCircle, Sparkles } from 'lucide-react';
|
||||
import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
|
||||
|
||||
export interface EnchantmentApplierProps {
|
||||
selectedEquipmentInstance: string | null;
|
||||
setSelectedEquipmentInstance: (id: string | null) => void;
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
onEnchantmentApplied?: () => void;
|
||||
onCapacityExceeded?: (itemName: string, used: number, total: number) => void;
|
||||
}
|
||||
|
||||
export function EnchantmentApplier({
|
||||
selectedEquipmentInstance,
|
||||
setSelectedEquipmentInstance,
|
||||
selectedDesign,
|
||||
setSelectedDesign,
|
||||
onEnchantmentApplied,
|
||||
onCapacityExceeded,
|
||||
}: EnchantmentApplierProps) {
|
||||
const equippedInstances = useCraftingStore((s) => s.equippedInstances);
|
||||
const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
|
||||
const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
|
||||
const applicationProgress = useCraftingStore((s) => s.applicationProgress);
|
||||
const rawMana = useManaStore((s) => s.rawMana);
|
||||
const startApplying = useCraftingStore((s) => s.startApplying);
|
||||
const pauseApplication = useCraftingStore((s) => s.pauseApplication);
|
||||
const resumeApplication = useCraftingStore((s) => s.resumeApplication);
|
||||
const cancelApplication = useCraftingStore((s) => s.cancelApplication);
|
||||
|
||||
// Get equipped items as array - ONLY show items tagged 'Ready for Enchantment' (requirement cr5)
|
||||
const equippedItems = Object.entries(equippedInstances)
|
||||
.filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
|
||||
.map(([slot, instanceId]) => ({
|
||||
slot: slot as EquipmentSlot,
|
||||
instance: equipmentInstances[instanceId!],
|
||||
}))
|
||||
.filter(({ instance }) => instance.tags?.includes('Ready for Enchantment'));
|
||||
|
||||
// Handle apply button click
|
||||
const handleApply = () => {
|
||||
if (!selectedEquipmentInstance || !selectedDesign) return;
|
||||
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
const design = enchantmentDesigns.find(d => d.id === selectedDesign);
|
||||
|
||||
if (!instance || !design) return;
|
||||
|
||||
// Check capacity
|
||||
const availableCap = instance.totalCapacity - instance.usedCapacity;
|
||||
if (availableCap < design.totalCapacityUsed) {
|
||||
onCapacityExceeded?.(instance.name, instance.usedCapacity, instance.totalCapacity);
|
||||
return;
|
||||
}
|
||||
|
||||
startApplying(selectedEquipmentInstance, selectedDesign);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Equipment & Design Selection */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Select Equipment & Design" />
|
||||
{applicationProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
|
||||
</div>
|
||||
<div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-[var(--mana-light)] transition-all duration-300"
|
||||
style={{ width: `${(applicationProgress.progress / applicationProgress.required) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
|
||||
<span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{applicationProgress.paused ? (
|
||||
<ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
|
||||
) : (
|
||||
<>
|
||||
<ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
|
||||
<ActionButton variant="ghost" size="sm" onClick={() => {
|
||||
cancelApplication();
|
||||
onEnchantmentApplied?.(); // This will trigger the cancel toast via parent
|
||||
}}>Cancel</ActionButton>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-muted)] mb-2">
|
||||
Equipment (Ready for Enchantment):
|
||||
</div>
|
||||
<ScrollArea className="h-32">
|
||||
<div className="space-y-1">
|
||||
{equippedItems.map(({ slot, instance }) => (
|
||||
<div
|
||||
key={instance.instanceId}
|
||||
className={`p-2 rounded border cursor-pointer text-sm transition-all
|
||||
${selectedEquipmentInstance === instance.instanceId
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}
|
||||
`}
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select ${instance.name} (Ready for Enchantment)`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[var(--text-primary)]">{instance.name}</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">
|
||||
({instance.usedCapacity}/{instance.totalCapacity} cap)
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--color-success)] mt-1">
|
||||
<CheckCircle size={10} className="inline mr-1" />
|
||||
Ready
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{equippedItems.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] text-xs py-2">
|
||||
No equipment ready for enchantment.
|
||||
<br />
|
||||
Prepare equipment first in the Prepare stage.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-muted)] mb-2">Design:</div>
|
||||
<ScrollArea className="h-32">
|
||||
<div className="space-y-1">
|
||||
{enchantmentDesigns.map(design => (
|
||||
<div
|
||||
key={design.id}
|
||||
className={`p-2 rounded border cursor-pointer text-sm transition-all
|
||||
${selectedDesign === design.id
|
||||
? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}
|
||||
`}
|
||||
onClick={() => setSelectedDesign(design.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select design: ${design.name}`}
|
||||
>
|
||||
<span className="text-[var(--text-primary)]">{design.name}</span>
|
||||
<span className="text-xs text-[var(--text-muted)] ml-2">
|
||||
({design.totalCapacityUsed} cap)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{enchantmentDesigns.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] text-xs py-2">
|
||||
No designs available. Create one in the Design stage.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
{/* Application Details */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Apply Enchantment" />
|
||||
{!selectedEquipmentInstance || !selectedDesign ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select equipment and a design
|
||||
</div>
|
||||
) : applicationProgress ? (
|
||||
<div className="text-[var(--text-secondary)]">Application in progress...</div>
|
||||
) : (
|
||||
(() => {
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return null;
|
||||
|
||||
// Check if equipment is ready for enchantment
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
if (!isReady) {
|
||||
return (
|
||||
<div className="text-center text-[var(--color-danger)] py-8">
|
||||
This equipment is not prepared for enchantment. Please prepare it in the Prepare stage first.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const design = enchantmentDesigns.find(d => d.id === selectedDesign);
|
||||
if (!design) return null;
|
||||
|
||||
const availableCap = instance.totalCapacity - instance.usedCapacity;
|
||||
const canFit = availableCap >= design.totalCapacityUsed;
|
||||
const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
|
||||
const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-lg font-semibold text-[var(--text-primary)]">{design.name}</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">→ {instance.name}</div>
|
||||
<div className="text-xs text-[var(--color-success)]">
|
||||
<CheckCircle size={12} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
<Separator className="bg-[var(--border-subtle)]" />
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatRow
|
||||
label="Required Capacity:"
|
||||
value={
|
||||
<span className={canFit ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'}>
|
||||
{design.totalCapacityUsed} / {availableCap} available
|
||||
</span>
|
||||
}
|
||||
highlight={canFit ? 'success' : 'danger'}
|
||||
/>
|
||||
<StatRow
|
||||
label="Application Time:"
|
||||
value={`${applicationTime}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Mana per Hour:"
|
||||
value={manaPerHour}
|
||||
highlight="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-[var(--text-muted)]">
|
||||
Effects:
|
||||
<ul className="list-disc list-inside mt-1">
|
||||
{design.effects.map(eff => (
|
||||
<li key={eff.effectId} className="text-[var(--text-secondary)]">
|
||||
{ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={!canFit}
|
||||
onClick={handleApply}
|
||||
>
|
||||
<Sparkles size={16} className="mr-2" />
|
||||
Apply Enchantment
|
||||
</ActionButton>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</GameCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentApplier.displayName = 'EnchantmentApplier';
|
||||
@@ -1,150 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
|
||||
import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
|
||||
import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
|
||||
import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
|
||||
import { SavedDesigns } from './EnchantmentDesigner/SavedDesigns';
|
||||
import { DesignForm } from './EnchantmentDesigner/DesignForm';
|
||||
import {
|
||||
getAvailableEffects,
|
||||
getIncompatibleEffects,
|
||||
getOwnedEquipmentTypes,
|
||||
getIncompatibilityReason,
|
||||
calculateDesignCapacityCost,
|
||||
getEquipmentCapacity,
|
||||
calculateDesignTime,
|
||||
addEffectToDesign,
|
||||
removeEffectFromDesign,
|
||||
} from './EnchantmentDesigner/utils';
|
||||
import { useCraftingStore } from '@/lib/game/stores';
|
||||
|
||||
export function EnchantmentDesigner({
|
||||
selectedEquipmentType,
|
||||
setSelectedEquipmentType,
|
||||
selectedEffects,
|
||||
setSelectedEffects,
|
||||
designName,
|
||||
setDesignName,
|
||||
selectedDesign,
|
||||
setSelectedDesign,
|
||||
}: EnchantmentDesignerProps) {
|
||||
// Crafting store selectors
|
||||
const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
|
||||
const designProgress = useCraftingStore((s) => s.designProgress);
|
||||
const startDesigningEnchantment = useCraftingStore((s) => s.startDesigningEnchantment);
|
||||
const cancelDesign = useCraftingStore((s) => s.cancelDesign);
|
||||
const deleteDesign = useCraftingStore((s) => s.deleteDesign);
|
||||
const unlockedEffects = useCraftingStore((s) => s.unlockedEffects);
|
||||
const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
|
||||
|
||||
// Calculate total capacity cost for current design
|
||||
const designCapacityCost = calculateDesignCapacityCost(selectedEffects, 0);
|
||||
|
||||
// Get capacity limit for selected equipment type
|
||||
const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
|
||||
|
||||
// Calculate design time
|
||||
const designTime = calculateDesignTime(selectedEffects);
|
||||
|
||||
// Add effect to design
|
||||
const addEffect = (effectId: string) => {
|
||||
addEffectToDesign(effectId, selectedEffects, 0, setSelectedEffects);
|
||||
};
|
||||
|
||||
// Remove effect from design
|
||||
const removeEffect = (effectId: string) => {
|
||||
removeEffectFromDesign(effectId, selectedEffects, setSelectedEffects);
|
||||
};
|
||||
|
||||
// Create design
|
||||
const handleCreateDesign = () => {
|
||||
if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
|
||||
|
||||
const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
|
||||
if (success) {
|
||||
// Reset form
|
||||
setDesignName('');
|
||||
setSelectedEquipmentType(null);
|
||||
setSelectedEffects([]);
|
||||
}
|
||||
};
|
||||
|
||||
// Get available effects for selected equipment type (only unlocked ones)
|
||||
const availableEffects = getAvailableEffects(selectedEquipmentType, unlockedEffects);
|
||||
|
||||
// Get incompatible effects (unlocked but not for this equipment type)
|
||||
const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
|
||||
|
||||
// Get equipment types that the player actually owns (has instances of)
|
||||
const ownedEquipmentTypes = getOwnedEquipmentTypes(equipmentInstances);
|
||||
|
||||
// Get the reason why an effect is incompatible
|
||||
const getIncompatibilityReasonWrapper = (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => {
|
||||
return getIncompatibilityReason(effect, selectedEquipmentType);
|
||||
};
|
||||
|
||||
// Render stage
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Equipment Type Selection */}
|
||||
<EquipmentTypeSelector
|
||||
ownedEquipmentTypes={ownedEquipmentTypes}
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
setSelectedEquipmentType={setSelectedEquipmentType}
|
||||
designProgress={designProgress}
|
||||
cancelDesign={cancelDesign}
|
||||
/>
|
||||
|
||||
{/* Effect Selection */}
|
||||
<GameCard variant="default">
|
||||
<EffectSelector
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
selectedEffects={selectedEffects}
|
||||
setSelectedEffects={setSelectedEffects}
|
||||
availableEffects={availableEffects}
|
||||
incompatibleEffects={incompatibleEffects}
|
||||
enchantingLevel={0}
|
||||
efficiencyBonus={0}
|
||||
designProgress={designProgress}
|
||||
addEffect={addEffect}
|
||||
removeEffect={removeEffect}
|
||||
getIncompatibilityReason={getIncompatibilityReasonWrapper}
|
||||
/>
|
||||
|
||||
{/* Selected effects summary - only show when not in design progress and equipment type is selected */}
|
||||
{!designProgress && selectedEquipmentType && (
|
||||
<>
|
||||
<Separator className="bg-[var(--border-subtle)] my-2" />
|
||||
<DesignForm
|
||||
designName={designName}
|
||||
setDesignName={setDesignName}
|
||||
selectedEffects={selectedEffects}
|
||||
designCapacityCost={designCapacityCost}
|
||||
selectedEquipmentCapacity={selectedEquipmentCapacity}
|
||||
isOverCapacity={designCapacityCost > selectedEquipmentCapacity}
|
||||
designTime={designTime}
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
handleCreateDesign={handleCreateDesign}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
{/* Saved Designs */}
|
||||
<SavedDesigns
|
||||
enchantmentDesigns={enchantmentDesigns}
|
||||
selectedDesign={selectedDesign}
|
||||
setSelectedDesign={setSelectedDesign}
|
||||
deleteDesign={deleteDesign}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentDesigner.displayName = 'EnchantmentDesigner';
|
||||
@@ -1,52 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import type { DesignFormProps } from './types';
|
||||
|
||||
export function DesignForm({
|
||||
designName,
|
||||
setDesignName,
|
||||
selectedEffects,
|
||||
designCapacityCost,
|
||||
selectedEquipmentCapacity,
|
||||
isOverCapacity,
|
||||
designTime,
|
||||
selectedEquipmentType,
|
||||
handleCreateDesign,
|
||||
}: DesignFormProps) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Design name..."
|
||||
value={designName}
|
||||
onChange={(e) => setDesignName(e.target.value)}
|
||||
className="w-full bg-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
|
||||
aria-label="Design name"
|
||||
/>
|
||||
<StatRow
|
||||
label="Total Capacity:"
|
||||
value={
|
||||
<span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
|
||||
{designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<StatRow
|
||||
label="Design Time:"
|
||||
value={`${designTime.toFixed(1)}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
|
||||
onClick={handleCreateDesign}
|
||||
>
|
||||
{isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
|
||||
</ActionButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
DesignForm.displayName = 'DesignForm';
|
||||
@@ -1,152 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
|
||||
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EffectSelectorProps } from './types';
|
||||
|
||||
export function EffectSelector({
|
||||
selectedEquipmentType,
|
||||
selectedEffects,
|
||||
setSelectedEffects,
|
||||
availableEffects,
|
||||
incompatibleEffects,
|
||||
enchantingLevel,
|
||||
efficiencyBonus,
|
||||
designProgress,
|
||||
addEffect,
|
||||
removeEffect,
|
||||
getIncompatibilityReason,
|
||||
}: EffectSelectorProps) {
|
||||
return (
|
||||
<>
|
||||
{enchantingLevel < 1 ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
<Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
|
||||
<p>Learn Enchanting skill to design enchantments</p>
|
||||
</div>
|
||||
) : designProgress ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
|
||||
{designProgress.effects.map(eff => {
|
||||
const def = ENCHANTMENT_EFFECTS[eff.effectId];
|
||||
return (
|
||||
<div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
|
||||
<span>{def?.name} x{eff.stacks}</span>
|
||||
<span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : !selectedEquipmentType ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select an equipment type first
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ScrollArea className="h-48 mb-4">
|
||||
<div className="space-y-2">
|
||||
{/* Compatible Effects */}
|
||||
{availableEffects.map(effect => {
|
||||
const selected = selectedEffects.find(e => e.effectId === effect.id);
|
||||
const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={effect.id}
|
||||
className={`p-2 rounded border transition-all
|
||||
${selected
|
||||
? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
|
||||
<div className="text-xs text-[var(--text-disabled)] mt-1">
|
||||
Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{selected && (
|
||||
<ActionButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => removeEffect(effect.id)}
|
||||
>
|
||||
<Minus className="w-3 h-3" />
|
||||
</ActionButton>
|
||||
)}
|
||||
<ActionButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => addEffect(effect.id)}
|
||||
disabled={!selected && selectedEffects.length >= 5}
|
||||
>
|
||||
<Plus className="w-3 h-3" />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
{selected && (
|
||||
<Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
|
||||
{selected.stacks}/{effect.maxStacks}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
|
||||
{incompatibleEffects.length > 0 && (
|
||||
<>
|
||||
<Separator className="bg-[var(--border-subtle)] my-2" />
|
||||
<div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
|
||||
Unavailable
|
||||
</div>
|
||||
{incompatibleEffects.map(effect => {
|
||||
const reason = getIncompatibilityReason(effect);
|
||||
|
||||
return (
|
||||
<TooltipProvider key={effect.id}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
|
||||
<div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
|
||||
</div>
|
||||
<AlertCircle size={14} className="text-[var(--text-disabled)]" />
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
|
||||
<p className="font-semibold">Incompatible Effect</p>
|
||||
<p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
EffectSelector.displayName = 'EffectSelector';
|
||||
@@ -1,67 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import type { EquipmentTypeSelectorProps } from './types';
|
||||
|
||||
export function EquipmentTypeSelector({
|
||||
ownedEquipmentTypes,
|
||||
selectedEquipmentType,
|
||||
setSelectedEquipmentType,
|
||||
designProgress,
|
||||
cancelDesign,
|
||||
}: EquipmentTypeSelectorProps) {
|
||||
return (
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="1. Select Equipment Type" />
|
||||
{designProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Designing for: {designProgress.equipmentType}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
|
||||
<Progress
|
||||
value={(designProgress.progress / designProgress.required) * 100}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
|
||||
<ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{ownedEquipmentTypes.map(type => (
|
||||
<div
|
||||
key={type.id}
|
||||
className={`p-2 rounded border cursor-pointer transition-all
|
||||
${selectedEquipmentType === type.id
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
onClick={() => setSelectedEquipmentType(type.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select ${type.name}`}
|
||||
>
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{ownedEquipmentTypes.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] py-4 text-sm">
|
||||
No equipment blueprints owned. Craft or find equipment blueprints first.
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
)}
|
||||
</GameCard>
|
||||
);
|
||||
}
|
||||
|
||||
EquipmentTypeSelector.displayName = 'EquipmentTypeSelector';
|
||||
@@ -1,69 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import type { SavedDesignsProps } from './types';
|
||||
|
||||
export function SavedDesigns({
|
||||
enchantmentDesigns,
|
||||
selectedDesign,
|
||||
setSelectedDesign,
|
||||
deleteDesign,
|
||||
}: SavedDesignsProps) {
|
||||
return (
|
||||
<GameCard variant="default" className="lg:col-span-2">
|
||||
<SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
|
||||
{enchantmentDesigns.length === 0 ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-4">
|
||||
No saved designs yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{enchantmentDesigns.map(design => (
|
||||
<div
|
||||
key={design.id}
|
||||
className={`p-3 rounded border cursor-pointer transition-all
|
||||
${selectedDesign === design.id
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
onClick={() => setSelectedDesign(design.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select design: ${design.name}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">
|
||||
{EQUIPMENT_TYPES[design.equipmentType]?.name}
|
||||
</div>
|
||||
</div>
|
||||
<ActionButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteDesign(design.id);
|
||||
}}
|
||||
aria-label={`Delete design: ${design.name}`}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-[var(--text-muted)]">
|
||||
{design.effects.length} effects | {design.totalCapacityUsed} cap
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GameCard>
|
||||
);
|
||||
}
|
||||
|
||||
SavedDesigns.displayName = 'SavedDesigns';
|
||||
@@ -1,53 +0,0 @@
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
|
||||
|
||||
export interface EnchantmentDesignerProps {
|
||||
selectedEquipmentType: string | null;
|
||||
setSelectedEquipmentType: (type: string | null) => void;
|
||||
selectedEffects: DesignEffect[];
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void;
|
||||
designName: string;
|
||||
setDesignName: (name: string) => void;
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export interface EquipmentTypeSelectorProps {
|
||||
ownedEquipmentTypes: Array<{ id: string; name: string; baseCapacity: number }>;
|
||||
selectedEquipmentType: string | null;
|
||||
setSelectedEquipmentType: (type: string | null) => void;
|
||||
designProgress: EquipmentCraftingProgress | null;
|
||||
cancelDesign: () => void;
|
||||
}
|
||||
|
||||
export interface EffectSelectorProps {
|
||||
selectedEquipmentType: string | null;
|
||||
selectedEffects: DesignEffect[];
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void;
|
||||
availableEffects: Array<{ id: string; name: string; description: string; baseCapacityCost: number; maxStacks: number }>;
|
||||
incompatibleEffects: Array<{ id: string; name: string; description: string }>;
|
||||
enchantingLevel: number;
|
||||
efficiencyBonus: number;
|
||||
designProgress: EquipmentCraftingProgress | null;
|
||||
addEffect: (effectId: string) => void;
|
||||
removeEffect: (effectId: string) => void;
|
||||
getIncompatibilityReason: (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => string;
|
||||
}
|
||||
|
||||
export interface SavedDesignsProps {
|
||||
enchantmentDesigns: EnchantmentDesign[];
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
deleteDesign: (id: string) => void;
|
||||
}
|
||||
|
||||
export interface DesignFormProps {
|
||||
designName: string;
|
||||
setDesignName: (name: string) => void;
|
||||
selectedEffects: DesignEffect[];
|
||||
designCapacityCost: number;
|
||||
selectedEquipmentCapacity: number;
|
||||
isOverCapacity: boolean;
|
||||
designTime: number;
|
||||
selectedEquipmentType: string | null;
|
||||
handleCreateDesign: () => void;
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import type { DesignEffect, EquipmentInstance, EquipmentCategory } from '@/lib/game/types';
|
||||
import { calculateDesignCapacityCost as calcCapacityCost, calculateDesignTime as calcDesignTime } from '@/lib/game/crafting-design';
|
||||
|
||||
/**
|
||||
* Get available effects for selected equipment type (only unlocked ones)
|
||||
* Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
|
||||
*/
|
||||
export function getAvailableEffects(
|
||||
selectedEquipmentType: string | null,
|
||||
unlockedEffects: string[]
|
||||
) {
|
||||
if (!selectedEquipmentType) return [];
|
||||
const type = EQUIPMENT_TYPES[selectedEquipmentType];
|
||||
if (!type) return [];
|
||||
|
||||
return Object.values(ENCHANTMENT_EFFECTS).filter(
|
||||
effect =>
|
||||
effect.allowedEquipmentCategories.includes(type.category) &&
|
||||
unlockedEffects.includes(effect.id)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get incompatible effects (unlocked but not for this equipment type)
|
||||
*/
|
||||
export function getIncompatibleEffects(
|
||||
selectedEquipmentType: string | null,
|
||||
unlockedEffects: string[]
|
||||
) {
|
||||
if (!selectedEquipmentType) return [];
|
||||
const type = EQUIPMENT_TYPES[selectedEquipmentType];
|
||||
if (!type) return [];
|
||||
|
||||
return Object.values(ENCHANTMENT_EFFECTS).filter(
|
||||
effect =>
|
||||
!effect.allowedEquipmentCategories.includes(type.category) &&
|
||||
unlockedEffects.includes(effect.id)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get equipment types that the player actually owns (has instances of)
|
||||
* This ensures enchantment compatibility is based on owned items, not just blueprints
|
||||
*/
|
||||
export function getOwnedEquipmentTypes(equipmentInstances: Record<string, EquipmentInstance>) {
|
||||
// Get all unique equipment type IDs from owned instances
|
||||
const ownedEquipmentTypeIds = new Set<string>();
|
||||
|
||||
// Check all equipment instances the player owns
|
||||
for (const instance of Object.values(equipmentInstances || {})) {
|
||||
ownedEquipmentTypeIds.add(instance.typeId);
|
||||
}
|
||||
|
||||
// Filter EQUIPMENT_TYPES to only include types the player owns
|
||||
return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the reason why an effect is incompatible
|
||||
*/
|
||||
export function getIncompatibilityReason(
|
||||
effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] },
|
||||
selectedEquipmentType: string | null
|
||||
): string {
|
||||
if (!selectedEquipmentType) return 'No equipment selected';
|
||||
const type = EQUIPMENT_TYPES[selectedEquipmentType];
|
||||
if (!type) return 'Unknown equipment type';
|
||||
|
||||
// Check what categories this effect is allowed for
|
||||
const allowedCategories = effect.allowedEquipmentCategories;
|
||||
const equipmentCategory = type.category;
|
||||
|
||||
if (allowedCategories.includes(equipmentCategory)) {
|
||||
return 'Compatible';
|
||||
}
|
||||
|
||||
// Provide specific reasons
|
||||
if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
|
||||
return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
|
||||
}
|
||||
|
||||
return `Requires ${allowedCategories.join(' or ')} equipment`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate total capacity cost for current design
|
||||
* Delegates to canonical calculateDesignCapacityCost from crafting-design
|
||||
*/
|
||||
export function calculateDesignCapacityCost(
|
||||
selectedEffects: DesignEffect[],
|
||||
efficiencyBonus: number
|
||||
): number {
|
||||
return calcCapacityCost(selectedEffects, efficiencyBonus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get capacity limit for selected equipment type
|
||||
*/
|
||||
export function getEquipmentCapacity(selectedEquipmentType: string | null): number {
|
||||
return selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate design time
|
||||
* Delegates to canonical calculateDesignTime from crafting-design
|
||||
*/
|
||||
export function calculateDesignTime(selectedEffects: DesignEffect[]): number {
|
||||
return calcDesignTime(selectedEffects);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add effect to design
|
||||
*/
|
||||
export function addEffectToDesign(
|
||||
effectId: string,
|
||||
selectedEffects: DesignEffect[],
|
||||
efficiencyBonus: number,
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void
|
||||
) {
|
||||
const existing = selectedEffects.find(e => e.effectId === effectId);
|
||||
const effectDef = ENCHANTMENT_EFFECTS[effectId];
|
||||
if (!effectDef) return;
|
||||
|
||||
if (existing) {
|
||||
if (existing.stacks < effectDef.maxStacks) {
|
||||
setSelectedEffects(selectedEffects.map(e =>
|
||||
e.effectId === effectId
|
||||
? { ...e, stacks: e.stacks + 1 }
|
||||
: e
|
||||
));
|
||||
}
|
||||
} else {
|
||||
setSelectedEffects([...selectedEffects, {
|
||||
effectId,
|
||||
stacks: 1,
|
||||
capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove effect from design
|
||||
*/
|
||||
export function removeEffectFromDesign(
|
||||
effectId: string,
|
||||
selectedEffects: DesignEffect[],
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void
|
||||
) {
|
||||
const existing = selectedEffects.find(e => e.effectId === effectId);
|
||||
if (!existing) return;
|
||||
|
||||
if (existing.stacks > 1) {
|
||||
setSelectedEffects(selectedEffects.map(e =>
|
||||
e.effectId === effectId
|
||||
? { ...e, stacks: e.stacks - 1 }
|
||||
: e
|
||||
));
|
||||
} else {
|
||||
setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
|
||||
}
|
||||
}
|
||||
@@ -1,304 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
||||
import { Trash2, CheckCircle, AlertTriangle } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import type { EquipmentSlot } from '@/lib/game/types';
|
||||
import { fmt } from '@/lib/game/stores';
|
||||
import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
|
||||
import { useGameToast } from '@/components/game/GameToast';
|
||||
|
||||
export interface EnchantmentPreparerProps {
|
||||
selectedEquipmentInstance: string | null;
|
||||
setSelectedEquipmentInstance: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export function EnchantmentPreparer({
|
||||
selectedEquipmentInstance,
|
||||
setSelectedEquipmentInstance,
|
||||
}: EnchantmentPreparerProps) {
|
||||
const showToast = useGameToast();
|
||||
const equippedInstances = useCraftingStore((s) => s.equippedInstances);
|
||||
const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
|
||||
const preparationProgress = useCraftingStore((s) => s.preparationProgress);
|
||||
const rawMana = useManaStore((s) => s.rawMana);
|
||||
const startPreparing = useCraftingStore((s) => s.startPreparing);
|
||||
const cancelPreparation = useCraftingStore((s) => s.cancelPreparation);
|
||||
|
||||
// Get equipped items as array
|
||||
const equippedItems = Object.entries(equippedInstances)
|
||||
.filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
|
||||
.map(([slot, instanceId]) => ({
|
||||
slot: slot as EquipmentSlot,
|
||||
instance: equipmentInstances[instanceId!],
|
||||
}));
|
||||
|
||||
// Confirm dialog state
|
||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
|
||||
const handleStartPreparation = () => {
|
||||
if (!selectedEquipmentInstance) return;
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return;
|
||||
|
||||
// If item has existing enchantments, show confirm dialog (bug #8)
|
||||
if (instance.enchantments.length > 0) {
|
||||
setShowConfirmDialog(true);
|
||||
} else {
|
||||
startPreparingWithToast(selectedEquipmentInstance);
|
||||
}
|
||||
};
|
||||
|
||||
const startPreparingWithToast = (instanceId: string) => {
|
||||
const instance = equipmentInstances[instanceId];
|
||||
startPreparing(instanceId);
|
||||
if (instance) {
|
||||
showToast('info', 'Preparation Started', `Preparing ${instance.name} for enchantment...`);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmPreparation = () => {
|
||||
if (selectedEquipmentInstance) {
|
||||
startPreparingWithToast(selectedEquipmentInstance);
|
||||
setShowConfirmDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Equipment Selection */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Select Equipment to Prepare" />
|
||||
{preparationProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
|
||||
</div>
|
||||
<div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-[var(--color-warning)] transition-all duration-300"
|
||||
style={{ width: `${(preparationProgress.progress / preparationProgress.required) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
|
||||
<span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
|
||||
</div>
|
||||
<ActionButton size="sm" variant="outline" onClick={() => {
|
||||
cancelPreparation();
|
||||
showToast('warning', 'Preparation Cancelled', 'Equipment preparation was cancelled.');
|
||||
}}>Cancel</ActionButton>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<div className="space-y-2">
|
||||
{equippedItems.map(({ slot, instance }) => {
|
||||
const hasEnchantments = instance.enchantments.length > 0;
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
return (
|
||||
<div
|
||||
key={instance.instanceId}
|
||||
className={`p-3 rounded border cursor-pointer transition-all
|
||||
${selectedEquipmentInstance === instance.instanceId
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}
|
||||
${hasEnchantments ? 'border-l-4 border-l-[var(--color-danger)]' : ''}
|
||||
${isReady ? 'border-l-4 border-l-[var(--color-success)]' : ''}
|
||||
`}
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${instance.name}${hasEnchantments ? ' (has enchantments)' : ''}${isReady ? ' (ready for enchantment)' : ''}`}
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">{instance.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{slot}</div>
|
||||
{hasEnchantments && (
|
||||
<div className="text-xs text-[var(--color-danger)] mt-1">
|
||||
<AlertTriangle size={12} className="inline mr-1" />
|
||||
{instance.enchantments.length} enchantments - Preparation will remove them
|
||||
</div>
|
||||
)}
|
||||
{isReady && (
|
||||
<div className="text-xs text-[var(--color-success)] mt-1">
|
||||
<CheckCircle size={12} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right text-sm">
|
||||
<div className="text-[var(--color-success)]">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{instance.enchantments.length} enchants</div>
|
||||
{/* Requirement: Visual badge for 'Ready for Enchantment' */}
|
||||
{isReady && (
|
||||
<Badge className="mt-1 bg-[var(--color-success)]/20 text-[var(--color-success)] border-[var(--color-success)]/40">
|
||||
<CheckCircle size={10} className="mr-1" />
|
||||
Ready
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{equippedItems.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] py-4">No equipped items</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
{/* Preparation Details */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Preparation Details" />
|
||||
{!selectedEquipmentInstance ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select equipment to prepare
|
||||
</div>
|
||||
) : preparationProgress ? (
|
||||
<div className="text-[var(--text-secondary)]">Preparation in progress...</div>
|
||||
) : (
|
||||
(() => {
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return null;
|
||||
const hasEnchantments = instance.enchantments.length > 0;
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
|
||||
const manaCost = instance.totalCapacity * 10;
|
||||
|
||||
// Calculate disenchant recovery
|
||||
const recoveryRate = 0.1; // Base recovery rate
|
||||
const totalRecoverable = instance.enchantments.reduce(
|
||||
(sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-lg font-semibold text-[var(--text-primary)]">{instance.name}</div>
|
||||
<Separator className="bg-[var(--border-subtle)]" />
|
||||
|
||||
{/* Show warning if item has enchantments - Requirement: button reads "Prepare — removes existing enchantments" */}
|
||||
{hasEnchantments && !isReady && (
|
||||
<div className="p-3 rounded border border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10">
|
||||
<div className="text-sm font-semibold text-[var(--color-danger)]">
|
||||
<AlertTriangle size={14} className="inline mr-1" />
|
||||
Equipment has enchantments
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] mt-1">
|
||||
Preparation will remove all existing enchantments and recover some mana.
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="text-[var(--text-muted)]">Recoverable Mana:</span>
|
||||
<span className="text-[var(--color-success)]">{fmt(totalRecoverable)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show ready status */}
|
||||
{isReady && (
|
||||
<div className="p-3 rounded border border-[var(--color-success)]/50 bg-[var(--color-success)]/10">
|
||||
<div className="text-sm font-semibold text-[var(--color-success)]">
|
||||
<CheckCircle size={14} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] mt-1">
|
||||
This item has been prepared and is ready for enchantment application.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatRow
|
||||
label="Capacity:"
|
||||
value={`${instance.usedCapacity}/${instance.totalCapacity}`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Prep Time:"
|
||||
value={`${prepTime}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Mana Cost:"
|
||||
value={
|
||||
<span className={rawMana < manaCost ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
|
||||
{fmt(manaCost)}
|
||||
</span>
|
||||
}
|
||||
highlight={rawMana < manaCost ? 'danger' : 'success'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Requirement (bug #8): Confirm dialog before proceeding if item has enchantments */}
|
||||
<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={rawMana < manaCost || isReady}
|
||||
onClick={handleStartPreparation}
|
||||
>
|
||||
{hasEnchantments ? (
|
||||
<>
|
||||
<Trash2 size={16} className="mr-2" />
|
||||
Prepare — removes existing enchantments ({prepTime}h, {fmt(manaCost)} mana)
|
||||
</>
|
||||
) : (
|
||||
<>Start Preparation ({prepTime}h, {fmt(manaCost)} mana)</>
|
||||
)}
|
||||
</ActionButton>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-[var(--color-danger)]">
|
||||
<AlertTriangle className="inline mr-2" size={18} />
|
||||
Confirm Preparation
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-[var(--text-secondary)]">
|
||||
This equipment has {instance.enchantments.length} existing enchantment(s). Preparation will
|
||||
<strong className="text-[var(--color-danger)]"> permanently remove</strong> all existing enchantments
|
||||
and recover approximately <strong className="text-[var(--color-success)]">{fmt(totalRecoverable)} mana</strong>.
|
||||
<div className="mt-2 p-2 bg-[var(--bg-sunken)]/50 rounded text-xs">
|
||||
Equipment: {instance.name}<br />
|
||||
Enchantments to remove: {instance.enchantments.length}
|
||||
</div>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
|
||||
onClick={() => setShowConfirmDialog(false)}
|
||||
>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-[var(--color-danger)] hover:bg-[var(--interactive-danger-hover)] text-white"
|
||||
onClick={confirmPreparation}
|
||||
>
|
||||
Yes, Remove Enchantments & Prepare
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</GameCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentPreparer.displayName = 'EnchantmentPreparer';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user