veganaize/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="stage"></div>
    <h3>EDIT</h3>
    I Found you but didn't see you.
    Can you see my cursor?... Cursor!
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.6/EventEmitter.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

## script.js
// Main class handles game-level logic. A singleton class really.
class Game extends EventEmitter {
  constructor(options = {}) {
    super();
    this.player = new Protagonist();
    console.dir(this.player);
    this.sceneManager = new SceneManager(options.stage);
  }

  // Parts of the game can be written as functions
  // Here is an example:
  introduction() {
    const demoScene = new DemoScene();
    demoScene.addListener('scene:finished', () => {
      const gameOverScene = new GameOverScene();
      this.sceneManager.switchScene(gameOverScene);
    });
    this.sceneManager.switchScene(demoScene);
  }
}

// The protagonist, stores info about the main player
class Protagonist {
  constructor() {
    this.money = 0;
    this.name = 'Wolfe';
  }
}

// An abstract scene class
// Scenes are a set of instructions and dom elements that occupy the screenspace at a given time. Only one scene is active at a time.
class AbstractScene extends EventEmitter {
  constructor() {
    super();
    this.sceneContainer = document.createElement('div');
  }
}

// Demo scene showing example of how the class can work
class DemoScene extends AbstractScene {
  constructor() {
    super();
    const header = document.createElement('h3');
    header.innerText = "I am a scene";
    const button = document.createElement('button');
    button.innerText = 'Next';
    button.onclick = this.sceneComplete.bind(this);
    this.sceneContainer.appendChild(header);
    this.sceneContainer.appendChild(button);
  }

  sceneComplete() {
    this.emitEvent('scene:finished');
  }
}

class GameOverScene extends AbstractScene {
  constructor() {
    super();
    const header = document.createElement('h1');
    header.innerText = 'Game Over';
    this.sceneContainer.appendChild(header);
  }
}

// The scene manager manages the current scene
class SceneManager {
  constructor(stage) {
    this.stage = stage;
    this.scene = null;
  }

  // Use this to switch to a new scene instance
  switchScene(newScene) {
    this.scene = newScene;
    this.stage.innerHTML = '';
    this.stage.appendChild(newScene.sceneContainer);
  }
}

// The main function to start the game
function main() {
  const game = new Game( {
    stage: document.getElementById('stage')
  } );

  // Get the game going with introduction
  game.introduction();

}

window.onload = main;

## style.css
Empty file
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="stage"></div>
	<h3>EDIT</h3>
	I Found you but didn't see you.
	Can you see my cursor?... Cursor!
	<script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.6/EventEmitter.min.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	// Main class handles game-level logic. A singleton class really.
	class Game extends EventEmitter {
	constructor(options = {}) {
	super();
	this.player = new Protagonist();
	console.dir(this.player);
	this.sceneManager = new SceneManager(options.stage);
	}

	// Parts of the game can be written as functions
	// Here is an example:
	introduction() {
	const demoScene = new DemoScene();
	demoScene.addListener('scene:finished', () => {
	const gameOverScene = new GameOverScene();
	this.sceneManager.switchScene(gameOverScene);
	});
	this.sceneManager.switchScene(demoScene);
	}
	}

	// The protagonist, stores info about the main player
	class Protagonist {
	constructor() {
	this.money = 0;
	this.name = 'Wolfe';
	}
	}

	// An abstract scene class
	// Scenes are a set of instructions and dom elements that occupy the screenspace at a given time. Only one scene is active at a time.
	class AbstractScene extends EventEmitter {
	constructor() {
	super();
	this.sceneContainer = document.createElement('div');
	}
	}

	// Demo scene showing example of how the class can work
	class DemoScene extends AbstractScene {
	constructor() {
	super();
	const header = document.createElement('h3');
	header.innerText = "I am a scene";
	const button = document.createElement('button');
	button.innerText = 'Next';
	button.onclick = this.sceneComplete.bind(this);
	this.sceneContainer.appendChild(header);
	this.sceneContainer.appendChild(button);
	}

	sceneComplete() {
	this.emitEvent('scene:finished');
	}
	}

	class GameOverScene extends AbstractScene {
	constructor() {
	super();
	const header = document.createElement('h1');
	header.innerText = 'Game Over';
	this.sceneContainer.appendChild(header);
	}
	}

	// The scene manager manages the current scene
	class SceneManager {
	constructor(stage) {
	this.stage = stage;
	this.scene = null;
	}

	// Use this to switch to a new scene instance
	switchScene(newScene) {
	this.scene = newScene;
	this.stage.innerHTML = '';
	this.stage.appendChild(newScene.sceneContainer);
	}
	}

	// The main function to start the game
	function main() {
	const game = new Game( {
	stage: document.getElementById('stage')
	} );

	// Get the game going with introduction
	game.introduction();

	}

	window.onload = main;