ai_game/client/js/scenes/ChapterScene.js

/**
 * 章节选择场景
 */
import BaseScene from './BaseScene';

export default class ChapterScene extends BaseScene {
  constructor(main, params) {
    super(main, params);
    this.storyId = params.storyId;
    this.story = null;
    this.nodeList = [];
    this.scrollY = 0;
    this.maxScrollY = 0;
    this.isDragging = false;
    this.lastTouchY = 0;
    this.hasMoved = false;
  }

  init() {
    this.story = this.main.storyManager.currentStory;
    if (!this.story || !this.story.nodes) {
      this.main.sceneManager.switchScene('home');
      return;
    }
    this.buildNodeList();
    this.calculateMaxScroll();
  }

  buildNodeList() {
    const nodes = this.story.nodes;
    this.nodeList = [];
    
    // 遍历所有节点
    Object.keys(nodes).forEach(key => {
      const node = nodes[key];
      this.nodeList.push({
        key: key,
        title: this.getNodeTitle(node, key),
        isEnding: node.is_ending,
        endingName: node.ending_name,
        endingType: node.ending_type,
        speaker: node.speaker,
        preview: this.getPreview(node.content)
      });
    });

    // 按关键字排序，start在前，ending在后
    this.nodeList.sort((a, b) => {
      if (a.key === 'start') return -1;
      if (b.key === 'start') return 1;
      if (a.isEnding && !b.isEnding) return 1;
      if (!a.isEnding && b.isEnding) return -1;
      return a.key.localeCompare(b.key);
    });
  }

  getNodeTitle(node, key) {
    if (key === 'start') return '故事开始';
    if (node.is_ending) return `结局：${node.ending_name || '未知'}`;
    if (node.speaker && node.speaker !== '旁白') return `${node.speaker}的对话`;
    return `章节 ${key}`;
  }

  getPreview(content) {
    if (!content) return '';
    const text = content.replace(/\n/g, ' ').trim();
    return text.length > 40 ? text.substring(0, 40) + '...' : text;
  }

  calculateMaxScroll() {
    const cardHeight = 85;
    const gap = 12;
    const headerHeight = 80;
    const bottomPadding = 50; // 底部留出空间
    const contentHeight = this.nodeList.length * (cardHeight + gap) + headerHeight + bottomPadding;
    this.maxScrollY = Math.max(0, contentHeight - this.screenHeight);
    console.log('[ChapterScene] nodeList长度:', this.nodeList.length, 'contentHeight:', contentHeight, 'screenHeight:', this.screenHeight, 'maxScrollY:', this.maxScrollY);
  }

  update() {}

  render(ctx) {
    this.renderBackground(ctx);
    this.renderHeader(ctx);
    this.renderNodeList(ctx);
  }

