Spaces:

mastefan
/

agentic-language-partner

Sleeping

File size: 6,367 Bytes


# src/app/viewers.py

import json
from pathlib import Path
from typing import Dict, List

from .config import get_user_dir
from .flashcards_tools import load_deck



def _build_flipbook_html(deck_name: str, cards: List[Dict]) -> str:
    """
    Builds a simple HTML+JS flip-style viewer for a deck of cards.
    Front = card['front'], Back = card['back'].
    """
    js_cards = json.dumps(
        [
            {"front": c.get("front", ""), "back": c.get("back", "")}
            for c in cards
        ],
        ensure_ascii=False,
    )

    html = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flashcards — {deck_name}</title>
<style>
body {{
    background: #111;
    color: #eee;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 1.5rem;
}}

.wrapper {{
    max-width: 700px;
    margin: 0 auto;
}}

h1 {{
    text-align: center;
    margin-bottom: 1rem;
}}

.card-container {{
    perspective: 1000px;
    margin-bottom: 1rem;
}}

.card {{
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 16px;
    background: #222;
    box-shadow: 0 8px 15px rgba(0,0,0,0.4);
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}}

.card.flipped {{
    transform: rotateY(180deg);
}}

.card-face {{
    position: absolute;
    inset: 0;
    border-radius: 16px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}}

.card-face.front {{
    background: #333;
}}

.card-face.back {{
    background: #1a73e8;
    transform: rotateY(180deg);
}}

.card-text {{
    font-size: 2.2rem;
    text-align: center;
    word-wrap: break-word;
}}

.controls {{
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}}

button {{
    background: #333;
    color: #eee;
    border-radius: 999px;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}}

button:hover {{
    background: #444;
    transform: translateY(-1px);
}}

.meta {{
    text-align: center;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #ccc;
}}

.badge {{
    display: inline-block;
    padding: 0.1rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: #555;
    margin-left: 0.5rem;
}}
</style>
</head>
<body>
<div class="wrapper">
  <h1>{deck_name}</h1>
  <div class="card-container">
    <div class="card" id="card">
      <div class="card-face front">
        <div class="card-text" id="cardFront"></div>
      </div>
      <div class="card-face back">
        <div class="card-text" id="cardBack"></div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button id="prevBtn">⏮ Prev</button>
    <button id="flipBtn">🔁 Flip</button>
    <button id="nextBtn">Next ⏭</button>
    <button id="shuffleBtn">🔀 Shuffle</button>
  </div>

  <div class="meta">
    <span id="cardIndex">Card 0 / 0</span>
    <span class="badge" id="sideLabel">Front</span>
  </div>
</div>

<script>
const cards = {js_cards};
let currentIndex = 0;
let isFlipped = false;

const cardEl = document.getElementById('card');
const frontEl = document.getElementById('cardFront');
const backEl = document.getElementById('cardBack');
const indexEl = document.getElementById('cardIndex');
const sideLabelEl = document.getElementById('sideLabel');

function renderCard() {{
    if (!cards.length) {{
        frontEl.textContent = "(No cards)";
        backEl.textContent = "";
        indexEl.textContent = "Card 0 / 0";
        sideLabelEl.textContent = "Front";
        cardEl.classList.remove('flipped');
        return;
    }}

    const card = cards[currentIndex];
    frontEl.textContent = card.front || "";
    backEl.textContent = card.back || "";

    indexEl.textContent = "Card " + (currentIndex + 1) + " / " + cards.length;
    sideLabelEl.textContent = isFlipped ? "Back" : "Front";
}}

function flipCard() {{
    if (!cards.length) return;
    isFlipped = !isFlipped;
    if (isFlipped) {{
        cardEl.classList.add('flipped');
    }} else {{
        cardEl.classList.remove('flipped');
    }}
    sideLabelEl.textContent = isFlipped ? "Back" : "Front";
}}

function nextCard() {{
    if (!cards.length) return;
    currentIndex = (currentIndex + 1) % cards.length;
    isFlipped = false;
    cardEl.classList.remove('flipped');
    renderCard();
}}

function prevCard() {{
    if (!cards.length) return;
    currentIndex = (currentIndex - 1 + cards.length) % cards.length;
    isFlipped = false;
    cardEl.classList.remove('flipped');
    renderCard();
}}

function shuffleCards() {{
    for (let i = cards.length - 1; i > 0; i--) {{
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }}
    currentIndex = 0;
    isFlipped = false;
    cardEl.classList.remove('flipped');
    renderCard();
}}

cardEl.addEventListener('click', flipCard);
document.getElementById('flipBtn').addEventListener('click', flipCard);
document.getElementById('nextBtn').addEventListener('click', nextCard);
document.getElementById('prevBtn').addEventListener('click', prevCard);
document.getElementById('shuffleBtn').addEventListener('click', shuffleCards);

document.addEventListener('keydown', (e) => {{
    if (!cards.length) return;
    if (e.code === "ArrowRight") nextCard();
    else if (e.code === "ArrowLeft") prevCard();
    else if (e.code === "Space") {{
        e.preventDefault();
        flipCard();
    }}
}});

renderCard();
</script>
</body>
</html>
"""
    return html


def generate_flashcard_viewer_for_user(username: str, deck_path: Path) -> Path:
    """
    Generates an HTML flipbook viewer for the given deck in the user's
    /viewers directory, and returns the path to the HTML file.
    """
    deck = load_deck(deck_path)
    deck_name = deck.get("name", deck_path.stem)
    cards = deck.get("cards", [])

    html_str = _build_flipbook_html(deck_name, cards)

    user_dir = get_user_dir(username)
    viewer_dir = user_dir / "viewers"
    viewer_dir.mkdir(parents=True, exist_ok=True)

    safe_name = deck_path.stem
    out_path = viewer_dir / f"{safe_name}_viewer.html"
    out_path.write_text(html_str, encoding="utf-8")
    return out_path