js13k: add dropdown for help n zip download

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}
 

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}
 					/>

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%;