Wordl Design

Steven · June 16

During the addicting Wordl wave, I wanted to see if I could mimic the game - design only.

The simple CSS:

*{
	font-family:Tahoma;
	text-transform:uppercase;
}


body{
	margin:auto;
	max-width:150px;
	padding:20px;
	background-color:#111;
	zoom:200%;
}


div{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap:4px;
	margin-bottom:4px;
}


letter{
	display:block;
	border:1px solid #999;
	width:25px;
	height:23px;
	padding-top:2px;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
}


.green{
	background-color:#009966;
}


.yellow{
	background-color:#999222;
}


.grey{
	background-color:#999999;
}

The PHP:

<?php
	$grid = array();
	$answer = str_split('plays');
	$guess = array("place","later","adios","audio", "playr","plays");
	
	for($ctr=0;$ctr<6;$ctr++){
		$g = array(array("" => ""),array("" => ""),array("" => ""),array("" => ""),array("" => ""));
		array_push($grid,$g);
	}
	
	for($ctr=0;$ctr<count($guess);$ctr++){
		$letters = str_split($guess[$ctr]);
		$color = "grey";
		
		for($l=0;$l<count($letters);$l++){
			$ans = array_intersect($answer,$letters);
			if(in_array($letters[$l],$ans)){
				if(array_key_exists($l,$ans)){
					if($letters[$l] == $ans[$l]){
						$color = "green";
					}else{
						$color = "yellow";
					}
				}else{
					$color = "yellow";
				}
			}else{
				$color = "grey";
			}
			$grid[$ctr][$l] = array($color => $letters[$l]);
		}
	}
	
	foreach($grid as $g){
		echo '<div>';
		foreach($g as $a){
			foreach($a as $k => $v){
				echo '<letter class="'.$k.'">'.$v.'</letter>';
			}
		}
		echo '</div>';
	}
?>

This was super fun to make because it really demonstrates the use of built-in PHP array methods. The idea is to separate the chosen word (answer array) by letters and compare with the guess array while assigning each letter with a color depending if it's correct (green), in the word (yellow) or not in the word (grey). I could easily compact this code by using custom functions but it's nice to see if statements and loops.

To view this design, please visit:

https://thebinder.ca/wordl/index.php