From bca8ae3b147539bf3f004ba14b39a8c24be840d9 Mon Sep 17 00:00:00 2001
From: Mr-Sheep <24599209+Mr-Sheep@users.noreply.github.com>
Date: Sun, 19 Nov 2023 02:56:05 -0600
Subject: [PATCH] customizable diploma

---
 app/components/generate-diploma.tsx |  14 +++++++-
 app/diploma/page.tsx                |  48 +++++++++++++++++++++++++---
 public/template_diploma.pdf         | Bin 1099151 -> 1102950 bytes
 3 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/app/components/generate-diploma.tsx b/app/components/generate-diploma.tsx
index facc294..cc021dd 100644
--- a/app/components/generate-diploma.tsx
+++ b/app/components/generate-diploma.tsx
@@ -5,9 +5,10 @@ import downloadPDF from "./download-pdf";
 type DiplomaProps = {
   username: string;
   major: string;
+  degree: string;
 };
 
-async function generateDiploma({ username, major }: DiplomaProps) {
+async function generateDiploma({ username, major, degree }: DiplomaProps) {
   // Fetch the PDF with form fields
   const formUrl = "/template_diploma.pdf";
   // const formUrl = "https://raw.githubusercontent.com/WildChickenUniversity/WildChickenUniversity/master/assets/template_diploma.pdf"
@@ -39,13 +40,16 @@ async function generateDiploma({ username, major }: DiplomaProps) {
   // Get all fields in the PDF by their names
   const majorField = form.getTextField("major");
   const nameField = form.getTextField("name");
+  const degreeField = form.getTextField("degree");
 
   // idiot-proof
   // just please don't enter a super long major name :)
   const widthMajorField = 450;
+  const widthDegreeField = 450;
   const widthNameField = 350;
   const widthMajor = major.length * 40;
   const widthName = username.length * 40;
+  const widthDegree = degree.length * 40;
   if (widthMajorField < widthMajor) {
     let fontSizeMajor = widthMajorField / major.length;
     majorField.setFontSize(fontSizeMajor);
@@ -54,10 +58,15 @@ async function generateDiploma({ username, major }: DiplomaProps) {
     let fontSizeName = widthNameField / major.length;
     majorField.setFontSize(fontSizeName);
   }
+  if (widthNameField < widthName) {
+    let fontSizeName = widthNameField / major.length;
+    majorField.setFontSize(fontSizeName);
+  }
 
   // Fill in the name field
   majorField.setText(major);
   nameField.setText(username);
+  degreeField.setText(degree);
 
   majorField.updateAppearances(
     englishUnicode.test(major) ? chomskyFont : sourceHanSerif
@@ -65,6 +74,9 @@ async function generateDiploma({ username, major }: DiplomaProps) {
   nameField.updateAppearances(
     englishUnicode.test(username) ? chomskyFont : sourceHanSerif
   );
+  degreeField.updateAppearances(
+    englishUnicode.test(degree) ? chomskyFont : sourceHanSerif
+  );
 
   // Flatten the form fields
   form.flatten();
diff --git a/app/diploma/page.tsx b/app/diploma/page.tsx
index 74d4a64..91fdee6 100644
--- a/app/diploma/page.tsx
+++ b/app/diploma/page.tsx
@@ -6,22 +6,30 @@ import NavPath from "../components/nav-path";
 export default function Diploma() {
   const [username, setUsername] = useState("");
   const [major, setMajor] = useState("");
+  const [degree, setDegree] = useState("Bachelor of Chicken");
   const [customMajor, setCustomMajor] = useState("");
   const [enableCustomMajor, setEnableCustomMajor] = useState(false);
-
+  const [customDegree, setCustomDegree] = useState("");
+  const [enableCustomDegree, setEnableCustomDegree] = useState(false);
   const handleSumbit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const majorField: string =
       enableCustomMajor && customMajor !== "" ? customMajor : major;
-    await createDiplomaPDF({ username, major: majorField });
+    await createDiplomaPDF({ username, major: majorField, degree });
   };
 
-  const handleSelectChange = async (value: string) => {
+  const handleSelectChangeMajor = async (value: string) => {
     setMajor(value);
     // Show the input field if the user selects "other"
     setEnableCustomMajor(value === "other");
   };
 
+  const handleSelectChangeDegree = async (value: string) => {
+    setDegree(value);
+    // Show the input field if the user selects "other"
+    setEnableCustomDegree(value === "other");
+  };
+
   return (
     <div className="flex justify-center items-center min-h-screen bg-white dark:bg-gray-950">
       <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
@@ -77,7 +85,7 @@ export default function Diploma() {
                 name="major"
                 value={major}
                 onChange={(e) => {
-                  handleSelectChange(e.target.value);
+                  handleSelectChangeMajor(e.target.value);
                   setMajor(e.target.value);
                 }}
               >
@@ -102,6 +110,38 @@ export default function Diploma() {
               )}
             </div>
           </div>
+          <div className="flex mb-4 items-center">
+            <div className="flex-grow">
+              <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+                Degree
+              </label>
+              <select
+                className="mb-2 relative inline-block w-5/12 appearance-none shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+                name="degree"
+                value={degree}
+                onChange={(e) => {
+                  handleSelectChangeDegree(e.target.value);
+                  setDegree(e.target.value);
+                }}
+              >
+                <option value="Bachelor of Chicken">Bachelor of Chicken</option>
+                <option value="Master of Chicken">Master of Chicken</option>
+                <option value="Doctor of Philosophy">
+                  Doctor of Philosophy
+                </option>
+                <option value="other">Other</option>
+              </select>
+              {enableCustomDegree && (
+                <input
+                  className="relative ml-4 inline-block shadow-sm w-1/2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
+                  name="customDegree"
+                  value={customDegree}
+                  placeholder="Enter your degree"
+                  onChange={(e) => setCustomDegree(e.target.value)}
+                />
+              )}
+            </div>
+          </div>
           <div className="flex items-center justify-between">
             <button
               className="bg-blue-500 py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
diff --git a/public/template_diploma.pdf b/public/template_diploma.pdf
index 07566f6495b5bdcee65ca8fee5fd75bf74d106cc..e5a6e4ec8021e82ff63d1cabbcf3c6832c4fbd6a 100644
GIT binary patch
delta 342
zcmeD0c7C?PxuJ!zg{g(Pg{6hHg{_6Xg`<VDg{y_Tg{OtLg|CHwi$MR;=@Xg+teFE9
z47Z<Z5)fi$v9K~Uoc^Fypp6~G(ls!fetrdi`t&Pp0ud@E#;GP|N#>TiW=582x<;lZ
z#<~^;$w|5<Ne0GA2Bwzg$wnsI1KI`hIi~+TB;Y1t0X9J0z(8Ho&W<-VFC{-Ii`UT9
za(d!oeue29Y6ZONEsPADO)O0f+)Uk^O-u~UEse}9EsUL9j9pFLTnwCD>|*sj^HNeP
zq76+96buy%O^v~%8JM(GFa$}b<pagd6buxC^nFtE(n~TFjLh`|ic-rI3=J$T%q`6I
zgYxrB6pRhPN`f=1QWXr%4D>@P3sR>)$`g<kv$%Es$bkbEoE{&}uy0IaWa42^%4g=9
XZt#L%me<h0$jr!)S5?*3-;EalTIgcP

delta 41
wcmaF1!nwcOxuJ!zg{g(Pg{6hHg{_6Xg`<VDg{y_Tg{OtLg|CHwi$MQT05l5?`v3p{