diff --git a/README.md b/README.md index b2b47a7..bf12e4a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,12 @@ # HTML-Client HTML/CSS/JS-based client for Cardshifter + +####Primary authors: +- @SirPython: JavaScript, AngularJS +- @Phrancis: HTML, CSS + +For more information about the Cardshifter project, see: + +- [Official website](http://stats.zomis.net/io-web) + +- [Primary repository on GitHub](https://github.com/Cardshifter/Cardshifter) \ No newline at end of file diff --git a/cardshifter.css b/cardshifter.css index 014b6e6..d114500 100644 --- a/cardshifter.css +++ b/cardshifter.css @@ -39,7 +39,7 @@ a.csh-dropdown-link:visited { a.csh-dropdown-link:hover, a.csh-dropdown-link:active { color: #DDDDDD; - text-decoration: underline; + /*text-decoration: underline;*/ font-family: Georgia, Times, "Times New Roman", serif; } @@ -73,45 +73,16 @@ a.csh-dropdown-link:active { } -/* FORMATTING FOR LEFT SIDE NAV MENU */ - -.csh-left-menu-main { - font-size: 1.4em; - font-weight: bold; - padding-top: 3px; - color: #000000; - margin: 0px; -} +/* FORMATTING FOR SERVER CONSOLE */ -.csh-left-menu-sub { - font-size: 1.2em; +div#server-console { + font-family: Monaco, Consolas, "Courier New", monospace; + font-size: 1.0em; font-weight: normal; - padding-left: 15px; - padding-top: 3px; - color: #000000; - margin: 0px; -} - - -.csh-nav-link { - color: #000000; -} - -.csh-nav-link:hover -.csh-nav-link:active { - color: #000000; - text-decoration: underline; -} - -.csh-side-nav { - margin-top: 25px; - background-color: #EEEEEE; - padding-bottom: 5px; -} - - -.csh-margin-top { - margin-top: 50px; + color: #AAAAAA; + background-color: #222222; + height: 250px; + overflow: scroll; } /* FORMATTING FOR PAGE BODY */ @@ -162,13 +133,13 @@ p, span, table, ul, ol { } pre { - font-family: Consolas, Monaco, "Courier New", monospace; + font-family: Monaco, Consolas, "Courier New", monospace; font-size: 1.1em; font-weight: normal; } code { - font-family: Consolas, Monaco, "Courier New", monospace; + font-family: Monaco, Consolas, "Courier New", monospace; font-size: 1.1em; color: #336699; background-color: #EEEEEE; @@ -187,7 +158,7 @@ div.contributor { /* MOD-SPECIFIC FORMATTING */ .cyborg-font { - font-family: Consolas, Monaco, "Courier New", monospace; + font-family: Monaco, Consolas, "Courier New", monospace; } .mythos-font { diff --git a/cardshifter.html b/cardshifter.html index f3bd026..6b896b9 100644 --- a/cardshifter.html +++ b/cardshifter.html @@ -1,41 +1,37 @@ - - Cardshifter + + Cardshifter - - + + - - + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +
+ +
- -
- - + - +
+ diff --git a/cardshifter.js b/cardshifter.js index c53e9fc..a02a2bb 100644 --- a/cardshifter.js +++ b/cardshifter.js @@ -9,6 +9,5 @@ CardshifterApp.config(function($routeProvider) { .when("/lobby", { controller: "LobbyController", templateUrl: "lobby/lobby.html", - css: "lobby/lobby.css" }) }); \ No newline at end of file diff --git a/console/console.html b/console/console.html new file mode 100644 index 0000000..2bde144 --- /dev/null +++ b/console/console.html @@ -0,0 +1,41 @@ + + +
+ +
+

Server Console

