955 lines
64 KiB
HTML
955 lines
64 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<meta name="theme-color" content="#000000">
|
|
<title>Project SS - Live DB Edition</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Nanum+Myeongjo:wght@700;800&family=Black+Han+Sans&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--bg-dark: #1a1a1a; --paper: #e6dec5; --ink: #2b2b2b;
|
|
--red-seal: #c92a2a; --blue-seal: #1c4f82; --ui-border: #444;
|
|
--safe-top: env(safe-area-inset-top, 30px);
|
|
}
|
|
|
|
body {
|
|
background-color: #000; display: flex; justify-content: center; align-items: center;
|
|
height: 100dvh; margin: 0; padding: 0; font-family: 'Courier Prime', 'Nanum Myeongjo', serif;
|
|
overflow: hidden; color: #eee; user-select: none; touch-action: none;
|
|
}
|
|
|
|
.phone-wrapper {
|
|
width: 100%; height: 100%; max-width: 420px; background: #111;
|
|
position: relative; overflow: hidden; display: flex; flex-direction: column;
|
|
box-shadow: 0 0 50px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
@media (min-width: 450px) and (min-height: 700px) {
|
|
.phone-wrapper { height: 90vh; max-height: 850px; border-radius: 35px; border: 8px solid #333; }
|
|
}
|
|
|
|
.safe-area-top { width: 100%; height: var(--safe-top); min-height: 30px; background: #000; z-index: 1000; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #666; font-weight: bold; letter-spacing: 2px; }
|
|
.screen { flex: 1; display: none; flex-direction: column; position: relative; padding-top: 5px; box-sizing: border-box; overflow: hidden; }
|
|
.screen.active { display: flex; }
|
|
|
|
.reset-btn { position: absolute; top: env(safe-area-inset-top, 10px); right: 10px; background: #333; color: #aaa; font-size: 10px; padding: 4px 8px; border-radius: 4px; z-index: 2000; cursor: pointer; }
|
|
|
|
.loading-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; background: rgba(0,0,0,0.9); z-index: 5000; position: absolute; top: 0; left: 0; }
|
|
.loader-spinner { border: 4px solid rgba(255,255,255,0.1); width: 40px; height: 40px; border-radius: 50%; border-left-color: #c92a2a; animation: spin 1s linear infinite; margin-bottom: 20px; }
|
|
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
|
|
.desk-bg { background: #2d1b14; background-image: repeating-linear-gradient(45deg, #281812 25%, transparent 25%, transparent 75%, #281812 75%, #281812); background-size: 20px 20px; }
|
|
.status-dashboard { background: rgba(20, 20, 20, 0.95); border-bottom: 2px solid var(--ui-border); padding: 8px 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 6px; z-index: 30; }
|
|
.week-display { display: flex; justify-content: space-between; font-size: 11px; color: #fff; border-bottom: 1px solid #333; padding-bottom: 4px; font-weight: bold; }
|
|
.week-highlight { color: #fcd34d; }
|
|
.mandate-sticky { background: #fef3c7; color: #4b5563; padding: 4px 8px; font-size: 10px; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); margin-bottom: 2px; display: flex; justify-content: space-between; align-items: center; transform: rotate(-1deg); }
|
|
.mandate-title { font-weight: 800; color: #000; margin-right: 5px; }
|
|
.quest-progress { font-family: monospace; font-weight: bold; color: #c92a2a; }
|
|
|
|
.res-row { display: flex; justify-content: space-between; gap: 4px; }
|
|
.res-box { flex: 1; background: #333; border: 1px solid #555; border-radius: 4px; padding: 4px; display: flex; flex-direction: column; font-size: 9px; position: relative; justify-content: center; }
|
|
.res-val { font-weight: bold; font-family: monospace; font-size: 11px; margin-top: 2px; }
|
|
|
|
.gauge-row { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 2px; }
|
|
.stat-item { width: 32%; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; }
|
|
.stat-label { font-size: 9px; color: #888; margin-top: 4px; }
|
|
.trust-bar { width: 100%; height: 6px; background: #444; border-radius: 3px; overflow: hidden; }
|
|
.trust-fill { height: 100%; width: 80%; background: linear-gradient(90deg, #d4af37, #fcd34d); transition: width 0.3s; }
|
|
.entropy-clock { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #555; background: #222; position: relative; }
|
|
.clock-face { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#10b981 0deg 270deg, #ef4444 270deg 360deg); opacity: 0.4; }
|
|
.clock-hand { position: absolute; top: 50%; left: 50%; width: 45%; height: 2px; background: #fff; transform-origin: left center; transform: rotate(270deg); transition: transform 0.5s; }
|
|
.share-bars { width: 100%; display: flex; height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin-top: 5px; }
|
|
.share-segment { height: 100%; transition: width 0.3s; }
|
|
.share-donut { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; }
|
|
.donut-hole { width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; position: absolute; }
|
|
|
|
.desk-area { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; perspective: 1000px; background: #2d1b14; touch-action: none; overflow: hidden; }
|
|
|
|
.doc-card {
|
|
width: 80%; max-width: 300px; height: 60vh; max-height: 440px;
|
|
background: var(--paper); color: var(--ink); position: absolute;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.6); display: flex; flex-direction: column;
|
|
padding: 15px; border: 1px solid #cbb; cursor: grab; transform-origin: 50% 100%;
|
|
will-change: transform; z-index: 10; transition: border-color 0.2s;
|
|
}
|
|
.doc-card:active { cursor: grabbing; }
|
|
|
|
.folder-tab { position: absolute; top: -20px; left: 0; width: 80px; height: 20px; background: var(--red-seal); border-radius: 5px 5px 0 0; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
|
|
.warning-postit { position: absolute; top: -10px; right: -10px; background: #ef4444; color: white; padding: 4px 8px; font-size: 10px; font-weight: bold; transform: rotate(5deg); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 20; display: none; }
|
|
|
|
.card-header { border-bottom: 2px solid #555; padding-bottom: 8px; margin-bottom: 8px; }
|
|
.card-title { font-family: 'Black Han Sans', sans-serif; font-size: 1.1rem; line-height: 1.2; margin-bottom: 4px; }
|
|
.tag-badge { background: #333; color: #fff; font-size: 9px; padding: 2px 4px; border-radius: 4px; display: inline-block; font-weight: bold; margin-right: 2px; }
|
|
|
|
.card-body { font-size: 12px; line-height: 1.4; flex: 1; margin-top: 5px; overflow-y: auto; padding-right: 5px; }
|
|
.card-body::-webkit-scrollbar { width: 4px; }
|
|
.card-body::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
|
|
|
|
.flavor-text { margin-top: 10px; font-size: 10px; font-style: italic; color: #555; border-left: 3px solid #ccc; padding-left: 8px; margin-bottom: 30px; flex-shrink: 0; }
|
|
.faction-stamp { position: absolute; bottom: 10px; right: 10px; width: 60px; height: 60px; border: 3px solid var(--blue-seal); border-radius: 50%; color: var(--blue-seal); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 10px; opacity: 0.8; transform: rotate(-15deg); mix-blend-mode: multiply; text-align: center; }
|
|
|
|
.overlay-stamp { position: absolute; top: 30px; font-size: 22px; font-weight: 900; border: 4px solid; padding: 5px 15px; border-radius: 8px; text-transform: uppercase; opacity: 0; pointer-events: none; z-index: 50; transform: rotate(-15deg); }
|
|
.stamp-reject { right: 20px; color: #1c4f82; border-color: #1c4f82; transform: rotate(15deg); }
|
|
.stamp-approve { left: 20px; color: #c92a2a; border-color: #c92a2a; transform: rotate(-15deg); }
|
|
|
|
.lock-chain-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: none; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; z-index: 40; border: 3px solid #ef4444; box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.3); }
|
|
.lock-chain-overlay.active { display: flex; }
|
|
.chains { font-size: 40px; color: #ef4444; opacity: 0.2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
|
|
.lock-msg { position: absolute; bottom: 60px; background: #ef4444; color: #fff; padding: 5px 12px; font-weight: bold; font-size: 11px; border-radius: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); animation: bounce 2s infinite; text-align: center; transition: all 0.3s; }
|
|
.lock-msg.right { right: 20px; left: auto; }
|
|
.lock-msg.left { left: 20px; right: auto; }
|
|
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
|
|
|
|
.law-warning-popup { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); background: rgba(220, 38, 38, 0.95); color: #fff; padding: 10px 15px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.5); text-align: center; z-index: 100; opacity: 0; transition: opacity 0.2s; pointer-events: none; width: 80%; }
|
|
.law-warning-popup.visible { opacity: 1; }
|
|
.law-title { font-weight: 900; font-size: 13px; margin-bottom: 2px; text-transform: uppercase; }
|
|
.law-desc { font-size: 10px; }
|
|
|
|
.predict-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; display: none; justify-content: center; align-items: center; }
|
|
.predict-box { background: rgba(0,0,0,0.95); color: #fff; padding: 12px; border-radius: 8px; font-size: 11px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); border: 1px solid #555; width: 200px; text-align: center; }
|
|
.p-row { display: flex; justify-content: space-between; }
|
|
.p-up { color: #10b981; } .p-down { color: #ef4444; }
|
|
.desc-text { color: #aaa; font-size: 9px; margin-top: 2px; }
|
|
|
|
.menu-btn-group { position: absolute; bottom: 15px; left: 15px; right: 15px; display: flex; gap: 10px; z-index: 50; }
|
|
.menu-btn { flex: 1; background: #333; color: #ccc; border: 1px solid #555; padding: 10px; border-radius: 6px; font-size: 11px; display: flex; justify-content: center; gap: 5px; cursor: pointer; align-items: center; }
|
|
.modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: none; flex-direction: column; padding: 50px 20px 20px; }
|
|
.modal.active { display: flex; }
|
|
.close-btn { margin-top: auto; padding: 15px; background: #444; color: #fff; text-align: center; border-radius: 8px; cursor: pointer; font-weight: bold; }
|
|
.list-item { background: #222; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; color: #ccc; font-size: 11px; margin-bottom: 5px; flex-wrap: wrap; }
|
|
|
|
.dividend-tube { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 12px; height: 150px; background: rgba(0,0,0,0.5); border: 1px solid #555; border-radius: 6px; display: flex; flex-direction: column-reverse; padding: 2px; overflow: hidden; z-index: 5; }
|
|
.dividend-block { width: 100%; height: 8px; margin-top: 2px; border-radius: 2px; opacity: 0; animation: dropIn 0.3s forwards; }
|
|
@keyframes dropIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
|
|
|
.passive-toast { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: rgba(16, 185, 129, 0.9); color: white; padding: 8px 15px; border-radius: 20px; font-size: 10px; z-index: 200; box-shadow: 0 4px 10px rgba(0,0,0,0.3); pointer-events: none; opacity: 0; transition: opacity 0.5s; width: 80%; text-align: center; }
|
|
.passive-toast.active { opacity: 1; animation: floatUp 3s forwards; }
|
|
@keyframes floatUp { 0% { transform: translate(-50%, 0); opacity: 0; } 10% { transform: translate(-50%, -10px); opacity: 1; } 90% { transform: translate(-50%, -30px); opacity: 1; } 100% { transform: translate(-50%, -40px); opacity: 0; } }
|
|
|
|
/* Council Screen */
|
|
.council-bg { background: #111; background: radial-gradient(circle at 50% 30%, #1f1f1f 0%, #000 80%); justify-content: flex-start; padding: 15px; overflow-y: auto; }
|
|
.council-header { text-align: center; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 10px; width: 100%; flex-shrink: 0; }
|
|
.council-title { font-size: 20px; font-weight: 900; color: #fff; font-family: 'Black Han Sans'; }
|
|
.council-phase { display: none; width: 100%; height: 100%; flex-direction: column; }
|
|
.council-phase.active { display: flex; }
|
|
|
|
.agenda-announce { background: #eee; color: #000; padding: 15px; transform: rotate(-1deg); box-shadow: 0 10px 30px rgba(0,0,0,0.8); margin-bottom: 15px; position: relative; }
|
|
.stamp-mark { position: absolute; top: 10px; right: 10px; border: 3px solid #c92a2a; color: #c92a2a; font-weight: bold; padding: 4px; transform: rotate(15deg); opacity: 0.8; font-size: 10px; }
|
|
|
|
.vote-section { width: 100%; background: #222; padding: 12px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #444; }
|
|
.vote-title { font-size: 12px; font-weight: bold; color: #aaa; margin-bottom: 8px; text-align: center; }
|
|
|
|
.bill-card { display: flex; justify-content: space-between; align-items: center; background: #111; border: 1px solid #333; padding: 8px; margin-bottom: 5px; }
|
|
.bill-card.major { border-left: 4px solid #3b82f6; }
|
|
.bill-card.minor { border-left: 4px solid #ef4444; }
|
|
.bill-name { font-size: 11px; font-weight: bold; }
|
|
|
|
.vote-bar-container { height: 16px; background: #000; border-radius: 8px; overflow: hidden; display: flex; position: relative; margin-top: 8px; }
|
|
.vote-segment { height: 100%; transition: width 0.5s; }
|
|
.majority-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; z-index: 10; box-shadow: 0 0 5px #fff; }
|
|
|
|
.lobby-target-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; justify-content: center; }
|
|
.lobby-tag { background: #333; border: 1px solid #555; color: #ccc; padding: 4px 8px; border-radius: 15px; font-size: 9px; cursor: pointer; }
|
|
.lobby-tag:active { background: #555; }
|
|
.lobby-tag.active { border-color: #d4af37; color: #d4af37; }
|
|
|
|
.action-btn { margin-top: auto; width: 100%; background: #c92a2a; color: #fff; padding: 12px; font-weight: bold; border-radius: 8px; text-align: center; cursor: pointer; font-size: 13px; flex-shrink: 0; }
|
|
.action-btn:active { background: #991b1b; }
|
|
.action-btn.secondary { background: #10b981; margin-top: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="phone-wrapper">
|
|
<div id="loading-screen" class="loading-screen">
|
|
<div class="loader-spinner"></div>
|
|
<div class="text-sm font-bold text-white mb-1" id="loading-msg">데이터베이스 연동 중...</div>
|
|
<div class="text-[10px] text-gray-500">(Google Sheets 연결)</div>
|
|
</div>
|
|
|
|
<div class="safe-area-top">PROJECT SS</div>
|
|
<div class="reset-btn" onclick="initDB()">↻ RESTART</div>
|
|
|
|
<div id="desk" class="screen desk-bg">
|
|
<div id="passive-toast" class="passive-toast"></div>
|
|
|
|
<div class="status-dashboard">
|
|
<div class="week-display">
|
|
<span>제 <span id="week-num" class="week-highlight">1</span> 주</span>
|
|
<span>Day <span id="day-num" class="week-highlight">1</span>/5</span>
|
|
</div>
|
|
|
|
<div class="mandate-sticky">
|
|
<div><span class="text-xs text-gray-500">아젠다:</span> <span class="mandate-title" id="agenda-title">Loading...</span></div>
|
|
<div><span class="text-xs text-gray-500">퀘스트:</span> <span class="quest-progress" id="quest-status">0/0</span></div>
|
|
</div>
|
|
|
|
<!-- 4대 재화 (예산 제거 적용) -->
|
|
<div class="res-row">
|
|
<div class="res-box"><span class="text-[9px] text-gray-400 font-bold">🧬 데이터 (자원)</span><span class="res-val text-blue-300" id="val-anomaly">0</span></div>
|
|
<div class="res-box"><span class="text-[9px] text-gray-400 font-bold">👑 정치 자본</span><span class="res-val text-yellow-500" id="val-political">0</span></div>
|
|
</div>
|
|
|
|
<div class="gauge-row">
|
|
<div class="stat-item"><div class="trust-bar"><div class="trust-fill" id="bar-trust"></div></div><span class="stat-label">신임도 <span id="txt-trust">80%</span></span></div>
|
|
<div class="stat-item"><div class="entropy-clock"><div class="clock-face"></div><div class="clock-hand" id="hand-entropy"></div></div><span class="stat-label">종말시계</span></div>
|
|
<div class="stat-item" style="width: 35%;" onclick="openModal('faction-modal')"><div class="share-donut" id="donut-share"><div class="donut-hole"></div></div><span class="stat-label">성향(지분) <i class="fa-solid fa-circle-info text-[8px]"></i></span></div>
|
|
</div>
|
|
|
|
<div id="engine-hud" class="mt-2 text-[10px] bg-gray-800 p-2 w-full border border-gray-600 shadow-inner rounded" style="margin-top: 8px;">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<div class="font-bold text-gray-300"><i class="fa-solid fa-microchip text-yellow-500"></i> 누적 빌드업 태그</div>
|
|
<div id="hud-synergy-badge" class="text-gray-500 transition-colors duration-500"><i class="fa-solid fa-bolt"></i> 연쇄 없음</div>
|
|
</div>
|
|
<div id="hud-tags-container" class="flex flex-wrap gap-1 mt-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="desk-area">
|
|
<div class="doc-card" id="current-card" style="display:none;">
|
|
<div class="folder-tab" id="c-dept">부서</div>
|
|
<div id="c-conflict" class="absolute top-2 right-2 font-bold text-yellow-500 bg-gray-800 px-3 py-1 rounded shadow-md border border-yellow-700 hidden text-[11px] z-10" style="transform: rotate(2deg);"></div>
|
|
<div class="warning-postit" id="c-warning">경고</div>
|
|
<div class="lock-chain-overlay" id="lock-overlay"><i class="fa-solid fa-link chains"></i><div class="lock-msg" id="lock-overlay-msg"><span id="lock-type-text"></span><br><span id="lock-reason" class="text-yellow-300 text-[10px] mt-1 block"></span></div></div>
|
|
<div class="law-warning-popup" id="law-popup"><div class="law-title" id="law-popup-title"></div><div class="law-desc" id="law-popup-desc"></div></div>
|
|
|
|
<div class="card-header">
|
|
<div class="card-title" id="c-title">Title</div>
|
|
<div class="flex justify-between items-center text-[9px] text-gray-600">
|
|
<span id="c-sender">Sender</span>
|
|
<div id="c-tags" class="flex gap-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body" id="c-body">Body</div>
|
|
<div class="flavor-text" id="c-flavor">Flavor</div>
|
|
<div class="faction-stamp" id="c-faction">Faction</div>
|
|
|
|
<div class="predict-overlay" id="predict-overlay">
|
|
<div class="predict-box">
|
|
<div id="p-header" class="font-bold border-b border-gray-600 mb-2 pb-1 text-center"></div>
|
|
<div class="desc-text mb-2" id="p-desc"></div>
|
|
<div class="p-row">데이터 획득: <span id="p-anomaly" class="p-up"></span></div>
|
|
<div class="p-row">정치 자본: <span id="p-political" class="p-up"></span></div>
|
|
<div class="p-row">엔트로피: <span id="p-entropy"></span></div>
|
|
<div class="p-row mt-1">신임도: <span id="p-trust"></span></div>
|
|
<hr class="border-gray-600 my-1">
|
|
<div class="text-[9px] font-bold text-gray-300">획득 태그 (빌드업):</div>
|
|
<div id="p-tag-gain" class="text-[10px] font-bold text-yellow-400 mt-1 mb-2 bg-gray-800 rounded px-1 py-1"></div>
|
|
<div class="text-[9px] font-bold text-gray-300">성향 태그 (우호도) 변화:</div>
|
|
<div id="p-faction-change" class="text-[9px] mt-1 bg-gray-800 rounded px-1 py-1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="overlay-stamp stamp-approve" id="stamp-approve">승인</div>
|
|
<div class="overlay-stamp stamp-reject" id="stamp-reject">거절</div>
|
|
</div>
|
|
|
|
<div id="empty-state" class="hidden text-center text-gray-500 text-xs absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"><i class="fa-solid fa-check-double text-4xl mb-2"></i><br>오늘의 업무 완료</div>
|
|
<div class="dividend-tube" id="dividend-tube"></div>
|
|
</div>
|
|
|
|
<div class="menu-btn-group">
|
|
<div class="menu-btn" onclick="openModal('mystery-modal')"><i class="fa-solid fa-magnifying-glass"></i> 미스터리</div>
|
|
<div class="menu-btn" onclick="openModal('asset-modal')" style="flex:0.5"><i class="fa-solid fa-box-open"></i> 자산(<span id="asset-count">0</span>)</div>
|
|
<div class="menu-btn" onclick="openModal('law-modal')" style="flex:0.5"><i class="fa-solid fa-gavel"></i> 법안</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Council Screen -->
|
|
<div id="council" class="screen council-bg">
|
|
<div class="council-header">
|
|
<div class="text-[10px] text-gray-500">WEEKLY COUNCIL</div>
|
|
<div class="council-title">제 <span id="c-week-num">1</span>주차 입법 회의</div>
|
|
</div>
|
|
|
|
<div id="council-phase-1" class="council-phase active">
|
|
<div class="flex-1 flex flex-col justify-center items-center py-2">
|
|
<div class="text-gray-400 text-[10px] mb-1">제1주주 통치 선포 (동맹 파벌)</div>
|
|
<div class="text-xl font-black text-white mb-4" id="ruling-faction">Loading</div>
|
|
<div class="agenda-announce w-full"><div class="stamp-mark">CONFIRMED</div><div class="text-[10px] text-gray-600 font-bold">금주의 아젠다</div><div class="text-base font-black mb-1" id="next-agenda-title"></div><div class="text-[10px] text-gray-500" id="next-agenda-desc"></div></div>
|
|
<div class="agenda-announce w-full bg-yellow-100"><div class="text-[10px] text-yellow-800 font-bold">금주의 퀘스트</div><div class="text-base font-black mb-1" id="next-quest-title"></div><div class="flex justify-between text-[9px] text-gray-600 mt-2"><span>보상: <span id="next-quest-reward"></span></span><span>실패: <span id="next-quest-penalty"></span></span></div></div>
|
|
</div>
|
|
<div class="action-btn secondary" onclick="startVotePhase()">입법 회의 시작</div>
|
|
</div>
|
|
|
|
<div id="council-phase-2" class="council-phase">
|
|
<div class="flex-1 w-full">
|
|
<div id="sabotage-alert" class="hidden mb-2 bg-red-900 border border-red-500 p-2 rounded text-center shadow-[0_0_10px_rgba(239,68,68,0.5)] animate-pulse">
|
|
<div class="text-red-200 text-[10px] font-bold">⚠️ 표적 견제 발의</div>
|
|
<div class="text-white text-xs font-black mt-1">적대 파벌이 국장의 [<span id="sabotage-target-tag" class="text-yellow-400"></span>] 엔진을 견제합니다!</div>
|
|
</div>
|
|
|
|
<div class="vote-section border-red-500 border"><div class="vote-title text-red-500"><i class="fa-solid fa-scale-balanced"></i> 입법 전쟁</div>
|
|
<div class="bill-card major"><div class="flex-1"><div class="flex justify-between"><span class="text-blue-400 text-[9px] font-bold">여당안 (동맹 파벌 제안)</span><span class="text-[9px]" id="bill-a-faction"></span></div><div class="bill-name" id="bill-a-name"></div><div class="bill-desc text-[9px] italic text-gray-400 mt-1" id="bill-a-flavor"></div></div></div>
|
|
<div class="text-center text-[10px] my-1 text-gray-500 font-bold">VS</div>
|
|
<div class="bill-card minor"><div class="flex-1"><div class="flex justify-between"><span class="text-red-400 text-[9px] font-bold">야당안 (적대 파벌 제안)</span><span class="text-[9px]" id="bill-b-faction"></span></div><div class="bill-name" id="bill-b-name"></div><div class="bill-desc text-[9px] italic text-gray-400 mt-1" id="bill-b-flavor"></div></div></div>
|
|
<div class="mt-3"><div class="flex justify-between text-[9px] font-bold mb-1"><span class="text-blue-400">A 지지 (<span id="vote-a-val">50</span>%)</span><span class="text-red-400">B 지지 (<span id="vote-b-val">50</span>%)</span></div><div class="vote-bar-container"><div class="majority-line"></div><div class="vote-segment bg-blue-600" id="vote-a" style="width:50%"></div><div class="vote-segment bg-red-600" id="vote-b" style="width:50%"></div></div></div>
|
|
<div class="grid grid-cols-2 gap-2 mt-3 text-[8px]"><div><div class="text-blue-400 border-b border-blue-900 mb-1">A 찬성 파벌</div><div id="list-support-a" class="text-gray-400 space-y-1"></div></div><div><div class="text-red-400 border-b border-red-900 mb-1">B 찬성 파벌</div><div id="list-support-b" class="text-gray-400 space-y-1"></div></div></div>
|
|
<div class="mt-3 pt-3 border-t border-gray-700"><div class="text-[9px] text-yellow-500 mb-1 font-bold">소수 정당 로비 (정치 자본 -10)</div><div class="lobby-target-list" id="lobby-targets"></div></div>
|
|
<div class="mt-2 pt-2 border-t border-gray-700"><div class="text-[9px] text-red-500 mb-1 font-bold">블랙리스트 탄압 (무료, 영구적 파국)</div><div class="lobby-target-list" id="blacklist-targets"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="action-btn" onclick="endCouncil()">결과 확정 및 다음 주 시작</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div class="modal" id="mystery-modal">
|
|
<div class="flex justify-between items-center border-b-2 border-gray-600 pb-3 mb-3"><h2 class="text-white font-bold text-base">미스터리 보드</h2><div class="close-btn p-2 text-[10px]" onclick="closeModal('mystery-modal')">X</div></div>
|
|
<div class="text-[10px] text-gray-400 mb-3">누적된 빌드업 태그와 데이터를 소모하여 미스터리를 해결하고 강력한 영구 자산을 획득하세요. 방치된 미스터리는 매 턴 지속 페널티를 유발할 수 있습니다.</div>
|
|
<div class="flex-1 overflow-y-auto space-y-2" id="mystery-list"></div>
|
|
</div>
|
|
|
|
<div class="modal" id="asset-modal">
|
|
<div class="flex justify-between items-center border-b-2 border-gray-600 pb-3 mb-3"><h2 class="text-white font-bold text-base">보유 자산 (엔진)</h2><div class="close-btn p-2 text-[10px]" onclick="closeModal('asset-modal')">X</div></div>
|
|
<div class="flex-1 overflow-y-auto" id="asset-list"></div>
|
|
</div>
|
|
|
|
<div class="modal" id="law-modal">
|
|
<div class="flex justify-between items-center border-b-2 border-gray-600 pb-3 mb-3"><h2 class="text-white font-bold text-base">법안 및 규칙</h2><div class="close-btn p-2 text-[10px]" onclick="closeModal('law-modal')">X</div></div>
|
|
<div class="space-y-3 text-xs text-gray-300 overflow-y-auto">
|
|
<div><span class="text-yellow-500 font-bold block">현재 아젠다</span><span id="modal-agenda" class="font-bold text-white"></span><p id="modal-agenda-desc" class="text-[10px] text-gray-400 mt-1"></p></div>
|
|
<div><span class="text-red-500 font-bold block">현재 퀘스트</span><span id="modal-quest" class="font-bold text-white"></span><div class="text-[10px] mt-1 grid grid-cols-2 gap-2"><div class="bg-gray-800 p-2 rounded"><span class="text-green-400">보상:</span> <span id="quest-reward"></span></div><div class="bg-gray-800 p-2 rounded"><span class="text-red-400">패널티:</span> <span id="quest-penalty"></span></div></div></div>
|
|
<div><span class="text-blue-400 font-bold block">발효된 법안</span><ul id="modal-laws" class="list-disc pl-4 text-[10px] mt-1 space-y-1 text-gray-400"></ul></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="faction-modal">
|
|
<div class="flex justify-between items-center border-b-2 border-gray-600 pb-3 mb-3"><h2 class="text-white font-bold text-base">파벌 정보</h2><div class="close-btn p-2 text-[10px]" onclick="closeModal('faction-modal')">X</div></div>
|
|
<div class="flex-1 overflow-y-auto" id="faction-list-detail"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const SHEET_URLS = {
|
|
factions: "./data/factions.csv", agendas: "./data/agendas.csv", quests: "./data/quests.csv",
|
|
bills: "./data/bills.csv", assets: "./data/assets.csv", scenarios: "./data/scenarios.csv",
|
|
mysteries: "./data/mysteries.csv"
|
|
};
|
|
|
|
const EFFECT_NAMES = { anomaly: "데이터", political: "정치 자본", trust: "신임도", entropy: "엔트로피" };
|
|
|
|
let DB_FACTIONS = []; let DB_AGENDAS = []; let DB_QUESTS = []; let DB_BILLS = []; let DB_ASSETS = []; let DB_SCENARIOS = []; let DB_MYSTERIES = [];
|
|
|
|
let state = {
|
|
week: 1, day: 1, anomaly: 20, political: 20, trust: 80, entropy: 10,
|
|
assets: [], builtTags: {}, activeLaws: [], activeMysteries: [],
|
|
currentAgenda: null, currentQuest: null, questProgress: 0, currentCard: null, lockState: "none",
|
|
council: { billA: null, billB: null, votesA: 50, votesB: 50, supportersA: [], supportersB: [] }
|
|
};
|
|
|
|
function normalizeKey(str) { return String(str).replace(/^\uFEFF/, '').trim().toLowerCase(); }
|
|
function normalizeValue(val) { return typeof val === 'string' ? val.trim() : val; }
|
|
|
|
function parseCSV(url) {
|
|
return new Promise((resolve) => {
|
|
if (!url || url.trim() === "") { resolve(null); return; }
|
|
Papa.parse(url, {
|
|
header: true, skipEmptyLines: true, download: true,
|
|
complete: function(results) {
|
|
resolve(results.data.map(row => {
|
|
let r={};
|
|
for(let k in row) r[normalizeKey(k)] = normalizeValue(row[k]);
|
|
return r;
|
|
}));
|
|
},
|
|
error: function() { resolve(null); }
|
|
});
|
|
});
|
|
}
|
|
|
|
async function initDB() {
|
|
document.getElementById('loading-screen').style.display = 'flex';
|
|
try {
|
|
const [factions, agendas, quests, bills, assets, scenarios, mysteries] = await Promise.all([
|
|
parseCSV(SHEET_URLS.factions), parseCSV(SHEET_URLS.agendas), parseCSV(SHEET_URLS.quests),
|
|
parseCSV(SHEET_URLS.bills), parseCSV(SHEET_URLS.assets), parseCSV(SHEET_URLS.scenarios),
|
|
parseCSV(SHEET_URLS.mysteries)
|
|
]);
|
|
|
|
if (factions && factions.length > 0) {
|
|
DB_FACTIONS = factions.map(f => ({
|
|
...f,
|
|
share: parseInt(f.share)||10,
|
|
like_tag: f.love_tag || f.like_tag || '',
|
|
hate_tag: f.hate_tag || ''
|
|
}));
|
|
}
|
|
if (agendas && agendas.length > 0) DB_AGENDAS = agendas;
|
|
if (quests && quests.length > 0) DB_QUESTS = quests;
|
|
if (bills && bills.length > 0) {
|
|
DB_BILLS = bills.map(b => {
|
|
let is_buff = b.type === 'lock_reject' || b.type === 'buff_tag';
|
|
return {
|
|
...b,
|
|
is_buff: is_buff,
|
|
target_tag: b.tag,
|
|
buff_tag: is_buff ? b.tag : null,
|
|
nullify_tag: !is_buff ? b.tag : null
|
|
};
|
|
});
|
|
}
|
|
if (assets && assets.length > 0) {
|
|
DB_ASSETS = assets.map(a => ({
|
|
...a,
|
|
tags: a.tags ? a.tags.split(',').map(t=>t.trim()) : [],
|
|
passive_effect: { anomaly: parseInt(a.passive_eff_val)||0 }, // 간단한 호환성 매핑
|
|
holding_risk: { entropy: parseInt(a.risk_eff_val)||0 }
|
|
}));
|
|
}
|
|
if (scenarios && scenarios.length > 0) {
|
|
DB_SCENARIOS = scenarios.map(s => ({
|
|
...s,
|
|
act: parseInt(s.act)||1,
|
|
tags: s.tags ? s.tags.split(',').map(t=>t.trim().replace(/^"|"$/g, '')) : [],
|
|
yes_a: parseInt(s.cost)||0, // cost를 데이터(anomaly) 획득/소모로 매핑
|
|
no_p: parseInt(s.conflict)||0, // conflict를 정치 자본 획득/소모로 매핑
|
|
yes_e: parseInt(s.yes_e)||0,
|
|
no_e: parseInt(s.no_e)||0,
|
|
}));
|
|
}
|
|
if (mysteries && mysteries.length > 0) {
|
|
DB_MYSTERIES = mysteries.map(m => {
|
|
let req_tags = {};
|
|
if(m.req_tags) m.req_tags.split(',').forEach(rt => { let parts = rt.split(':'); if(parts.length===2) req_tags[parts[0].trim()] = parseInt(parts[1]); });
|
|
return { ...m, req_tags: req_tags, cost_anomaly: parseInt(m.cost_anomaly)||0, penalty_entropy: parseInt(m.penalty_entropy)||0 };
|
|
});
|
|
}
|
|
} catch(e) {
|
|
console.error("CSV 파싱 에러:", e);
|
|
}
|
|
setTimeout(() => { document.getElementById('loading-screen').style.display = 'none'; startGame(); }, 500);
|
|
}
|
|
|
|
function startGame() {
|
|
state = { week: 1, day: 1, anomaly: 20, political: 20, trust: 80, entropy: 10, assets: [], builtTags: {}, activeLaws: [], activeMysteries: [...DB_MYSTERIES], questProgress: 0, lockState: "none" };
|
|
document.getElementById('desk').style.display = 'flex'; document.getElementById('council').style.display = 'none';
|
|
setupWeek();
|
|
}
|
|
|
|
function setupWeek() {
|
|
state.day = 1; state.questProgress = 0;
|
|
state.currentAgenda = DB_AGENDAS[Math.floor(Math.random()*DB_AGENDAS.length)] || DB_AGENDAS[0];
|
|
state.currentQuest = DB_QUESTS[Math.floor(Math.random()*DB_QUESTS.length)] || DB_QUESTS[0];
|
|
updateHUD(); nextDay();
|
|
}
|
|
|
|
function getAffinity(f) {
|
|
if (f.is_blacklisted) return { level: 5, name: "🔥 파국", color: "#ef4444" };
|
|
if (f.share >= 40) return { level: 1, name: "👑 핵심 동맹", color: "#3b82f6" };
|
|
if (f.share >= 20) return { level: 2, name: "🤝 우호", color: "#10b981" };
|
|
if (f.share >= 10) return { level: 3, name: "⚖️ 중립", color: "#9ca3af" };
|
|
return { level: 4, name: "⚔️ 적대", color: "#f59e0b" };
|
|
}
|
|
|
|
function nextDay() {
|
|
if (state.day > 5) { startCouncil(); return; }
|
|
if (state.entropy >= 100) { alert("종말 시계 100% 도달. 통제에 실패했습니다."); initDB(); return; }
|
|
|
|
applyAssetPassives();
|
|
state.activeMysteries.forEach(m => { if(m.penalty_entropy) state.entropy += m.penalty_entropy; });
|
|
|
|
let panicLevel = 1; let panicMsg = "";
|
|
if (state.entropy >= 81) panicLevel = 5;
|
|
else if (state.entropy >= 61) panicLevel = 4;
|
|
else if (state.entropy >= 41) panicLevel = 3;
|
|
else if (state.entropy >= 21) panicLevel = 2;
|
|
|
|
if (panicLevel === 2) { addStat('trust', -1); panicMsg = "[동요] 시민 불안 (신임도 -1)"; }
|
|
else if (panicLevel >= 3) { addStat('political', -1); addStat('trust', -2); panicMsg = "[혼란] 시스템 마비 (자본/신임도 하락)"; }
|
|
|
|
let terrorChance = panicLevel >= 4 ? 0.6 : 0.3;
|
|
let sabotageMsg = [];
|
|
if (panicMsg) sabotageMsg.push(panicMsg);
|
|
|
|
DB_FACTIONS.forEach(f => {
|
|
if(getAffinity(f).level === 5 && Math.random() < terrorChance) {
|
|
state.entropy += 5; state.trust -= 5;
|
|
sabotageMsg.push(`[파국] ${f.name} 테러!`);
|
|
}
|
|
});
|
|
if (sabotageMsg.length > 0) {
|
|
const toast = document.getElementById('passive-toast');
|
|
toast.innerText = sabotageMsg.join(' / ');
|
|
toast.className = 'passive-toast bg-red-600'; void toast.offsetWidth; toast.classList.add('active');
|
|
}
|
|
|
|
if (panicLevel === 5) {
|
|
state.currentCard = {
|
|
id: 999, dept: "재난 관리", color: "#991b1b",
|
|
title: "현실 붕괴 임박", body: "사회 시스템이 통제 불능 상태입니다. 막대한 자원을 희생해 시간을 벌겠습니까?",
|
|
faction: "전체 파벌", tags: [], yes_a: 40, no_p: 20, yes_e: -10, no_e: 15, flavor: "신은 우리를 버렸습니다."
|
|
};
|
|
} else {
|
|
let pool = DB_SCENARIOS.filter(s => s.act === state.week);
|
|
if(pool.length === 0) pool = DB_SCENARIOS;
|
|
state.currentCard = pool[Math.floor(Math.random() * pool.length)];
|
|
}
|
|
|
|
renderCard(state.currentCard);
|
|
|
|
const cardEl = document.getElementById('current-card');
|
|
cardEl.style.transition = 'none'; cardEl.style.transform = 'translate(0,0) scale(0.9)';
|
|
setTimeout(() => { cardEl.style.transition = 'transform 0.3s ease-out'; cardEl.style.transform = 'scale(1)'; }, 50);
|
|
updateHUD();
|
|
}
|
|
|
|
function getMainTag() {
|
|
let max = 0; let mainTag = null;
|
|
for(let t in state.builtTags) { if(state.builtTags[t] > max) { max = state.builtTags[t]; mainTag = t; } }
|
|
return { tag: mainTag, count: max, counts: state.builtTags };
|
|
}
|
|
|
|
function getNullifiedTags() {
|
|
return state.activeLaws.filter(l => l.type === "nullify_tag").map(l => l.nullify_tag);
|
|
}
|
|
function getBuffTags() {
|
|
return state.activeLaws.filter(l => l.type === "buff_tag").map(l => l.buff_tag);
|
|
}
|
|
|
|
let eventQueue = []; let isFlushing = false;
|
|
function enqueueEvent(triggerType, context) { eventQueue.push({ triggerType, context }); if(!isFlushing) flushEvents(); }
|
|
|
|
function flushEvents() {
|
|
isFlushing = true; let triggeredMsgs = [];
|
|
let counts = state.builtTags; let nTags = getNullifiedTags();
|
|
while(eventQueue.length > 0) {
|
|
let ev = eventQueue.shift();
|
|
state.assets.forEach(a => {
|
|
if (a.tags && a.tags.some(t => nTags.includes(t))) return;
|
|
if (a.combo_req > 0 && (!a.tags || !a.tags.some(t => counts[t] >= a.combo_req))) return;
|
|
if (a.trigger === ev.triggerType) {
|
|
if (a.effect_type === 'resource' && a.effect_target) {
|
|
state[a.effect_target] += a.effect_val;
|
|
triggeredMsgs.push(`[${a.name}] 연쇄 획득`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if (triggeredMsgs.length > 0) {
|
|
const toast = document.getElementById('passive-toast');
|
|
toast.innerText = "연쇄: " + [...new Set(triggeredMsgs)].join(', ');
|
|
toast.className = 'passive-toast'; void toast.offsetWidth; toast.classList.add('active');
|
|
}
|
|
isFlushing = false; updateHUD();
|
|
}
|
|
|
|
function addStat(key, val) { if(val !== 0) { state[key] += val; if(val > 0) enqueueEvent('on_stat_increase', key); } }
|
|
|
|
function applyAssetPassives() {
|
|
let msg = []; let nTags = getNullifiedTags(); let bTags = getBuffTags();
|
|
state.assets.forEach(a => {
|
|
if (a.tags && a.tags.some(t => nTags.includes(t))) return;
|
|
let mult = (a.tags && a.tags.some(t => bTags.includes(t))) ? 2 : 1;
|
|
|
|
if(a.passive_effect) {
|
|
if(a.passive_effect.anomaly) { addStat('anomaly', a.passive_effect.anomaly * mult); msg.push(`데이터+${a.passive_effect.anomaly * mult}`); }
|
|
if(a.passive_effect.political) { addStat('political', a.passive_effect.political * mult); msg.push(`정치+${a.passive_effect.political * mult}`); }
|
|
}
|
|
if(a.holding_risk && a.holding_risk.entropy) { addStat('entropy', a.holding_risk.entropy); msg.push(`엔트로피+${a.holding_risk.entropy}`); }
|
|
|
|
if(!a.trigger && a.combo_req > 0 && a.tags && a.tags.some(t => state.builtTags[t] >= a.combo_req)) {
|
|
if(a.combo_effect_key) { addStat(a.combo_effect_key, a.combo_effect_val * mult); msg.push(`[시너지] +${a.combo_effect_val*mult}`); }
|
|
}
|
|
});
|
|
if(msg.length > 0) {
|
|
const toast = document.getElementById('passive-toast');
|
|
toast.innerText = "자산 효과: " + [...new Set(msg)].join(', ');
|
|
toast.className = 'passive-toast'; void toast.offsetWidth; toast.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function renderCard(data) {
|
|
const card = document.getElementById('current-card');
|
|
card.style.display = 'flex'; card.style.borderColor = "#cbb"; card.style.transform = "translate(0,0)";
|
|
|
|
document.getElementById('c-dept').innerText = data.dept || '부서 불명';
|
|
document.getElementById('c-dept').style.backgroundColor = data.color || '#333';
|
|
document.getElementById('c-title').innerText = data.title || '제목 없음';
|
|
document.getElementById('c-body').innerText = data.body || '내용 없음';
|
|
document.getElementById('c-flavor').innerText = `"${data.flavor || ''}"`;
|
|
document.getElementById('c-faction').innerText = data.faction || '무소속';
|
|
|
|
let tHtml = "";
|
|
if(data.tags) data.tags.forEach(t => tHtml += `<span class="tag-badge">${t}</span>`);
|
|
document.getElementById('c-tags').innerHTML = tHtml;
|
|
|
|
let lockType = "none";
|
|
if(data.tags) {
|
|
state.activeLaws.forEach(bill => {
|
|
if(data.tags.includes(bill.tag)) { if(bill.type === "lock_approve") lockType = "approve"; if(bill.type === "lock_reject") lockType = "reject"; }
|
|
});
|
|
}
|
|
state.lockState = lockType;
|
|
const overlay = document.getElementById('lock-overlay');
|
|
if (lockType === 'approve') { overlay.classList.add('active'); document.getElementById('lock-type-text').innerText = "승인 금지"; }
|
|
else if (lockType === 'reject') { overlay.classList.add('active'); document.getElementById('lock-type-text').innerText = "거절 금지"; }
|
|
else overlay.classList.remove('active');
|
|
|
|
document.getElementById('stamp-approve').style.opacity = 0; document.getElementById('stamp-reject').style.opacity = 0;
|
|
document.getElementById('predict-overlay').style.display = 'none';
|
|
document.getElementById('law-popup').classList.remove('visible');
|
|
}
|
|
|
|
function updateHUD() {
|
|
document.getElementById('week-num').innerText = state.week; document.getElementById('day-num').innerText = state.day;
|
|
document.getElementById('val-anomaly').innerText = state.anomaly; document.getElementById('val-political').innerText = state.political;
|
|
document.getElementById('bar-trust').style.width = `${state.trust}%`; document.getElementById('txt-trust').innerText = `${state.trust}%`;
|
|
document.getElementById('hand-entropy').style.transform = `translateX(-50%) rotate(${(state.entropy / 100) * 360}deg)`;
|
|
|
|
let sortedFactions = [...DB_FACTIONS].sort((a,b)=>b.share - a.share);
|
|
|
|
// Donut Chart
|
|
const donut = document.getElementById('donut-share');
|
|
if(donut) {
|
|
let conicStr = []; let currentDeg = 0;
|
|
sortedFactions.forEach(f => {
|
|
if(f.share > 0) {
|
|
let deg = (f.share / 100) * 360;
|
|
conicStr.push(`${f.color} ${currentDeg}deg ${currentDeg + deg}deg`);
|
|
currentDeg += deg;
|
|
}
|
|
});
|
|
donut.style.background = `conic-gradient(${conicStr.join(', ')})`;
|
|
}
|
|
|
|
document.getElementById('asset-count').innerText = state.assets.length;
|
|
|
|
const tagsContainer = document.getElementById('hud-tags-container');
|
|
if(tagsContainer) {
|
|
tagsContainer.innerHTML = "";
|
|
let tagCount = 0;
|
|
for(let t in state.builtTags) {
|
|
if(state.builtTags[t] > 0) {
|
|
tagsContainer.innerHTML += `<div class="bg-gray-700 text-yellow-300 px-2 py-1 rounded text-[9px] font-bold shadow-sm">[${t}] ${state.builtTags[t]}</div>`;
|
|
tagCount++;
|
|
}
|
|
}
|
|
if(tagCount === 0) tagsContainer.innerHTML = "<span class='text-gray-500 italic'>없음</span>";
|
|
}
|
|
|
|
let hasActiveSynergy = state.assets.some(a => a.combo_req > 0 && a.tags && a.tags.some(t => state.builtTags[t] >= a.combo_req));
|
|
document.getElementById('hud-synergy-badge').className = hasActiveSynergy ? "text-yellow-400 font-bold animate-pulse" : "text-gray-500";
|
|
document.getElementById('hud-synergy-badge').innerHTML = hasActiveSynergy ? `<i class="fa-solid fa-bolt"></i> 시너지 가동` : `<i class="fa-solid fa-bolt"></i> 연쇄 없음`;
|
|
|
|
if (state.currentAgenda) {
|
|
const agTitle = document.getElementById('agenda-title'); if(agTitle) agTitle.innerText = state.currentAgenda.title;
|
|
}
|
|
}
|
|
|
|
function renderCard(data) {
|
|
const card = document.getElementById('current-card');
|
|
card.style.display = 'flex'; card.style.borderColor = "#cbb"; card.style.transform = "translate(0,0)";
|
|
|
|
document.getElementById('c-dept').innerText = data.dept || '부서 불명';
|
|
document.getElementById('c-dept').style.backgroundColor = data.color || '#333';
|
|
document.getElementById('c-title').innerText = data.title || '제목 없음';
|
|
document.getElementById('c-body').innerText = data.body || '내용 없음';
|
|
document.getElementById('c-flavor').innerText = `"${data.flavor || ''}"`;
|
|
document.getElementById('c-faction').innerText = data.faction || '무소속';
|
|
|
|
let tHtml = "";
|
|
if(data.tags) data.tags.forEach(t => tHtml += `<span class="tag-badge">[${t}]</span>`);
|
|
const cTags = document.getElementById('c-tags');
|
|
if(cTags) cTags.innerHTML = tHtml;
|
|
|
|
let conflictElem = document.getElementById('c-conflict');
|
|
if(conflictElem) {
|
|
if (data.no_p > 0) {
|
|
conflictElem.innerHTML = `거절 시 👑 +${data.no_p}`;
|
|
conflictElem.classList.remove('hidden');
|
|
} else {
|
|
conflictElem.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
let lockType = "none";
|
|
if(data.tags) {
|
|
state.activeLaws.forEach(bill => {
|
|
if(data.tags.includes(bill.tag)) { if(bill.type === "lock_approve") lockType = "approve"; if(bill.type === "lock_reject") lockType = "reject"; }
|
|
});
|
|
}
|
|
state.lockState = lockType;
|
|
const overlay = document.getElementById('lock-overlay');
|
|
if (lockType === 'approve') { overlay.classList.add('active'); document.getElementById('lock-type-text').innerText = "승인 금지"; }
|
|
else if (lockType === 'reject') { overlay.classList.add('active'); document.getElementById('lock-type-text').innerText = "거절 금지"; }
|
|
else overlay.classList.remove('active');
|
|
|
|
document.getElementById('stamp-approve').style.opacity = 0; document.getElementById('stamp-reject').style.opacity = 0;
|
|
document.getElementById('predict-overlay').style.display = 'none';
|
|
document.getElementById('law-popup').classList.remove('visible');
|
|
}
|
|
|
|
const card = document.getElementById('current-card');
|
|
let startX = 0, currentX = 0, isDragging = false;
|
|
|
|
card.addEventListener('mousedown', startDrag); card.addEventListener('touchstart', startDrag, {passive:false});
|
|
document.addEventListener('mousemove', moveDrag); document.addEventListener('touchmove', moveDrag, {passive:false});
|
|
document.addEventListener('mouseup', endDrag); document.addEventListener('touchend', endDrag);
|
|
|
|
function startDrag(e) { isDragging = true; startX = (e.type==='touchstart')?e.touches[0].clientX:e.clientX; }
|
|
|
|
function moveDrag(e) {
|
|
if(!isDragging) return;
|
|
currentX = ((e.type==='touchmove')?e.touches[0].clientX:e.clientX) - startX;
|
|
|
|
if (state.lockState === 'none' || (state.lockState==='approve' && currentX < 0) || (state.lockState==='reject' && currentX > 0)) {
|
|
card.style.transform = `translateX(${currentX}px) rotate(${currentX*0.05}deg)`;
|
|
if (Math.abs(currentX) > 40) showPrediction(currentX > 0); else document.getElementById('predict-overlay').style.display = 'none';
|
|
document.getElementById('stamp-approve').style.opacity = currentX > 0 ? Math.min(currentX/100, 1) : 0;
|
|
document.getElementById('stamp-reject').style.opacity = currentX < 0 ? Math.min(Math.abs(currentX)/100, 1) : 0;
|
|
} else {
|
|
document.getElementById('law-popup').classList.add('visible');
|
|
document.getElementById('law-popup-title').innerText = state.lockState === 'approve' ? "🚫 승인 당론 위배" : "🚫 거절 당론 위배";
|
|
}
|
|
}
|
|
|
|
function endDrag() {
|
|
isDragging = false; document.getElementById('predict-overlay').style.display = 'none'; document.getElementById('law-popup').classList.remove('visible');
|
|
if (currentX > 100 && state.lockState !== 'approve') processDecision('approve');
|
|
else if (currentX < -100 && state.lockState !== 'reject') processDecision('reject');
|
|
else { card.style.transition = "transform 0.3s"; card.style.transform = "translate(0,0)"; }
|
|
currentX = 0; document.getElementById('stamp-approve').style.opacity = 0; document.getElementById('stamp-reject').style.opacity = 0;
|
|
}
|
|
|
|
function showPrediction(isApprove) {
|
|
const p = document.getElementById('predict-overlay'); p.style.display = 'flex'; p.style.zIndex = "100";
|
|
const data = state.currentCard;
|
|
|
|
let tGainHtml = ""; let fGainHtml = "";
|
|
if(isApprove) {
|
|
document.getElementById('p-header').innerText = "승인 (APPROVE)"; document.getElementById('p-header').className = "font-bold border-b border-gray-600 mb-2 pb-1 text-center text-red-400";
|
|
document.getElementById('p-desc').innerText = "엔진 빌드업 (태그 확보)";
|
|
document.getElementById('p-anomaly').innerHTML = data.yes_a ? `<span class="${data.yes_a>0?'p-down':'p-up'}">${data.yes_a>0?'-':'+'}${Math.abs(data.yes_a)}</span>` : "0";
|
|
document.getElementById('p-political').innerHTML = "-";
|
|
document.getElementById('p-entropy').innerHTML = data.yes_e ? `<span class="p-down">${data.yes_e > 0?'+':''}${data.yes_e}</span>` : "0";
|
|
document.getElementById('p-trust').innerHTML = "-";
|
|
|
|
data.tags.forEach(t => tGainHtml += `[${t}] +1 `);
|
|
fGainHtml = "변동 없음 (침묵)";
|
|
} else {
|
|
document.getElementById('p-header').innerText = "거절 (REJECT)"; document.getElementById('p-header').className = "font-bold border-b border-gray-600 mb-2 pb-1 text-center text-blue-400";
|
|
document.getElementById('p-desc').innerText = "관료제 통제 (기각 및 정치공작)";
|
|
document.getElementById('p-anomaly').innerHTML = "-";
|
|
document.getElementById('p-political').innerHTML = data.no_p ? `+${data.no_p}` : "0";
|
|
document.getElementById('p-entropy').innerHTML = data.no_e ? `<span class="p-up">${data.no_e > 0?'+':''}${data.no_e}</span>` : "0";
|
|
document.getElementById('p-trust').innerHTML = `<span class="p-up">+2</span>`;
|
|
|
|
tGainHtml = "<span class='text-gray-500'>획득 불가</span>";
|
|
data.tags.forEach(t => {
|
|
DB_FACTIONS.forEach(f => {
|
|
if(f.like_tag === t) fGainHtml += ` <span style="color:${f.color}">${f.name} ▼▼</span>`;
|
|
if(f.hate_tag === t) fGainHtml += ` <span style="color:${f.color}">${f.name} ▲▲</span>`;
|
|
});
|
|
});
|
|
if(fGainHtml === "") fGainHtml = "영향력 변동 없음";
|
|
}
|
|
document.getElementById('p-tag-gain').innerHTML = tGainHtml;
|
|
document.getElementById('p-faction-change').innerHTML = fGainHtml;
|
|
}
|
|
|
|
function processDecision(type) {
|
|
const data = state.currentCard; let animateDir = type === 'approve' ? 500 : -500;
|
|
|
|
if (type === 'approve') {
|
|
addStat('anomaly', -(data.yes_a || 0)); addStat('entropy', data.yes_e || 0);
|
|
if(data.tags) {
|
|
data.tags.forEach(t => {
|
|
state.builtTags[t] = (state.builtTags[t]||0) + 1;
|
|
});
|
|
}
|
|
if (state.currentQuest) state.questProgress++;
|
|
enqueueEvent('on_approve', null);
|
|
} else {
|
|
addStat('political', data.no_p || 0); addStat('entropy', data.no_e || 0); addStat('trust', 2);
|
|
if(data.tags) {
|
|
data.tags.forEach(t => {
|
|
DB_FACTIONS.forEach(f=>{
|
|
if(f.like_tag===t) f.share=Math.max(0, f.share-3);
|
|
if(f.hate_tag===t) f.share+=2;
|
|
});
|
|
});
|
|
}
|
|
enqueueEvent('on_reject', null);
|
|
}
|
|
|
|
const tube = document.getElementById('dividend-tube');
|
|
const b = document.createElement('div'); b.className = 'dividend-block'; b.style.backgroundColor = type === 'approve' ? '#ef4444' : '#3b82f6'; tube.appendChild(b);
|
|
|
|
card.style.transition = "transform 0.3s ease-in"; card.style.transform = `translateX(${animateDir}px) rotate(${animateDir/20}deg)`;
|
|
updateHUD();
|
|
setTimeout(() => { card.style.display = 'none'; state.day++; nextDay(); }, 300);
|
|
}
|
|
|
|
// --- MYSTERY BOARD ---
|
|
function renderMysteries() {
|
|
const list = document.getElementById('mystery-list'); list.innerHTML = "";
|
|
let bTags = getBuffTags();
|
|
state.activeMysteries.forEach((m, idx) => {
|
|
let reqHtml = ""; let canSolve = true;
|
|
|
|
// 할인 로직
|
|
let discount = 0; if(m.req_tags) Object.keys(m.req_tags).forEach(t => { if(bTags.includes(t)) discount += 5; });
|
|
let finalCost = Math.max(0, m.cost_anomaly - discount);
|
|
|
|
if(m.req_tags) {
|
|
for(let t in m.req_tags) {
|
|
let has = state.builtTags[t] || 0; let need = m.req_tags[t];
|
|
reqHtml += `<span class="${has>=need?'text-green-400':'text-red-400'}">[${t}] ${has}/${need}</span> `;
|
|
if(has<need) canSolve = false;
|
|
}
|
|
}
|
|
if(state.anomaly < finalCost) canSolve = false;
|
|
|
|
let ast = DB_ASSETS.find(a=>a.id === m.reward_asset_id);
|
|
list.innerHTML += `<div class="bg-gray-800 p-3 rounded mb-2 border border-blue-900 shadow-md">
|
|
<div class="flex justify-between border-b border-gray-600 pb-1 mb-2"><span class="font-bold text-blue-300 text-sm">${m.title}</span><span class="text-xs text-red-400">매턴 엔트로피 +${m.penalty_entropy || 0}</span></div>
|
|
<div class="text-[10px] text-gray-300 flex justify-between items-center">
|
|
<div>
|
|
<div class="mb-1 text-yellow-300 font-bold">소모 태그: ${reqHtml}</div>
|
|
<div>데이터 비용: 🧬 <span class="${state.anomaly >= finalCost ? 'text-blue-300' : 'text-red-400'}">${finalCost}</span> ${discount>0 ? `<span class="text-green-400 ml-1">(법안 할인 -${discount})</span>`:''}</div>
|
|
<div class="mt-1 text-green-300 font-bold">보상: ${ast?ast.name:'엔진 자산'}</div>
|
|
</div>
|
|
<button class="${canSolve?'bg-blue-600 hover:bg-blue-500':'bg-gray-700 opacity-50 cursor-not-allowed'} px-3 py-2 rounded text-white font-bold flex flex-col items-center" onclick="${canSolve?`solveMystery(${idx})`:'return false;'}"><span>해독</span><span class="text-[8px] font-normal">(태그 소모)</span></button>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
if(state.activeMysteries.length === 0) list.innerHTML = "<div class='text-center text-gray-500 text-xs mt-4'>진행 중인 미스터리가 없습니다.</div>";
|
|
}
|
|
|
|
function solveMystery(idx) {
|
|
let m = state.activeMysteries[idx];
|
|
let bTags = getBuffTags(); let discount = 0; if(m.req_tags) Object.keys(m.req_tags).forEach(t => { if(bTags.includes(t)) discount += 5; });
|
|
|
|
state.anomaly -= Math.max(0, m.cost_anomaly - discount);
|
|
if(m.req_tags) for(let t in m.req_tags) state.builtTags[t] -= m.req_tags[t];
|
|
|
|
let ast = DB_ASSETS.find(a=>a.id === m.reward_asset_id);
|
|
if(ast) state.assets.push(ast);
|
|
state.activeMysteries.splice(idx, 1);
|
|
|
|
alert(`[${m.title}] 미스터리 해결! ${ast?ast.name:''} 획득`);
|
|
renderMysteries(); updateHUD();
|
|
}
|
|
|
|
// --- COUNCIL ---
|
|
function startCouncil() {
|
|
document.getElementById('desk').style.display = 'none'; document.getElementById('council').style.display = 'flex';
|
|
updateHUD(); document.getElementById('council-phase-1').classList.add('active'); document.getElementById('council-phase-2').classList.remove('active');
|
|
let sortedFactions = [...DB_FACTIONS].sort((a,b)=>b.share - a.share);
|
|
document.getElementById('ruling-faction').innerText = sortedFactions[0].name; document.getElementById('ruling-faction').style.color = sortedFactions[0].color;
|
|
}
|
|
|
|
function startVotePhase() {
|
|
document.getElementById('council-phase-1').classList.remove('active'); document.getElementById('council-phase-2').classList.add('active');
|
|
|
|
let mainTagInfo = getMainTag(); let targetTag = mainTagInfo.tag;
|
|
|
|
// Affinity 적용하여 동맹(1,2)과 적대(4,5) 판별
|
|
let factionsWithAff = DB_FACTIONS.map(f => ({ ...f, aff: getAffinity(f) }));
|
|
let sortedFactions = factionsWithAff.sort((a,b) => a.aff.level - b.aff.level);
|
|
|
|
const top = sortedFactions[0]; // 가장 우호적인 파벌
|
|
const hostile = sortedFactions[sortedFactions.length-1]; // 가장 적대적인 파벌
|
|
|
|
let buffBills = DB_BILLS.filter(b => b.is_buff);
|
|
let debuffBills = DB_BILLS.filter(b => !b.is_buff);
|
|
|
|
let b1 = buffBills.find(b => b.target_tag === targetTag) || buffBills[0];
|
|
let b2 = debuffBills.find(b => b.target_tag === targetTag) || debuffBills[0];
|
|
|
|
if (targetTag && b2.target_tag === targetTag) {
|
|
document.getElementById('sabotage-alert').classList.remove('hidden'); document.getElementById('sabotage-target-tag').innerText = targetTag;
|
|
} else { document.getElementById('sabotage-alert').classList.add('hidden'); }
|
|
|
|
state.council.billA = b1; state.council.billB = b2;
|
|
document.getElementById('bill-a-faction').innerText = top.name; document.getElementById('bill-b-faction').innerText = hostile.name;
|
|
document.getElementById('bill-a-name').innerText = b1.name; document.getElementById('bill-a-flavor').innerText = `"${b1.flavor}"`;
|
|
document.getElementById('bill-b-name').innerText = b2.name; document.getElementById('bill-b-flavor').innerText = `"${b2.flavor}"`;
|
|
|
|
let supportersA = [], supportersB = [], swingers = [], enemies = []; let votesA = 0;
|
|
|
|
factionsWithAff.forEach(f => {
|
|
if(f.aff.level <= 2 || (f.like_tag === targetTag)) { supportersA.push(f.name); votesA += f.share; }
|
|
else if(f.aff.level >= 4 || (f.hate_tag === targetTag)) { supportersB.push(f.name); enemies.push(f); }
|
|
else { swingers.push(f); }
|
|
});
|
|
|
|
state.council.votesA = Math.max(0, votesA);
|
|
state.council.supportersA = supportersA;
|
|
state.council.supportersB = supportersB;
|
|
updateVoteUI();
|
|
|
|
const lobbyList = document.getElementById('lobby-targets'); lobbyList.innerHTML = "";
|
|
swingers.forEach(f => { lobbyList.innerHTML += `<div class="lobby-tag" onclick="lobbyFaction('${f.id}', event)">${f.name} (${f.share}%)</div>`; });
|
|
|
|
const blacklistList = document.getElementById('blacklist-targets'); blacklistList.innerHTML = "";
|
|
enemies.forEach(f => {
|
|
if(!f.is_blacklisted) blacklistList.innerHTML += `<div class="lobby-tag" style="border-color:#ef4444; color:#ef4444;" onclick="blacklistFaction('${f.id}', event)">${f.name}</div>`;
|
|
});
|
|
}
|
|
|
|
function lobbyFaction(fid, e) {
|
|
if(state.political < 10) { alert("정치 자본 부족"); return; }
|
|
state.political -= 10;
|
|
const fac = DB_FACTIONS.find(f => f.id === fid); state.council.votesA += fac.share;
|
|
const tgt = e.currentTarget; tgt.style.borderColor = "#10b981"; tgt.style.color = "#10b981"; tgt.innerText = "포섭됨"; tgt.onclick = null;
|
|
updateVoteUI(); updateHUD();
|
|
}
|
|
|
|
function blacklistFaction(fid, e) {
|
|
const fac = DB_FACTIONS.find(f => f.id === fid);
|
|
fac.is_blacklisted = true;
|
|
state.council.supportersB = state.council.supportersB.filter(name => name !== fac.name);
|
|
|
|
const tgt = e.currentTarget; tgt.style.background = "#ef4444"; tgt.style.color = "#fff"; tgt.innerText = "탄압됨"; tgt.onclick = null;
|
|
alert(`${fac.name}을(를) 영구적 파국 상태로 몰아넣었습니다. 다음 턴부터 사보타주 테러가 발생할 수 있습니다.`);
|
|
updateVoteUI(); updateHUD();
|
|
}
|
|
|
|
function updateVoteUI() {
|
|
const vA = Math.min(100, state.council.votesA);
|
|
document.getElementById('vote-a').style.width = `${vA}%`; document.getElementById('vote-b').style.width = `${100-vA}%`;
|
|
document.getElementById('vote-a-val').innerText = vA; document.getElementById('vote-b-val').innerText = 100-vA;
|
|
document.getElementById('list-support-a').innerText = state.council.supportersA.length > 0 ? state.council.supportersA.join(', ') : '없음';
|
|
document.getElementById('list-support-b').innerText = state.council.supportersB.length > 0 ? state.council.supportersB.join(', ') : '없음';
|
|
}
|
|
|
|
function endCouncil() {
|
|
const winner = state.council.votesA >= 50 ? state.council.billA : state.council.billB;
|
|
alert(`${winner.name} 가결! (다음 주 적용)`);
|
|
state.activeLaws.push(winner); state.week++; state.day = 1;
|
|
document.getElementById('council').style.display = 'none'; document.getElementById('desk').style.display = 'flex';
|
|
setupWeek();
|
|
}
|
|
|
|
window.openModal = (id) => {
|
|
document.getElementById(id).classList.add('active');
|
|
if(id==='mystery-modal') renderMysteries();
|
|
if(id==='asset-modal') {
|
|
document.getElementById('asset-list').innerHTML = state.assets.map(a => `<div class="list-item"><span class="font-bold flex items-center">${a.name} <span class="bg-gray-700 text-gray-300 px-1 rounded ml-1 text-[8px]">${a.tags?a.tags.join(','):''}</span></span><span class="text-[9px] text-green-400 ml-auto">[작동 중]</span></div>`).join('');
|
|
if(state.assets.length===0) document.getElementById('asset-list').innerHTML = "<div class='text-center text-xs text-gray-500'>없음</div>";
|
|
}
|
|
if(id==='faction-modal') {
|
|
let facHtml = "";
|
|
let sortedFactions = [...DB_FACTIONS].sort((a,b)=>b.share - a.share);
|
|
sortedFactions.forEach(f => {
|
|
let aff = getAffinity(f);
|
|
facHtml += `<div class="bg-gray-800 p-3 rounded mb-2 border-l-4" style="border-color:${f.color}">
|
|
<div class="flex justify-between items-center mb-1"><span class="font-bold" style="color:${f.color}">${f.name}</span><span class="text-xs font-bold" style="color:${aff.color}">${aff.name} (지분 ${f.share}%)</span></div>
|
|
<div class="text-[10px] text-gray-400 mb-1">${f.desc}</div>
|
|
<div class="text-[9px] text-gray-500">선호: <span class="text-green-400">[${f.like_tag||'없음'}]</span> / 혐오: <span class="text-red-400">[${f.hate_tag||'없음'}]</span></div>
|
|
</div>`;
|
|
});
|
|
document.getElementById('faction-list-detail').innerHTML = facHtml;
|
|
}
|
|
}
|
|
window.closeModal = (id) => document.getElementById(id).classList.remove('active');
|
|
|
|
initDB();
|
|
</script>
|
|
</body>
|
|
</html> |