+
+
+ HOW TO PLAY
+
+
+
+
+ Solve the WAFFLE in as few moves as possible to earn toppings. Click
+ or tap on tiles to swop them.
+
+
+ Rearrange the letters into the correct words, horizontally or
+ vertically. Click letters to swop their positions anywhere on the
+ board. The letters will change color to show whether they are in the
+ correct position. The number of moves remaining is displayed below
+ the board.
+
+
+ In this example, the "S"es are in the correct place. The "A" is in
+ the word, but in a different position.
+
+ When the yellow letter is on a corner, either the vertical word or
+ the horizontal word contains this letter.
+
{" "}
+ SPECIAL CASES
+ THE SAME LETTER MULTIPLE TIMES IN ONE WORD
+
+ In this case, the word must contain only one "L", as the first is
+ yellow but the second is grey. Neither of them are in the correct
+ position.
+
+ Once we have an "L" in the correct place, the first "L" is no longer
+ needed in the word, so, it is no longer yellow.
+
+
+ Built by peanutyabing |
+ Created by jessian |
+ Original game at wafflegame.net
+
+
+ );
+ }
+}
diff --git a/src/Components/Offcanvas.js b/src/Components/Offcanvas.js
new file mode 100644
index 00000000..e75a1877
--- /dev/null
+++ b/src/Components/Offcanvas.js
@@ -0,0 +1,30 @@
+import React from "react";
+import Offcanvas from "react-bootstrap/Offcanvas";
+
+export default class Menu extends React.Component {
+ render() {
+ return (
+
+ {this.props.playDaily && (
+
{new Date().toLocaleDateString()}
+ )}
+ {!this.props.playDaily &&
ALL-YOU-CAN-EAT
}
+
{this.renderTiles(this.state.waffle)}
+
+ {this.state.swopsLeft} {" "}
+ {this.state.swopsLeft < 2 ? "SWOP" : "SWOPS"} REMAINING
+
+ {this.hasWon() && this.renderToppings(this.state.swopsLeft)}
+ {this.hasWon() && !this.state.dailyMode && (
+
+ PLAY AGAIN
+
+ )}
+ {this.hasWon() && (
+
+ {this.renderDefinitions(this.state.definitions)}
+
+ )}
+ {this.hasLost() &&
GAME OVER
}
+ {this.hasLost() && (
+
+
+ SHOW SOLUTION
+
+ {!this.state.dailyMode && (
+
+ PLAY AGAIN
+
+ )}
+ {this.state.showSolution && (
+
+
+ {this.renderSolution()}
+
+
+ {this.renderDefinitions(this.state.definitions)}
+
+
+ )}
+
+ )}
+