add bug page

quibbble · Oct 15, 2023 · 5a6b6d7 · 5a6b6d7
1 parent 882d47a
commit 5a6b6d7
Show file tree

Hide file tree

Showing 10 changed files with 2,295 additions and 2,187 deletions.
diff --git a/dist/index.mjs b/dist/index.mjs
diff --git a/dist/index.umd.js b/dist/index.umd.js
diff --git a/dist/style.css b/dist/style.css
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.1.6",
+  "version": "1.1.7",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

diff --git a/src/components/BugsPage/BugsPage.jsx b/src/components/BugsPage/BugsPage.jsx
@@ -0,0 +1,54 @@
+import React, { useRef } from "react";
+import ReactMarkdown from 'react-markdown'
+import { useNavigate } from "react-router-dom";
+import remarkGfm from 'remark-gfm'
+import { Footer } from "../Footer";
+
+export function BugsPage({ config }) {
+
+    const navigate = useNavigate();
+    const myRef = useRef()
+
+    const gameID = sessionStorage.getItem("gameID");
+
+    const bugMD = `
+Find a bug? There are two ways to send a report:
+1. Send an email to support@quibbble.com.
+2. Join our [Discord](https://discord.gg/VKvjutuhUp) and send a report in the **#bugs** channel.
+
+In your bug report message please include the following:
+1. The URL of the game, for example https://tsuro.quibbble.com/excited-cat-23.
+2. A description of the bug:
+    - What happened?
+    - What should have happened?
+3. Optionally, screenshots of the game to help diagnose the issue.
+
+Reports go a long way to improving the site for everyone so they are greatly appreciated. As always, thanks for playing and contributing to [quibbble.com](https://quibbble.com).
+
+~ *Chris*
+`
+
+    return (
+        <div ref={myRef} className="flex flex-col items-center m-2 md:m-12">
+            <div className="w-full max-w-3xl bg-zinc-900 p-8 md:p-12 rounded-md">
+                <article className="prose dark:prose-invert max-w-fit fade-in">
+
+                    <div className="flex flex-col md:flex-row w-full h-full justify-between items-center">
+                        <div className="text-4xl font-black mb-6 md:mb-0">
+                            <span className={`text-5xl font-black font-['${ config.font }'] text-${ config.color } mr-1`}>
+                                { config.key }
+                            </span> Bug Report
+                        </div>
+                        <button onClick={ () => gameID ? navigate("/" + gameID) : navigate("/") } className="bg-blue-500 px-6 py-2 font-bold italic">{ gameID ? "Back" : "Play Online"}</button>
+                    </div>
+
+                    <ReactMarkdown children={ bugMD } remarkPlugins={[remarkGfm]} />
+
+                </article>
+            </div>
+            <div className="mt-8">
+                <Footer />
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/BugsPage/index.js b/src/components/BugsPage/index.js
@@ -0,0 +1 @@
+export { BugsPage } from "./BugsPage";
diff --git a/src/components/GamePage/GamePage.jsx b/src/components/GamePage/GamePage.jsx
@@ -152,88 +152,93 @@ export const GamePage = forwardRef((props, ref) => {
       <div className="min-h-screen flex flex-col items-center p-2 md:p-4 fade-in">
          { tResetWindow ? <ResetWindow /> : null }
          <div ref={ref} className={`h-full w-full ${ config.gamePageMaxWidth ? config.gamePageMaxWidth : "max-w-xl" } 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>
-                     <div className="flex items-center cursor-pointer" onClick={() => {
-                           setCopied(1);
-                           navigator.clipboard.writeText(`${ window.location.protocol }//${ window.location.host }/${ gameID }`)
-                        }}>
-                        <ImLink className="mr-1" />
-                        <span className="underline">
-                           { `${ window.location.protocol }//${ window.location.host }/${ gameID }` }
-                        </span>
-                     </div>
-                     {
-                        copied > 0 ?
-                           <div className="absolute mt-2 w-6/12 flex justify-center">
-                              <div className="absolute top-[-12px] w-6 overflow-hidden inline-block">
-                                    <div className=" h-4 w-4 bg-zinc-600 rotate-45 transform origin-bottom-left" />
-                              </div>
-                              <div className="font-bold text-xs text-center bg-zinc-600 px-2 py-1">copied!</div>
-                           </div> : null
-                     }
-                  </div>
-                  <div className="px-1">
-                     <ConnStatus isConn={isConn} />
-                  </div>
-               </div>
-               <hr className="w-full mb-2"/>
-               <div className="flex w-full justify-between items-center mb-4">
-                  <div className="flex">
-                     { 
-                        game && game.Teams ? 
-                           game.Teams.map(el => 
-                              <div key={ el } 
-                                    className={ `text-xs flex items-center justify-center font-bold cursor-pointer mr-1 w-6 h-6 rounded-full border-4 border-${ el }-500 ${ team === el  ? `bg-${ team }-500 pointer-events-none` : "" }` } 
-                                    onClick={ () => sendSetTeamAction(el) }>
-                                       { game && game.MoreData && game.MoreData.Points ? game.MoreData.Points[el] : "" }
-                              </div>) : null 
-                     }
+            <div className="flex justify-between items-center relative w-full mb-1 justfy-self-start font-thin text-sm">
+               <div>
+                  <div className="flex items-center cursor-pointer" onClick={() => {
+                        setCopied(1);
+                        navigator.clipboard.writeText(`${ window.location.protocol }//${ window.location.host }/${ gameID }`)
+                     }}>
+                     <ImLink className="mr-1" />
+                     <span className="underline">
+                        { `${ window.location.protocol }//${ window.location.host }/${ gameID }` }
+                     </span>
                   </div>
-                  <div className={ `font-extrabold ${ game && connected && network && connected[network.Name] && game.Winners.length === 0 ? `text-${ game.Turn }-500` : "text-zinc-100" } ${game && network && connected && connected[network.Name] === game.Turn && game.Winners.length === 0 ? "animate-pulse" : ""}` }>
-                     { 
-                        game && connected && network && connected[network.Name] ? 
-                           game.Message : 
-                           <div className="flex items-center animate-pulse">
-                              <BsArrowLeft className="mr-1" />
-                              <div>select a team</div>
+                  {
+                     copied > 0 ?
+                        <div className="absolute mt-2 w-6/12 flex justify-center">
+                           <div className="absolute top-[-12px] w-6 overflow-hidden inline-block">
+                                 <div className=" h-4 w-4 bg-zinc-600 rotate-45 transform origin-bottom-left" />
                            </div>
-                     }
-                  </div>
+                           <div className="font-bold text-xs text-center bg-zinc-600 px-2 py-1">copied!</div>
+                        </div> : null
+                  }
+               </div>
+               <div className="px-1">
+                  <ConnStatus isConn={isConn} />
+               </div>
+            </div>
+            <hr className="w-full mb-2"/>
+            <div className="flex w-full justify-between items-center mb-4">
+               <div className="flex">
+                  { 
+                     game && game.Teams ? 
+                        game.Teams.map(el => 
+                           <div key={ el } 
+                                 className={ `text-xs flex items-center justify-center font-bold cursor-pointer mr-1 w-6 h-6 rounded-full border-4 border-${ el }-500 ${ team === el  ? `bg-${ team }-500 pointer-events-none` : "" }` } 
+                                 onClick={ () => sendSetTeamAction(el) }>
+                                    { game && game.MoreData && game.MoreData.Points ? game.MoreData.Points[el] : "" }
+                           </div>) : null 
+                  }
                </div>
-
-               <div className="p-4 h-full w-full flex flex-col justify-center items-center grow">
-                  {/* unique game components go here */}
-                  { children }
+               <div className={ `font-extrabold ${ game && connected && network && connected[network.Name] && game.Winners.length === 0 ? `text-${ game.Turn }-500` : "text-zinc-100" } ${game && network && connected && connected[network.Name] === game.Turn && game.Winners.length === 0 ? "animate-pulse" : ""}` }>
+                  { 
+                     game && connected && network && connected[network.Name] ? 
+                        game.Message : 
+                        <div className="flex items-center animate-pulse">
+                           <BsArrowLeft className="mr-1" />
+                           <div>select a team</div>
+                        </div>
+                  }
                </div>
+            </div>
 
-               <hr className="w-full mt-4 mb-2"/>
-               <div className="w-full flex justify-between items-center">
-                  <div className={`leading-4 text-2xl font-black text-${ config.color } cursor-pointer`}>
-                     <button onClick={ () => {
-                        sessionStorage.setItem("gameID", "")
-                        navigate("/")
-                     }}>
-                        <span className={`font-['${ config.font }']`}>{ config.key }</span>
-                        <span className="ml-1 text-[0.5rem] md:text-xs text-zinc-100">{ game && game.MoreData && game.MoreData.Variant ? game.MoreData.Variant : "" }</span>
-                     </button>
-                  </div>
-                  <div className="flex">
-                     <button onClick={() => setTResetWindow(true)} title="reset game" className={`p-2 ${ game && game.Winners.length > 0 ? "bg-blue-500" : "bg-zinc-500"} mr-3 md:mr-2 rounded-full`}>
-                        <IoMdRefresh />
-                     </button>
-                     <button onClick={() => sendUndoAction()} title="undo move" className={`p-2 ${ game && connected && network && game.Actions && game.Actions.length > 0 && game.Actions[game.Actions.length-1].Team === connected[network.Name] ? "bg-amber-500" : "bg-zinc-700 text-zinc-500 cursor-default" } mr-3 md:mr-2 rounded-full`}>
-                        <IoArrowUndoSharp />
-                     </button>
-                     <button onClick={() => {
-                        sessionStorage.setItem("gameID", gameID);
-                        navigate("/rules")
-                     }} title="how to play" className="p-2 bg-blue-500 italic text-xs font-bold">
-                        game rules
-                     </button>
-                     <a className="hidden md:block italic text-xs ml-2 py-1 px-2 border-blue-500 border border-dashed text-blue-500" href="https://quibbble.com" target="_blank">more <span className="text-zinc-100 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
-                  </div>
+            <div className="p-4 h-full w-full flex flex-col justify-center items-center grow">
+               {/* unique game components go here */}
+               { children }
+            </div>
+
+            <hr className="w-full mt-4 mb-2"/>
+            <div className="w-full flex justify-between items-center">
+               <div className={`leading-4 text-2xl font-black text-${ config.color } cursor-pointer`}>
+                  <button onClick={ () => {
+                     sessionStorage.setItem("gameID", "")
+                     navigate("/")
+                  }}>
+                     <span className={`font-['${ config.font }']`}>{ config.key }</span>
+                     <span className="ml-1 text-[0.5rem] md:text-xs text-zinc-100">{ game && game.MoreData && game.MoreData.Variant ? game.MoreData.Variant : "" }</span>
+                  </button>
                </div>
+               <div className="flex">
+                  <button onClick={() => setTResetWindow(true)} title="reset game" className={`p-2 ${ game && game.Winners.length > 0 ? "bg-blue-500" : "bg-zinc-500"} mr-3 md:mr-2 rounded-full`}>
+                     <IoMdRefresh />
+                  </button>
+                  <button onClick={() => sendUndoAction()} title="undo move" className={`p-2 ${ game && connected && network && game.Actions && game.Actions.length > 0 && game.Actions[game.Actions.length-1].Team === connected[network.Name] ? "bg-amber-500" : "bg-zinc-700 text-zinc-500 cursor-default" } mr-3 md:mr-2 rounded-full`}>
+                     <IoArrowUndoSharp />
+                  </button>
+                  <button onClick={() => {
+                     sessionStorage.setItem("gameID", gameID);
+                     navigate("/rules")
+                  }} title="how to play" className="p-2 bg-blue-500 italic text-xs font-bold">
+                     game rules
+                  </button>
+                  <button onClick={() => {
+                     sessionStorage.setItem("gameID", gameID);
+                     navigate("/bugs")
+                  }} title="find a bug?" className={`ml-3 md:ml-2 p-2 bg-zinc-500 italic text-xs font-bold`}>
+                     find a bug?
+                  </button>
+               </div>
+            </div>
          </div>
       </div>
 )})
diff --git a/src/example/App.jsx b/src/example/App.jsx
@@ -4,6 +4,7 @@ import { DownPage } from "../components/DownPage/DownPage";
 import { GamePage } from "../components/GamePage/GamePage";
 import { HomePage } from "../components/HomePage/HomePage";
 import { RulesPage } from "../components/RulesPage/RulesPage";
+import { BugsPage } from "../components/BugsPage";
 import Rules from "./rules.md"
 
 const config = {
@@ -61,6 +62,7 @@ export default function App() {
         />
         <Route exact path="/status/down" element={ <DownPage config={ config } /> }/>
         <Route exact path="/rules" element={ <RulesPage config={ config } rules={ rules } /> }/>
+        <Route exact path="/bugs" element={ <BugsPage config={ config } /> }/>
         <Route path="/" element={ <HomePage config={ config } /> } />
       </Routes>
     </BrowserRouter>

diff --git a/src/index.jsx b/src/index.jsx
@@ -4,4 +4,5 @@ export { DownPage } from "./components/DownPage";
 export { HomePage } from "./components/HomePage";
 export { GamePage } from "./components/GamePage";
 export { RulesPage } from "./components/RulesPage";
+export { BugsPage } from "./components/BugsPage";
 export { Footer } from "./components";