xiaobai/FunConnect
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: FunConnect v1.0.0 - Minecraft联机平台完整版

Browse Source 
- server: Node.js TCP中继服务器，支持多节点集群
- web: React管理面板（仪表盘、房间管理、节点管理）
- client: Electron桌面客户端（连接、创建/加入房间、本地代理）
- deploy: Ubuntu一键部署脚本
This commit is contained in:
FunMC
2026-02-22 23:33:00 +08:00
commit b17679cec6
44 changed files with 13783 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
client/renderer/app.js Normal file
View File

@@ -0,0 +1,278 @@
// FunConnect Client - Renderer Logic
const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);
let isConnected = false;
let currentServerUrl = '';
// ===== Window Controls =====
$('#btn-min').addEventListener('click', () => window.funmc.minimize());
$('#btn-max').addEventListener('click', () => window.funmc.maximize());
$('#btn-close').addEventListener('click', () => window.funmc.close());
// ===== Navigation =====
$$('.nav-item').forEach(item => {
item.addEventListener('click', () => {
const page = item.dataset.page;
$$('.nav-item').forEach(n => n.classList.remove('active'));
item.classList.add('active');
$$('.page').forEach(p => p.classList.remove('active'));
$(`#page-${page}`).classList.add('active');
});
});
// ===== Connect Page =====
$('#btn-connect').addEventListener('click', async () => {
const url = $('#server-url').value.trim();
if (!url) {
showMsg('#connect-msg', '请输入服务器地址', 'error');
return;
}
const btn = $('#btn-connect');
btn.disabled = true;
btn.innerHTML = '<span class="spinner"></span> 连接中...';
showMsg('#connect-msg', '', '');
const result = await window.funmc.connectServer(url);
if (result.success) {
isConnected = true;
currentServerUrl = url;
updateServerStatus(true);
showMsg('#connect-msg', '连接成功！', 'success');
showServerInfo(result.data);
} else {
isConnected = false;
updateServerStatus(false);
showMsg('#connect-msg', '连接失败: ' + result.error, 'error');
}
btn.disabled = false;
btn.textContent = '连接服务器';
});
function showServerInfo(data) {
const grid = $('#server-info-grid');
grid.innerHTML = '';
const items = [
{ label: '节点名称', value: data.nodeName || 'N/A' },
{ label: '节点ID', value: data.nodeId || 'N/A' },
{ label: '运行模式', value: data.isMaster ? '主节点' : '工作节点' },
{ label: '运行状态', value: data.status === 'ok' ? '正常' : '异常' },
{ label: '运行时间', value: formatUptime(data.uptime || 0) },
{ label: '版本', value: 'v1.0.0' },
];
items.forEach(item => {
const div = document.createElement('div');
div.className = 'info-item';
div.innerHTML = `<div class="label">${item.label}</div><div class="value">${item.value}</div>`;
grid.appendChild(div);
});
$('#server-info').classList.remove('hidden');
}
function updateServerStatus(online) {
const dot = $('#server-status .status-dot');
const text = $('#server-status .status-text');
if (online) {
dot.className = 'status-dot online';
text.textContent = '已连接';
} else {
dot.className = 'status-dot offline';
text.textContent = '未连接';
}
}
// ===== Rooms Page =====
$('#btn-refresh-rooms').addEventListener('click', loadRooms);
async function loadRooms() {
if (!isConnected) {
$('#rooms-list').innerHTML = '<div class="empty-state"><span class="empty-icon">🔗</span><p>请先连接服务器</p></div>';
return;
}
$('#rooms-list').innerHTML = '<div class="empty-state"><span class="spinner"></span><p>加载中...</p></div>';
const result = await window.funmc.listRooms();
if (!result.success) {
$('#rooms-list').innerHTML = `<div class="empty-state"><span class="empty-icon">❌</span><p>${result.error}</p></div>`;
return;
}
const rooms = result.data.rooms || [];
if (rooms.length === 0) {
$('#rooms-list').innerHTML = '<div class="empty-state"><span class="empty-icon">🎮</span><p>暂无在线房间</p></div>';
return;
}
$('#rooms-list').innerHTML = rooms.map(room => `
<div class="room-card" data-id="${room.id}">
<div class="room-left">
<div class="room-icon">🎮</div>
<div>
<div class="room-name">${escapeHtml(room.name)} ${room.password ? '🔒' : ''}</div>
<div class="room-meta">房间号: ${room.id} | 房主: ${escapeHtml(room.hostName)}</div>
</div>
</div>
<div class="room-right">
<span class="room-players">👥 ${room.currentPlayers}/${room.maxPlayers}</span>
<span class="room-version">${room.gameEdition === 'java' ? 'Java' : '基岩'} ${room.gameVersion}</span>
<button class="room-btn-join" onclick="quickJoin('${room.id}')">加入</button>
</div>
</div>
`).join('');
}
function quickJoin(roomId) {
// Navigate to join page and fill in room ID
$$('.nav-item').forEach(n => n.classList.remove('active'));
document.querySelector('[data-page="join"]').classList.add('active');
$$('.page').forEach(p => p.classList.remove('active'));
$('#page-join').classList.add('active');
$('#join-room-id').value = roomId;
}
// ===== Host Page =====
$('#btn-host').addEventListener('click', async () => {
if (!isConnected) {
showMsg('#host-msg', '请先连接服务器', 'error');
return;
}
const name = $('#host-name').value.trim();
const port = parseInt($('#host-port').value);
const version = $('#host-version').value.trim();
const edition = $('#host-edition').value;
const maxPlayers = parseInt($('#host-maxplayers').value);
const password = $('#host-password').value;
if (!name) {
showMsg('#host-msg', '请输入房间名称', 'error');
return;
}
const btn = $('#btn-host');
btn.disabled = true;
btn.innerHTML = '<span class="spinner"></span> 创建中...';
showMsg('#host-msg', '', '');
const result = await window.funmc.hostRoom({
serverUrl: currentServerUrl,
roomName: name,
localMcPort: port,
gameVersion: version,
gameEdition: edition,
maxPlayers: maxPlayers,
password: password || undefined,
});
if (result.success) {
showMsg('#host-msg', '', '');
$('#host-room-id').textContent = result.data.room.id;
$('#host-result').classList.remove('hidden');
} else {
showMsg('#host-msg', '创建失败: ' + result.error, 'error');
}
btn.disabled = false;
btn.textContent = '创建房间';
});
$('#btn-copy-room').addEventListener('click', () => {
const roomId = $('#host-room-id').textContent;
navigator.clipboard.writeText(roomId).then(() => {
$('#btn-copy-room').textContent = '已复制！';
setTimeout(() => { $('#btn-copy-room').textContent = '复制房间号'; }, 2000);
});
});
// ===== Join Page =====
$('#btn-join').addEventListener('click', async () => {
const roomId = $('#join-room-id').value.trim();
const host = $('#join-host').value.trim();
const port = parseInt($('#join-port').value);
const localPort = parseInt($('#join-local-port').value);
if (!roomId) {
showMsg('#join-msg', '请输入房间号', 'error');
return;
}
if (!host) {
showMsg('#join-msg', '请输入中继服务器地址', 'error');
return;
}
const btn = $('#btn-join');
btn.disabled = true;
btn.innerHTML = '<span class="spinner"></span> 连接中...';
showMsg('#join-msg', '', '');
const result = await window.funmc.joinRoom({
serverHost: host,
serverPort: port,
roomId: roomId,
localPort: localPort,
});
if (result.success) {
showMsg('#join-msg', '', '');
$('#join-active-port').textContent = String(localPort);
$('#join-status').classList.remove('hidden');
$('#btn-join').classList.add('hidden');
$('#btn-leave').classList.remove('hidden');
} else {
showMsg('#join-msg', '加入失败: ' + result.error, 'error');
}
btn.disabled = false;
btn.textContent = '加入房间';
});
$('#btn-leave').addEventListener('click', async () => {
await window.funmc.disconnect();
$('#join-status').classList.add('hidden');
$('#btn-join').classList.remove('hidden');
$('#btn-leave').classList.add('hidden');
showMsg('#join-msg', '已断开连接', 'success');
});
// ===== Relay Status Events =====
window.funmc.onRelayStatus((data) => {
if (data.status === 'disconnected') {
$('#join-status').classList.add('hidden');
$('#btn-join').classList.remove('hidden');
$('#btn-leave').classList.add('hidden');
showMsg('#join-msg', '连接已断开', 'error');
} else if (data.status === 'error') {
showMsg('#join-msg', '连接错误: ' + data.error, 'error');
}
});
// ===== Auto-refresh rooms when navigating =====
document.querySelector('[data-page="rooms"]').addEventListener('click', () => {
if (isConnected) loadRooms();
});
// ===== Utilities =====
function showMsg(selector, text, type) {
const el = $(selector);
el.textContent = text;
el.className = 'msg' + (type ? ' ' + type : '');
}
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
function formatUptime(seconds) {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = Math.floor(seconds % 60);
if (h > 0) return `${h}时${m}分${s}秒`;
if (m > 0) return `${m}分${s}秒`;
return `${s}秒`;
}

