Commit 2017f779 authored by Yannick Li's avatar Yannick Li
Browse files

Change Game state

parent fef5d2ee
......@@ -31,8 +31,7 @@ import { client } from '@concordant/c-client';
* Keep a reference to the opened session and opened MVMap.
*/
interface IGameState {
session: any,
mvmap: any
session: any
}
/**
......@@ -43,17 +42,16 @@ class Game extends React.Component<{}, IGameState> {
super(props);
let CONFIG = require('../config.json');
let session = client.Session.Companion.connect(CONFIG.dbName, CONFIG.serviceUrl, CONFIG.credentials);
let collection = session.openCollection("sudokuCollection", false);
let mvmap = collection.open("sudokuGrid", "MVMap", false, function () {return});
this.state = {
session: session,
mvmap: mvmap
session: session
}
}
render() {
let collection = this.state.session.openCollection("sudoku", false);
let mvmap = collection.open("room" + "", "MVMap", false, function () {return});
return (
<Grid session={this.state.session} mvmap={this.state.mvmap}/>
<Grid session={this.state.session} mvmap={mvmap} />
);
}
}
......
{
"dbName": "sudoku",
"dbName": "concordant",
"serviceUrl": "http://localhost:4000",
"credentials": "credentials"
}
\ No newline at end of file
......@@ -73,7 +73,7 @@ p {
border: 1px solid black;
}
input {
.grid input {
text-align: center;
color: transparent;
border: 1px solid black;
......@@ -85,21 +85,21 @@ input {
background-color: white;
}
.wrongvalue {
.grid .wrongvalue {
text-shadow: 0px 0px 0px #FFD700;
background: #b71540;
}
.locked {
.grid .locked {
text-shadow: 0px 0px 0px black;
}
input:focus {
.grid input:focus {
background-color: lightgrey;
outline: none;
}
.wrongvalue:focus {
.grid .wrongvalue:focus {
background-color: purple;
}
......
......@@ -29,25 +29,25 @@ import Game from './components/Game'
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="padding">
<p className="footer">© CONCORDANT 2021.</p>
</div>
</>,
<div>
<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="padding">
<p className="footer">© CONCORDANT 2021.</p>
</div>
</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