Change Game state

src/components/Game.tsx

@@ -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} />
         );
     }
 }

src/config.json

 {
-    "dbName": "sudoku",
+    "dbName": "concordant",
     "serviceUrl": "http://localhost:4000",
     "credentials": "credentials"
 }
\ No newline at end of file

src/index.css

@@ -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;
 }
 

src/index.tsx

@@ -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')
 );