landing page
This commit is contained in:
Jon Eugster
@@ -0,0 +1,113 @@
|
||||
/* @font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
src: url('data/font/RobotoSlab.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
} */
|
||||
|
||||
.landing-page {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.short-description p, .info p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.game-list {
|
||||
display: grid;
|
||||
grid-gap: 25px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
/* padding-left: 20px; */
|
||||
/* padding-right: 20px; */
|
||||
padding-top: 20px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.game {
|
||||
cursor: pointer;
|
||||
border: 1px solid rgb(140, 140, 140);
|
||||
border-radius: 20px;
|
||||
box-shadow: 5px 5px 8px rgb(140, 140, 140);
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div.image {
|
||||
background: rgb(29,0,36);
|
||||
background: linear-gradient(137deg, rgba(97,9,121,1) 0%, rgba(0,212,255,1) 100%);
|
||||
}
|
||||
|
||||
.game .wrapper > :not(.image), .game .info {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.short-description {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.game-stats {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
width: calc(100% - 20px);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.info tr {
|
||||
border-top: 1px solid rgb(200, 200, 200);
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.info td {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.info td:nth-child(even) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
position: absolute;
|
||||
top : 0;
|
||||
right: 0;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
import * as React from 'react';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Link } from 'react-router-dom';
|
||||
import Markdown from './Markdown';
|
||||
|
||||
import '@fontsource/roboto/300.css';
|
||||
import '@fontsource/roboto/400.css';
|
||||
import '@fontsource/roboto/500.css';
|
||||
import '@fontsource/roboto/700.css';
|
||||
|
||||
import './LandingPage.css'
|
||||
import PrivacyPolicy from './PrivacyPolicy'
|
||||
|
||||
import coverRobo from '../assets/covers/formaloversum.png'
|
||||
|
||||
const flag = {
|
||||
'Dutch': '🇳🇱',
|
||||
'English': '🇬🇧',
|
||||
'French': '🇫🇷',
|
||||
'German': '🇩🇪',
|
||||
'Italian': '🇮🇹',
|
||||
}
|
||||
|
||||
function GithubIcon({url='https://github.com'}) {
|
||||
|
||||
return <div className="github-link">
|
||||
<a target="_blank" href={url}
|
||||
title="View the lean game server on github">
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
function GameTile({
|
||||
title,
|
||||
gameId,
|
||||
intro, // Catchy intro phrase.
|
||||
image=null,
|
||||
worlds='?',
|
||||
levels='?',
|
||||
prereq='–', // Optional list of games that this game builds on. Use markdown.
|
||||
description, // Longer description. Supports Markdown.
|
||||
language}) {
|
||||
|
||||
let navigate = useNavigate();
|
||||
const routeChange = () =>{
|
||||
let path = `game/${gameId}`;
|
||||
navigate(path);
|
||||
}
|
||||
|
||||
return <div className="game" onClick={routeChange}>
|
||||
<div className="wrapper">
|
||||
<div className="title">{title}</div>
|
||||
<div className="short-description">{intro}
|
||||
</div>
|
||||
{ image ? <img className="image" src={image} alt="" /> : <div className="image"/> }
|
||||
<div className="long description"><Markdown>{description}</Markdown></div>
|
||||
</div>
|
||||
<table className="info">
|
||||
<tr>
|
||||
<td title="consider playing these games first.">Prerequisites</td>
|
||||
<td><Markdown>{prereq}</Markdown></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Worlds</td>
|
||||
<td>{worlds}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Levels</td>
|
||||
<td>{levels}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Language</td>
|
||||
<td title={`in ${language}`}>{flag[language]}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
function LandingPage() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return <div className="landing-page">
|
||||
|
||||
<h1>Lean Game Server</h1>
|
||||
<p>Welcome to the Lean Game Server where you can find interactive learning
|
||||
games about <a target="_blank" href="https://leanprover-community.github.io/">Lean</a>.</p>
|
||||
|
||||
<div className="game-list">
|
||||
|
||||
<GameTile
|
||||
title="Formaloversum"
|
||||
gameId="adam"
|
||||
intro="Erkunde das Leansche Universum mit deinem Robo, welcher dir bei der Verständigung mit den Formalosophen zur Seite steht."
|
||||
description="
|
||||
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 wurde im Rahmen des Projekts [ADAM](https://hhu-adam.github.io) an der HHU in Düsseldorf entwickelt."
|
||||
image={coverRobo}
|
||||
language="German"
|
||||
/>
|
||||
|
||||
<GameTile
|
||||
title="Natural Number Game"
|
||||
gameId="nng"
|
||||
intro="The classical introduction game for Lean."
|
||||
description="In this game you recreate the natural numbers $\mathbb{N}$ from the Peano axioms,
|
||||
learning the basics about theorem proving in Lean.
|
||||
|
||||
This is a good first introduction to Lean!"
|
||||
worlds="9"
|
||||
levels="72"
|
||||
language="English"
|
||||
/>
|
||||
</div>
|
||||
<h2>Adding new games</h2>
|
||||
<p>
|
||||
If you consider writing your own game, you should use
|
||||
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>
|
||||
|
||||
<GithubIcon url="https://github.com/leanprover-community/lean4game"/>
|
||||
<PrivacyPolicy/>
|
||||
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
export default LandingPage
|
||||
@@ -40,7 +40,7 @@ const PrivacyPolicy: React.FC = () => {
|
||||
Universitätsstr. 1<br />
|
||||
40225 Düsseldorf<br />
|
||||
Germany<br />
|
||||
<a href="mailto:jon.eugster@hhu.de">jon.eugster@hhu.de</a>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user