179 lines
7.8 KiB
HTML
179 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>游戏 - 战锤40K行星总督</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
</head>
|
||
<body class="game-page">
|
||
<!-- 开始界面 -->
|
||
<div class="start-screen">
|
||
<h1 class="game-title">战锤40K行星总督</h1>
|
||
<p class="governor-name">总督: {{ current_user }}</p>
|
||
<button class="start-button">开始统治</button>
|
||
<div class="menu-links">
|
||
<a href="{{ url_for('index') }}" class="menu-link">返回主页</a>
|
||
<a href="{{ url_for('achievements_page') }}" class="menu-link">成就</a>
|
||
<a href="{{ url_for('custom_cards') }}" class="menu-link">自制卡牌</a>
|
||
<a href="{{ url_for('logout') }}" class="menu-link">登出</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏主界面 -->
|
||
<div class="game-container">
|
||
<!-- 公告横幅 -->
|
||
<div class="announcement-banner">
|
||
<div class="announcement-content">
|
||
<span class="announcement-icon">⚠️</span>
|
||
<span class="announcement-text">公告：自己起的名字自己记住啊喂！别注册新号了！</span>
|
||
<button class="announcement-close">×</button>
|
||
</div>
|
||
</div>
|
||
<!-- 上层：五个图标 -->
|
||
<div class="top-section">
|
||
<div class="status-icon">
|
||
<div class="icon" id="loyalty-icon">🦅</div>
|
||
<div class="status-bar">
|
||
<div class="status-fill" id="loyalty-bar"></div>
|
||
</div>
|
||
<div class="status-label">帝国忠诚度</div>
|
||
</div>
|
||
<div class="status-icon">
|
||
<div class="icon" id="chaos-icon">🌀</div>
|
||
<div class="status-bar">
|
||
<div class="status-fill" id="chaos-bar"></div>
|
||
</div>
|
||
<div class="status-label">混沌侵染</div>
|
||
</div>
|
||
<div class="status-icon">
|
||
<div class="icon" id="population-icon">👥</div>
|
||
<div class="status-bar">
|
||
<div class="status-fill" id="population-bar"></div>
|
||
</div>
|
||
<div class="status-label">民众控制</div>
|
||
</div>
|
||
<div class="status-icon">
|
||
<div class="icon" id="military-icon">🔫</div>
|
||
<div class="status-bar">
|
||
<div class="status-fill" id="military-bar"></div>
|
||
</div>
|
||
<div class="status-label">军事力量</div>
|
||
</div>
|
||
<div class="status-icon">
|
||
<div class="icon" id="resources-icon">⚙️</div>
|
||
<div class="status-bar">
|
||
<div class="status-fill" id="resources-bar"></div>
|
||
</div>
|
||
<div class="status-label">资源储备</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中层：对话区域 -->
|
||
<div class="dialogue-area" id="dialogue-area">
|
||
<div class="speech-bubble" id="speech-bubble"></div>
|
||
</div>
|
||
|
||
<!-- 中层：卡片区域 -->
|
||
<div class="middle-section">
|
||
<div class="card-container" id="card-container"></div>
|
||
</div>
|
||
|
||
<!-- 下层：信息区域 -->
|
||
<div class="bottom-section">
|
||
<div class="governor-info">
|
||
<div class="governor-name">总督 <span id="player-name">{{ current_user }}</span></div>
|
||
<div class="reign-time">统治时间: <span id="reign-years">0</span>年</div>
|
||
</div>
|
||
<div class="right-info">
|
||
<div class="year">帝国历 <span id="current-year">41,000</span>年</div>
|
||
<div class="active-statuses" id="active-statuses">
|
||
<!-- 状态效果图标将在此动态添加 -->
|
||
</div>
|
||
<div class="status-effects" id="status-effects">
|
||
<!-- 状态效果图标将在此动态添加 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 游戏结束对话框 -->
|
||
<div class="game-over-dialog" id="game-over-dialog">
|
||
<div class="dialog-content">
|
||
<h2>您的统治结束了!</h2>
|
||
<p id="game-over-reason"></p>
|
||
<p>您统治了 <span id="final-years">0</span> 年</p>
|
||
<button id="restart-button">重新开始</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态详情对话框 -->
|
||
<div class="status-details-dialog" id="status-details-dialog">
|
||
<div class="dialog-content">
|
||
<div class="dialog-header">
|
||
<h2><span id="status-details-icon"></span> <span id="status-details-name"></span></h2>
|
||
<button class="close-button" id="close-status-details">×</button>
|
||
</div>
|
||
<div class="dialog-body">
|
||
<p id="status-details-description"></p>
|
||
<div id="status-details-effects"></div>
|
||
<p id="status-details-duration"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开发者工具对话框 (仅在总督名为"1"时显示) -->
|
||
<div class="dev-tools-dialog" id="dev-tools-dialog">
|
||
<div class="dialog-content">
|
||
<div class="dialog-header">
|
||
<h2>开发者工具</h2>
|
||
<button class="close-button" id="close-dev-tools">×</button>
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div class="tool-section">
|
||
<h3>事件控制</h3>
|
||
<select id="event-selector">
|
||
<option value="">选择事件...</option>
|
||
<!-- 事件选项将动态添加 -->
|
||
</select>
|
||
<button id="trigger-event-btn">立即触发选中事件</button>
|
||
</div>
|
||
<div class="tool-section">
|
||
<h3>状态控制</h3>
|
||
<div class="tool-row">
|
||
<select id="status-selector">
|
||
<option value="">选择状态...</option>
|
||
<!-- 状态选项将动态添加 -->
|
||
</select>
|
||
<button id="add-status-btn">添加状态</button>
|
||
<button id="remove-status-btn">移除状态</button>
|
||
</div>
|
||
</div>
|
||
<div class="tool-section">
|
||
<h3>属性调整</h3>
|
||
<div class="tool-row">
|
||
<select id="stat-selector">
|
||
<option value="loyalty">帝国忠诚度</option>
|
||
<option value="chaos">混沌侵染</option>
|
||
<option value="population">民众控制</option>
|
||
<option value="military">军事力量</option>
|
||
<option value="resources">资源储备</option>
|
||
</select>
|
||
<input type="number" id="stat-value" min="0" max="100" value="50">
|
||
<button id="set-stat-btn">设置属性值</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 开发者工具按钮 (仅在总督名为"1"时显示) -->
|
||
<div id="dev-tools-button" class="dev-tools-button">🔧</div>
|
||
|
||
<script>
|
||
// 游戏数据全局变量
|
||
const gameData = {{ game_data_json|safe }};
|
||
</script>
|
||
<script src="{{ url_for('static', filename='js/game.js') }}"></script>
|
||
</body>
|
||
</html> |