add words as url parameter for sharing

src/App.js

@@ -131,7 +131,7 @@ export default class App extends Component {
     localStorage.removeItem('darkMode');
   }
 
-  initGame(seed, language, customwords) {
+  initGame(seed, language, customWords) {
     let colors = [
       'red',
       'red',
@@ -164,14 +164,22 @@ export default class App extends Component {
     ];
     colors = shuffleSeed.shuffle(colors, seed);
 
-    const words = customwords != null ? customwords : language === 'eng' ? wordList.english : wordList.dutch;
+    insertParam("seed", seed);
+    if (customWords != null) {
+      insertParam("words", customWords);     
+    }
+    if (window.location.href.includes("&words=")) {
+      customWords = window.location.href.split("&words=")[1].split(',');
+    }
+    const words = customWords != null ? customWords : language === 'eng' ? wordList.english : wordList.dutch;
     const cards = shuffleSeed
       .shuffle(words, seed)
       .slice(0, 25)
       .map((word, i) => ({ word, found: false, color: colors[i], inverted: false }));
     const state = { seed, cards, spymaster: false, inverted: false, redScore: 0, blueScore: 0, words: words};
     const score = this.calculateScore(state);
     state.redScore = score.redScore;
+    state.url = window.location.href;
     state.blueScore = score.blueScore;
     state.language = language;
     return state;
@@ -277,6 +285,7 @@ export default class App extends Component {
       spymaster,
       language,
       darkMode,
+      url,
     } = this.state;
     const cardComponents = cards.map((card, i) => (
       <Card
@@ -332,7 +341,8 @@ export default class App extends Component {
           </button>
           <GameSetter 
             startNewGame = {this.startWithCustomWords}
-            language={language}/>
+            language={language}
+            url = {url}/>
           <Instructions language={language} darkMode={darkMode} />
         </Game>
         <SourceCode

src/GameSetter.js

@@ -22,7 +22,8 @@ export default class GameSetter extends Component {
   }
 
   startGame() {
-    var wordArray = this.state.words.split(',');
+    const words = this.state.words.replace(/, /g, ",");
+    var wordArray = Array.from(new Set(words.split(',')));
     if (wordArray.length < 25) {
       wordArray = null;
     }
@@ -40,6 +41,9 @@ export default class GameSetter extends Component {
               value={this.state.words} 
               cols='96' rows='4'
               onChange={this.handleChange}/>
+              <div>
+                <span>{i18n[this.props.language].game_url_click}: <button onClick={() => {navigator.clipboard.writeText(this.props.url)}}>{i18n[this.props.language].copy_clipboard}</button></span> 
+              </div>
         </Wrapper>
       );       
 

src/i18n.js

@@ -16,8 +16,10 @@ export default {
     official_rules: 'Official rules',
     instructions_link:
       'https://czechgames.com/files/rules/codenames-rules-en.pdf',
-    use_custom_words: 'use custom words (at least 25!)',
-    custom_words_placeholder: 'paste here your own words, seperated by a comma: tree, couch, clock, ...'
+    use_custom_words: 'Use custom words (at least 25!)',
+    custom_words_placeholder: 'Paste here your own words, seperated by a comma: tree, couch, clock, ...',
+    game_url_click: 'Click the button to share the game with other players',
+    copy_clipboard: 'Copy link'
   }
 ,
 
@@ -38,7 +40,9 @@ export default {
     official_rules: 'Officiële regels',
     instructions_link:
       'https://czechgames.com/files/rules/codenames-rules-nl.pdf',
-      use_custom_words: 'kies zelf je woorden (minstens 25!)',
-      custom_words_placeholder: 'plak hier je zelfgekozen woorden, gescheiden door een komma: boom, zetel, klok, ...' 
+    use_custom_words: 'Kies zelf je woorden (minstens 25!)',
+    custom_words_placeholder: 'Plak hier je zelfgekozen woorden, gescheiden door een komma: boom, zetel, klok, ...',      
+    game_url_click: 'Klik op de knop het spel te delen met andere spelers',
+    copy_clipboard: 'Link kopiëren'
   },
 };