+
+ + +
+ + 1 Hello, world!
+ 2 Hello, world!
+ 3 Hello, world!
+ 4 Hello, world!
+ 5 Hello, world!
+ 6 Hello, world!
+ 7 Hello, world!
+ 8 Hello, world!
+ 9 Hello, world!
+ 10 Hello, world!
+ 11 Hello, world!
+ 12 Hello, world!
+ 13 Hello, world!
+ 14 Hello, world!
+ 15 Hello, world!
+ 16 Hello, world!
+ 17 Hello, world!
+ 18 Hello, world!
+ 19 Hello, world!
+ 20 Hello, world!
+ 21 Hello, world!
+ 22 Hello, world!
+ 23 Hello, world!
+
+ +
\ No newline at end of file diff --git a/lobby/lobby.css b/lobby/lobby.css new file mode 100644 index 0000000..7205c92 --- /dev/null +++ b/lobby/lobby.css @@ -0,0 +1,106 @@ +/* WHOLE LOBBY */ + +#lobby { + width: 100%; +} + +/* TABLE HEADERS */ + +#lobby-headers { + font-family: Georgia, Times, "Times New Roman", serif; + text-align: center; + color: #DDDDDD; + background-color: #000000; + +} + +#lobby-title { + font-size: 1.5em; + font-weight: bold; +} + +#lobby-deck-builder {} + +/* SECTION HEADERS */ + +#lobby-list-headers { + font-family: Georgia, Times, "Times New Roman", serif; + font-size: 1.2em; +} + +#lobby-message-list-header { + text-align: center; +} + +#lobby-users-list-header { + text-align: center; +} + +/* MAIN MESSAGE & USERS SECTIONS */ + +#lobby-lists { + vertical-align: text-top; +} + +#lobby-message-list { + font-size: 0.8em; !important +} + /* List of all messages */ + #lobby-chat-messages { + list-style-type: none; + padding-left: 0; + } + /* Each individual message line */ + #lobby-chat-message { + } + +#lobby-users-list { + font-size: 0.9em; + font-family: Georgia, Times, "Times New Roman", serif; +} + /* List of all users */ + #lobby-users { + list-style-type: none; + padding-left: 0; + } + /* Each individual user line */ + #lobby-user { + } + +/* FOOTER SECTIONS */ + +#lobby-message { + background-color: #000000; + vertical-align: bottom; +} + /* TEXT AREA FOR TYPING CHAT MESSAGES*/ + #lobby-chat-text-area { + outline: none; + overflow: auto; + vertical-align: middle; + } + +#lobby-invite { + background-color: #000000; + text-align: center; +} + +#lobby-mods {} + +#lobby-mod-selection {} + + /* DIV CONTAINING RADIO BUTTON AND MOD NAME */ + #lobby-mod-selector { + border: 1; + } + +/* Game invite accept dialog */ +#lobby-invite-request { + font-family: Georgia, Times, "Times New Roman", serif; + font-size: 1.6em; + text-align: center; + background-color: #0033CC; + color: #EEEEEE; + border-top-color: #FFFFFF; + vertical-align: middle; +} diff --git a/lobby/lobby.html b/lobby/lobby.html index 548190e..6759b52 100644 --- a/lobby/lobby.html +++ b/lobby/lobby.html @@ -1,29 +1,63 @@ -
-
-

Online users:

- - -
- Game invite from {{invite.name}} to play {{invite.type}} - - -
-

Chat:

- -
- {{mod}}: -
-
- - -
-
-
\ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + +
Cardshifter Lobby
+
+ Game invite from {{invite.name}} to play {{invite.type}}!
+ + +
+
MessagesUsers Online
+
    +
  • + [{{message.timestamp}}] {{message.from}}: {{message.message}} +
    • +
+ 		+
    +
  • + {{user.name}} +
    • +
+
+ + + + +
+
+
+ +
+ + {{mod}} +
+
+
+
diff --git a/lobby/lobby_controller.js b/lobby/lobby_controller.js index 37a8729..b3f3158 100644 --- a/lobby/lobby_controller.js +++ b/lobby/lobby_controller.js @@ -2,6 +2,7 @@ CardshifterApp.controller("LobbyController", function($scope, $timeout) { var CHAT_FEED_LIMIT = 10; var ENTER_KEY = 13; var MESSAGE_DELAY = 3000; + var ENTER_KEY = 13; $scope.users = []; $scope.chatMessages = []; @@ -14,6 +15,7 @@ CardshifterApp.controller("LobbyController", function($scope, $timeout) { }; $scope.gotInvite = false; + var commandMap = { "userstatus": updateUserList, "chat": addChatMessage, @@ -44,6 +46,7 @@ CardshifterApp.controller("LobbyController", function($scope, $timeout) { $scope.sending = false; }, MESSAGE_DELAY); } + $scope.startGame = function() { if($scope.selected_mod && $scope.selected_opponent) { var startGame = new CardshifterServerAPI.messageTypes.StartGameRequest($scope.selected_opponent, @@ -54,6 +57,7 @@ CardshifterApp.controller("LobbyController", function($scope, $timeout) { console.log("need to choose mod and/or opponent"); } } + $scope.acceptInvite = function(accept) { var accept = new CardshifterServerAPI.messageTypes.InviteResponse($scope.invite.id, accept); CardshifterServerAPI.sendMessage(accept); diff --git a/login/login.html b/login/login.html index a87303c..2d6697e 100644 --- a/login/login.html +++ b/login/login.html @@ -1,6 +1,6 @@ -
+ @@ -54,7 +54,7 @@

Cyborg Chronicles

  • Cards

    • -

    Mythos

    +

    MYTHOS

    Magical and Mythical Creatures clash while Gods, Goddesses and Heroes of Legend fight for human worship.

    -