https://ehnzo.vercel.app/allnations/js/components/public/PrayerScreen.js

1import { getCountryById } from '../../services/lookup.js';
2import { getUser, getPrayerCounts, togglePrayerCommitment, getFeaturedCountryId } from '../../store/index.js';
3import { openCountry } from './CountryPanel.js';
4import { updateStats } from './Stats.js';
5import { updateMap } from '../../services/mapService.js';
6import { safe } from '../../utils/normalize.js';
7import { PRAYER_CONTENT, PRAYER_IDS } from '../../data/prayerContent.js';
8
9export function renderPrayerScreen() {
10  const root = document.getElementById('prayerScreenRoot');
11  if (!root) return;
12
13  const featuredId = getFeaturedCountryId();
14  const tomorrowId = PRAYER_IDS[(PRAYER_IDS.indexOf(featuredId) + 1) % PRAYER_IDS.length];
15  const featuredCountry = getCountryById(featuredId);
16  const tomorrowCountry = getCountryById(tomorrowId);
17  const content = PRAYER_CONTENT[featuredId];
18  const counts = getPrayerCounts();
19  const prayerCount = counts[featuredId] ?? 0;
20  const prayerCountLabel = prayerCount > 0
21    ? `${safe(prayerCount)} ${prayerCount === 1 ? 'pessoa orou' : 'pessoas oraram'} hoje`
22    : 'Seja a primeira pessoa a orar hoje';
23  const user = getUser();
24  const isPraying = user.praying.includes(featuredId);
25
26  const committedHTML = user.praying
27    .filter(id => PRAYER_CONTENT[id])
28    .map(id => {
29      const c = getCountryById(id);
30      if (!c) return '';
31      return `<div class="prayer-chip" data-prayer-open="${safe(id)}">
32        <span class="prayer-chip-flag">${safe(c.flag)}</span><span class="prayer-chip-name">${safe(c.name)}</span>
33      </div>`;
34    }).join('');
35
36  root.innerHTML = `
37    <div class="section-top">
38      <span class="prayer-eyebrow">Vigília de campo</span>
39      <h2>Oração</h2>
40    </div>
41    <div class="prayer-featured-card">
42      <div class="prayer-featured-head">
43        <span class="prayer-featured-flag">${safe(featuredCountry?.flag || '🌍')}</span>
44        <div>
45          <div class="prayer-featured-name">${safe(featuredCountry?.name || featuredId)}</div>
46          <div class="prayer-featured-meta">${safe(featuredCountry?.region || '-')} · ${safe(featuredCountry?.persecution?.level || '-')}</div>
47        </div>
48      </div>
49      <div class="prayer-block">
50        <span class="prayer-label">Contexto</span>
51        <p>${safe(featuredCountry?.content?.context || 'Dados em breve.')}</p>
52      </div>
53      <div class="prayer-block">
54        <span class="prayer-label">Obstáculos ao ministério</span>
55        <p>${safe(featuredCountry?.content?.challenges || 'Dados em breve.')}</p>
56      </div>
57      <div class="prayer-block">
58        <span class="prayer-label">Tópicos de oração</span>
59        <div class="prayer-topics">
60          ${content.prayerTopics.map(t => `
61            <div class="prayer-topic">
62              <span class="prayer-topic-bullet">•</span>
63              <div>
64                <div class="prayer-topic-title">${safe(t.title)}</div>
65                <div class="prayer-topic-detail">${safe(t.detail)}</div>
66              </div>
67            </div>`).join('')}
68        </div>
69      </div>
70      <div class="prayer-block prayer-verse">
71        <span class="prayer-label">Texto bíblico</span>
72        <p class="prayer-verse-text">&ldquo;${safe(content.bibleText)}&rdquo;</p>
73        <span class="prayer-verse-ref">${safe(content.bibleRef)}</span>
74      </div>
75      <div class="prayer-footer">
76        <span class="prayer-count">${prayerCountLabel}</span>
77        <button class="prayer-pray-btn ${isPraying ? 'active' : ''}" type="button" id="prayerPrayBtn">${isPraying ? 'Orando ✓' : 'Orar agora'}</button>
78      </div>
79    </div>
80    <div class="prayer-tomorrow">Amanhã: <span>${safe(tomorrowCountry?.flag || '')} ${safe(tomorrowCountry?.name || tomorrowId)}</span></div>
81    <div class="prayer-commitment">
82      <span class="prayer-label">Meu compromisso</span>
83      ${committedHTML
84        ? `<div class="prayer-chip-row">${committedHTML}</div>`
85        : `<div class="prayer-empty">Toque em "orar agora" num país pra começar sua lista.</div>`}
86    </div>`;
87
88  document.getElementById('prayerPrayBtn')?.addEventListener('click', () => {
89    togglePrayerCommitment(featuredId);
90    renderPrayerScreen();
91    updateStats();
92    updateMap();
93  });
94
95  root.querySelectorAll('[data-prayer-open]').forEach(chip => {
96    chip.addEventListener('click', () => openCountry(chip.dataset.prayerOpen));
97  });
98}
99
100// Card de entrada na Home (mapa) + atalho no Perfil — a tela de Oração não tem

101// aba própria na nav (decisão do Ehnzo), só é alcançada por esses dois pontos.
102export function renderPrayerTeasers() {
103  const featuredId = getFeaturedCountryId();
104  const featuredCountry = getCountryById(featuredId);
105  const flag = safe(featuredCountry?.flag || '🌍');
106  const name = safe(featuredCountry?.name || featuredId);
107
108  const home = document.getElementById('homePrayerTeaser');
109  if (home) {
110    home.innerHTML = `
111      <span class="prayer-teaser-flag">${flag}</span>
112      <div class="prayer-teaser-copy">
113        <span class="prayer-teaser-eyebrow">Oração de hoje</span>
114        <span class="prayer-teaser-name">${name}</span>
115      </div>
116      <span class="prayer-teaser-arrow">→</span>`;
117    home.addEventListener('click', () => window.switchTab('tabOracao'));
118  }
119
120  const profile = document.getElementById('profilePrayerShortcut');
121  if (profile) {
122    profile.innerHTML = `<button class="prayer-shortcut-btn" type="button">🔥 Oração diária</button>`;
123    profile.querySelector('.prayer-shortcut-btn')?.addEventListener('click', () => window.switchTab('tabOracao'));
124  }
125}