  renderBackground(ctx) {
    const gradient = ctx.createLinearGradient(0, 0, 0, this.screenHeight);
    gradient.addColorStop(0, '#0f0c29');
    gradient.addColorStop(0.5, '#302b63');
    gradient.addColorStop(1, '#24243e');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, this.screenWidth, this.screenHeight);
  }

  renderHeader(ctx) {
    // 顶部遮罩
    const headerGradient = ctx.createLinearGradient(0, 0, 0, 80);
    headerGradient.addColorStop(0, 'rgba(15,12,41,1)');
    headerGradient.addColorStop(1, 'rgba(15,12,41,0)');
    ctx.fillStyle = headerGradient;
    ctx.fillRect(0, 0, this.screenWidth, 80);

    // 返回按钮
    ctx.fillStyle = '#ffffff';
    ctx.font = '16px sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText('‹ 返回', 15, 40);

    // 标题
    ctx.textAlign = 'center';
    ctx.font = 'bold 17px sans-serif';
    ctx.fillText('选择章节', this.screenWidth / 2, 40);

    // 故事名
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.font = '12px sans-serif';
    const title = this.story?.title || '';
    ctx.fillText(title.length > 15 ? title.substring(0, 15) + '...' : title, this.screenWidth / 2, 58);
  }

  renderNodeList(ctx) {
    const padding = 15;
    const cardHeight = 85;
    const cardMargin = 12;
    const startY = 80;

    ctx.save();
    ctx.beginPath();
    ctx.rect(0, startY, this.screenWidth, this.screenHeight - startY);
    ctx.clip();

    this.nodeList.forEach((node, index) => {
      const y = startY + index * (cardHeight + cardMargin) - this.scrollY;
      
      if (y + cardHeight < startY || y > this.screenHeight) return;

      // 卡片背景
      if (node.isEnding) {
        const endingGradient = ctx.createLinearGradient(padding, y, this.screenWidth - padding, y);
        const colors = this.getEndingColors(node.endingType);
        endingGradient.addColorStop(0, colors[0]);
        endingGradient.addColorStop(1, colors[1]);
        ctx.fillStyle = endingGradient;
      } else {
        ctx.fillStyle = 'rgba(255,255,255,0.08)';
      }
      this.roundRect(ctx, padding, y, this.screenWidth - padding * 2, cardHeight, 12);
      ctx.fill();

      // 节点标题
      ctx.fillStyle = node.isEnding ? '#ffffff' : '#ffffff';
      ctx.font = 'bold 14px sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText(node.title, padding + 15, y + 28);

      // 节点预览
      ctx.fillStyle = node.isEnding ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.5)';
      ctx.font = '12px sans-serif';
      const preview = this.truncateText(ctx, node.preview, this.screenWidth - padding * 2 - 30);
      ctx.fillText(preview, padding + 15, y + 52);

      // 节点标识
      if (node.key === 'start') {
        this.renderTag(ctx, this.screenWidth - padding - 60, y + 18, '起点', '#4ecca3');
      } else if (node.isEnding) {
        this.renderTag(ctx, this.screenWidth - padding - 60, y + 18, '结局', '#ffd700');
      }
    });

    ctx.restore();

    // 滚动条
    if (this.maxScrollY > 0) {
      const scrollBarHeight = 50;
      const scrollBarY = startY + (this.scrollY / this.maxScrollY) * (this.screenHeight - startY - scrollBarHeight - 20);
      ctx.fillStyle = 'rgba(255,255,255,0.4)';
      this.roundRect(ctx, this.screenWidth - 8, scrollBarY, 5, scrollBarHeight, 2.5);
      ctx.fill();
      
      // 如果还没滚动到底部，显示提示
      if (this.scrollY < this.maxScrollY - 10) {
        ctx.fillStyle = 'rgba(255,255,255,0.4)';
        ctx.font = '12px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('↑ 上滑查看更多 ↑', this.screenWidth / 2, this.screenHeight - 15);
      }
    }
  }

  getEndingColors(type) {
    switch (type) {
      case 'good': return ['rgba(100,200,100,0.3)', 'rgba(50,150,50,0.2)'];
      case 'bad': return ['rgba(200,100,100,0.3)', 'rgba(150,50,50,0.2)'];
      case 'hidden': return ['rgba(255,215,0,0.3)', 'rgba(200,150,0,0.2)'];
      default: return ['rgba(150,150,255,0.3)', 'rgba(100,100,200,0.2)'];
    }
  }

  renderTag(ctx, x, y, text, color) {
    ctx.font = '10px sans-serif';
    const width = ctx.measureText(text).width + 12;
    ctx.fillStyle = color + '40';
    this.roundRect(ctx, x, y, width, 18, 9);
    ctx.fill();
    ctx.fillStyle = color;
    ctx.textAlign = 'center';
    ctx.fillText(text, x + width / 2, y + 13);
    ctx.textAlign = 'left';
  }

  truncateText(ctx, text, maxWidth) {
    if (!text) return '';
    if (ctx.measureText(text).width <= maxWidth) return text;
    let truncated = text;
    while (truncated.length > 0 && ctx.measureText(truncated + '...').width > maxWidth) {
      truncated = truncated.slice(0, -1);
    }
    return truncated + '...';
  }

  roundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
  }

  onTouchStart(e) {
    const touch = e.touches[0];
    this.lastTouchY = touch.clientY;
    this.touchStartY = touch.clientY;
    this.touchStartX = touch.clientX;
    this.isDragging = true;
    this.hasMoved = false;
  }

  onTouchMove(e) {
    if (!this.isDragging) return;
    const touch = e.touches[0];
    const deltaY = this.lastTouchY - touch.clientY;
    if (Math.abs(deltaY) > 3) {
      this.hasMoved = true;
    }
    this.scrollY += deltaY;
    this.scrollY = Math.max(0, Math.min(this.scrollY, this.maxScrollY));
    this.lastTouchY = touch.clientY;
  }

  onTouchEnd(e) {
    this.isDragging = false;
    const touch = e.changedTouches[0];
    const x = touch.clientX;
    const y = touch.clientY;

    if (this.hasMoved) return;

    // 返回按钮
    if (y < 60 && x < 80) {
      this.main.sceneManager.switchScene('ending', {
        storyId: this.storyId,
        ending: this.main.storyManager.getEndingInfo()
      });
      return;
    }

    // 点击节点
    const padding = 15;
    const cardHeight = 85;
    const cardMargin = 12;
    const startY = 80;

    for (let i = 0; i < this.nodeList.length; i++) {
      const cardY = startY + i * (cardHeight + cardMargin) - this.scrollY;
      if (y >= cardY && y <= cardY + cardHeight && x >= padding && x <= this.screenWidth - padding) {
        this.selectNode(this.nodeList[i].key);
        return;
      }
    }
  }

  selectNode(nodeKey) {
    this.main.storyManager.currentNodeKey = nodeKey;
    this.main.sceneManager.switchScene('story', { storyId: this.storyId });
  }
}