Skip to content

Commit 4c31ac7

Browse files
committed
feat: updated demo
1 parent 9859531 commit 4c31ac7

3 files changed

Lines changed: 56 additions & 51 deletions

File tree

app/liturgical-calendar/app.js

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -245,71 +245,73 @@ function renderDay(year, month, day, exports, memory) {
245245
const occFlags = ev.getUint8(4)
246246
const secCount = ev.getUint8(5)
247247

248-
if (primaryIndex === 0) {
249-
container.textContent = '(aucune fête)'
250-
container.hidden = false
251-
return
252-
}
248+
let html = ''
253249

254-
let feastFlags = 0,
255-
feastId = 0
256-
if (exports.kal_wasm_read_feast(primaryIndex) === KAL_ENGINE_OK) {
257-
const fv = new DataView(memory.buffer, feastPtr, 4)
258-
feastId = fv.getUint16(0, true)
259-
feastFlags = fv.getUint16(2, true)
260-
}
250+
if (primaryIndex != 0) {
251+
let feastFlags = 0,
252+
feastId = 0
253+
if (exports.kal_wasm_read_feast(primaryIndex) === KAL_ENGINE_OK) {
254+
const fv = new DataView(memory.buffer, feastPtr, 4)
255+
feastId = fv.getUint16(0, true)
256+
feastFlags = fv.getUint16(2, true)
257+
}
261258

262-
const { precedence, color, period, nature, hasVigil } = decodeFeastFlags(feastFlags)
263-
const { hasVesperaeI, hasVigilia } = decodeOccurrenceFlags(occFlags)
259+
const { precedence, color, period, nature, hasVigil } = decodeFeastFlags(feastFlags)
260+
const { hasVesperaeI, hasVigilia } = decodeOccurrenceFlags(occFlags)
264261

265-
// Alignement structurel : Résolution sécurisée via l'ID de la célébration principale
266-
const res = resolveById(exports, memory, feastId, year)
267-
const label = res ? res.label : `Fête inconnue (0x${feastId.toString(16).toUpperCase()})`
268-
const annotation = res ? res.annotation : null
262+
// Alignement structurel : Résolution sécurisée via l'ID de la célébration principale
263+
const res = resolveById(exports, memory, feastId, year)
264+
const label = res ? res.label : `Fête inconnue (0x${feastId.toString(16).toUpperCase()})`
265+
const annotation = res ? res.annotation : null
269266

270-
let html = ''
271-
html += `<section class="feast primary color-${COLOR_CSS[color] ?? ''}">
267+
html = `<div class="grid4 gap">`
268+
html += `<article class="card feast primary color-${COLOR_CSS[color] ?? ''}" style="text-align: left;">
272269
<h2>${label}</h2>`
273-
if (annotation) html += `<p class="annotation">${renderMarkdown(annotation)}</p>`
274-
html += `<ul>
270+
if (annotation) html += `<p class="annotation">${renderMarkdown(annotation)}</p>`
271+
html += `<ul>
275272
<li>Feast ID: 0x${feastId.toString(16).toUpperCase().padStart(4, '0')}</li>
276273
<li>Précédence: ${PRECEDENCE[precedence] ?? precedence} (${precedence + 1})</li>
277274
<li>Couleur: ${COLOR[color] ?? color}</li>
278275
<li>Période: ${PERIOD[period] ?? period}</li>
279276
<li>Nature: ${NATURE[nature] ?? nature}</li>`
280-
if (hasVigil) html += `<li>Vigile propre: oui (invariant)</li>`
281-
if (hasVesperaeI) html += `<li>Vêpres I: ce soir</li>`
282-
if (hasVigilia) html += `<li>Vigile: ce soir</li>`
283-
html += `</ul></section>`
284-
285-
if (secCount > 0 && exports.kal_wasm_read_secondary(secOffset, secCount) === KAL_ENGINE_OK) {
286-
const sv = new DataView(memory.buffer, exports.kal_wasm_secondary_ptr(), secCount * 2)
287-
html += `<section class="secondaries"><h2 class="sr-only">Commémorations</h2>`
288-
for (let i = 0; i < secCount; i++) {
289-
const ridx = sv.getUint16(i * 2, true)
290-
if (ridx === 0) continue
291-
const resSec = resolveSecondary(exports, memory, ridx, year)
292-
if (!resSec) continue
293-
const sf = decodeFeastFlags(resSec.feastFlags)
294-
html += `<div class="feast secondary color-${COLOR_CSS[sf.color] ?? ''}">
295-
<h3>${resSec.label}</h3>`
296-
if (resSec.annotation) html += `<p class="annotation">${renderMarkdown(resSec.annotation)}</p>`
297-
html += `<ul>
277+
if (hasVigil) html += `<li>Vigile propre: oui (invariant)</li>`
278+
if (hasVesperaeI) html += `<li>Vêpres I: ce soir</li>`
279+
if (hasVigilia) html += `<li>Vigile: ce soir</li>`
280+
html += `</ul></article>`
281+
282+
if (secCount > 0 && exports.kal_wasm_read_secondary(secOffset, secCount) === KAL_ENGINE_OK) {
283+
const sv = new DataView(memory.buffer, exports.kal_wasm_secondary_ptr(), secCount * 2)
284+
html += `</div><hr><div class="grid4 gap">`
285+
for (let i = 0; i < secCount; i++) {
286+
const ridx = sv.getUint16(i * 2, true)
287+
if (ridx === 0) continue
288+
const resSec = resolveSecondary(exports, memory, ridx, year)
289+
if (!resSec) continue
290+
const sf = decodeFeastFlags(resSec.feastFlags)
291+
html += `<article class="card secondaries feast secondary color-${COLOR_CSS[sf.color] ?? ''}" style="text-align: left;">
292+
<h2>${resSec.label}</h2>`
293+
if (resSec.annotation) html += `<p class="annotation">${renderMarkdown(resSec.annotation)}</p>`
294+
html += `<ul>
298295
<li>Feast ID: 0x${ridx.toString(16).toUpperCase().padStart(4, '0')}</li>
299296
<li>Précédence: ${PRECEDENCE[sf.precedence] ?? sf.precedence} (${sf.precedence + 1})</li>
300297
<li>Couleur: ${COLOR[sf.color] ?? sf.color}</li>
301298
<li>Nature: ${NATURE[sf.nature] ?? sf.nature}</li>
302-
</ul></div>`
299+
</ul></article>`
300+
}
303301
}
304-
html += `</section>`
302+
html += `</div>`
303+
} else {
304+
html =
305+
'<div class="message-highlight"><svg class="icon" role="img" focusable="false"><use href="/sprites/util.svg#pencil"></use></svg><div><p>Pas de célébration répertoriée pour cette date.</p></div></div>'
305306
}
306307

307308
const prev = doyToMonthDay(Math.max(0, doy - 1))
308309
const next = doyToMonthDay(Math.min(365, doy + 1))
309-
html += `<nav class="day-nav">
310-
<a href="${APP_ROOT}${year}/${zeroPad(prev.month)}/${zeroPad(prev.day)}">← Jour précédent</a>
311-
<a href="${APP_ROOT}${year}">Année ${year}</a>
312-
<a href="${APP_ROOT}${year}/${zeroPad(next.month)}/${zeroPad(next.day)}">Jour suivant →</a>
310+
html += `<hr>
311+
<nav class="flex gap">
312+
<a class="button" href="${APP_ROOT}${year}/${zeroPad(prev.month)}/${zeroPad(prev.day)}">← Jour précédent</a>
313+
<a class="button" href="${APP_ROOT}${year}">Année ${year}</a>
314+
<a class="button" href="${APP_ROOT}${year}/${zeroPad(next.month)}/${zeroPad(next.day)}">Jour suivant →</a>
313315
</nav>`
314316

315317
container.innerHTML = html

app/liturgical-calendar/index.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
1414
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
1515
<link rel="stylesheet" href="../../styles/main.css" media="screen" />
16-
<link rel="stylesheet" href="liturgical-calendar.css?v=20260519" media="screen" />
16+
<link rel="stylesheet" href="liturgical-calendar.css?v=6" media="screen" />
17+
<link rel="stylesheet" href="/styles/main.css" media="screen" />
18+
<link rel="stylesheet" href="/styles/print.css" media="print" />
19+
<link rel="preload" href="/fonts/notoSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
20+
<link rel="preload" href="/fonts/notoSerif-Regular.woff2" as="font" type="font/woff2" crossorigin />
1721
</head>
1822
<body class="type-index">
1923
<a class="sr-only" href="#main">Aller au contenu</a>
@@ -62,6 +66,6 @@ <h1 class="main-heading" id="h1">Calendarium Romanum Generale</h1>
6266
</div>
6367
</noscript>
6468
</div>
65-
<script type="module" src="/app/liturgical-calendar/app.js?v=20260519"></script>
69+
<script type="module" src="/app/liturgical-calendar/app.js?v=6"></script>
6670
</body>
6771
</html>

app/liturgical-calendar/liturgical-calendar.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
table.liturgical-calendar {
2-
& > * > :first-child,
3-
& > * > :nth-child(2) {
2+
& :where(.doy, .date) {
43
width: 3em;
54
}
6-
th {
5+
thead th {
76
text-align: start;
87
}
98
.feasts {

0 commit comments

Comments
 (0)