1

I'm attempting to setup a function that passes in a piece of data, the color identity of an MTG card, and returns a small circle matching that color identity.

Originally I had a series of if statements, but that wasn't working, so I converted to a switch because that was working for rarity. I'm not sure what broke. It appears to match the rarity function which is working fine, so I'm scratching my head with why the color switch isn't hitting any of it's conditions.

Separately, the function seems to run every time the item is moused over...? Another problem for another day maybe.

I've tried making the switch an array version of the character as well ie ['W'] instead of 'W'.

A few of the console.logs('No color found', colorIdentity):

  • No color found ['W']
  • No color found (2) ['B', 'W']

The component code is here:

export const TableRow = ({ card, setPreviewCard, index }) => {
  //error with cards that have "//" in their name test
  
  // shortens rarity to single letter value
  const rarity = (cardRarity) => {
    switch(cardRarity){
      case "common":
        return "C";
      case "uncommon":
        return "U";
      case "rare":
        return "R"
      case "mythic":
        return "M"
      case "special":
        return "S"
      default:
        return console.log("Error in rarity function")
    }
  }

  //sets the color vertical of the column to a visual rep of the color
  //BUG: loses color upon comparison
  const color = (colorIdentity) => {
    let colorString = '';
    
    switch(colorIdentity){
      case colorIdentity.length > 1:
        colorString = "gold";
        break;
      case colorIdentity.length < 1: 
        colorString = "gray";
        break;
      case 'W':
        colorString = "white";
        break;
      case 'U': 
        colorString = "blue";
        break;
      case 'R':
        colorString = "red";
        break;
      case 'B':
        colorString = "black";
        break;
      case 'G':
        colorString = "green";
        break;
      default: 
        console.log('No color found', colorIdentity);
    }
    
    const circle = <div style={{
      height: "1em",
      width: "1em",
      borderRadius: "50%",
      border: "1pt black solid",
      backgroundColor: colorString
    }}>
    </div>;

    return circle
}

  return (
    <tr 
      id={card} className="table-row" key={index}
      onClick={() => console.log(card)}
      onMouseEnter={() => setPreviewCard(card.image_uris)}
    >
      <td id="card-number">{index + 1}</td>
      <td id="card-name">{card.name}</td>
      <td id="card-data">{color(card.color_identity)}</td>
      <td id="card-data">{rarity(card.rarity)}</td>
      <td id="card-data">{card.score}</td>
    </tr>
  );
};

The full application is available here https://github.com/dconnenc/mtgproject although this is my first project so its a mess. Thanks in advance.

dconnenc
  • 31
  • 6
  • 2
    `switch` uses a strict comparison. you can not use conditions insite case, if you not use a boolean value at switch value. – Nina Scholz Aug 30 '22 at 21:27
  • 1
    This doesn't directly answer your question, but it'd be a lot better and dynamic if you used an object or map. – code Aug 30 '22 at 21:28
  • 1
    @code thanks for the reply, im pretty green still -- could you provide an example of what you mean by obj or map? – dconnenc Aug 30 '22 at 21:31
  • 1
    Instead of a switch statement, you can create a JavaScript object e.g. `const colorIdentities = { W: "white", U: "blue", R: "red", ... };` and instead of a long switch statement you just get the element with `const colorBasedOnLetter = colorIdenties[colorIdentity];`. – code Aug 30 '22 at 21:34
  • 1
    *"Originally I had a series of if statements, but that wasn't working..."* Note that in JavaScript, a `switch` is basically an `if`/`else if`/`else` sequence (unlike some other languages). Also note that `["w"] === "w"` is `false`, and `switch` uses strict equality (`===`). – T.J. Crowder Aug 30 '22 at 21:44

1 Answers1

1

Your errors indicate colorIdentity is an Array. Your switch assumes it's a string, but since ['W'] is not the same as 'W', and ['B', 'W'] is neither 'B' nor 'W', it fails to match any case and goes to the default case. Your data source (which you haven't described) is clearly not producing what you expect; either fix the data source, or handle the individual elements of the Array individually, don't try to process the Array as a whole in the switch.

ShadowRanger
  • 143,180
  • 12
  • 188
  • 271