Merge pull request #1 from mutoo/dev

improve docs for pre-release build

README.md

@@ -1,14 +1,45 @@
 # Don't Starve AirDrop Mod Server
 
-This is a mod for Don't Starve that allows players to send items to game via web app.
+This is a mod for Don't Starve (and DST) that allows players to send items to game via a web app.
+
+![Arch](./docs/arch.png)
+
+## Features
+
+- Mod: a slim mod which is polling supplies from airdrop server every 10 seconds.
+- Server: a self host server running on the same machine to communicate with the mode.
+- Client: a web interface to communicate with local airdrop server, allow collecting items ready for next airdrop.
+
+## Usage
+
+### Install mod
+
+First, you will need to install the mod either from the workshop or directly download it from github release page.
+
+Ensure the mod is installed in your Don't Starve (or DST) game folder:
+
+* Windows: `C:\Program Files (x86)\Steam\steamapps\common\Don't Starve Together\mods`
+* MacOS: `~/Library/Application Support/Steam/steamapps/common/Don't Starve Together/dontstarve_steam.app/Contents/mods`
+
+Enable the mod when you start a new game.
+
+### Install server
+
+The airdop server is required to communicate with the mod. The mod will keep polling the items from the server every 10 seconds (by default).
+
+Please install the latest server from the github release page.
+
+The server is a standalone executable file, once started, it runs at http://localhost:9987.
+
+### The Web Client
+
+You don't need to host the web interface by your own. Once the airdrop server is running, open https://airdrop-mod.mutoo.im in the browser windows on the same computer and it should works.
+
+Now you can select any items in the list, and then drop it in the game. Enjoy the adventure!
 
 ## Project Structure
 
 - `dont-starve-airdrop-mod/` - The don't starve mod that query the server for items to airdrop
 - `dont-starve-airdrop-server/` - The node.js server for holding the items to airdrop and communicating with the don't starve game
 - `dont-starve-airdrop-client/` - The React web app for sending items to the server
 - `dont-starve-assets-extractor/` - The handy tool for extracting inventory assets from the don't starve game
-
-## Diagram
-
-[Arch](./docs/arch.png)

dont-starve-airdrop-client/README.md

@@ -1,2 +1,9 @@
 # Don't Starve AirDrop Client
 
+This is the web client for Don't Starve (or DST) Airdrop mod. 
+
+## Usage
+
+The latest client is deployed at https://airdrop-mod.mutoo.im 
+
+Once your Airdrop Server is started locally, open above link and you should see the interface.

dont-starve-airdrop-client/craco.config.js

@@ -0,0 +1,36 @@
+const { getLoader } = require("@craco/craco");
+
+module.exports = {
+  plugins: [
+    {
+      plugin: {
+        overrideWebpackConfig: ({ context, webpackConfig }) => {
+          console.log(
+            webpackConfig.module.rules.find((rule) =>
+              rule.hasOwnProperty("oneOf")
+            )
+          );
+          const { isFound, match: fileLoaderMatch } = getLoader(
+            webpackConfig,
+            (rule) => rule.type === "asset/resource"
+          );
+
+          if (!isFound) {
+            throw new Error(
+              `Can't find resource loader in the ${context.env} webpack config!`
+            );
+          }
+
+          fileLoaderMatch.loader.exclude.push(/\.ya?ml$/);
+
+          const yamlLoader = {
+            use: "yaml-loader",
+            test: /\.(ya?ml)$/,
+          };
+          webpackConfig.module.rules.push(yamlLoader);
+          return webpackConfig;
+        },
+      },
+    },
+  ],
+};

dont-starve-airdrop-client/package.json

@@ -1,9 +1,11 @@
 {
-  "name": "dont-starve-airdrop-server",
+  "name": "dont-starve-airdrop-client",
   "version": "0.1.0",
+  "description": "Don't Starve (Together) Airdrop Client.",
   "author": "mutoo <gmutoo@gmail.com>",
   "license": "MIT",
   "dependencies": {
+    "@craco/craco": "^7.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -13,14 +15,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.3.3",
     "uuid": "^9.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yaml-loader": "^0.8.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -39,8 +43,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "tailwindcss": "^3.3.3"
   }
 }

