add game page max width field

quibbble · Sep 13, 2023 · eb6395a · eb6395a
1 parent 30c25f6
commit eb6395a
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/dist/index.mjs b/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-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: () => {
+  }, [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 ${n.gamePageMaxWidth} flex flex-col items-center 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",

diff --git a/dist/index.umd.js b/dist/index.umd.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@quibbble/boardgame",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

diff --git a/src/components/GamePage/GamePage.jsx b/src/components/GamePage/GamePage.jsx
@@ -99,7 +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-xl grow">
+         <div ref={ref} className={`h-full w-full ${ config.gamePageMaxWidth } flex flex-col items-center 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;

diff --git a/src/index.js b/src/index.js
@@ -23,7 +23,10 @@ const config = {
 
   // styling attributes
   font: "coquette",
-  color: "red-600"
+  color: "red-600",
+
+  // misc attributes
+  gamePageMaxWidth: "max-w-xl"
 }
 
 function App() {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
   safelist: [
     "font-['coquette']",
     "text-red-600",
+    "max-w-xl",
     {
       pattern: /bg-(red|green|blue|yellow|orange|pink|purple|teal)-500/,
     },