Refactor JS

.gitignore

@@ -7,4 +7,5 @@ node_modules/
 
 # Dependency versions
 package-lock.json
-pnpm-lock.yaml
+pnpm-lock.yaml
+.pnpm-debug.log

README.md

@@ -4,9 +4,26 @@ Finally, [Cards Against Humanity](https://cardsagainsthumanity.com/) as plain te
 
 [CONTRIBUTING](./CONTRIBUTING.md)
 
-## File formats
+## FAQ
+
+**How many cards are there?** [Check the website](https://crhallberg.com/cah).
+
+**What font is CAH?** Cards Against Humanity cards are in [Helvetica® Neue](https://www.myfonts.com/fonts/linotype/neue-helvetica/). It's not free. I use [Inter Medium](https://rsms.me/inter/).
+
+**Are you associated with **\_\_**?** No. Only in my dreams.
+
+**I'm just getting started and I have a lot of questions** You can reach me on Twitter as [@crhallberg](https://twitter.com/crhallberg). I'd love to hear from you! My DMs are open if privacy is a concern.
+
+**Is this legal?** Yes. Cards Against Humanity is distributed under a [Creative Commons BY-NC-SA 4.0 license](https://creativecommons.org/licenses/by-nc-sa/4.0/). I think their website puts it best:
+
+> We give you permission to use the Cards Against Humanity writing under a limited Creative Commons BY-NC-SA 4.0 license. That means you can use our writing if (and only if) you do all of these things:
+> 1. Make your work available totally for free.
+> 2. Share your work with others under the same Creative Commons license that we use.
+> 3. Give us credit in your project.
+
+If you have questions or paperwork that says otherwise, contact me, we can work this out.
 
-### cah-all-compact.json
+## Compact JSON Format
 
 ```json
 {
@@ -32,7 +49,7 @@ Finally, [Cards Against Humanity](https://cardsagainsthumanity.com/) as plain te
 }
 ```
 
-### Rehydrated with [CAHDeck.js](./web/CAHDeck.js)
+## Full JSON Format
 
 ```json
 {
@@ -59,24 +76,42 @@ Finally, [Cards Against Humanity](https://cardsagainsthumanity.com/) as plain te
 }
 ```
 
-## FAQ
-
-**How many cards are there?** [Check the website](https://crhallberg.com/cah).
-
-**What font is CAH?** Cards Against Humanity cards are in [Helvetica® Neue](https://www.myfonts.com/fonts/linotype/neue-helvetica/). It's not free. I use [Inter Medium](https://rsms.me/inter/).
-
-**Are you associated with **\_\_**?** No. Only in my dreams.
-
-**I'm just getting started and I have a lot of questions** You can reach me on Twitter as [@crhallberg](https://twitter.com/crhallberg). I'd love to hear from you! My DMs are open if privacy is a concern.
-
-**Is this legal?** Yes. Cards Against Humanity is distributed under a [Creative Commons BY-NC-SA 4.0 license](https://creativecommons.org/licenses/by-nc-sa/4.0/). I think their website puts it best:
-
-> We give you permission to use the Cards Against Humanity writing under a limited Creative Commons BY-NC-SA 4.0 license. That means you can use our writing if (and only if) you do all of these things:
->1. Make your work available totally for free.
->2. Share your work with others under the same Creative Commons license that we use.
->3. Give us credit in your project.
-
-If you have questions or paperwork that says otherwise, contact me, we can work this out.
+## [CAHDeck.js](./web/CAHDeck.js)
+
+I've written a simple JS library to make working with the compact file format easier. [Customize and download a compact deck](https://crhallberg.com/cah/) and load it into JS with it like so.
+
+```js
+// Load a deck downloaded from the website
+const deck = Deck.fromFile("../cah-all-compact.json");
+
+// List your packs
+const packSummaries = deck.listPacks();
+/**
+ * [
+ *   {
+ *     id: 0,
+ *     icon: "seagull",
+ *     name: "CAH Base Set",
+ *     official: true,
+ *     counts: {
+ *       white: 420,
+ *       black: 39,
+ *     },
+ *   },
+ *   ...
+ * ]
+ */
+
+// Get your packs
+const base = deck.getPackByName("CAH Base Set");
+// or
+const base = deck.getPackById(0);
+// or
+
+// Use your packs!
+base.white[0] // { text: "Teaching a robot to love.", packID: 0, icon: "seagull" }
+base.black[0] // { text: "What's that sound?", pick: 1, packID: 0, icon: "seagull" }
+```
 
 ## Fine Print
 

examples/canvas/canvas.css

@@ -1,86 +1,86 @@
-@import "../../vendor/inter.css";
+@import "./vendor/inter.css";
 
 html {
-  font-size: 16px;
+    font-size: 16px;
 }
 body {
-  padding: 0;
-  margin: 0;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI",
-    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 500;
-  line-height: 1.5;
-  background-color: #757575;
+    padding: 0;
+    margin: 0;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI",
+        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol";
+    font-weight: 500;
+    line-height: 1.5;
+    background-color: #757575;
 }
 @supports (font-variation-settings: normal) {
-  body {
-    font-family: "Inter var", -apple-system, BlinkMacSystemFont, Roboto,
-      "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol";
-  }
+    body {
+        font-family: "Inter var", -apple-system, BlinkMacSystemFont, Roboto,
+            "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+            "Segoe UI Emoji", "Segoe UI Symbol";
+    }
 }
 #a {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
 }
 #pack-list {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 10;
-  box-sizing: border-box;
-  width: 100%;
-  margin: 0;
-  padding: 1rem;
-  list-style: none;
-  overflow-y: auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: 1rem;
+    list-style: none;
+    overflow-y: auto;
 }
 .deck-btn {
-  display: block;
-  width: 100%;
-  margin: 0.5rem 0;
-  padding: 0.5rem;
-  border: 0;
-  font: inherit;
-  line-height: 1.15;
-  text-align: left;
-  color: #000;
-  background-color: rgba(255, 255, 255, 0.8);
-  text-shadow: 0 1px 0 #fff;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  appearance: none;
+    --bg-opacity: 0.8;
+    display: block;
+    width: 100%;
+    margin: 0.5rem 0;
+    padding: 0.5rem 1rem;
+    border: 0;
+    font: inherit;
+    line-height: 1.15;
+    text-align: left;
+    color: #000;
+    background-color: rgba(255, 255, 255, var(--bg-opacity));
+    border-radius: 0.5rem;
+    cursor: pointer;
+    appearance: none;
 }
 .deck-btn:hover,
 .deck-btn:focus {
-  background-color: #e0e0e0;
+    --bg-opacity: 1;
 }
 .deck-btn:active {
-  color: #fff;
-  background-color: #000;
+    color: #fff;
+    background-color: #000;
 }
 
 @media (min-width: 768px) {
-  #pack-list {
-    width: 20%;
-    min-width: 300px;
-    padding: 1rem 2rem;
-    background-color: rgba(255, 255, 255, 0.4);
-  }
-  .deck-btn {
-    background-color: #fff;
-  }
+    #pack-list {
+        width: 20%;
+        min-width: 300px;
+        padding: 0.5rem 1rem;
+        background-color: rgba(255, 255, 255, 0.4);
+    }
+    .deck-btn {
+        background-color: #fff;
+    }
 }
 
 .deck-icon {
-  display: inline-block;
-  width: 2rem;
-  text-align: center;
+    display: inline-block;
+    width: 2rem;
+    text-align: center;
 }