CODEWITHSUNDEEP
javascripthtmlcss
johnrambot
johnrambot

Reputation: 81

how to filter array from the letters found within a word game?

I have a word game here made with javascript,

I play against a robot that guesses a word from a directory of words it has. If the guessed word have a matching letter and matching index it turns blue and gets displayed.

If any letter only exist in the guess word but not at correct index it turns orange.

The robot now randomly guesses the words and doesn't do anything with the blue or orange letters. I want the robot to filter the word directory it guesses from with the letters that are correct or exist in the guess word.

I can store those letters in two variable but I'm having scope problems to filter the word directory from the scope these variable

let wordDirectory = ["ABOUT", "ABOVE", "ACTOR", "ACUTE", "ADEPT", "ADMIT", "ADOPT", "ADORE", "ADULT", "AFTER", "AGILE", "AGREE", "AISLE", "ALBUM", "ALERT", "ALIEN", "ALIKE", "ALIVE", "ALLOW", "ALONG", "ALOUD", "ALTER", "AMBER", "AMEND", "AMPLE", "AMPLY", "AMUSE", "ANGEL", "ANGLE", "ANKLE", "APPLE", "APPLY", "APRON", "ARROW", "ASSET", "AVERT", "AVOID", "BACON", "BAKER", "BASIC", "BASIL", "BASIN", "BATHE", "BEACH", "BEARD", "BEAST", "BEATS", "BEGIN", "BEGUN", "BEING", "BELOW", "BIRCH", "BIRTH", "BLACK", "BLANK", "BLINK", "BLOWN", "BLUSH", "BOARD", "BOAST", "BONUS", "BOOST", "BOUND", "BOWEL", "BRAID", "BRAIN", "BRAKE", "BRAND", "BRAVE", "BREAD", "BREAK", "BRIDE", "BRIEF", "BRING", "BRISK", "BROKE", "BROOM", "BROWN", "BULKY", "BUNCH", "BUYER", "CABIN", "CABLE", "CAMEL", "CANDY", "CATER", "CHAIN", "CHAIR", "CHALK", "CHARM", "CHART", "CHASM", "CHEAP", "CHIEF", "CHINA", "CHIPS", "CHOKE", "CHOPS", "CIGAR", "CLAIM", "CLAMP", "CLASP", "CLASS", "CLEAN", "CLEAR", "CLIMB", "CLOAK", "CLONE", "CLOSE", "CLOTH", "CLOUD", "CLOVE", "CLOWN", "COAST", "CORAL", "COUNT", "CRAFT", "CRANE", "CRANK", "CRAWL", "CRISP", "CROSS", "CROWD", "CROWN", "CRUSH", "CRUST", "CURVE", "DAILY", "DAIRY", "DANCE", "DATUM", "DECAY", "DECOR", "DELAY", "DEVIL", "DIARY", "DINER", "DIRTY", "DISCO", "DIVER", "DOUBT", "DOUGH", "DRAFT", "DRAIN", "DRAWN", "DREAM", "DRESS", "DRINK", "DRIVE", "EARLY", "EARTH", "EIGHT", "ELBOW", "EMAIL", "EMPTY", "ENJOY", "EQUAL", "EQUIP", "ETHIC", "EXACT", "EXIST", "EXTRA", "FACET", "FAIRY", "FAITH", "FALSE", "FANCY", "FAULT", "FAVOR", "FEAST", "FETCH", "FIBER", "FIELD", "FINAL", "FIRST", "FLAIR", "FLAKE", "FLASK", "FLICK", "FLOAT", "FLOCK", "FLOWN", "FLUSH", "FLUTE", "FOCAL", "FOCUS", "FORCE", "FORUM", "FOUND", "FRAME", "FRANK", "FRAUD", "FRESH", "FRONT", "FROST", "FROZE", "FRUIT", "FUNGI", "FUNNY", "GHOST", "GIVEN", "GLASS", "GLAZE", "GLOBE", "GLORY", "GLOVE", "GRACE", "GRADE", "GRAIN", "GRAND", "GRAPE", "GRAPH", "GRASP", "GRASS", "GRAVY", "GREAT", "GREET", "GRILL", "GROUP", "GROWN", "GUARD", "GUESS", "GUEST", "GUIDE", "HABIT", "HAIRY", "HAPPY", "HARDY", "HASTE", "HAUNT", "HEART", "HEAVY", "HEFTY", "HONEY", "HORSE", "HOTEL", "HOUSE", "HUMAN", "HUMID", "HUMOR", "HUSKY", "IDEAL", "IMAGE", "IMPLY", "INCUR", "INDEX", "INFER", "INFRA", "INLET", "INNER", "INPUT", "INSET", "IVORY", "JEANS", "JOINT", "JUICE", "LABOR", "LADEN", "LAPSE", "LARGE", "LATEX", "LAUGH", "LAYER", "LEAFY", "LEANS", "LEARN", "LEMON", "LIGHT", "LINER", "LIVER", "LIVES", "LODGE", "LOFTY", "LOGIC", "LOVER", "LOWER", "LUCID", "LUCKY", "LUNCH", "LYMPH", "MACRO", "MAGIC", "MAIZE", "MAJOR", "MAKER", "MANGO", "MAPLE", "MARCH", "MATCH", "MEDAL", "MEDIA", "MERCY", "MERIT", "METAL", "MICRO", "MIDST", "MIGHT", "MINOR", "MINUS", "MIXER", "MODEL", "MOIST", "MONEY", "MONTH", "MORAL", "MOUNT", "MOUSE", "MOUTH", "MOVER", "MOVIE", "MULTI", "MUSIC", "NAIVE", "NEWLY", "NEXUS", "NICHE", "NIGHT", "NINJA", "NOBLE", "NODAL", "NOISE", "NOISY", "NORTH", "NOTCH", "NOTED", "NOVEL", "NURSE", "OCEAN", "OFTEN", "OLIVE", "ONSET", "OPERA", "OPTIC", "ORBIT", "ORGAN", "OTHER", "OUGHT", "OUNCE", "OUTER", "OVERT", "OWING", "OWNED", "OWNER", "OXIDE", "PACED", "PAINT", "PANIC", "PANTS", "PARTY", "PASTE", "PATCH", "PATIO", "PAUSE", "PAVED", "PAYER", "PEACH", "PEARL", "PEDAL", "PHASE", "PHONE", "PIANO", "PILOT", "PINCH", "PIVOT", "PIZZA", "PLACE", "PLAIN", "PLANE", "PLANK", "PLANT", "PLATE", "PLEAD", "PLUCK", "POINT", "POKER", "POLAR", "PORCH", "POUCH", "POUND", "POWER", "PRESS", "PRICE", "PRIDE", "PRIME", "PRINT", "PRIZE", "PRONE", "PROUD", "PROVE", "PUNCH", "PUPPY", "PURGE", "PURSE", "QUAIL", "QUEEN", "QUERY", "QUEST", "QUICK", "QUIET", "QUILT", "QUITE", "QUOTA", "QUOTE", "RADIO", "RAINY", "RAISE", "RANCH", "RANGE", "RAPID", "RATIO", "REACH", "REACT", "READY", "REALM", "REGAL", "REIGN", "RELAX", "RELAY", "RELIC", "REMIT", "REPAY", "REPLY", "RESIN", "RIDGE", "RIGHT", "RINSE", "RISKY", "RIVAL", "ROAST", "ROCKY", "ROMAN", "ROUGH", "ROUND", "ROYAL", "RUSTY", "SADLY", "SAINT", "SALON", "SALTY", "SANDY", "SATIN", "SAUCE", "SCALE", "SCARE", "SCARF", "SCARY", "SCENT", "SCORE", "SCOUT", "SCREW", "SERUM", "SETUP", "SHADE", "SHADY", "SHAKE", "SHAKY", "SHAME", "SHAPE", "SHARE", "SHARK", "SHARP", "SHAVE", "SHEAR", "SHELF", "SHELL", "SHIFT", "SHINE", "SHIRT", "SHOCK", "SHORE", "SHORT", "SHOUT", "SHOVE", "SHOWN", "SHRUB", "SHRUG", "SIGHT", "SIGMA", "SILKY", "SINCE", "SIXTY", "SKATE", "SKILL", "SKIRT", "SLACK", "SLATE", "SLEEP", "SLEPT", "SLICE", "SLICK", "SLIDE", "SLING", "SLUMP", "SMALL", "SMART", "SMILE", "SMOKE", "SMOKY", "SNACK", "SNAIL", "SNAKE", "SNEAK", "SOBER", "SOLAR", "SOLVE", "SOUND", "SOUTH", "SPACE", "SPADE", "SPARE", "SPARK", "SPEAK", "SPEAR", "SPELL", "SPICE", "SPICY", "SPIKE", "SPILL", "SPINE", "SPLIT", "SPOIL", "SPOKE", "SPORT", "SPRAY", "SQUAD", "SQUAT", "SQUID", "STACK", "STAFF", "STAGE", "STAIN", "STAIR", "STAKE", "STALE", "STAMP", "STAND", "STARE", "STEAD", "STEAK", "STEAL", "STEAM", "STEEL", "STERN", "STICK", "STILL", "STING", "STOCK", "STONE", "STORE", "STORM", "STORY", "STOVE", "STRAP", "STRAW", "STRAY", "STUCK", "STUDY", "STUFF", "STUMP", "STYLE", "SUGAR", "SUITE", "SUNNY", "SUPER", "SWAMP", "SWEAT", "SWEPT", "SWIFT", "SWINE", "SWING", "SWIRL", "SYRUP", "TABLE", "TAKEN", "TEACH", "TEMPO", "THANK", "THEIR", "THICK", "THING", "THINK", "THIRD", "THORN", "THOSE", "THREE", "THROW", "THUMB", "THYME", "TIDAL", "TIGER", "TIMER", "TODAY", "TOKEN", "TONIC", "TOUCH", "TOUGH", "TOWEL", "TOWER", "TOXIC", "TOXIN", "TRACE", "TRACK", "TRADE", "TRAIL", "TRAIN", "TRASH", "TREAD", "TREND", "TRIAD", "TRIAL", "TRIBE", "TRICK", "TWICE", "TWINS", "ULCER", "ULTRA", "UNCLE", "UNDER", "UNIFY", "UNITE", "UNITY", "UPSET", "URBAN", "USAGE", "VAGUE", "VALID", "VALUE", "VIDEO", "VIRAL", "VITAL", "VOCAL", "VODKA", "VOICE", "VOWEL", "WAFER", "WAGED", "WAGER", "WAGON", "WAIST", "WAIVE", "WASTE", "WATCH", "WATER", "WEARY", "WEIGH", "WEIRD", "WHALE", "WHARF", "WHEAT", "WHILE", "WHITE", "WHOLE", "WHOSE", "WIDEN", "WIDTH", "WINDY", "WOMAN", "WOMEN", "WORLD", "WORSE", "WORST", "WORTH", "WOULD", "WOUND", "WOVEN", "WRECK", "WRITE", "WRONG", "YEAST", "YIELD", "YOUNG", "YOUTH"];

