Merge branch 'feature/nametag'

README.md

@@ -49,7 +49,7 @@ python -m http.server 8000
 现有页面：
 
 - `page1.html`：完整日落城市文字画，空白处铺淡色「天」。
-- `page3.html`：无「天」背景的演职员表；前景标题「演职员表」，背景为电线、麻雀、枪、草、消防栓与下半屏火山。
+- `page3.html`：无「天」背景的演职员表；含 35 个演职员 nametag、电线、麻雀、草、消防栓与下半屏火山。
 
 共用与专属：
 

assets/css/page3.css

@@ -1,14 +1,13 @@
-/* 第 3 页：无「天」背景；只保留电线、麻雀、枪、草与前景标题 */
+/* 第 3 页：无「天」背景；只保留电线、麻雀、草与前景标题 */
 
 .wire { color: #8794a5; }
 .sparrow { color: #ff7a3f; }
-.gun { color: #8b6f55; }
 .grass { color: #4fc353; }
 .hydrant { color: #a93b43; }
-/* 火山岩 / 熔岩参考色，按暗度 70% 压暗（保留 30% 明度） */
+/* 火山岩 / 熔岩参考色，按明度 50% 处理 */
-.rock { color: color-mix(in srgb, #d07a38 30%, #000); }
+.rock { color: color-mix(in srgb, #d07a38 50%, #000); }
-.lava-a { color: color-mix(in srgb, #ff8f3f 30%, #000); }
+.lava-a { color: color-mix(in srgb, #ff8f3f 50%, #000); }
-.lava-b { color: color-mix(in srgb, #ff5a2a 30%, #000); }
+.lava-b { color: color-mix(in srgb, #ff5a2a 50%, #000); }
 
 /* 前景标题：不参与网格，字号与位置自由；
    top 的 em 相对自身 1.6em 字号，3.125em = 距顶部 5 个背景格 */
@@ -26,3 +25,24 @@
   white-space: nowrap;
   z-index: 1;
 }
+
+/* 演职员表 nametag：5 × 2 格，格内居中 */
+.nametag {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5em;
+  height: 2em;
+  background: rgba(10, 8, 6, 0.54);
+}
+
+.nametag-name {
+  color: #e6dac6;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0;
+  white-space: nowrap;
+}

assets/js/page3.js

@@ -1,5 +1,5 @@
 /* 第 3 页场景数据
-   前景：演职员表；背景：电线、麻雀、枪、草。
+   前景：演职员表；背景：电线、麻雀、草。
    本页不铺「天」，空白格保持为空。 */
 
 (() => {
@@ -102,17 +102,8 @@
       { text: '电线'.repeat(14), x: 0, y: 8, cls: 'wire' },
       /* 麻雀：竖排于从左到右第四格，落在电线上方 */
       { text: '麻雀', x: 3, y: 6, cls: 'sparrow', vertical: true },
-      /* 火山铺在底部背景，枪、草、消防栓在其上层 */
+      /* 火山铺在底部背景，草、消防栓在其上层 */
       ...volcano,
-      /* 枪：多个「枪」拼出枪形，占最右 4 列，枪口指向左上方的麻雀 */
-      { text: '枪', x: 24, y: 20, cls: 'gun' },
-      { text: '枪', x: 25, y: 20, cls: 'gun' },
-      { text: '枪', x: 25, y: 21, cls: 'gun' },
-      { text: '枪', x: 26, y: 21, cls: 'gun' },
-      { text: '枪', x: 26, y: 22, cls: 'gun' },
-      { text: '枪', x: 27, y: 22, cls: 'gun' },
-      { text: '枪', x: 27, y: 23, cls: 'gun' },
-      { text: '枪', x: 27, y: 24, cls: 'gun' },
       /* 草：最底部一排 */
       { text: '草'.repeat(28), x: 0, y: 43, cls: 'grass' },
       /* 消防栓：最后三行分散竖排九根，左侧留 2 格 */
@@ -131,4 +122,45 @@
   credits.className = 'credits';
   credits.textContent = '演职员表';
   scene.append(credits);
+
+  /* 36 个 nametag：4 列 × 9 行，补满 */
+  const NAMES = [
+    '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若',
+    '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛',
+    '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓',
+    '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥',
+    '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵',
+    '虞韫嘉',
+  ];
+
+  const TAG = {
+    cols: 4,
+    rows: 9,
+    width: 5,
+    height: 2,
+    gapX: 1,
+    gapY: 1,
+    left: 2,
+    top: 12,
+  };
+
+  let nameIndex = 0;
+  for (let row = 0; row < TAG.rows; row++) {
+    for (let col = 0; col < TAG.cols; col++) {
+      const name = NAMES[nameIndex++];
+      if (!name) break;
+
+      const tag = document.createElement('div');
+      tag.className = 'nametag';
+      tag.style.left = `${TAG.left + col * (TAG.width + TAG.gapX)}em`;
+      tag.style.top = `${TAG.top + row * (TAG.height + TAG.gapY)}em`;
+
+      const label = document.createElement('span');
+      label.className = 'nametag-name';
+      label.textContent = name;
+
+      tag.append(label);
+      scene.append(tag);
+    }
+  }
 })();