增加对不同帖子类型的工具函数
Change-Id: I725923ef606d0f2b434da3f5f4ab6927a5fe3e9a
diff --git a/src/components/pet/index.tsx b/src/components/pet/index.tsx
new file mode 100644
index 0000000..c859b68
--- /dev/null
+++ b/src/components/pet/index.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+
+const petList = [
+ {
+ id: 'cat01',
+ name: '喵喵',
+ image: '/pets/cat.png',
+ mood: '开心',
+ hunger: 50,
+ },
+ {
+ id: 'dog01',
+ name: '汪汪',
+ image: '/pets/dog.png',
+ mood: '饥饿',
+ hunger: 70,
+ }
+];
+
+const PetGame = () => {
+ const [selectedPetIndex, setSelectedPetIndex] = useState(0);
+ const [petStates, setPetStates] = useState(petList);
+
+ // 定时每 5 秒减少一点饥饿值
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setPetStates(prev =>
+ prev.map((pet, index) =>
+ index === selectedPetIndex
+ ? {
+ ...pet,
+ hunger: Math.min(100, pet.hunger + 2),
+ mood: pet.hunger > 80 ? '生气' : pet.mood
+ }
+ : pet
+ )
+ );
+ }, 5000);
+ return () => clearInterval(timer);
+ }, [selectedPetIndex]);
+
+ const handleFeed = () => {
+ setPetStates(prev =>
+ prev.map((pet, index) =>
+ index === selectedPetIndex
+ ? {
+ ...pet,
+ hunger: Math.max(0, pet.hunger - 20),
+ mood: '开心'
+ }
+ : pet
+ )
+ );
+ };
+
+ const handlePet = () => {
+ setPetStates(prev =>
+ prev.map((pet, index) =>
+ index === selectedPetIndex
+ ? { ...pet, mood: '超级开心' }
+ : pet
+ )
+ );
+ };
+
+ const currentPet = petStates[selectedPetIndex];
+
+ return (
+ <div style={{ textAlign: 'center', padding: 20 }}>
+ <h2>当前宠物：{currentPet.name}</h2>
+ <img
+ src={currentPet.image}
+ alt={currentPet.name}
+ style={{ width: 200, height: 200, cursor: 'pointer' }}
+ onClick={handlePet}
+ />
+ <p>情绪：{currentPet.mood}</p>
+ <p>饥饿值：{currentPet.hunger}/100</p>
+
+ <button onClick={handleFeed}>🍖 喂食</button>
+
+ <div style={{ marginTop: 20 }}>
+ <h4>切换宠物：</h4>
+ {petStates.map((pet, index) => (
+ <button key={pet.id} onClick={() => setSelectedPetIndex(index)} style={{ marginRight: 8 }}>
+ {pet.name}
+ </button>
+ ))}
+ </div>
+ </div>
+ );
+};
+
+export default PetGame;