Initial slides

Author: kenwheeler

demo/slides/basics.js

@@ -1,15 +1,75 @@
-/* eslint-disable react/jsx-key */
+/* eslint-disable react/jsx-key, max-len */
 import React from 'react';
 
 import Slide from './slide';
 
 export default {
   slides: [
     <Slide>
-      <h1>test</h1>
+      <h1>I don't know anything about game dev.</h1>
     </Slide>,
     <Slide>
-      <h1>test2</h1>
+      <h1>Should you build a game with React?</h1>
+    </Slide>,
+    <Slide>
+      <h1>Can <del>Should</del> you build a game with React?</h1>
+    </Slide>,
+    <Slide>
+      <h1>You sure can!</h1>
+    </Slide>,
+    <Slide>
+      <h1>Why would you build a game with React?</h1>
+    </Slide>,
+    <Slide>
+      <ul>
+        <li>The same game code can work on the web, iOS & Android</li>
+        <li>You primarily write React code</li>
+        <li>You dont feel like learning Unity</li>
+        <li>Fun?</li>
+      </ul>
+    </Slide>,
+    <Slide>
+      <h1>Basic Concepts</h1>
+    </Slide>,
+    <Slide>
+      <h2>Game Loop</h2>
+      <p>A programmatic loop that gets input, updates game state and draws the game.</p>
+    </Slide>,
+    <Slide>
+      <h2>Tick</h2>
+      <p>Each step of the loop.</p>
+    </Slide>,
+    <Slide>
+      <h2>Update Function</h2>
+      <p>A function called on each tick where game logic is checked.</p>
+    </Slide>,
+    <Slide>
+      <h2>Stage</h2>
+      <p>The main game container to which game entities are added.</p>
+    </Slide>,
+    <Slide>
+      <h2>Sprite</h2>
+      <p>An often animated bitmap graphic derived from a larger tiled image of states and steps.</p>
+    </Slide>,
+    <Slide>
+      <h2>TileMap</h2>
+      <p>A large graphic created by rendering a matrix of position indexes derived from a smaller set of common tiles.</p>
+    </Slide>,
+    <Slide>
+      <h2>Physics Engine</h2>
+      <p>A class that simulates physical systems.</p>
+    </Slide>,
+    <Slide>
+      <h2>Rigid Body Physics Engine</h2>
+      <p>A physics engine that assumes that physical bodies are not elastic or fluid.</p>
+    </Slide>,
+    <Slide>
+      <h2>Physics World</h2>
+      <p>A class that provides a set of conditions that the simulation abides by.</p>
+    </Slide>,
+    <Slide>
+      <h2>Physics Body</h2>
+      <p>A class that acts as an entity inside the physics world.</p>
     </Slide>,
   ],
 };

demo/slides/index.js

@@ -2,8 +2,13 @@ import React, { Component, PropTypes } from 'react';
 import Gamepad from 'html5-gamepad';
 
 import Basics from './basics';
+import Loop from './loop';
+import Scaling from './scaling';
+import Sprites from './sprites';
+import TileMaps from './tilemaps';
+import Physics from './physics';
 
-const slides = [Basics];
+const slides = [Basics, Loop, Scaling, Sprites, TileMaps, Physics];
 
 const gamepad = new Gamepad();
 
@@ -28,12 +33,12 @@ export default class Slides extends Component {
     }
 
     if (gamepad.button(0, 'button 14')) {
-      this.handlePrev();
+      this.handlePrev(true);
       return;
     }
 
     if (gamepad.button(0, 'button 15')) {
-      this.handleNext();
+      this.handleNext(true);
       return;
     }
 
@@ -54,7 +59,7 @@ export default class Slides extends Component {
     }
   }
 
-  handleNext() {
+  handleNext(restartLoop) {
     const { currentSlide } = this.state;
     const { index } = this.props;
 
@@ -64,20 +69,28 @@ export default class Slides extends Component {
       this.setState({
         currentSlide: currentSlide + 1,
       }, () => {
-        this.restartLoop();
+        if (restartLoop) {
+          this.restartLoop();
+        }
       });
     }
   }
 
-  handlePrev() {
+  handlePrev(restartLoop) {
     const { currentSlide } = this.state;
 
     if (currentSlide !== 0) {
       this.setState({
         currentSlide: currentSlide - 1,
       }, () => {
-        this.restartLoop();
+        if (restartLoop) {
+          this.restartLoop();
+        }
       });
+    } else {
+      if (restartLoop) {
+        this.restartLoop();
+      }
     }
   }
 

demo/slides/loop.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-key, max-len */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>Placeholder</h1>
+    </Slide>,
+  ],
+};

demo/slides/physics.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-key, max-len */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>Placeholder</h1>
+    </Slide>,
+  ],
+};

demo/slides/scaling.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-key, max-len */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>Placeholder</h1>
+    </Slide>,
+  ],
+};

demo/slides/slide.js

@@ -4,14 +4,15 @@ const slideStyles = {
   display: 'flex',
   flex: '1 1 0',
   alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: 'flex-start',
   maxWidth: '166vh',
-  background: 'red',
 };
 
 const Slide = (props) => (
   <div style={slideStyles}>
-    {props.children}
+    <div>
+      {props.children}
+    </div>
   </div>
 );
 

demo/slides/sprites.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-key, max-len */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>Placeholder</h1>
+    </Slide>,
+  ],
+};

demo/slides/tilemaps.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/jsx-key, max-len */
+import React from 'react';
+
+import Slide from './slide';
+
+export default {
+  slides: [
+    <Slide>
+      <h1>Placeholder</h1>
+    </Slide>,
+  ],
+};

public/index.css

@@ -15,6 +15,18 @@ html, body, #root {
   margin: 0;
   padding: 0;
   color: white;
+  font-family: 'Helvetica Neue';
+  font-size: 1.5em;
+}
+
+p {
+  font-size: 1.2em;
+  line-height: 1.5;
+}
+
+li {
+  font-size: 1.3em;
+  line-height: 1.5;
 }
 
 .intro {