Triangle positioning using Javascript, CSS and HTML (other methods welcome)

Question

I am trying to visualize a card game consisting of 20 triangles which can be placed in various ways. Each triangle has 3 sides, each of the sides has one counterpart in the remaining 19 triangles. Only if the sides match they can be put together.

the code that randomly generates possibilities is the following.( I am happy also for improvements on the code, which are, I am sure, plenty

JAVSCRIPT

function Game() {
    this.cardsUnused = [];
    this.cardsUsed = [];
    this.possibleCards = [];
    this.insert = function (obj) {
        this.cardsUnused.push(obj);
    };
    this.useCard = function (obj) { // adds a triangle to the usedCards Array and removes it from the UnusedCards Array
        this.cardsUsed.push(obj);
        this.cardsUnused.remove(obj);
        this.possibleCards.remove(obj);// t (array.prototype.remove)
    };
    this.unuseCard = function (obj) { 
        this.cardsUnused.push(obj);
        this.cardsUsed.remove(obj);  
    };
}


// remove function
Array.prototype.remove = function () {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

var game = new Game();

// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, Direction, position) {
    this.partName = name;
    this.sides = [sideA, sideB, sideC];
    this.sidesStatus = [0, 0, 0];
    this.sideDirection = Direction;
    this.stepUsed = 0;
    this.angle = 0;
    this.cardPosition = position;
    this.turn = function (winkel) {
        this.angle = this.angle + winkel;
    };
    this.useSide = function (side) {
        this.sidesStatus[side] = 1;
    };
}

var a = new Triangle("A", 1, 2, 21, 0, [0, 0]);
var b = new Triangle("B", 2, 3, 22, 0, [0, 0]);
var c = new Triangle("C", 3, 4, 23, 0, [0, 0]);
var d = new Triangle("D", 4, 5, 24, 0, [0, 0]);
var e = new Triangle("E", 5, 1, 25, 0, [0, 0]);
var f = new Triangle("F", 6, 21, 7, 180, [0, 0]);
var g = new Triangle("G", 7, 8, 26, 0, [0, 0]);
var h = new Triangle("H", 8, 22, 9, 180, [0, 0]);
var i = new Triangle("I", 9, 10, 27, 0, [0, 0]);
var j = new Triangle("J", 10, 23, 11, 180, [0, 0]);
var k = new Triangle("K", 11, 12, 28, 0, [0, 0]);
var l = new Triangle("L", 12, 24, 13, 180, [0, 0]);
var m = new Triangle("M", 13, 14, 29, 0, [0, 0]);
var n = new Triangle("N", 14, 25, 15, 180, [0, 0]);
var o = new Triangle("O", 15,  6, 30, 0, [0, 0]);
var p = new Triangle("P", 16, 26, 17, 180, [0, 0]);
var q = new Triangle("Q", 17, 27, 18, 180, [0, 0]);
var r = new Triangle("R", 18, 28, 19, 180, [0, 0]);
var s = new Triangle("S", 19, 29, 20, 180, [0, 0]);
var t = new Triangle("T", 20, 30, 16, 180, [0, 0]);

// an array with 20 triangles 
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];

// function to add triangles to the game
function addTriangles(arr) {
    var x;
    for (x = 0; x < arr.length; x += 1) {
        game.insert(triangles[x]);
    }
}

addTriangles(triangles);


game.useCard(a);



function toRadians (angle) {
  return angle * (Math.PI / 180);
}

