Sort unplayed pieces

[Cixi-K]

Hello,

In real life I sort the remaining pieces to get a quicker view of the remaining moves possible or impossible. I made a small modification to my CSS to reproduce this sorting. For beginners it simplifies your life too .

Code: Select all

/****************************
QUARTO UNPLAYED PIECES
****************************/
#unplayed_box {
    display: block;
    position: relative;
    height: 340px;
    width: 240px;
}

.unplayed_piece {
    position: absolute;
}

#unplayedpiece_1 {
    top: 85px;
    left: 120px;    
}
#unplayedpiece_2 {
    top: 0;
    left: 0;
}
#unplayedpiece_3 {
    top: 0;
    left: 60px;
}
#unplayedpiece_4 {
    top: 0;
    left: 180px;
}
#unplayedpiece_5 {
    top: 0;
    left: 120px;
}
#unplayedpiece_6 {
    top: 85px;
    left: 0;
}
#unplayedpiece_7 {
    top: 85px;
    left: 60px;
}
#unplayedpiece_8 {
    top: 85px;
    left: 180px;
}
#unplayedpiece_9 {
    top: 170px;
    left: 120px;
}
#unplayedpiece_10 {
    top: 255px;
    left: 0;
}
#unplayedpiece_11 {
    top: 255px;
    left: 60px;
}
#unplayedpiece_12 {
    top: 255px;
    left: 180px;
}
#unplayedpiece_13 {
    top: 255px;
    left: 120px;
}
#unplayedpiece_14 {
    top: 170px;
    left: 0;
}
#unplayedpiece_15 {
    top: 170px;
    left: 60px;
}
#unplayedpiece_16 {
    top: 170px;
    left: 180px;
}

[Cixi-K]

English:
Hello, I made a new version where the squares are in closer directions. For those like me, who have knocks and like things aligned
Francais:
Bonjour, j'ai fait une nouvelle version ou les carrés sont dans des sens plus proches. Pour ceux comme moi, qui ont des tocs et qui aime les choses alignés

Code: Select all

#unplayed_box {
	display:block;
	position:relative;
	height:340px;
	width:240px;
}

.unplayed_piece {
	position:absolute;
}

#unplayedpiece_1 {
	top:85px;
	left:120px;
	transform: scaleX(-1);
}

#unplayedpiece_2 {
	top:0;
	left:0;
}

#unplayedpiece_3 {
	top:0;
	left:60px;
}

#unplayedpiece_4 {
	top:0;
	left:180px;
}

#unplayedpiece_5 {
	top:0;
	left:120px;
}

#unplayedpiece_6 {
	top:85px;
	left:0;
	transform: scaleX(-1);
}

#unplayedpiece_7 {
	top:85px;
	left:60px;
	transform: scaleX(-1);
}

#unplayedpiece_8 {
	top:85px;
	left:180px;
	transform: scaleX(-1);
}

#unplayedpiece_9 {
	top:170px;
	left:120px;
}

#unplayedpiece_10 {
	top:255px;
	left:0;
}

#unplayedpiece_11 {
	top:255px;
	left:60px;
}

#unplayedpiece_12 {
	top:255px;
	left:180px;
}

#unplayedpiece_13 {
	top:255px;
	left:120px;
}

#unplayedpiece_14 {
	top:170px;
	left:0;
}

#unplayedpiece_15 {
	top:170px;
	left:60px;
}

#unplayedpiece_16 {
	top:170px;
	left:180px;
}

#piece_1 {
	transform: scaleX(-1);
}

#piece_6 {
	transform: scaleX(-1);
}

#piece_7 {
	transform: scaleX(-1);
}

#piece_8 {
	transform: scaleX(-1);
}