Spaces:

Heartsync
/

open-npc

Running

App Files Files Community

mayafree commited on 25 days ago

Commit

d49d7d4

verified ·

1 Parent(s): 73f1acf

Update index.html

Browse files

Files changed (1) hide show

index.html +295 -40

index.html CHANGED Viewed

@@ -109,20 +109,6 @@ canvas{max-height:250px;}
 .progress-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width 0.3s;}
 .tooltip{position:relative;display:inline-block;cursor:help;}
 .tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:12px;white-space:nowrap;margin-bottom:5px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
-/* 📱 모바일 반응형 */
-.mobile-tab-bar{display:none;}
-@media (max-width: 768px) {
-.container{flex-direction:column;padding-bottom:60px;}
-.board-section{width:100%!important;border-right:none;display:none;}
-.board-section.mobile-active{display:block!important;}
-.mypage-section{width:100%!important;display:none;}
-.mypage-section.mobile-active{display:block!important;}
-.mobile-tab-bar{display:flex;position:fixed;bottom:0;left:0;width:100%;background:#1a1a2e;border-top:2px solid #2d2d44;z-index:999;}
-.mobile-tab{flex:1;padding:12px 0;text-align:center;cursor:pointer;color:#8e8ea0;font-size:11px;font-weight:600;border:none;background:transparent;}
-.mobile-tab .icon{font-size:20px;display:block;margin-bottom:4px;}
-.mobile-tab.active{color:#667eea;background:rgba(102,126,234,0.1);}
-}
 </style>
 </head>
 <body>
@@ -284,9 +270,6 @@ currentUser = loadFromLocal('user_email');
 if(!currentUser){return;}
 document.getElementById('login-page').style.display='none';
 document.getElementById('main-page').style.display='flex';
-if(window.innerWidth <= 768){
-document.querySelector('.board-section').classList.add('mobile-active');
-}
 await loadProfile();
 await loadBoards();
 await loadPosts(currentBoard, currentSort);
@@ -326,12 +309,21 @@ document.getElementById('admin-panel').style.display='block';
 async function loadBoards(){
 const res = await fetch('/api/boards');
 const boards = await res.json();
-const html = boards.map(b=>`<button class="board-tab ${b.key===currentBoard?'active':''}" onclick="switchBoard('${b.key}')">${b.name}</button>`).join('');
 document.getElementById('board-tabs').innerHTML = html;
 }
 async function switchBoard(key){
 currentBoard = key;
 await loadBoards();
 await loadPosts(key, currentSort);
 }
 async function switchSort(sort){
@@ -342,6 +334,12 @@ event.target.classList.add('active');
 await loadPosts(currentBoard, sort);
 }
 async function loadPosts(key, sort){
 const res = await fetch(`/api/board/${key}/posts?sort=${sort}`);
 const posts = await res.json();
 const html = posts.map(p=>{
@@ -363,6 +361,88 @@ ${isHot?'<span class="badge badge-hot">HOT</span>':''}
 }).join('');
 document.getElementById('posts-container').innerHTML = html || '<div class="empty-state">게시글이 없습니다</div>';
 }
 async function viewPost(id){
 const res = await fetch(`/api/post/${id}`);
 const data = await res.json();
@@ -823,6 +903,203 @@ closeModal();
 loadPosts(currentBoard, currentSort);
 loadProfile();
 }
 function logout(){
 if(wakeStatusInterval){
 clearInterval(wakeStatusInterval);
@@ -837,28 +1114,6 @@ currentUser = user;
 loadApp();
 }
 };
-// 📱 모바일 탭 전환
-function switchMobileTab(tab){
-if(window.innerWidth > 768) return;
-const boardSection = document.querySelector('.board-section');
-const mypageSection = document.querySelector('.mypage-section');
-const tabs = document.querySelectorAll('.mobile-tab');
-tabs.forEach(t => t.classList.remove('active'));
-if(tab === 'board'){
-boardSection.classList.add('mobile-active');
-mypageSection.classList.remove('mobile-active');
-tabs[0].classList.add('active');
-}else{
-boardSection.classList.remove('mobile-active');
-mypageSection.classList.add('mobile-active');
-tabs[1].classList.add('active');
-}
-}
 </script>
-<div class="mobile-tab-bar">
-<button class="mobile-tab active" onclick="switchMobileTab('board')"><span class="icon">📋</span>게시판</button>
-<button class="mobile-tab" onclick="switchMobileTab('mypage')"><span class="icon">👤</span>마이</button>
-</div>
 </body>
 </html>

 .progress-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width 0.3s;}
 .tooltip{position:relative;display:inline-block;cursor:help;}
 .tooltip:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:8px 12px;background:#000;color:#fff;border-radius:6px;font-size:12px;white-space:nowrap;margin-bottom:5px;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.5);}
 </style>
 </head>
 <body>
 if(!currentUser){return;}
 document.getElementById('login-page').style.display='none';
 document.getElementById('main-page').style.display='flex';
 await loadProfile();
 await loadBoards();
 await loadPosts(currentBoard, currentSort);
 async function loadBoards(){
 const res = await fetch('/api/boards');
 const boards = await res.json();
+let html = boards.map(b=>`<button class="board-tab ${b.key===currentBoard?'active':''}" onclick="switchBoard('${b.key}')">${b.name}</button>`).join('');
+// 🎮 배틀 아레나 탭 추가
+html += `<button class="board-tab ${'battle'===currentBoard?'active':''}" onclick="switchBoard('battle')">🎮 배틀 아레나</button>`;
 document.getElementById('board-tabs').innerHTML = html;
 }
 async function switchBoard(key){
 currentBoard = key;
 await loadBoards();
+// 🎮 배틀 아레나에서는 정렬 버튼 숨기기
+const sortToggle = document.querySelector('.sort-toggle');
+if(sortToggle){
+sortToggle.style.display = (key === 'battle') ? 'none' : 'flex';
+}
 await loadPosts(key, currentSort);
 }
 async function switchSort(sort){
 await loadPosts(currentBoard, sort);
 }
 async function loadPosts(key, sort){
+// 🎮 배틀 아레나인 경우
+if(key === 'battle'){
+await loadBattleBoard();
+return;
+}
 const res = await fetch(`/api/board/${key}/posts?sort=${sort}`);
 const posts = await res.json();
 const html = posts.map(p=>{
 }).join('');
 document.getElementById('posts-container').innerHTML = html || '<div class="empty-state">게시글이 없습니다</div>';
 }
+// 🎮 배틀 아레나 게시판 표시
+async function loadBattleBoard(){
+const container = document.getElementById('posts-container');
+container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
+const res = await fetch('/api/battles/active?limit=20');
+const data = await res.json();
+const battles = data.battles || [];
+let html = `
+<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;border-radius:8px;margin-bottom:20px;">
+<div style="font-size:20px;font-weight:700;margin-bottom:10px;">🎮 Battle Arena - Polymarket Style</div>
+<div style="font-size:14px;opacity:0.9;">A/B 투표에 베팅하고 승자 예측! • 방장수수료 2% • 50.01% 이상 득표 시 승리</div>
+<button class="btn btn-warning" style="margin-top:15px;" onclick="showCreateBattleModal()">
+🆕 새 배틀방 만들기 (-50 GPU)
+</button>
+</div>
+<div style="font-size:16px;font-weight:600;margin:20px 0;color:#e0e0e0;">
+🔥 진행중인 배틀 (${battles.length}개)
+</div>
+`;
+if(battles.length === 0){
+html += '<div class="empty-state">진행중인 배틀이 없습니다<br><br>배틀방을 만들어 예측 시장을 열어보세요!</div>';
+}else{
+battles.forEach(b => {
+const totalPool = b.total_pool || 0;
+const aRatio = b.a_ratio || 0;
+const bRatio = b.b_ratio || 0;
+html += `
+<div style="background:#1a1a2e;border:2px solid #2d2d44;border-radius:12px;padding:20px;margin:15px 0;transition:all 0.3s;" onmouseover="this.style.borderColor='#667eea'" onmouseout="this.style.borderColor='#2d2d44'">
+<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+<div style="font-weight:700;font-size:16px;color:#e0e0e0;flex:1;">${b.title}</div>
+<div style="background:${b.battle_type === 'prediction' ? '#17a2b8' : '#667eea'};color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;">
+${b.battle_type === 'prediction' ? '🔮 예측' : '💬 다수결'}
+</div>
+</div>
+<div style="font-size:13px;color:#8e8ea0;margin-bottom:15px;">
+👤 방장: ${b.creator_name} | 💰 총 풀: <span style="color:#ffd700;font-weight:600;">${totalPool} GPU</span> | ⏰ 남은시간: <span style="color:#ff6b6b;font-weight:600;">${b.time_left}</span>
+</div>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px;">
+<div style="background:#0f0f23;padding:20px;border-radius:8px;border:3px solid ${aRatio > 50 ? '#28a745' : '#2d2d44'};position:relative;">
+<div style="position:absolute;top:10px;right:10px;background:${aRatio > 50 ? '#28a745' : '#667eea'};color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;">
+${aRatio > 50 ? '🏆 우세' : 'A'}
+</div>
+<div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:8px;">${b.option_a}</div>
+<div style="font-size:32px;font-weight:700;color:#28a745;margin:10px 0;">${aRatio.toFixed(1)}%</div>
+<div style="font-size:12px;color:#8e8ea0;margin-bottom:12px;">💰 ${b.option_a_pool} GPU</div>
+<button class="btn btn-success" style="width:100%;font-size:13px;font-weight:600;"
+onclick="event.stopPropagation(); placeBet(${b.id}, 'A')">
+A 베팅하기
+</button>
+</div>
+<div style="background:#0f0f23;padding:20px;border-radius:8px;border:3px solid ${bRatio > 50 ? '#dc3545' : '#2d2d44'};position:relative;">
+<div style="position:absolute;top:10px;right:10px;background:${bRatio > 50 ? '#dc3545' : '#667eea'};color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;">
+${bRatio > 50 ? '🏆 우세' : 'B'}
+</div>
+<div style="font-weight:600;font-size:14px;color:#e0e0e0;margin-bottom:8px;">${b.option_b}</div>
+<div style="font-size:32px;font-weight:700;color:#dc3545;margin:10px 0;">${bRatio.toFixed(1)}%</div>
+<div style="font-size:12px;color:#8e8ea0;margin-bottom:12px;">💰 ${b.option_b_pool} GPU</div>
+<button class="btn btn-danger" style="width:100%;font-size:13px;font-weight:600;"
+onclick="event.stopPropagation(); placeBet(${b.id}, 'B')">
+B 베팅하기
+</button>
+</div>
+</div>
+<div style="margin-top:12px;padding-top:12px;border-top:1px solid #2d2d44;font-size:11px;color:#8e8ea0;">
+💡 승자 예측 정확도: ${aRatio > bRatio ? aRatio.toFixed(1) : bRatio.toFixed(1)}% | 베팅 참여로 배당금 획득 가능
+</div>
+</div>
+`;
+});
+}
+container.innerHTML = html;
+}
 async function viewPost(id){
 const res = await fetch(`/api/post/${id}`);
 const data = await res.json();
 loadPosts(currentBoard, currentSort);
 loadProfile();
 }
+// ========== 🎮 Battle Arena Functions ==========
+async function loadBattleArena(){
+const container = document.getElementById('mypage-content');
+container.innerHTML = '<div style="text-align:center;padding:20px;">로딩 중...</div>';
+const res = await fetch('/api/battles/active?limit=20');
+const data = await res.json();
+const battles = data.battles || [];
+let html = `
+<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;margin-bottom:15px;">
+<div style="font-size:16px;font-weight:700;">🎮 Battle Arena - Polymarket 스타일</div>
+<div style="font-size:12px;margin-top:5px;">A/B 투표에 베팅하고 승자 예측! 방장수수료 2%</div>
+</div>
+<button class="btn btn-primary" style="width:100%;margin-bottom:15px;" onclick="showCreateBattleModal()">
+🆕 새 배틀방 만들기 (-50 GPU)
+</button>
+<div style="font-size:14px;font-weight:600;margin:15px 0;color:#e0e0e0;">🔥 진행중인 배틀 (${battles.length}개)</div>
+`;
+if(battles.length === 0){
+html += '<div class="empty-state">진행중인 배틀이 없습니다</div>';
+}else{
+battles.forEach(b => {
+const totalPool = b.total_pool || 0;
+const aRatio = b.a_ratio || 0;
+const bRatio = b.b_ratio || 0;
+html += `
+<div style="background:#1a1a2e;border:1px solid #2d2d44;border-radius:8px;padding:15px;margin:10px 0;">
+<div style="font-weight:600;font-size:14px;margin-bottom:10px;color:#e0e0e0;">${b.title}</div>
+<div style="font-size:12px;color:#8e8ea0;margin-bottom:10px;">
+방장: ${b.creator_name} | 총 풀: ${totalPool} GPU | 남은시간: ${b.time_left}
+</div>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;">
+<div style="background:#0f0f23;padding:12px;border-radius:6px;border:2px solid ${aRatio > 50 ? '#28a745' : '#2d2d44'};">
+<div style="font-weight:600;color:#e0e0e0;">${b.option_a}</div>
+<div style="font-size:20px;font-weight:700;color:#28a745;margin:5px 0;">${aRatio}%</div>
+<div style="font-size:11px;color:#8e8ea0;">${b.option_a_pool} GPU</div>
+<button class="btn btn-success" style="width:100%;margin-top:8px;font-size:12px;"
+onclick="placeBet(${b.id}, 'A')">
+A 베팅
+</button>
+</div>
+<div style="background:#0f0f23;padding:12px;border-radius:6px;border:2px solid ${bRatio > 50 ? '#dc3545' : '#2d2d44'};">
+<div style="font-weight:600;color:#e0e0e0;">${b.option_b}</div>
+<div style="font-size:20px;font-weight:700;color:#dc3545;margin:5px 0;">${bRatio}%</div>
+<div style="font-size:11px;color:#8e8ea0;">${b.option_b_pool} GPU</div>
+<button class="btn btn-danger" style="width:100%;margin-top:8px;font-size:12px;"
+onclick="placeBet(${b.id}, 'B')">
+B 베팅
+</button>
+</div>
+</div>
+</div>
+`;
+});
+}
+container.innerHTML = html;
+}
+function showCreateBattleModal(){
+const modal = document.getElementById('post-modal');
+const modalBody = document.getElementById('modal-body');
+modalBody.innerHTML = `
+<div class="modal-header">🆕 배틀방 만들기 (-50 GPU)</div>
+<div style="padding:15px;">
+<div class="input-group">
+<label>배틀 제목 (10자 이상)</label>
+<input type="text" id="battle-title" placeholder="예: 비트코인 10만불 돌파할까?" maxlength="100">
+</div>
+<div class="input-group">
+<label>선택지 A</label>
+<input type="text" id="battle-option-a" placeholder="예: 돌파한다" maxlength="50">
+</div>
+<div class="input-group">
+<label>선택지 B</label>
+<input type="text" id="battle-option-b" placeholder="예: 못 돌파" maxlength="50">
+</div>
+<div class="input-group">
+<label>🎯 배틀 타입</label>
+<select id="battle-type" onchange="updateBattleTypeDescription()">
+<option value="opinion">💬 다수결 (의견/논쟁)</option>
+<option value="prediction">🔮 예측 (실제 결과)</option>
+</select>
+<div id="battle-type-desc" style="font-size:11px;color:#8e8ea0;margin-top:5px;padding:8px;background:#0f0f23;border-radius:4px;">
+💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"
+</div>
+</div>
+<div class="input-group">
+<label>베팅 기한 (시간)</label>
+<select id="battle-duration">
+<option value="1">1시간</option>
+<option value="3">3시간</option>
+<option value="6">6시간</option>
+<option value="12">12시간</option>
+<option value="24" selected>24시간</option>
+</select>
+</div>
+<button class="btn btn-primary" style="width:100%;margin-top:15px;" onclick="createBattle()">
+🎮 배틀방 생성 (-50 GPU)
+</button>
+</div>
+`;
+modal.classList.add('active');
+}
+function updateBattleTypeDescription(){
+const typeSelect = document.getElementById('battle-type');
+const descDiv = document.getElementById('battle-type-desc');
+if(typeSelect.value === 'opinion'){
+descDiv.innerHTML = `💬 <strong>다수결:</strong> 득표율 50.01% 이상 승리 | 예: "AI 우월론", "MZ vs 기성세대"`;
+}else{
+descDiv.innerHTML = `🔮 <strong>예측:</strong> 실제 결과로 판정 | 예: "비트코인 10만불", "내일 서울 비"`;
+}
+}
+async function createBattle(){
+const title = document.getElementById('battle-title').value.trim();
+const option_a = document.getElementById('battle-option-a').value.trim();
+const option_b = document.getElementById('battle-option-b').value.trim();
+const duration_hours = parseInt(document.getElementById('battle-duration').value);
+const battle_type = document.getElementById('battle-type').value;
+if(!title || title.length < 10){
+alert('제목 10자 이상 입력하세요');
+return;
+}
+if(!option_a || !option_b){
+alert('선택지 A와 B를 모두 입력하세요');
+return;
+}
+const res = await fetch('/api/battle/create', {
+method: 'POST',
+headers: {'Content-Type': 'application/json'},
+body: JSON.stringify({
+email: currentUser,
+title: title,
+option_a: option_a,
+option_b: option_b,
+duration_hours: duration_hours,
+battle_type: battle_type
+})
+});
+const data = await res.json();
+if(data.error){
+alert(data.error);
+return;
+}
+alert(data.message);
+closeModal();
+loadProfile();
+loadMypageContent('battle');
+}
+async function placeBet(room_id, choice){
+const betAmount = prompt(`${choice} 선택! 베팅 금액 입력 (1-100 GPU):`, '10');
+if(!betAmount) return;
+const amount = parseInt(betAmount);
+if(isNaN(amount) || amount < 1 || amount > 100){
+alert('1~100 사이 숫자를 입력하세요');
+return;
+}
+const res = await fetch('/api/battle/bet', {
+method: 'POST',
+headers: {'Content-Type': 'application/json'},
+body: JSON.stringify({
+email: currentUser,
+room_id: room_id,
+choice: choice,
+bet_amount: amount
+})
+});
+const data = await res.json();
+if(data.error){
+alert(data.error);
+return;
+}
+alert(data.message);
+loadProfile();
+loadMypageContent('battle');
+}
 function logout(){
 if(wakeStatusInterval){
 clearInterval(wakeStatusInterval);
 loadApp();
 }
 };
 </script>
 </body>
 </html>