Commit ee69d098 authored by Yannick Li's avatar Yannick Li
Browse files

Improve the text for the demo page

parent f93c0abd
......@@ -23,6 +23,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>C-Sudoku</title>
</head>
<body>
......
......@@ -32,7 +32,7 @@ class Header extends React.Component {
return (
<div className="title background-turquoise padding">
<h1>C - Sudoku</h1>
<h2>Sudoku with CRDT</h2>
<h2>Sudoku using Concordant CRDTs</h2>
</div>
)
}
......
......@@ -24,11 +24,30 @@
body {
background-color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
line-height: 1.42857143;
line-height: 1.7;
margin: 0px;
min-width: 650px;
text-align: center;
}
h1 {
font-size: 34px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
h2 {
font-size: 26px;
text-align: center;
font-weight: bold;
}
p {
text-align: justify;
text-justify: inter-word;
}
.title {
......@@ -37,6 +56,7 @@ body {
justify-content: center;
display: flex;
flex-direction: column;
line-height: 0px;
color: white;
margin-top: -10px;
}
......@@ -83,11 +103,21 @@ input:focus {
background-color: purple;
}
.intro {
padding-top: 20px;
}
.padding {
padding-top: 30px;
padding-bottom: 30px;
}
.reduceWidth {
width: 60%;
text-align: center;
display: inline-block
}
.background-turquoise {
background-color: #34D6D8;
}
......
......@@ -31,9 +31,22 @@ import Header from './components/Header'
ReactDOM.render(
<>
<Header />
<div className="intro reduceWidth">
<p>
Sudoku is a basic example of a collaborative multi-player game.
You can create multiple instances of the same Sudoku grid, and solve it collaboratively.
When one user fills a square, the others observe the update, and can correct it if they wish.
If two users fill the same square at the same time, both updates are retained, until one of the users imposes a new value.
A user can disconnect and work in isolation; when he/she reconnects, his/her updates are merged into the shared grid.
Switching between connected/disconnected modes is seamless: the application continues to work without a hitch and without any loss of data.
</p>
<p>
The Sudoku application is based upon the Concordant MVMap CRDT.
</p>
</div>
<Game />
<div className="footer padding">
<p>© CONCORDANT 2021.</p>
<div className="padding">
<p className="footer">© CONCORDANT 2021.</p>
</div>
</>,
document.getElementById('root')
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment