Skip to content

Commit 9dc795b

Browse files
mwunderlmwunderl
committed
Merge branch 'master' into xray-gettingstarted
2 parents 9908787 + 2cab818 commit 9dc795b

File tree

3 files changed

+155
-19
lines changed

3 files changed

+155
-19
lines changed

‎public/css/scorekeep.css‎

Lines changed: 120 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,121 @@
1-
/* Main page */
2-
#main, #session {
1+
/*
2+
* Base structure
3+
*/
4+
5+
html,
6+
body {
7+
height: 100%;
8+
background-color: #fff;
9+
}
10+
body {
11+
color: #000;
312
text-align: center;
4-
width: 300px;
5-
padding: 10px;
6-
margin: 10px;
7-
position: absolute;
8-
left: 10px;
913
}
10-
#game {
14+
15+
/* Extra markup and styles for table-esque vertical and horizontal centering */
16+
.site-wrapper {
17+
display: table;
18+
width: 100%;
19+
height: 100%; /* For at least Firefox */
20+
min-height: 100%;
21+
}
22+
.site-wrapper-inner {
23+
display: table-cell;
24+
}
25+
.cover-container {
26+
margin-right: auto;
27+
margin-left: auto;
28+
margin-top: 75px;
29+
}
30+
31+
/* Padding for spacing */
32+
.inner {
33+
padding: 2rem;
34+
}
35+
36+
/*
37+
* Header
38+
*/
39+
40+
.masthead {
41+
margin-bottom: 15px;
42+
padding-bottom: 10px;
43+
background-color: #fff;
44+
}
45+
46+
.masthead-brand {
47+
margin-bottom: 0;
48+
}
49+
50+
.nav-masthead .nav-link {
51+
padding: .25rem 0;
52+
font-weight: bold;
53+
color: #FF851B;
54+
}
55+
56+
.nav-masthead .nav-link + .nav-link {
57+
margin-left: 1rem;
58+
}
59+
60+
.nav-masthead .active {
61+
color: #000;
62+
}
63+
64+
@media (min-width: 48em) {
65+
.masthead-brand {
66+
float: left;
67+
}
68+
.nav-masthead {
69+
float: right;
70+
}
71+
}
72+
73+
74+
/*
75+
* Cover
76+
*/
77+
78+
.cover {
79+
padding: 0 1.5rem;
80+
}
81+
.cover .btn-lg {
82+
padding: .75rem 1.25rem;
83+
font-weight: bold;
84+
}
85+
86+
/*
87+
* Affix and center
88+
*/
89+
90+
@media (min-width: 40em) {
91+
/* Pull out the header */
92+
.masthead {
93+
position: fixed;
94+
top: 0;
95+
}
96+
/* Handle the widths */
97+
.masthead,
98+
.cover-container {
99+
width: 100%; /* Must be percentage or pixels for horizontal alignment */
100+
}
101+
}
102+
103+
@media (min-width: 62em) {
104+
.masthead,
105+
.cover-container {
106+
width: 42rem;
107+
}
108+
}
109+
/* Main page */
110+
#instructions {
111+
display: none;
112+
margin-top: 75px;
113+
}
114+
#main, #session, #game {
11115
text-align: center;
12116
width: 350px;
13117
padding: 10px;
14-
margin: 10px;
15-
position: absolute;
16-
left: 10px;
118+
margin: auto;
17119
}
18120
.session-game {
19121
text-align: left;
@@ -43,7 +145,7 @@
43145
.button {
44146
background-color: #f39c12;
45147
width: 100px;
46-
margin-left: 128px;
148+
margin-left: 176px;
47149
margin-top: 10px;
48150
border-radius: 5px;
49151
border-width: 2px;
@@ -85,11 +187,13 @@ input {
85187
font-size: 20px;
86188
text-align: left;
87189
}
190+
#session-id {
191+
width: auto;
192+
text-align: left;
193+
padding-left: 10px;
194+
}
88195
#user {
89-
position: absolute;
90-
right: 0;
91-
top: 0;
92-
padding-top: 15px;
196+
float: right;
93197
}
94198
#rules-select {
95199
display: inline-block;

‎public/index.html‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,41 @@
2424
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.js"></script>
2525
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
2626
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
27+
<script>
28+
function showhide(div) {
29+
if ( document.getElementById(div).style.display == 'block') {
30+
document.getElementById(div).style.display = 'none';
31+
}
32+
else {
33+
document.getElementById(div).style.display = 'block';
34+
}
35+
}
36+
</script>
2737
</head>
2838

2939
<body>
30-
<div class="navbar">Scorekeep</div>
31-
<div ng-view></div>
40+
<div class="site-wrapper">
41+
<div class="site-wrapper-inner">
42+
<div class="cover-container">
43+
<div class="masthead clearfix">
44+
<div class="inner">
45+
<h3 class="masthead-brand">Scorekeep</h3>
46+
<nav class="nav nav-masthead">
47+
<a class="nav-link" href='#/' onclick="showhide('instructions');return false;">Instructions</a>
48+
<a class="nav-link" target="blank" href="https://aws.amazon.com/elasticbeanstalk/">Powered by AWS Elastic Beanstalk</a>
49+
</nav>
50+
</div>
51+
</div>
52+
<div class="inner cover" id="instructions">
53+
<h3 class="cover-heading">Using the web app</h1>
54+
<p>Use the form below to create a user and session. When you click <b>Create</b>, the web app calls the Scorekeep API to create a user and a session, and joins the session lobby. If you don't enter a username, Scorekeep calls a separate web API to generate a random name.</p>
55+
<p>To create and join a second user to the session, open the web app in a second tab, enter the session ID shown in the lobby, and click <b>Join</b>.</p>
56+
<p>In the session lobby, enter a game name, and set the rules to <b>Tic Tac Toe</b>. Click <b>Create</b> to create a game. Open the networking tab in your browser's developer tools to see the calls that the web app makes to the API to keep the list of games up-to-date.</p>
57+
<p>Choose <b>Play</b> with each user to start the game.</p>
58+
</div>
59+
<div ng-view></div>
60+
</div>
61+
</div>
62+
</div>
3263
</body>
3364
</html>

‎public/session.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div id="session">
2-
<div class="session-header">{{ session.name }}</div>
32
<div id="user"><h6>{{ user.name}}</h6></div>
3+
<div class="session-header">{{ session.name }}</div>
4+
<div id="session-id">Session ID: {{ session.id }}</div>
45
<div class="sub-header">Create a game</div>
56
<div id="create-game-form">
67
<form name="create-game">

0 commit comments

Comments
 (0)