Game-Gallery

Running

App Files Files Community

Game-Gallery / app.py

ginipick

Update app.py

b16d98a verified about 1 month ago

raw

history blame

11 kB

	import os, re, time, json, datetime, requests, gradio as gr

	# ───────────────────── 1. 기본 설정 ─────────────────────
	BEST_FILE, PER_PAGE = "best_games.json", 9

	# ───────────────────── 2. BEST 데이터 ────────────────────
	def _init_best():
	if not os.path.exists(BEST_FILE):
	json.dump([], open(BEST_FILE, "w"))

	def _load_best():
	try:
	data = json.load(open(BEST_FILE))
	for it in data:
	if "ts" not in it:
	it["ts"] = int(it.get("timestamp", time.time()))
	return data
	except Exception as e:
	print(f"BEST 데이터 로드 오류: {e}")
	return []

	def _save_best(data):
	try:
	json.dump(data, open(BEST_FILE, "w"))
	return True
	except Exception as e:
	print(f"BEST 데이터 저장 오류: {e}")
	return False

	# ───────────────────── 3. URL 추가 기능 ─────────────────────
	def add_url_to_best(title, url):
	"""사용자가 제공한 URL을 BEST 목록에 추가합니다."""
	try:
	# 현재 BEST 데이터 로드
	data = _load_best()

	# URL이 이미 존재하는지 확인
	for item in data:
	if item.get("url") == url:
	print(f"URL이 이미 존재합니다: {url}")
	return False

	# 새 항목 추가
	new_item = {
	"title": title,
	"url": url,
	"ts": int(time.time()),
	"projectId": "", # 사용자가 직접 추가하므로 projectId 없음
	"deploymentId": "" # 사용자가 직접 추가하므로 deploymentId 없음
	}

	data.append(new_item)

	# 시간순으로 정렬
	data = sorted(data, key=lambda x: x["ts"], reverse=True)

	# 저장
	if _save_best(data):
	print(f"URL이 성공적으로 추가되었습니다: {url}")
	return True
	return False
	except Exception as e:
	print(f"URL 추가 오류: {str(e)}")
	return False

	# ───────────────────── 4. 페이지네이션 ───────────────────
	def page(lst, pg):
	s = (pg-1) * PER_PAGE
	e = s + PER_PAGE
	total = (len(lst) + PER_PAGE - 1) // PER_PAGE
	return lst[s:e], total

	# ───────────────────── 5. HTML 그리드 ───────────────────
	def html(cards, pg, total):
	if not cards:
	return "<div style='text-align:center;padding:70px;color:#555;'>표시할 배포가 없습니다.</div>"

	# 순수 HTML과 CSS로 구현
	h = f"""
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	* {{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}}

	body, html {{
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Arial, sans-serif;
	background: #f0f0f0;
	}}

	#app {{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	}}

	#grid-container {{
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	width: 100%;
	height: 100%;
	}}

	.card {{
	background: white;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	height: 100%;
	}}

	.card-header {{
	padding: 8px 12px;
	font-size: 0.9rem;
	font-weight: bold;
	border-bottom: 1px solid #f0f0f0;
	z-index: 2;
	background: rgba(255,255,255,0.9);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}}

	.card-date {{
	font-size: 0.75rem;
	color: #888;
	margin-top: 2px;
	}}

	.card-frame {{
	flex: 1;
	position: relative;
	overflow: hidden;
	}}

	.card-frame iframe {{
	position: absolute;
	top: 0;
	left: 0;
	width: 142.857%;
	height: 142.857%;
	transform: scale(0.7);
	transform-origin: top left;
	border: 0;
	}}

	.card-footer {{
	padding: 6px 12px;
	text-align: right;
	font-size: 0.8rem;
	border-top: 1px solid #f0f0f0;
	background: rgba(255,255,255,0.9);
	z-index: 2;
	}}

	.card-footer a {{
	color: #4a6dd8;
	text-decoration: none;
	font-weight: bold;
	}}

	#nav-container {{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	z-index: 10;
	}}

	.nav-button {{
	padding: 10px 25px;
	background: rgba(255,255,255,0.9);
	border: 1px solid #ddd;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	transition: all 0.2s ease;
	color: #333;
	}}

	.nav-button:hover {{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(0,0,0,0.18);
	}}

	.page-info {{
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 0.8rem;
	color: #888;
	z-index: 9;
	}}

	/* 배경 그래디언트 효과 */
	#bottom-gradient {{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: linear-gradient(to bottom, rgba(240,240,240,0) 0%, rgba(240,240,240,0.9) 70%);
	z-index: 5;
	pointer-events: none;
	}}
	</style>
	</head>
	<body>
	<div id="app">
	<div id="grid-container">
	"""

	# 카드 추가
	for c in cards:
	date = datetime.datetime.fromtimestamp(int(c["ts"])).strftime("%Y-%m-%d")
	h += f"""
	<div class="card">
	<div class="card-header">
	{c['title']}
	<div class="card-date">{date}</div>
	</div>
	<div class="card-frame">
	<iframe src="{c['url']}" loading="lazy" allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe>
	</div>
	<div class="card-footer">
	<a href="{c['url']}" target="_blank">원본↗</a>
	</div>
	</div>
	"""

	# 네비게이션 및 페이지 정보
	h += f"""
	</div>
	<div id="bottom-gradient"></div>
	<div id="nav-container">
	<button class="nav-button" onclick="prevPage()">◀ 이전</button>
	<button class="nav-button" onclick="nextPage()">다음 ▶</button>
	</div>
	<div class="page-info">Page {pg} / {total}</div>
	</div>

	<script>
	function prevPage() {{
	if ({pg} > 1) {{
	document.getElementById('prev-button').click();
	}}
	}}

	function nextPage() {{
	if ({pg} < {total}) {{
	document.getElementById('next-button').click();
	}}
	}}

	// 스크롤 방지
	document.addEventListener('wheel', function(e) {{
	e.preventDefault();
	}}, {{ passive: false }});

	document.addEventListener('touchmove', function(e) {{
	e.preventDefault();
	}}, {{ passive: false }});
	</script>
	</body>
	</html>
	"""

	return h

	# ───────────────────── 6. Gradio Blocks UI ───────────────────
	def build():
	_init_best()
	with gr.Blocks(title="Vibe Game Craft", css="footer{display:none !important;}") as demo:
	# 상태 및 출력
	bp = gr.State(1)
	out = gr.HTML(elem_id="display-area", visible=True)

	# 숨겨진 버튼 (JavaScript에서 호출용)
	b_prev = gr.Button("이전", elem_id="prev-button", visible=False)
	b_next = gr.Button("다음", elem_id="next-button", visible=False)

	def show_best(p=1):
	d, t = page(_load_best(), p)
	return html(d, p, t), p

	def prev(b):
	b = max(1, b-1)
	h, _ = show_best(b)
	return h, b

	def nxt(b):
	maxp = (len(_load_best()) + PER_PAGE - 1) // PER_PAGE
	b = min(maxp, b+1)
	h, _ = show_best(b)
	return h, b

	# 이벤트 연결
	b_prev.click(prev, inputs=[bp], outputs=[out, bp])
	b_next.click(nxt, inputs=[bp], outputs=[out, bp])

	# 초기 로드
	demo.load(show_best, outputs=[out, bp])

	return demo

	app = build()

	if __name__ == "__main__":
	app.launch()