Currently, the div's are being added from the left side and moving to the right. How can I change it so that the div's are added from the left? This way, the first card will appear in the middle and new cards will stack up behind it to the left.
I attempted using float: right, but it did not produce the desired outcome.
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1 );
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function () {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function addCard(){
var div = document.createElement("div");
div.style.position = "relative";
div.style.color = "green";
div.style.left = "auto";
div.classList.add("card");
parentEl.appendChild(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px; /* Should be removed. Only for demonstration */
}
.left, .right {
width: 20%;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>
<script src="gamelogic.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Any advice or suggestions would be greatly appreciated.