<html>

<head>

<title>SET&reg; game

</title>

<STYLE>

.style1 { background:white url(set_images/cardback.png) no-repeat top center; border-top: 4px solid #f9ffed; border-left: 4px solid #f9ffed; border-right: 4px solid #f9ffed; border-bottom: 4px solid #f9ffed; cursor:pointer; }

.style1:hover { background: lightgray; }

.style2 { color:black; background: lightgray; height: 30px; border-radius: 12px; border: 1px solid #000; }

.style2:hover { color: white; background: #00C509; text-decoration: none; filter: none; }

.style2:active { color: #cc1825; background: white; text-decoration: none; filter: none; }

#no_set { font-weight:bold; }

p { font-size:24px; }

span { font-size:24px; }

</STYLE>

</head>

<body BGCOLOR="#d8d0ab" BACKGROUND="./PaperBackground.gif" TEXT="#000000" LINK="#0000FF" VLINK="#FF0066" ALINK="#000000">

<center>

<table width="100%">

 <tr>

  <!-- <colgroup><col width="15%"><col width="35%"><col width="20%"><col width="30%"></colgroup> -->

  <td width="300"><h3><a href="./index.htm">&#x25C4;&nbsp;Home</a></h3></td>

  <td width="300"><h1>SET&reg; Game (2.4)</h1></td>

  <td width="200"><a href="http://en.wikipedia.org/wiki/Set_(game)" target="_blank">how to play the SET game</a></td>

  <td align="center"><IMG HEIGHT=41 WIDTH=85 SRC="./CATRUN.GIF" BORDER=0 ALT="Karls Katze"></td>

 </tr>

</table>

<hr>

<table>

 <tr>

  <td width="130">Cards left:&nbsp;&nbsp;<span size="2" id="cardcount">69</span></td>

  <td width="130">Sets found:&nbsp;&nbsp;<span size="2" id="setcount">0</span></td>

  <td width="100">Helps:&nbsp;&nbsp;<span size="2" id="helpcount">0</span></td>

  <td width="120" id="matchfound">Match: <font color="#0000FF">waiting</font></td>

  <td width="120" id="no_set">&nbsp;</td>

  <td width="90"><input type="button" class="style2" value="Pause" onclick="toggle_timer()"></td>

  <td width="100"><input type="button" class="style2" value="Find SET" onclick="findmatch(1)"></td>

  <td width="100"><input type="button" class="style2" value="New game" onclick="startgame(2)"></td>

 </tr>

</table>

<hr>

<div id='blocker' style="left:10%; right:10%; margin:0; height:588; width:960; position: absolute; background-color: #c4e3fe; layer-background-color: #c4e3fe; visibility:hidden; font-size:48;"><br>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;Pause&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;</div>

<!-- <div id='no_set' style="left:10%; right:10%; margin:0 auto; height: 400; position: absolute;" width=800 height=400>Sorry, no SET</div> -->


<!-- set up the playing area -->

<table cellspacing=0 cellpadding=0>

 <tr>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r1c1" width="200" height="140" class="style1" onclick="toggleselect('r1c1');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r1c2" width="200" height="140" class="style1" onclick="toggleselect('r1c2');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r1c3" width="200" height="140" class="style1" onclick="toggleselect('r1c3');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r1c4" width="200" height="140" class="style1" onclick="toggleselect('r1c4');"></div>

  </td>

 </tr>

 <tr>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r2c1" width="200" height="140" class="style1" onclick="toggleselect('r2c1');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r2c2" width="200" height="140" class="style1" onclick="toggleselect('r2c2');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r2c3" width="200" height="140" class="style1" onclick="toggleselect('r2c3');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r2c4" width="200" height="140" class="style1" onclick="toggleselect('r2c4');"></div>

  </td>

 </tr>

 <tr>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r3c1" width="200" height="140" class="style1" onclick="toggleselect('r3c1');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r3c2" width="200" height="140" class="style1" onclick="toggleselect('r3c2');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r3c3" width="200" height="140" class="style1" onclick="toggleselect('r3c3');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r3c4" width="200" height="140" class="style1" onclick="toggleselect('r3c4');"></div>

  </td>

 </tr>

</table>

<table>

 <tr>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r4c1" width="200" height="140" class="style1" onclick="toggleselect('r4c1');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r4c2" width="200" height="140" class="style1" onclick="toggleselect('r4c2');"></div>

  </td>

  <td width="200" height="140" valign="middle" align="center">

	<div id="r4c3" width="200" height="140" class="style1" onclick="toggleselect('r4c3');"></div>

  </td>

 </tr>

</table>

<table cellpadding=0 cellspacing=0>

 <tr>

  <td width="100"></td>

  <td width="150">Total time (s): <p id="tot_time" size="5"></p></td>

  <td width="200">Average time (s): <p id="ave_time" size="5"></p></td>

  <td width="150">Quickest time (s): <p id="quick_time" size="5"></p> </td>

  <td width="150">Longest time (s): <p id="slow_time" size="5"></p></td>

 </tr>

</table>

</center>

<script>

var wait_noset=1600;

var wait_set=1200;

var lock_mouse=0;

var nextcard=0;

var cards=new Array();

var colors=new Array('r','g','p');

var shades=new Array('s','l','o');

var shapes=new Array('o','d','s');

var cardqueue=new Array();

var placedcards=new Array();

placedcards["r4c1"]="";

placedcards["r4c2"]="";

placedcards["r4c3"]="";

var allcards=new Array();

for (i=0; i<3; i++)

  for (j=0; j<3; j++)

	for (k=0; k<3; k++)

	  for (ii=0; ii<3; ii++) {

		pos=Number(i*27)+Number(j*9)+Number(k*3)+ii;

		allcards[pos]=ii+colors[i]+shades[j]+shapes[k];

	  }


function shuffle() {

//  var d = new Date();

  var cardindex=allcards;

  var randnum=0;

  var top=0;

  for (i=0; i<81; i++) {

    randnum=Math.floor(Math.random()*cardindex.length);

	cards[i]=cardindex[randnum];

	top=cardindex.length-1;

	for (j=randnum; j<top; j++)

	  cardindex[j]=cardindex[j+1];

	cardindex.pop();

  }

//  var d2= new Date();

//  var timetook=d2-d;

//  document.write('The shuffle took '+timetook+' milliseconds');

}


function startgame(start_type) {

  if (start_type == 2) {location.reload();}

  document.getElementById('ave_time').innerHTML=" ";

  document.getElementById('quick_time').innerHTML=" ";

  document.getElementById('slow_time').innerHTML=" ";

  set_val("helpcount", "");

  nr_sets=0;

  help_count=0;

  set_val("setcount", nr_sets);

  shuffle();

  for (i=1; i<4; i++) {

	for (j=1; j<5; j++) {

	  pos=(i-1)*4 + (j-1);

	  cardqueue[pos]=new Array();

	  cardqueue[pos]['card']=cards[pos];

	  var cell='r'+i+'c'+j;

	  cardqueue[pos]['cell']=cell;

    }

  }

//  for (i=0; i<81; i++)

//	document.write('card '+i+': '+cards[i]+'<br>');

//  force_nomatch(12); //testing purposes- force no matches

  placecards(timeout);

  setTimeout('starttimer()', 3000);

  nextcard=12;

  var remain=81-nextcard;

  document.getElementById('cardcount').innerHTML=remain;

}


var end_time=0;

var tot_time=0;

var ave_time=0;

var quick_time=0;

var slow_time=0;

var timer_on=0;

var passed=0;

var nr_sets=0;

var help_count=0;

var times=new Array();

var timeout=300;

function put_val(id, val, ten) {

  document.getElementById(id).innerHTML=(val/ten).toFixed(2);

}

function set_val(id, val) {

  document.getElementById(id).innerHTML=val;

}

function starttimer() {

  timer_on=1;

  setTimeout('timer()', timeout);

}

function stoptimer() {

  timer_on=0;

  end_time=new Date();

  put_val("tot_time", tot_time, 1000.0);

  var cardsleft=0;

  for (i=0; i<15; i++) {

	cell='r'+Number(Math.floor(i/4)+1)+'c'+Number((i%4)+1);

	if (placedcards[cell]!="")

	  cardsleft++;

  }

  var sets=27-(cardsleft/3);

  if (sets > 0) { ave_time=tot_time/sets; }

  //put_val("ave_time", Math.round(ave_time), 1000.0);

}


function toggle_timer() {

  if (timer_on) {

	document.getElementById('blocker').style.visibility='visible';

	timer_on=0;

  }

  else {

	document.getElementById('blocker').style.visibility='hidden';

	timer_on=1;

	setTimeout('timer()', timeout);

  }

}


function timer() {

  if (!timer_on)

	return;

  var now=new Date();

  passed+=timeout;

  tot_time+=timeout;

  put_val("tot_time", tot_time, 1000.0);

  if (nr_sets > 0) { put_val("ave_time",tot_time/nr_sets, 1000.0); }

  if (passed>slow_time)

    put_val("slow_time", passed, 1000.0);

  setTimeout('timer()', timeout);

}


function time_event() {

  var now=new Date();

  if (passed>slow_time) {

	slow_time=passed;

    put_val("slow_time", slow_time, 1000.0);

  }

  if (passed<quick_time || quick_time==0) {

	quick_time=passed;

    put_val("quick_time", quick_time, 1000.0);

  }

  times[times.length]=passed;

  passed=0;

}


var selectpos=0;

var selectarr=new Array();

function toggleselect(divname) {

  dobj=document.getElementById(divname).style;

  if (lock_mouse == 1) { return; }

  if (selectarr[0]==divname || selectarr[1]==divname || selectarr[2]==divname) {

	var top=selectarr.length;

	for (i=0; i<top; i++) {

	  if (selectarr[i+1]==divname) continue;

	  selectarr[i]=selectarr[i+1];

	}

	selectarr.pop();

	selectpos--;

	dobj.borderTop="4px solid #f9ffed";

	dobj.borderBottom="4px solid #f9ffed";

	dobj.borderLeft="4px solid #f9ffed";

	dobj.borderRight="4px solid #f9ffed";

  }

  else {

	dobj.borderTop="4px solid #000000";

	dobj.borderBottom="4px solid #000000";

	dobj.borderLeft="4px solid #000000";

	dobj.borderRight="4px solid #000000";

	selectarr[selectpos]=divname;

	selectpos++;

	if (selectpos==3)

	  checkmatch();

  }

}


function clear_no_set() {

  document.getElementById('no_set').innerHTML="<font color=\"#000000\">&nbsp;</font>";

}


function checkmatch() {

  for (i=0; i<4; i++) {

	if (oddmanout(placedcards[selectarr[0]].charAt(i), placedcards[selectarr[1]].charAt(i), placedcards[selectarr[2]].charAt(i))) {

//	  alert('Not a match: '+placedcards[selectarr[0]].charAt(i)+', '+placedcards[selectarr[1]].charAt(i)+', '+placedcards[selectarr[2]].charAt(i)+'\r\n'+

//			placedcards[selectarr[0]]+'\r\n'+placedcards[selectarr[1]]+'\r\n'+placedcards[selectarr[2]]);

      document.getElementById('no_set').innerHTML="<font color=\"#FF0000\">Sorry, no SET!</font>";

	  setTimeout('clear_no_set()',wait_noset);

	  lock_mouse=1;

	  document.getElementsByTagName("body")[0].background  = "";

	  setTimeout('cleanup()',wait_noset);

	  return;

	}

  }

  // match found correctly, remove cards and add new ones

  nr_sets+=1;

  document.getElementById('no_set').innerHTML="<font color=\"#106a2b\">SET!</font>";

  setTimeout('clear_no_set()',wait_set);

  time_event();

  set_val("setcount", nr_sets);

  document.getElementById('matchfound').innerHTML="Match: <font color=\"#0000FF\">waiting</font>";

  for (i=0; i<3; i++) {

	placedcards[selectarr[i]]="";

    dobj=document.getElementById(selectarr[i]);

	dobj.style.borderTop="4px solid #f9ffed";

	dobj.style.borderBottom="4px solid #f9ffed";

	dobj.style.borderLeft="4px solid #f9ffed";

	dobj.style.borderRight="4px solid #f9ffed";

	dobj.innerHTML='';

  }

  if (placedcards['r4c1']!="" || placedcards['r4c2']!="" || placedcards['r4c3']!="") { // had 15 cards, only rearrange

   for (i=1; i<4; i++) {

	cname='r4c'+i;

	if (placedcards[cname]!="") {

	  for (ii=0; ii<3; ii++) {

		if (selectarr[ii].charAt(1)!="4" && placedcards[selectarr[ii]]=="") {

		  placedcards[selectarr[ii]]=placedcards[cname];

		  placedcards[cname]="";

		  document.getElementById(cname).innerHTML="";

		  var thiscard=placedcards[selectarr[ii]];

		  var num=thiscard.charAt(0);

		  var cardurl=thiscard.substring(1);

		  var injstr='';

		  while (num>=0) {

			injstr+='<img src="set_images/'+cardurl+'.png">';

			num--;

		  }

		  document.getElementById(selectarr[ii]).innerHTML=injstr;

		  break;

		}

	  }

	}

   }

   selectarr.pop();

   selectarr.pop();

   selectarr.pop();

   selectpos=0;

   findmatch(2);

   return;

  }

  if (nextcard==81) {

	selectarr.pop();

	selectarr.pop();

	selectarr.pop();

	selectpos=0;

	findmatch(2);

	return;

  }

  // add cards to queue

  var pos=cardqueue.length;

  var j=0;

  for (i=pos; i<pos+3; i++) {

    cardqueue[i]=new Array();

    cardqueue[i]['card']=cards[nextcard];

    cardqueue[i]['cell']=selectarr[j];

	j++;

	nextcard++;

  }

  var remain=81-nextcard;

  document.getElementById('cardcount').innerHTML=remain;

  selectarr.pop();

  selectarr.pop();

  selectarr.pop();

  selectpos=0;

  placecards(2*timeout);

}


function oddmanout(v1, v2, v3) {

  if (v1==v2 && v1==v3 && v2==v3) return 0;

  if (v1!=v2 && v1!=v3 && v2!=v3) return 0;

  return 1;

}


function cleanup() {

  for (i=0; i<3; i++) {

    dobj=document.getElementById(selectarr[i]).style;

	dobj.borderTop="4px solid #f9ffed";

	dobj.borderBottom="4px solid #f9ffed";

	dobj.borderLeft="4px solid #f9ffed";

	dobj.borderRight="4px solid #f9ffed";

  }

  selectarr.pop();

  selectarr.pop();

  selectarr.pop();

  selectpos=0;

  lock_mouse=0;

  document.getElementsByTagName("body")[0].background  = "./PaperBackground.gif";

}


function placecards(delay) {

  var thiscard=cardqueue[0]['card'];

  if (thiscard == null) {return;}

  placedcards[cardqueue[0]['cell']]=cardqueue[0]['card'];

  var num=thiscard.charAt(0);

  var cardurl=thiscard.substring(1);

  var cell=cardqueue[0]['cell'];

  var injstr='';

  while (num>=0) {

	injstr+='<img src="set_images/'+cardurl+'.png">';

	num--;

  }

  document.getElementById(cell).innerHTML=injstr;

  var top=cardqueue.length;

  for (i=0; i<top-1; i++)

	cardqueue[i]=cardqueue[i+1];

  cardqueue.pop();

  if (cardqueue.length>0)

    setTimeout('placecards('+delay+')', delay);

  else

	findmatch(2);

}


function findmatch(mode) {

  if (mode == 1) {

    if (lock_mouse == 1) { return; }

    help_count++;

    set_val("helpcount", help_count);

  }

  if (placedcards["r4c1"]=="") {

	itop=10; jtop=11; ktop=12;

  }

  else {

	itop=13; jtop=14; ktop=15;

  }

  var found=0;

  for (i=0; i<itop && found==0; i++) {

	var a=Math.floor(i/4)+1;

	var b=(i%4)+1;

	var c1='r'+a+'c'+b;

	if (placedcards[c1]=="") continue;

	for (j=i+1; j<jtop && found==0; j++) {

	  var a=Math.floor(j/4)+1;

	  var b=(j%4)+1;

	  var c2='r'+a+'c'+b;

	  if (placedcards[c2]=="") continue;

	  for (k=j+1; k<ktop && found==0; k++) {

		var a=Math.floor(k/4)+1;

		var b=(k%4)+1;

		var c3='r'+a+'c'+b;

		if (placedcards[c3]=="") continue;

		for (ii=0; ii<4 && found==0; ii++) {

		  if (oddmanout(placedcards[c1].charAt(ii), placedcards[c2].charAt(ii), placedcards[c3].charAt(ii))) break;

		  if (ii==3) found=1;

		}

	  }

	}

  }

  if (found==1 && mode==2) {

	document.getElementById('matchfound').innerHTML="Match: <font color=\"#0000FF\">Found</font>";

	return;

  }

  if (found==1) {

    if (mode==1) {

	  for (ii=0; ii<3; ii++) {

	    if (ii==0) cname=c1; if (ii==1) cname=c2; if (ii==2) cname=c3;

	    dobj=document.getElementById(cname).style;

	    dobj.borderTop="4px solid #ff0000";

	    dobj.borderBottom="4px solid #ff0000";

	    dobj.borderLeft="4px solid #ff0000";

	    dobj.borderRight="4px solid #ff0000";

	  } 

    }

  }

  else {

	if (mode==2 && (placedcards["r4c1"]!="" || nextcard>=81)) {

	  stoptimer();

	  document.getElementById('matchfound').innerHTML="Match: <font color=\"#0000FF\">None</font>";

	  return;

	}

    if (placedcards["r4c1"]!="") {

	  stoptimer();

	  alert('There are no SETS. In addition, there ain\'t enough room in the browser for more cards. Game over.');

	  return;

	}

    if (nextcard>=81) {

	  stoptimer();

	  alert('There are no more SETS.');

	  help_count--;

	  if (help_count===0) { set_val("helpcount", "" ); 

	  } else { set_val("helpcount", help_count); }

	  return;

	}

	else {

	  var pos=cardqueue.length;

	  var j=1;

	  for (i=pos; i<pos+3; i++) {

		cname='r4c'+j;

		cardqueue[i]=new Array();

		cardqueue[i]['card']=cards[nextcard];

		cardqueue[i]['cell']=cname;

//		alert('adding exta card: cardqueue['+i+'][\'card\']="'+cards[nextcard]+'\r\n cardqueue['+i+'][\'cell\']="'+cname);

		j++;

		nextcard++;

	  }

	  var remain=81-nextcard;

	  document.getElementById('cardcount').innerHTML=remain;

	  set_val("setcount", nr_sets);

	  selectarr.pop();

	  selectarr.pop();

	  selectarr.pop();

	  selectpos=0;

	  placecards(2*timeout);

	}

  }

}


function force_nomatch(mod) {

  if (mod==12) {

	for (i=0; i<12; i++) {

	  cell='r'+Number(Math.floor(i/4)+1)+'c'+Number((i%4)+1);

	  cardqueue[i]['cell']=cell;

	}

	cardqueue[0]['card']="0rod"; cardqueue[1]['card']="0ros"; cardqueue[2]['card']="0rss"; cardqueue[3]['card']="1rsd"; cardqueue[4]['card']="1rso"; cardqueue[5]['card']="2rss"; cardqueue[6]['card']="2roo"; cardqueue[7]['card']="2ros"; cardqueue[8]['card']="0pod"; cardqueue[9]['card']="0pos"; cardqueue[10]['card']="0pss"; cardqueue[11]['card']="1psd";

  }

  if (mod==15) {

	for (i=0; i<15; i++) {

	  cell='r'+Number(Math.floor(i/4)+1)+'c'+Number((i%4)+1);

	  cardqueue[i]['cell']=cell;

	}

	cardqueue[0]['card']="0rod"; cardqueue[1]['card']="0ros"; cardqueue[2]['card']="0rss"; cardqueue[3]['card']="1rsd"; cardqueue[4]['card']="1rso"; cardqueue[5]['card']="2rss"; cardqueue[6]['card']="2roo"; cardqueue[7]['card']="2ros"; cardqueue[8]['card']="0pod"; cardqueue[9]['card']="0pos"; cardqueue[10]['card']="0pss"; cardqueue[11]['card']="1psd"; cardqueue[12]['card']="1pso"; cardqueue[13]['card']="2pss"; cardqueue[14]['card']="2poo"; cardqueue[15]['card']="2pos";

  }

}


startgame(1);


var image=new Array();

for (i=0; i<3; i++)

  for (j=0; j<3; j++)

	for (k=0; k<3; k++) {

	  var n=((i+1)*9)+((j+1)*3)+(k+1);

	  image[n] = new Image();

	  var imgname='set_images/'+colors[i]+shades[j]+shapes[k]+'.png';

	  image[n].src = imgname;

	}

</script>

<table border="0" width="100%">

  <colgroup><col width="70%"><col width="30%"></colgroup>

  <tr><td></td><td align="center"><IMG HEIGHT=60 WIDTH=117 SRC="./TIGER.GIF" BORDER=0 ALT="Karls Tiger"></td></tr>

 </table>

 <hr>(C) 2014 by Karl Kechele - last update: 08.03.2020

</body>

</html>