function findRandomCardPossibleToUsedCards() {
    var isTrue = 0, randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide, position;
    while (isTrue === 0) {
        randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length);
        randomIndexUsedSide = Math.floor(Math.random() * 3);
        randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length);
        randomIndexUnusedSide = Math.floor(Math.random() * 3);
        if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined') {
            document.getElementById("button").innerHTML = "stopped";
        }
        // position = game.cardsUsed[randomIndexUsedCard].cardPosition;

        if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1) {
            if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide]) {
                isTrue = 1;

                // the main problem I am having lies withing the next three " if -parts" and the translation into the css/html to depict the triangles in the correct way

                if (randomIndexUsedSide === 0) {

                    game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection + 60;

                    game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));
                    game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 90));

                }
                if (randomIndexUsedSide === 1) {
                    game.cardsUnused[randomIndexUnusedCard].sideDirection = game.cardsUsed[randomIndexUsedCard].sideDirection - 60;

                    game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection -90));
                    game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection + 90));

                }
                if (randomIndexUsedSide === 2) {
                    game.cardsUnused[randomIndexUnusedCard].sideDirection =  game.cardsUsed[randomIndexUsedCard].sideDirection + 180;

                    game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 100 * Math.sin(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));
                    game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 86 * Math.cos(toRadians(game.cardsUsed[randomIndexUsedCard].sideDirection - 180));

                }


                game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
                game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;

                var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);// STYLE

                var elemInner  = elem.getElementsByTagName('div');

                for (i = 0; i < elemInner.length; i++) {
                    elemInner = elemInner[i];
                }




                elem.className = elem.className + " used"; // STYLE

                //elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
                elem.style.transform = 
                "translate(" + game.cardsUnused[randomIndexUnusedCard].cardPosition[0] + 
                "px," + game.cardsUnused[randomIndexUnusedCard].cardPosition[1] + 
                "px)"  +" rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)"  ;

                var elemA = document.getElementById(a.partName);// STYLE
                elemA.className = elemA.className + " used"; // STYLE

                game.useCard(game.cardsUnused[randomIndexUnusedCard]);


            }
        }
    }

}

CSS

 #game {
    width: 1000px;
    margin:auto;
    margin-top: 300px;
}
.triangle {
    display: none;
    position: absolute;

    width: 100px;
    height:100px;
    line-height: 100px;
    text-align: center;
    visibility: hidden;
}
.up {
    background-image: url(imgs/tri_up_red.png);

}



.down {
    background-image: url(imgs/tri_up_red.png);
}

.used {
    display: inline-block;
    visibility:visible;

}

.hidden {
    visibility: hidden;
}

.inner {
    width: 100px;
    height: 87px;
    margin-top: 6.5px;
    margin-bottom: 6.5px;

}

HTML

<html>
    <head>
        <link href="design.css" type="text/css" rel="stylesheet">
        <script language="javascript" type="text/javascript" src="game.js"></script>
    </head>
    <body><div id="button">
        <button  onclick="findRandomCardPossibleToUsedCards()">add Triangle</button>
        </div>
        <div id="game" class="game">

        <div id="A" class="triangle">
            <div class="inner up"><span>A</span></div>

        </div>
        <div id="B" class="triangle">
            <div class="inner up"><span>B</span></div>

        </div>  
        <div id="C" class="triangle">
            <div class="inner up"><span>C</span></div>

        </div>  
        <div id="D" class="triangle">
            <div class="inner up"><span>D</span></div>

        </div>  
        <div id="E" class="triangle">
            <div class="inner up"><span>E</span></div>

        </div>  
        <div id="F" class="triangle">
            <div class="inner down"><span>F</span></div>

        </div>  
        <div id="G" class="triangle">
            <div class="inner up"><span>G</span></div>

        </div>  
        <div id="H" class="triangle">
            <div class="inner down"><span>H</span></div>

        </div>  
        <div id="I" class="triangle">
            <div class="inner up"><span>I</span></div>

        </div>  
        <div id="J" class="triangle">
            <div class="inner down"><span>J</span></div>

        </div>  
        <div id="K" class="triangle">
            <div class="inner up"><span>K</span></div>

        </div>  
        <div id="L" class="triangle">
            <div class="inner down"><span>L</span></div>

        </div>  
        <div id="M" class="triangle">
            <div class="inner up"><span>M</span></div>

        </div>  
        <div id="N" class="triangle">
            <div class="inner down"><span>N</span></div>

        </div>  
        <div id="O" class="triangle">
            <div class="inner up"><span>O</span></div>

        </div>  
        <div id="P" class="triangle">
            <div class="inner down"><span>P</span></div>

        </div>  
        <div id="Q" class="triangle">
            <div class="inner down"><span>Q</span></div>

        </div>  
        <div id="R" class="triangle">
            <div class="inner down"><span>R</span></div>

        </div>  
        <div id="S" class="triangle">
            <div class="inner down"><span>S</span></div>

        </div>  
        <div id="T" class="triangle">
            <div class="inner down"><span>T</span></div>

        </div>  

    </div>
    </body>