dont-starve-airdrop-client/src/App.js

@@ -6,9 +6,10 @@ import useWebsocket from "./hooks/ws";
 import airdropState from "./state";
 import Draft from "./components/Draft";
 import History from "./components/History";
-import { inventory } from "./config";
+import config from "./config.yml";
 import { getInventoryImage } from "./utils/image";
 import styles from "./App.module.css";
+import BuyMeCoffee from "./components/BuyMeCoffee";
 
 function App() {
   const [ws, error] = useWebsocket();
@@ -22,7 +23,7 @@ function App() {
     );
   }
 
-  const fav = inventory.categories.filter(
+  const fav = config.inventory.categories.filter(
     (category) => category.type === categoryType
   )[0];
 
@@ -32,7 +33,7 @@ function App() {
       <Draft ws={ws} />
       <h1 className="mb-2"># Categories</h1>
       <div className="flex flex-row flex-wrap gap-1">
-        {inventory.categories.map((category) => {
+        {config.inventory.categories.map((category) => {
           return (
             <button
               key={category.type}
@@ -52,7 +53,7 @@ function App() {
           );
         })}
       </div>
-      <h2 className="mb-2">## Filter: {categoryType}</h2>
+      <h2 className="mb-2">## {categoryType}</h2>
       <div className="flex flex-row flex-wrap gap-1">
         {fav.items.map((item) => {
           return (
@@ -67,12 +68,16 @@ function App() {
           );
         })}
       </div>
+      <div className="text-gray-500">
+        Tip: Press and hold the "Shift" key to add five items with each click.
+      </div>
       <h1 className="mb-2"># Airdrop History</h1>
       <History history={airdropState.history} />
       <hr className="border-gray-500 max-w-xs" />
       <div className="text-gray-500">
         Disclaimer: All game-related images and trademarks are property of klei.
       </div>
+      <BuyMeCoffee />
     </div>
   );
 }

dont-starve-airdrop-client/src/components/BuyMeCoffee.js

@@ -0,0 +1,16 @@
+export default function BuyMeCoffee() {
+  return (
+    <div className="text-gray-500 space-y-4">
+      <div className="">If you like this mod, you may support me with</div>
+      <div className="w-48">
+        <a
+          href="https://buymeacoffee.com/mutoo"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img src="/bmc_qr.png" alt="Buy Me A Coffee"></img>
+        </a>
+      </div>
+    </div>
+  );
+}

dont-starve-airdrop-client/src/components/Draft.js

@@ -51,7 +51,9 @@ export default observer(function Draft({ ws }) {
         <div className="grid gap-2">
           {!draft.entries.length ? (
             <div className="flex flex-row gap-x-2 items-center">
-              <span className="">Please add some inventory items to drop.</span>
+              <span className="">
+              Please select some inventory items from the list, and then click the button on the right to initiate the airdrop.
+              </span>
             </div>
           ) : (
             <div className="flex flex-row flex-wrap gap-1">

dont-starve-airdrop-client/src/components/ReloadDialog.js

@@ -8,6 +8,10 @@ export default function ReloadDialog({ message }) {
       className={classnames(styles.reloadDialog, "max-w-xl mx-auto")}
     >
       <div className="flex flex-col items-center justify-center px-14 py-10">
+      <div className="font-sans text-medium">
+          To use the Airdrop Mod Client, please make sure you have the Airdrop Mod Server running on your local machine. For more details, visit <a className="underline" href="https://github.com/mutoo/dont-starve-airdrop-mod" alt="Airdrop mod repo">this github link</a>.
+        </div>
+        <div className="my-2"></div>
         <div className="font-sans font-bold text-large">
           Could not connect to server: {message}
         </div>