Merge pull request #11 from us3r-network/F-haidilao-ttang

feat: haidilao img

.vscode/settings.json

@@ -6,6 +6,7 @@
         "hono",
         "swapsv",
         "swapv",
+        "upheavtt",
         "viem"
     ]
 }

src/haidilao/check.tsx

@@ -20,7 +20,6 @@ export async function check(c: FrameContext) {
     fetchSoldDegen({ address: ethAddress }),
   ]);
   const degenPriceData = await fetchDegenPrice();
-  const degenPrice = degenPriceData.pair.priceUsd;
 
   const transfers = degenSold.result.transfers;
   //   console.log(transfers);
@@ -36,7 +35,11 @@ export async function check(c: FrameContext) {
       <Button action={`/`}>Back</Button>,
       <Button.Link
         href={`https://warpcast.com/~/compose?text=${encodeURIComponent(
-          `I have sold ${amount} degen`
+          `Damn, I would never eat haidilao hot pot again !!!` +
+            `
+
+` +
+            `join /haidilao and keep updates`
         )}&embeds[]=${
           HAI_DI_LAO_FRAME + `/images/check/${fid}/image.png`
         }&embeds[]=${HAI_DI_LAO_FRAME}`}

src/haidilao/images/index.tsx

@@ -9,12 +9,18 @@ import {
 } from "../../lib/hub";
 import { backgroundStyles, titleStyles, warningStyles } from "../styles";
 import { fetchSoldDegen } from "../../lib/events";
-import {} from "viem";
 import { fetchDegenPrice } from "../../lib/dexscreener";
+import { HAI_DI_LAO_FRAME } from "../../lib/env";
 
 const __dirname = new URL(".", import.meta.url).pathname;
 
 const startJPG = fs.readFileSync(__dirname + "/start.jpg");
+const dialogPNG = fs.readFileSync(__dirname + "/dialog.png");
+const avatarPNG = fs.readFileSync(__dirname + "/avatar.png");
+
+const upheavttFont = fs.readFileSync(
+  __dirname + "../../lib/fonts/upheaval/upheavtt.ttf"
+);
 
 const images = new Frog();
 
@@ -24,6 +30,17 @@ images.hono.get("/start.jpg", async (ctx) => {
   return ctx.body(startJPG);
 });
 
+images.hono.get("/dialog.png", async (ctx) => {
+  ctx.header("Content-Type", "image/png");
+  ctx.header("Cache-Control", "public, max-age=3600");
+  return ctx.body(dialogPNG);
+});
+images.hono.get("/avatar.png", async (ctx) => {
+  ctx.header("Content-Type", "image/png");
+  ctx.header("Cache-Control", "public, max-age=3600");
+  return ctx.body(avatarPNG);
+});
+
 images.hono.get("/check/:fid/image.png", async (ctx) => {
   const fid = ctx.req.param("fid");
   if (fid === "0") {
@@ -73,65 +90,138 @@ images.hono.get("/check/:fid/image.png", async (ctx) => {
   for (let i = 0; i < transfers.length; i++) {
     amount += transfers[i].value;
   }
+  const total = amount * Number(degenPrice || 0);
   //   console.log({ amount });
   const image = (
     <div
-      style={{ ...backgroundStyles, padding: 64, backgroundColor: "#6944BA" }}
+      style={{
+        ...backgroundStyles,
+        padding: 40,
+        backgroundColor: "#D92622",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        gap: 20,
+      }}
     >
       <div
         style={{
           ...backgroundStyles,
           position: "relative",
-          border: "2px solid rgba(15, 36, 56, 0.1)",
-          borderRadius: 32,
-          gap: 12,
-          alignItems: "flex-start",
+          flexDirection: "column",
           justifyContent: "flex-start",
-          overflow: "hidden",
-          padding: "50px 50px 20px 50px",
+          alignItems: "flex-start",
+          width: "720px",
+          height: "200px",
+          padding: "0px",
+          gap: "10px",
+          backgroundColor: "none",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "100% 100%",
+          backgroundImage: `url(${HAI_DI_LAO_FRAME}/images/dialog.png)`,
         }}
       >
         <div
           style={{
             ...backgroundStyles,
-            position: "relative",
             flexDirection: "row",
             justifyContent: "flex-start",
-            width: "100%",
+            alignItems: "center",
+            fontSize: 24,
+            height: "55px",
+            padding: "25px 20px 0 20px",
+            gap: "0px",
+            backgroundColor: "none",
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+            fontFamily: "upheaval",
+          }}
+        >
+          <span>{user.display}</span>
+          <span>{`@${user.username}:`}</span>
+        </div>
+        <div
+          style={{
+            ...backgroundStyles,
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            fontSize: 32,
+            padding: "0px 20px 25px 20px",
             height: "auto",
-            padding: "20px 10px",
-            gap: "20px",
+            backgroundColor: "none",
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+          }}
+        >
+          I sold {amount.toLocaleString().split(".")[0]} $degen for $
+          {total.toLocaleString().split(".")[0]}, if i held them today i can
+          have...
+        </div>
+      </div>
+
+      <div
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          display: "flex",
+          gap: 40,
+          with: "100%",
+          height: "auto",
+          // fontSize: "50px",
+          backgroundColor: "none",
+          fontFamily: "inter",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            ...backgroundStyles,
+            position: "relative",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+            width: "160px",
+            height: "160px",
+            padding: "9px",
+            gap: "0px",
+            backgroundColor: "none",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "100% 100%",
+            backgroundImage: `url(${HAI_DI_LAO_FRAME}/images/avatar.png)`,
           }}
         >
           <img
             src={user.pfp}
             alt=""
             style={{
-              width: "80px",
-              height: "80px",
-              borderRadius: "10px",
+              width: "100%",
+              height: "100%",
             }}
           />
-          <div
-            style={{
-              color: "rgb(56, 189, 248)",
-              fontSize: "50px",
-            }}
-          >
-            {user.display}
-          </div>
         </div>
+
         <div
           style={{
-            ...backgroundStyles,
-            alignItems: "flex-start",
+            display: "flex",
+            flexDirection: "column",
             justifyContent: "flex-start",
+            alignItems: "flex-start",
+            fontSize: 60,
+            // flexGrow: 1,
+            // border: "2px solid rgba(15, 36, 56, 0.1)",
+            height: "180px",
+            width: "500px",
             padding: "0px",
-            fontSize: 45,
-            gap: 10,
+            margin: "0px",
           }}
         >
-          {amount.toLocaleString()} sold. now degen price {degenPrice}
+          <div
+            style={{
+              color: "#F9D818",
+            }}
+          >
+            {(total / 50).toLocaleString()}
+          </div>
+          <div>time haidilao hot pot!!!!!</div>
         </div>
       </div>
     </div>
@@ -141,6 +231,14 @@ images.hono.get("/check/:fid/image.png", async (ctx) => {
     headers: {
       "Cache-Control": "public, max-age=3600",
     },
+    width: 800,
+    height: 480,
+    fonts: [
+      {
+        data: upheavttFont,
+        name: "upheaval",
+      },
+    ],
   });
 });
 

src/haidilao/start.tsx

@@ -7,15 +7,6 @@ export function start(c: FrameContext) {
   return c.res({
     action: "/",
     image: "/haidilao/images/start.jpg",
-    intents: [
-      <Button action={`/check`}>Check</Button>,
-      <Button.Link
-        href={`https://warpcast.com/~/compose?text=${encodeURIComponent(
-          "check your haidilao"
-        )}&embeds[]=${HAI_DI_LAO_FRAME}`}
-      >
-        Share
-      </Button.Link>,
-    ],
+    intents: [<Button action={`/check`}>Check Me</Button>],
   });
 }

src/lib/fonts/upheaval/upheaval.txt

@@ -0,0 +1,75 @@
+_______________________________
+Upheaval  Created by Brian Kent
+�������������������������������
+
+Thanks for Downloading Upheaval.
+
+
+-Upheaval TT     [.ttf]
+-Upheaval [14pt] [.fon]
+
+  'Upheaval.fon' is a Windows Bitmap Font (.fon).  This font is best
+used at 14pt.  To use it at larger point sizes (for images), try using
+a graphics program like Photoshop, Paint Shop Pro, or the Paint
+program that comes with Windows.  Type out your text at the recommended
+point size [14pt], then resize the image.   Set the color mode to 256
+or 2 colors so the edges don't get blured when resizing, then after you
+have the text to the size that you want, then change back to a higher
+color mode and edit the image.
+
+  For programs that don't show Bitmap Fonts in the Font Selector, you
+may be able to get the font to work by typing in:
+upheaval -brk-
+
+
+If you have any questions or comments, you can e-mail me at
+[email protected]
+
+You can visit my Homepage <�NIGMA GAMES & FONTS> at
+http://www.aenigmafonts.com/
+
+________________
+INSTALLING FONTS
+����������������
+  There's a couple of ways to install Fonts. The 'easy' way to
+install fonts is to just Unzip/place the font file into your
+Windows\Fonts directory (I always use this method). If you're unable
+to do it the 'easy' way, then try to do it this way (for Windows
+95/98/NT):
+
+1] Unzip the Font(s) to a folder (or somewhere, just remember where
+you unzipped it) on your Computer.
+
+2] Next, click on the START button, then select SETTINGS then
+CONTROL PANEL.
+
+3] When the Control Panel Window pops up, Double Click on FONTS.
+
+4] When the FONTS window pops up, select File then Install New Font...
+
+5] A Add Fonts window will pop up, just go to the folder that you
+unzipped the Font(s) to, select the Font(s) and then click on OK.
+Now the Font(s) are installed.
+
+  Now you can use the Font(s) in programs the utilize Fonts.  Make
+sure that you install the font(s) first, then open up your apps
+(so the app will recognize the font).    Sometimes you'll have to
+wait until you computer 'auto-refreshes' for programs to recognize
+fonts (Windows is sometimes slow to do that).  You can refresh your
+computer quicker by going into Windows Explorer -or- My Computer and
+press ALT + V, then R (or in the menubar select VIEW then REFRESH).
+
+
+__________
+DISCLAIMER
+����������
+-The font(s) in this zip file were created by me (Brian Kent).  All
+of my Fonts are Freeware, you can use them any way you want to
+(Personal use, Commercial use, or whatever).
+
+-If you have a Font related site and would like to offer my fonts on
+your site, go right ahead. All I ask is that you keep this text file
+intact with the Font.
+
+-You may not Sell or Distribute my Fonts for profit or alter them in
+any way without asking me first.  [e-mail -  [email protected]]