234
client/renderer/index.html Normal file
View File

@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'">
<title>FunConnect</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Title Bar -->
<div class="titlebar" id="titlebar">
<div class="titlebar-drag">
<span class="titlebar-icon">⛏</span>
<span class="titlebar-title">FunConnect</span>
</div>
<div class="titlebar-controls">
<button class="tb-btn" id="btn-min">─</button>
<button class="tb-btn" id="btn-max">□</button>
<button class="tb-btn tb-close" id="btn-close">✕</button>
</div>
</div>
<!-- Main Container -->
<div class="app">
<!-- Sidebar -->
<nav class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">F</div>
<div class="logo-text">
<span class="logo-name">FunConnect</span>
<span class="logo-sub">MC联机客户端</span>
</div>
</div>
<div class="sidebar-status" id="server-status">
<span class="status-dot offline"></span>
<span class="status-text">未连接</span>
</div>
<ul class="sidebar-nav">
<li class="nav-item active" data-page="connect">
<span class="nav-icon">🔗</span> 连接服务器
</li>
<li class="nav-item" data-page="rooms">
<span class="nav-icon">🎮</span> 房间列表
</li>
<li class="nav-item" data-page="host">
<span class="nav-icon">🏠</span> 创建房间
</li>
<li class="nav-item" data-page="join">
<span class="nav-icon">🚀</span> 加入房间
</li>
<li class="nav-item" data-page="about">
<span class="nav-icon">ℹ️</span> 关于
</li>
</ul>
<div class="sidebar-footer">v1.0.0</div>
</nav>
<!-- Content -->
<main class="content">
<!-- Connect Page -->
<div class="page active" id="page-connect">
<h2 class="page-title">连接服务器</h2>
<p class="page-desc">输入FunMC中继服务器地址来开始联机</p>
<div class="card">
<div class="form-group">
<label>服务器地址</label>
<input type="text" id="server-url" class="input" placeholder="http://your-server:3000" value="http://localhost:3000">
</div>
<button class="btn btn-primary" id="btn-connect">连接服务器</button>
<div class="msg" id="connect-msg"></div>
<div class="server-info hidden" id="server-info">
<h3>服务器信息</h3>
<div class="info-grid" id="server-info-grid"></div>
</div>
</div>
</div>
<!-- Rooms Page -->
<div class="page" id="page-rooms">
<div class="page-header">
<div>
<h2 class="page-title">房间列表</h2>
<p class="page-desc">当前在线的联机房间</p>
</div>
<button class="btn btn-secondary" id="btn-refresh-rooms">刷新</button>
</div>
<div id="rooms-list" class="rooms-grid">
<div class="empty-state">
<span class="empty-icon">🎮</span>
<p>请先连接服务器</p>
</div>
</div>
</div>
<!-- Host Page -->
<div class="page" id="page-host">
<h2 class="page-title">创建房间</h2>
<p class="page-desc">将你的本地Minecraft服务器共享给好友</p>
<div class="card">
<div class="form-row">
<div class="form-group">
<label>房间名称</label>
<input type="text" id="host-name" class="input" placeholder="我的联机房间">
</div>
<div class="form-group">
<label>本地MC端口</label>
<input type="number" id="host-port" class="input" value="25565">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>游戏版本</label>
<input type="text" id="host-version" class="input" value="1.20.4">
</div>
<div class="form-group">
<label>版本类型</label>
<select id="host-edition" class="input">
<option value="java">Java版</option>
<option value="bedrock">基岩版</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>最大人数</label>
<input type="number" id="host-maxplayers" class="input" value="10" min="2" max="100">
</div>
<div class="form-group">
<label>房间密码（可选）</label>
<input type="password" id="host-password" class="input" placeholder="留空则不设密码">
</div>
</div>
<button class="btn btn-primary" id="btn-host">创建房间</button>
<div class="msg" id="host-msg"></div>
<div class="room-result hidden" id="host-result">
<div class="result-title">房间创建成功！</div>
<div class="result-room-id" id="host-room-id"></div>
<p class="result-hint">将此房间号发给好友，他们可以通过「加入房间」连接</p>
<button class="btn btn-secondary" id="btn-copy-room">复制房间号</button>
</div>
</div>
</div>
<!-- Join Page -->
<div class="page" id="page-join">
<h2 class="page-title">加入房间</h2>
<p class="page-desc">输入房间号加入好友的联机房间</p>
<div class="card">
<div class="form-group">
<label>房间号</label>
<input type="text" id="join-room-id" class="input" placeholder="输入房间号">
</div>
<div class="form-row">
<div class="form-group">
<label>中继服务器地址</label>
<input type="text" id="join-host" class="input" placeholder="relay.funmc.cn" value="localhost">
</div>
<div class="form-group">
<label>中继端口</label>
<input type="number" id="join-port" class="input" value="25565">
</div>
</div>
<div class="form-group">
<label>本地监听端口</label>
<input type="number" id="join-local-port" class="input" value="25566">
<span class="form-hint">在Minecraft中添加服务器地址 127.0.0.1:25566 即可连接</span>
</div>
<button class="btn btn-primary" id="btn-join">加入房间</button>
<button class="btn btn-danger hidden" id="btn-leave">断开连接</button>
<div class="msg" id="join-msg"></div>
<div class="join-status hidden" id="join-status">
<div class="status-card connected">
<span class="status-emoji">✅</span>
<div>
<div class="status-title">已连接</div>
<div class="status-detail">在Minecraft中添加服务器: <strong>127.0.0.1:<span id="join-active-port">25566</span></strong></div>
</div>
</div>
</div>
</div>
</div>
<!-- About Page -->
<div class="page" id="page-about">
<h2 class="page-title">关于 FunConnect</h2>
<div class="card">
<div class="about-header">
<div class="about-logo">F</div>
<div>
<h3>FunConnect v1.0.0</h3>
<p>Minecraft 联机客户端</p>
</div>
</div>
<div class="about-section">
<h4>使用说明</h4>
<div class="steps">
<div class="step">
<span class="step-num">1</span>
<div>
<strong>连接服务器</strong>
<p>输入FunMC中继服务器地址并连接</p>
</div>
</div>
<div class="step">
<span class="step-num">2</span>
<div>
<strong>创建或加入房间</strong>
<p>房主创建房间后分享房间号，玩家输入房间号加入</p>
</div>
</div>
<div class="step">
<span class="step-num">3</span>
<div>
<strong>开始游戏</strong>
<p>在Minecraft中添加服务器地址 127.0.0.1:端口 即可联机</p>
</div>
</div>
</div>
</div>
<div class="about-section">
<h4>技术信息</h4>
<p>基于 Electron + Node.js TCP 中继技术</p>
<p>支持 Java版 和 基岩版 Minecraft</p>
</div>
</div>
</div>
</main>
</div>
<script src="app.js"></script>
</body>
</html>

