Pan-Maciek · September 15, 2016 16:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Kółko i krzyżyk</title>
 	<meta charset="utf-8" />
    <script src="lib/jquery-3.1.0.min.js"></script>
    <script>
        var kolor = "black"
        var ruchx = true
        var rozmiar = 3
        function generuj() {
            $("#gra").html("")
            var a = Math.floor(($(window).height() - 100) / rozmiar)
            for (var i = 0; i < rozmiar; i++){
                for (var j = 0; j < rozmiar; j++){
                    var div = $("<div>")
                    div.css("backgroundColor", kolor)
                    div.width(a)
                    div.height(a)
                    div.css("lineHeight", a + "px")
                    div.css("fontSize", (a / 2) + "px")
                    div.css("display", "inline-block")
                    div.css("border", "solid white")
                    div.css("color", "white")
                    div.addClass("komurka")
                    div.on("click", function (){
                        $(this).off("click")
                        var span = $("<span>")
                        if (ruchx == true) {
                            span.text("x")
                            ruchx = false
                        } else {
                            span.text("o")
                            ruchx = true
                        }
                        $(this).append(span)
                    })
                    $("#gra").append(div)
                }
                $("#gra").append("<br>")
            }
        }
        $(document).ready(function () {
            generuj()
            $("#rozmiar").on("change", function () {
                rozmiar = $(this).val() * 1
                generuj()
            })
            $("#kolor").on("change", function () {
                kolor = $(this).val()
                $(".komurka").css("backgroundColor", kolor)
            })
            $("#nowa").on("click", function () {
                generuj()
            })

            $(window).on("resize", function () {
                var a = Math.floor(($(window).height() - 100) / rozmiar)
                var div = $(".komurka")
                div.width(a)
                div.height(a)
                div.css("lineHeight", a + "px")
                div.css("fontSize", Math.floor(a / 2) + "px")
            })
        })
    </script>
    <style>
        .komurka{
            text-align: center;
            font-family: "consolas";
            position: relative;
            margin-bottom: -4px;
        }
        .komurka span{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-sizing: border-box;
        }
    </style>
 </head>
 <body>
    <button id="nowa">nowa gra</button>
    <select id="rozmiar">
        <option value="3">3x3</option>
        <option value="4">4x4</option>
        <option value="5">5x5</option>
        <option value="6">6x6</option>
    </select>
    <select id="kolor">
        <option value="black">czarny</option>
        <option value="red">czerwony</option>
        <option value="green">zielony</option>
        <option value="blue">niebieski</option>
    </select>
    <div id="gra"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Kółko i krzyżyk</title>
	<meta charset="utf-8" />
	<script src="lib/jquery-3.1.0.min.js"></script>
	<script>
	var kolor = "black"
	var ruchx = true
	var rozmiar = 3
	function generuj() {
	$("#gra").html("")
	var a = Math.floor(($(window).height() - 100) / rozmiar)
	for (var i = 0; i < rozmiar; i++){
	for (var j = 0; j < rozmiar; j++){
	var div = $("<div>")
	div.css("backgroundColor", kolor)
	div.width(a)
	div.height(a)
	div.css("lineHeight", a + "px")
	div.css("fontSize", (a / 2) + "px")
	div.css("display", "inline-block")
	div.css("border", "solid white")
	div.css("color", "white")
	div.addClass("komurka")
	div.on("click", function (){
	$(this).off("click")
	var span = $("<span>")
	if (ruchx == true) {
	span.text("x")
	ruchx = false
	} else {
	span.text("o")
	ruchx = true
	}
	$(this).append(span)
	})
	$("#gra").append(div)
	}
	$("#gra").append("<br>")
	}
	}
	$(document).ready(function () {
	generuj()
	$("#rozmiar").on("change", function () {
	rozmiar = $(this).val() * 1
	generuj()
	})
	$("#kolor").on("change", function () {
	kolor = $(this).val()
	$(".komurka").css("backgroundColor", kolor)
	})
	$("#nowa").on("click", function () {
	generuj()
	})

	$(window).on("resize", function () {
	var a = Math.floor(($(window).height() - 100) / rozmiar)
	var div = $(".komurka")
	div.width(a)
	div.height(a)
	div.css("lineHeight", a + "px")
	div.css("fontSize", Math.floor(a / 2) + "px")
	})
	})
	</script>
	<style>
	.komurka{
	text-align: center;
	font-family: "consolas";
	position: relative;
	margin-bottom: -4px;
	}
	.komurka span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<button id="nowa">nowa gra</button>
	<select id="rozmiar">
	<option value="3">3x3</option>
	<option value="4">4x4</option>
	<option value="5">5x5</option>
	<option value="6">6x6</option>
	</select>
	<select id="kolor">
	<option value="black">czarny</option>
	<option value="red">czerwony</option>
	<option value="green">zielony</option>
	<option value="blue">niebieski</option>
	</select>
	<div id="gra"></div>
	</body>
	</html>