MajsterMajnd (stary)

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<h1 onclick="Test()">Mastermind</h1>
		<fieldset id="ramka_opcje">
			<legend>Opcje</legend>
			<button onclick="NowaGra()">Nowa gra</button>
			<button onclick="Rezygnacja()">Poddaję się</button>
			L. cyfr: <input id="l_cyfr" type="number" min="4" max="6" value="5" onchange="IlCyfr()"/>

			<!--
			<input type="checkbox" onchange="TrybUnikatowy()" id="tryb_unikat" checked="checked"/>
			<label for="tryb_unikat">Unikatowe cyfry (zawsze działa niezależnie od zazn.)</label>

			<input type="checkbox" onchange="TrybKolory()" id="tryb_kolory" disabled="disabled"/>
			<label for="tryb_kolory">Kolory zamiast cyfr (nie zaimplementowano)</label>
			-->
		</fieldset>
		<i id="komunikat"></i>
		<br><br>
		<div id="prosba_o_cyfry">Podaj cyfry: <input type="text" id="cyfry" maxlength="5" size="5" onchange="Interakcja()"/></div>
		<div id="wygrana">Wygrałeś/łaś! Wielkie brawa!</div>
		<div id="przegrana">No cóż, nie udało ci się rozwiązać tej zagadki, prawidłową odpowiedzią jest <span id="rozwiazanie"></span>.</div>
		<table id="tabela_prob">
			<thead>
				<th>Nr.<br>próby</th>
				<th>Kombinacja</th>
				<th>Trafione</th>
				<th>Istniejące,<br>lecz nietrafione</th>
			</thead>
			<tbody id="proby"></tbody>
			<tfoot></tfoot>
		</table>
		<script>
			const proby_max = 10, czas_komunikatu = 7000;
			const status = {
				w_toku: 0,
				wygrana: 1,
				przegrana: 2,
			}

			var timer_komunikat;
			var el_cyfry = document.getElementById("cyfry"),
				el_prosba = document.getElementById("prosba_o_cyfry"),
				el_wygrana = document.getElementById("wygrana"),
				el_przegrana = document.getElementById("przegrana"),
				el_komunikat = document.getElementById("komunikat"),
				el_proby = document.getElementById("proby"),
				el_rozwiazanie = document.getElementById("rozwiazanie");
				el_l_cyfr = document.getElementById("l_cyfr");

			var proba_nr, rozw = "";
			//var unikatowe = true,
			//	kolory = false;
			var il_cyfr = 5;

			function Reset()
			{
				il_cyfr = parseInt(el_l_cyfr.value);
				proba_nr = 1;
				rozw = GenerujRozw();
				el_proby.innerHTML = "";
				el_cyfry.value = "";
				el_cyfry.maxLength = el_cyfry.size = il_cyfr;
				PokazStatus(status.w_toku);
			}

			function LosujZnakCyfry()
			{
				const max = 9;
				var liczba = Math.floor(Math.random() * max);
				return liczba + "";
			}

			function GenerujRozw()
			{
				var i = 0, znak_cyfra, t="";
				while (i < il_cyfr)
				{
					znak_cyfra = LosujZnakCyfry();
					if (t.indexOf(znak_cyfra) == -1)
					{
						t+=znak_cyfra;
						++i;
					}
				}
				return t;
			}

			function LiczPasujace(podane_cyfry)
			{
				var i = 0, wyn = 0;
				while (i < rozw.length)
				{
					if (podane_cyfry[i] == rozw[i])
						++wyn;
					++i;
				}
				return wyn;
			}

			function LiczIstniejace(podane_cyfry)
			{
				var i = 0, wyn = 0, poz;
				while (i < rozw.length)
				{
					poz = rozw.indexOf(podane_cyfry[i])
					if (poz > -1)
						++wyn;
					++i;
				}
				return wyn;
			}

			function CzyCyfryUnikatowe(podane_cyfry)
			{
				var i = 0, wyn = true, dl = podane_cyfry.length, poz;
				while (i < dl && wyn)
				{
					poz = podane_cyfry.indexOf(podane_cyfry[i],i+1);
					if (poz > -1)
						wyn = false;

					++i;
				}
				return wyn;
			}

			function SprawdzPopr(podane_cyfry) { return (podane_cyfry.length == il_cyfr && podane_cyfry.search(/\D/) == -1 && CzyCyfryUnikatowe(podane_cyfry)); }

			function WypiszProbe(nr, cyfry, pas, istn_niepas)
			{
				var html = "<tr><td>"+nr+"</td><td><table class='tabela_cyfry'><tr>";
				var i = 0;
				while (i < cyfry.length)
				{
					html+="<td>"+cyfry[i]+"</td>";
					++i;
				}
				html += "</tr></table></td><td>" + pas + "</td><td>" + istn_niepas + "</td></tr>";

				el_proby.innerHTML += html;
			}

			function Interakcja()
			{
				var tekst = el_cyfry.value;
				if (SprawdzPopr(tekst))
				{
					var pasujace = LiczPasujace(tekst);
					var istn_niepas = LiczIstniejace(tekst) - pasujace;
					WypiszProbe(proba_nr++, tekst, pasujace, istn_niepas);
					el_cyfry.value = "";

					if (tekst == rozw)
						Wygrana();
					else if (proba_nr > proby_max)
						Przegrana();
				}
			}

			function PokazStatus(s)
			{
				el_prosba.style.display = (s == status.w_toku ? "block" : "none");
				el_wygrana.style.display = (s == status.wygrana ? "block" : "none");
				el_przegrana.style.display = (s == status.przegrana ? "block" : "none");
			}

			function Komunikat(t)
			{
				if (t)
				{
					el_komunikat.innerHTML = t;
					el_komunikat.style.display = "inline-block";

					WylaczKomunikat(czas_komunikatu);
				}
				else
				{
					el_komunikat.style.display = "none";
					WylaczKomunikat();
				}
			}

			function WylaczKomunikat(czas)
			{
				if (timer_komunikat)
				{
					clearInterval(timer_komunikat);
					timer_komunikat=undefined;
				}

				if (czas)
					timer_komunikat = setInterval(Komunikat,czas);
			}

			function NowaGra()
			{
				var ok = false;
				if (proba_nr >= 1)
					ok = confirm("Czy na pewno chcesz rozpocząć grę od nowa?");

				if (proba_nr == -1 || ok)
					Reset();
			}

			function Rezygnacja()
			{
				if (proba_nr == 1)
					alert("Ej, no weź! Jeszcze nie podjąłeś/łaś próby odgadnięcia, a ty już klikasz ten guzik.\n\n:|\n\nWstydź się!");
				else if (proba_nr > 1)
				{
					var ok = confirm("Napewno wywieszasz białą flagę?");
					if (ok)
						Przegrana();
				}
			}

			function Wygrana(){	PokazStatus(status.wygrana); }

			function Przegrana()
			{
				el_rozwiazanie.innerHTML = rozw;
				proba_nr = -1;
				PokazStatus(status.przegrana);
			}
			/*
			function TrybUnikatowy()
			{
				unikatowe = document.getElementById("tryb_unikat").checked;
			}

			function TrybUnikatowy()
			{
				kolory = document.getElementById("tryb_kolory").checked;
			}
			*/
			function IlCyfr() {	Komunikat('Zmiany zostaną zastosowane po kliknięciu "Nowa Gra"'); }

			Reset();
		</script>
		<style>
			body {
				font-family: "Arial", "Verdana";
				text-align: center;
				margin: auto;
				width: 55%;
			}

			.tabela_cyfry { margin: auto; }

			.tabela_cyfry, #cyfry, #rozwiazanie	{
				font-family: "Courier New", "Tahoma";
				font-size: 25px;
				font-weight: bold;
			}

			#tabela_prob {
				margin-top: 5px !important;
				width: 75%;
				margin: auto;
			}

			#tabela_prob,
			.tabela_cyfry { border-collapse: collapse; }

			#tabela_prob th { font-size: 18px; }
			#tabela_prob td {padding: 5px; font-size: 22px; }

			#tabela_prob th,
			#tabela_prob td,
			.tabela_cyfry td { border: 2px solid; }

			.tabela_cyfry td { font-size: 25px !important; }
			#ramka_opcje { margin: auto; width: 80%;	}
			#wygrana { color: green; display: none; }
			#przegrana { color: red;	display: none; }

			#rozwiazanie { background-color: red; color: white; }
			#l_cyfr{ width: 30px; }

			#komunikat {
				border: 3px double;
				background-color: #fffac9;
				padding: 2px; display: none;
			}
		</style>
	</body>
</html>