Skip to content

Commit 4a15216

Browse files
ttaylordevttaylordev
committed
restyled mountain, added time of day/aspect functionality, trees will appear shadier on shadier aspects of the mountain as the day moves on. The sky changes color to depict time of day,. the grass does as well.
1 parent 39c09f4 commit 4a15216

File tree

5 files changed

+1063
-122
lines changed

5 files changed

+1063
-122
lines changed

‎main/home/homeTemplate.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</g>
3535
</svg> -->
3636

37-
</div> -->
37+
<!-- </div> -->
3838

3939

4040
<mountain-directive></mountain-directive>

‎public/html/home/homeTemplate.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<navigation-directive></navigation-directive>
2+
3+
<div id="home-wrapper">
4+
5+
6+
<!-- <div class="home-top"> -->
7+
8+
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In -->
9+
<!-- <svg version="1.1"
10+
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
11+
x="0px" y="0px" width="521.8px" height="536.1px" viewBox="0 0 521.8 536.1" style="enable-background:new 0 0 521.8 536.1;"
12+
xml:space="preserve">
13+
<style type="text/css">
14+
.st0{fill:#406BB2;}
15+
.st1{fill:#203659;}
16+
.st2{fill:#D9E1F0;}
17+
.st3{fill:none;stroke:#406BB2;stroke-width:0.25;stroke-miterlimit:10;}
18+
</style>
19+
<defs>
20+
</defs>
21+
<g id="XMLID_2_">
22+
<g>
23+
<path class="st0" d="M304,115.9c72.5,139.6,145,279.1,217.6,418.7c-89,0.6-178.1,1-267.1,1.2h0v-0.5
24+
c-2.3-116.5-4.6-232.9-6.9-349.4c0-1.4-0.1-2.8-0.1-4.1L304,115.9z"/>
25+
<path class="st1" d="M247.5,181.6L247.5,181.6c0,1.4,0.1,2.8,0.1,4.2c2.3,116.5,4.6,233,6.9,349.4v0.5
26+
c-84.7,0.2-169.5,0.2-254.2,0c63.7-140,127.4-279.9,191.1-419.9L247.5,181.6z"/>
27+
<path class="st2" d="M247.5,181.6l-56.2-65.8c17.5-38.5,35.1-77.1,52.6-115.6c0.3,15.6,0.6,31.2,0.9,46.8
28+
c0.8,42.6,1.7,85.1,2.5,127.7c0,1.8,0.1,3.6,0.1,5.3C247.5,180.6,247.5,181.1,247.5,181.6z"/>
29+
</g>
30+
<g>
31+
<path class="st3" d="M247.6,185.8c2.3,116.5,4.6,233,6.9,349.4"/>
32+
<path class="st3" d="M247.5,181.7c0,1.4,0.1,2.8,0.1,4.1"/>
33+
</g>
34+
</g>
35+
</svg> -->
36+
37+
<!-- </div> -->
38+
39+
40+
<mountain-directive></mountain-directive>
41+
42+
43+
</div>

‎public/html/mountain/mountainTemplate.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<div id="mtn-wrapper">
2+
3+
<!-- Trees -->
4+
<button type="button" name="spawnTrees" class="spawnTreesBtn" ng-click="spawnTrees(5)">Spawn Trees</button>
5+
6+
<!-- Rocks -->
7+
<button type="button" name="spawnRocks" class="spawnRocksBtn" ng-click="spawnRocks(3)">Spawn Rocks</button>
8+
9+
<!-- snowyPeak -->
10+
<button type="button" name="spawnSnow" class="spawnSnowPeakBtn" ng-click="spawnSnowPeak(1)">Spawn Snow</button>
11+
12+
<!-- background -->
13+
<button type="button" name="spawnBackground" class="spawnBackgroundBtn" ng-click="spawnBackground(1)">Spawn Background</button>
14+
15+
<!-- Scene at which the entire mountain is generated within -->
16+
<div id="mountainScene-left"></div>
17+
<div id="mountainScene-right"></div>
18+
<div id="bgMountain-Left"></div>
19+
<div id="bgMountain-right"></div>
20+
<!-- <button type="button" name="spawnClimber" class="spawnClimber" ng-click="spawnClimber(1)">Spawn Climber</button> -->
21+
22+
<!-- <i class="climber"> -->
23+
<!-- <i></i> head -->
24+
<!-- <i></i> backpack -->
25+
<!-- <i></i> bottocks -->
26+
<!-- <i></i> left-arm -->
27+
<!-- <i></i> torso -->
28+
<!-- <i></i> shoulder -->
29+
<!-- <i></i> -->
30+
<!-- <i></i> -->
31+
32+
<!-- </i> -->
33+
<!--
34+
<div id="trees">
35+
<i id="my-trees">
36+
<i></i>
37+
<i></i>
38+
<i></i>
39+
<i></i>
40+
</i>
41+
</div> -->
42+
43+
<a ui-sref="lessons">
44+
<div class="home-bottom">
45+
<span>
46+
Start your journey!
47+
</span>
48+
</div>
49+
</a>
50+
</div>
51+
52+
<!-- .html jquery thing
53+
a different view for tests
54+
placeholder
55+
56+
click on th etests underneath each section, take the ID from the parent, and put it in the box
57+
58+
make a service for it to grab html from another document and shove it into the bos.
59+
60+
61+
62+
63+
-->

‎public/scripts/all.js‎

Lines changed: 123 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,121 @@ angular.module('myApp')
196196

197197
angular.module('myApp')
198198

199+
.controller('lessonsContentController', ["$scope", "lessonsContentService", function($scope, lessonsContentService) {
200+
$scope.userAnswerArray = [];
201+
$scope.lessonInfo = (input) => {
202+
lessonsContentService.resetArray();
203+
$scope.lessonContent = lessonsContentService.getLessonInfo(input).then(function(lesson) {
204+
$scope.testObject = lesson.data[0];
205+
$scope.theTitle = $scope.testObject.name;
206+
$scope.testIndex = $scope.testObject.questions.forEach(function(entry, index){
207+
entry.index = index;
208+
lessonsContentService.setCorrectAnswer(entry.correctAnswer, index);
209+
})
210+
})
211+
}
212+
$scope.addAnswer = (userAnswer) => {
213+
$scope.userAnswerArray[userAnswer[1]]=userAnswer[0];
214+
}
215+
$scope.gradeTest = () => {
216+
let rightAnswer = 0;
217+
let user = $scope.userAnswerArray;
218+
let correct = lessonsContentService.getCorrectAnswerArray();
219+
if (user.length === correct.length) {
220+
user.forEach(function(entry, index){
221+
if (entry === correct[index]) {
222+
rightAnswer++;
223+
}
224+
})
225+
let score = (rightAnswer / correct.length) * 100;
226+
if (score === 100) {
227+
$scope.testScore = score.toFixed(0);
228+
}
229+
else {
230+
$scope.testScore = score.toFixed(2);
231+
}
232+
if (score <= 60) {
233+
$scope.message = 'Good attempt! Please review the content and try again.';
234+
} else if (score <= 80) {
235+
$scope.message = 'Nice job! You\'re getting there!'
236+
} else if (score <= 90) {
237+
$scope.message = 'Great work All-Star! ';
238+
} else if (score < 100) {
239+
$scope.message = 'Great job! Almost perfect!';
240+
} else if (score == 100) {
241+
$scope.message = 'Awesome!! You got a perfect score!!';
242+
}
243+
}
244+
else {
245+
alert('Please answer all questions before submitting');
246+
}
247+
}
248+
249+
}]) // end lessonsContentController
250+
251+
angular.module('myApp')
252+
253+
.directive('lessonsContentDirective', function() {
254+
return {
255+
restrict: 'E',
256+
controller: 'lessonsContentController',
257+
templateUrl: './html/lessons/lessonsContentTemplate.html',
258+
scope: {
259+
title: '=',
260+
testObject: '=',
261+
testScore: '='
262+
}
263+
}
264+
}) // end lessonsContentDirective
265+
266+
angular.module('myApp')
267+
268+
.service('lessonsContentService', ["$http", function($http) {
269+
let correctAnswerArray = [];
270+
this.setCorrectAnswer = (input, index) => {
271+
correctAnswerArray[index] = input;
272+
}
273+
this.getCorrectAnswerArray = () => {
274+
return correctAnswerArray;
275+
}
276+
this.resetArray = () => {
277+
correctAnswerArray = [];
278+
}
279+
this.getLessonInfo = (input) => {
280+
return $http ({
281+
method: 'GET',
282+
url: '/api/lessons/js/' + input
283+
})
284+
}
285+
}]) // end lessonsContentService
286+
287+
angular.module('myApp')
288+
289+
.directive('lessonsSideBarDirective', ["$state", function($state) {
290+
291+
return {
292+
restrict: 'E',
293+
controller: 'lessonsContentController',
294+
templateUrl: './html/lessons/lessonsSideBarTemplate.html',
295+
link: function(scope, ele, attr) {
296+
$('.lesson-title').click(function() {
297+
// console.log(this.parentNode);
298+
$('.lesson-sections', this.parentNode).toggle('expand');
299+
$('.lesson-tests-wrapper').css('display', 'none');
300+
})
301+
302+
$('.lesson-test').click(function() {
303+
$('.lesson-tests-wrapper').css('display', 'block');
304+
$('html, body').animate({ scrollTop: 0 }, 300);
305+
}) // end lesson-test click
306+
307+
} // end of directive link
308+
}
309+
310+
}]) // end lessonsSideBarDirective
311+
312+
angular.module('myApp')
313+
199314
.controller('lessonTestsController', ["$scope", function($scope) {
200315

201316
// $scope.test = 'test on ctrl';
@@ -310,121 +425,6 @@ angular.module('myApp')
310425
//
311426
// }) // end lessonTestsService
312427

313-
angular.module('myApp')
314-
315-
.controller('lessonsContentController', ["$scope", "lessonsContentService", function($scope, lessonsContentService) {
316-
$scope.userAnswerArray = [];
317-
$scope.lessonInfo = (input) => {
318-
lessonsContentService.resetArray();
319-
$scope.lessonContent = lessonsContentService.getLessonInfo(input).then(function(lesson) {
320-
$scope.testObject = lesson.data[0];
321-
$scope.theTitle = $scope.testObject.name;
322-
$scope.testIndex = $scope.testObject.questions.forEach(function(entry, index){
323-
entry.index = index;
324-
lessonsContentService.setCorrectAnswer(entry.correctAnswer, index);
325-
})
326-
})
327-
}
328-
$scope.addAnswer = (userAnswer) => {
329-
$scope.userAnswerArray[userAnswer[1]]=userAnswer[0];
330-
}
331-
$scope.gradeTest = () => {
332-
let rightAnswer = 0;
333-
let user = $scope.userAnswerArray;
334-
let correct = lessonsContentService.getCorrectAnswerArray();
335-
if (user.length === correct.length) {
336-
user.forEach(function(entry, index){
337-
if (entry === correct[index]) {
338-
rightAnswer++;
339-
}
340-
})
341-
let score = (rightAnswer / correct.length) * 100;
342-
if (score === 100) {
343-
$scope.testScore = score.toFixed(0);
344-
}
345-
else {
346-
$scope.testScore = score.toFixed(2);
347-
}
348-
if (score <= 60) {
349-
$scope.message = 'Good attempt! Please review the content and try again.';
350-
} else if (score <= 80) {
351-
$scope.message = 'Nice job! You\'re getting there!'
352-
} else if (score <= 90) {
353-
$scope.message = 'Great work All-Star! ';
354-
} else if (score < 100) {
355-
$scope.message = 'Great job! Almost perfect!';
356-
} else if (score == 100) {
357-
$scope.message = 'Awesome!! You got a perfect score!!';
358-
}
359-
}
360-
else {
361-
alert('Please answer all questions before submitting');
362-
}
363-
}
364-
365-
}]) // end lessonsContentController
366-
367-
angular.module('myApp')
368-
369-
.directive('lessonsContentDirective', function() {
370-
return {
371-
restrict: 'E',
372-
controller: 'lessonsContentController',
373-
templateUrl: './html/lessons/lessonsContentTemplate.html',
374-
scope: {
375-
title: '=',
376-
testObject: '=',
377-
testScore: '='
378-
}
379-
}
380-
}) // end lessonsContentDirective
381-
382-
angular.module('myApp')
383-
384-
.service('lessonsContentService', ["$http", function($http) {
385-
let correctAnswerArray = [];
386-
this.setCorrectAnswer = (input, index) => {
387-
correctAnswerArray[index] = input;
388-
}
389-
this.getCorrectAnswerArray = () => {
390-
return correctAnswerArray;
391-
}
392-
this.resetArray = () => {
393-
correctAnswerArray = [];
394-
}
395-
this.getLessonInfo = (input) => {
396-
return $http ({
397-
method: 'GET',
398-
url: '/api/lessons/js/' + input
399-
})
400-
}
401-
}]) // end lessonsContentService
402-
403-
angular.module('myApp')
404-
405-
.directive('lessonsSideBarDirective', ["$state", function($state) {
406-
407-
return {
408-
restrict: 'E',
409-
controller: 'lessonsContentController',
410-
templateUrl: './html/lessons/lessonsSideBarTemplate.html',
411-
link: function(scope, ele, attr) {
412-
$('.lesson-title').click(function() {
413-
// console.log(this.parentNode);
414-
$('.lesson-sections', this.parentNode).toggle('expand');
415-
$('.lesson-tests-wrapper').css('display', 'none');
416-
})
417-
418-
$('.lesson-test').click(function() {
419-
$('.lesson-tests-wrapper').css('display', 'block');
420-
$('html, body').animate({ scrollTop: 0 }, 300);
421-
}) // end lesson-test click
422-
423-
} // end of directive link
424-
}
425-
426-
}]) // end lessonsSideBarDirective
427-
428428
angular.module('myApp')
429429
.controller('loginController', ["$scope", "loginService", function($scope, loginService){
430430

@@ -715,18 +715,20 @@ angular.module( 'myApp' )
715715
// randomizes tree color within a specific range. depending on the time of day and side of mountain...
716716
let gMin = 70;
717717
let gMax = 180;
718-
// left side evening until morning. dark
719-
// if (( localHours > 6 && localHours < 17 && y < -1 ) || (localHours > 10 && localHours < 17 && y > -1) || (localHours > 21 || localHours < 6)){
720-
if (( localHours > 6 && localHours < 17 && x > 15 ) || (localHours > 9 && localHours < 17 && x < 15) || (localHours > 21 || localHours < 6)){
718+
719+
// left side spawns lighter trees in the morning, until afternoon.
720+
// right side spawns lighter trees in the afternoon until dusk.
721+
// only darker trees spawn after nightfall.
722+
if ( ( localHours > 6 && localHours < 17 && x > 15 ) || ( localHours > 9 && localHours < 17 && x < 15 ) || ( localHours > 21 || localHours < 6 ) ) {
721723
rMin = 50;
722724
rMax = 75;
723725
gMin = 85;
724726
gMax = 120;
725727
bMin = 50;
726728
bMax = 80;
727-
console.log('localHours: ' + localHours);
728-
console.log('x: ' + x);
729-
console.log('y: ' + y);
729+
console.log( 'localHours: ' + localHours );
730+
console.log( 'x: ' + x );
731+
console.log( 'y: ' + y );
730732
}
731733

732734

0 commit comments

Comments
 (0)