Work on adding user feedback by opening a github issue from game

client/src/components/navigation.tsx

@@ -3,7 +3,7 @@ import { createContext, useContext, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDownload, faUpload, faEraser, faBook, faBookOpen, faGlobe, faHome,
   faArrowRight, faArrowLeft, faXmark, faBars, faCode,
-  faCircleInfo, faTerminal, faGear, IconDefinition, faShield } from '@fortawesome/free-solid-svg-icons'
+  faCircleInfo, faTerminal, faGear, IconDefinition, faShield, faBug } from '@fortawesome/free-solid-svg-icons'
 import { GameIdContext, PageContext, PreferencesContext } from "../state/context"
 import { useGetGameInfoQuery, useLoadLevelQuery } from '../state/api'
 import { downloadProgress } from './popup/erase'
@@ -339,6 +339,11 @@ export function Navigation () {
               icon={faUpload}
               text={t("Upload")}
               onClick={() => {setPopupContent("upload")}}
+              inverted={true} />
+			<NavButton
+              icon={faBug}
+              text={t("Report Problem")}
+              onClick={() => {setPopupContent("report_problem")}}
               inverted={true} />
           </>}
           <NavButton

client/src/components/popup/popup.tsx

@@ -7,6 +7,7 @@ import { ErasePopup } from './erase'
 import { PreferencesPopup } from './preferences'
 import { UploadPopup } from './upload'
 import { RulesPopup } from './rules'
+import { ReportProblemPopup } from './report_problem'
 import '../../css/popup.css'
 import { NavButton } from '../navigation'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
@@ -23,7 +24,7 @@ export const PopupContext = React.createContext<{
 })
 
 /** To create a new Popup, one needs to add its content as `React.JSX.Element` here
- * and then call `setPopupConent(key)` at the place where to popup should be opened.
+ * and then call `setPopupContent(key)` at the place where to popup should be opened.
  *
  * TODO: The drawback of this design is that there is no check for key missmatches.
  *       How could that be achieved?
@@ -36,6 +37,7 @@ export const Popups = {
   "privacy": <PrivacyPolicyPopup />,
   "rules": <RulesPopup />,
   "upload": <UploadPopup />,
+  "report_problem": <ReportProblemPopup />,
 }
 
 /** The skeleton for the popups. */

client/src/components/popup/report_problem.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Typography } from '@mui/material'
+import { Markdown } from '../utils'
+import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { selectLevel } from '../../state/progress'
+import { useGetGameInfoQuery } from '../../state/api'
+import { GameIdContext, ProofContext } from '../../state/context'
+
+/** Pop-up that is displaying when opening the 'Report Problem' button.
+ *
+ * 
+ * 
+ */
+export function ReportProblemPopup () {
+	const { t } = useTranslation()
+	const { gameId } = React.useContext(GameIdContext)
+	const gameIdShort = gameId.replace("g/local/", "") // If local, remove the first part of the string
+	const gameInfo = useGetGameInfoQuery({game: gameId})
+	const level = useSelector(selectLevel(gameId))
+
+	const { proofState } = React.useContext(ProofContext)
+	console.log("level")
+	console.log(level)
+	console.log("proofState")
+	console.log(proofState)
+    const issueTitle = `Issue with level ${level}`
+    const issueBody = `Describe the issue with level ${level} here: \n\n${proofState}`
+
+	const repoUrl = `https://github.com/leanprover-community/${gameIdShort}`
+	const url = new URL(`${repoUrl}/issues/new`)
+	url.searchParams.set('title', issueTitle)
+	url.searchParams.set('body', issueBody)
+
+    return (
+        <button
+          onClick={() => open(url)}
+          style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}
+        >
+          Report an Issue
+        </button>
+      );
+}