Lesson-02.html
Lesson-03.html
Lesson-04.html
Lesson-05.html
Lesson-06.html
Lesson-07.html
Lesson-08.html
Lesson-09.html
Lesson-10.html
Lesson-11.html
Lesson-12.html
Lesson-13.html
Lesson-14.html 20 | 21 | 22 | -------------------------------------------------------------------------------- /Slides/lib/css/monokai.css: -------------------------------------------------------------------------------- 1 | /* 2 | Monokai style - ported by Luigi Maselli - http://grigio.org 3 | */ 4 | 5 | .hljs { 6 | display: block; 7 | overflow-x: auto; 8 | padding: 0.5em; 9 | background: #272822; 10 | color: #ddd; 11 | } 12 | 13 | .hljs-tag, 14 | .hljs-keyword, 15 | .hljs-selector-tag, 16 | .hljs-literal, 17 | .hljs-strong, 18 | .hljs-name { 19 | color: #f92672; 20 | } 21 | 22 | .hljs-code { 23 | color: #66d9ef; 24 | } 25 | 26 | .hljs-class .hljs-title { 27 | color: white; 28 | } 29 | 30 | .hljs-attribute, 31 | .hljs-symbol, 32 | .hljs-regexp, 33 | .hljs-link { 34 | color: #bf79db; 35 | } 36 | 37 | .hljs-string, 38 | .hljs-bullet, 39 | .hljs-subst, 40 | .hljs-title, 41 | .hljs-section, 42 | .hljs-emphasis, 43 | .hljs-type, 44 | .hljs-built_in, 45 | .hljs-builtin-name, 46 | .hljs-selector-attr, 47 | .hljs-selector-pseudo, 48 | .hljs-addition, 49 | .hljs-variable, 50 | .hljs-template-tag, 51 | .hljs-template-variable { 52 | color: #a6e22e; 53 | } 54 | 55 | .hljs-comment, 56 | .hljs-quote, 57 | .hljs-deletion, 58 | .hljs-meta { 59 | color: #75715e; 60 | } 61 | 62 | .hljs-keyword, 63 | .hljs-selector-tag, 64 | .hljs-literal, 65 | .hljs-doctag, 66 | .hljs-title, 67 | .hljs-section, 68 | .hljs-type, 69 | .hljs-selector-id { 70 | font-weight: bold; 71 | } 72 | -------------------------------------------------------------------------------- /Slides/lib/css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov
18 |
19 |
110 |
111 |
112 |
113 |
114 |
132 |
133 |
134 |
135 |
--------------------------------------------------------------------------------
/Slides/plugin/markdown/example.md:
--------------------------------------------------------------------------------
1 | # Markdown Demo
2 |
3 |
4 |
5 | ## External 1.1
6 |
7 | Content 1.1
8 |
9 | Note: This will only appear in the speaker notes window.
10 |
11 |
12 | ## External 1.2
13 |
14 | Content 1.2
15 |
16 |
17 |
18 | ## External 2
19 |
20 | Content 2.1
21 |
22 |
23 |
24 | ## External 3.1
25 |
26 | Content 3.1
27 |
28 |
29 | ## External 3.2
30 |
31 | Content 3.2
32 |
33 |
34 | ## External 3.3
35 |
36 | 
37 |
--------------------------------------------------------------------------------
/Slides/plugin/math/math.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin which enables rendering of math equations inside
3 | * of reveal.js slides. Essentially a thin wrapper for MathJax.
4 | *
5 | * @author Hakim El Hattab
6 | */
7 | var RevealMath = window.RevealMath || (function(){
8 |
9 | var options = Reveal.getConfig().math || {};
10 | var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
11 | var config = options.config || 'TeX-AMS_HTML-full';
12 | var url = mathjax + '?config=' + config;
13 |
14 | var defaultOptions = {
15 | messageStyle: 'none',
16 | tex2jax: {
17 | inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
18 | skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
19 | },
20 | skipStartupTypeset: true
21 | };
22 |
23 | function defaults( options, defaultOptions ) {
24 |
25 | for ( var i in defaultOptions ) {
26 | if ( !options.hasOwnProperty( i ) ) {
27 | options[i] = defaultOptions[i];
28 | }
29 | }
30 |
31 | }
32 |
33 | function loadScript( url, callback ) {
34 |
35 | var head = document.querySelector( 'head' );
36 | var script = document.createElement( 'script' );
37 | script.type = 'text/javascript';
38 | script.src = url;
39 |
40 | // Wrapper for callback to make sure it only fires once
41 | var finish = function() {
42 | if( typeof callback === 'function' ) {
43 | callback.call();
44 | callback = null;
45 | }
46 | }
47 |
48 | script.onload = finish;
49 |
50 | // IE
51 | script.onreadystatechange = function() {
52 | if ( this.readyState === 'loaded' ) {
53 | finish();
54 | }
55 | }
56 |
57 | // Normal browsers
58 | head.appendChild( script );
59 |
60 | }
61 |
62 | return {
63 | init: function() {
64 |
65 | defaults( options, defaultOptions );
66 | defaults( options.tex2jax, defaultOptions.tex2jax );
67 | options.mathjax = options.config = null;
68 |
69 | loadScript( url, function() {
70 |
71 | MathJax.Hub.Config( options );
72 |
73 | // Typeset followed by an immediate reveal.js layout since
74 | // the typesetting process could affect slide height
75 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
76 | MathJax.Hub.Queue( Reveal.layout );
77 |
78 | // Reprocess equations in slides when they turn visible
79 | Reveal.addEventListener( 'slidechanged', function( event ) {
80 |
81 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
82 |
83 | } );
84 |
85 | } );
86 |
87 | }
88 | }
89 |
90 | })();
91 |
92 | Reveal.registerPlugin( 'math', RevealMath );
93 |
--------------------------------------------------------------------------------
/Slides/plugin/multiplex/client.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var multiplex = Reveal.getConfig().multiplex;
3 | var socketId = multiplex.id;
4 | var socket = io.connect(multiplex.url);
5 |
6 | socket.on(multiplex.id, function(data) {
7 | // ignore data from sockets that aren't ours
8 | if (data.socketId !== socketId) { return; }
9 | if( window.location.host === 'localhost:1947' ) return;
10 |
11 | Reveal.setState(data.state);
12 | });
13 | }());
14 |
--------------------------------------------------------------------------------
/Slides/plugin/multiplex/index.js:
--------------------------------------------------------------------------------
1 | var http = require('http');
2 | var express = require('express');
3 | var fs = require('fs');
4 | var io = require('socket.io');
5 | var crypto = require('crypto');
6 |
7 | var app = express();
8 | var staticDir = express.static;
9 | var server = http.createServer(app);
10 |
11 | io = io(server);
12 |
13 | var opts = {
14 | port: process.env.PORT || 1948,
15 | baseDir : __dirname + '/../../'
16 | };
17 |
18 | io.on( 'connection', function( socket ) {
19 | socket.on('multiplex-statechanged', function(data) {
20 | if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return;
21 | if (createHash(data.secret) === data.socketId) {
22 | data.secret = null;
23 | socket.broadcast.emit(data.socketId, data);
24 | };
25 | });
26 | });
27 |
28 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
29 | app.use('/' + dir, staticDir(opts.baseDir + dir));
30 | });
31 |
32 | app.get("/", function(req, res) {
33 | res.writeHead(200, {'Content-Type': 'text/html'});
34 |
35 | var stream = fs.createReadStream(opts.baseDir + '/index.html');
36 | stream.on('error', function( error ) {
37 | res.write('reveal.js multiplex server.
Generate token'); 38 | res.end(); 39 | }); 40 | stream.on('readable', function() { 41 | stream.pipe(res); 42 | }); 43 | }); 44 | 45 | app.get("/token", function(req,res) { 46 | var ts = new Date().getTime(); 47 | var rand = Math.floor(Math.random()*9999999); 48 | var secret = ts.toString() + rand.toString(); 49 | res.send({secret: secret, socketId: createHash(secret)}); 50 | }); 51 | 52 | var createHash = function(secret) { 53 | var cipher = crypto.createCipher('blowfish', secret); 54 | return(cipher.final('hex')); 55 | }; 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /Slides/plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Don't emit events from inside of notes windows 4 | if ( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var multiplex = Reveal.getConfig().multiplex; 7 | 8 | var socket = io.connect( multiplex.url ); 9 | 10 | function post() { 11 | 12 | var messageData = { 13 | state: Reveal.getState(), 14 | secret: multiplex.secret, 15 | socketId: multiplex.id 16 | }; 17 | 18 | socket.emit( 'multiplex-statechanged', messageData ); 19 | 20 | }; 21 | 22 | // post once the page is loaded, so the client follows also on "open URL". 23 | window.addEventListener( 'load', post ); 24 | 25 | // Monitor events that trigger a change in state 26 | Reveal.addEventListener( 'slidechanged', post ); 27 | Reveal.addEventListener( 'fragmentshown', post ); 28 | Reveal.addEventListener( 'fragmenthidden', post ); 29 | Reveal.addEventListener( 'overviewhidden', post ); 30 | Reveal.addEventListener( 'overviewshown', post ); 31 | Reveal.addEventListener( 'paused', post ); 32 | Reveal.addEventListener( 'resumed', post ); 33 | 34 | }()); 35 | -------------------------------------------------------------------------------- /Slides/plugin/multiplex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-js-multiplex", 3 | "version": "1.0.0", 4 | "description": "reveal.js multiplex server", 5 | "homepage": "http://revealjs.com", 6 | "scripts": { 7 | "start": "node index.js" 8 | }, 9 | "engines": { 10 | "node": "~4.1.1" 11 | }, 12 | "dependencies": { 13 | "express": "~4.13.3", 14 | "grunt-cli": "~0.1.13", 15 | "mustache": "~2.2.1", 16 | "socket.io": "~1.3.7" 17 | }, 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /Slides/plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // don't emit events from inside the previews themselves 4 | if( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var socket = io.connect( window.location.origin ), 7 | socketId = Math.random().toString().slice( 2 ); 8 | 9 | console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId ); 10 | 11 | window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId ); 12 | 13 | /** 14 | * Posts the current slide data to the notes window 15 | */ 16 | function post() { 17 | 18 | var slideElement = Reveal.getCurrentSlide(), 19 | notesElement = slideElement.querySelector( 'aside.notes' ); 20 | 21 | var messageData = { 22 | notes: '', 23 | markdown: false, 24 | socketId: socketId, 25 | state: Reveal.getState() 26 | }; 27 | 28 | // Look for notes defined in a slide attribute 29 | if( slideElement.hasAttribute( 'data-notes' ) ) { 30 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 31 | } 32 | 33 | // Look for notes defined in an aside element 34 | if( notesElement ) { 35 | messageData.notes = notesElement.innerHTML; 36 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 37 | } 38 | 39 | socket.emit( 'statechanged', messageData ); 40 | 41 | } 42 | 43 | // When a new notes window connects, post our current state 44 | socket.on( 'new-subscriber', function( data ) { 45 | post(); 46 | } ); 47 | 48 | // When the state changes from inside of the speaker view 49 | socket.on( 'statechanged-speaker', function( data ) { 50 | Reveal.setState( data.state ); 51 | } ); 52 | 53 | // Monitor events that trigger a change in state 54 | Reveal.addEventListener( 'slidechanged', post ); 55 | Reveal.addEventListener( 'fragmentshown', post ); 56 | Reveal.addEventListener( 'fragmenthidden', post ); 57 | Reveal.addEventListener( 'overviewhidden', post ); 58 | Reveal.addEventListener( 'overviewshown', post ); 59 | Reveal.addEventListener( 'paused', post ); 60 | Reveal.addEventListener( 'resumed', post ); 61 | 62 | // Post the initial state 63 | post(); 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /Slides/plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var express = require('express'); 3 | var fs = require('fs'); 4 | var io = require('socket.io'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express(); 8 | var staticDir = express.static; 9 | var server = http.createServer(app); 10 | 11 | io = io(server); 12 | 13 | var opts = { 14 | port : 1947, 15 | baseDir : __dirname + '/../../' 16 | }; 17 | 18 | io.on( 'connection', function( socket ) { 19 | 20 | socket.on( 'new-subscriber', function( data ) { 21 | socket.broadcast.emit( 'new-subscriber', data ); 22 | }); 23 | 24 | socket.on( 'statechanged', function( data ) { 25 | delete data.state.overview; 26 | socket.broadcast.emit( 'statechanged', data ); 27 | }); 28 | 29 | socket.on( 'statechanged-speaker', function( data ) { 30 | delete data.state.overview; 31 | socket.broadcast.emit( 'statechanged-speaker', data ); 32 | }); 33 | 34 | }); 35 | 36 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) { 37 | app.use( '/' + dir, staticDir( opts.baseDir + dir ) ); 38 | }); 39 | 40 | app.get('/', function( req, res ) { 41 | 42 | res.writeHead( 200, { 'Content-Type': 'text/html' } ); 43 | fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res ); 44 | 45 | }); 46 | 47 | app.get( '/notes/:socketId', function( req, res ) { 48 | 49 | fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) { 50 | res.send( Mustache.to_html( data.toString(), { 51 | socketId : req.params.socketId 52 | })); 53 | }); 54 | 55 | }); 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' ); 65 | 66 | console.log( brown + 'reveal.js - Speaker Notes' + reset ); 67 | console.log( '1. Open the slides at ' + green + slidesLocation + reset ); 68 | console.log( '2. Click on the link in your JS console to go to the notes page' ); 69 | console.log( '3. Advance through your slides and your notes will advance automatically' ); 70 | -------------------------------------------------------------------------------- /Slides/plugin/notes/notes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handles opening of and synchronization with the reveal.js 3 | * notes window. 4 | * 5 | * Handshake process: 6 | * 1. This window posts 'connect' to notes window 7 | * - Includes URL of presentation to show 8 | * 2. Notes window responds with 'connected' when it is available 9 | * 3. This window proceeds to send the current presentation state 10 | * to the notes window 11 | */ 12 | var RevealNotes = (function() { 13 | 14 | var notesPopup = null; 15 | 16 | function openNotes( notesFilePath ) { 17 | 18 | if (notesPopup && !notesPopup.closed) { 19 | notesPopup.focus(); 20 | return; 21 | } 22 | 23 | if( !notesFilePath ) { 24 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path 25 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path 26 | notesFilePath = jsFileLocation + 'notes.html'; 27 | } 28 | 29 | notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' ); 30 | 31 | if( !notesPopup ) { 32 | alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' ); 33 | return; 34 | } 35 | 36 | /** 37 | * Connect to the notes window through a postmessage handshake. 38 | * Using postmessage enables us to work in situations where the 39 | * origins differ, such as a presentation being opened from the 40 | * file system. 41 | */ 42 | function connect() { 43 | // Keep trying to connect until we get a 'connected' message back 44 | var connectInterval = setInterval( function() { 45 | notesPopup.postMessage( JSON.stringify( { 46 | namespace: 'reveal-notes', 47 | type: 'connect', 48 | url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search, 49 | state: Reveal.getState() 50 | } ), '*' ); 51 | }, 500 ); 52 | 53 | window.addEventListener( 'message', function( event ) { 54 | var data = JSON.parse( event.data ); 55 | if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) { 56 | clearInterval( connectInterval ); 57 | onConnected(); 58 | } 59 | if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) { 60 | callRevealApi( data.methodName, data.arguments, data.callId ); 61 | } 62 | } ); 63 | } 64 | 65 | /** 66 | * Calls the specified Reveal.js method with the provided argument 67 | * and then pushes the result to the notes frame. 68 | */ 69 | function callRevealApi( methodName, methodArguments, callId ) { 70 | 71 | var result = Reveal[methodName].apply( Reveal, methodArguments ); 72 | notesPopup.postMessage( JSON.stringify( { 73 | namespace: 'reveal-notes', 74 | type: 'return', 75 | result: result, 76 | callId: callId 77 | } ), '*' ); 78 | 79 | } 80 | 81 | /** 82 | * Posts the current slide data to the notes window 83 | */ 84 | function post( event ) { 85 | 86 | var slideElement = Reveal.getCurrentSlide(), 87 | notesElement = slideElement.querySelector( 'aside.notes' ), 88 | fragmentElement = slideElement.querySelector( '.current-fragment' ); 89 | 90 | var messageData = { 91 | namespace: 'reveal-notes', 92 | type: 'state', 93 | notes: '', 94 | markdown: false, 95 | whitespace: 'normal', 96 | state: Reveal.getState() 97 | }; 98 | 99 | // Look for notes defined in a slide attribute 100 | if( slideElement.hasAttribute( 'data-notes' ) ) { 101 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 102 | messageData.whitespace = 'pre-wrap'; 103 | } 104 | 105 | // Look for notes defined in a fragment 106 | if( fragmentElement ) { 107 | var fragmentNotes = fragmentElement.querySelector( 'aside.notes' ); 108 | if( fragmentNotes ) { 109 | notesElement = fragmentNotes; 110 | } 111 | else if( fragmentElement.hasAttribute( 'data-notes' ) ) { 112 | messageData.notes = fragmentElement.getAttribute( 'data-notes' ); 113 | messageData.whitespace = 'pre-wrap'; 114 | 115 | // In case there are slide notes 116 | notesElement = null; 117 | } 118 | } 119 | 120 | // Look for notes defined in an aside element 121 | if( notesElement ) { 122 | messageData.notes = notesElement.innerHTML; 123 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 124 | } 125 | 126 | notesPopup.postMessage( JSON.stringify( messageData ), '*' ); 127 | 128 | } 129 | 130 | /** 131 | * Called once we have established a connection to the notes 132 | * window. 133 | */ 134 | function onConnected() { 135 | 136 | // Monitor events that trigger a change in state 137 | Reveal.addEventListener( 'slidechanged', post ); 138 | Reveal.addEventListener( 'fragmentshown', post ); 139 | Reveal.addEventListener( 'fragmenthidden', post ); 140 | Reveal.addEventListener( 'overviewhidden', post ); 141 | Reveal.addEventListener( 'overviewshown', post ); 142 | Reveal.addEventListener( 'paused', post ); 143 | Reveal.addEventListener( 'resumed', post ); 144 | 145 | // Post the initial state 146 | post(); 147 | 148 | } 149 | 150 | connect(); 151 | 152 | } 153 | 154 | return { 155 | init: function() { 156 | 157 | if( !/receiver/i.test( window.location.search ) ) { 158 | 159 | // If the there's a 'notes' query set, open directly 160 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) { 161 | openNotes(); 162 | } 163 | 164 | // Open the notes when the 's' key is hit 165 | Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() { 166 | openNotes(); 167 | } ); 168 | 169 | } 170 | 171 | }, 172 | 173 | open: openNotes 174 | }; 175 | 176 | })(); 177 | 178 | Reveal.registerPlugin( 'notes', RevealNotes ); 179 | -------------------------------------------------------------------------------- /Slides/plugin/print-pdf/print-pdf.js: -------------------------------------------------------------------------------- 1 | /** 2 | * phantomjs script for printing presentations to PDF. 3 | * 4 | * Example: 5 | * phantomjs print-pdf.js "http://revealjs.com?print-pdf" reveal-demo.pdf 6 | * 7 | * @author Manuel Bieh (https://github.com/manuelbieh) 8 | * @author Hakim El Hattab (https://github.com/hakimel) 9 | * @author Manuel Riezebosch (https://github.com/riezebosch) 10 | */ 11 | 12 | // html2pdf.js 13 | var system = require( 'system' ); 14 | 15 | var probePage = new WebPage(); 16 | var printPage = new WebPage(); 17 | 18 | var inputFile = system.args[1] || 'index.html?print-pdf'; 19 | var outputFile = system.args[2] || 'slides.pdf'; 20 | 21 | if( outputFile.match( /\.pdf$/gi ) === null ) { 22 | outputFile += '.pdf'; 23 | } 24 | 25 | console.log( 'Export PDF: Reading reveal.js config [1/4]' ); 26 | 27 | probePage.open( inputFile, function( status ) { 28 | 29 | console.log( 'Export PDF: Preparing print layout [2/4]' ); 30 | 31 | var config = probePage.evaluate( function() { 32 | return Reveal.getConfig(); 33 | } ); 34 | 35 | if( config ) { 36 | 37 | printPage.paperSize = { 38 | width: Math.floor( config.width * ( 1 + config.margin ) ), 39 | height: Math.floor( config.height * ( 1 + config.margin ) ), 40 | border: 0 41 | }; 42 | 43 | printPage.open( inputFile, function( status ) { 44 | console.log( 'Export PDF: Preparing pdf [3/4]') 45 | printPage.evaluate( function() { 46 | Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom ); 47 | } ); 48 | } ); 49 | 50 | printPage.onCallback = function( data ) { 51 | // For some reason we need to "jump the queue" for syntax highlighting to work. 52 | // See: http://stackoverflow.com/a/3580132/129269 53 | setTimeout( function() { 54 | console.log( 'Export PDF: Writing file [4/4]' ); 55 | printPage.render( outputFile ); 56 | console.log( 'Export PDF: Finished successfully!' ); 57 | phantom.exit(); 58 | }, 0 ); 59 | }; 60 | } 61 | else { 62 | 63 | console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' ); 64 | phantom.exit( 1 ); 65 | 66 | } 67 | } ); 68 | -------------------------------------------------------------------------------- /Web/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/Web/.nojekyll -------------------------------------------------------------------------------- /Web/logo-icononly.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Web/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --base-font-weight: 400; 3 | --base-color: white; 4 | --base-font-size: 14px; 5 | 6 | --sidebar-width: 22rem; 7 | --sidebar-nav-link-before-content: ""; 8 | --sidebar-nav-link-before-content-l3: ""; 9 | --sidebar-name-font-weight: 500; 10 | 11 | --search-result-heading-font-size: 1em; 12 | --search-result-item-font-size: 0.9em; 13 | --search-result-heading-font-weight: 400; 14 | --search-result-heading-margin: 0 0 0.1em; 15 | 16 | --heading-font-weight: 500; 17 | --heading-h1-font-weight: 700; 18 | --heading-h1-font-size: 2.5em; 19 | 20 | --notice-font-style: italic; 21 | --notice-font-weight: 500; 22 | 23 | --blockquote-em-font-style: normal; 24 | --blockquote-em-font-weight: 700; 25 | 26 | --blockquote-font-style: italic; 27 | --blockquote-font-weight: 500; 28 | 29 | --code-font-size: 1em; 30 | --code-font-weight: 500; 31 | --code-tab-size: 2; 32 | } 33 | 34 | .sidebar>h1 { 35 | margin: 2.3rem auto 1rem; 36 | } 37 | 38 | .sidebar>h1>a>img { 39 | height: auto; 40 | } 41 | 42 | .markdown-section { 43 | max-width: 840px; 44 | } 45 | 46 | .markdown-section a:hover { 47 | border-bottom: 1px dashed rgba(255, 255, 255, 0.5); 48 | padding-bottom: 3px; 49 | } 50 | 51 | .sidebar-nav>ul:nth-child(1)>li>a.section-link, 52 | .sidebar-nav>ul:nth-child(1)>li>ul.children>li>a.section-link { 53 | display: block; 54 | } 55 | 56 | #main>h1:nth-child(1) { 57 | display: none; 58 | } 59 | 60 | #main>h1:nth-child(1)[id] { 61 | display: block; 62 | } 63 | 64 | .sidebar ul li a { 65 | color: #333; 66 | font-size: 14px; 67 | font-weight: 400; 68 | overflow: hidden; 69 | text-decoration: none; 70 | text-overflow: ellipsis; 71 | white-space: nowrap; 72 | } 73 | 74 | .sidebar ul li strong a { 75 | font-weight: 700; 76 | } 77 | 78 | .sidebar ul li ul.app-sub-sidebar li a { 79 | font-weight: 400; 80 | } 81 | 82 | .sidebar ul li ul.app-sub-sidebar li a.active { 83 | font-weight: 700; 84 | } 85 | 86 | body .docsify-copy-code-button { 87 | background: none !important; 88 | line-height: 1.5rem; 89 | position: absolute; 90 | word-wrap: normal; 91 | color: #ccc; 92 | font-size: .7rem; 93 | font-weight: 700; 94 | left: 0; 95 | height: 25px; 96 | top: -4px; 97 | text-align: center; 98 | } 99 | 100 | body .docsify-copy-code-button.success { 101 | color: #11A31B; 102 | } 103 | 104 | body .docsify-copy-code-button::after {} 105 | 106 | .app-name-link img { 107 | height: 150px; 108 | width: 150px; 109 | } 110 | 111 | table>tbody>tr>td::before { 112 | display: none; 113 | } 114 | 115 | .btn-edit-on-github { 116 | transition: background-color 0.5s ease; 117 | border: none; 118 | border-radius: 3px; 119 | background-color: var(--theme-color); 120 | position: absolute; 121 | top: var(--sidebar-toggle-offset-top); 122 | right: 0; 123 | margin-right: 45px; 124 | padding: 6px 10px 6px 5px; 125 | height: var(--sidebar-toggle-height); 126 | } 127 | 128 | .btn-edit-on-github a, 129 | .btn-edit-on-github svg { 130 | transition: color 0.5s ease; 131 | color: white; 132 | } 133 | 134 | .btn-edit-on-github a { 135 | text-decoration: none; 136 | position: relative; 137 | font-weight: 700; 138 | top: -1px; 139 | padding-left: 5px; 140 | } 141 | 142 | .btn-edit-on-github:hover { 143 | cursor: pointer; 144 | background-color: var(--mono-tint2); 145 | } 146 | 147 | .btn-edit-on-github:hover svg, 148 | .btn-edit-on-github:hover a { 149 | text-decoration: none; 150 | color: white; 151 | } 152 | 153 | td::before { display: none } -------------------------------------------------------------------------------- /Web/sw.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * docsify sw.js 3 | * =========================================================== 4 | * Copyright 2016 @huxpro 5 | * Licensed under Apache 2.0 6 | * Register service worker. 7 | * ========================================================== */ 8 | 9 | const RUNTIME = 'docsify' 10 | const HOSTNAME_WHITELIST = [ 11 | self.location.hostname, 12 | 'fonts.gstatic.com', 13 | 'fonts.googleapis.com', 14 | 'unpkg.com', 15 | 'github.com', 16 | 'github.io', 17 | 'makeschool.com' 18 | ] 19 | 20 | // The Util Function to hack URLs of intercepted requests 21 | const getFixedUrl = (req) => { 22 | var now = Date.now() 23 | var url = new URL(req.url) 24 | 25 | // 1. fixed http URL 26 | // Just keep syncing with location.protocol 27 | // fetch(httpURL) belongs to active mixed content. 28 | // And fetch(httpRequest) is not supported yet. 29 | url.protocol = self.location.protocol 30 | 31 | // 2. add query for caching-busting. 32 | // Github Pages served with Cache-Control: max-age=600 33 | // max-age on mutable content is error-prone, with SW life of bugs can even extend. 34 | // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. 35 | // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 36 | if (url.hostname === self.location.hostname) { 37 | url.search += (url.search ? '&' : '?') + 'cache-bust=' + now 38 | } 39 | return url.href 40 | } 41 | 42 | /** 43 | * @Lifecycle Activate 44 | * New one activated when old isnt being used. 45 | * 46 | * waitUntil(): activating ====> activated 47 | */ 48 | self.addEventListener('activate', event => { 49 | event.waitUntil(self.clients.claim()) 50 | }) 51 | 52 | /** 53 | * @Functional Fetch 54 | * All network requests are being intercepted here. 55 | * 56 | * void respondWith(Promise**/**
[Phaser Tutorial](class-11) | 50 | | 11| Tue, August 13 | [Final Class presentation](class-13) | 51 | | 12| Thu, August 15 | [Final Assessment](class-14) | 52 | 53 | ## Class Assignments 54 | 55 | - Break Out 56 | - You make a repo for this and post it to the tracker 57 | - You will get the game working attempt challenges 58 | - Use the rubric to gauge your project 59 | - Oregon Trail 60 | - You will make a repo for this project and enter it in the tracker 61 | - Get the game working and attempt the challenges 62 | - Use the rubric to gauge your progress 63 | - Phaser JS game 64 | - You will make a repo for this and enter it in the tracker 65 | - You can make anything you like. Try your best to scope this to something you can complete by the end of the term. 66 | - Use the rubric to gauge your progress 67 | 68 | ### Book/Reading 69 | 70 | - https://eloquentjavascript.net/ 71 | 72 | ### Study Resources 73 | 74 | - https://repl.it/classroom/invite/ZLKqpSw 75 | - http://www.jshero.net/en/success.html 76 | - https://www.codecademy.com/learn/introduction-to-javascript 77 | 78 | ## Evaluation 79 | To pass this course you must meet the following requirements: 80 | 81 | - Complete all required tutorials 82 | - Pass all projects according to the associated project rubric 83 | - Pass the final summative assessment >=75% 84 | - Actively participate in class and abide by the attendance policy 85 | - Make up all classwork from all absences 86 | 87 | ## Make School Course Policies 88 | 89 | - [Program Learning Outcomes](https://make.sc/program-learning-outcomes) 90 | - [Grading System](https://make.sc/grading-system) 91 | - [Diversity and Inclusion Statement](https://make.sc/diversity-and-inclusion-statement) 92 | - [Academic Honesty](https://make.sc/academic-honesty-policy) 93 | - [Attendance Policy](https://make.sc/attendance-policy) 94 | - [Course Credit Policy](https://make.sc/course-credit-policy) 95 | - [Disability Services (Academic Accommodations)](https://make.sc/disability-services) 96 | - [Student Handbook](https://make.sc/student-handbook) 97 | -------------------------------------------------------------------------------- /notes/old/class-01/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 - Class 1 2 | 3 | ## Learn JavaScript 4 | 5 | You're hired! Consider this class your job for the next 7 weeks. You'll be responsible for making three games, maintaining and improving the code base for your games, keeping notes and documentation for the code that you produce. 6 | 7 | It's your job to put in regular hours working on the code you are responsible for. 8 | 9 | You will maintain a GitHub Repo for each project. **You need to commit each time you work on the project. For each session you work you should have at least one commit.** This is a requirement. 10 | 11 | ## Objectives 12 | 13 | - Use JavaScript to create applications of medium complexity 14 | - Implement arrays, including multi-dimensional arrays 15 | - Define objects with Object Literal notation 16 | - Implement control flow to solve problems 17 | 18 | ## Getting started 19 | 20 | The first game you're repsonsible for is Breakout! It's a classic arcade game. You need to make a web version written in JavaScript. 21 | 22 | Start with a new repo for the project. Create a repo and add the repo link to the class progress tracker. 23 | 24 | You'll be followinfg the tutorial here: 25 | 26 | https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 27 | 28 | There are 10 pages in the tutorial you should have at least one commit for each page/step of the tutorial. 29 | 30 | Q: Why so many commits? 31 | 32 | A: The whole purpose of making commits is to allow you and your team to revisit work prior to a change. Actually your commits should be more ganular than just the 10 steps here! Add a new file make a commit. Update a function make a commit. 33 | 34 | Q: Does this really serve a purpose? 35 | 36 | A: Often not, but in the few cases it's invaluable in helping track down an error. It's industry best practice. It's industry best practice that you should be familiar with. Might as well get in a good practice now. 37 | 38 | ### Why do this tutorial? 39 | 40 | This tutorial makes an application that has a majority of the JavaScript language features you will have to master to be an expert at JS! Might as well learn them by making a game! 41 | 42 | The tutorial contains: 43 | 44 | - functions 45 | - variables 46 | - Arrays 47 | - Objects 48 | - loops 49 | - if then statements 50 | 51 | Beyond these the game has gigher level concepts that are important to designing software applications. 52 | 53 | - code structure 54 | - order of operations 55 | - control flow 56 | - off by one errors... 57 | 58 | It is essential that you master these features to make a career in Software development. Using these features to solve problems and create solutions is an important skill. This tutorial solves some interesting problems using all of these tools. Trying your best to understand the problems that are being solved in the tutorial will help you at technical job interviews in the future! 59 | 60 | ## Starting the tutorial 61 | 62 | https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 63 | 64 | Read the introduction and move on to the first page of the tutorial: Create the Canvas and draw on it. 65 | 66 | The class will do this together then discuss it. 67 | 68 | ## Homework: Breakout with JS 69 | 70 | [Breakout](https://en.wikipedia.org/wiki/Breakout_(video_game)) is a classic arcade game. It's simple and has been ported to almost every platform. Your job is to make the JavaScript version. 71 | 72 | Your goal is to build the tutorial [here](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) 73 | 74 | The tutorial is short and contains completed functional code sample at the end of each section, use this to check your work as you progress. 75 | 76 | Read the tutorial and complete the game. Your tutorial should be functional! The tutorial shows the complete sample code at the end of every section. You can test your process against this as you work. Test your work and play the game! 77 | 78 | Study the code and do your best to understand how the code functions and why the game behaves as it does. Look closely at the game, be sure to play. Change some of the values and see how they affect the game. 79 | 80 | ### Due: Class 2 81 | 82 | After completing the tutorial You will be working on challenges based on the tutorial. This is why it is essential that your tutorial is functioning when you come to class 2. 83 | 84 | ## Breakout Tutorial 85 | 86 | | - | Does not meet expectations | Meets expectations | Exceeds expectations | 87 | |:-------------|:------------------|:-------------------------|:---------------------| 88 | | **Completed** | Did **not complete** | **Completed** the tutorial | Modified the tutorial and **improved** on the existing code | 89 | | **Functional** | Is **not functional** | Base tutorial **functional** | Modified the existing code adding improvements, uses `const` and `let` over `var` where appropriate, **added new features** | 90 | | **Code quality** | Indentation is bad, white space is **inconsistent** | Uses consistent indentation and spacing, code is **well formatted** | Well written and **well commented**, code is well organized with variables at the top, and functions arranged logically | 91 | | **Work Ethic** | **Did not commit** when working on project | One commit for **each step**. | Commits **clearly documented** process | 92 | -------------------------------------------------------------------------------- /notes/old/class-01/assignment.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 - Foundation JavaScript - Assignment 2 | 3 | Learn JavaScript by making games! The first Game is Breakout! 4 | 5 | ## What you will learn 6 | 7 | The basic tutorial covers many of the core and important JS features that you need to be familiar with. This includes: 8 | 9 | - Arrays 10 | - Objects 11 | - Loops 12 | - If then else 13 | - functions 14 | - and more... 15 | 16 | The whole tutorial is vanilla JS and uses no libraries or other code. This is a good opportunity to learn the fundamentals of JS. 17 | 18 | ## Project Requirements 19 | 20 | Your goal is to complete the tutorial below. Read the tutorial, follow the instructions. The tutorial creates the classic arcade game Breaout! The end of easch section has the completed functional code, check your work against this or skip head if you are confused. 21 | 22 | https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 23 | 24 | ### Deliverables 25 | 26 | A link to your completed tutorial in a GitHub repo. Add the link to the progress tracker. 27 | 28 | ## Due Date 29 | 30 | Class 2 31 | 32 | ## Rubric 33 | 34 | -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Bricks-More.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Bricks-More.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-Colors-Alternate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-Colors-Alternate.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-Colors-Columns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-Colors-Columns.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-Colors-Rows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-Colors-Rows.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-Random.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-Random.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-sizes-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-sizes-2.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-sizes-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-sizes-3.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks-sizes.png -------------------------------------------------------------------------------- /notes/old/class-02/images/Break-Out-Bricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-02/images/Break-Out-Bricks.png -------------------------------------------------------------------------------- /notes/old/class-04/images/Trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-04/images/Trees.png -------------------------------------------------------------------------------- /notes/old/class-04/images/wagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/class-04/images/wagon.png -------------------------------------------------------------------------------- /notes/old/class-06/notes/minute-by-minute.md: -------------------------------------------------------------------------------- 1 | - Intro 2 | - Update the Tracker 3 | -- Attendance 4 | - Classes and Game Structure 5 | - Review the properties and methods of each class 6 | - _Optional_ Template Strings and Destructuring 7 | - Template Strings 8 | - Destructuring Objects 9 | - Work: Oregon Trail 10 | - Break 10min 11 | - Work: Oregon Trail 12 | - Code Review 13 | - Project One - Volunteer 14 | - Project two - Random 15 | 16 | Notes for Code Review 17 | 18 | A code review, at its core, is a conversation about a set of proposed changes. 19 | 20 | Opportunity to concurrently learn and teach while also strengthening relationship with peers. 21 | 22 | Authors should annotate source code before the review 23 | 24 | Understand the “Why” of changes 25 | 26 | Giving Positive Feedback 27 | 28 | Code Review Comment Explained Well -------------------------------------------------------------------------------- /notes/old/class-07/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 - Class 7 2 | 3 | ## Debugging and Code Review 4 | 5 | Debugging and code review should be a regular process in development. 6 | 7 | ## Objectives 8 | 9 | - Identify and use debugging tools 10 | - Develop debugging and problem solving strategies 11 | 12 | ## Debugging tools with JS 13 | 14 | ### Debugging in the Browser 15 | 16 | The more complex your code becomes the more tools you need to 17 | help you solve the problems that will eventually arise. 18 | 19 | Read this [article](https://developers.google.com/web/tools/chrome-devtools/javascript/) 20 | 21 | Follow the tutorial example then try these techniques on your project. 22 | 23 | ## After class 24 | 25 | Continue work on the Oregon Trail project. The goal is to have this finished the half of next week class 9. 26 | 27 | ## Resources 28 | 29 | - https://developers.google.com/web/tools/chrome-devtools/javascript/ 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /notes/old/class-07/event-listeners-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Key Code:
9 | 10 | 25 | 26 | -------------------------------------------------------------------------------- /notes/old/class-07/event-listeners.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |Key Code:
9 | 10 | 61 | 62 | -------------------------------------------------------------------------------- /notes/old/class-07/example-01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 000
28 |000
29 |30 | 31 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /notes/old/class-09/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 Class 9 2 | 3 | Solving problems and researching documentation. 4 | 5 | ## Intro 6 | 7 | Reading the documentation is key to working with any library. The only reason you understand the code you write is because you wrote it. 8 | No one expects you to understand what parameters are required for 9 | a method that you have never heard of. 10 | 11 | This is why documentation exists. 12 | 13 | ## Objectives 14 | 15 | - Use Inheritance with JS 16 | - Build Objects from other Objects with Extends 17 | 18 | ## OOP 19 | 20 | A class allows you to wrap all of the functions and variables, this the actions and data required by a system, into a single element called an object. 21 | 22 | Objects are great because they encapsulate, store methods and properties in one place. They are also reproducible, that is you can as many instances of an object from a class as you might need. 23 | 24 | Together these last two points are why it's worth learning Object 25 | Oriented Programming. 26 | 27 | ## Extending Classes === Inheritence 28 | 29 | A Class needs to be generic enough to use but this can also be frustrating when a class either doesn't do enough, it's too generic, or does too much and is so specific it can't be reused. 30 | 31 | Inheritance to the rescue! Any class can be extended. By extending a 32 | class you are making a new Class that gains all of the properties and methods from the other class. 33 | 34 | ### Why extend a class? 35 | 36 | When you find you are writing two or more classes that are not the same 37 | but share features you can write a base class they both share. This allows you to make changes to the base functionality of both classes in 38 | one place. 39 | 40 | In some cases, you may have a class that has basic features you need, 41 | but you want to add more features. This is a good time to extend that class. 42 | 43 | In the beginning, you may find it more complex to puzzle out which class 44 | is responsible for which piece of functionality. Later when you are more comfortable with inheritance you'll appreciate being able to make changes to a whole group of classes in a single location. 45 | 46 | ### Example 47 | 48 | For example, imagine the BreakOut game. You might have created classes 49 | for the Ball, Brick, and Paddle. These each need properties `x` and `y`. 50 | 51 | ```JavaScript 52 | class Ball { 53 | constructor() { 54 | this.x = 0 55 | this.y = 0 56 | } 57 | } 58 | 59 | class Brick { 60 | constructor() { 61 | this.x = 0 62 | this.y = 0 63 | } 64 | } 65 | 66 | class Paddle { 67 | constructor() { 68 | this.x = 0 69 | this.y = 0 70 | } 71 | } 72 | ``` 73 | 74 | These implementations have a lot of duplication. You can save yourself 75 | some trouble by adding a superclass lets call it Sprite, that Ball, 76 | Brick and Paddle inherit from. 77 | 78 | ```JavaScript 79 | class Sprite { 80 | constructor() { 81 | this.x = 0 82 | this.y = 0 83 | } 84 | } 85 | class Ball extends Sprite { 86 | constructor() { 87 | super() 88 | } 89 | } 90 | 91 | class Brick extends Sprite { 92 | constructor() { 93 | super() 94 | } 95 | } 96 | 97 | class Paddle extends Sprite { 98 | constructor() { 99 | super() 100 | } 101 | } 102 | ``` 103 | 104 | Here the `x` and `y` properties are defined in one place. The other classes 105 | declare that they `extend Sprite`. A class that extends another class must call `super()` in its constructor! Calling super is essentially 106 | calling the `constructor()` in the superclass, Sprite in this case. 107 | 108 | If the constructor requires parameters you'll have to include them in 109 | `super()`. For example, if out implementation wanted to include values 110 | for x and y when the class was initialized we might: 111 | 112 | ```JavaScript 113 | class Sprite { 114 | constructor(x = 0, y = 0) { 115 | this.x = 0 116 | this.y = 0 117 | } 118 | } 119 | class Ball extends Sprite { 120 | constructor(x, y) { 121 | super(x, y) 122 | } 123 | } 124 | 125 | class Brick extends Sprite { 126 | constructor(x, y) { 127 | super(x, y) 128 | } 129 | } 130 | 131 | class Paddle extends Sprite { 132 | constructor(x, y) { 133 | super(x, y) 134 | } 135 | } 136 | ``` 137 | 138 | Here every subclass takes `x` and `y` in the constructor and passes these on 139 | to the superclass. The superclass includes a default value in case these values are missing. 140 | 141 | ## Extending Phaser's classes 142 | 143 | Phaser's classes exist for you to use. You can use them as is. 144 | 145 | In some cases, they also may not have all of the functionality that you might need for your uses. In these cases, you can add new properties and methods by creating a new class that extends one of the Phaser classes. 146 | 147 | ### Extending Phaser.Scene 148 | 149 | Phaser games are made up of Scenes. A scene represents one view of a game. A game might have a scene for preloading, 150 | a scene that displays a menu, and a scene to play the game. 151 | 152 | Each of these scenes would need custom code that is unique to each. A good way to organize code around this is to create custom classes that extend Phaser.Scene. 153 | 154 | ## Challenges 155 | 156 | - Refactor the tutorial code to use inheritance 157 | - Move Scenes into their own file creating a class that extends Phaser.Scene. 158 | 159 | 160 | -------------------------------------------------------------------------------- /notes/old/class-10/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 Class 10 2 | 3 | ## Phaser Systems 4 | 5 | Libraries are built to solve problems by abstracting solutions into functions and objects that can be used to solve a wider variety of problems. This class will look at that in the context of Phaser 3. 6 | 7 | ## Objectives 8 | 9 | - Define what a spritesheet 10 | - Define what problem a spritesheet is trying to solve 11 | - Define use casecases for spritesheet 12 | - Use Spritesheets to create animation 13 | - Solving problems with libraries 14 | - Using the documentation 15 | 16 | ## Spritesheets 17 | 18 | Sprite sheets are used in games to create animated graphics. 19 | 20 | Animation can be created in two ways 21 | 22 | 1. Animation can be created by moving things on the screen. Imagine this as animating or changing the value of numeric properties over time. 23 | 2. Animation can also be created by showing a series of images sequentially. 24 | 25 | Games will use both solutions together! 26 | 27 | The first solution is good when things move, scale, and rotate on the screen. 28 | 29 | The second solution is good when you have an element that needs a very detailed motion. For example, a character talking would require a series of images of their mouth in different shapes, a character swinging a sword etc. 30 | 31 | This second example requires us to show a series of images in sequence quickly like what happens when you watch a film or video. With the difference that we are going to apply it to a small area of the screen rather than the whole screen. 32 | 33 | What's a Spritesheet? 34 | 35 | https://www.codeandweb.com/what-is-a-sprite-sheet 36 | 37 | Watch this and discuss 38 | 39 | ## Creating Sprite Sheets with Phaser 3 40 | 41 | Let's look at this section from the tutorial: 42 | 43 | - https://phaser.io/tutorials/making-your-first-phaser-3-game/part5 44 | 45 | Look at the art and look at the code. Discuss what is going on here with a partner. 46 | 47 | Class discussion about spritesheets. 48 | 49 | ## Challenge 50 | 51 | - Continue to work on the tutorial and final project. 52 | 53 | ## Resources 54 | 55 | - 56 | 57 | 58 | -------------------------------------------------------------------------------- /notes/old/class-11/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 Class 11 2 | 3 | ## Physics with Phaser 4 | 5 | This class will take a closer look at Phasers Physics system. 6 | 7 | ## Objectives 8 | 9 | - 10 | 11 | ## Physics 12 | 13 | 2d physics systems define objects with arbitray 2d geometry that move, collide and interact with other objects and gravity in a way that emulates object in the real world. 14 | 15 | The physics system works by defining an Object called a body. The physics simulation applies physical effects and interactions to all bodies in the simulation resolving collisions and gravity. 16 | 17 | Bodies are assigned to Sprites that represent objects on the screen. These sprites inherit x, y, and rotation values from their physics body. 18 | 19 | Discuss physics and bodies. 20 | 21 | - What objects are involved? 22 | - Why separate Sprites and Physics Bodies? 23 | 24 | ## Challenges 25 | 26 | - Edit physics properties of bodies 27 | - Refine physics interactions 28 | - Continue working on tutorial project 29 | 30 | ## Resources 31 | 32 | - -------------------------------------------------------------------------------- /notes/old/class-12/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 class 12 2 | 3 | ## Troubleshooting and Lab 4 | 5 | This class will be spent troubleshooting and working on solving problems with the Phaser project. 6 | 7 | ## Objectives 8 | 9 | - Identify problems 10 | - Identify the error type 11 | - Look for the line number 12 | - Read the stack trace 13 | 14 | ## Challenges 15 | 16 | - Identify problems and solutions 17 | - Identifying the problem 18 | - View the stack trace 19 | - Identify the line and column where the error occurred 20 | - Reading the error message 21 | - Develop a strategy to solve the problem 22 | - Use console.log() 23 | - Use Chrome debugging tools 24 | - View variables in scope 25 | - Divide and conquer 26 | - Searching for answers 27 | - Defining an effective searach query 28 | - Evaluating search results 29 | 30 | -------------------------------------------------------------------------------- /notes/old/class-13/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 - Class 13 2 | 3 | Present your projects 4 | 5 | ## Presenting your project 6 | 7 | Be prepared to show your work in class. You should be able to explain your solution to the best of your ability. 8 | 9 | If you have any problems or errors in your code you should be able to say what where and when the problem ocurred and what you have tried to solve it so far. 10 | 11 | Look at this as an opportunity to practice for a coding interview. 12 | 13 | ## Aside: Why? 14 | 15 | Why are we learning all of the Class syntax? React! 16 | 17 | React uses ES6 class syntax heavily. React is built from 18 | components, and components are based on and written using 19 | ther ES6 class syntax. 20 | 21 | While you may or may not consider games to be fun. All of 22 | the problems you solve in games are very similar to the 23 | problems you're solving elsewhere. A two dimensional array 24 | of bricks might really be a graph of productsm matched to 25 | users as recommendations. 26 | 27 | Solving problems is your job as a software developer. You 28 | should not limit yourself in the types of problems want 29 | to solve. Instead you should be willing and able to 30 | solve any problem that comes along. 31 | 32 | Here are a few of the bigger problems you are solving: 33 | 34 | - Managing data 35 | - Multidimensional arrays 36 | - complex objects 37 | - Organizing and structuring code 38 | - Using Classes 39 | - Handing events 40 | - Dependancy Injection 41 | 42 | These ideas apply to all software development. 43 | 44 | ## Lab and Review 45 | 46 | Students work in groups to solve problems. Students offer problems they are having, list these on board. 47 | 48 | **Discuss problems and solutions.** 49 | 50 | Group/pair students to work together for a 15 to 20 min block of time with the goal of solving one of the problems from the list. 51 | 52 | **Take a break** 53 | 54 | Repeat the process again mixing group/pairs. 55 | 56 | End class with a review of the problems and solutions that were developed during class. 57 | 58 | ## After class 59 | 60 | - Finish up the Oregon Trail Project 61 | - Code review your work with another student 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /notes/old/class-14/README.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 Class 14 2 | 3 | Final Assessment 4 | 5 | ## Final assessment 6 | 7 | The final assessment will be given in class on this day. 8 | 9 | Be sure to study the following topics any or all of these will can be in the assessment. 10 | 11 | - Arrays 12 | - Object Literal notation 13 | - Loops 14 | - Conditional statements and logic 15 | - Defining classes in JS 16 | - Properties 17 | - Methods 18 | - Constructor 19 | - Extends 20 | - Dependency Injection 21 | - Scope and variables 22 | - `const`, `let`, and `var` 23 | - Block vs function scope 24 | - Closure 25 | - Template Strings 26 | 27 | ## Resources 28 | 29 | - See the study guide -------------------------------------------------------------------------------- /notes/old/notes/activity-1.js: -------------------------------------------------------------------------------- 1 | 2 | // Knight rider/scrolling message 3 | 4 | // Split string into array 5 | const strArray = "Hello World".split() 6 | 7 | // make a function that makes an array of length n 8 | function makeArray(n, str) { 9 | const arr = [] 10 | for (let i = 0; i < n; i += 1) { 11 | arr.push(str) 12 | } 13 | return arr 14 | } 15 | 16 | const display = makeArray(12, '0') 17 | 18 | // Display your array in the 19 | 20 | // 21 | 22 | function mapArrayto(targetArray, sourceArray, startIndex) { 23 | for (let i = 0; i < targetArray.length; i += 1) { 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /notes/old/notes/activity-1.md: -------------------------------------------------------------------------------- 1 | # Activity Make Grid 2 | 3 | ```JavaScript 4 | 5 | ``` -------------------------------------------------------------------------------- /notes/old/notes/assignment-template.md: -------------------------------------------------------------------------------- 1 | # FEW 1.2 - Foundation JavaScript - Assignment 2 | 3 | ## What you will learn 4 | 5 | ## Project Requirements 6 | 7 | ### Deliverables 8 | 9 | ## Due Date 10 | 11 | ## Assignment -------------------------------------------------------------------------------- /notes/old/notes/boxes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | 20 | 21 | 22 | 23 | 69 | -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-Gradient-Bricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-Gradient-Bricks.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-Target.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-Target.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-circle.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-gradient-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-gradient-back.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-gradient.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-rainbow-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-rainbow-1.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-rainbow-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-rainbow-2.png -------------------------------------------------------------------------------- /notes/old/notes/class-03-old/images/Break-Bricks-rainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/class-03-old/images/Break-Bricks-rainbow.png -------------------------------------------------------------------------------- /notes/old/notes/final-assessment-2.md: -------------------------------------------------------------------------------- 1 | # Final Assessment 2 | 3 | Make a React Project - use npx create-react-app final 4 | 5 | Make a Component with your name - This component should display your first and last name. Import and display your component at the top of your App component. 6 | 7 | Make a new Component that will display a Band. It will show the name, country of origin, and the number of fans. You'll be using the data from the Metal.json. 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /notes/old/notes/final-assessment.js: -------------------------------------------------------------------------------- 1 | // Use ESLint to lint all of your code. 2 | 3 | /* 4 | 5 | You need to build a project that keeps track of 6 | 7 | */ 8 | 9 | -------------------------------------------------------------------------------- /notes/old/notes/project-phaser-rubric.md: -------------------------------------------------------------------------------- 1 | # Phaser Project Rubric 2 | 3 | | - | Does not meet expectations | Meets expectations | Exceeds expectations | 4 | |:-------------|:---------------------------|:-------------------------|:---------------------| 5 | | Completion | Did not complete | Completed tutorial | Implemented new features not found in the tutorial | 6 | | Functional | Is not functional | Base tutorial functional | Built new functionality onto the base tutorial | 7 | | Code quality | Indentation is bad spacing is inconsistent | Solved all linter warnings | Code is well commented | 8 | | Work Ethic | Did not commit when working on project | Initial commit at class and commit while working | Commits show 3 hours and commit messages clearly document process | -------------------------------------------------------------------------------- /notes/old/notes/solutions/README.md: -------------------------------------------------------------------------------- 1 | # Solutions 2 | 3 | This folder contains solutions to the projects. 4 | 5 | - [Breakout](breakout) 6 | - [Oregon Trail](oregon-trail) 7 | - [Boom Dots Phaser 3](https://github.com/soggybag/doom-bots-webpack) 8 | - [Flappy Bird Phaser 3](https://github.com/soggybag/flappy-bird-webpack) -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | padding: 0; 7 | margin: 0; 8 | border: 0; 9 | height: 100%; 10 | overflow: hidden; 11 | font-family: 'Roboto', sans-serif; 12 | font-size: 18px; 13 | line-height: 1.5; 14 | /* background-color: rgb(167, 202, 255); */ 15 | background-image: url(../images/stars-2.png); 16 | background-size: cover; 17 | } 18 | 19 | h1, h2, h3, h4, h5, h6 { 20 | font-family: 'Bai Jamjuree', sans-serif; 21 | } 22 | 23 | h1 { 24 | margin: 0 0 0 0; 25 | } 26 | 27 | p { 28 | margin: 0; 29 | } 30 | 31 | button { 32 | border: 1px solid white; 33 | border-radius: 0.5em 0 0.5em 0; 34 | background-color: black; 35 | padding: 0.5em; 36 | color: white; 37 | } 38 | 39 | .hidden { 40 | display: none; 41 | } 42 | 43 | .title { 44 | grid-area: t; 45 | color: #fff; 46 | } 47 | 48 | #journey { 49 | height: 100%; 50 | width: 800px; 51 | margin: auto; 52 | display: grid; 53 | grid-template-columns: repeat(12, 1fr); 54 | grid-template-rows: 4.5em 14em 200px; 55 | grid-template-areas: 56 | "t t t t t t t t t t t t" 57 | "a a a a b b b b b c c c" 58 | "d d d d d d d d d d d d"; 59 | grid-gap: 1em; 60 | } 61 | 62 | #event { 63 | background-color: magenta; 64 | } 65 | 66 | #progress-area { 67 | position: relative; 68 | grid-area: d; 69 | } 70 | 71 | #trees { 72 | width: 100%; 73 | image-rendering: pixelated; 74 | } 75 | 76 | #caravan { 77 | position: absolute; 78 | top: 50%; 79 | transform: translate(-50%, -50%); 80 | left: 0; 81 | } 82 | 83 | .info-box { 84 | border-radius: 1em 0 1em 0; 85 | background-color: rgba(255, 255, 255, 0.152); 86 | padding: 1em; 87 | color: #fff; 88 | } 89 | 90 | #stats-area { 91 | grid-area: a; 92 | } 93 | 94 | .stat { 95 | color: #888; 96 | } 97 | 98 | .stat-value { 99 | color: rgb(216, 216, 216); 100 | float: right; 101 | font-weight: bold; 102 | } 103 | 104 | #updates-area { 105 | overflow-y: scroll; 106 | grid-area: b 107 | } 108 | 109 | .update-positive { 110 | color: #669966; 111 | } 112 | 113 | .update-negative { 114 | color: red; 115 | } 116 | 117 | .update-neutral { 118 | color: #90908F; 119 | } 120 | 121 | #shop { 122 | grid-area: c; 123 | } 124 | 125 | .product { 126 | float: left; 127 | margin: 5px; 128 | padding: 0.5em; 129 | border: 1px solid white; 130 | border-radius: 0.5em 0 0.5em 0; 131 | font-size: 12px; 132 | } 133 | 134 | #shop button { 135 | clear: both; 136 | float: left; 137 | margin: 5px; 138 | } 139 | 140 | #attack { 141 | grid-area: c; 142 | } -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/Planets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/Planets.png -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/Ship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/Ship.png -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/Trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/Trees.png -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/stars-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/stars-2.png -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/stars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/stars.jpg -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/images/wagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Make-School-Courses/FEW-1.2-JavaScript-Foundations/25a4ce46a7648f277ce536451550d9e6122a5a32/notes/old/notes/solutions/oregon-trail/images/wagon.png -------------------------------------------------------------------------------- /notes/old/notes/solutions/oregon-trail/index.html: -------------------------------------------------------------------------------- 1 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
120 |
154 |
155 |
156 |
157 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/oregon-trail/js/Caravan.js:
--------------------------------------------------------------------------------
1 | // Caravan.js
2 | // ---------------------------------------------------------
3 | // Caravan
4 |
5 | class Caravan {
6 | constructor(game) {
7 | this.game = game;
8 | // Initialize Caravan with a default Object and proeprties
9 | this.init({
10 | day: 0,
11 | distance: 0,
12 | crew: 30,
13 | food: 80,
14 | oxen: 2,
15 | money: 300,
16 | firepower: 2
17 | });
18 | }
19 |
20 | // Initializes the caravan
21 | init({ day, distance, crew, food, oxen, money, firepower }) {
22 | this.day = day;
23 | this.distance = distance;
24 | this.crew = crew;
25 | this.food = food;
26 | this.oxen = oxen;
27 | this.money = money;
28 | this.firepower = firepower;
29 | }
30 |
31 | // update weight and capacity
32 | updateWeight () {
33 | let droppedFood = 0;
34 | let droppedGuns = 0;
35 |
36 | // how much can the caravan carry
37 | this.capacity = this.oxen * Config.WEIGHT_PER_OX + this.crew * Config.WEIGHT_PER_PERSON;
38 |
39 | // how much weight do we currently have
40 | this.weight = this.food * Config.FOOD_WEIGHT + this.firepower * Config.FIREPOWER_WEIGHT;
41 |
42 | // drop things behind if it's too much weight
43 | // assume guns get dropped before food
44 | while (this.firepower && this.capacity <= this.weight) {
45 | this.firepower--;
46 | this.weight -= Config.FIREPOWER_WEIGHT;
47 | droppedGuns++;
48 | }
49 |
50 | if (droppedGuns) {
51 | this.game.ui.notify(`Left ${droppedGuns} guns behind`, 'negative');
52 | }
53 |
54 | while (this.food && this.capacity <= this.weight) {
55 | this.food--;
56 | this.weight -= Config.FOOD_WEIGHT;
57 | droppedFood++;
58 | }
59 |
60 | if (droppedFood) {
61 | this.game.ui.notify(`Left ${droppedFood} food provisions behind`, 'negative');
62 | }
63 | }
64 |
65 |
66 | // update covered distance
67 | updateDistance () {
68 | // the closer to capacity, the slower
69 | const diff = this.capacity - this.weight;
70 | const speed = Config.SLOW_SPEED + diff / this.capacity * Config.FULL_SPEED;
71 | this.distance += speed;
72 | }
73 |
74 | // food consumption
75 | consumeFood () {
76 | this.food -= this.crew * Config.FOOD_PER_PERSON;
77 |
78 | if (this.food < 0) {
79 | this.food = 0;
80 | }
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/oregon-trail/js/Config.js:
--------------------------------------------------------------------------------
1 | // Config.js
2 | // --------------------------------------------------------------
3 | // Config - holds static properties that act as default
4 | // global constants used by the game.
5 | // Get these values with: Config.PROPERTY_NAME
6 | class Config {
7 |
8 | }
9 |
10 | // constants
11 | Config.WEIGHT_PER_OX = 20;
12 | Config.WEIGHT_PER_PERSON = 2;
13 | Config.FOOD_WEIGHT = 0.6;
14 | Config.FIREPOWER_WEIGHT = 5;
15 | Config.GAME_SPEED = 800;
16 | Config.DAY_PER_STEP = 0.2;
17 | Config.FOOD_PER_PERSON = 0.02;
18 | Config.FULL_SPEED = 5;
19 | Config.SLOW_SPEED = 3;
20 | Config.FINAL_DISTANCE = 1000;
21 | Config.EVENT_PROBABILITY = 0.15;
22 | Config.ENEMY_FIREPOWER_AVG = 5;
23 | Config.ENEMY_GOLD_AVG = 50;
24 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/oregon-trail/js/Game.js:
--------------------------------------------------------------------------------
1 | // Game.js
2 | // ---------------------------------------------------------
3 | // Game - The Game class creates and manages all of the
4 | // objects that run the game.
5 |
6 |
7 | class Game {
8 | // Initialize the Game Object
9 | constructor() {
10 | // Create dependent Objects
11 | this.ui = new UI(this);
12 | this.eventManager = new EventManager(this);
13 | this.caravan = new Caravan(this);
14 |
15 | // pass references - set dependencies
16 | this.caravan.ui = this.ui;
17 | this.caravan.eventManager = this.eventManager;
18 |
19 | this.ui.caravan = this.caravan;
20 | this.ui.eventManager = this.eventManager;
21 |
22 | this.eventManager.caravan = this.caravan;
23 | this.eventManager.ui = this.ui;
24 |
25 | // begin adventure!
26 | this.startJourney();
27 | }
28 |
29 |
30 | // start the journey and time starts running
31 | startJourney () {
32 | this.gameActive = true;
33 | this.previousTime = null;
34 | this.ui.notify('A great adventure begins', 'positive');
35 |
36 | this.step();
37 | }
38 |
39 |
40 | // game loop
41 | step(timestamp) {
42 |
43 | // starting, setup the previous time for the first time
44 | if(!this.previousTime){
45 | this.previousTime = timestamp;
46 | this.updateGame();
47 | }
48 |
49 | //time difference
50 | var progress = timestamp - this.previousTime;
51 |
52 | //game update
53 | if(progress >= Config.GAME_SPEED) {
54 | this.previousTime = timestamp;
55 | this.updateGame();
56 | }
57 |
58 | //we use "bind" so that we can refer to the context "this" inside of the step method
59 | if(this.gameActive) window.requestAnimationFrame(this.step.bind(this));
60 | }
61 |
62 | //update game stats
63 | updateGame() {
64 | //day update
65 | this.caravan.day += Config.DAY_PER_STEP;
66 |
67 | //food consumption
68 | this.caravan.consumeFood();
69 |
70 | //game over no food
71 | if(this.caravan.food === 0) {
72 | this.ui.notify('Your caravan starved to death', 'negative');
73 | this.gameActive = false;
74 | return;
75 | }
76 |
77 | //update weight
78 | this.caravan.updateWeight();
79 |
80 | //update progress
81 | this.caravan.updateDistance();
82 |
83 | //show stats
84 | this.ui.refreshStats();
85 |
86 | //check if everyone died
87 | if(this.caravan.crew <= 0) {
88 | this.caravan.crew = 0;
89 | this.ui.notify('Everyone died', 'negative');
90 | this.gameActive = false;
91 | return;
92 | }
93 |
94 | //check win game
95 | if(this.caravan.distance >= Config.FINAL_DISTANCE) {
96 | this.ui.notify('You have returned home!', 'positive');
97 | this.gameActive = false;
98 | return;
99 | }
100 |
101 | //random events
102 | if(Math.random() <= Config.EVENT_PROBABILITY) {
103 | this.eventManager.generateEvent();
104 | }
105 |
106 | }
107 |
108 | // pause the journey
109 | pauseJourney () {
110 | this.gameActive = false;
111 | }
112 |
113 | // resume the journey
114 | resumeJourney () {
115 | this.gameActive = true;
116 | this.step();
117 | }
118 | }
119 |
120 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/oregon-trail/js/UI.js:
--------------------------------------------------------------------------------
1 | // UI.js
2 | // --------------------------------------------------------
3 | // UI - This class is responsible for managing User Interface
4 | // elements. It shows the Attack and Shop popups and displays
5 | // notificcations as they occur.
6 |
7 | class UI {
8 | constructor(game) {
9 | this.game = game;
10 | this.shopDiv = document.getElementById('shop');
11 | this.prodsDiv = document.getElementById('prods');
12 |
13 | this.shopDiv.addEventListener('click', (e) => {
14 | this.shopDivHandler(e);
15 | });
16 | }
17 |
18 | // show a notification in the message area
19 | notify (message, type) {
20 | const { ceil } = Math;
21 | document.getElementById('updates-area').innerHTML = `
121 |
124 | Oregon Trail
122 |A totally accurate historical simulation!
123 |
125 |
134 |
135 |
136 |
137 | Day
126 | Distance
127 | Crew
128 | Dilitheum Crystals
129 | Supplies
130 | Credits
131 | Phasers
132 | Tonnage
133 |
138 |
142 |
143 |
139 |
140 |
141 |
144 |
145 |
146 |
147 |
148 |
149 |
150 | 
151 | 
152 |
153 |
151 |
152 | Day ${ceil(this.caravan.day)}: ${message}
${document.getElementById('updates-area').innerHTML}`;
22 | }
23 |
24 | // refresh visual caravan stats
25 | refreshStats () {
26 | // Destructure some objects for easy access
27 | const { day, distance, crew, oxen, food, money, firepower, weight, capacity } = this.caravan;
28 | const { ceil, floor } = Math;
29 |
30 | // modify the dom
31 | document.getElementById('stat-day').innerHTML = `${ceil(day)}`;
32 | document.getElementById('stat-distance').innerHTML = `${floor(distance)}`;
33 | document.getElementById('stat-crew').innerHTML = `${crew}`;
34 | document.getElementById('stat-oxen').innerHTML = `${oxen}`;
35 | document.getElementById('stat-food').innerHTML = `${ceil(food)}`;
36 | document.getElementById('stat-money').innerHTML = `${money}`;
37 | document.getElementById('stat-firepower').innerHTML = `${firepower}`;
38 | document.getElementById('stat-weight').innerHTML = `${ceil(weight)}/${capacity}`;
39 |
40 | // update caravan position
41 | document.getElementById('caravan').style.left = `${(380 * distance / Config.FINAL_DISTANCE)}px`;
42 | }
43 |
44 | // show attack
45 | showAttack (firepower, gold) {
46 | var attackDiv = document.getElementById('attack');
47 | attackDiv.classList.remove('hidden');
48 |
49 | // keep properties
50 | this.firepower = firepower;
51 | this.gold = gold;
52 |
53 | // show firepower
54 | document.getElementById('attack-description').innerHTML = `Firepower: ${firepower}`;
55 |
56 | // init once
57 | if(!this.attackInitiated) {
58 |
59 | // fight
60 | document.getElementById('fight').addEventListener('click', this.fight.bind(this));
61 |
62 | // run away
63 | document.getElementById('runaway').addEventListener('click', this.runaway.bind(this));
64 |
65 | this.attackInitiated = true;
66 | }
67 | }
68 |
69 | // fight
70 | fight () {
71 | console.log('Fight!');
72 |
73 | var firepower = this.firepower;
74 | var gold = this.gold;
75 |
76 | // damage can be 0 to 2 * firepower
77 | var damage = Math.ceil(Math.max(0, firepower * 2 * Math.random() - this.caravan.firepower));
78 |
79 | // check there are survivors
80 | if (damage < this.caravan.crew) {
81 | this.caravan.crew -= damage;
82 | this.caravan.money += gold;
83 | this.notify(`${damage} people were killed fighting`, 'negative');
84 | this.notify('Found $' + gold, 'gold');
85 | } else {
86 | this.game.caravan.crew = 0;
87 | this.notify('Everybody died in the fight', 'negative');
88 | }
89 |
90 | // resume journey
91 | document.getElementById('attack').classList.add('hidden');
92 | this.game.resumeJourney();
93 | }
94 |
95 | // runing away from enemy
96 | runaway () {
97 | console.log('runway!')
98 |
99 | var firepower = this.firepower;
100 |
101 | // damage can be 0 to firepower / 2
102 | var damage = Math.ceil(Math.max(0, firepower * Math.random()/2));
103 |
104 | // check there are survivors
105 | if(damage < this.caravan.crew) {
106 | this.game.caravan.crew -= damage;
107 | this.notify(`${damage} people were killed running`, 'negative');
108 | }
109 | else {
110 | this.gamge.caravan.crew = 0;
111 | this.notify('Everybody died running away', 'negative');
112 | }
113 |
114 | // remove event listener
115 | // document.getElementById('runaway').removeEventListener('click', this.runaway);
116 |
117 | // resume journey
118 | document.getElementById('attack').classList.add('hidden');
119 | this.game.resumeJourney();
120 | }
121 |
122 | // show shop
123 | showShop (products) {
124 | console.log('Show Shop!');
125 | console.log(products)
126 |
127 | // show shop area
128 | this.shopDiv.classList.remove('hidden');
129 |
130 | // clear existing content
131 | this.prodsDiv.innerHTML = '';
132 |
133 | //show products
134 | let product;
135 | for(let i = 0; i < products.length; i++) {
136 | product = products[i];
137 | this.prodsDiv.innerHTML += `${product.qty} ${product.item} - $${product.price}
`;
138 | }
139 | }
140 |
141 | shopDivHandler (e) {
142 | // what was clicked
143 | var target = e.target || e.src;
144 |
145 | // exit button
146 | if (target.tagName == 'BUTTON') {
147 | //resume journey
148 | this.shopDiv.classList.add('hidden');
149 | this.game.resumeJourney();
150 | } else if (target.tagName == 'DIV' && target.className.match(/product/)) {
151 | // Buy a Product
152 | this.buyProduct({
153 | item: target.getAttribute('data-item'),
154 | qty: Number(target.getAttribute('data-qty')),
155 | price: Number(target.getAttribute('data-price'))
156 | });
157 |
158 | }
159 | }
160 |
161 | // ----------------------------------
162 | //buy product
163 | buyProduct (product) {
164 | const { item, price, qty } = product
165 | //check we can afford it
166 | if (price > this.game.caravan.money) {
167 | this.notify('Not enough money', 'negative');
168 | return false;
169 | }
170 |
171 | this.game.caravan.money -= price;
172 |
173 | this.game.caravan[item] += qty;
174 |
175 | this.notify(`Bought ${qty} x ${item}`, 'positive');
176 |
177 | //update weight
178 | this.game.caravan.updateWeight();
179 |
180 | //update visuals
181 | this.refreshStats();
182 | }
183 | }
184 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/oregon-trail/js/main.js:
--------------------------------------------------------------------------------
1 | {
2 |
3 | // This script creates an instance of game in a block
4 | // This is the entry point for the program.
5 |
6 | const game = new Game();
7 |
8 | }
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/notes/old/notes/solutions/shopping-cart-data.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/notes/old/notes/study-guide.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/notes/old/notes/study-guide.md:
--------------------------------------------------------------------------------
1 | # Study Guide
2 |
3 | The notes here are to help you prepare for the final assessment.
4 |
5 | - Arrays
6 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
7 | - Multi Dimensional Arrays
8 | - https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
9 | - Dependancy Injection
10 | - [Class 04](class-04)
11 | - https://dev.to/kayis/dependency-injection-in-javascript-4km
12 | - Refactoring
13 | - [Class 4](class-04)
14 | - https://en.wikipedia.org/wiki/Code_refactoring
15 | - ES6 Classes
16 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
17 | - EventListeners
18 | - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
19 | - Template Strings
20 | - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
21 | - Variables: const, let, and var
22 | - https://hackernoon.com/js-var-let-or-const-67e51dbb716f
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/reveal-md.json:
--------------------------------------------------------------------------------
1 | {
2 | "separator": "^\n\n",
3 | "verticalSeparator": "^\n\n",
4 | "theme": "black",
5 | "watch": true,
6 | "title": "Syllabus Template Slides",
7 | "static": "Slides",
8 | "scripts": [
9 | ],
10 | "assetsDir": "assets",
11 | "staticDirs": "Lessons/Images",
12 | "css": [
13 | "Reveal/makeschool.css"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/reveal.json:
--------------------------------------------------------------------------------
1 | {
2 | "controls": true,
3 | "progress": true,
4 | "autoPlayMedia": false,
5 | "slideNumber": "c/t",
6 | "showSlideNumber": "all",
7 | "controlsTutorial": true,
8 | "controlsLayout": "edges",
9 | "transition": "slide",
10 | "transitionSpeed": "medium",
11 | "minScale": 0.5,
12 | "maxScale": 3
13 | }
14 |
--------------------------------------------------------------------------------
/syllabus-guide.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Product College Course Template
4 |
5 | This guide applies to courses taught at the PC/Make School. Tutorials or other resources
6 | should either be created as tutorials (see below) or added to Product College labs.
7 |
8 | Courses are hosted at: [Product College Courses](https://github.com/Product-College-Courses)
9 |
10 | The course hosted on GitHub should be the source of information used by students
11 | during any term. Students can always refer to a course repo for the latest up to
12 | date information, links to resources, and other relevant information.
13 |
14 | The GitHub Repo will contain the syllabus and all of the course session outlines. It will
15 | also contain vocabulary, best practice, resources, and other information.
16 |
17 | Starter code, and resources that contain directories and files should be hosted at
18 | [Product College Labs](https://github.com/Product-College-Labs).
19 |
20 | ## Create a new Course
21 |
22 | Create a new course on [Product College Courses](https://github.com/Product-College-Courses/).
23 |
24 | ### Naming the course
25 |
26 | Courses should be named with catalog abbreviation and number followed by the description
27 | followed by the course name. For example, the course:
28 |
29 | > FEW 1.1 Advanced HTML CSS JavaScript
30 |
31 | would become:
32 |
33 | > FEW-1.1-Advanced-HTML-CSS-JavaScript
34 |
35 | ### Intialize the Course with a README
36 |
37 | Intialize the course with a README.md. This will contain the course syllabus.
38 |
39 | ### Initial the course with a License
40 |
41 | Choose the MIT license.
42 |
43 | ## Use the Course Template
44 |
45 | Use the course [course-template](./course-template.md) as a starting point for your
46 | putting your course on the Product College Github.
47 |
48 | You can paste the contents of this template into your course README. What's important
49 | is the headings and outline. It's good for students if all courses follow the same
50 | structure.
51 |
52 | **Please follow this template! This is important for BPPE compliance.**
53 |
54 | Everything *not* marked *optional* should be included in the top level README in the
55 | Github repo.
56 |
57 | - [course-template](./course-template.md)
58 |
59 | ### Use Markdown
60 |
61 | Write your class using Markdown. Follow the structure of the course template. Make
62 | sensible use of Headings, Lists, and other mark up.
63 |
64 | #### Tips
65 |
66 | Use Headings in order! Only one H1 heading per page. For example the page might start
67 | with an H1, the next heading will be an H2, if another sub topic appears that needs a
68 | heading use an H3. When the next new topic appears it is an H2.
69 |
70 | ## Post to Product College Github
71 |
72 | Write your courses and post them to the product college Github.
73 | Courses should be posted to 'Product College Classes'.
74 |
75 | - https://github.com/Product-College-Courses
76 |
77 | ### Organizing Examples and Resources
78 |
79 | If your class needs to link to large and complex sample/starter projects post these
80 | to 'Product College Labs'. Small sample files can be included in the main class
81 | repository.
82 |
83 | - https://github.com/Product-College-Labs
84 |
85 | # Product College Tutorials
86 |
87 | Tutorials can be lessons that you teach in class or other instructional material that
88 | you create for PC.
89 |
90 | When creating tutorials or other resources use the Summer Academy tutorial template.
91 | When completed submit it to the web team for inclusion in make School Web site.
92 |
93 | - https://github.com/MakeSchool-Tutorials/Tutorial-Template
94 |
95 | # Track your challenges with
96 |
97 | Alan's amazing google doc spreadsheet master tracker:
98 |
99 | - https://docs.google.com/spreadsheets/d/1FZJv2AolWFZRUwx0fWTIilXurwVmHnYz-RY9XxF-KPA/edit#gid=0
100 |
--------------------------------------------------------------------------------