small changes

Author: RedHeadphone

package-lock.json

@@ -20,7 +20,8 @@
     "next": "13.1.6",
     "nunjucks": "^3.2.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "use-local-storage-state": "^19.4.0"
   },
   "devDependencies": {
     "@types/node": "18.11.18",

package.json

@@ -62,7 +62,3 @@ export const capitalize = (str) => {
   );
   return capitalized_words.join(" ");
 };
-
-export const word_count = (str) => {
-  return str.split(" ").length;
-};

src/common.js

@@ -1,19 +1,25 @@
-import { useState } from "react";
+import useLocalStorageState from "use-local-storage-state";
 import qs from "fast-querystring";
 import Error from "@/images/error.svg";
 
 const defaultOption = {
   username: "redheadphone",
-  theme: "default",
+  theme: "github_dark",
   disable_animations: false,
   show_icons: true,
   force_username: true,
 };
 
 const useOption = () => {
-  const [options, setOptions] = useState(defaultOption);
-  const [querystring, setQuerystring] = useState(qs.stringify(options));
-  const [error, setError] = useState(false);
+  const [options, setOptions] = useLocalStorageState("options", {
+    defaultValue: defaultOption,
+  });
+  const [querystring, setQuerystring] = useLocalStorageState("querystring", {
+    defaultValue: qs.stringify(options),
+  });
+  const [error, setError] = useLocalStorageState("error", {
+    defaultValue: false,
+  });
 
   const getImgUrl = (query = querystring) => {
     return error ? Error.src : `/api/card?${query}`;

src/hooks/option.js

@@ -5,11 +5,10 @@ import {
   get_color_from_rating,
   CONSTANTS,
   clamp_value,
-  word_count,
 } from "@/common.js";
 
-function check_overflow(category, maxCategory) {
-  return word_count(category) + word_count(maxCategory) > 2;
+function check_overflow(rank, maxRank, width) {
+  return (rank.length + maxRank.length + 8)*10 + 34 > width;
 }
 
 export default async function handler(req, res) {
@@ -88,6 +87,9 @@ export default async function handler(req, res) {
             ...themes[theme],
             ...customColorScheme,
           };
+          const width = Math.max(380, 100 + name.length * 14);
+          const breakBetweenRank = check_overflow(rank, maxRank, width);
+          const height = 290 + (breakBetweenRank ? 25 : 0);
 
           res.send(
             renderTemplate("card.svg", {
@@ -96,9 +98,9 @@ export default async function handler(req, res) {
               maxRating,
               rank,
               maxRank,
-              breakBetweenRank: check_overflow(rank, maxRank),
-              height: 290 + (check_overflow(rank, maxRank) ? 25 : 0),
-              width: Math.max(380, 100 + name.length * 14),
+              breakBetweenRank,
+              height,
+              width,
               contestsCount,
               problemsSolved,
               friendOfCount,

src/pages/api/card.js

@@ -105,7 +105,7 @@ export default function Home() {
                       },
                     ]}
                   >
-                    <Input autoComplete="off" onPressEnter={onUsernameEnter} />
+                    <Input autoComplete="off" spellCheck={false} onPressEnter={onUsernameEnter} />
                   </Form.Item>
                   <Form.Item className="form-item" label="Theme" name="theme">
                     <Select