JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script type="text/html" id="scale-template">
    <span class="square" data-bind="css: value() == 0 ? 'square selected' : 'square'" >0</span>
    <span class="square" data-bind="css: value() == 1 ? 'square selected' : 'square'" >1</span>
    <span class="square" data-bind="css: value() == 2 ? 'square selected' : 'square'" >2</span>
    <span class="square" data-bind="css: value() == 3 ? 'square selected' : 'square'" >3</span>
    <span class="square" data-bind="css: value() == 4 ? 'square selected' : 'square'" >4</span>
    <span class="square" data-bind="css: value() == 5 ? 'square selected' : 'square'" >5</span>
    <span class="square" data-bind="css: value() == 6 ? 'square selected' : 'square'" >6</span>
    <span class="square" data-bind="css: value() == 7 ? 'square selected' : 'square'" >7</span>
    <span class="square" data-bind="css: value() == 8 ? 'square selected' : 'square'" >8</span>
    <span class="square" data-bind="css: value() == 9 ? 'square selected' : 'square'" >9</span>
    <span class="square" data-bind="css: value() == 10 ? 'square selected' : 'square'" >10</span>
</script>

<div style="clear: both;">
    <input type="button" class="command" id="zombie" style="width: 100%" value="Ils arrivent" />
    <input type="button" class="command" id="roll" style="width: 100%" value="Actions" />
    <input type="button" class="command" id="zombieAttack" style="width: 100%" value="Ils attaquent" />
</div>

<div style="width: 50%; float: left">
    <div id="pelouse" class="zone">
        <!-- ko foreach: zombies -->
        <span>bob</span>
        <!-- /ko -->
        <div class="actionplace">
            <span class="dice" data-bind="text: game.dices[0].value"></span>
            <span class="dice" data-bind="text: game.dices[1].value"></span>
            <span class="dice" data-bind="text: game.dices[2].value"></span>
            <span class="dice" data-bind="text:...

CSS

.dice { display: inline-block; padding: 7px; margin: 7px; font-size: 1.2em; border: 2px solid green; cursor: pointer; }
.square { display: inline-block; padding: 5px; margin: 3px; border: 2px solid grey;}
.actionplace { margin: 15px; border: 2px dashed grey; height: 60px; }
.zone { margin: 10px; height: 150px; border: 2px dashed grey; }
.selected { background-color: blue; }

.rule { padding: 5px; color: lightgrey; }


.container{
     -webkit-perspective: 600;
    color: grey;
    width: 100%;
    height: 100%;
}
.flip { 
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.7s ease-in-out;
    position: relative;
}
.flip > div { 
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    position: absolute;
}


.flip.flipped { -webkit-transform: rotateY(180deg); }

.front { }
.back { -webkit-transform: rotateY(180deg); border: red 2px dotted; margin 5px; }

#credit { color: lightgrey; font-size: 0.8em; font-style:italic; text-align: right; margin-top: 70px; }

JavaScript

var Dice = function(){
			this.value = ko.observable(6);
			this.roll = function(){
				this.value(Math.floor(Math.random() * 6) +1 );
			};
		};
        var successCounter = function(container, successScore){
            var success = 0;
            var dices = container.find(".dice");
            dices.each(function(){
                if($(this).text()*1 >= successScore)
                        success++;
                });
                return success;
        };

        var Scale = function(min, max, initialValue){
            this.value = ko.observable(initialValue);
            this.min = min;
            this.max = max;
            this.add = function(number){
                var newvalue = this.value() + number;
                if(newvalue<max)
                    this.value(newvalue);
                else
                    this.value(max);
            };
            this.remove = function(number){
                var newvalue = this.value() - number;
                if(newvalue>min)
                    this.value(newvalue);
                else
                    this.value(min);
            }
        };

		var game = {
            zombies : ko.observableArray([]),
			kills : new Scale(0 ,10 ,0),
			barricade : new Scale(0,10,10),
			garage : new Scale(0,10,0),
			dices : [
				new Dice(),
				new Dice(),
				new Dice(),
				new Dice(),
			],
			rollDices: function(){
				game.dices[0].roll();
				game.dices[1].roll();
				game.dices[2].roll();
				game.dices[3].roll();
            
                game.checkKills();
                game.checkbarricade();
                game.checkgarage();
            
                game.Modes.zombiesAttack();
			},
            addZombies: function(){
                var quantite = 1;
                if(game.garage.value() > 3)
                    quantite++;
                if(game.garage.value() > 6)
                    quantite++;
                if(game.garage.value() > 8)
                    quantite++;
  ...