stephenseo/EN605.607.81.SP22_ASDM_Project
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
EN605.607.81.SP22_ASDM_Project/front_end/index.html

197 lines
3.8 KiB
HTML
Raw Normal View History

Impl basic MVP of front-end (MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
2022-02-28 07:40:38 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Four-Line Dropper</title>
<style>
Impl main menu Only "LocalMultiplayer" can be chosen for the game-mode since neither AI nor Networked-Multiplayer has been implemented yet.
2022-03-04 07:22:30 +00:00
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%;
}
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 07:17:16 +00:00
div.singlePlayerMenu {
Impl main menu Only "LocalMultiplayer" can be chosen for the game-mode since neither AI nor Networked-Multiplayer has been implemented yet.
2022-03-04 07:22:30 +00:00
grid-row: 2;
grid-column: 2;
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 07:17:16 +00:00
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;
Impl main menu Only "LocalMultiplayer" can be chosen for the game-mode since neither AI nor Networked-Multiplayer has been implemented yet.
2022-03-04 07:22:30 +00:00
}
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;
}
Impl basic MVP of front-end (MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
2022-02-28 07:40:38 +00:00
div.wrapper {
display: grid;
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
grid-template-columns: repeat(7, 50px) 400px;
Impl basic MVP of front-end (MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
2022-02-28 07:40:38 +00:00
gap: 2px;
grid-auto-rows: 50px;
border: 0px;
}
Added output-text-box, connected front-end items More work was needed to have separate components of the front-end to communicate with each other. Also added an output-text-box for informative messages.
2022-03-01 07:02:59 +00:00
div.info_text_wrapper {
grid-row: 9;
grid-column: 1 / 8;
}
Remove NodeRef for getter, improve turn indicator All NodeRefs have been removed in favor of "getElementById". Turn indicator is now much more obvious to see.
2022-03-03 08:36:51 +00:00
div.info_text_turn_wrapper {
grid-row: 1;
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
grid-column: 8;
}
div.info_text0 {
Added output-text-box, connected front-end items More work was needed to have separate components of the front-end to communicate with each other. Also added an output-text-box for informative messages.
2022-03-01 07:02:59 +00:00
background-color: #DDD;
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
width: 100%;
Added output-text-box, connected front-end items More work was needed to have separate components of the front-end to communicate with each other. Also added an output-text-box for informative messages.
2022-03-01 07:02:59 +00:00
height: 400px;
overflow-x: hidden;
overflow-y: auto;
word-wrap: break-word;
Reverse info_text vertically info_text's latest messages now appear at the top instead of at the bottom.
2022-03-02 06:38:24 +00:00
display: flex;
flex-direction: column-reverse;
Added output-text-box, connected front-end items More work was needed to have separate components of the front-end to communicate with each other. Also added an output-text-box for informative messages.
2022-03-01 07:02:59 +00:00
}
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
div.info_text1 {
Remove NodeRef for getter, improve turn indicator All NodeRefs have been removed in favor of "getElementById". Turn indicator is now much more obvious to see.
2022-03-03 08:36:51 +00:00
background-color: #333;
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
width: 100%;
height: 100%;
overflow-x: hidden;
Remove NodeRef for getter, improve turn indicator All NodeRefs have been removed in favor of "getElementById". Turn indicator is now much more obvious to see.
2022-03-03 08:36:51 +00:00
overflow-y: hidden;
Impl additional info text box, drop logic Can place tokens, and not place tokens where there already is a token. Additional info text box added to the side of the board. More information to the UI regarding placed tokens.
2022-03-02 08:51:14 +00:00
word-wrap: break-word;
display: flex;
flex-direction: column-reverse;
}
Remove NodeRef for getter, improve turn indicator All NodeRefs have been removed in favor of "getElementById". Turn indicator is now much more obvious to see.
2022-03-03 08:36:51 +00:00
b.cyan {
color: #0FF;
}
b.magenta {
color: #F0F;
}
Impl basic MVP of front-end (MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
2022-02-28 07:40:38 +00:00
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;
}
Impl buttons indicator that won the game
2022-03-09 09:10:13 +00:00
button.win {
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Impl placed token indicator, fixes/refactorings
2022-03-10 06:43:03 +00:00
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;
}
}
Impl basic MVP of front-end (MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
2022-02-28 07:40:38 +00:00
</style>
</head>
</html>
<!-- vim: et ts=2 sts=2 sw=2
-->
Reference in a new issue Copy permalink