</html>

The code to get the possible combinations works fine for me. As I said suggestions for improvement are welcome. My real problem is the visualization. In html all the divs are squares and and rotating and translating theses Squares/triangles gives me headaches. Correct rotations works and I think am on on the right path using the sine and cosine function to determine the translation in the x and y axis. But somehow I am stuck. I am not asking anyone to solve it for me but maybe someone can show me a different approach or point out where I was wrong.

Answer 1

I create a triangles for you with content inside:

I inspired by: https://css-tricks.com/snippets/css/css-triangle/

EDITED

I create a triangle that you can move because the external div is a point in the center of the triangle. And could be easy for you calc the coordinates.

I create a new example:

http://codepen.io/luarmr/pen/GJmjZg

And this using the code http://codepen.io/luarmr/pen/MwmjqX you can click in the triangles.

HTML

<div class="card">
  <span class="value">test</span>
</div>

CSS

.card{
 height:0;
 width:0;
 position:absolute;
 top:50px;
 left:150px; 
 transition: all 2s;
}

.card:after{
  content:'';
  display:block;
    width: 0; 
    height: 0; 
  position:absolute;
  left:-50px;
  top:-45px;
  z-index:1;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 90px solid #ebebeb;

  transition: all 2s;

}

.card.turn:after{  
    transform: rotate(180deg);
}
.card.turn{  
  left:200px;
}

.card .value{
  position:absolute;
  z-index:2;
  top:-10px;
  width:90px;
  left:-45px;
  text-align:center;
}

Answer 2

found a solution that works for me:

the positioning of the hard to position triangles I have solved by having different square picture of turned triangles instead of turning the triangles and getting hard to work with x and y coordinates and centers of the divs. from there on it was a piece of cake.

JAVASCRIPT

function Game() {
    this.cardsUnused = [];
    this.cardsUsed = [];
    this.insert = function (obj) {
        this.cardsUnused.push(obj);
    };
    this.useCard = function (obj) { // fügt ein Triangle dem Benutzen Stapel hinzu und entfernt sie vom unbenutzen Stapel
        this.cardsUsed.push(obj);
        this.cardsUnused.remove(obj);
    };
    this.unuseCard = function (obj) { // fügt ein Triangle dem unbenutzebn Stapel hinzu und entfernt sie vom benutzen Stapel
        this.cardsUnused.push(obj);
        this.cardsUsed.remove(obj);  // remove Funktion weiter unten definiert (array.prototype.remove)
    };
}



Array.prototype.remove = function () {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};


var game = new Game();

// Triangle wird erstellt
function Triangle(name, sideA, sideB, sideC, directionSide, position) {
    this.partName = name;
    this.sides = [sideA, sideB, sideC];
    this.sidesStatus = [0, 0, 0];
    this.sideDirection = directionSide;
    this.stepUsed = 0;
    this.angle = 0;
    this.cardPosition = position;
    this.useSide = function (side) {
        this.sidesStatus[side] = 1;
    };
}
    // creating 20 triangles
var a = new Triangle("A", 1, 21, 2, [60, 180, 300], [0, 0]);
var b = new Triangle("B", 2, 22, 3, [0, 0, 0], [0, 0]);
var c = new Triangle("C", 3, 23, 4, [0, 0, 0], [0, 0]);
var d = new Triangle("D", 4, 24, 5, [0, 0, 0], [0, 0]);
var e = new Triangle("E", 5, 25, 1, [0, 0, 0], [0, 0]);
var f = new Triangle("F", 6, 7, 21, [0, 0, 0], [0, 0]);
var g = new Triangle("G", 7, 26, 8, [0, 0, 0], [0, 0]);
var h = new Triangle("H", 8, 9, 22, [0, 0, 0], [0, 0]);
var i = new Triangle("I", 9, 27, 10, [0, 0, 0], [0, 0]);
var j = new Triangle("J", 10, 11, 23, [0, 0, 0], [0, 0]);
var k = new Triangle("K", 11, 28, 12, [0, 0, 0], [0, 0]);
var l = new Triangle("L", 12, 13, 24, [0, 0, 0], [0, 0]);
var m = new Triangle("M", 13, 29, 14, [0, 0, 0], [0, 0]);
var n = new Triangle("N", 14, 15, 25, [0, 0, 0], [0, 0]);
var o = new Triangle("O", 15,  30, 6, [0, 0, 0], [0, 0]);
var p = new Triangle("P", 16, 17, 26, [0, 0, 0], [0, 0]);
var q = new Triangle("Q", 17, 18, 27, [0, 0, 0], [0, 0]);
var r = new Triangle("R", 18, 19, 28, [0, 0, 0], [0, 0]);
var s = new Triangle("S", 19, 20, 29, [0, 0, 0], [0, 0]);
var t = new Triangle("T", 20, 16, 30, [0, 0, 0], [0, 0]);

    // creates an array with all triangles
var triangles = [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t];

    // function to add triangles to game
function addTriangles(arr) {
    var x;
    for (x = 0; x < arr.length; x += 1) {
        game.insert(triangles[x]);
    }
}
    // adding the triangles
addTriangles(triangles);

    ///// Game built up

var v = 0;

var randomIndexUsedCard, randomIndexUsedSide, randomIndexUnusedCard, randomIndexUnusedSide;
    // Helper function
function toRadians(angle) {
    return angle * (Math.PI / 180);
}

game.useCard(a); // lay down first triangle



    // main function that runs on click on button / max  19 times 