// generate random word for user and robot to guess

const randomWord = function(array) {
  return array[Math.floor(Math.random() * array.length)];
}

let pickedWord = randomWord(wordDirectory);


//recieve user input and show it on screen.

const btn = document.getElementById("btn");
console.log(pickedWord);

btn.addEventListener("click", function(e) {
  e.preventDefault();
  const li = document.createElement("li");
  const list = document.getElementById("list");
  const list2 = document.getElementById("list2");

  const userGuess = document.getElementById("userInput").value;

  /*USER---------*/
  const guessResult = document.createElement('p')
  if (userGuess === pickedWord) {
    li.style.color = 'green';
    guessResult.appendChild(document.createTextNode(userGuess));
    alert("user wins");
    window.location.reload(false);

  } else {
    userGuess.split('').forEach((char, i) => {
      const span = document.createElement('span');

      if (pickedWord.charAt(i) === char) {
        span.style.color = 'dodgerblue';
      } else if (pickedWord.includes(char)) {
        span.style.color = 'orange';
      }

      span.appendChild(document.createTextNode(char));
      guessResult.appendChild(span);
    });
  }

  li.appendChild(guessResult);
  list.appendChild(li);

  setTimeout(function() {
    startRobot();
  }, 2000);
});

/*ROBOT----------------------------------- */
function startRobot() {
  const randomWord = function(array) {
    return array[Math.floor(Math.random() * array.length)];
  }

  let robotGuess = randomWord(wordDirectory);
  const li = document.createElement("li");
  const robotResult = document.createElement('p')

  if (robotGuess === pickedWord) {
    li.style.color = 'green';
    guessResult.appendChild(document.createTextNode(robotGuess));
    alert("robot wins");
    window.location.reload(false);

  } else {
    robotGuess.split('').forEach((char, i) => {
      const span = document.createElement('span');

      if (pickedWord.charAt(i) === char) {
        span.style.color = 'dodgerblue';

      } else if (pickedWord.includes(char)) {
        span.style.color = 'orange';
      }

      span.appendChild(document.createTextNode(char));
      robotResult.appendChild(span);
    });

  }


  li.appendChild(robotResult);
  list2.appendChild(li);


}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rules {
  font-size: 1.5rem;
}

