phc/lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove references to testgame on the server, add gameId to router

Browse Source
This commit is contained in:
Alexander Bentkamp
2023-03-23 16:23:06 +01:00
parent a4623a8241
commit bf2315b474
14 changed files with 159 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Inventory.tsx
+3 -2
View File
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
import Markdown from './Markdown';
import { useLoadDocQuery, ComputedInventoryItem } from '../state/api';
import { GameIdContext } from '../App';
export function Inventory({ tactics, lemmas, definitions, setInventoryDoc } :
{lemmas: ComputedInventoryItem[],
@@ -77,8 +78,8 @@ function InventoryItem({name, displayName, locked, disabled, showDoc}) {
}
export function Documentation({name, type}) {
const doc = useLoadDocQuery({type: type, name: name})
const gameId = React.useContext(GameIdContext)
const doc = useLoadDocQuery({game: gameId, type: type, name: name})
return <>
<h2 className="doc">{doc.data?.displayName}</h2>
client/src/components/Level.tsx
+20 -15
View File
@@ -40,6 +40,7 @@ import Markdown from './Markdown';
import Split from 'react-split'
import { Alert } from '@mui/material';
import { GameIdContext } from '../App';
export const MonacoEditorContext = React.createContext<monaco.editor.IStandaloneCodeEditor>(null as any);
@@ -125,9 +126,9 @@ function PlayableLevel({worldId, levelId}) {
}]);
}
const gameInfo = useGetGameInfoQuery()
const level = useLoadLevelQuery({world: worldId, level: levelId})
const gameId = React.useContext(GameIdContext)
const gameInfo = useGetGameInfoQuery({game: gameId})
const level = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
const dispatch = useAppDispatch()
@@ -209,8 +210,8 @@ function PlayableLevel({worldId, levelId}) {
<Markdown>{level?.data?.conclusion}</Markdown>
</div>
{levelId >= gameInfo.data?.worldSize[worldId] ?
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button> :
<Button to={`/world/${worldId}/level/${levelId + 1}`}>
<Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
<Button to={`/game/${gameId}/world/${worldId}/level/${levelId + 1}`}>
Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>}
</div>}
@@ -230,7 +231,8 @@ function PlayableLevel({worldId, levelId}) {
export default Level
function Introduction({worldId}) {
const gameInfo = useGetGameInfoQuery()
const gameId = React.useContext(GameIdContext)
const gameInfo = useGetGameInfoQuery({game: gameId})
return <>
<div style={gameInfo.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
@@ -245,8 +247,8 @@ function Introduction({worldId}) {
</div>
<div className="conclusion">
{0 == gameInfo.data?.worldSize[worldId] ?
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button> :
<Button to={`/world/${worldId}/level/1`}>
<Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
<Button to={`/game/${gameId}/world/${worldId}/level/1`}>
Start&nbsp;<FontAwesomeIcon icon={faArrowRight} />
</Button>}
</div>
@@ -255,11 +257,12 @@ function Introduction({worldId}) {
}
function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
const gameInfo = useGetGameInfoQuery()
const gameId = React.useContext(GameIdContext)
const gameInfo = useGetGameInfoQuery({game: gameId})
return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
<div>
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button>
<Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button>
<span className="app-bar-title">
{gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
</span>
@@ -269,10 +272,10 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
{levelTitle}
</span>
<Button disabled={levelId <= 0} inverted={true}
to={`/world/${worldId}/level/${levelId - 1}`}
to={`/game/${gameId}/world/${worldId}/level/${levelId - 1}`}
><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
to={`/world/${worldId}/level/${levelId + 1}`}
to={`/game/${gameId}/world/${worldId}/level/${levelId + 1}`}
>Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
</div>
@@ -282,6 +285,7 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) {
const connection = React.useContext(ConnectionContext)
const gameId = React.useContext(GameIdContext)
const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor|null>(null)
const [infoProvider, setInfoProvider] = useState<null|InfoProvider>(null)
@@ -308,7 +312,7 @@ function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCo
theme: 'vs-code-theme-converted'
})
const infoProvider = new InfoProvider(connection.getLeanClient())
const infoProvider = new InfoProvider(connection.getLeanClient(gameId))
const editorApi = infoProvider.getApi()
@@ -358,7 +362,7 @@ function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCo
return () => { infoProvider.dispose(); editor.dispose() }
}, [])
const {leanClient, leanClientStarted} = useLeanClient()
const {leanClient, leanClientStarted} = useLeanClient(gameId)
// Create model when level changes
useEffect(() => {
@@ -391,7 +395,8 @@ function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCo
/** Open all files in this world on the server so that they will load faster when accessed */
function useLoadWorldFiles(worldId) {
const gameInfo = useGetGameInfoQuery()
const gameId = React.useContext(GameIdContext)
const gameInfo = useGetGameInfoQuery({game: gameId})
const store = useStore()
useEffect(() => {
client/src/components/Welcome.tsx
+6 -3
View File
@@ -14,13 +14,15 @@ import { useGetGameInfoQuery } from '../state/api';
import { Link } from 'react-router-dom';
import Markdown from './Markdown';
import { selectCompleted } from '../state/progress';
import { GameIdContext } from '../App';
function LevelIcon({ worldId, levelId, position }) {
const gameId = React.useContext(GameIdContext)
const completed = useSelector(selectCompleted(worldId,levelId))
// TODO: relative positioning?
return (
<Link to={`/world/${worldId}/level/${levelId}`} key={`/world/${worldId}/level/${levelId}`}>
<Link to={`/game/${gameId}/${worldId}/level/${levelId}`} key={`/game/${gameId}/world/${worldId}/level/${levelId}`}>
<circle fill={completed ? "green" :"#aaa"} cx={position.x + Math.sin(levelId/5) * 9} cy={position.y - Math.cos(levelId/5) * 9} r="0.8" />
</Link>
)
@@ -29,7 +31,8 @@ function LevelIcon({ worldId, levelId, position }) {
function Welcome() {
const navigate = useNavigate();
const gameInfo = useGetGameInfoQuery()
const gameId = React.useContext(GameIdContext)
const gameInfo = useGetGameInfoQuery({game: gameId})
const { nodes, bounds }: any = gameInfo.data ? computeWorldLayout(gameInfo.data?.worlds) : {nodes: []}
@@ -55,7 +58,7 @@ function Welcome() {
let position: cytoscape.Position = nodes[id].position
svgElements.push(
<Link key={`world${id}`} to={`/world/${id}/level/0`}>
<Link key={`world${id}`} to={`/game/${gameId}/world/${id}/level/0`}>
<circle className="world-circle" cx={position.x} cy={position.y} r="8" />
<text className="world-name"
x={position.x} y={position.y}>{nodes[id].data.title ? nodes[id].data.title : id}</text>