Stephen Seo
89a12623b4
Can select from three difficulties, and the AI makes their move when it is their turn. AI probably still needs some tweaking..
197 lines
3.8 KiB
HTML
197 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Four-Line Dropper</title>
|
|
<style>
|
|
b {
|
|
color: #FFF;
|
|
}
|
|
|
|
div.menu {
|
|
background-color: #555;
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 50%;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 8px;
|
|
grid-auto-rows: 33%;
|
|
}
|
|
div.singlePlayerMenu {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
|
|
display: grid;
|
|
}
|
|
button.menuSinglePlayerEasy {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
button.menuSinglePlayerNormal {
|
|
grid-row: 2;
|
|
grid-column: 1;
|
|
}
|
|
button.menuSinglePlayerHard {
|
|
grid-row: 3;
|
|
grid-column: 1;
|
|
}
|
|
button.menuLocalMultiplayer {
|
|
grid-row: 2;
|
|
grid-column: 3;
|
|
}
|
|
button.menuMultiplayer {
|
|
grid-row: 2;
|
|
grid-column: 4;
|
|
}
|
|
b.menuText {
|
|
color: #FFF;
|
|
grid-row: 1;
|
|
grid-column: 2 / 5;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
}
|
|
div.hidden_menu {
|
|
display: none;
|
|
}
|
|
div.wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 50px) 400px;
|
|
gap: 2px;
|
|
grid-auto-rows: 50px;
|
|
border: 0px;
|
|
}
|
|
div.info_text_wrapper {
|
|
grid-row: 9;
|
|
grid-column: 1 / 8;
|
|
}
|
|
div.info_text_turn_wrapper {
|
|
grid-row: 1;
|
|
grid-column: 8;
|
|
}
|
|
div.info_text0 {
|
|
background-color: #DDD;
|
|
width: 100%;
|
|
height: 400px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
div.info_text1 {
|
|
background-color: #333;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
b.cyan {
|
|
color: #0FF;
|
|
}
|
|
b.magenta {
|
|
color: #F0F;
|
|
}
|
|
button.slot {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 1px solid black;
|
|
padding: 0px;
|
|
}
|
|
button.r0 {
|
|
grid-row: 1;
|
|
}
|
|
button.r1 {
|
|
grid-row: 2;
|
|
}
|
|
button.r2 {
|
|
grid-row: 3;
|
|
}
|
|
button.r3 {
|
|
grid-row: 4;
|
|
}
|
|
button.r4 {
|
|
grid-row: 5;
|
|
}
|
|
button.r5 {
|
|
grid-row: 6;
|
|
}
|
|
button.r6 {
|
|
grid-row: 7;
|
|
}
|
|
button.r7 {
|
|
grid-row: 8;
|
|
}
|
|
button.c0 {
|
|
grid-column: 1;
|
|
}
|
|
button.c1 {
|
|
grid-column: 2;
|
|
}
|
|
button.c2 {
|
|
grid-column: 3;
|
|
}
|
|
button.c3 {
|
|
grid-column: 4;
|
|
}
|
|
button.c4 {
|
|
grid-column: 5;
|
|
}
|
|
button.c5 {
|
|
grid-column: 6;
|
|
}
|
|
button.c6 {
|
|
grid-column: 7;
|
|
}
|
|
button.open {
|
|
background: #FFF;
|
|
}
|
|
button.cyan {
|
|
background: #0FF;
|
|
}
|
|
button.magenta {
|
|
background: #F0F;
|
|
}
|
|
button.win {
|
|
animation-duration: 400ms;
|
|
animation-name: blink;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
button.placed {
|
|
animation-duration: 2200ms;
|
|
animation-name: placed_blink;
|
|
animation-iteration-count: 1;
|
|
animation-direction: normal;
|
|
}
|
|
@keyframes placed_blink {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
</html>
|
|
|
|
<!-- vim: et ts=2 sts=2 sw=2
|
|
-->
|