FoodOrderer: Fix for phone

package.json

@@ -21,7 +21,8 @@
   "devDependencies": {
     "decimal.js": "^10.4.3",
     "react-router-dom": "^6.28.0",
-    "tailwindcss": "^3.4.15"
+    "tailwindcss": "^3.4.15",
+    "universal-cookie": "^7.2.2"
   },
   "browserslist": {
     "production": [

src/Credit.ts

@@ -0,0 +1,3 @@
+class Credit {
+  
+}

src/FoodOrderer.tsx

@@ -106,7 +106,7 @@ function FoodList({ list, setList }: {
       {list.map((item) =>
         <div
           key={item.name}
-          className="flex gap-5 bg-slate-200 rounded-md shadow-md border-spacing-1 px-5 py-3 relative"
+          className="flex flex-col sm:flex-row gap-5 bg-slate-200 rounded-md shadow-md border-spacing-1 px-5 py-3 relative"
         >
           <img className="size-24 rounded-full" {...item.image} />
           <div className="flex-1">
@@ -114,7 +114,7 @@ function FoodList({ list, setList }: {
             <p className="text-base text-gray-400">{item.provider.name}</p>
             <p className="text-sm text-zinc-500">{item.provider.price} 元/个</p>
             <p className="text-sm text-neutral-500">库存: {item.provider.storage}</p>
-            
+
           </div>
 
           <div className="flex flex-col justify-between items-end gap-2">
@@ -138,7 +138,7 @@ function FoodList({ list, setList }: {
                   }
                 }}
                 className="text-center w-16 h-8 bg-gray-50 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-base appearance-none pl-1.5"
-                />              
+              />
               <button
                 onClick={() => handleVolumeButton(item, ButtonOperation.INCREASE)}
                 className="w-8 h-8 flex items-center justify-center bg-red-50 rounded-full text-lg font-bold"
@@ -148,21 +148,49 @@ function FoodList({ list, setList }: {
             </div>
           </div>
         </div>
-
       )}
     </div>
   )
 }
 
+const processOrder = (
+  items: ShopItem[], 
+  setItems: React.Dispatch<React.SetStateAction<ShopItem[]>>
+) => {
+  let needPrice = 0
+  items.forEach((it)=>{
+    needPrice += getNeedPrice(it)
+  })
+  if (needPrice == 0){ // 没花钱
+    return
+  }
+  setItems(items.map((it) => ({
+    ...it,
+    need: 0,
+    provider: {
+      ...it.provider,
+      storage: it.provider.storage - it.need
+    }
+  })))
+  alert(`花掉了 ${needPrice} 元`)
+}
 
 const FoodOrderer = () => {
   const [items, setItems] = useState<ShopItem[]>(shopItems)
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center gap-2">
       <p className="text-center text-2xl sm:text-5xl py-5 sm:py-10 bg-gradient-to-r from-blue-600 to-pink-600 via-green-700 inline-block text-transparent bg-clip-text">
         点些什么
       </p>
       <FoodList list={items} setList={setItems} />
+      <div className="mt-5">
+        <button
+          onClick={() => { processOrder(items,setItems) }}
+          className="px-4 py-2 text-sm whitespace-nowrap font-medium text-white bg-blue-500 rounded-md shadow-md hover:bg-blue-600"
+        >
+          下单
+        </button>
+      </div>
     </div>
   )
 

yarn.lock

@@ -1878,6 +1878,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
+  integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
+
 "@types/eslint-scope@^3.7.7":
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
@@ -3306,6 +3311,11 @@ cookie@0.7.1:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
   integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
+cookie@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.2.tgz#556369c472a2ba910f2979891b526b3436237ed7"
+  integrity sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==
+
 core-js-compat@^3.38.0, core-js-compat@^3.38.1:
   version "3.39.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61"
@@ -9096,6 +9106,14 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
+universal-cookie@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-7.2.2.tgz#93ae9ec55baab89b24300473543170bb8112773c"
+  integrity sha512-fMiOcS3TmzP2x5QV26pIH3mvhexLIT0HmPa3V7Q7knRfT9HG6kTwq02HZGLPw0sAOXrAmotElGRvTLCMbJsvxQ==
+  dependencies:
+    "@types/cookie" "^0.6.0"
+    cookie "^0.7.2"
+
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"