From 6724b7c90b64b84451c20e888875c26e4e377ea3 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Fri, 15 Mar 2019 16:30:16 +0530
Subject: [PATCH] add templates for file mode

---
 src/components/CreateNewModal.jsx             | 27 +++++++++++-----
 src/components/SavedItemPane.jsx              |  1 -
 src/components/app.jsx                        |  4 +--
 src/templateList.js                           |  6 ++--
 .../template-files-kontra-game-engine.json    | 31 +++++++++++++++++++
 src/templates/template-files-vue.json         | 31 +++++++++++++++++++
 6 files changed, 87 insertions(+), 13 deletions(-)
 create mode 100644 src/templates/template-files-kontra-game-engine.json
 create mode 100644 src/templates/template-files-vue.json
diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index d0bf130..69bce81 100644
--- a/src/components/CreateNewModal.jsx
+++ b/src/components/CreateNewModal.jsx
@@ -197,14 +197,25 @@ export class CreateNewModal extends Component {
 					</button>
 					<p>Or choose from a template:</p>
 					<div class="saved-items-pane__container">
-						{templates.map(template => (
-							<ItemTile
-								inline
-								item={template}
-								focusable
-								onClick={onTemplateSelect.bind(null, template)}
-							/>
-						))}
+						{templates.map(template => {
+							if (
+								!this.state.isFileModeSelected ||
+								template.isFileModeSupported
+							) {
+								return (
+									<ItemTile
+										inline
+										item={template}
+										focusable
+										onClick={onTemplateSelect.bind(
+											null,
+											template,
+											this.state.isFileModeSelected
+										)}
+									/>
+								);
+							}
+						})}
 					</div>
 				</div>
 				<div class="tac">
diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx
index 9d54596..0061e8d 100644
--- a/src/components/SavedItemPane.jsx
+++ b/src/components/SavedItemPane.jsx
@@ -151,7 +151,6 @@ export default class SavedItemPane extends Component {
 				class={`saved-items-pane ${isOpen ? 'is-open' : ''}`}
 				onKeyDown={this.keyDownHandler.bind(this)}
 				aria-hidden={isOpen}
-				tabIndex={`${isOpen ? 0 : -1}`}
 			>
 				<button
 					onClick={this.onCloseIntent.bind(this)}
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 7ccb436..ce556d9 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -1368,8 +1368,8 @@ export default class App extends Component {
 		});
 	}
 
-	templateSelectHandler(template) {
-		fetch(`templates/template-${template.id}.json`)
+	templateSelectHandler(template, isFileMode) {
+		fetch(`templates/template-${isFileMode ? 'files-' : ''}${template.id}.json`)
 			.then(res => res.json())
 			.then(json => {
 				this.forkItem(json);
diff --git a/src/templateList.js b/src/templateList.js
index 7cc7c66..0c481e7 100644
--- a/src/templateList.js
+++ b/src/templateList.js
@@ -7,7 +7,8 @@ export default [
 	{
 		id: 'vue',
 		title: 'Vue',
-		img: 'assets/vue-logo.svg'
+		img: 'assets/vue-logo.svg',
+		isFileModeSupported: true
 	},
 	{
 		id: 'preact',
@@ -17,6 +18,7 @@ export default [
 	{
 		id: 'kontra-game-engine',
 		title: 'Kontra Game Engine',
-		img: 'assets/html5-logo.svg'
+		img: 'assets/html5-logo.svg',
+		isFileModeSupported: true
 	}
 ];
diff --git a/src/templates/template-files-kontra-game-engine.json b/src/templates/template-files-kontra-game-engine.json
new file mode 100644
index 0000000..b124319
--- /dev/null
+++ b/src/templates/template-files-kontra-game-engine.json
@@ -0,0 +1,31 @@
+{
+	"title": "Kontra game engine template",
+	"files": [
+		{
+			"content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width\" />\n    <title>Vue template</title>\n    <link rel=\"stylesheet\" href=\"styles/style.css\" />\n  </head>\n  <body>\n    <canvas></canvas>\n\n    <script src=\"https://unpkg.com/kontra@4.0.0/dist/core.js\"></script>\n    <script src=\"https://unpkg.com/kontra@4.0.0/dist/sprite.js\"></script>\n    <script src=\"https://unpkg.com/kontra@4.0.0/dist/gameLoop.js\"></script>\n    <script src=\"https://unpkg.com/kontra@4.0.0/dist/pointer.js\"></script>\n    <script src=\"https://unpkg.com/kontra@4.0.0/dist/keyboard.js\"></script>\n\n    <script src=\"script.js\"></script>\n  </body>\n</html>\n",
+			"name": "index.html",
+			"path": "index.html"
+		},
+		{
+			"children": [
+				{
+					"content": "",
+					"name": "style.css",
+					"path": "styles/style.css"
+				}
+			],
+			"isFolder": true,
+			"name": "styles",
+			"path": "styles"
+		},
+		{
+			"content": "// Learn More here -> https://straker.github.io/kontra/getting-started\nkontra.init();\n\nvar sprite = kontra.sprite({\n  x: 100, // starting x,y position of the sprite\n  y: 80,\n  color: \"#bad455\", // fill color of the sprite rectangle\n  width: 20, // width and height of the sprite rectangle\n  height: 40,\n  dx: 2 // move the sprite 2px to the right every frame\n});\n\nvar loop = kontra.gameLoop({\n  // create the main game loop\n  update() {\n    // update the game state\n    sprite.update();\n\n    // wrap the sprites position when it reaches\n    // the edge of the screen\n    if (sprite.x > kontra.canvas.width) {\n      sprite.x = -sprite.width;\n    }\n  },\n  render() {\n    // render the game state\n    sprite.render();\n  }\n});\n\nloop.start(); // start the game\n",
+			"name": "script.js",
+			"path": "script.js"
+		}
+	],
+	"id": "item-sr0eNHK58q",
+	"layoutMode": 2,
+	"mainSizes": ["200px", "53.0771%", "37.1917%"],
+	"sizes": [33.33, 33.33, 33.33]
+}
diff --git a/src/templates/template-files-vue.json b/src/templates/template-files-vue.json
new file mode 100644
index 0000000..d7b5afd
--- /dev/null
+++ b/src/templates/template-files-vue.json
@@ -0,0 +1,31 @@
+{
+	"title": "Vue template",
+	"content": "",
+	"files": [
+		{
+			"content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width\" />\n    <title>Vue template</title>\n    <link rel=\"stylesheet\" href=\"styles/style.css\" />\n  </head>\n  <body>\n    <div id=\"root\"><h1>Hello {{ message }}</h1></div>\n    <script src=\"https://unpkg.com/vue@2.6.9/dist/vue.min.js\"></script>\n    <script src=\"script.js\"></script>\n  </body>\n</html>\n",
+			"name": "index.html",
+			"path": "index.html"
+		},
+		{
+			"children": [
+				{
+					"content": "",
+					"name": "style.css",
+					"path": "styles/style.css"
+				}
+			],
+			"isFolder": true,
+			"name": "styles",
+			"path": "styles"
+		},
+		{
+			"content": "const app = new Vue({\n  el: '#root',\n  data: {\n    message: 'World'\n  }\n});",
+			"name": "script.js",
+			"path": "script.js"
+		}
+	],
+	"id": "item-sr0eNHK58q",
+	"layoutMode": 2,
+	"mainSizes": ["200px", "50%", "50%"]
+}
