Skip to content

Commit e3e4426

Browse files
author
grimcoder
committed
updated react two dots
1 parent 8dc3e44 commit e3e4426

File tree

3 files changed

+133
-60
lines changed

3 files changed

+133
-60
lines changed

‎.idea/encodings.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎reactTwoDots/app/app.js

Lines changed: 115 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -19037,9 +19037,18 @@ var TwoDots;
1903719037
return colors[getRandomInt(0, colors.length)];
1903819038
};
1903919039
TwoDots.colors = ['red', 'yellow', 'brown', 'blue', 'green'];
19040+
function shuffleArray(array) {
19041+
for (var i = array.length - 1; i > 0; i--) {
19042+
var j = Math.floor(Math.random() * (i + 1));
19043+
var temp = array[i];
19044+
array[i] = array[j];
19045+
array[j] = temp;
19046+
}
19047+
return array;
19048+
}
19049+
TwoDots.shuffleArray = shuffleArray;
1904019050
var Cell = (function () {
1904119051
function Cell(x, y) {
19042-
this.className = 'unselected';
1904319052
this.color = getRandomColor(TwoDots.colors);
1904419053
this.x = x;
1904519054
this.y = y;
@@ -19058,14 +19067,13 @@ var TwoDots;
1905819067
var TwoDotsState = (function () {
1905919068
function TwoDotsState(width, height) {
1906019069
var _this = this;
19061-
if (width === void 0) { width = 10; }
19062-
if (height === void 0) { height = 10; }
19070+
if (width === void 0) { width = 5; }
19071+
if (height === void 0) { height = 5; }
1906319072
this.width = width;
1906419073
this.height = height;
1906519074
this.Rules = new Rules();
1906619075
this.mode = 'board';
1906719076
this.Grid = [];
19068-
this.startDrag = false;
1906919077
this.turns = 0;
1907019078
this.score = TwoDots.colors.reduce(function (total, color) {
1907119079
total[color] = 0;
@@ -19101,8 +19109,39 @@ var Hello = React.createClass({displayName: "Hello",
1910119109
path: [],
1910219110
getInitialState: function () {
1910319111
return new TwoDotsState_1.TwoDots.TwoDotsState(Number(this.props.width), Number(this.props.height));
19112+
while (this.needsShuffling()) {
19113+
this.shuffleBoard();
19114+
}
1910419115
},
1910519116
needsShuffling: function () {
19117+
var thisFlatArray = this.thisArray();
19118+
for (var cell in thisFlatArray) {
19119+
if (thisFlatArray.filter(function (c) {
19120+
return !(c.x == thisFlatArray[cell].x && c.y == thisFlatArray[cell].y)
19121+
&& (Math.abs(c.x - thisFlatArray[cell].x) + Math.abs(c.y - thisFlatArray[cell].y) < 2)
19122+
&& thisFlatArray[cell].color == c.color;
19123+
}).length > 0) {
19124+
console.log('does not need shuffling');
19125+
this.state.mode = 'board';
19126+
return false;
19127+
}
19128+
}
19129+
console.log('needs shuffling');
19130+
this.state.mode = 'board needsShuffling';
19131+
this.setState(this.state);
19132+
return true;
19133+
},
19134+
shuffleBoard: function () {
19135+
var thisFlatArray = TwoDotsState_1.TwoDots.shuffleArray(this.thisArray());
19136+
for (var x = 0; x < this.state.width; x++) {
19137+
for (var y = 0; y < this.state.height; y++) {
19138+
this.state.Grid[y][x] = thisFlatArray.pop();
19139+
this.state.Grid[y][x].x = x;
19140+
this.state.Grid[y][x].y = y;
19141+
}
19142+
}
19143+
this.setState(this.state);
19144+
this.needsShuffling();
1910619145
},
1910719146
thisArray: function () {
1910819147
return [].concat.apply([], this.state.Grid);
@@ -19149,7 +19188,7 @@ var Hello = React.createClass({displayName: "Hello",
1914919188
checkResults: function (state) {
1915019189
//have we lost?
1915119190
if (state.Rules.maxTurns < state.turns) {
19152-
this.state.mode = 'message';
19191+
this.state.mode = 'board message';
1915319192
this.state.message = 'You lost!!!';
1915419193
this.setState(this.state);
1915519194
return;
@@ -19158,19 +19197,18 @@ var Hello = React.createClass({displayName: "Hello",
1915819197
if (Object.keys(state.Rules.amountToCollect).filter(function (key, i) {
1915919198
return state.Rules.amountToCollect[key] > state.score[key];
1916019199
}).length == 0) {
19161-
this.state.mode = 'message';
19200+
this.state.mode = 'board message';
1916219201
this.state.message = 'You won!!!';
1916319202
this.setState(this.state);
1916419203
}
1916519204
},
1916619205
onMouseLeave: function () {
19167-
this.state.startDrag = false;
1916819206
this.path = [];
1916919207
this.setState(this.state);
1917019208
},
1917119209
handleMouseUp: function () {
19172-
this.state.startDrag = false;
1917319210
this.removeDots(this.state);
19211+
this.needsShuffling();
1917419212
this.path = [];
1917519213
this.setState(this.state);
1917619214
this.checkResults(this.state);
@@ -19215,15 +19253,12 @@ var Hello = React.createClass({displayName: "Hello",
1921519253
this.state.mode = 'board';
1921619254
this.setState(this.state);
1921719255
},
19218-
updateLevel: function (width, height, MaxTurns, limits) {
19219-
var newState = new TwoDotsState_1.TwoDots.TwoDotsState(Number(width), Number(height));
19220-
newState.Rules.maxTurns = Number(MaxTurns);
19221-
newState.Rules.amountToCollect = limits;
19256+
updateLevel: function (newState) {
1922219257
newState.mode = 'board';
1922319258
this.setState(newState);
1922419259
},
1922519260
startNew: function () {
19226-
var newState = new TwoDotsState_1.TwoDots.TwoDotsState();
19261+
var newState = new TwoDotsState_1.TwoDots.TwoDotsState(Number(this.state.width), Number(this.state.height));
1922719262
newState.mode = 'board';
1922819263
this.setState(newState);
1922919264
},
@@ -19232,17 +19267,30 @@ var Hello = React.createClass({displayName: "Hello",
1923219267
var isLoop = this.isLoop();
1923319268
var lastColor = this.path.length > 0 ? this.path[this.path.length - 1].color : undefined;
1923419269
var state = this.state;
19270+
var message;
1923519271
var body;
19236-
if (this.state.mode == 'editor') {
19272+
if (this.state.mode.indexOf('message') > -1) {
19273+
message = React.createElement("section", null,
19274+
React.createElement("h1", null, this.state.message),
19275+
React.createElement("button", {className: "btn btn-danger center", onClick: this.startNew}, "Start new")
19276+
);
19277+
}
19278+
if (this.state.mode.indexOf('needsShuffling') > -1) {
19279+
message = React.createElement("section", null,
19280+
React.createElement("h1", null, "Needs shuffling"),
19281+
React.createElement("button", {className: "btn btn-danger center", onClick: this.shuffleBoard}, "Shuffle")
19282+
);
19283+
}
19284+
if (this.state.mode.indexOf('editor') > -1) {
1923719285
body = React.createElement("div", null,
1923819286
React.createElement("button", {onClick: this.ShowBoard, className: "btn btn-info"}, "Show board"),
19239-
React.createElement(levelEditor_1.default, {gridState: state, rules: state.Rules, score: state.score, updateLevel: this.updateLevel})
19287+
React.createElement(levelEditor_1.default, {gridState: state, updateLevel: this.updateLevel})
1924019288
);
1924119289
}
19242-
else if (this.state.mode == 'board') {
19290+
if (this.state.mode.indexOf('board') > -1) {
1924319291
body = React.createElement("div", null,
1924419292
React.createElement("button", {onClick: this.ShowLevelEditor, className: "btn btn-info"}, "Level editor"),
19245-
React.createElement(scoreTable_1.default, {turns: state.turns, maxTurns: state.Rules.maxTurns, rules: state.Rules, score: state.score}),
19293+
React.createElement(scoreTable_1.default, {turns: state.turns, maxTurns: state.Rules.maxTurns, rules: state.Rules, score: state.score}),
1924619294

1924719295
React.createElement("table", {className: "mainGrid", onMouseLeave: this.onMouseLeave},
1924819296
React.createElement("tbody", null,
@@ -19262,23 +19310,18 @@ var Hello = React.createClass({displayName: "Hello",
1926219310
);
1926319311
})
1926419312
)
19265-
)
19266-
);
19267-
}
19268-
else if (this.state.mode == 'message') {
19269-
body = React.createElement("section", null,
19270-
React.createElement("h1", null, this.state.message),
19271-
React.createElement("button", {className: "btn btn-danger", onClick: this.startNew}, "Start new")
19313+
),
19314+
message
1927219315
);
1927319316
}
19274-
return React.createElement("div", null,
19317+
return React.createElement("div", {className: "shell"},
1927519318

1927619319
body
1927719320

1927819321
);
1927919322
}
1928019323
});
19281-
ReactDOM.render(React.createElement(Hello, {name: "World", width: "10", height: "8"}), document.getElementById('container'));
19324+
ReactDOM.render(React.createElement(Hello, {name: "World", width: "3", height: "3"}), document.getElementById('container'));
1928219325

1928319326
},{"./TwoDotsState":159,"./levelEditor":161,"./scoreTable":162,"react":158,"react-dom":2}],161:[function(require,module,exports){
1928419327
var __extends = (this && this.__extends) || function (d, b) {
@@ -19293,66 +19336,78 @@ var LevelEditor = (function (_super) {
1929319336
__extends(LevelEditor, _super);
1929419337
function LevelEditor(props) {
1929519338
_super.call(this, props);
19296-
var rules = this.props.rules;
1929719339
var state = this.props.gridState;
19298-
var amountToCollect = rules.amountToCollect;
1929919340
this.changed = this.changed.bind(this);
1930019341
this.update = this.update.bind(this);
1930119342
this.changedcolorRules = this.changedcolorRules.bind(this);
19302-
this.state = {
19303-
amountToCollect: amountToCollect,
19304-
width: state.width,
19305-
height: state.height,
19306-
MaxTurns: rules.maxTurns };
19343+
this.changeColor = this.changeColor.bind(this);
19344+
this.state = state;
1930719345
}
1930819346
LevelEditor.prototype.changedcolorRules = function () {
19309-
var limits = {};
19347+
var _this = this;
1931019348
var colorLimit = this.refs['colorRules'].value;
1931119349
TwoDotsState_1.TwoDots.colors.slice(0, Number(colorLimit)).map(function (color) {
19312-
limits[color] = 5;
19350+
_this.state.Rules.amountToCollect[color] = 5;
1931319351
});
19314-
this.setState({ amountToCollect: limits });
19352+
this.setState(this.state);
1931519353
};
1931619354
LevelEditor.prototype.changed = function () {
1931719355
var width = (this.refs['width']).value;
1931819356
var height = this.refs['height'].value;
1931919357
var MaxTurns = this.refs['MaxTurns'].value;
19320-
var limits = {};
19321-
for (var color in this.state.amountToCollect) {
19322-
limits[color] = this.refs[color].value;
19358+
var newState = new TwoDotsState_1.TwoDots.TwoDotsState(Number(width), Number(height));
19359+
newState.Rules.maxTurns = Number(MaxTurns);
19360+
for (var color in this.state.Rules.amountToCollect) {
19361+
newState.Rules.amountToCollect[color] = Number(this.refs[color].value);
1932319362
}
19324-
this.setState({
19325-
width: width,
19326-
height: height,
19327-
MaxTurns: MaxTurns,
19328-
amountToCollect: limits
19329-
});
19363+
this.setState(newState);
19364+
};
19365+
LevelEditor.prototype.changeColor = function (row, coll) {
19366+
var nextColor = (TwoDotsState_1.TwoDots.colors.indexOf(this.state.Grid[row][coll].color) + 1) % TwoDotsState_1.TwoDots.colors.length;
19367+
this.state.Grid[row][coll].color = TwoDotsState_1.TwoDots.colors[nextColor];
19368+
this.setState(this.state);
1933019369
};
1933119370
LevelEditor.prototype.update = function () {
19332-
var width = (this.refs['width']).value;
19333-
var height = this.refs['height'].value;
19334-
var MaxTurns = this.refs['MaxTurns'].value;
19335-
var limits = {};
19336-
for (var color in this.state.amountToCollect) {
19337-
limits[color] = this.refs[color].value;
19338-
}
1933919371
var updateLevel = this.props.updateLevel;
19340-
updateLevel(width, height, MaxTurns, limits);
19372+
updateLevel(this.state);
1934119373
};
1934219374
LevelEditor.prototype.render = function () {
19343-
var colorRules = Object.keys(this.state.amountToCollect).length.toString();
19344-
var limits = this.state.amountToCollect;
19375+
var _this = this;
19376+
var colorRules = Object.keys(this.state.Rules.amountToCollect).length.toString();
19377+
var limits = this.state.Rules.amountToCollect;
1934519378
var width = this.state.width;
1934619379
var height = this.state.height;
19347-
var MaxTurns = this.state.MaxTurns;
19380+
var MaxTurns = this.state.Rules.maxTurns;
1934819381
var selectedColors = Object.keys(limits);
1934919382
var colorRows = [];
1935019383
for (var c in selectedColors) {
1935119384
colorRows.push(React.createElement("tr", {key: selectedColors[c]}, React.createElement("td", {className: "short"}, React.createElement("div", {className: selectedColors[c] + ' cell'})), React.createElement("td", {className: "short2"},
1935219385
React.createElement("input", {className: "short2", onChange: this.changed, type: "text", ref: selectedColors[c], value: limits[selectedColors[c]]}), " ")));
1935319386
}
19387+
var body;
19388+
var state = this.state;
19389+
body = React.createElement("div", null,
19390+
19391+
19392+
React.createElement("table", {className: "mainGrid"},
19393+
React.createElement("tbody", null,
19394+
Array.apply(0, Array(state.height)).map(function (el, row) {
19395+
return React.createElement("tr", {className: "border", key: row},
19396+
19397+
Array.apply(0, Array(state.width)).map(function (el1, coll) {
19398+
return React.createElement("td", {key: coll, className: "unselected", onClick: _this.changeColor.bind(null, row, coll)},
19399+
19400+
React.createElement("div", {className: state.Grid[row][coll].color + ' cell'})
19401+
);
19402+
})
19403+
);
19404+
})
19405+
)
19406+
)
19407+
19408+
);
1935419409
return React.createElement("div", null,
19355-
React.createElement("div", {className: "levelEditor h4"}, "Level editor"),
19410+
React.createElement("div", {className: "h4"}, "Level editor"),
1935619411

1935719412
React.createElement("div", null,
1935819413

@@ -19374,6 +19429,7 @@ var LevelEditor = (function (_super) {
1937419429
)
1937519430
),
1937619431
React.createElement("br", null),
19432+
body,
1937719433
React.createElement("button", {onClick: this.update, className: "btn"}, "Update")
1937819434
);
1937919435
};
@@ -19409,9 +19465,9 @@ var ScoreTable = (function (_super) {
1940919465
//var short = key + " short"
1941019466
var key2 = key + "value";
1941119467
cells.push(React.createElement("td", {className: "short", key: key}, React.createElement("div", {className: key + ' cell'})));
19412-
cells.push(React.createElement("td", {className: "short2", key: key2}, score[key] + ' of ' + rules.amountToCollect[key]));
19468+
cells.push(React.createElement("td", {className: 'short2 ' + (score[key] >= rules.amountToCollect[key] ? 'completedColor' : ''), key: key2}, score[key] + ' / ' + rules.amountToCollect[key]));
1941319469
});
19414-
cells.push(React.createElement("td", {className: "short3", key: "turns"}, " ", 'Turns ' + turns + ' of ' + maxTurns, " "));
19470+
cells.push(React.createElement("td", {className: "short3", key: "turns"}, " ", 'Turns ' + turns + ' / ' + maxTurns, " "));
1941519471
return (React.createElement("table", {className: "scoreTable"}, React.createElement("tbody", null, React.createElement("tr", null,
1941619472
cells
1941719473
))));

‎reactTwoDots/main.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ tr.border{
7272
.short2 {
7373
width: 60px;
7474
border: 0px;
75+
padding: 3px;
76+
}
77+
78+
.completedColor {
79+
background-color: #ffcccc;
7580
}
7681

7782
.short3 {
@@ -83,10 +88,16 @@ tr.border{
8388
margin: 10px;
8489
}
8590

86-
.levelEditor{
91+
.shell{
8792
margin: 10px;
8893
}
8994

95+
button.center {
96+
position: relative;
97+
left: 50%;
98+
99+
transform: translate(-50%)
100+
}
90101
section {
91102
background: black;
92103
color: white;

0 commit comments

Comments
 (0)