Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nina's Tic-Tac-Glow #32

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open

Nina's Tic-Tac-Glow #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
ab4d51f
new game initialized with two players
miriam-cortes Dec 13, 2016
6520440
test players symbol is assigned correctly
miriam-cortes Dec 13, 2016
ed5aadb
added tests for players and play in game
ninamutty Dec 13, 2016
0fbda73
game play tests complete
ninamutty Dec 13, 2016
bfcc8da
hasWon function completeded - need to test in play
ninamutty Dec 13, 2016
6227518
game basics complete and tested
ninamutty Dec 13, 2016
cbdf914
added board display in terminal
ninamutty Dec 13, 2016
691c0cf
tie games handled
ninamutty Dec 13, 2016
efc4980
changed player name to constructor
ninamutty Dec 13, 2016
1c693e0
tournment files
ninamutty Dec 13, 2016
0684610
commented tests
ninamutty Dec 13, 2016
3c9e578
fixed the problems kari has with us
ninamutty Dec 14, 2016
a89dc98
removed a couple files and edited index file
ninamutty Dec 16, 2016
2ced8d2
files set up
ninamutty Dec 16, 2016
0c6ded1
moved app.js out of src/app and into src/
ninamutty Dec 16, 2016
a2f8843
styling done - added click watcher
ninamutty Dec 19, 2016
fec6945
basic views and models working
ninamutty Dec 19, 2016
1fff387
can create players and click on tiles (an x appears)
ninamutty Dec 19, 2016
a15cfd8
can play very roughly
ninamutty Dec 20, 2016
9aab41f
CAN PLAY...need to keep them from doing more..
ninamutty Dec 20, 2016
d24c5a8
basic game complete - need to cancel click when game is over
ninamutty Dec 20, 2016
fbed5b8
modal showing
ninamutty Dec 20, 2016
b84bbb4
api format set
ninamutty Dec 20, 2016
13e2358
SENDS API POST REQUESTS
ninamutty Dec 21, 2016
384812a
tie send
ninamutty Dec 21, 2016
e276b73
can keep playling games
ninamutty Dec 21, 2016
07aff6b
added music for the modal
ninamutty Dec 21, 2016
1b1230a
deleted
ninamutty Dec 21, 2016
6bbdd3a
testing is failing
ninamutty Dec 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added build/assets/All-I-do-is-Win.mp3
View file
Open in desktop
Binary file not shown.
Binary file added build/assets/Blame-Chorus.m4a
View file
Open in desktop
Binary file not shown.
Binary file added build/assets/Frozen-Let-It-Go.mp3.crdownload
View file
Open in desktop
Binary file not shown.
0 webpack.config.js → build/assets/webpack.config.js
View file
Open in desktop
File renamed without changes.
314 changes: 314 additions & 0 deletions build/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,314 @@
body, h4, h2, button, input {
font-family: 'Open Sans Condensed', sans-serif; background-color: black;
color: white;
letter-spacing: 3px;
padding: 0;
}

h1#header a {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

h1#header {
text-align: center;
margin-top: 4%;
font-family: 'Monoton', cursive;
font-size: 6rem;
/*color: white;*/
letter-spacing: 1px;
}

h1#header a {
color: #fff;
font-family: Monoton;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}

h1#header a:hover {
color: #FF1177;
-webkit-animation: none;
-moz-animation: none;
animation: none;
}

.player-stuff {
text-align: center;
}


main {
width: 80%;
margin: auto;
padding-top: 5%;
padding-left: 5%;
}

#player1-name {margin-top: 25%;}
#player1-name, #player2-name {
text-align: center;
text-transform: uppercase;
z-index: 1;
}


ul {
list-style: none;
text-align: center;
width: 80%;
z-index: 1;
}

li.board-space {
width: 150px;
display: inline-block;
height: 150px;
border: 1px solid white;
background-color: black;
color: white;
position: relative;
text-align: center;
z-index: 1;
}

li.board-space h4 {
font-size: 5rem;
padding-top: 15%;
font-family: 'Monoton', sans-serif;
}

li.board-space:hover {
z-index: 5;
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
-moz-animation: neon2 1.5s ease-in-out infinite alternate;
animation: neon2 1.5s ease-in-out infinite alternate;
}


button.button.hollow {
color: #B6FF00;
border: 1px solid #B6FF00;
margin: 0 2%;
z-index: 1;
}

button.button.hollow:hover {
color: #B6FF00;
z-index: 3;
-webkit-animation: neon4 1.5s
ease-in-out infinite alternate;
-moz-animation: neon4 1.5s ease-in-out infinite alternate;
animation: neon4 1.5s ease-in-out infinite alternate;
}


#myModal {
display: none;
width: 70vw;
height: 60vh;
position: fixed;
text-align: center;
top: 27%;
z-index: 10;
background-color: black;
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
-moz-animation: neon2 1.5s ease-in-out infinite alternate;
animation: neon2 1.5s ease-in-out infinite alternate;
}

#modalText {
position: relative;
text-align: center;
padding-top: 13%;
margin-bottom: 7%;
font-size: 4rem;
text-transform: uppercase;
/*-webkit-animation: neon3 1.5s ease-in-out infinite alternate;
-moz-animation: neon3 1.5s ease-in-out infinite alternate;
animation: neon3 1.5s ease-in-out infinite alternate;*/
}

.btn-new-game {
margin-top: 35%;
text-align: center;
margin-left: 45%;

}


@-webkit-keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

@-webkit-keyframes neon2 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

@-webkit-keyframes neon3 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
}
}

@-webkit-keyframes neon4 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
}
}

@-webkit-keyframes neon5 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
}
}

@-webkit-keyframes neon6 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
}
}
/*glow for mozilla*/

@-moz-keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

@-moz-keyframes neon2 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

@-moz-keyframes neon3 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
}
}

@-moz-keyframes neon4 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
}
}

@-moz-keyframes neon5 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
}
}

@-moz-keyframes neon6 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
}
}
/*glow*/

@keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}

@keyframes neon2 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
}
}

@keyframes neon3 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
}
}

@keyframes neon4 {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
}
to {
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
}
}

@keyframes neon5 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
}
}

@keyframes neon6 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
}
}
/*REEEEEEEEEEESPONSIVE*/

@media (max-width: 650px) {
#container {
width: 100%;
}
p {
font-size: 3.5em;
}
}
Loading