#green {
  color: green;
}

#blue {
  color: dodgerblue;
}

#orange {
  color: orange;
}

form input {
  width: 200px;
  height: 50px;
}

form button {
  height: 50px;
}

form {
  margin-top: 40px;
}

.lists {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.lists ul {
  margin: 10px 20px;
  list-style: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Robot</title>
</head>

<body>
  <div class="container">

    <div class="rules">
      <p><span id="green">If</span> the whole word is correct</p>
      <p><span id="blue">If</span> the letter guessed and its position is correct</p>
      <p><span id="orange">If</span> the letter is corect but its position is not</p>

      <p>Robot will start guessing 2 seconds after user guessed</p>
    </div>


    <form>
      <input onkeyup="this.value = this.value.toUpperCase();" id="userInput" type="text" placeholder="Text">
      <button id="btn">Submit</button>
    </form>
    <div class="lists">
      <ul id="list">
        <h3>user</h3>
      </ul>
      <ul id="list2">
        <h3>robot</h3>
      </ul>
    </div>

  </div>

. how can i filter array from where my variable are?

Upvotes: 0

Views: 546

Answers (2)

Wimanicesir
Wimanicesir

Reputation: 5122

You have too much code to see where the problem is happening. Is this the filter you are looking for?

let words = ['HOUSE', 'DOG', 'MOON', 'MAN'];
let letter = 'M';

let filtered = words.filter((w) => w.indexOf(letter) > -1);
console.log(filtered)

EDIT: I notice you know how to filter but having scope problems. However, I don't know what variables are giving you troubles.

Upvotes: 1

drodil
drodil

Reputation: 2336

This adds a bit more functionality for the robot. It only uses the words which have the characters it guessed and also removes duplicate guesses of the same words.

let wordDirectory = ["ABOUT", "ABOVE", "ACTOR", "ACUTE", "ADEPT", "ADMIT", "ADOPT", "ADORE", "ADULT", "AFTER", "AGILE", "AGREE", "AISLE", "ALBUM", "ALERT", "ALIEN", "ALIKE", "ALIVE", "ALLOW", "ALONG", "ALOUD", "ALTER", "AMBER", "AMEND", "AMPLE", "AMPLY", "AMUSE", "ANGEL", "ANGLE", "ANKLE", "APPLE", "APPLY", "APRON", "ARROW", "ASSET", "AVERT", "AVOID", "BACON", "BAKER", "BASIC", "BASIL", "BASIN", "BATHE", "BEACH", "BEARD", "BEAST", "BEATS", "BEGIN", "BEGUN", "BEING", "BELOW", "BIRCH", "BIRTH", "BLACK", "BLANK", "BLINK", "BLOWN", "BLUSH", "BOARD", "BOAST", "BONUS", "BOOST", "BOUND", "BOWEL", "BRAID", "BRAIN", "BRAKE", "BRAND", "BRAVE", "BREAD", "BREAK", "BRIDE", "BRIEF", "BRING", "BRISK", "BROKE", "BROOM", "BROWN", "BULKY", "BUNCH", "BUYER", "CABIN", "CABLE", "CAMEL", "CANDY", "CATER", "CHAIN", "CHAIR", "CHALK", "CHARM", "CHART", "CHASM", "CHEAP", "CHIEF", "CHINA", "CHIPS", "CHOKE", "CHOPS", "CIGAR", "CLAIM", "CLAMP", "CLASP", "CLASS", "CLEAN", "CLEAR", "CLIMB", "CLOAK", "CLONE", "CLOSE", "CLOTH", "CLOUD", "CLOVE", "CLOWN", "COAST", "CORAL", "COUNT", "CRAFT", "CRANE", "CRANK", "CRAWL", "CRISP", "CROSS", "CROWD", "CROWN", "CRUSH", "CRUST", "CURVE", "DAILY", "DAIRY", "DANCE", "DATUM", "DECAY", "DECOR", "DELAY", "DEVIL", "DIARY", "DINER", "DIRTY", "DISCO", "DIVER", "DOUBT", "DOUGH", "DRAFT", "DRAIN", "DRAWN", "DREAM", "DRESS", "DRINK", "DRIVE", "EARLY", "EARTH", "EIGHT", "ELBOW", "EMAIL", "EMPTY", "ENJOY", "EQUAL", "EQUIP", "ETHIC", "EXACT", "EXIST", "EXTRA", "FACET", "FAIRY", "FAITH", "FALSE", "FANCY", "FAULT", "FAVOR", "FEAST", "FETCH", "FIBER", "FIELD", "FINAL", "FIRST", "FLAIR", "FLAKE", "FLASK", "FLICK", "FLOAT", "FLOCK", "FLOWN", "FLUSH", "FLUTE", "FOCAL", "FOCUS", "FORCE", "FORUM", "FOUND", "FRAME", "FRANK", "FRAUD", "FRESH", "FRONT", "FROST", "FROZE", "FRUIT", "FUNGI", "FUNNY", "GHOST", "GIVEN", "GLASS", "GLAZE", "GLOBE", "GLORY", "GLOVE", "GRACE", "GRADE", "GRAIN", "GRAND", "GRAPE", "GRAPH", "GRASP", "GRASS", "GRAVY", "GREAT", "GREET", "GRILL", "GROUP", "GROWN", "GUARD", "GUESS", "GUEST", "GUIDE", "HABIT", "HAIRY", "HAPPY", "HARDY", "HASTE", "HAUNT", "HEART", "HEAVY", "HEFTY", "HONEY", "HORSE", "HOTEL", "HOUSE", "HUMAN", "HUMID", "HUMOR", "HUSKY", "IDEAL", "IMAGE", "IMPLY", "INCUR", "INDEX", "INFER", "INFRA", "INLET", "INNER", "INPUT", "INSET", "IVORY", "JEANS", "JOINT", "JUICE", "LABOR", "LADEN", "LAPSE", "LARGE", "LATEX", "LAUGH", "LAYER", "LEAFY", "LEANS", "LEARN", "LEMON", "LIGHT", "LINER", "LIVER", "LIVES", "LODGE", "LOFTY", "LOGIC", "LOVER", "LOWER", "LUCID", "LUCKY", "LUNCH", "LYMPH", "MACRO", "MAGIC", "MAIZE", "MAJOR", "MAKER", "MANGO", "MAPLE", "MARCH", "MATCH", "MEDAL", "MEDIA", "MERCY", "MERIT", "METAL", "MICRO", "MIDST", "MIGHT", "MINOR", "MINUS", "MIXER", "MODEL", "MOIST", "MONEY", "MONTH", "MORAL", "MOUNT", "MOUSE", "MOUTH", "MOVER", "MOVIE", "MULTI", "MUSIC", "NAIVE", "NEWLY", "NEXUS", "NICHE", "NIGHT", "NINJA", "NOBLE", "NODAL", "NOISE", "NOISY", "NORTH", "NOTCH", "NOTED", "NOVEL", "NURSE", "OCEAN", "OFTEN", "OLIVE", "ONSET", "OPERA", "OPTIC", "ORBIT", "ORGAN", "OTHER", "OUGHT", "OUNCE", "OUTER", "OVERT", "OWING", "OWNED", "OWNER", "OXIDE", "PACED", "PAINT", "PANIC", "PANTS", "PARTY", "PASTE", "PATCH", "PATIO", "PAUSE", "PAVED", "PAYER", "PEACH", "PEARL", "PEDAL", "PHASE", "PHONE", "PIANO", "PILOT", "PINCH", "PIVOT", "PIZZA", "PLACE", "PLAIN", "PLANE", "PLANK", "PLANT", "PLATE", "PLEAD", "PLUCK", "POINT", "POKER", "POLAR", "PORCH", "POUCH", "POUND", "POWER", "PRESS", "PRICE", "PRIDE", "PRIME", "PRINT", "PRIZE", "PRONE", "PROUD", "PROVE", "PUNCH", "PUPPY", "PURGE", "PURSE", "QUAIL", "QUEEN", "QUERY", "QUEST", "QUICK", "QUIET", "QUILT", "QUITE", "QUOTA", "QUOTE", "RADIO", "RAINY", "RAISE", "RANCH", "RANGE", "RAPID", "RATIO", "REACH", "REACT", "READY", "REALM", "REGAL", "REIGN", "RELAX", "RELAY", "RELIC", "REMIT", "REPAY", "REPLY", "RESIN", "RIDGE", "RIGHT", "RINSE", "RISKY", "RIVAL", "ROAST", "ROCKY", "ROMAN", "ROUGH", "ROUND", "ROYAL", "RUSTY", "SADLY", "SAINT", "SALON", "SALTY", "SANDY", "SATIN", "SAUCE", "SCALE", "SCARE", "SCARF", "SCARY", "SCENT", "SCORE", "SCOUT", "SCREW", "SERUM", "SETUP", "SHADE", "SHADY", "SHAKE", "SHAKY", "SHAME", "SHAPE", "SHARE", "SHARK", "SHARP", "SHAVE", "SHEAR", "SHELF", "SHELL", "SHIFT", "SHINE", "SHIRT", "SHOCK", "SHORE", "SHORT", "SHOUT", "SHOVE", "SHOWN", "SHRUB", "SHRUG", "SIGHT", "SIGMA", "SILKY", "SINCE", "SIXTY", "SKATE", "SKILL", "SKIRT", "SLACK", "SLATE", "SLEEP", "SLEPT", "SLICE", "SLICK", "SLIDE", "SLING", "SLUMP", "SMALL", "SMART", "SMILE", "SMOKE", "SMOKY", "SNACK", "SNAIL", "SNAKE", "SNEAK", "SOBER", "SOLAR", "SOLVE", "SOUND", "SOUTH", "SPACE", "SPADE", "SPARE", "SPARK", "SPEAK", "SPEAR", "SPELL", "SPICE", "SPICY", "SPIKE", "SPILL", "SPINE", "SPLIT", "SPOIL", "SPOKE", "SPORT", "SPRAY", "SQUAD", "SQUAT", "SQUID", "STACK", "STAFF", "STAGE", "STAIN", "STAIR", "STAKE", "STALE", "STAMP", "STAND", "STARE", "STEAD", "STEAK", "STEAL", "STEAM", "STEEL", "STERN", "STICK", "STILL", "STING", "STOCK", "STONE", "STORE", "STORM", "STORY", "STOVE", "STRAP", "STRAW", "STRAY", "STUCK", "STUDY", "STUFF", "STUMP", "STYLE", "SUGAR", "SUITE", "SUNNY", "SUPER", "SWAMP", "SWEAT", "SWEPT", "SWIFT", "SWINE", "SWING", "SWIRL", "SYRUP", "TABLE", "TAKEN", "TEACH", "TEMPO", "THANK", "THEIR", "THICK", "THING", "THINK", "THIRD", "THORN", "THOSE", "THREE", "THROW", "THUMB", "THYME", "TIDAL", "TIGER", "TIMER", "TODAY", "TOKEN", "TONIC", "TOUCH", "TOUGH", "TOWEL", "TOWER", "TOXIC", "TOXIN", "TRACE", "TRACK", "TRADE", "TRAIL", "TRAIN", "TRASH", "TREAD", "TREND", "TRIAD", "TRIAL", "TRIBE", "TRICK", "TWICE", "TWINS", "ULCER", "ULTRA", "UNCLE", "UNDER", "UNIFY", "UNITE", "UNITY", "UPSET", "URBAN", "USAGE", "VAGUE", "VALID", "VALUE", "VIDEO", "VIRAL", "VITAL", "VOCAL", "VODKA", "VOICE", "VOWEL", "WAFER", "WAGED", "WAGER", "WAGON", "WAIST", "WAIVE", "WASTE", "WATCH", "WATER", "WEARY", "WEIGH", "WEIRD", "WHALE", "WHARF", "WHEAT", "WHILE", "WHITE", "WHOLE", "WHOSE", "WIDEN", "WIDTH", "WINDY", "WOMAN", "WOMEN", "WORLD", "WORSE", "WORST", "WORTH", "WOULD", "WOUND", "WOVEN", "WRECK", "WRITE", "WRONG", "YEAST", "YIELD", "YOUNG", "YOUTH"];

let robotDirectory = wordDirectory;

// generate random word for user and robot to guess

const randomWord = function(array) {
  return array[Math.floor(Math.random() * array.length)];
}

let pickedWord = randomWord(wordDirectory);
const guessResult = document.createElement('p')


//recieve user input and show it on screen.

const btn = document.getElementById("btn");
console.log(pickedWord);

btn.addEventListener("click", function(e) {
  e.preventDefault();
  const li = document.createElement("li");
  const list = document.getElementById("list");
  const list2 = document.getElementById("list2");

  const userGuess = document.getElementById("userInput").value;

  /*USER---------*/
  const guessResult = document.createElement('p')
  if (userGuess === pickedWord) {
    li.style.color = 'green';
    guessResult.appendChild(document.createTextNode(userGuess));
    alert("user wins");
    window.location.reload(false);

  } else {
    userGuess.split('').forEach((char, i) => {
      const span = document.createElement('span');

      if (pickedWord.charAt(i) === char) {
        span.style.color = 'dodgerblue';
      } else if (pickedWord.includes(char)) {
        span.style.color = 'orange';
      }

      span.appendChild(document.createTextNode(char));
      guessResult.appendChild(span);
    });
  }

  li.appendChild(guessResult);
  list.appendChild(li);

  setTimeout(function() {
    startRobot();
  }, 2000);
});

/*ROBOT----------------------------------- */
function startRobot() {
  const randomWord = function(array) {
    return array[Math.floor(Math.random() * array.length)];
  }

  let robotGuess = randomWord(robotDirectory);
  const li = document.createElement("li");
  const robotResult = document.createElement('p')

  if (robotGuess === pickedWord) {
    li.style.color = 'green';
    robotResult.appendChild(document.createTextNode(robotGuess));
    alert("robot wins");
    window.location.reload(false);

  } else {
    robotGuess.split('').forEach((char, i) => {
      const span = document.createElement('span');

      if (pickedWord.charAt(i) === char) {
        span.style.color = 'dodgerblue';
        robotDirectory = robotDirectory.filter((w) => w.indexOf(char) > -1);

      } else if (pickedWord.includes(char)) {
        span.style.color = 'orange';
        robotDirectory = robotDirectory.filter((w) => w.indexOf(char) > -1);
      }

      span.appendChild(document.createTextNode(char));
      robotResult.appendChild(span);
    });
    // Remove so not guessing again same word
    robotDirectory.splice(robotDirectory.indexOf(robotGuess), 1);
  }


  li.appendChild(robotResult);
  list2.appendChild(li);


}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rules {
  font-size: 1.5rem;
}

#green {
  color: green;
}

#blue {
  color: dodgerblue;
}

#orange {
  color: orange;
}

form input {
  width: 200px;
  height: 50px;
}

form button {
  height: 50px;
}

form {
  margin-top: 40px;
}

.lists {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.lists ul {
  margin: 10px 20px;
  list-style: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Robot</title>
</head>

<body>
  <div class="container">

    <div class="rules">
      <p><span id="green">If</span> the whole word is correct</p>
      <p><span id="blue">If</span> the letter guessed and its position is correct</p>
      <p><span id="orange">If</span> the letter is corect but its position is not</p>

      <p>Robot will start guessing 2 seconds after user guessed</p>
    </div>


    <form>
      <input onkeyup="this.value = this.value.toUpperCase();" id="userInput" type="text" placeholder="Text">
      <button id="btn">Submit</button>
    </form>
    <div class="lists">
      <ul id="list">
        <h3>user</h3>
      </ul>
      <ul id="list2">
        <h3>robot</h3>
      </ul>
    </div>

  </div>

Upvotes: 1

Related Questions