翻译成中文

src/app/ui/MatchPrediction.jsx

@@ -5,7 +5,7 @@ import Alert from "./components/Alert";
 import { useRouter } from "next/navigation";
 
 import { format } from "date-fns";
-import zhCN from "date-fns/locale/zh-CN"; // 中文本地化
+import zhCN from "date-fns/locale/zh-CN";
 
 import Image from "next/image";
 import { Minus, Plus, Play, X, Check, Clock } from "lucide-react";
@@ -278,7 +278,6 @@ const MatchPrediction = ({ selectedDayMatches }) => {
     <div className="bg-blue-600 text-white p-6 max-w-md mx-auto  min-h-screen">
       <>
         {selectedDayMatches.map((match) => {
-          // 格式化日期为 "10月10日星期四"
           const formattedDate = format(new Date(match.date), "MM月dd日EEEE", {
             locale: zhCN,
           });
@@ -286,8 +285,6 @@ const MatchPrediction = ({ selectedDayMatches }) => {
           const prediction = predictionMap[match._id];
           const whoWillWin = prediction ? prediction.whoWillWin : null;
           const totalGoals = prediction ? prediction.totalGoals : null;
-          console.log("whoWillWin from prediction", whoWillWin);
-          console.log("totalGoals", totalGoals);
           const firstTeamToScore = prediction
             ? prediction.firstTeamToScore
             : null;
@@ -297,7 +294,6 @@ const MatchPrediction = ({ selectedDayMatches }) => {
 
           return (
             <div key={match._id} className="bg-blue-900">
-              {/* 比赛日期和时间 */}
               <div className="flex justify-between items-center bg-blue-800 text-white py-2 px-4 rounded-lg">
                 <span className="text-sm">{formattedDate}</span>
                 <div className="flex items-center">
@@ -306,12 +302,10 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                 </div>
               </div>
 
-              {/* 比赛标题 */}
               <h2 className="text-center text-2xl font-bold my-4">
-                WHO WILL WIN?
+                谁将获胜？
               </h2>
 
-              {/* 主队 vs 客队 */}
               <div className="flex justify-between mb-6 gap-2 px-4">
                 <div className="flex-1">
                   <TeamCard
@@ -327,28 +321,21 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                   />
                 </div>
 
-                {/* <div className="flex-1">
-                  <TeamCard
-                    flag="https://games.the-afc.com/predictor/static-assets/build/images/clubs/Draw_flag.png?v=2.4"
-                    name="Draw"
-                    pickedBy={match.pickedBy}
-                    selected={selectedWinTeam === "Draw"}
-                    onClick={() => handleWinTeamSelect("Draw")}
-                  />
-                </div> */}
-
                 <div
                   className="flex flex-col items-center  flex-1 pt-2 bg-[hsla(0,0%,100%,0.1)] rounded-md relative"
                   onClick={() => handleWinTeamSelect(match._id, "draw")}
                 >
-                  <Image
-                    src="/images/draw_flag.png"
-                    width={40}
-                    height={40}
-                    alt="Handshake"
-                    className="mb-2"
-                  />
-                  <span className="text-sm py-2">Draw</span>
+                  <div className="w-10 h-10 mb-2">
+                    <Image
+                      src="/images/draw_flag.png"
+                      width={40}
+                      height={40}
+                      alt="平局"
+                      // className="mb-2"
+                    />
+                  </div>
+
+                  <span className="text-sm py-2">平局</span>
                   <div
                     className={`w-6 h-6 rounded-full  ${
                       (
@@ -388,9 +375,8 @@ const MatchPrediction = ({ selectedDayMatches }) => {
               </div>
 
               <div className="px-3 bg-blue-800">
-                {/* 先得分的队伍 */}
                 <div className="flex justify-between items-center  h-12 bg-blue-800 border-b border-[#f2f2f2]">
-                  <span className="text-sm">First team to score</span>
+                  <span className="text-sm">首先进球的球队</span>
                   {selectedFirstTeamToScoreOfMatch[match._id] ||
                   firstTeamToScore ? (
                     <Image
@@ -400,7 +386,7 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                       )}
                       width={32}
                       height={32}
-                      alt={`${selectedFirstTeamToScoreOfMatch[match._id]} flag`}
+                      alt={`${selectedFirstTeamToScoreOfMatch[match._id]} 旗帜`}
                       onClick={() =>
                         openSelectFirstTeamModal(
                           match,
@@ -425,12 +411,8 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                   )}
                 </div>
 
-                {/* 总进球数 */}
                 <div className="flex justify-between items-center mb-4 bg-blue-800  h-12">
-                  {/* <span className="text-sm"> */}
-                  <span className="text-sm">
-                    Total number of goals to be scored
-                  </span>
+                  <span className="text-sm">比赛总进球数</span>
                   <div
                     className={`flex items-center ${
                       totalGoalCountOfMatch[match._id] != null
@@ -498,9 +480,6 @@ const FirstTeamToScoreModal = ({
   selectedFirstTeamToScore,
   selectedMatch,
 }) => {
-  console.log("selectedMatch", selectedMatch);
-  console.log("selectedFirstTeamToScore", selectedFirstTeamToScore);
-
   const handleSelect = (selectedTeam) => {
     onSelectFirstScoreTeam(selectedMatch._id, selectedTeam);
   };
@@ -513,13 +492,13 @@ const FirstTeamToScoreModal = ({
       <div className="p-6">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold text-purple-800">
-            FIRST TEAM TO SCORE?
+            首先进球的球队是？
           </h2>
           <button onClick={onClose} className="text-gray-500">
             <X size={24} />
           </button>
         </div>
-        <p className="text-gray-600 mb-6">Play for bonus points</p>
+        <p className="text-gray-600 mb-6">赢取额外积分</p>
 
         <div className="space-y-3">
           <TeamOption
@@ -535,11 +514,11 @@ const FirstTeamToScoreModal = ({
           />
           <TeamOption
             flag={no_goal_logo}
-            name="no_goal"
+            name="无进球"
             isSelected={selectedFirstTeamToScore === "no_goal"}
             onSelect={() =>
               handleSelect({
-                name: "no_goal",
+                name: "无进球",
                 logo: no_goal_logo,
                 type: "no_goal",
               })
@@ -562,7 +541,7 @@ const FirstTeamToScoreModal = ({
         className="w-full bg-purple-600 text-white py-4 text-center font-bold"
         onClick={onClose}
       >
-        Close
+        关闭
       </button>
     </div>
   );
@@ -579,14 +558,11 @@ const TeamCard = ({ flag, name, lastMatches, pickedBy, selected, onClick }) => {
           src={getValidImageUrl(flag)}
           width={40}
           height={40}
-          alt={`${name} flag`}
+          alt={`${name} 旗帜`}
           className="mb-2"
         />
       </div>
       <span className="font-bold mb-1 pt-4 pb-6">{name}</span>
-      {/* <span className="text-xs mb-1">Last 5 matches</span>
-          <span className="text-sm mb-1">{lastMatches}</span>
-          <span className="text-xs mb-2">Picked by: {pickedBy}%</span> */}
       <div
         className={`w-6 h-6 rounded-full absolute bottom-0 transform translate-y-1/3 ${
           selected
@@ -613,7 +589,7 @@ const TeamOption = ({ flag, name, isSelected, onSelect }) => (
         width={30}
         height={30}
         className="mr-3"
-        alt={`${name} flag`}
+        alt={`${name} 旗帜`}
         onClick={onSelect}
       />
       <span>{name}</span>
@@ -622,31 +598,4 @@ const TeamOption = ({ flag, name, isSelected, onSelect }) => (
   </div>
 );
 
-// const FlagImage = ({ src, alt, width, height, className, onClick }) => {
-//   const isSvg = src.split("?")[0].endsWith(".svg");
-//   if (isSvg) {
-//     return (
-//       <img
-//         src={src}
-//         alt={alt}
-//         width={width}
-//         height={height}
-//         className={className}
-//         onClick={onClick}
-//       />
-//     );
-//   }
-
-//   return (
-//     <Image
-//       src={src}
-//       width={width}
-//       height={height}
-//       alt={alt}
-//       className={className}
-//       onClick={onClick}
-//     />
-//   );
-// };
-
 export default MatchPrediction;