JSFiddle - React, Tailwind, and code Playground

by sptx457

HTML

<div class="game-container">
  <p>
  <input type="text" name="enter" class="player" value=""/>
    <input class="submit" type="button" value="Submit"/>
</p>

<p>
  <span class="player_name"></span>
</p>

<div class="backpack">
  <p class="item">
    <img id="superdog" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />
  </p>

  <p class="item">
    <img id="rucksack" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />
  </p>

  <p class="item">
    <img id="ocarina" class="hide-item" src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />
  </p>

  <p class="item">
    <img id="rupee" class="hide-item" src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />
  </p>

  <p class="item">
    <img id="crown" class="hide-item" src="http://vignette2.wikia.nocookie.net/zelda/images/4/45/Ocarina_of_Time_Artwork_Goron's_Bracelet_(Artwork).png/revision/latest?cb=20160423104411" />
  </p>

  <p class="item">
    <img id="heart" class="hide-item" src="http://vignette2.wikia.nocookie.net/fantendo/images/d/d4/Heart_contener.png/revision/latest?cb=20130921193535" />
  </p>
</div>
<br><br>

  <img data-item="superdog" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />

  <img data-item="rucksack" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />

  <img data-item="ocarina" class="selected"  src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />

  <img data-item="rupee" class="selected"  src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />

  <img data-item="crown" class="selected"...

CSS

.game-container {
  max-width: 500px;
  width: 100%;
}

.submit {
  background-color: lightgrey;
  width: 100px; 
  height: auto;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.submit:hover {
  background-color: white;
}

.item {
  width: 120px;
  height: 120px;
  border: 2px solid black;
  display: inline-block;
  margin: 3px;
  
}

.item-added {
  border: 2px solid blue;
}

img {
  width: 60%;
  display: block;
  margin: 20px auto;
}

.hide-item {
  display: none;
}

.selected {
  max-width: 40px;
  height: 40px;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
}

JavaScript

var backpack = {
	owner: false,
  name: "",
  has_item: false,
  item: []
};

var sort_items = function(add_counter) {
  add_counter.sort(function(a, b) {
  	return parseInt(a.id) - parseInt(b.id);
	}).each(function() {
  	var elem = $(this);
  	elem.remove();
  	$(elem).prependTo(".backpack");
	});
};

var count = 0;

$(".selected").click(function() {
	var $item = $(this).attr("data-item");
  var $item_container = $("#" + $item);
  var add_counter = $item_container.parent().attr("id", count++);
  backpack.item.push($item);
  
  $("#" + $item).show();
  $("#" + $item).parent().attr("id", count++);
  $(this).remove();
  
  sort_items(add_counter);
 
});

/*
$(".submit").click(function() {
  var player_name = $(".player").val();
	backpack.name = player_name;
	$(".player_name").text(backpack.name + "'s backpack");
});
*/

/*
var backpack_has_item = function($item) {
	if (backpack.item[$item] != "") {
    backpack.has_item = true;
  }
};

var highlight_active_container = function($item_id) {
	if (backpack.has_item) {
    $item_id.parent("p").addClass("item-added");
  }
};

$(".selected").click(function() {
  var $item = $(this).attr("data-item");
  var $item_id = $("#" + $item);

  if (backpack.item.hasOwnProperty($item)) {
    	backpack.item[$item] = $item;
      $item_id.show();
      $(this).remove();
  }
  
  backpack_has_item($item);
  highlight_active_container($item_id);
});
*/
/*
var selected = document.getElementsByClassName("selected");
var item = selected.getAttribute("data-item");
var new_item = document.getElementById(item); 

var check_object_for_match = function() {
  
  if (backpack.hasOwnProperty(new_item)) {
    	backpack[new_item] = new_item;
      new_item.style.display = block;   
  }
};

for (var i = 0; i < selected.length; i++) {
    selected[i].addEventListener('click', check_object_for_match, false);
}
*/