diff --git a/js/app.js b/js/app.js
index 6306422..0750937 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
- var VER = '26100167';
+ var VER = '26100168';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3341,101 +3341,137 @@
return '
';
}
- /* 星图 + 聚焦卡 + 清单(三改)。星星位置按 id 哈希定在网格里再抖一抖,同一句每次出现在同一处 */
- let fi = 0, focT = null, focHold = false;
+ /* 四改:一屏一句的竖滑沉浸页。slide 0 = 封面(标题 + 星座),slide k = 第 k 句。 */
+ const RM = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches);
+ const AURA = [['#6B4AA8', '#C2667A'], ['#3F4FA6', '#8E5BB0'], ['#9A4F86', '#E0907A'], ['#365C9E', '#7A58AE'], ['#7D3F8C', '#D27A9A']];
const hsh = s => { let h = 7; for (const c of String(s)) h = (h * 31 + c.charCodeAt(0)) >>> 0; return h; };
- function paintSky(l) {
+ let cur = 0, io = null, vl = [];
+ /* 沉浸页先看别人的,自己说的放最后(金色收尾) */
+ const vlist = () => list().filter(x => !x.mine).concat(list().filter(x => x.mine));
+ const whv = $('#whv');
+ function skySvg(l) {
const n = l.length, cols = n > 12 ? 5 : 4, rows = Math.max(2, Math.ceil(n / cols));
const pts = l.map((it, i) => {
- const h = hsh(it.id), c = i % cols, r = Math.floor(i / cols);
- /* 蛇形排列,连线不来回横穿 */
- const cc = r % 2 ? cols - 1 - c : c;
- const x = ((cc + .5 + ((h % 100) / 100 - .5) * .62) / cols) * 100;
- const y = ((r + .5 + (((h >> 8) % 100) / 100 - .5) * .55) / rows) * 100;
- const sz = it.mine ? 13 : Math.round(5 + Math.min(it.hugs || 0, 40) / 40 * 11);
- return { x, y, sz, it, i };
+ const h = hsh(it.id), c = i % cols, r = Math.floor(i / cols), cc = r % 2 ? cols - 1 - c : c;
+ return { i, it, x: ((cc + .5 + ((h % 100) / 100 - .5) * .62) / cols) * 100, y: ((r + .5 + (((h >> 8) % 100) / 100 - .5) * .55) / rows) * 100,
+ sz: it.mine ? 12 : Math.round(5 + Math.min(it.hugs || 0, 40) / 40 * 10) };
});
- $('#whpSky').innerHTML =
- '
' +
- pts.map(p => '
').join('');
+ pts.map(p => '
').join('');
}
- function paintFocus(anim) {
- const l = list(), it = l[fi];
- const box = $('#whpFocus');
- if (!it) { box.innerHTML = ''; return; }
- box.innerHTML =
- '
' + (it.mine ? '我说的' : '') + 'No.' + (fi + 1) + ' / ' + l.length + '' +
- '
' +
- '
' + esc(it.text) + '
' +
- '
孕 ' + it.week + ' 周 · ' + esc(it.ago) + '' + hugBtn(it) + '
';
- $$('.whs-star', $('#whpSky')).forEach(s => s.classList.toggle('on', +s.dataset.fi === fi));
- }
- function focusTo(i, user) {
- const n = list().length;
- if (!n) return;
- fi = (i + n) % n;
- if (user) focHold = true; // 用户自己点过就不再自动轮播,免得正要抱抱时换走
- paintFocus(true);
+ function slide(it, i, n) {
+ const t = String(it.text || ''), len = [...t].length;
+ const fs = len <= 9 ? 'xl' : len <= 18 ? 'l' : 'm';
+ const chars = [...t].map((c, k) => '
' + esc(c) + '').join('');
+ const rail = it.mine
+ ? '
' + HEART + '' + (it.hugs || 0) + '收到的抱抱
'
+ : '
抱抱';
+ return '
' +
+ '' +
+ '
' + String(i + 1).padStart(2, '0') + '/ ' + String(n).padStart(2, '0') + '' + (it.mine ? '我说的' : '') + '
' +
+ '
' + chars + '
' +
+ '
孕 ' + it.week + ' 周的妈妈 · ' + esc(it.ago) + '
' +
+ (i === 0 && !it.mine ? '
双击屏幕,也能给她一个抱抱
' : '') +
+ '
' + rail + '
';
}
function paintList(l) {
- $('#whpCount').textContent = l.length + ' 句 · 最新在上';
+ $('#whpCount').textContent = l.length + ' 句 · 我说的在最后';
$('#whpList').innerHTML = l.map((it, i) => {
const lv = it.mine ? 'mine' : it.hugs >= 25 ? 'l3' : it.hugs >= 10 ? 'l2' : 'l1';
- return '