Feature/rebuse in other langage

package.json

@@ -24,6 +24,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-react": "^7.11.1",
+    "file-loader": "^6.2.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.6.0",

src/css/main.css

@@ -23,6 +23,212 @@ body,
   background-position: center;
 }
 
+/* HOME PAGE */
+
+.home-page {
+  overflow-y: scroll;
+  height: 98vh;
+}
+
+.home-page .content {
+  margin: auto;
+  padding: auto;
+  width: 50%;
+}
+
+.home-page::-webkit-scrollbar {
+  width: 0 !important
+}
+
+.home-page {
+  overflow: -moz-scrollbars-none;
+}
+
+.home-page {
+  -ms-overflow-style: none;
+}
+
+.home-page {
+  scrollbar-width: none;
+}
+
+/* .home-page .content::-webkit-scrollbar {
+  width: 0 !important
+}
+
+.home-page .content {
+  overflow: -moz-scrollbars-none;
+}
+
+.home-page .content {
+  -ms-overflow-style: none;
+}
+
+.home-page .content {
+  scrollbar-width: none;
+} */
+
+.home-page .nav {
+  position: sticky;
+  display: flex;
+  align-items: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+.home-page .nav .nav__list {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 0 20px;
+}
+
+.home-page .nav .nav__list .nav__item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  font-family: 'Raleway', sans-serif;
+  font-weight: 300;
+}
+
+.home-page .nav .nav__list .nav__item a {
+  color: #fff;
+  font-size: 1.5em;
+  text-decoration: none;
+}
+
+.demo {
+  margin-top: 40px;
+}
+
+.demo .demo__title {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 300;
+  font-size: 2em;
+  color: #fff;
+  margin: 10px 0 10px 0;
+  padding: 10px 0 5px 0;
+}
+
+.demo .demo__container {
+  width: 100%;
+  height: 100%;
+}
+
+.demo .demo__container .demo__img {
+  width: 100%;
+}
+
+/* On screens that are 992px or less, set the background color to blue */
+/* @media screen and (max-width: 992px) {
+  .demo .demo__container .demo__img {
+    width: 100%;
+  }
+} */
+
+/* On screens that are 600px or less, set the background color to olive */
+/* @media screen and (max-width: 600px) {
+  .demo .demo__container .demo__img {
+    width: 200px;
+  }
+} */
+
+.select-game-language {
+  margin-top: 40px;
+}
+
+.select-game-language .select-game-language-title {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 300;
+  font-size: 2em;
+  color: #fff;
+  margin: 10px 0 10px 0;
+  padding: 10px 0 5px 0;
+}
+
+.about {
+  margin-top: 40px;
+}
+
+.about .about__title {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 300;
+  font-size: 2em;
+  color: #fff;
+  margin: 10px 0 10px 0;
+  padding: 10px 0 5px 0;
+}
+
+.about .about__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.about .about__content .rebus_example {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.about .about__content .rebus_example div > *:nth-of-type(n+1) {
+  margin-left: 20px;
+  display: inline-block;
+}
+
+.about .about__content .about__description {
+  font-size: 25px;
+}
+
+.about .about__content figure {
+  margin: 0;
+}
+
+.about .about__content figure img {
+  width: 100%;
+}
+
+.select-game-language .select-game-language__container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.select-game-language .select-game-language__container > * {
+  margin: 10px;
+}
+
+.select-game-language .lang_choice {
+  display: block;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  text-decoration: none;
+  height: 60px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.select-game-language .lang_choice .lang_choice_text {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 300;
+  color: darkgrey;
+  font-size: 1.5em;
+  margin-right: 10px;
+}
+/* END HOME PAGE */
+
 .app {
   color: #fff;
   font-family: 'Raleway', sans-serif;
@@ -32,12 +238,26 @@ body,
   grid-column-gap: 30px;
 }
 
+.logo-container {
+  top: 0px;
+}
+
 .logo {
   position: absolute;
   top: 30px;
   left: 30px;
 }
 
+.no-rebus {
+  background-color: #1542e642;
+  grid-column-start: 3;
+  align-self: center;
+  grid-row-start: 2;
+  font-size: 2em;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+}
+
 .rebus {
   background-color: #1542e642;
   grid-column-start: 3;

src/js/app.js

@@ -7,9 +7,14 @@ import { ChangeButton } from './components/ChangeButton';
 import { Rebus } from './components/Rebus';
 import { ProgressBar } from './components/ProgressBar';
 import { Hint } from './components/Hint';
-
 import { actions } from './store';
 import '../css/main.css';
+import { HomePage } from './components/homagePage/HomePage';
+import { NavBar } from './components/homagePage/NavBar';
+import { Demo } from './components/homagePage/Demo';
+import { About } from './components/homagePage/About';
+import { Content } from './components/homagePage/Content';
+import { GameLanguage } from './components/homagePage/GameLanguage';
 
 export function registerListeners() {
   document.addEventListener('keyup', event => {
@@ -30,29 +35,33 @@ export function setCurrentFromURL() {
 }
 
 export function init() {
+  const params = new URLSearchParams(window.location.search);
+  const id = Number(params.get('rebus'));
   try {
     return render(
-      App(
-        Logo(),
-        GithubCorner({ url: 'https://github.com/ollelauribostrom/rebus' }),
-        ChangeButton({
-          className: 'change-button--prev',
-          onClick: () => actions.prev()
-        }),
-        Rebus({
-          charInput: (input, wordIndex, charIndex) => {
-            const confettiCanon = document.querySelector('.confetti-canon');
-            actions.setInput(input, wordIndex, charIndex);
-            actions.check(confettiCanon);
-          }
-        }),
-        ChangeButton({
-          className: 'change-button--next',
-          onClick: () => actions.next()
-        }),
-        Hint(),
-        ProgressBar()
-      ),
+      !id
+        ? HomePage(NavBar(), GithubCorner(), Content(Demo(), GameLanguage(), About()))
+        : App(
+            Logo(),
+            GithubCorner({ url: 'https://github.com/ollelauribostrom/rebus' }),
+            ChangeButton({
+              className: 'change-button--prev',
+              onClick: () => actions.prev()
+            }),
+            Rebus({
+              charInput: (input, wordIndex, charIndex) => {
+                const confettiCanon = document.querySelector('.confetti-canon');
+                actions.setInput(input, wordIndex, charIndex);
+                actions.check(confettiCanon);
+              }
+            }),
+            ChangeButton({
+              className: 'change-button--next',
+              onClick: () => actions.next()
+            }),
+            Hint(),
+            ProgressBar()
+          ),
       document.querySelector('.root')
     );
   } catch (err) {

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 `
           <div class="rebus ${rebus.isAnswered ? 'rebus--answered' : ''} animation--${animation}">
             <div class="rebus__header">
               <span>${current + 1}/${rebuses.length}</span>
@@ -45,6 +48,18 @@ export function Rebus(props, ...children) {
             </div>
           </div>
         `;
+        }
+
+        return `
+        <div class="no-rebus">
+            <span>There are no rebuses yet for this language.</span>
+            <div>
+            <a href="${window.location.origin}">
+            <span>Return to home page</span>
+            </a>
+            </div>
+          </div>
+          `;
       }
     })
   );