logo

src/app/api/activity/route.js

@@ -45,6 +45,7 @@ export async function POST(request) {
   await dbConnect();
   try {
     const activityData = await request.json();
+    console.log("activityData", activityData);
     const activity = await Activity.create(activityData);
     const response = NextResponse.json(
       {

src/app/ui/MatchPrediction.jsx

@@ -10,29 +10,8 @@ import zhCN from "date-fns/locale/zh-CN";
 import Image from "next/image";
 import { Minus, Plus, Play, X, Check, Clock, User } from "lucide-react";
 
-const defaultLogo = "/images/default_logo.png";
-
 const no_goal_logo = "/images/no_goal_logo.png";
 
-const isValidUrl = (url) => {
-  try {
-    new URL(url);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const getValidImageUrl = (logo) => {
-  if (isValidUrl(logo)) {
-    return logo;
-  }
-  if (logo && logo.startsWith("/")) {
-    return logo;
-  }
-  return defaultLogo;
-};
-
 const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
   const router = useRouter();
 
@@ -238,7 +217,7 @@ const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
               : [];
           })();
 
-    console.log("prediction 111", prediction);
+    console.log("prediction", prediction);
 
     try {
       const response = await fetch("/api/prediction", {
@@ -305,7 +284,7 @@ const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
               <div className="flex justify-between mb-6 gap-2 px-4">
                 <div className="flex-1">
                   <TeamCard
-                    flag={match.homeTeam.logo}
+                    logoUrl={match.homeTeam.logo}
                     name={match.homeTeam.name}
                     pickedBy={match.pickedBy}
                     selected={
@@ -356,7 +335,7 @@ const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
 
                 <div className="flex-1">
                   <TeamCard
-                    flag={match.awayTeam.logo}
+                    logoUrl={match.awayTeam.logo}
                     name={match.awayTeam.name}
                     pickedBy={100 - match.pickedBy}
                     selected={
@@ -380,10 +359,10 @@ const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
                   {selectedFirstTeamToScoreOfMatch[match._id] ||
                   firstTeamToScore ? (
                     <Image
-                      src={getValidImageUrl(
+                      src={
                         selectedFirstTeamToScoreOfMatch[match._id]?.logo ||
-                          firstTeamToScoreLogo
-                      )}
+                        firstTeamToScoreLogo
+                      }
                       width={32}
                       height={32}
                       alt={`${selectedFirstTeamToScoreOfMatch[match._id]} 旗帜`}
@@ -489,8 +468,8 @@ const FirstTeamToScoreModal = ({
     onSelectFirstScoreTeam(selectedMatch._id, selectedTeam);
   };
 
-  const homeLogo = getValidImageUrl(selectedMatch.homeTeam.logo);
-  const awayLogo = getValidImageUrl(selectedMatch.awayTeam.logo);
+  const homeLogo = selectedMatch.homeTeam.logo;
+  const awayLogo = selectedMatch.awayTeam.logo;
 
   return (
     <div className="fixed inset-x-0 bottom-0 bg-white text-black rounded-t-3xl shadow-lg z-50">
@@ -507,7 +486,7 @@ const FirstTeamToScoreModal = ({
 
         <div className="space-y-3">
           <TeamOption
-            flag={homeLogo}
+            logoUrl={homeLogo}
             name={selectedMatch.homeTeam.name}
             isSelected={selectedFirstTeamToScore === "home"}
             onSelect={() =>
@@ -518,7 +497,7 @@ const FirstTeamToScoreModal = ({
             }
           />
           <TeamOption
-            flag={no_goal_logo}
+            logoUrl={no_goal_logo}
             name="无进球"
             isSelected={selectedFirstTeamToScore === "no_goal"}
             onSelect={() =>
@@ -530,7 +509,7 @@ const FirstTeamToScoreModal = ({
             }
           />
           <TeamOption
-            flag={awayLogo}
+            logoUrl={awayLogo}
             name={selectedMatch.awayTeam.name}
             isSelected={selectedFirstTeamToScore === "away"}
             onSelect={() =>
@@ -552,7 +531,14 @@ const FirstTeamToScoreModal = ({
   );
 };
 
-const TeamCard = ({ flag, name, lastMatches, pickedBy, selected, onClick }) => {
+const TeamCard = ({
+  logoUrl,
+  name,
+  lastMatches,
+  pickedBy,
+  selected,
+  onClick,
+}) => {
   return (
     <div
       className="flex flex-col items-center bg-white text-black text-sm rounded-md px-2 py-2 relative"
@@ -560,7 +546,7 @@ const TeamCard = ({ flag, name, lastMatches, pickedBy, selected, onClick }) => {
     >
       <div className="w-10 h-10">
         <Image
-          src={getValidImageUrl(flag)}
+          src={logoUrl}
           width={40}
           height={40}
           alt={`${name}`}
@@ -581,7 +567,7 @@ const TeamCard = ({ flag, name, lastMatches, pickedBy, selected, onClick }) => {
   );
 };
 
-const TeamOption = ({ flag, name, isSelected, onSelect }) => (
+const TeamOption = ({ logoUrl, name, isSelected, onSelect }) => (
   <div
     className={`flex items-center justify-between p-4 rounded-lg cursor-pointer ${
       isSelected ? "bg-blue-500 text-white" : "bg-gray-100"
@@ -590,7 +576,7 @@ const TeamOption = ({ flag, name, isSelected, onSelect }) => (
   >
     <div className="flex items-center">
       <Image
-        src={flag}
+        src={logoUrl}
         width={30}
         height={30}
         className="mr-3"

src/app/ui/components/ActivityModal.jsx

@@ -44,62 +44,70 @@ const ActivityModal = () => {
 
   if (!isOpen || !activityContent || isLoading) return null;
 
-  return (
-    // <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    //   <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
-    //     <div className="flex flex-col items-center mb-4 relative w-full">
-    //       <div
-    //         className="text-xl font-bold text-black w-full"
-    //         dangerouslySetInnerHTML={{ __html: activityContent.title }}
-    //       ></div>
-    //       <button
-    //         onClick={() => setIsOpen(false)}
-    //         className="text-gray-500 hover:text-gray-700 absolute right-0 top-0"
-    //       >
-    //         <X size={24} />
-    //       </button>
-    //     </div>
-    //     <div
-    //       className="text-gray-700"
-    //       dangerouslySetInnerHTML={{ __html: activityContent.content }}
-    //     />
-    //   </div>
-    // </div>
+  console.log("activityContent", activityContent);
+
+  const hasBackgroundImage = !!activityContent?.backgroundImage;
 
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="relative">
-        <button
-          onClick={() => setIsOpen(false)}
-          className="absolute -top-16 right-3 text-white hover:text-gray-300 z-20 p-2 rounded-full bg-gray-500  hover:bg-opacity-70 transition-all duration-300"
-        >
-          <X size={24} />
-        </button>
+  return (
+    <>
+      {hasBackgroundImage ? (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="relative">
+            <button
+              onClick={() => setIsOpen(false)}
+              className="absolute -top-16 right-3 text-white hover:text-gray-300 z-20 p-2 rounded-full bg-gray-500  hover:bg-opacity-70 transition-all duration-300"
+            >
+              <X size={24} />
+            </button>
 
-        <div
-          className="bg-cover bg-center rounded-lg px-6 pb-6 pt-20 max-w-sm w-full mx-4 overflow-hidden"
-          style={{
-            backgroundImage: "url('/images/ad_bg.jpg')",
-            width: "80vw",
-            minHeight: "50vh",
-            backgroundPosition: "top center",
-          }}
-        >
-          <div className="relative z-10 text-white">
+            <div
+              className="bg-cover bg-center rounded-lg px-6 pb-6 pt-16 max-w-sm w-full mx-4 overflow-hidden"
+              style={{
+                backgroundImage: `url('${activityContent.backgroundImage}')`,
+                width: "80vw",
+                minHeight: "50vh",
+                backgroundPosition: "top center",
+              }}
+            >
+              <div className="relative z-10 text-white">
+                <div className="flex flex-col items-center mb-4 relative w-full">
+                  <div
+                    className="text-xl font-bold w-full text-center"
+                    dangerouslySetInnerHTML={{ __html: activityContent.title }}
+                  ></div>
+                </div>
+                <div
+                  className="overflow-y-auto"
+                  style={{ maxHeight: "calc(50vh - 100px)" }}
+                  dangerouslySetInnerHTML={{ __html: activityContent.content }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-sm w-full mx-4">
             <div className="flex flex-col items-center mb-4 relative w-full">
               <div
-                className="text-2xl font-bold w-full text-center"
+                className="text-xl font-bold text-black w-full"
                 dangerouslySetInnerHTML={{ __html: activityContent.title }}
               ></div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-500 hover:text-gray-700 absolute right-0 top-0"
+              >
+                <X size={24} />
+              </button>
             </div>
             <div
-              className="overflow-y-auto"
-              style={{ maxHeight: "calc(50vh - 100px)" }}
+              className="text-gray-700"
               dangerouslySetInnerHTML={{ __html: activityContent.content }}
             />
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };