diff --git a/site/client/app/modules/deck-builder/components/deck-builder.js b/site/client/app/modules/deck-builder/components/deck-builder.js index 45f4581..3754d25 100644 --- a/site/client/app/modules/deck-builder/components/deck-builder.js +++ b/site/client/app/modules/deck-builder/components/deck-builder.js @@ -1,5 +1,35 @@ +var cards = require("../../../../../../assets/data/cards"); +var deck = require("../../../../../../assets/data/deck"); + module.exports = { - template: require('../views/deck-builder.html') + template: require('../views/deck-builder.html'), + data: function() { + return { + cards: [], + deck: [] + } + }, + + ready: function() { + this.cards = $.map(cards, function(n) { + if(n.faction == 'Northern Realm' && n.type != 3) return n; + }); + + $.map(deck, (n, i) => { + if(i == 'northern_realm') { + for(var m in n) { + //console.log(this.cards[m].type); + this.deck.push(this.cards[m]); + } + } + }); + }, + + filters: { + leader: function(deck) { + //return deck.type == 3 ? deck : 'ne'; + } + } }; \ No newline at end of file diff --git a/site/client/app/modules/deck-builder/views/deck-builder.html b/site/client/app/modules/deck-builder/views/deck-builder.html index b5c5998..f489ce8 100644 --- a/site/client/app/modules/deck-builder/views/deck-builder.html +++ b/site/client/app/modules/deck-builder/views/deck-builder.html @@ -1 +1,33 @@ -deckbuilder \ No newline at end of file +
Nord Deck
+ +
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+ + + +

{{ leader.name }}

+ + \ No newline at end of file diff --git a/site/client/app/modules/lobby/views/lobby.html b/site/client/app/modules/lobby/views/lobby.html index 5017619..8b13789 100644 --- a/site/client/app/modules/lobby/views/lobby.html +++ b/site/client/app/modules/lobby/views/lobby.html @@ -1,187 +1 @@ - - -
-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
-
- - \ No newline at end of file diff --git a/site/client/assets/sass/_base.scss b/site/client/assets/sass/_base.scss index 00a0a73..d14a489 100644 --- a/site/client/assets/sass/_base.scss +++ b/site/client/assets/sass/_base.scss @@ -11,6 +11,7 @@ body { body { width: 100%; min-width: 1000px; + overflow: hidden; font-family: 'Titillium Web', sans-serif; } diff --git a/site/client/assets/sass/_inner.scss b/site/client/assets/sass/_inner.scss index 4320c68..e403208 100644 --- a/site/client/assets/sass/_inner.scss +++ b/site/client/assets/sass/_inner.scss @@ -18,7 +18,7 @@ main { float: left; width: 100%; padding: 20px; - height: calc(100vh - 200px); + height: calc(100vh - 150px); min-height: 400px; clear: both; diff --git a/site/client/assets/sass/_shame_cards.scss b/site/client/assets/sass/_shame_cards.scss new file mode 100644 index 0000000..de56eab --- /dev/null +++ b/site/client/assets/sass/_shame_cards.scss @@ -0,0 +1,227 @@ +.card-img { + background-size: 120px 227px; + width: 120px; + height: 227px; +} + +.card { + float: left; + border-radius: 12px; + position: relative; + z-index: 10; + top: 3px; + left: 3px; +} + +.bla { + border-radius: 14px; + width: 100%; + height: 100%; + position: absolute; + opacity: 0; +} + +.card-wrap:hover .bla { + box-shadow: 0 0 2px 0 orange; + opacity: 1; +} + +.shadow { + border-radius: 35%; + box-shadow: 0 0 15px 14px #ffa500; + content: ""; + height: calc(100% - 50px); + left: 15px; + position: absolute; + width: calc(100% - 22px); + z-index: 1; + top: 30px; + transition: all 0.3s ease-in-out 0s; + opacity: 0; +} + +.card-wrap:hover .shadow { + -webkit-animation: Shadow 4s ease-in-out infinite; + -moz-animation: Shadow 4s ease-in-out infinite; + animation: Shadow 4s ease-in-out infinite; +} + +.ani { + background: linear-gradient(2deg, #000, #000, #000, #000);; + transition: all .05s ease-in-out 0s; +} + +.card-wrap .ani { + background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500); + background-size: 800% 800%; + + -webkit-animation: AnimationName 3s ease infinite; + -moz-animation: AnimationName 3s ease infinite; + animation: AnimationName 3s ease infinite; +} + +@-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +@-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +@keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +.overlay-card { + background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05)); + background-size: 800% 800%; + position: absolute; + z-index: 20; + top: 10px; + left: 10px; + width: calc(100% - 10px); + height: calc(100% - 5px); + border-radius: 12px; + opacity: 0; + cursor: pointer; +} + +.card-wrap:hover .overlay-card { + opacity: 1; + -webkit-animation: AnimationName 10s ease infinite; + -moz-animation: AnimationName 10s ease infinite; + animation: AnimationName 10s ease infinite; +} + +@-webkit-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} +@-moz-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} +@keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} + +.card-wrap { + float: left; + width: 126px; + height: 233px; + position: relative; + padding: 4px; + + //transition: transform .1s ease-in-out 0s; + +} + +.card-wrap:hover { + z-index: 100; + //transform: scale(1.01,1.01) !important; +} + +/** + * DECK BUILDER + */ + +.all-cards { + float: left; + width: calc(100% + 50px); + height: 100%; + overflow-y: auto; + //padding: 40px; +} + +.all-cards-wrap { + overflow: hidden; + width: 53%; + float: left; + height: calc(100% + 40px); + padding: 0 20px; + margin: -100px 0 0 0; +} + +.test { + height: 100%; +} + +.line { + background: -moz-linear-gradient(top, rgba(64,150,238,0) 0%, rgba(58,73,96,1) 52%, rgba(64,150,238,0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,150,238,0)), color-stop(52%,rgba(58,73,96,1)), color-stop(100%,rgba(64,150,238,0))); + background: -webkit-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%); + background: -o-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%); + background: -ms-linear-gradient(top, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%); + background: linear-gradient(to bottom, rgba(64,150,238,0) 0%,rgba(58,73,96,1) 52%,rgba(64,150,238,0) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004096ee', endColorstr='#004096ee',GradientType=0 ); + + width: 2px; + height: 100%; + float: left; +} + +.heading { + float: left; + width: 100%; + position: relative; + z-index: 1000; + padding: 25px 0; + //background: rgba(#080d14, .95); + + background: -moz-linear-gradient(top, rgba(8,13,20,1) 0%, rgba(8,13,20,1) 36%, rgba(8,13,20,0.85) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(8,13,20,1)), color-stop(36%,rgba(8,13,20,1)), color-stop(100%,rgba(8,13,20,0.85))); + background: -webkit-linear-gradient(top, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%); + background: -o-linear-gradient(top, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%); + background: -ms-linear-gradient(top, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%); + background: linear-gradient(to bottom, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080d14', endColorstr='#d9080d14',GradientType=0 ); +} + +.clear-space { + float: left; + width: 100%; + height: 100px; +} \ No newline at end of file diff --git a/site/client/assets/sass/_shame_cards_copy.scss b/site/client/assets/sass/_shame_cards_copy.scss new file mode 100644 index 0000000..c79c06e --- /dev/null +++ b/site/client/assets/sass/_shame_cards_copy.scss @@ -0,0 +1,155 @@ +.card { + float: left; + border-radius: 12px; + position: relative; + z-index: 10; + top: 5px; + left: 5px; +} + +.bla { + border-radius: 14px; + width: 100%; + height: 100%; + position: absolute; + opacity: 0; +} + +.card-wrap:hover .bla { + box-shadow: 0 0 2px 0 orange; + opacity: 1; +} + +.shadow { + border-radius: 35%; + box-shadow: 0 0 15px 14px #ffa500; + content: ""; + height: calc(100% - 50px); + left: 15px; + position: absolute; + width: calc(100% - 22px); + z-index: 1; + top: 30px; + transition: all 0.3s ease-in-out 0s; + opacity: 0; +} + +.card-wrap:hover .shadow { + -webkit-animation: Shadow 4s ease-in-out infinite; + -moz-animation: Shadow 4s ease-in-out infinite; + animation: Shadow 4s ease-in-out infinite; +} + +.ani { + background: linear-gradient(2deg, #000, #000, #000, #000);; + transition: all .05s ease-in-out 0s; +} + +.card-wrap .ani { + background: linear-gradient(2deg, #ffa500, #ffd68b, #ffa500, #ffa500); + background-size: 800% 800%; + + -webkit-animation: AnimationName 3s ease infinite; + -moz-animation: AnimationName 3s ease infinite; + animation: AnimationName 3s ease infinite; +} + +@-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +@-webkit-keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +@keyframes Shadow { + 0% { + opacity: 0; + } + 25% { + opacity: .5; + } + 50%{ + opacity: 1; + } + 75% { + opacity: .5; + } + 100%{ opacity: 0; + } +} + +.overlay-card { + background: linear-gradient(2deg, rgba(255,255,255,.03), rgba(255,255,255,.2), rgba(255,255,255,.05)); + background-size: 800% 800%; + position: absolute; + z-index: 20; + top: 10px; + left: 10px; + width: calc(100% - 10px); + height: calc(100% - 5px); + border-radius: 12px; + opacity: 0; + cursor: pointer; +} + +.card-wrap:hover .overlay-card { + opacity: 1; + -webkit-animation: AnimationName 10s ease infinite; + -moz-animation: AnimationName 10s ease infinite; + animation: AnimationName 10s ease infinite; +} + +@-webkit-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} +@-moz-keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} +@keyframes AnimationName { + 0%{background-position:51% 0%} + 50%{background-position:50% 100%} + 100%{background-position:51% 0%} +} + +.card-wrap { + float: left; + width: 160px; + height: 294px; + position: relative; + padding: 4px; +} + +.card-wrap:hover { + z-index: 100; +} \ No newline at end of file diff --git a/site/client/assets/sass/app.scss b/site/client/assets/sass/app.scss index b27e07e..b5b47e2 100644 --- a/site/client/assets/sass/app.scss +++ b/site/client/assets/sass/app.scss @@ -11,4 +11,6 @@ 'landing', 'inner', 'nav', -'chat'; \ No newline at end of file +'chat', + +'shame_cards'; \ No newline at end of file diff --git a/site/server/config/database.php b/site/server/config/database.php index f6cf86b..d9d4ddd 100755 --- a/site/server/config/database.php +++ b/site/server/config/database.php @@ -58,6 +58,7 @@ return [ 'database' => env('DB_DATABASE', 'forge'), 'username' => env('DB_USERNAME', 'forge'), 'password' => env('DB_PASSWORD', ''), + 'unix_socket' => '/Applications/MAMP/tmp/mysql/mysql.sock', 'charset' => 'utf8', 'collation' => 'utf8_unicode_ci', 'prefix' => '',