function findRandomCardPossibleToUsedCards2() {
    for (v = 0; v < 19; v = v + 1) {


        var isTrue = 0;
        while (isTrue === 0) { // runs as long as no random possible card is found
            randomIndexUsedCard = Math.floor(Math.random() * game.cardsUsed.length); // chooses a random triangle from triangles already used ( first time only a) 
            randomIndexUsedSide = Math.floor(Math.random() * 3); // chooses a random side of the randomly chosen triangle
            randomIndexUnusedCard = Math.floor(Math.random() * game.cardsUnused.length); // chooses a random triangle from the unused triangles
            randomIndexUnusedSide = Math.floor(Math.random() * 3); // and also a random side from the chosen unused triangle
            if (typeof game.cardsUnused[randomIndexUnusedCard] === 'undefined') { // hides button to choose triangle when all cards have been used
                document.getElementById("button").innerHTML = "fertig";
            }

            if (game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] !== 1 && game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] !== 1) {
                if (game.cardsUsed[randomIndexUsedCard].sides[randomIndexUsedSide] === game.cardsUnused[randomIndexUnusedCard].sides[randomIndexUnusedSide]) {
                    isTrue = 1;

                    for ( var x = 0; x < 3; x = x +1) {
                    if (randomIndexUsedSide === x) {

                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 0) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 60) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 120) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] - 50;
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 180) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] + 87;
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 240) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 300) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0] + 50;
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1];
                        }
                        if (game.cardsUsed[randomIndexUsedCard].sideDirection[x] === 360) {
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[0] = game.cardsUsed[randomIndexUsedCard].cardPosition[0];
                            game.cardsUnused[randomIndexUnusedCard].cardPosition[1] = game.cardsUsed[randomIndexUsedCard].cardPosition[1] - 87;
                        }
                    }
                    }



                    for (u = 0; u < game.cardsUnused[randomIndexUnusedCard].sideDirection.length; u = u + 1) {
                        if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] >= 360) {
                            game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] - 360;
                        }
                        if (game.cardsUnused[randomIndexUnusedCard].sideDirection[u] < 0) {
                            game.cardsUnused[randomIndexUnusedCard].sideDirection[u] = game.cardsUnused[randomIndexUnusedCard].sideDirection[u] + 360;
                        }
                    }

                    game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide] = game.cardsUsed[randomIndexUsedCard].sideDirection[randomIndexUsedSide] + 180;

                    if (game.cardsUnused[randomIndexUnusedCard].sideDirection[0] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] + 120;
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[0] - 120;
                    }

                    if (game.cardsUnused[randomIndexUnusedCard].sideDirection[1] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[2] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] + 120;
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[1] - 120;
                    }
                    if (game.cardsUnused[randomIndexUnusedCard].sideDirection[2] === game.cardsUnused[randomIndexUnusedCard].sideDirection[randomIndexUnusedSide]) {
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[0] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] + 120;
                        game.cardsUnused[randomIndexUnusedCard].sideDirection[1] = game.cardsUnused[randomIndexUnusedCard].sideDirection[2] - 120;
                    }

                    for (w = 0; w < 3; w = w + 1) {
                        if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] >= 360) {
                            game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] - 360;
                        }
                        if (game.cardsUnused[randomIndexUnusedCard].sideDirection[w] < 0) {
                            game.cardsUnused[randomIndexUnusedCard].sideDirection[w] = game.cardsUnused[randomIndexUnusedCard].sideDirection[w] + 360;
                        }
                    }

                    game.cardsUsed[randomIndexUsedCard].sidesStatus[randomIndexUsedSide] = 1;
                    game.cardsUnused[randomIndexUnusedCard].sidesStatus[randomIndexUnusedSide] = 1;


                    // STYLE STYLE 
                    var elem = document.getElementById(game.cardsUnused[randomIndexUnusedCard].partName);
                    var elemUsed = document.getElementById(game.cardsUsed[randomIndexUsedCard].partName);
                    var elemInner  = elem.getElementsByTagName('div');

                    for (y = 0; y < elemInner.length; y = y + 1) {
                        elemInner = elemInner[y];
                    }



                    elem.className = elem.className + " used"; // STYLE

                    elemInner.style.backgroundImage = "url(imgs/tri" + game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection[0]) + ".png)";
                    console.log(game.cardsUnused[randomIndexUnusedCard].partName + (game.cardsUnused[randomIndexUnusedCard].sideDirection));
                    // elemInner.style.transform = "rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)" ;
                    elem.style.transform =
                        "translate(" + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[0]) +
                        "px," + Math.floor(game.cardsUnused[randomIndexUnusedCard].cardPosition[1]) +
                        "px)"; // + " rotate(" + game.cardsUnused[randomIndexUnusedCard].sideDirection + "deg)"   ;

                    var elemA = document.getElementById(a.partName);
                    elemA.className = elemA.className + " used"; 


                    game.useCard(game.cardsUnused[randomIndexUnusedCard]);
                }
            }
        }
    }
}

HTML

<html>
    <head>
        <link href="design.css" type="text/css" rel="stylesheet">
        <script language="javascript" type="text/javascript" src="game.js"></script>
    </head>
    <body><div id="button">
        <button  onclick="findRandomCardPossibleToUsedCards2()">add Triangle</button>
        </div>
        <div id="game" class="game">

        <div id="A" class="triangle">
            <div class="inner up"></div>

        </div>
        <div id="B" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="C" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="D" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="E" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="F" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="G" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="H" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="I" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="J" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="K" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="L" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="M" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="N" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="O" class="triangle">
            <div class="inner up"></div>

        </div>  
        <div id="P" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="Q" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="R" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="S" class="triangle">
            <div class="inner down"></div>

        </div>  
        <div id="T" class="triangle">
            <div class="inner down"></div>

        </div>  

    </div>
    </body>
</html>

CSS

#game {
    postion: relative;
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 300px;
}
.triangle {
    display: none;
    position: absolute; 
    width: 100px;
    height:87px;
    overflow: hidden;
    visibility: hidden;
}


.used {
    display: inline-block;
    visibility:visible;

}

.hidden {
    visibility: hidden;
}



.inner {
    position: relative;
    overflow:hidden;
    width: 100px !important;
    height:87px !important;
    background-repeat: no-repeat; 
    background-origin:padding-box;
    background-position: top;
    margin: auto;
    background-size: contain;
    transform-origin: center;
    opacity: 0,7;
    /*border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #ebebeb; */
}

#A .inner {
    background-image: url(imgs/triA.png);