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

css landing page

Browse Source
pull/68/head
Jon Eugster 3 years ago
parent eaf0d13c2f
commit f17d56d7e5
7 changed files with 235 additions and 82 deletions
Show Stats Download Patch File Download Diff File

17
client/public/index.html
Unescape Escape View File

@ -3,15 +3,26 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Lean 4 Game</title> <title>Lean Game Server</title>
<style>
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<noscript> <noscript>
You need to enable JavaScript to run this app. <div class="landing-page">
<h1>Lean Game Server</h1>
<p>
<i>You need to enable JavaScript to use the Lean Game Server, as it is built
using React.</i>
</p>
</div>
</noscript> </noscript>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html> </html>

BIN
client/src/assets/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 623 KiB

125
client/src/components/LandingPage.css
Unescape Escape View File

@ -5,25 +5,32 @@
font-style: normal; font-style: normal;
} */ } */
.landing-page { body {
position: relative; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 20px;
} }
.short-description p, .info p { a {
margin-block-start: 0; text-decoration: none;
margin-block-end: 0; }
@viewport {
width: device-width ;
zoom: 1.0 ;
} }
/* .landing-page {
position: relative;
margin: 20px;
} */
/* p { /* p {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 {
margin-top: 20px;
margin-bottom: 20px;
}
h2 { h2 {
margin-top: 40px; margin-top: 40px;
@ -43,9 +50,9 @@ h2 {
display: grid; display: grid;
grid-gap: 25px; grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* padding-left: 20px; */ padding-left: 20px;
/* padding-right: 20px; */ padding-right: 20px;
padding-top: 20px; padding-top: 60px;
padding-bottom: 80px; padding-bottom: 80px;
} }
@ -58,6 +65,7 @@ h2 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
justify-self: center;
} }
.image { .image {
@ -76,11 +84,17 @@ div.image {
margin-right: 10px; margin-right: 10px;
} }
.short-description p, .info p {
margin-block-start: 0;
margin-block-end: 0;
}
.short-description { .short-description {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
height: 105px;
} }
.game-stats { .game-stats {
display: block; display: block;
} }
@ -106,8 +120,85 @@ div.image {
text-align: right; text-align: right;
} }
header {
border: 1px solid green;
background-repeat: none;
background-size: 100% 100%;
background-position: center;
}
#main-title {
padding: 20px;
align-items: center;
display: flex;
flex-direction: column;
}
#main-title h1 {
font-weight: bolder;
color: rgb(255, 255, 255);
font-size: calc(1.425rem + 2.1vw);
text-align: center;
}
#main-title p {
color: rgb(255, 255, 255);
font-size: 1.25rem;
font-weight: bold;
text-align: center;
max-width: 600px;
}
#main-title a {
color: rgb(255, 255, 255);
text-decoration: underline dotted;
}
#main-title a:hover {
color: rgb(218, 218, 218);
}
#main-title i {
font-style: italic;
}
header nav {
display: flex;
justify-content: flex-end;
padding: 8px;
background-color: rgba(0, 133, 162, .7);
}
footer {
background-color: rgba(0, 133, 162, 1);
display: flex;
justify-content: flex-end;
padding: 20px;
}
footer .link {
color: white;
cursor: pointer;
}
.github-link { .github-link {
position: absolute; height: 24px; /* TODO: why do I need that? s*/
top : 0; }
right: 0;
.landing-page > section {
padding: 40px;
}
.landing-page > section h2 {
font-size: calc(1.325rem + 0.9vw);
font-weight: bolder;
}
.landing-page > section:nth-of-type(odd) {
background-color: rgb(248, 249, 250)
}
.landing-page > section:nth-of-type(even) {
background-color: rgb(255, 255, 255)
} }

98
client/src/components/LandingPage.tsx
Unescape Escape View File

