script.js

// 勇气罐子管理类
class CourageJarManager {
  constructor() {
    this.notes = this.loadNotes();
    this.init();
  }

  // 从localStorage加载勇气纸条
  loadNotes() {
    const notes = localStorage.getItem("courageJarNotes");
    return notes ? JSON.parse(notes) : [];
  }

  // 保存勇气纸条到localStorage
  saveNotes() {
    localStorage.setItem("courageJarNotes", JSON.stringify(this.notes));
  }

  // 初始化应用
  init() {
    this.renderPaperBalls();
    this.updatePaperCount();
    this.setupEventListeners();
  }

  // 设置事件监听器
  setupEventListeners() {
    // 摇晃罐子按钮
    const shakeBtn = document.getElementById("shakeBtn");
    shakeBtn.addEventListener("click", () => this.shakeJar());

    // 添加纸条按钮
    const addNoteBtn = document.getElementById("addNoteBtn");
    addNoteBtn.addEventListener("click", () => this.showEditModal());

    // 玻璃罐点击事件 - 直接打开编辑模态框
    const glassJar = document.querySelector(".glass-jar");
    glassJar.addEventListener("click", () => this.showEditModal());

    // 保存纸条按钮
    const saveNoteBtn = document.getElementById("saveNoteBtn");
    saveNoteBtn.addEventListener("click", () => this.saveEditedNote());

    // 取消编辑按钮
    const cancelEditBtn = document.getElementById("cancelEditBtn");
    cancelEditBtn.addEventListener("click", () => this.hideModal());

    // 模态框关闭事件
    const closeBtn = document.querySelector(".close");
    const modal = document.getElementById("noteModal");

    closeBtn.addEventListener("click", () => {
      this.hideModal();
    });

    // 点击模态框外部关闭
    window.addEventListener("click", (e) => {
      if (e.target === modal) {
        this.hideModal();
      }
    });

    // 键盘事件（ESC关闭模态框）
    window.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && modal.style.display === "block") {
        this.hideModal();
      }
    });
  }

  // 添加勇气纸条
  addNote(content) {
    const note = {
      id: Date.now(),
      content: content,
      date: new Date().toISOString(),
    };

    this.notes.push(note);
    this.saveNotes();
    this.animateNewPaperBall(note);
    this.updatePaperCount();
    this.showNotification("勇气纸条已成功存入罐子！", "success");
    return true;
  }

  // 从罐子中随机抽取纸条
  getRandomNote() {
    if (this.notes.length === 0) {
      return null;
    }

    const randomIndex = Math.floor(Math.random() * this.notes.length);
    return this.notes[randomIndex];
  }

  // 渲染纸团
  renderPaperBalls() {
    const container = document.getElementById("paperBallsContainer");
    container.innerHTML = "";

    this.notes.forEach((note, index) => {
      const paperBall = this.createPaperBallElement(note, index);
      container.appendChild(paperBall);
    });
  }

  // 创建纸团元素
  createPaperBallElement(note, index) {
    const paperBall = document.createElement("div");
    paperBall.className = "paper-ball";
    paperBall.dataset.noteId = note.id;

    // 设置纸团的随机位置和大小
    const randomRotation = Math.floor(Math.random() * 360);
    const randomSize = 25 + Math.floor(Math.random() * 10);

    paperBall.style.transform = `rotate(${randomRotation}deg)`;
    paperBall.style.width = `${randomSize}px`;
    paperBall.style.height = `${randomSize}px`;

    // 设置纸团的堆积效果
    const row = Math.floor(index / 6);
    const col = index % 6;
    paperBall.style.marginLeft = `${col * 15}px`;
    paperBall.style.marginBottom = `${row * 10}px`;

    return paperBall;
  }

  // 更新纸团数量显示
  updatePaperCount() {
    const paperCount = document.getElementById("paperCount");
    paperCount.textContent = this.notes.length;
  }

  // 显示编辑模态框
  showEditModal() {
    const modal = document.getElementById("noteModal");
    const noteContent = document.getElementById("noteContentDisplay");
    const notePaper = document.getElementById("notePaper");
    const selectedPaperBall = document.getElementById("selectedPaperBall");
    const modalActions = document.getElementById("modalActions");

    // 清空内容并设置为编辑模式
    noteContent.value = "";
    noteContent.focus();

    // 显示模态框
    modal.style.display = "block";

    // 重置动画
    notePaper.style.display = "none";
    selectedPaperBall.style.display = "block";
    modalActions.style.display = "flex";

    // 纸团打开动画
    setTimeout(() => {
      selectedPaperBall.style.display = "none";
      notePaper.style.display = "block";
      notePaper.style.animation = "paperUnfold 1s ease-out forwards";
    }, 500);
  }

  // 保存编辑的笔记
  saveEditedNote() {
    const noteContent = document
      .getElementById("noteContentDisplay")
      .value.trim();

    if (!noteContent) {
      this.showNotification("请填写纸条内容！", "error");
      return;
    }

    this.addNote(noteContent);

    // 关闭模态框
    this.hideModal();
  }

  // 隐藏模态框
  hideModal() {
    const modal = document.getElementById("noteModal");
    const notePaper = document.getElementById("notePaper");
    const selectedPaperBall = document.getElementById("selectedPaperBall");
    const modalActions = document.getElementById("modalActions");

    // 隐藏操作按钮
    modalActions.style.display = "none";

    // 应用纸张收起动画
    notePaper.style.animation = "paperFold 1s ease-in forwards";

    // 动画完成后显示纸团并关闭模态框
    setTimeout(() => {
      selectedPaperBall.style.display = "block";
      notePaper.style.display = "none";

      // 关闭模态框
      setTimeout(() => {
        modal.style.display = "none";
        // 重置动画状态
        notePaper.style.animation = "";
      }, 500);
    }, 1000);
  }

  // 新纸团放入动画
  animateNewPaperBall(note) {
    // 创建临时纸团用于动画
    const tempPaperBall = document.createElement("div");
    tempPaperBall.className = "paper-ball new-paper-ball";
    document.body.appendChild(tempPaperBall);

    // 纸团下落动画
    tempPaperBall.style.animation = "paperDrop 1s ease-in forwards";

    // 动画结束后添加到罐子里
    setTimeout(() => {
      this.renderPaperBalls();
      tempPaperBall.remove();
    }, 1000);
  }

  // 摇晃罐子动画
  shakeJar() {
    if (this.notes.length === 0) {
      this.showNotification("勇气罐子还是空的，快去添加纸条吧！", "error");
      return;
    }

    const glassJar = document.getElementById("glassJar");
    glassJar.classList.add("shaking");

    // 摇晃结束后显示随机纸条
    setTimeout(() => {
      glassJar.classList.remove("shaking");
      this.showRandomNote();
    }, 1500);
  }

  // 显示随机纸条
  showRandomNote() {
    const note = this.getRandomNote();
    if (!note) return;

    const modal = document.getElementById("noteModal");
    const noteContent = document.getElementById("noteContentDisplay");
    const notePaper = document.getElementById("notePaper");
    const selectedPaperBall = document.getElementById("selectedPaperBall");
    const modalActions = document.getElementById("modalActions");

    // 显示现有内容
    noteContent.value = note.content;

    // 显示模态框（查看模式）
    modal.style.display = "block";

    // 重置动画
    notePaper.style.display = "none";
    selectedPaperBall.style.display = "block";
    modalActions.style.display = "none";

    // 纸团打开动画
    setTimeout(() => {
      selectedPaperBall.style.display = "none";
      notePaper.style.display = "block";
      notePaper.style.animation = "paperUnfold 1s ease-out forwards";
    }, 500);
  }

  // 显示通知
  showNotification(message, type = "success") {
    // 创建通知元素
    const notification = document.createElement("div");
    notification.className = `notification ${type}`;
    notification.textContent = message;

    // 添加到页面
    document.body.appendChild(notification);

    // 3秒后自动移除
    setTimeout(() => {
      notification.style.animation = "slideOutRight 0.3s ease";
      setTimeout(() => {
        if (notification.parentNode) {
          notification.parentNode.removeChild(notification);
        }
      }, 300);
    }, 3000);
  }
}

// 页面加载完成后初始化
window.addEventListener("DOMContentLoaded", () => {
  // 初始化勇气罐子应用
  new CourageJarManager();
});