cleanup

README.md

@@ -25,8 +25,13 @@ This runs the example [index.js](./src/index.js) and allows for testing:
 npm run dev
 ```
 
-## Build Dist
-
-```
-npm run build
-```
+## Create New Release
+
+- Make desired changes.
+- Bump [package.json](package.json) `version` field.
+- Run `npm i` to update packages.
+- Run `npm run build` to build `/dist`.
+- Commit changes to `main` branch.
+- Create a new release via Github UI.
+- Github Actions build will build and publish a new version.
+- Latest package published to [quibbble/boardgame](https://github.com/quibbble/boardgame/pkgs/npm/boardgame).

dist/index.mjs

@@ -1727,7 +1727,7 @@ const jn = it((e, t) => {
   const [I, ye] = v(0);
   return _(() => {
     I > 0 && setTimeout(() => ye(I - 1), 1e3);
-  }, [I]), /* @__PURE__ */ l.createElement("div", { className: "min-h-screen flex flex-col items-center p-2 md:p-4" }, /* @__PURE__ */ l.createElement("div", { ref: t, className: "h-full w-full flex flex-col items-center max-w-full max-w-xl grow" }, /* @__PURE__ */ l.createElement("div", { className: "text-red-500 text-blue-500 text-green-500 text-yellow-500 text-orange-500 text-pink-500 text-purple-500 text-teal-500" }), /* @__PURE__ */ l.createElement("div", { className: "border-red-500 border-blue-500 border-green-500 border-yellow-500 border-orange-500 border-pink-500 border-purple-500 border-teal-500" }), /* @__PURE__ */ l.createElement("div", { className: "bg-red-500 bg-blue-500 bg-green-500 bg-yellow-500 bg-orange-500 bg-pink-500 bg-pink-500 bg-purple-500 bg-teal-500" }), /* @__PURE__ */ l.createElement("div", { className: "fill-red-500 fill-blue-500 fill-green-500 fill-yellow-500 fill-orange-500 fill-pink-500 fill-pink-500 fill-purple-500 fill-teal-500" }), /* @__PURE__ */ l.createElement("div", { className: "flex justify-between items-center relative w-full mb-1 justfy-self-start font-thin text-sm" }, /* @__PURE__ */ l.createElement("div", null, "Share this link: ", /* @__PURE__ */ l.createElement("span", { className: "underline cursor-pointer", onClick: () => {
+  }, [I]), /* @__PURE__ */ l.createElement("div", { className: "min-h-screen flex flex-col items-center p-2 md:p-4" }, /* @__PURE__ */ l.createElement("div", { ref: t, className: "h-full w-full flex flex-col items-center max-w-xl grow" }, /* @__PURE__ */ l.createElement("div", { className: "flex justify-between items-center relative w-full mb-1 justfy-self-start font-thin text-sm" }, /* @__PURE__ */ l.createElement("div", null, "Share this link: ", /* @__PURE__ */ l.createElement("span", { className: "underline cursor-pointer", onClick: () => {
     ye(1), navigator.clipboard.writeText(`${window.location.protocol}//${window.location.host}/${h}`);
   } }, `${window.location.protocol}//${window.location.host}/${h}`), I > 0 ? /* @__PURE__ */ l.createElement("div", { className: "absolute mt-2 w-full flex justify-center" }, /* @__PURE__ */ l.createElement("div", { className: "absolute top-[-12px] w-6 overflow-hidden inline-block" }, /* @__PURE__ */ l.createElement("div", { className: " h-4 w-4 bg-zinc-600 rotate-45 transform origin-bottom-left" })), /* @__PURE__ */ l.createElement("div", { className: "font-bold text-xs text-center bg-zinc-600 px-2 py-1" }, "copied!")) : null), /* @__PURE__ */ l.createElement("div", { className: "px-1" }, /* @__PURE__ */ l.createElement(vn, { isConn: N }))), /* @__PURE__ */ l.createElement("hr", { className: "w-full mb-2" }), /* @__PURE__ */ l.createElement("div", { className: "flex w-full justify-between items-center mb-4" }, /* @__PURE__ */ l.createElement("div", { className: "flex" }, s ? s.Teams.map((x) => /* @__PURE__ */ l.createElement(
     "div",
@@ -1741,6 +1741,7 @@ const jn = it((e, t) => {
 });
 export {
   Fn as DownPage,
+  De as Footer,
   jn as GamePage,
   _n as HomePage
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quibbble/boardgame",
   "private": false,
-  "version": "0.1.5",
+  "version": "1.0.0",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

src/DownPage/DownPage.jsx → src/components/DownPage/DownPage.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Footer } from "../components/Footer"
-import { Health } from "../api/API";
+import { Footer } from "../Footer"
+import { Health } from "../../api/API";
 
 export function DownPage({ config }) {
 

src/GamePage/GamePage.jsx → src/components/GamePage/GamePage.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, forwardRef, useState } from "react";
 import { BsArrowLeft } from "react-icons/bs";
 import { useParams, useNavigate } from "react-router-dom";
-import { ConnStatus } from "../components/ConnStatus";
-import { GetSnapshot } from "../api/API";
+import { ConnStatus } from "./ConnStatus";
+import { GetSnapshot } from "../../api/API";
 
 export const GamePage = forwardRef((props, ref) => {
    const {config, ws, 
@@ -99,13 +99,7 @@ export const GamePage = forwardRef((props, ref) => {
 
    return (
       <div className="min-h-screen flex flex-col items-center p-2 md:p-4">
-         <div ref={ref} className="h-full w-full flex flex-col items-center max-w-full max-w-xl grow">
-               {/* TAILWIND HACK - Tailwind preloads only used classes so anything not in initial render will not work */}
-               <div className="text-red-500 text-blue-500 text-green-500 text-yellow-500 text-orange-500 text-pink-500 text-purple-500 text-teal-500"/>
-               <div className="border-red-500 border-blue-500 border-green-500 border-yellow-500 border-orange-500 border-pink-500 border-purple-500 border-teal-500"/>
-               <div className="bg-red-500 bg-blue-500 bg-green-500 bg-yellow-500 bg-orange-500 bg-pink-500 bg-pink-500 bg-purple-500 bg-teal-500"/>
-               <div className="fill-red-500 fill-blue-500 fill-green-500 fill-yellow-500 fill-orange-500 fill-pink-500 fill-pink-500 fill-purple-500 fill-teal-500"/>
-               {/* END HACK */}
+         <div ref={ref} className="h-full w-full flex flex-col items-center max-w-xl grow">
                <div className="flex justify-between items-center relative w-full mb-1 justfy-self-start font-thin text-sm">
                   <div>
                      Share this link:&nbsp;

src/HomePage/HomePage.jsx → src/components/HomePage/HomePage.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Adjectives, Nouns, NumToText } from "../util/words";
+import { Adjectives, Nouns, NumToText } from "../../util/words";
 import { useNavigate } from "react-router-dom";
-import { CreateGame, Health } from "../api/API";
+import { CreateGame, Health } from "../../api/API";
 import { IoMdInformationCircleOutline } from "react-icons/io"
-import { Footer } from "../components/Footer"
+import { Footer } from "../Footer"
 
 export function HomePage({ config }) {
 

src/components/index.js

@@ -0,0 +1 @@
+export { Footer } from "./Footer";

src/index.js

@@ -1,10 +1,10 @@
 import React, { useState, useRef, createRef } from "react";
 import ReactDOM from "react-dom";
-import { Route, BrowserRouter, Routes, useNavigate } from "react-router-dom";
+import { Route, BrowserRouter, Routes } from "react-router-dom";
 import '../src/tailwind.css'
-import { DownPage } from "./DownPage/DownPage";
-import { GamePage } from "./GamePage/GamePage";
-import { HomePage } from "./HomePage/HomePage";
+import { DownPage } from "./components/DownPage/DownPage";
+import { GamePage } from "./components/GamePage/GamePage";
+import { HomePage } from "./components/HomePage/HomePage";
 
 const config = {
   // server attributes

src/index.jsx

@@ -1,5 +1,6 @@
 import './tailwind.css'
 
-export { DownPage } from "./DownPage";
-export { HomePage } from "./HomePage";
-export { GamePage } from "./GamePage";
+export { DownPage } from "./components/DownPage";
+export { HomePage } from "./components/HomePage";
+export { GamePage } from "./components/GamePage";
+export { Footer } from "./components";

tailwind.config.js

@@ -7,5 +7,20 @@ module.exports = {
     extend: {},
   },
   plugins: [],
+  safelist: [
+    "font-['coquette']",
+    "text-red-600",
+    {
+      pattern: /bg-(red|green|blue|yellow|orange|pink|purple|teal)-500/,
+    },
+    {
+      pattern: /text-(red|green|blue|yellow|orange|pink|purple|teal)-500/,
+    },
+    {
+      pattern: /border-(red|green|blue|yellow|orange|pink|purple|teal)-500/,
+    },
+    {
+      pattern: /fill-(red|green|blue|yellow|orange|pink|purple|teal)-500/,
+    },
+  ]
 }
-