Implement feedback widget. Fixes #5 (#8)

package.json

@@ -7,6 +7,9 @@
   "eslintConfig": {
     "env": {
       "browser": true
+    },
+    "globals": {
+      "doorbell": false
     }
   },
   "scripts": {

src/index.html

@@ -8,7 +8,6 @@
 
     <title>Beaming</title>
 
-    <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HXLD6EE5NS"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
@@ -39,6 +38,10 @@ <h1 class="flex-left">Beaming</h1>
         hexagonal grid. The rules and solution for each puzzle can be inferred by interaction and visual cues. Both
         desktop and mobile devices are supported.
       </p>
+      <div class="buttons flex-center">
+        <button class="button" id="feedback">Give Feedback</button>
+        <a class="button" href="https://buymeacoffee.com/kflorence" id="support" target="_blank">Give Support</a>
+      </div>
       <details>
         <summary>The Basics</summary>
         <p>
@@ -128,23 +131,27 @@ <h1 class="flex-left">Beaming</h1>
           </p>
         </details>
       </details>
-      <h3>Help</h3>
-      <p>
-        If you think you've found an issue, you can report it on the <a href="https://github.com/kflorence/beaming/issues">issue tracker</a>
-        (requires a <a href="https://github.com/">GitHub</a> account). Note that the state of the currently active
-        puzzle is stored in the URL (<code>.../#/[puzzle-id]/[encoded-state]</code>). You should include the full URL when
-        reporting issues. You can of course also use this URL to share a specific state of a puzzle with others, just be
-        aware not to spoil. If you're just trying to share a specific puzzle but not the state, just exclude the
-        <code>.../[encoded-state]</code> at the end of the URL before sharing.
-      </p>
-      <h4>Troubleshooting</h4>
-      <p>
-        If you just want to get on with puzzle solving after encountering an issue, you can first try refreshing the page. If
-        that doesn't work, you can try clearing the cache for the current puzzle by adding <code>?clearCache=[puzzle-id]</code>
-        right before the hash sign (#) in the URL and pressing enter. Be sure to remove it after the page has re-loaded,
-        otherwise any changes you make to that puzzle will not be stored in the local browser cache. If for some reason
-        you want to clear all cache, you can use <code>?clearCache</code> without the <code>=[puzzle-id]</code>.
-      </p>
+      <details id="help">
+        <summary>Help</summary>
+        <h3>Feedback</h3>
+        <p>
+          If you have a suggestion or encounter any problem, please use the form below to report them. Email address is
+          optional, but you can include it if you want to get a response back.
+        </p>
+        <section id="feedback-container"></section>
+        <h4>Troubleshooting</h4>
+        <p>
+          You might be wondering what all that stuff in the URL is. Each URL parameter is separated by a forward slash
+          (<code>/</code>). The parameter after the hash (<code>#</code>) symbol is the puzzle ID. The parameter after
+          that is the state of the current puzzle, stored base64 encoded and compressed. Both of these parameters are
+          optional and will be automatically updated when you load and interact with the game. In addition to storing
+          state in the URL, which is useful when sharing the state of a puzzle with others, state is also stored locally
+          in your browser's <code>localStorage</code> cache. If for some reason you need to clear cache for a puzzle, you
+          can insert <code>?clearCache=[puzzle ID]</code> in the URL right after the opening forward slash. If you want
+          to clear all cache, omit the <code>=[puzzle ID]</code>, or execute <code>localStorage.clear()</code> in your
+          browser's console.
+        </p>
+      </details>
       <h3>Thanks!</h3>
       <p>
         This game was primarily inspired by
@@ -153,20 +160,16 @@ <h3>Thanks!</h3>
         puzzle games. Additionally, this game would not have been possible without the
         <a href="http://paperjs.org/">Paper.js</a> library.
       </p>
-      <p>
-        If you're enjoying the game, please consider sharing it with others. If you'd like to help support further
-        development, please check out the <em>support me</em> link below.
-      </p>
+      <p>If you're enjoying the game, please consider sharing it with others!</p>
       <p class="emoji">&#128513;</p>
       <footer>
         <div class="flex-left">
           <ul>
             <li><a href="https://github.com/kflorence/beaming">source</a></li>
-            <li><a href="https://buymeacoffee.com/kflorence">support me</a></li>
           </ul>
         </div>
         <div class="flex-right">
-          <form><button formmethod="dialog">close</button></form>
+          <form><button class="button" formmethod="dialog">close</button></form>
         </div>
       </footer>
     </dialog>
@@ -204,5 +207,15 @@ <h3>Thanks!</h3>
       </div>
     </footer>
   </body>
+  <script defer src="https://embed.doorbell.io/button/14129/1705777677/init?native_json=1&needs_postmessage=0"></script>
+  <script>
+    window.doorbell ??= {};
+    window.doorbellOptions = {
+      appKey: "o1smdnJiyxObjMcY0jSTf08TIhA814yLq68rEwTDWTavma7dtIVKEdwzMePE2LHC",
+      container: document.getElementById('feedback-container'),
+      hideButton: true,
+      properties: {}
+    };
+  </script>
   <script type="module" src="index.js"></script>
 </html>

src/index.js

@@ -15,8 +15,14 @@ beaming.debug = function (debug) {
 // Silence debug logging by default since it can affect performance
 beaming.debug(params.has('debug') ?? false)
 
+// Feedback module
+const doorbellOptions = window.doorbellOptions
+
 const elements = Object.freeze({
   dialog: document.getElementById('dialog'),
+  feedback: document.getElementById('feedback'),
+  feedbackContainer: document.getElementById('feedback-container'),
+  help: document.getElementById('help'),
   info: document.getElementById('info'),
   main: document.getElementById('main'),
   message: document.getElementById('message'),
@@ -32,6 +38,11 @@ const elements = Object.freeze({
 
 const puzzle = beaming.puzzle = new Puzzle(elements.puzzle)
 
+elements.feedback.addEventListener('click', () => {
+  elements.help.setAttribute('open', 'true')
+  elements.feedbackContainer.scrollIntoView(true)
+})
+
 elements.info.addEventListener('click', () => {
   if (!elements.dialog.open) {
     elements.dialog.showModal()
@@ -59,6 +70,8 @@ document.addEventListener(Puzzle.Events.Updated, (event) => {
   const id = state.getId()
   const title = state.getTitle()
 
+  doorbellOptions.properties.puzzleId = id
+
   elements.title.textContent = `Beaming: Puzzle ${title}`
 
   removeClass('disabled', ...Array.from(document.querySelectorAll('#actions li')))

src/styles.css

@@ -43,7 +43,7 @@ details > details {
 }
 
 details > summary {
-  cursor: help;
+  cursor: pointer;
 }
 
 dialog {
@@ -58,6 +58,15 @@ dialog .flex-left {
   flex: 2;
 }
 
+dialog details h3,
+dialog details h4,
+dialog details p {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 dialog h1 {
   margin: 0;
   padding: 0;
@@ -143,6 +152,18 @@ main {
   flex: auto;
 }
 
+#doorbell.doorbell-inline #doorbell-container {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 1em;
+  width: auto;
+}
+
+#doorbell form legend {
+  display: none;
+}
+
 #error,
 #puzzle {
   cursor: pointer;
@@ -216,6 +237,28 @@ main {
   background-color: black;
 }
 
+.button {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  color: #333;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  padding: 0.5em 1em;
+  text-decoration: none;
+}
+
+.button:hover {
+  background-color: #ddd;
+  border-color: #aaa;
+  cursor: pointer;
+}
+
+.buttons {
+  grid-gap: 1em;
+  margin: 1em 0;
+}
+
 .flex-center,
 .flex-left,
 .flex-right {