From 697e0b15d1ffab727eef8d21254a4144d5b2c2d0 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 30 Jul 2018 23:11:38 +0530
Subject: [PATCH] js13k: add dropdown for help n zip download

---
 src/components/Footer.jsx      |  61 +++++++++++++++++++++++++++++----
 src/components/app.jsx         |  22 +++++++-----
 src/js13kgames-square-logo.png | Bin 0 -> 4335 bytes
 src/style.css                  |  19 +++++++++-
 4 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 src/js13kgames-square-logo.png

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ceca280..fcc6860 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -20,7 +20,13 @@ class JS13K extends Component {
 			? (this.props.codeSize / 1024).toFixed(2)
 			: 0;
 		return (
-			<div class="flex flex-v-center">
+			<div
+				role="button"
+				class="flex flex-v-center"
+				tabIndex="0"
+				onClick={this.props.onClick}
+				onBlur={this.props.onBlur}
+			>
 				<img src="js13kgames.png" alt="JS13K Games logo" height="24" />{' '}
 				<div class="footer__js13k-days-left">
 					{this.state.daysLeft} days to go
@@ -33,6 +39,12 @@ class JS13K extends Component {
 				>
 					{codeSizeInKb} KB/ 13KB
 				</div>
+				<span
+					class="caret"
+					style={`transition:0.3s ease; transform-origin: center 2px; ${
+						this.props.isOpen ? 'transform:rotate(180deg);' : ''
+					}`}
+				/>
 			</div>
 		);
 	}
@@ -42,13 +54,21 @@ export default class Footer extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			isKeyboardShortcutsModalOpen: false
+			isKeyboardShortcutsModalOpen: false,
+			isJs13kDropdownOpen: false
 		};
 	}
 	layoutBtnClickhandler(layoutId) {
 		this.props.layoutBtnClickHandler(layoutId);
 	}
 
+	js13kClickHandler() {
+		// console.log(999);
+		this.setState({
+			isJs13kDropdownOpen: !this.state.isJs13kDropdownOpen
+		});
+	}
+
 	render() {
 		return (
 			<div id="footer" class="footer">
@@ -123,10 +143,39 @@ export default class Footer extends Component {
 
 				{this.props.prefs.isJs13kModeOn ? (
 					<div class="flex flex-v-center">
-						<JS13K codeSize={this.props.codeSize} />
-						<button class="btn--dark" onClick={this.props.onJs13KBtnClick}>
-							JS13KGames Help
-						</button>
+						<JS13K
+							isOpen={this.state.isJs13kDropdownOpen}
+							codeSize={this.props.codeSize}
+							onClick={this.js13kClickHandler.bind(this)}
+							onBlur={() =>
+								setTimeout(
+									() => this.setState({ isJs13kDropdownOpen: false }),
+									300
+								)
+							}
+						/>
+						{this.state.isJs13kDropdownOpen && (
+							<div className="js13k__dropdown">
+								<button
+									class="btn"
+									style={{
+										width: '200px',
+										display: 'block',
+										marginBottom: '16px'
+									}}
+									onClick={this.props.onJs13KDownloadBtnClick}
+								>
+									Download game as zip
+								</button>
+								<button
+									class="btn"
+									style={{ width: '200px', display: 'block' }}
+									onClick={this.props.onJs13KHelpBtnClick}
+								>
+									Help
+								</button>
+							</div>
+						)}
 					</div>
 				) : null}
 
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 2f71b35..e8317af 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -1105,20 +1105,23 @@ export default class App extends Component {
 				this.setState({
 					codeSize: size
 				});
-				const a = document.createElement('a');
-				a.setAttribute('download', this.state.currentItem.name);
-				a.href = 'data:application/zip;base64,' + data;
-				window.anchor = a;
+				this.currentItemZipBase64Data = data;
 			});
 		});
 	}
 
-	js13KBtnClickHandler() {
+	js13KHelpBtnClickHandler() {
 		this.setState({
 			isJs13KModalOpen: true
 		});
-		// document.body.appendChild(window.anchor);
-		// window.anchor.click();
+	}
+	js13KDownloadBtnClickHandler() {
+		const a = document.createElement('a');
+		a.setAttribute('download', this.state.currentItem.title);
+		a.href = 'data:application/zip;base64,' + this.currentItemZipBase64Data;
+		document.body.appendChild(a);
+		a.click();
+		a.remove();
 	}
 	blankTemplateSelectHandler() {
 		this.createNewItem();
@@ -1190,7 +1193,10 @@ export default class App extends Component {
 						screenshotBtnClickHandler={this.screenshotBtnClickHandler.bind(
 							this
 						)}
-						onJs13KBtnClick={this.js13KBtnClickHandler.bind(this)}
+						onJs13KHelpBtnClick={this.js13KHelpBtnClickHandler.bind(this)}
+						onJs13KDownloadBtnClick={this.js13KDownloadBtnClickHandler.bind(
+							this
+						)}
 						hasUnseenChangelog={this.state.hasUnseenChangelog}
 						codeSize={this.state.codeSize}
 					/>
diff --git a/src/js13kgames-square-logo.png b/src/js13kgames-square-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..fae0dd04755b5535cd551fe38416d6f3d77a3380
GIT binary patch
literal 4335
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

literal 0
HcmV?d00001

diff --git a/src/style.css b/src/style.css
index 5fa8818..40eea84 100644
--- a/src/style.css
+++ b/src/style.css
@@ -39,6 +39,10 @@ textarea {
 	box-sizing: border-box;
 }
 
+[role='button'] {
+	cursor: pointer;
+}
+
 a {
 	text-decoration: none;
 	color: #f7ae2d;
@@ -807,7 +811,7 @@ body > #demo-frame {
 	background: var(--color-popup);
 	color: var(--color-text);
 	position: relative;
-	border-radius: 8px;
+	border-radius: 5px;
 	opacity: 0;
 	padding: 3em;
 	font-size: 1.1em;
@@ -1539,6 +1543,19 @@ body:not(.is-app) .show-when-app {
 	margin-left: 1rem;
 }
 
+.js13k__dropdown {
+	position: fixed;
+	display: inline-block;
+	background: var(--color-popup);
+	color: var(--color-text);
+	bottom: 35px;
+	padding: 16px;
+	border-radius: 4px;
+	box-shadow: 0 -7px 13px 2px rgba(0, 0, 0, 0.2);
+	left: 50%;
+	margin-left: -115px;
+}
+
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;