Skip to content

Commit

Permalink
[feature #157801299] Structure Game Screen layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@clintfidel
clintfidel committed Jun 17, 2018
1 parent 0133fab commit 38100a2
Show file tree
Hide file tree
Showing 10 changed files with 474 additions and 108 deletions.
3 changes: 2 additions & 1 deletion app/views/includes/foot.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ script(type='text/javascript', src='/lib/jquery/jquery.js')
script(type='text/javascript', src='/lib/underscore/underscore-min.js')

//Bootstrap
script(type="text/javascript", src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js")
script(type="text/javascript", src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js")
script(type="text/javascript", src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js")
script(type="text/javascript", src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js")

//AngularJS
script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular.js')
Expand Down
3 changes: 2 additions & 1 deletion app/views/includes/head.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ head
meta(property='og:image', content='http://cfh.io/img/screenshot-small.png')
meta(property='og:site_name', content='Cards for Humanity')
meta(property='fb:admins', content='APP_ADMIN')
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css")
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css')
link(rel='stylesheet', href='/css/animate.css')
link(rel='stylesheet', href='/css/style.css')

link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:900")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css")

Expand Down
299 changes: 299 additions & 0 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* ‘consolas’, Fredericka the Great, cursive */
}


.navbar {
position: fixed;
width: 100%;
Expand All @@ -19,6 +21,11 @@
justify-content: space-around;
}

.abandon-game {
color: #f42020 !important;
margin-right: 20px;
}

.main-screen {
background-image: url("./images/background.png");
background-attachment: fixed;
Expand Down Expand Up @@ -201,6 +208,9 @@ text-align: right;
text-align: center;

}
.main-player-container {
margin: 4% auto;
}

.game-card {
text-align: center;
Expand All @@ -217,6 +227,10 @@ text-align: right;
margin: 2%;
}

.player-answer {
margin-top: 8% !important;
}

.brief-info {
padding-top: 3%;
color: #fff;
Expand All @@ -225,6 +239,10 @@ text-align: right;
line-height: 1.5;
}

.player-answer {
width: 100% !important;
}

.slide-hide-on-mobile {
display: none !important;
}
Expand Down Expand Up @@ -402,3 +420,284 @@ text-align: right;
.arrow:hover {
color: #fff;
}

/* Gaming screen */
.app-container {
min-height: 100vh;
width: 100%;
height: 100%;
font-family: 'cursive';
background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%);
}

.navbar1 {
width: 100%;
padding: 1% 3%;
}

.gameplay-container {
margin: 3% auto;
width: 100%;
height: 100%;
padding: 1% 1%;
border-radius: 7px;
border: 2px solid #bfbbbb;
}

.timer-container {
height: 100%;
width: 100%;
margin: 0 1%;
border-radius: 7px;
border: 3px solid #f47721;
color: black;
background-color: #fff
}

hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 3px solid #f47721;
}

.question-container-outer {
height: 100%;
margin: 0 1%;
width: 100%
}

.czar-card {
height: 100%;
width: 100%;
margin: 0 1%;
border-radius: 7px;
border: 2px solid black;
}

.czar-image {
height: 100%;
width: 100%;
cursor: pointer;
}

.social-bar-container {
height: 100%;
}

.player-answer {
width: 100%;
margin-top: 3%;
border-radius: 7px;
border: 2px solid black;
background-color: #fff;
color: black;
line-height: 2.8;
font-weight: bolder;
font-size: 18px
}

.main-player-container {
width: 100%;
background-color: #f47721;
padding: 2%;
border-radius: 5px;
}

.player-container {
border-radius: 10px;
border: 2px solid transparent;
margin: 2%;
background-color: #FFF !important;
height: 30%;
font-size: 12px;
font-weight: bold;
}

.timer-status-round {
padding: 4px;
font-weight: bolder;
word-wrap: break-word;
}

.time {
font-family: 'Cinzel Decorative', cursive;
font-size: 70px;
}

.start-game {
height: 100%;
border: 2px solid #604839;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
}

.btn-info {
background-color: #f47721!important;
color: #fff!important;
}

li {
cursor: pointer;
}

.component-wrapper {
height:100%;
}

.profile-icon {
background-color: #291c1f;
border-radius: 50%;
}

.lobby-how-to-play{
font-size: 25px;
font-weight: bolder
}
#notifications {
padding-top: 10px;
font-weight: bold
}

#finding-players {
padding-top: 10px
}

#user {
color: #f47721;
border-radius: 50%;
padding: 15px 17px;
}

.user-image {
width: 100%;
position: relative;
margin: 4% 0;
}

.arrange-player {
display: flex;
font-size: 13px;
width: 100%;
/* border-radius: 4px;
border: 2px solid transparent */
}
#player-container-inner {
display: flex;
align-items: center;
margin: 3% 0;
}

#active-user {
color: green;
}

.question-block {
height: 100%;
text-align: center
}

#question-text {
padding-top: 10%;
font-weight: bolder
}

#player-name {
padding: 0 5px;
flex: 0 0 60%;
}

#player-score {
flex: 0 0 20%;
}

#avatar_ {
flex: 0 0 20%;
}

#question-container-inner {
height: 100%;
}

#czar-blank-container {
text-align: center;
line-height: 1.8;
padding: 5px 0;
font-weight: bold;
}

#charity-fact-container {
margin: 5%;
border-radius: 4px;
border: 2px solid transparent;
background: #fff;
color: #000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
}

/* card-design */

.oldcard {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 17.5%;
height: 215px;
padding: 1%;
border: 2px solid;
margin: 1%;
background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%);
border-radius: 8px;
color: #fff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
vertical-align: top; }
@media (max-width: 520px) {
.oldcard {
font-size: 14px;
height: 115px;
word-wrap: break-word; } }
.oldcard.how-to {
font-size: 1.4rem; }
.oldcard #selection-number {
position: absolute;
bottom: 1px;
left: 7px;
font-size: 18px; }
.oldcard.black {
background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%);
border-color: #000;
color: #fff; }
.oldcard.longBlack {
background: linear-gradient(217deg, rgba(31, 16, 16, 0.95), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(70, 38, 16, 0.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(25, 8, 6, 0.8), rgba(45, 13, 3, 0.42)70.71%);
border-color: #000;
color: #000;
height: 100%;
width: 35.5em;
padding-left: 2%;
padding-right: 2%; }
.oldcard.smallest {
font-size: 0.750em; }
@media (max-width: 520px) {
.oldcard.smallest {
font-size: 10px; } }
.oldcard u {
position: relative;
content: '';
display: inline-block;
width: 25%;
text-decoration: none;
height: 1em;
border-bottom: 0.125em solid white;
margin-bottom: -0.125em; }
.oldcard u .small {
width: 25%; }
.oldcard u .big {
width: 75%; }
.oldcard u .end:after {
position: absolute;
right: -0.357em;
display: inline-block;
content: '.'; }
Binary file added public/img/landing/czar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 6 additions & 2 deletions public/js/controllers/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,12 @@ angular.module('mean.system')
};

$scope.startGame = function() {
$http.post('/api/games/'+$scope.game.gameID+'/start')
.then((res) => game.startGame());
if ($scope.isCustomGame()) {
$http.post('/api/games/'+$scope.game.gameID+'/start')
.then((res) => game.startGame());
} else {
game.startGame();
}
};

$scope.abandonGame = function() {
Expand Down
Loading

0 comments on commit 38100a2

Please sign in to comment.