refactor: navigation and other stuff
Jon Eugster
2 years ago
parent
08875e4415
commit
d82ef8af8f
Binary file not shown.
@ -0,0 +1,93 @@
|
|||||||
|
Copyright (c) 2020 - 2023, cormullion
|
||||||
|
with Reserved Font Name JuliaMono.
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
Copyright 2021 Google Inc. All Rights Reserved.
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
https://openfontlicense.org
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
Binary file not shown.
Binary file not shown.
@ -1,321 +0,0 @@
|
|||||||
/**
|
|
||||||
* @file contains the navigation bars of the app.
|
|
||||||
*/
|
|
||||||
import * as React from 'react'
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
||||||
import { faDownload, faUpload, faEraser, faBook, faBookOpen, faGlobe, faHome,
|
|
||||||
faArrowRight, faArrowLeft, faXmark, faBars, faCode,
|
|
||||||
faCircleInfo, faTerminal, faGear } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { GameIdContext } from "../app"
|
|
||||||
import { InputModeContext, PreferencesContext, WorldLevelIdContext } from "./infoview/context"
|
|
||||||
import { GameInfo, useGetGameInfoQuery } from '../state/api'
|
|
||||||
import { changedOpenedIntro, selectCompleted, selectDifficulty, selectProgress } from '../state/progress'
|
|
||||||
import { useAppDispatch, useAppSelector } from '../hooks'
|
|
||||||
import { Button } from './button'
|
|
||||||
import { downloadProgress } from './popup/erase'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
|
||||||
|
|
||||||
/** navigation buttons for mobile welcome page to switch between intro/tree/inventory. */
|
|
||||||
function MobileNavButtons({pageNumber, setPageNumber}:
|
|
||||||
{ pageNumber: number,
|
|
||||||
setPageNumber: any}) {
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const dispatch = useAppDispatch()
|
|
||||||
|
|
||||||
// if `prevText` or `prevIcon` is set, show a button to go back
|
|
||||||
let prevText = {0: null, 1: t("Intro"), 2: null}[pageNumber]
|
|
||||||
let prevIcon = {0: null, 1: null, 2: faBookOpen}[pageNumber]
|
|
||||||
let prevTitle = {0: null, 1: t("Game Introduction"), 2: t("World selection")}[pageNumber]
|
|
||||||
// if `nextText` or `nextIcon` is set, show a button to go forward
|
|
||||||
let nextText = {0: t("Start"), 1: null, 2: null}[pageNumber]
|
|
||||||
let nextIcon = {0: null, 1: faBook, 2: null}[pageNumber]
|
|
||||||
let nextTitle = {0: t("World selection"), 1: t("Inventory"), 2: null}[pageNumber]
|
|
||||||
|
|
||||||
return <>
|
|
||||||
{(prevText || prevIcon) &&
|
|
||||||
<Button className="btn btn-inverted toggle-width" to={pageNumber == 0 ? "/" : ""}
|
|
||||||
inverted="true" title={prevTitle}
|
|
||||||
onClick={() => {pageNumber == 0 ? null : setPageNumber(pageNumber - 1)}}>
|
|
||||||
{prevIcon && <FontAwesomeIcon icon={prevIcon} />}
|
|
||||||
{prevText && `${prevText}`}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
{(nextText || nextIcon) &&
|
|
||||||
<Button className="btn btn-inverted toggle-width" to="" inverted="true"
|
|
||||||
title={nextTitle} onClick={() => {
|
|
||||||
console.log(`page number: ${pageNumber}`)
|
|
||||||
setPageNumber(pageNumber+1);
|
|
||||||
dispatch(changedOpenedIntro({game: gameId, openedIntro: true}))}}>
|
|
||||||
{nextText && `${nextText}`}
|
|
||||||
{nextIcon && <FontAwesomeIcon icon={nextIcon} />}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button to toggle dropdown menu. */
|
|
||||||
export function MenuButton({navOpen, setNavOpen}) {
|
|
||||||
return <Button to="" className="btn toggle-width" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}}>
|
|
||||||
{navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button to go one level futher.
|
|
||||||
* for the last level, this button turns into a button going back to the welcome page.
|
|
||||||
*/
|
|
||||||
function NextButton({worldSize, difficulty, completed, setNavOpen}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
const {worldId, levelId} = React.useContext(WorldLevelIdContext)
|
|
||||||
return (levelId < worldSize ?
|
|
||||||
<Button inverted="true"
|
|
||||||
to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title={t("next level")}
|
|
||||||
disabled={difficulty >= 2 && !(completed || levelId == 0)}
|
|
||||||
onClick={() => setNavOpen(false)}>
|
|
||||||
<FontAwesomeIcon icon={faArrowRight} /> {levelId ? t("Next") : t("Start")}
|
|
||||||
</Button>
|
|
||||||
:
|
|
||||||
<Button to={`/${gameId}`} inverted="true" title={t("back to world selection")} id="home-btn">
|
|
||||||
<FontAwesomeIcon icon={faHome} /> {t("Leave World")}
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button to go one level back.
|
|
||||||
* only renders if the current level id is > 0.
|
|
||||||
*/
|
|
||||||
function PreviousButton({setNavOpen}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
const {worldId, levelId} = React.useContext(WorldLevelIdContext)
|
|
||||||
return (levelId > 0 && <>
|
|
||||||
<Button disabled={levelId <= 0} inverted="true"
|
|
||||||
to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
|
|
||||||
title={t("previous level")}
|
|
||||||
onClick={() => setNavOpen(false)}>
|
|
||||||
<FontAwesomeIcon icon={faArrowLeft} /> {t("Previous")}
|
|
||||||
</Button>
|
|
||||||
</>)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button to toggle between editor and typewriter */
|
|
||||||
function InputModeButton({setNavOpen, isDropdown}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const {levelId} = React.useContext(WorldLevelIdContext)
|
|
||||||
const {typewriterMode, setTypewriterMode, lockEditorMode} = React.useContext(InputModeContext)
|
|
||||||
|
|
||||||
/** toggle input mode if allowed */
|
|
||||||
function toggleInputMode(ev: React.MouseEvent) {
|
|
||||||
if (!lockEditorMode){
|
|
||||||
setTypewriterMode(!typewriterMode)
|
|
||||||
setNavOpen(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Button
|
|
||||||
className={`btn btn-inverted ${isDropdown? '' : 'toggle-width'}`} disabled={levelId <= 0 || lockEditorMode}
|
|
||||||
inverted="true" to=""
|
|
||||||
onClick={(ev) => toggleInputMode(ev)}
|
|
||||||
title={lockEditorMode ? t("Editor mode is enforced!") : typewriterMode ? t("Editor mode") : t("Typewriter mode")}>
|
|
||||||
<FontAwesomeIcon icon={(typewriterMode && !lockEditorMode) ? faCode : faTerminal} />
|
|
||||||
{isDropdown && ((typewriterMode && !lockEditorMode) ? <> {t("Editor mode")}</> : <> {t("Typewriter mode")}</>)}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ImpressumButton({setNavOpen, toggleImpressum, isDropdown}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button className="btn btn-inverted"
|
|
||||||
title={t("Impressum")} inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faCircleInfo} />
|
|
||||||
{isDropdown && <> {t("Impressum")}</>}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PrivacyButton({setNavOpen, togglePrivacy, isDropdown}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button className="btn btn-inverted"
|
|
||||||
title={t("Privacy Policy")} inverted="true" to="" onClick={(ev) => {togglePrivacy(ev); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faCircleInfo} />
|
|
||||||
{isDropdown && <> {t("Privacy Policy")}</>}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PreferencesButton({setNavOpen, togglePreferencesPopup}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button title={t("Preferences")} inverted="true" to="" onClick={() => {togglePreferencesPopup(); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faGear} /> {t("Preferences")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function GameInfoButton({setNavOpen, toggleInfo}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button className="btn btn-inverted"
|
|
||||||
title={t("Game Info & Credits")} inverted="true" to="" onClick={() => {toggleInfo(); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faCircleInfo} /> {t("Game Info")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function EraseButton ({setNavOpen, toggleEraseMenu}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button title={t("Clear Progress")} inverted="true" to="" onClick={() => {toggleEraseMenu(); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faEraser} /> {t("Erase")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function DownloadButton ({setNavOpen, gameId, gameProgress}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button title={t("Download Progress")} inverted="true" to="" onClick={(ev) => {downloadProgress(gameId, gameProgress, ev); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faDownload} /> {t("Download")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function UploadButton ({setNavOpen, toggleUploadMenu}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button title={t("Load Progress from JSON")} inverted="true" to="" onClick={() => {toggleUploadMenu(); setNavOpen(false)}}>
|
|
||||||
<FontAwesomeIcon icon={faUpload} /> {t("Upload")}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button to go back to welcome page */
|
|
||||||
function HomeButton({isDropdown}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
return <Button to={`/${gameId}`} inverted="true" title={t("back to world selection")} id="home-btn">
|
|
||||||
<FontAwesomeIcon icon={faHome} />
|
|
||||||
{isDropdown && <> {t("Home")}</>}
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
function LandingPageButton() {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return <Button inverted="false" title={t("back to games selection")} to="/">
|
|
||||||
<FontAwesomeIcon icon={faArrowLeft} /> <FontAwesomeIcon icon={faGlobe} />
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** button in mobile level to toggle inventory.
|
|
||||||
* only displays a button if `setPageNumber` is set.
|
|
||||||
*/
|
|
||||||
function InventoryButton({pageNumber, setPageNumber}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
return (setPageNumber &&
|
|
||||||
<Button to="" className="btn btn-inverted toggle-width"
|
|
||||||
title={pageNumber ? t("close inventory") : t("show inventory")}
|
|
||||||
inverted="true" onClick={() => {setPageNumber(pageNumber ? 0 : 1)}}>
|
|
||||||
<FontAwesomeIcon icon={pageNumber ? faBookOpen : faBook} />
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/** the navigation bar on the welcome page */
|
|
||||||
export function WelcomeAppBar({pageNumber, setPageNumber, gameInfo, toggleImpressum, togglePrivacy, toggleEraseMenu, toggleUploadMenu, toggleInfo, togglePreferencesPopup} : {
|
|
||||||
pageNumber: number,
|
|
||||||
setPageNumber: any,
|
|
||||||
gameInfo: GameInfo,
|
|
||||||
toggleImpressum: any,
|
|
||||||
togglePrivacy: any,
|
|
||||||
toggleEraseMenu: any,
|
|
||||||
toggleUploadMenu: any,
|
|
||||||
toggleInfo: any,
|
|
||||||
togglePreferencesPopup: () => void;
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
const gameProgress = useAppSelector(selectProgress(gameId))
|
|
||||||
const {mobile} = React.useContext(PreferencesContext)
|
|
||||||
const [navOpen, setNavOpen] = React.useState(false)
|
|
||||||
|
|
||||||
return <div className="app-bar">
|
|
||||||
<div className='app-bar-left'>
|
|
||||||
<LandingPageButton />
|
|
||||||
<span className="app-bar-title"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{!mobile && <span className="app-bar-title">{t(gameInfo?.title, {ns: gameId})}</span>}
|
|
||||||
</div>
|
|
||||||
<div className="nav-btns">
|
|
||||||
{mobile && <MobileNavButtons pageNumber={pageNumber} setPageNumber={setPageNumber} />}
|
|
||||||
<MenuButton navOpen={navOpen} setNavOpen={setNavOpen} />
|
|
||||||
</div>
|
|
||||||
<div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
|
|
||||||
<GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
|
|
||||||
<EraseButton setNavOpen={setNavOpen} toggleEraseMenu={toggleEraseMenu}/>
|
|
||||||
<DownloadButton setNavOpen={setNavOpen} gameId={gameId} gameProgress={gameProgress}/>
|
|
||||||
<UploadButton setNavOpen={setNavOpen} toggleUploadMenu={toggleUploadMenu}/>
|
|
||||||
<ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
|
|
||||||
<PrivacyButton setNavOpen={setNavOpen} togglePrivacy={togglePrivacy} isDropdown={true} />
|
|
||||||
<PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
/** the navigation bar in a level */
|
|
||||||
export function LevelAppBar({isLoading, levelTitle, toggleImpressum, togglePrivacy, toggleInfo, togglePreferencesPopup, pageNumber=undefined, setPageNumber=undefined} : {
|
|
||||||
isLoading: boolean,
|
|
||||||
levelTitle: string,
|
|
||||||
toggleImpressum: any,
|
|
||||||
togglePrivacy: any,
|
|
||||||
toggleInfo: any,
|
|
||||||
togglePreferencesPopup: any,
|
|
||||||
pageNumber?: number,
|
|
||||||
setPageNumber?: any,
|
|
||||||
}) {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
const gameId = React.useContext(GameIdContext)
|
|
||||||
const {worldId, levelId} = React.useContext(WorldLevelIdContext)
|
|
||||||
const {mobile} = React.useContext(PreferencesContext)
|
|
||||||
const [navOpen, setNavOpen] = React.useState(false)
|
|
||||||
const gameInfo = useGetGameInfoQuery({game: gameId})
|
|
||||||
const completed = useAppSelector(selectCompleted(gameId, worldId, levelId))
|
|
||||||
const difficulty = useAppSelector(selectDifficulty(gameId))
|
|
||||||
|
|
||||||
let worldTitle = gameInfo.data?.worlds.nodes[worldId].title
|
|
||||||
|
|
||||||
return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
|
|
||||||
{mobile ?
|
|
||||||
<>
|
|
||||||
{/* MOBILE VERSION */}
|
|
||||||
<div>
|
|
||||||
<span className="app-bar-title">{levelTitle}</span>
|
|
||||||
</div>
|
|
||||||
<div className="nav-btns">
|
|
||||||
<InventoryButton pageNumber={pageNumber} setPageNumber={setPageNumber}/>
|
|
||||||
<MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
|
|
||||||
</div>
|
|
||||||
<div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
|
|
||||||
<NextButton worldSize={gameInfo.data?.worldSize[worldId]} difficulty={difficulty} completed={completed} setNavOpen={setNavOpen} />
|
|
||||||
<PreviousButton setNavOpen={setNavOpen} />
|
|
||||||
<HomeButton isDropdown={true} />
|
|
||||||
<InputModeButton setNavOpen={setNavOpen} isDropdown={true}/>
|
|
||||||
<GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
|
|
||||||
<ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
|
|
||||||
<PrivacyButton setNavOpen={setNavOpen} togglePrivacy={togglePrivacy} isDropdown={true} />
|
|
||||||
<PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
|
|
||||||
</div>
|
|
||||||
</> :
|
|
||||||
<>
|
|
||||||
{/* DESKTOP VERSION */}
|
|
||||||
<div className='app-bar-left'>
|
|
||||||
<HomeButton isDropdown={false} />
|
|
||||||
<span className="app-bar-title">{worldTitle && `${t("World")}: ${t(worldTitle, {ns: gameId})}`}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="app-bar-title">{levelTitle}</span>
|
|
||||||
</div>
|
|
||||||
<div className="nav-btns">
|
|
||||||
<PreviousButton setNavOpen={setNavOpen} />
|
|
||||||
<NextButton worldSize={gameInfo.data?.worldSize[worldId]} difficulty={difficulty} completed={completed} setNavOpen={setNavOpen} />
|
|
||||||
<InputModeButton setNavOpen={setNavOpen} isDropdown={false}/>
|
|
||||||
<MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
|
|
||||||
</div>
|
|
||||||
<div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
|
|
||||||
<GameInfoButton setNavOpen={setNavOpen} toggleInfo={toggleInfo}/>
|
|
||||||
<ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
|
|
||||||
<PrivacyButton setNavOpen={setNavOpen} togglePrivacy={togglePrivacy} isDropdown={true} />
|
|
||||||
<PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import i18next from "i18next"
|
||||||
|
import React from "react"
|
||||||
|
import { useParams } from "react-router-dom"
|
||||||
|
import { GameIdContext } from "../app"
|
||||||
|
import { useGetGameInfoQuery } from "../state/api"
|
||||||
|
|
||||||
|
function Game() {
|
||||||
|
const params = useParams()
|
||||||
|
const levelId = parseInt(params.levelId)
|
||||||
|
const worldId = params.worldId
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<GameIdContext.Provider value={gameId}></GameIdContext.Provider>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
@ -0,0 +1,276 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
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'
|
||||||
|
import { GameIdContext } from "../app"
|
||||||
|
import { PageContext, PreferencesContext } from "./infoview/context"
|
||||||
|
import { useGetGameInfoQuery, useLoadLevelQuery } from '../state/api'
|
||||||
|
import { downloadProgress } from './popup/erase'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import '../css/navigation.css'
|
||||||
|
import { PopupContext } from './popup/popup'
|
||||||
|
|
||||||
|
/** SVG github icon */
|
||||||
|
function GithubIcon () {
|
||||||
|
return <svg className="svg-inline--fa" height="24" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" >
|
||||||
|
<path fill="#fff" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A button to appear in the navigation (both, top bar or dropdown). */
|
||||||
|
export const NavButton: React.FC<{
|
||||||
|
icon?: IconDefinition
|
||||||
|
iconElement?: JSX.Element
|
||||||
|
text?: string
|
||||||
|
onClick?: React.MouseEventHandler<HTMLAnchorElement>
|
||||||
|
title?: string
|
||||||
|
href?: string
|
||||||
|
inverted?: boolean
|
||||||
|
disabled?: boolean
|
||||||
|
}> = ({icon, iconElement, text, onClick=()=>{}, title, href=null, inverted=false, disabled=false}) => {
|
||||||
|
return <a className={`nav-button btn${inverted?' btn-inverted':''}${disabled?' btn-disabled':''}`} onClick={disabled?null:onClick} href={disabled?null:href} title={title}>
|
||||||
|
{iconElement ?? (icon && <FontAwesomeIcon icon={icon} />)}{text && <> {text}</>}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Context which manages the dropdown navigation */
|
||||||
|
const NavigationContext = createContext<{
|
||||||
|
navOpen: boolean,
|
||||||
|
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>
|
||||||
|
}>({navOpen: false, setNavOpen: () => {}})
|
||||||
|
|
||||||
|
|
||||||
|
/** Content of the navigation on Desktop during world selection. */
|
||||||
|
function DesktopNavigationOverview () {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const {gameId} = useContext(GameIdContext)
|
||||||
|
const gameInfo = useGetGameInfoQuery({game: gameId})
|
||||||
|
|
||||||
|
return <div className="nav-content">
|
||||||
|
<div className="nav-title-left"></div>
|
||||||
|
<div className="nav-title-middle">
|
||||||
|
<span className="nav-title">{t(gameInfo.data?.title, {ns: gameId})}</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-title-right"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Content of the navigation on Mobile during world selection. */
|
||||||
|
function MobileNavigationOverview () {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const {page, setPage} = useContext(PageContext)
|
||||||
|
|
||||||
|
return <div className="nav-content">
|
||||||
|
<div className="nav-title-left"></div>
|
||||||
|
<div className="nav-title-middle">
|
||||||
|
<span className="nav-title">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-title-right">
|
||||||
|
{page > 0 &&
|
||||||
|
<NavButton
|
||||||
|
text={page == 1 ? t("Intro") : null}
|
||||||
|
icon={page == 1 ? null : faBookOpen}
|
||||||
|
onClick={() => setPage(page - 1)}
|
||||||
|
inverted={true} />
|
||||||
|
}
|
||||||
|
{ page < 2 &&
|
||||||
|
<NavButton
|
||||||
|
text={(page==0) ? t("Start") : null}
|
||||||
|
icon={(page==0) ? null : faBook}
|
||||||
|
onClick={() => setPage(page+1)}
|
||||||
|
inverted={true} />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Content of the navigation during game selection. */
|
||||||
|
function NavigationLandingPage () {
|
||||||
|
return <div className="nav-content">
|
||||||
|
<div className="nav-title-left"></div>
|
||||||
|
<div className="nav-title-middle"></div>
|
||||||
|
<div className="nav-title-right"></div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Content of the navigation on Desktop in a level. */
|
||||||
|
function DesktopNavigationLevel () {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { gameId, worldId, levelId } = useContext(GameIdContext)
|
||||||
|
const { typewriterMode, setTypewriterMode, lockEditorMode } = useContext(PageContext)
|
||||||
|
const gameInfo = useGetGameInfoQuery({game: gameId})
|
||||||
|
const levelInfo = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
|
||||||
|
|
||||||
|
/** toggle input mode if allowed */
|
||||||
|
function toggleInputMode(ev: React.MouseEvent) {
|
||||||
|
if (!lockEditorMode) {
|
||||||
|
setTypewriterMode(!typewriterMode)
|
||||||
|
console.log('test')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const worldTitle = gameInfo.data?.worlds.nodes[worldId]?.title
|
||||||
|
const levelTitle = ((levelId == 0) ?
|
||||||
|
t("Introduction") :
|
||||||
|
(
|
||||||
|
t("Level") +
|
||||||
|
` ${levelId}` +
|
||||||
|
(gameInfo.data?.worldSize[worldId] ? ` / ${gameInfo.data?.worldSize[worldId]}` : '') +
|
||||||
|
(levelInfo.data?.title ? ` : ${t(levelInfo?.data?.title, {ns: gameId})}` : '')
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
return <div className="nav-content">
|
||||||
|
<div className="nav-title-left">
|
||||||
|
<span className="nav-title">{worldTitle ? `${t("World")}: ${t(worldTitle, {ns: gameId})}` : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-title-middle">
|
||||||
|
<span className="nav-title">
|
||||||
|
{ levelTitle
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-title-right" >
|
||||||
|
{ levelId > 0 &&
|
||||||
|
<NavButton
|
||||||
|
icon={faArrowLeft}
|
||||||
|
text={t("Previous")}
|
||||||
|
inverted={true}
|
||||||
|
href={`#/${gameId}/world/${worldId}/level/${levelId - 1}`} />
|
||||||
|
}
|
||||||
|
{ levelId == gameInfo.data?.worldSize[worldId] ?
|
||||||
|
<NavButton
|
||||||
|
icon={faHome}
|
||||||
|
text={t("Leave World")}
|
||||||
|
inverted={true}
|
||||||
|
href={`#/${gameId}`} /> :
|
||||||
|
<NavButton
|
||||||
|
icon={faArrowRight}
|
||||||
|
text={levelId == 0 ? t("Start") : t("Next")} inverted={true}
|
||||||
|
href={`#/${gameId}/world/${worldId}/level/${levelId + 1}`} />
|
||||||
|
}
|
||||||
|
{ levelId > 0 &&
|
||||||
|
<NavButton
|
||||||
|
icon={(typewriterMode && !lockEditorMode) ? faCode : faTerminal}
|
||||||
|
inverted={true}
|
||||||
|
disabled={levelId == 0 || lockEditorMode}
|
||||||
|
onClick={(ev) => toggleInputMode(ev)}
|
||||||
|
title={lockEditorMode ? t("Editor mode is enforced!") : typewriterMode ? t("Editor mode") : t("Typewriter mode")} />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Content of the navigation on Mobile in a level. */
|
||||||
|
function MobileNavigationLevel () {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const {gameId, worldId, levelId} = useContext(GameIdContext)
|
||||||
|
const {page, setPage} = useContext(PageContext)
|
||||||
|
const gameInfo = useGetGameInfoQuery({game: gameId})
|
||||||
|
const levelInfo = useLoadLevelQuery({game: gameId, world: worldId, level: levelId})
|
||||||
|
|
||||||
|
let title = worldId ?
|
||||||
|
` ${levelId} / ${gameInfo.data?.worldSize[worldId]}`+ (levelInfo?.data?.title && ` : ${t(levelInfo?.data?.title, {ns: gameId})}`)
|
||||||
|
:
|
||||||
|
''
|
||||||
|
|
||||||
|
return <div className="nav-content">
|
||||||
|
<div className="nav-title-left"></div>
|
||||||
|
<div className="nav-title-middle">
|
||||||
|
<span className="nav-title">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="nav-title-right">
|
||||||
|
<NavButton
|
||||||
|
icon={page?faBookOpen:faBook}
|
||||||
|
onClick={() => setPage(page?0:1)}
|
||||||
|
inverted={true}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The skeleton of the navigation which is the same across all layouts. */
|
||||||
|
export function Navigation () {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { gameId, worldId } = useContext(GameIdContext)
|
||||||
|
const { mobile } = useContext(PreferencesContext)
|
||||||
|
const { setPopupContent } = useContext(PopupContext)
|
||||||
|
|
||||||
|
const [navOpen, setNavOpen] = useState(false)
|
||||||
|
function toggleNav () {setNavOpen(!navOpen)}
|
||||||
|
|
||||||
|
return <nav>
|
||||||
|
<NavigationContext.Provider value={{navOpen, setNavOpen}}>
|
||||||
|
{ gameId && <>
|
||||||
|
<NavButton
|
||||||
|
icon={worldId ? faHome : faGlobe}
|
||||||
|
title={worldId ? t("back to world selection") : t("back to games selection")}
|
||||||
|
href={worldId ? `#/${gameId}` : `#`} />
|
||||||
|
</>}
|
||||||
|
{ gameId ?
|
||||||
|
worldId ?
|
||||||
|
(mobile ? <MobileNavigationLevel /> : <DesktopNavigationLevel />) :
|
||||||
|
(mobile ? <MobileNavigationOverview /> : <DesktopNavigationOverview />) :
|
||||||
|
<NavigationLandingPage />
|
||||||
|
}
|
||||||
|
{ !gameId &&
|
||||||
|
<NavButton
|
||||||
|
iconElement={<GithubIcon />}
|
||||||
|
title={t("view the Lean game server on Github")}
|
||||||
|
href='https://github.com/leanprover-community/lean4game'
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
<NavButton
|
||||||
|
icon={navOpen ? faXmark : faBars}
|
||||||
|
title={navOpen ? t('close menu') : t('open menu')}
|
||||||
|
onClick={toggleNav} />
|
||||||
|
{ navOpen &&
|
||||||
|
<div className='dropdown' onClick={toggleNav} >
|
||||||
|
{ gameId && <>
|
||||||
|
<NavButton
|
||||||
|
icon={faCircleInfo}
|
||||||
|
text={t("Game Info")}
|
||||||
|
onClick={() => {setPopupContent("info")}}
|
||||||
|
inverted={true} />
|
||||||
|
<NavButton
|
||||||
|
icon={faEraser}
|
||||||
|
text={t("Erase")}
|
||||||
|
onClick={() => {setPopupContent("erase")}}
|
||||||
|
inverted={true} />
|
||||||
|
<NavButton
|
||||||
|
icon={faDownload}
|
||||||
|
text={t("Download")}
|
||||||
|
onClick={() => {downloadProgress(gameId)}}
|
||||||
|
inverted={true} />
|
||||||
|
<NavButton
|
||||||
|
icon={faUpload}
|
||||||
|
text={t("Upload")}
|
||||||
|
onClick={() => {setPopupContent("upload")}}
|
||||||
|
inverted={true} />
|
||||||
|
</>}
|
||||||
|
<NavButton
|
||||||
|
icon={faCircleInfo}
|
||||||
|
text={"Impressum"}
|
||||||
|
onClick={() => {setPopupContent("impressum")}}
|
||||||
|
inverted={true} />
|
||||||
|
<NavButton
|
||||||
|
icon={faShield}
|
||||||
|
text={t("Privacy Policy")}
|
||||||
|
onClick={() => {setPopupContent("privacy")}}
|
||||||
|
inverted={true} />
|
||||||
|
<NavButton
|
||||||
|
icon={faGear}
|
||||||
|
text={t("Preferences")}
|
||||||
|
onClick={() => {setPopupContent("preferences")}}
|
||||||
|
inverted={true} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</NavigationContext.Provider>
|
||||||
|
</nav>
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
/** Pop-up that is displayed when opening the privacy policy. */
|
||||||
|
export function ImpressumPopup () {
|
||||||
|
let {t, i18n} = useTranslation()
|
||||||
|
|
||||||
|
function content (lng = i18n.language) {
|
||||||
|
const tt = i18n.getFixedT(lng);
|
||||||
|
return <Trans t={tt} >
|
||||||
|
<h2>Impressum</h2>
|
||||||
|
<p>
|
||||||
|
<strong>Contact:</strong><br />
|
||||||
|
Marcus Zibrowius, Jon Eugster<br />
|
||||||
|
Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
|
||||||
|
Universitätsstr. 1<br />
|
||||||
|
40225 Düsseldorf<br />
|
||||||
|
Germany<br />
|
||||||
|
+49 211 81-14690<br />
|
||||||
|
<a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team">Contact Details</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Legal form:</strong><br />
|
||||||
|
The Heinrich Heine University Düsseldorf is a corporation under public law. It is legally represented by the Rector Prof. Dr. Anja Steinbeck. The responsible supervisory authority is the Ministry of Culture and Science of North Rhine-Westphalia, Völklinger Straße 49, 40221 Düsseldorf.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>VAT identification number:</strong><br />
|
||||||
|
according to §27a Sales Tax Act<br />
|
||||||
|
DE 811222416
|
||||||
|
</p>
|
||||||
|
<p><a href="https://www.hhu.de/impressum" target="_blank">Impressum HHU</a></p>
|
||||||
|
</Trans>
|
||||||
|
}
|
||||||
|
|
||||||
|
return <>
|
||||||
|
{i18n.language != 'en' && <>
|
||||||
|
<p><i>(English version below)</i></p>
|
||||||
|
{content()}
|
||||||
|
<hr />
|
||||||
|
</>}
|
||||||
|
{content('en')}
|
||||||
|
</>
|
||||||
|
}
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
import { useContext } from 'react'
|
||||||
|
import { PrivacyPolicyPopup } from './privacy_policy'
|
||||||
|
import { ImpressumPopup } from './impressum'
|
||||||
|
import { InfoPopup } from './game_info'
|
||||||
|
import { ErasePopup } from './erase'
|
||||||
|
import { PreferencesPopup } from './preferences'
|
||||||
|
import { UploadPopup } from './upload'
|
||||||
|
|
||||||
|
/** The context which manages if a popup is shown.
|
||||||
|
* If `popupContent` is `null`, the popup is closed.
|
||||||
|
*/
|
||||||
|
export const PopupContext = React.createContext<{
|
||||||
|
popupContent: string,
|
||||||
|
setPopupContent: React.Dispatch<React.SetStateAction<string>>
|
||||||
|
}>({
|
||||||
|
popupContent: null,
|
||||||
|
setPopupContent: () => {}
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 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.
|
||||||
|
*
|
||||||
|
* TODO: The drawback of this design is that there is no check for key missmatches.
|
||||||
|
* How could that be achieved?
|
||||||
|
*/
|
||||||
|
export const Popups = {
|
||||||
|
"erase": <ErasePopup />,
|
||||||
|
"impressum": <ImpressumPopup />,
|
||||||
|
"info": <InfoPopup />,
|
||||||
|
"preferences": <PreferencesPopup />,
|
||||||
|
"privacy": <PrivacyPolicyPopup />,
|
||||||
|
"upload": <UploadPopup />,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The skeleton for the popups. */
|
||||||
|
export function Popup () {
|
||||||
|
const {popupContent, setPopupContent} = useContext(PopupContext)
|
||||||
|
function closePopup() {
|
||||||
|
setPopupContent(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className="modal-wrapper">
|
||||||
|
<div className="modal-backdrop" onClick={closePopup} />
|
||||||
|
<div className="modal">
|
||||||
|
<div className="codicon codicon-close modal-close" onClick={closePopup}></div>
|
||||||
|
{Popups[popupContent]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
|
||||||
|
nav {
|
||||||
|
flex: 0;
|
||||||
|
background: var(--clr-primary);
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1.1em;
|
||||||
|
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-content > div {
|
||||||
|
/* border: 1px solid red; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title-left, .nav-title-right {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title-middle {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
margin-left: .5rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
/* margin: 0 1em; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix to make toggle buttons work */
|
||||||
|
.svg-inline--fa {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TODO */
|
||||||
|
.nav-button:not(.btn-inverted) {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
right: 0;
|
||||||
|
top: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 5;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
box-shadow: -.1rem .3rem .3rem 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown .svg-inline--fa {
|
||||||
|
width: 1.8rem;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue