diff --git a/package-lock.json b/package-lock.json
index a5848437d7f6b2b08a9cbd23acc1605d3eaa8322..b87fa304de5687e38c4ad39605ed52736d1e29e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -939,6 +939,11 @@
"@hapi/hoek": "6.x.x"
}
},
+ "@icons/material": {
+ "version": "0.2.4",
+ "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+ "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+ },
"@jest/console": {
"version": "24.7.1",
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -7932,6 +7937,11 @@
"object-visit": "^1.0.0"
}
},
+ "material-colors": {
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+ "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+ },
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10050,6 +10060,19 @@
"whatwg-fetch": "3.0.0"
}
},
+ "react-color": {
+ "version": "2.17.3",
+ "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
+ "integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
+ "requires": {
+ "@icons/material": "^0.2.4",
+ "lodash": "^4.17.11",
+ "material-colors": "^1.2.1",
+ "prop-types": "^15.5.10",
+ "reactcss": "^1.2.0",
+ "tinycolor2": "^1.4.1"
+ }
+ },
"react-cookie": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.0.tgz",
@@ -10237,6 +10260,14 @@
"workbox-webpack-plugin": "4.2.0"
}
},
+ "reactcss": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+ "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+ "requires": {
+ "lodash": "^4.0.1"
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11668,6 +11699,11 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
+ "tinycolor2": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+ "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+ },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index c3c2d357e9afdc74879bf2293e8c80d887aef513..88fddfbef5a2435db648728f1b4e4d9e4d127730 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,13 @@
"leaflet": "^1.5.1",
"leaflet-draw": "^1.0.4",
"react": "^16.8.6",
+ "react-color": "^2.17.3",
"react-cookie": "^4.0.0",
"react-dom": "^16.8.6",
"react-leaflet": "^2.3.0",
"react-leaflet-draw": "0.19.0",
- "universal-cookie": "^4.0.0",
- "react-scripts": "3.0.1"
+ "react-scripts": "3.0.1",
+ "universal-cookie": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index 68773d82fadcf47553f18653a44973d40438f393..55247e638269ca8cb9d888d972cc9ec75aa08857 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -1,6 +1,8 @@
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet";
+import { SketchPicker } from "react-color";
+import reactCSS from "reactcss";
export class EditGameForm extends React.Component {
constructor(props) {
@@ -21,12 +23,14 @@ export class EditGameForm extends React.Component {
},
factionNameInput: "", // >= 2 chars
factionPasswordInput: "", // >= 3 chars
+ factionColorInput: "#852222",
factions: [],
objectivePointDescriptionInput: "", // >= 7
objectivePointMultiplierInput: "", // number
objectivePoints: [],
capture_time: 300,
- confirmation_time: 60
+ confirmation_time: 60,
+ displayColorPicker: false
};
this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -66,6 +70,7 @@ export class EditGameForm extends React.Component {
factions.push({
factionName: this.state.factionNameInput,
factionPassword: this.state.factionPasswordInput,
+ colour: this.state.factionColorInput,
multiplier: 1
});
return {
@@ -253,12 +258,16 @@ export class EditGameForm extends React.Component {
},
body: JSON.stringify(gameObject)
})
- .then(res => res.json())
+ .then(res => {
+ if (!res.ok) {
+ throw Error(res.statusMessage);
+ } else {
+ return res.json();
+ }
+ })
.then(result => {
alert(result.message);
- if (result.code === 200) {
- this.handleView();
- }
+ this.handleView();
})
.catch(error => console.log("Error: ", error));
};
@@ -298,7 +307,8 @@ export class EditGameForm extends React.Component {
return {
factionName: faction.factionName,
factionPassword: faction.factionPassword,
- multiplier: 1
+ multiplier: 1,
+ colour: faction.colour
};
});
@@ -349,7 +359,7 @@ export class EditGameForm extends React.Component {
const faction = this.state.factions[i];
factions.push(
<li key={faction.factionName}>
- <div>
+ <div style={{ color: faction.colour }}>
{faction.factionName} : {faction.factionPassword}
</div>
<button
@@ -382,6 +392,36 @@ export class EditGameForm extends React.Component {
);
}
+ const styles = reactCSS({
+ default: {
+ color: {
+ width: "36px",
+ height: "14px",
+ borderRadius: "2px",
+ background: `${this.state.factionColorInput}`
+ },
+ swatch: {
+ padding: "5px",
+ background: "#fff",
+ borderRadius: "1px",
+ boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+ display: "inline-block",
+ cursor: "pointer"
+ },
+ popover: {
+ position: "absolute",
+ zIndex: "2"
+ },
+ cover: {
+ position: "fixed",
+ top: "0px",
+ right: "0px",
+ bottom: "0px",
+ left: "0px"
+ }
+ }
+ });
+
return ReactDOM.createPortal(
<div className="fade-main">
<div className="sticky">
@@ -490,6 +530,29 @@ export class EditGameForm extends React.Component {
placeholder="Faction password"
form="factionAddFrom"
/>
+ <div
+ style={styles.swatch}
+ onClick={() =>
+ this.setState({
+ displayColorPicker: !this.state.displayColorPicker
+ })
+ }
+ >
+ <div style={styles.color} />
+ </div>
+ {this.state.displayColorPicker && (
+ <div
+ style={styles.cover}
+ onClick={() => this.setState({ displayColorPicker: false })}
+ >
+ <SketchPicker
+ color={this.state.factionColorInput}
+ onChangeComplete={color =>
+ this.setState({ factionColorInput: color.hex })
+ }
+ />
+ </div>
+ )}
<button type="submit" form="factionAddFrom">
Add
</button>
diff --git a/src/components/GameList.js b/src/components/GameList.js
index 3a3724d68893ad8a1266fdb3f2391b11fdb6c27f..aa8d330e37d218f20bba5598deb772e862abd96f 100644
--- a/src/components/GameList.js
+++ b/src/components/GameList.js
@@ -51,7 +51,7 @@ class GameList extends React.Component {
},
() => {
// taking the changed gameID to UserMap.js (GameList.js -> Header.js -> App.js -> UserMap.js)
- this.props.handleGameChange(this.state.selectedGame);
+ //this.props.handleGameChange(this.state.selectedGame);
}
);
};