Skip to content

Commit

Permalink
Major refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
andreasonny83 committed Apr 17, 2017
1 parent d2ad1eb commit 9e0cb87
Show file tree
Hide file tree
Showing 13 changed files with 125 additions and 58 deletions.
14 changes: 0 additions & 14 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,19 +101,6 @@ gulp.task('copy', function() {
.pipe(gulp.dest('./dist/'));
});

gulp.task('copy:prod', function() {
// rename and uglify config.prod.js if present
// otherwise use config.js
return gulp
.src([
'./src/app/config.js',
'./src/app/config.prod.js'
])
.pipe($.rename('config.js'))
.pipe($.uglify())
.pipe(gulp.dest('./dist/js/'));
});

gulp.task('move:dist', function() {
// rename and uglify config.prod.js if present
// otherwise use config.js
Expand Down Expand Up @@ -251,7 +238,6 @@ gulp.task('build', function(callback) {
'templates',
'usemin',
'version',
'copy:prod',
callback);
});

Expand Down
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "carcassonne-scoreboard-client",
"version": "1.2.0",
"version": "1.3.0",
"author": "Andrea Sonny <[email protected]>",
"description": "Online Scoreboard for the famous boardgame Carcassonne",
"main": "index.js",
Expand All @@ -18,11 +18,13 @@
"scripts": {
"bower": "bower",
"postinstall": "bower install",
"test": "./node_modules/.bin/karma start karma.conf.js --single-run --browsers PhantomJS",
"karma": "karma",
"test": "karma start karma.conf.js --single-run --browsers PhantomJS",
"start": "gulp serve",
"build": "gulp build",
"nodemon": "nodemon",
"preserve:dist": "gulp build",
"serve:dist": "gulp serve:dist",
"serve:dist": "nodemon dist/index.js",
"heroku-postbuild": "gulp deploy"
},
"contributors": [],
Expand Down
14 changes: 8 additions & 6 deletions src/app/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
(function() {
'use strict';

var env = {};

// Import variables if present (from env.js)
if (window) {
Object.assign(env, window.__env);
}

angular
.module('app')
.constant('serverApp', {
server : 'https://carcassonne-scoreboard.herokuapp.com', // server
port : 443
// server : 'http://localhost',
// port : 5000
});
.constant('serverApp', env);
})();
11 changes: 9 additions & 2 deletions src/app/game/game.controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
.module('app')
.controller('GameController', GameController);

GameController.$inject = ['$scope', '$location', '$routeParams', '$mdToast', '$mdDialog', 'gameType', 'socket'];
GameController.$inject = ['$anchorScroll', '$scope', '$location', '$routeParams', '$mdToast', '$mdDialog', 'gameType', 'socket'];

/* @ngInject */
function GameController($scope, $location, $routeParams, $mdToast, $mdDialog, gameType, socket) {
function GameController($anchorScroll, $scope, $location, $routeParams, $mdToast, $mdDialog, gameType, socket) {
var vm = this,
new_game = {
name: 'New game',
Expand Down Expand Up @@ -68,6 +68,13 @@
color: assignRndMeeple(),
score: 0
});

var body = document.querySelector('div.page');

setTimeout(function() {
body.scrollTop = body.scrollHeight;
document.querySelector('#player_' + vm.game.players.length + ' input').focus();
}, 0);
}

vm.removePlayer = function(key) {
Expand Down
22 changes: 13 additions & 9 deletions src/app/game/game.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="page-header-sub">
<md-content>
<section layout="row" layout-align="start start" layout-align-sm="center center" layout-wrap>
<md-button flex-xs="100" flex-sm="auto" flex-md="nogrow" class="md-raised cs-button-back" ng-click="mainCtrl.goTo('/')" tabindex="17">Home</md-button>
<md-button flex-xs="100" flex-sm="auto" flex-md="nogrow" class="md-raised cs-button-back" ng-hide="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()" tabindex="16">Resume</md-button>
<md-button flex-xs="100" flex-sm="auto" flex-md="nogrow" class="md-raised cs-button-back" ng-click="mainCtrl.goTo('/')">Home</md-button>
<md-button flex-xs="100" flex-sm="auto" flex-md="nogrow" class="md-raised cs-button-back" ng-hide="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()">Resume</md-button>
</section>
</md-content>
<h2 class="home">{{gameCtrl.game.name}}</h2>
Expand All @@ -22,7 +22,7 @@ <h2 class="section-title">Game name</h2>
<div layout="row" layout-align="center">
<md-input-container flex="50">
<label>Game name</label>
<input ng-model="gameCtrl.game.name" tabindex="1">
<input ng-model="gameCtrl.game.name" md-autofocus>
</md-input-container>
</div>

Expand All @@ -32,16 +32,20 @@ <h2 class="section-title">Players</h2>
<md-divider></md-divider>

<!-- User list -->
<md-list-item class="md-3-line md-no-proxy secondary-button-padding md-with-secondary" ng-repeat="(key, player) in gameCtrl.game.players">
<md-list-item class="md-3-line md-no-proxy secondary-button-padding md-with-secondary"
ng-repeat="(key, player) in gameCtrl.game.players"
id="player_{{key+1}}">
<div class="md-list-item-text">
<md-input-container class="input-container">
<label>Player name</label>
<input ng-model="player.name" tabindex="{{key + (key + 3)}}">
<input ng-model="player.name"
ng-focus="$event.target.select()"
md-autofocus>
</md-input-container>

<md-input-container class="input-container">
<label>Player color</label>
<md-select ng-model="player.color" tabindex="{{key + (key + 4)}}">
<md-select ng-model="player.color">
<md-option ng-repeat="meeple in gameCtrl.game.meeples" value="{{meeple}}">
{{meeple}}
</md-option>
Expand All @@ -62,14 +66,14 @@ <h2 class="section-title">Players</h2>
</md-list>
<!-- User list End -->

<md-button class="md-raised cs-button-primary cs-button-md" ng-click="gameCtrl.addPlayer()" tabindex="2">Add player</md-button>
<md-button class="md-raised cs-button-primary cs-button-md" ng-click="gameCtrl.addPlayer()">Add player</md-button>

</md-card-content>

<md-card-actions layout="row" layout-align="end center">
<md-button class="cs-alert" ng-click="gameCtrl.deleteGame()">Delete game</md-button>
<md-button ng-hide="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()" tabindex="16">Resume Game</md-button>
<md-button ng-show="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()" tabindex="16">Start Game</md-button>
<md-button ng-hide="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()">Resume Game</md-button>
<md-button ng-show="{{gameCtrl.new_game}}" ng-click="gameCtrl.startGame()">Start Game</md-button>
</md-card-actions>
</md-card>
</section>
1 change: 0 additions & 1 deletion src/app/page-footer/page-footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<div class="row">
<p>Carcassonne Online Scoreboard %%GULP_INJECT_VERSION%%</p>
<p>Proudly developed by <a href="https://github.com/andreasonny83" alt="andreasonny83 on GitHub">&lt;SonnY&gt;</a>. All Rights Reserved</p>
<p>This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies. <a href="#/privacy-policy" alt="andreasonny83 on GitHub">Find out more</a>.</p>
</div>
</div>
</footer>
34 changes: 30 additions & 4 deletions src/css/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 10 additions & 8 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@
<!-- endbuild -->
<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>

<!-- Load environment variables -->
<script src="env.js"></script>

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand All @@ -101,12 +104,14 @@
</div>
</div>

<page-header></page-header>
<div id="app">
<page-header></page-header>

<!-- Main view for templates -->
<div ng-view class="page" autoscroll="true"></div>
<!-- Main view for templates -->
<div ng-view class="page" autoscroll="true"></div>

<page-footer></page-footer>
<page-footer></page-footer>
</div>

<!-- Non-angular libraries -->
<!-- build:libs js/libs.js -->
Expand All @@ -125,14 +130,11 @@

<!-- build:appcomponents js/appcomponents.js -->
<script src="app/app.js"></script>
<script src="app/config.js"></script>
<script src="app/page-header/page-header.directive.js"></script>
<script src="app/page-footer/page-footer.directive.js"></script>
<!-- endbuild -->

<!-- build:angularconfig js/config.js -->
<script src="app/config.js"></script>
<!-- endbuild -->

<!-- build:mainapp js/mainapp.js -->
<!-- Services -->
<script src="app/services/socket.js"></script>
Expand Down
19 changes: 19 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,25 @@ app.get('/', function(req, res) {
res.sendFile('index.html');
});

// dynamic config vars are fetched from global environment variables, if any
app.get('/env.js', function(req, res) {
res.send(`
(function (window) {
window.__env = window.__env || {};
// API url
window.__env.server = "${process.env.API_URL || 'http://localhost'}";
// API port number
window.__env.port = ${process.env.API_PORT || 5000};
// Whether or not to enable debug mode
// Setting this to false will disable console output
window.__env.enableDebug = ${process.env.DEBUG || false};
}(this));
`);
});

app.listen(port, function() {
console.log('Client app listening on port ' + port);
});
6 changes: 5 additions & 1 deletion src/sass/modules/_page-footer.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.footer {
padding: 30px 0 15px;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 0;
Expand All @@ -8,6 +8,10 @@
background-color: rgb(251, 245, 223);
text-align: center;

@media all and (min-height: $break-large) {
padding: 30px 0 15px;
}

p {
padding: 0 10px 5px 10px;
margin: 0;
Expand Down
6 changes: 4 additions & 2 deletions src/sass/modules/_page-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@
h1 {
font-size: 32px;

@media screen and (max-width: $break-large) {
@media all and (max-width: $break-large),
all and (max-height: $break-large) {
font-size: 26px;
}
}

.desc {
@media screen and (max-width: $break-large) {
@media all and (max-width: $break-large),
all and (max-height: $break-large) {
display: none;
}
}
Expand Down
20 changes: 19 additions & 1 deletion src/sass/partials/_helpers.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
body {
overflow: hidden;
}

#app {
height: 100%;
}

.page.ng-scope {
margin-bottom: 140px;
overflow-y: auto;
position: absolute;
left: 0;
top: 65px;
bottom: 59px;
width: 100%;

@media all and (min-height: $break-large) {
top: 114px;
bottom: 84px;
}
}

section {
Expand Down
10 changes: 3 additions & 7 deletions src/sw.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var CACHE_NAME = 'carcassonne-scoreboard-client::v6';
var CACHE_NAME = 'carcassonne-scoreboard-client::v7';
// The files we want to cache
var urlsToCache = [
'/',
Expand All @@ -7,14 +7,10 @@ var urlsToCache = [
'js/angularlibs.js',
'js/libs.js',
'js/appcomponents.js',
'js/config.js',
'js/mainapp.js',
'js/templates.js',
'fonts/carcassonne-scoreboard-font/carcassonne-scoreboard-font.eot',
'fonts/carcassonne-scoreboard-font/carcassonne-scoreboard-font.ttf',
'fonts/carcassonne-scoreboard-font/carcassonne-scoreboard-font.woff',
'fonts/carcassonne-scoreboard-font/carcassonne-scoreboard-font.woff2',
'fonts/carcassonne-scoreboard-font/carcassonne-scoreboard-font.svg'
'images/*.*',
'fonts/carcassonne-scoreboard-font/*.*'
];

// Set the callback for the install step
Expand Down

0 comments on commit 9e0cb87

Please sign in to comment.