CSS Hangman using :checked [CPC]

css-hangman-using-checked-cpc.markdown

CSS Hangman using :checked [CPC]

Hangman where the logic is all HTML and CSS, using Pug to generate the HTML.

Because of how CodePen works, if you want a new word just change the reset variable on line 2 - this will cause Pug to regenerate and pick a new word, refreshing will not work

A Pen by Zed Dash on CodePen.

License.

index.pug

//Scroll down and cheat, if you don't want to cheat and want a different word - change the value of reset and a new word will be generated (not based on reset)
-var reset = "example"





























-var words = ["codepen", "javascript", "style", "hypertext", "interactive", "design", "website", "react", "browser", "chrome", "source", "information", "page", "programming"];
-var word = words[Math.floor(Math.random()*words.length)]
each letter in ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
	input(type="radio", letter=letter, correct=(word.indexOf(letter.toLowerCase())>-1 ))
div.break
	
svg.hangman(viewBox="0 0 96 96")
	line.stage10(x1="62" y1="70" x2="56" y2="56")
	line.stage9(x1="50" y1="70" x2="56" y2="56")
	line.stage8(x1="68" y1="46" x2="56" y2="40")
	line.stage7(x1="44" y1="46" x2="56" y2="40")
	line.stage6(x1="56" y1="40" x2="56" y2="56")
	circle.stage5(cx="56" cy="34" r="6")
	line.stage4(x1="56" y1="16" x2="56" y2="28")
	line.stage3(x1="24" y1="24" x2="32" y2="16")
	line.stage3(x1="21" y1="16" x2="60" y2="16")
	line.stage2(x1="24" y1="80" x2="24" y2="16")
	line.stage1(x1="16" y1="80" x2="32" y2="80")
	
div.break

div.hint
	each letter in (word.toUpperCase().split(''))
		div.letter(value=letter)

div.hangman
	div.lose.stage10
		div
			div.top Commiserations
			div.bottom Word was #{word}
	
mixin nest(letters)
	if (letters.length == 0)
		div.win Congratulations
	else
		div.letter(value=letters[0])
			+nest(letters.substr(1))
	
div.wincondition
	+nest(word.toUpperCase())

scripts

<script src="https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458"></script>

style.scss

$letters: ("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");

html {
	display:flex;
	flex-direction:column;
	align-items:center;
	overflow-x:hidden;
	height:100vh;
	body {
		flex-grow:1;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		max-width:100%;
		width:45rem;
		padding:1rem;
		font-family: 'Permanent Marker', cursive;
		.break {
			width:100%;
		}
		.wincondition {
			.letter {
				display:none;
			}
		}
		.hangman {
			.lose {
				display:none;
				div {
					display:flex;
					flex-direction:column;
					text-align:center;
					.bottom {
						font-size: 5vmin;
					}
				}
			}
		}
		.win, .lose {
			display:grid;
			place-items:center;
			z-index:1;
			position: fixed;
			top:0;
			left:0;
			right:0;
			bottom:0;
			background:rgba(255,255,255,0.5);
			color:white;
			font-size: 10vmin;
			&.win {
				color:#2ECC71;
			}
			&.lose {
				color:#D8334A;
			}
		}
		input {
			outline:none;
			appearance:none;
			background:#F5F7FA;
			border-radius:.5rem;
			opacity:.75;
			width:3rem;
			height:3rem;
			padding:0 .5rem;
			margin:.2rem;
			transform:scale(1) rotate(-4deg);
			transition:.25s -.1s;
			text-align:center;
			font-size:2rem;
			font-family: 'Permanent Marker', cursive;
			line-height:3rem;
			&:not(:checked) {
				cursor: pointer;
				&:hover {
					transform:scale(1.25) rotate(0deg);
					opacity:1;
				}
			}
			&:before {
				content: attr(letter);
			}
			&:checked {
				color:#D8334A;
				background:transparent;
				opacity:1;
			}
			&[correct]:checked {
				background:#2ECC71;
				color:#F5F7FA;
				transform:rotate(0deg);
			}
			@each $l in $letters {
				&[letter="#{$l}"]:checked~.hint .letter[value="#{$l}"] {
					border-bottom:transparent;
					&:before {
						opacity:1;
					}
				}
				&[letter="#{$l}"]:checked~.wincondition .letter[value="#{$l}"] {
					display:block;
				}
			}
		}
		svg {
			width:30rem;
			*{
				fill:none;
				stroke:#EEEEEE;
				stroke-width:2;
				stroke-linecap:round;
				stroke-miterlimit:10;
				transition:.25s;
			}
		}
		input:not([correct]):checked ~.hangman .stage1, 
		input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage2,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage3,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage4,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage5,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage6,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage7,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage8,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage9,
		input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~input:not([correct]):checked ~.hangman .stage10 {
			stroke:black;
			display:grid;
		}
		.hint {
			display:flex;
			flex-direction:row;
			justify-content:center;
			width:100%;
			.letter {
				width:3rem;
				height:3rem;
				margin:0.25rem;
				border-bottom:0.125rem solid black;
				font-size:3rem;
				text-align:center;
				&, &:before {
					transition:.25s;
				}
				&:before {
					opacity:0;
					content: attr(value);
				}
			}
		}
	}
}

styles

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&amp;display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />