+
+
+
`;
}
});
diff --git a/src/js/components/Rebus.js b/src/js/components/Rebus.js
index 9adaefe8..47c1be9a 100644
--- a/src/js/components/Rebus.js
+++ b/src/js/components/Rebus.js
@@ -19,9 +19,11 @@ export function Rebus(props, ...children) {
const rebus = this.props.rebuses[this.props.current];
/* If history API isn't available, we shouldn't revert to the more widely available `window.location.href`,
as it incurs a new HTTP request and thus results in an infinite loop (and breaks SPAs). */
+ const params = new URLSearchParams(window.location.search);
+ const lang = params.get('lang');
if (window.history) {
// Adds 'rebus' query parameter to end of URL. Should be endpoint-agnostic.
- window.history.pushState('', '', `?rebus=${rebus.id}`);
+ window.history.pushState('', '', `?rebus=${rebus.id}&lang=${lang}`);
}
if (rebus.isAnswered) {
this.$parent.querySelector('.change-button--next').focus();
@@ -30,11 +32,12 @@ export function Rebus(props, ...children) {
}
},
render({ current, rebuses, animation }) {
- const rebus = rebuses[current];
- this.children = rebus.words.map((word, wordIndex) =>
- Word({ word, wordIndex, current, rebuses, charInput: props.charInput })
- );
- return `
+ if (rebuses.length !== 0) {
+ const rebus = rebuses[current];
+ this.children = rebus.words.map((word, wordIndex) =>
+ Word({ word, wordIndex, current, rebuses, charInput: props.charInput })
+ );
+ return `
${current + 1}/${rebuses.length}
@@ -45,6 +48,18 @@ export function Rebus(props, ...children) {
+ There are no rebuses yet for this language.
+
+
+ `;
}
})
);
diff --git a/src/js/components/homagePage/About.js b/src/js/components/homagePage/About.js
new file mode 100644
index 00000000..92da1e20
--- /dev/null
+++ b/src/js/components/homagePage/About.js
@@ -0,0 +1,29 @@
+import { createComponent } from '../../mini';
+import rebusExplanationImage from '../../../../howToUseRebus.svg';
+
+export function About() {
+ return createComponent({
+ render() {
+ return `
+ About
+
+
+ 
+ The Rebus on the figure correspond to caravan
+
+
+ Rebus consists of guessing words by using a combination of pictures and letters.
+
+
+ Example:
+
+ ๐ฒ+ ๐ = Pineapple
+ AND
+ G + โค๏ธ = GLove
+
+
+
+
+ `;
+ }
+ });
+}
diff --git a/src/js/components/homagePage/Demo.js b/src/js/components/homagePage/Demo.js
new file mode 100644
index 00000000..51dc3a9a
--- /dev/null
+++ b/src/js/components/homagePage/Demo.js
@@ -0,0 +1,17 @@
+import { createComponent } from '../../mini';
+import MyImage from '../../../../rebus-demo.gif';
+
+export function Demo() {
+ return createComponent({
+ render() {
+ return `
+ Demo
+
+ 
+
+ Select A Language an play the game in
+
+
+
+ 
English
+ + + +
Franรงais
+ + + +
Espaรฑol
+ + + +
้ฌๅ้
+ + + +
Italian
+ + + +
Deutsch
+ + + +
South Korea
+ + + +
ใใพใจ
+ + + +
Hindi
+ +