436
client/renderer/style.css Normal file
View File

@@ -0,0 +1,436 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-dark: #1a1a2e;
--bg-darker: #16213e;
--bg-accent: #0f3460;
--green: #4CAF50;
--green-hover: #45a049;
--red: #e94560;
--gold: #FFD700;
--blue: #4fc3f7;
--purple: #b388ff;
--text: #e0e0e0;
--text-dim: #8a8a9a;
--border: rgba(15, 52, 96, 0.4);
--radius: 10px;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
background: var(--bg-dark);
color: var(--text);
overflow: hidden;
height: 100vh;
user-select: none;
}
/* Titlebar */
.titlebar {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
background: #111128;
border-bottom: 1px solid var(--border);
-webkit-app-region: drag;
padding: 0 8px;
}
.titlebar-drag {
display: flex;
align-items: center;
gap: 8px;
}
.titlebar-icon { font-size: 14px; }
.titlebar-title { font-size: 12px; color: var(--text-dim); }
.titlebar-controls {
display: flex;
-webkit-app-region: no-drag;
}
.tb-btn {
background: none;
border: none;
color: var(--text-dim);
width: 36px;
height: 36px;
font-size: 12px;
cursor: pointer;
transition: background 0.15s;
}
.tb-btn:hover { background: rgba(255,255,255,0.1); }
.tb-close:hover { background: var(--red); color: #fff; }
/* App Layout */
.app {
display: flex;
height: calc(100vh - 36px);
}
/* Sidebar */
.sidebar {
width: 220px;
background: var(--bg-darker);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 16px;
border-bottom: 1px solid var(--border);
}
.logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--green), #2e7d32);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Press Start 2P', monospace;
font-size: 16px;
color: #fff;
}
.logo-name {
font-weight: 700;
font-size: 14px;
color: var(--green);
display: block;
}
.logo-sub {
font-size: 10px;
color: var(--text-dim);
display: block;
margin-top: 2px;
}
.sidebar-status {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-size: 12px;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.offline { background: var(--red); }
.sidebar-nav {
list-style: none;
padding: 12px 8px;
flex: 1;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
margin-bottom: 2px;
}
.nav-item:hover {
background: rgba(15, 52, 96, 0.4);
color: var(--text);
}
.nav-item.active {
background: rgba(76, 175, 80, 0.15);
color: var(--green);
border: 1px solid rgba(76, 175, 80, 0.3);
}
.nav-icon { font-size: 16px; }
.sidebar-footer {
padding: 12px;
text-align: center;
font-size: 10px;
color: var(--text-dim);
border-top: 1px solid var(--border);
}
/* Content */
.content {
flex: 1;
overflow-y: auto;
padding: 28px 32px;
}
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: var(--bg-accent); border-radius: 3px; }
/* Pages */
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.page-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
/* Card */
.card {
background: var(--bg-darker);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
/* Form */
.form-group { margin-bottom: 16px; }
.form-group label {
display: block;
font-size: 12px;
color: var(--text-dim);
margin-bottom: 6px;
font-weight: 500;
}
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
.form-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: block; }
.input {
width: 100%;
padding: 10px 14px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.input:focus { border-color: var(--green); }
.input::placeholder { color: #555; }
select.input { cursor: pointer; }
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-hover); }
.btn-secondary { background: var(--bg-accent); color: var(--text); }
.btn-secondary:hover { background: #1a4a7a; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #d63050; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Messages */
.msg {
margin-top: 12px;
font-size: 13px;
min-height: 20px;
}
.msg.error { color: var(--red); }
.msg.success { color: var(--green); }
/* Server Info */
.server-info { margin-top: 20px; }
.server-info h3 {
font-size: 14px;
margin-bottom: 12px;
color: var(--green);
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.info-item {
background: var(--bg-dark);
border-radius: 8px;
padding: 10px 14px;
}
.info-item .label {
font-size: 11px;
color: var(--text-dim);
margin-bottom: 4px;
}
.info-item .value {
font-size: 14px;
font-weight: 600;
}
/* Rooms Grid */
.rooms-grid { display: flex; flex-direction: column; gap: 12px; }
.room-card {
background: var(--bg-darker);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color 0.2s;
}
.room-card:hover { border-color: rgba(76, 175, 80, 0.4); }
.room-left { display: flex; align-items: center; gap: 14px; }
.room-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(76, 175, 80, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.room-name { font-weight: 600; font-size: 14px; }
.room-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.room-right { display: flex; align-items: center; gap: 10px; }
.room-players {
font-size: 12px;
color: var(--blue);
background: rgba(79, 195, 247, 0.1);
padding: 4px 10px;
border-radius: 20px;
}
.room-version {
font-size: 12px;
color: var(--purple);
background: rgba(179, 136, 255, 0.1);
padding: 4px 10px;
border-radius: 20px;
}
.room-btn-join {
padding: 6px 14px;
background: var(--green);
border: none;
border-radius: 6px;
color: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.room-btn-join:hover { background: var(--green-hover); }
/* Empty State */
.empty-state {
text-align: center;
padding: 48px 0;
color: var(--text-dim);
}
.empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
/* Room Result */
.room-result {
margin-top: 20px;
background: var(--bg-dark);
border-radius: var(--radius);
padding: 24px;
text-align: center;
}
.result-title { font-size: 18px; font-weight: 700; color: var(--green); margin-bottom: 12px; }
.result-room-id {
font-family: 'Press Start 2P', monospace;
font-size: 22px;
color: var(--gold);
letter-spacing: 2px;
margin: 16px 0;
}
.result-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
/* Join Status */
.join-status { margin-top: 16px; }
.status-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
border-radius: var(--radius);
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.3);
}
.status-emoji { font-size: 28px; }
.status-title { font-weight: 600; font-size: 14px; color: var(--green); }
.status-detail { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.status-detail strong { color: var(--gold); }
/* About */
.about-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.about-logo {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--green), #2e7d32);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Press Start 2P', monospace;
font-size: 22px;
color: #fff;
}
.about-header h3 { font-size: 18px; }
.about-header p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.about-section { margin-top: 20px; }
.about-section h4 { font-size: 14px; margin-bottom: 12px; color: var(--green); }
.about-section p { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.steps { display: flex; flex-direction: column; gap: 12px; }
.step {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--bg-dark);
border-radius: 8px;
padding: 14px;
}
.step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(76, 175, 80, 0.2);
color: var(--green);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step strong { font-size: 13px; display: block; margin-bottom: 3px; }
.step p { font-size: 12px; color: var(--text-dim); }
/* Utility */
.hidden { display: none !important; }
/* Loading spinner */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }