EN605.607.81.SP22_ASDM_Project/front_end/index.html
Stephen Seo 89a12623b4 Incorporate game AI into game
Can select from three difficulties, and the AI makes their move when it
is their turn. AI probably still needs some tweaking..
2022-03-10 16:17:16 +09:00

196 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
-->