@ -9,9 +9,10 @@ import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css'; import '@fontsource/roboto/700.css';
import './LandingPage.css' import './LandingPage.css'
import PrivacyPolicy from './PrivacyPolicy' import {PrivacyPolicyPopup} from './PrivacyPolicy'
import coverRobo from '../assets/covers/formaloversum.png' import coverRobo from '../assets/covers/formaloversum.png'
import bgImage from '../assets/bg.jpg'
const flag = { const flag = {
'Dutch': '🇳🇱', 'Dutch': '🇳🇱',
@ -24,13 +25,14 @@ const flag = {
function GithubIcon({url='https://github.com'}) { function GithubIcon({url='https://github.com'}) {
return <div className="github-link"> return <div className="github-link">
<a target="_blank" href={url} <a title="view the Lean game server on Github" href={url}>
title="View the lean game server on github"> <svg height="24
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true" className="octicon octicon-mark-github v-align-middle"> " aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" className="">
<path 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> <circle className="world-circle" cx="8" cy="8" r="8" fill="#fff"/>
<path 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> </svg>
</a> </a>
</div> </div>
} }
function GameTile({ function GameTile({
@ -84,11 +86,25 @@ function LandingPage() {
const navigate = useNavigate(); const navigate = useNavigate();
return <div className="landing-page"> const [impressum, setImpressum] = React.useState(false);
const openImpressum = () => setImpressum(true);
const closeImpressum = () => setImpressum(false);
<h1>Lean Game Server</h1> return <div className="landing-page">
<p>Welcome to the Lean Game Server where you can find interactive learning <header style={{backgroundImage: `url(${bgImage})`}}>
games about <a target="_blank" href="https://leanprover-community.github.io/">Lean</a>.</p> <nav>
<GithubIcon url="https://github.com/leanprover-community/lean4game"/>
</nav>
<div id="main-title">
<h1>Lean Game Server</h1>
<p>
This server hosts learning games for the
proof assistant <a target="_blank" href="https://leanprover-community.github.io/">Lean</a> <i>(lean4)</i> and
its mathematical library <a target="_blank" href="https://github.com/leanprover-community/mathlib4">Mathlib</a>.
</p>
</div>
</header>
<div className="game-list"> <div className="game-list">
@ -100,8 +116,7 @@ function LandingPage() {
Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an. Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an.
(Das Spiel befindet sich noch in der Entstehungsphase.) (Das Spiel befindet sich noch in der Entstehungsphase.)
"
Das Spiel wurde im Rahmen des Projekts [ADAM](https://hhu-adam.github.io) an der HHU in Düsseldorf entwickelt."
image={coverRobo} image={coverRobo}
language="German" language="German"
/> />
@ -119,23 +134,48 @@ This is a good first introduction to Lean!"
language="English" language="English"
/> />
</div> </div>
<h2>Adding new games</h2> <section>
<p> <h2>Development notes</h2>
If you consider writing your own game, you should use <p>
the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as As this server runs lean on our university machines, it has a capacity of ca. 15-25
a template. games running simultaneously. We hope to address this limitation in the further future.
</p> </p>
<p> <p>
There will be an option to load and run games through the server Most things about the games and infrastructure is still in development. Feel free to
directly by specifying a URL, but this is still in development. write <a target="_blank" href="https://github.com/leanprover-community/lean4game/issues">Github Issues</a> about
</p> any problems you experience!
<p> </p>
To add games to this page, you should get in contact as </section>
games will need to be added manually. <section>
</p> <h2>Adding new games</h2>
<p>
<GithubIcon url="https://github.com/leanprover-community/lean4game"/> If you consider writing your own game, you should use
<PrivacyPolicy/> the <a target="_blank" href="https://github.com/hhu-adam/NNG4">NNG Github Repo</a> as
a template.
</p>
<p>
There will be an option to load and run games through the server
directly by specifying a URL, but this is still in development.
</p>
<p>
To add games to this page, you should get in contact as
games will need to be added manually.
</p>
</section>
<section>
<h2>Funding</h2>
<p>
This Server has been developed as part of the
project <a target="_blank" href="https://hhu-adam.github.io">ADAM : Anticipating the Digital Age of Mathematics</a> at
Heinrich-Heine-Universität in Düsseldorf.
</p>
</section>
<footer>
<a className="link" onClick={openImpressum}>Impressum</a>
{impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
</footer>
{/* <PrivacyPolicy/> */}
</div> </div>

71
client/src/components/PrivacyPolicy.tsx
Unescape Escape View File

@ -2,6 +2,39 @@ import { faShield } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react' import * as React from 'react'
function PrivacyPolicyPopup ({handleClose}) {
return <div className="modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Privacy Policy &amp; Impressum</h2>
<p>Our server collects metadata (such as IP address, browser, operating system)
and the data that the user enters into the editor. The data is used to
compute the Lean output and display it to the user. The information will be stored
as long as the user stays on our website and will be deleted immediately afterwards.
We keep logs to improve our software, but the contained data is anonymized.</p>
<p>We do not use cookies, but your game progress is stored in the browser
as site data. Your game progress is not saved on the server; if you delete
your browser storage, it is completely gone.
</p>
<p>Our server is located in Germany.</p>
<p><strong>Contact information:</strong><br />
Jon Eugster<br />
Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
Universitätsstr. 1<br />
40225 Düsseldorf<br />
Germany<br />
<a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
</p>
</div>
</div>
}
const PrivacyPolicy: React.FC = () => { const PrivacyPolicy: React.FC = () => {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true); const handleOpen = () => setOpen(true);
@ -15,38 +48,14 @@ const PrivacyPolicy: React.FC = () => {
<p className="p2">notes</p> <p className="p2">notes</p>
</div> </div>
{open? {open?
<div className="modal-wrapper"> <PrivacyPolicyPopup handleClose={handleClose} />: null}
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Privacy Policy &amp; Impressum</h2>
<p>Our server collects metadata (such as IP address, browser, operating system)
and the data that the user enters into the editor. The data is used to
compute the Lean output and display it to the user. The information will be stored
as long as the user stays on our website and will be deleted immediately afterwards.
We keep logs to improve our software, but the contained data is anonymized.</p>
<p>We do not use cookies, but your game progress is stored in the browser
as site data. Your game progress is not saved on the server; if you delete
your browser storage, it is completely gone.
</p>
<p>Our server is located in Germany.</p>
<p><strong>Contact information:</strong><br />
Jon Eugster<br />
Mathematisches Institut der Heinrich-Heine-Universität Düsseldorf<br />
Universitätsstr. 1<br />
40225 Düsseldorf<br />
Germany<br />
<a href="https://www.math.hhu.de/en/lehrstuehle-/-personen-/-ansprechpartner/innen/lehrstuehle-des-mathematischen-instituts/lehrstuhl-fuer-algebraische-geometrie/team/jon-eugster">Contact Details</a>
</p>
</div>
</div> : null}
</span> </span>
) )
} }
export default PrivacyPolicy // export default PrivacyPolicy
export {
PrivacyPolicy,
PrivacyPolicyPopup,
}

2
client/src/components/Welcome.tsx
Unescape Escape View File

@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import Split from 'react-split' import Split from 'react-split'
import PrivacyPolicy from './PrivacyPolicy'; import {PrivacyPolicy} from './PrivacyPolicy';
cytoscape.use( klay ); cytoscape.use( klay );

4
client/src/components/welcome.css
Unescape Escape View File

@ -143,8 +143,10 @@ svg .world-title {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-width: 50%; min-width: max(50%, 300px);
max-width: 60ch; max-width: 60ch;
max-height: 80%;
overflow: scroll;
background: #fff; background: #fff;
z-index: 3; z-index: 3;
padding: 2em; padding: 2em;

Write Preview
Loading…
Cancel
Save