Add files via upload

Export of ".zip with Build Process" using Codepen

DOCUMENTATION.md

@@ -0,0 +1,56 @@
+# CodePen Export with Build Process
+_Transform raw code into a browser-ready preview... offline_
+
+This package contains all of the original code ([src/](./src/)), and a custom build script with processors. You'll be able to edit and build for a local CodePen-like experience.
+
+## Installation
+
+Ensure you have a recent version of [node & npm](https://nodejs.org/en/download/) or [yarn](https://yarnpkg.com/en/docs/install) installed.
+
+All of the following steps run on the command line within this directory. You can substitute `npm` for `yarn` depending on your preferences.
+
+Install all the necessary packages:
+
+```
+npm install
+```
+
+## Build
+
+To build for distribution:
+
+```
+npm run build
+```
+
+All of the final output will be dropped into the [/dist/](./dist) folder.
+
+## Server
+
+Run a local server that will automatically compile your code & refresh when you save a change!
+
+```
+npm run serve
+```
+
+---
+
+## Folder Structure
+
+```
+/exported-item/
+|-- /build/ - Build scripts
+|  |-- gulpfile.js - The tasks for the main build process
+|  |-- util.js - Utilities used by the tasks
+|
+|-- /src/ - Your code
+|  |-- index.template.html - The wrapper around your compiled HTML that includes any external stylesheets and scripts
+|  |-- index.partial.(html|pug|haml|...) - The raw HTML input or preprocessor equivalent
+|  |-- style.(css|scss|less|...) - The raw CSS input, or preprocessor equivalent
+|  |-- script.(js|ts|coffee|...) - The raw JavaScript input, or preprocessor equivalent
+|
+|-- /dist/ - The compiled output after running `npm run build`
+|  |-- index.html
+|  |-- script.js
+|  |-- style.css
+```

LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 by Takane Ichinose (https://codepen.io/takaneichinose/pen/dympyjN)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,37 @@
-# brave-chicky-dice-adventure
+# Brave Chicky Dice Adventure
+
+A Pen created on CodePen.io. Original URL: [https://codepen.io/takaneichinose/pen/dympyjN](https://codepen.io/takaneichinose/pen/dympyjN).
+
+# Brave Chicky Dice Adventure
+
+## Description
+
 This is just a simple turn-based game where you just have to throw a dice, defeat the enemy, and go to the highest floor as you can.
+
+Help Chicky to climb up the Natural Tower by giving it a command. Chicky doesn't quite understand yet what it will do.
+
+There are 4 possible commands to fight the ghost defending the Natural Tower.
+
+By rolling the dice, you can guide Chicky with the possible commands depends on the number appeared on the dice.
+
+- == 1 Do nothing
+- >= 2 Defend
+- >= 3 Defend, Attack
+- >= 5 Defend, Attack, Heal
+
+Also, you may challenge your friends and brag your highest score.
+
+I haven't been ditching practicing web development these days, and I had hard time creating all these stuff.
+
+This game is best viewed in landscape mode.
+
+## Resources
+
+- [ThreeJS](https://threejs.org) for 3D rendering and graphics
+- [GSAP](https://greensock.com) for animation
+- [ReactJS](https://reactjs.org) for UI
+
+- [MagicaVoxel](https://ephtracy.github.io) to create all the 3D models.
+- [Aseprite](https://www.aseprite.org) for background, dice, and effect.
+- [PICO-8](https://www.aseprite.org) for the colour palette used for graphics.
+- [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) for the fonts in the UI.

build/gulpfile.js

@@ -0,0 +1,77 @@
+const { src, dest, series, watch } = require('gulp');
+const del = require('del');
+
+const { config, tasks } = require('../package.json');
+const { makeTask } = require('./util.js');
+
+/* Make sure each task has its key inserted. */
+Object.keys(tasks).forEach((key) => {
+  tasks[key].key = key;
+});
+
+/*
+ * Tasks loaded from package.json and converted into runnable task functions */
+const taskFns = Object.keys(tasks).reduce((obj, key) => {
+  obj[key] = makeTask(tasks[key]);
+  return obj;
+}, {});
+
+/*
+ * Array of tasks sorted by their `order` property for running in series.
+ */
+const orderedTasks =
+  // Get all of the processors as an array
+  Object.values(tasks)
+    // Sort by the order value
+    .sort((a, b) => (a.order < b.order ? -1 : 1))
+    // Turn into processor tasks
+    .map(makeTask)
+    // Flatten into a single array
+    .reduce((arr, task) => arr.concat(task), []);
+
+/*
+ * Remove all files from the dist dir.
+ */
+function clean(done) {
+  del.sync([config.distDir]);
+  return done();
+}
+
+/*
+ * Copy src files to the dist dir for processing. The tasks will cleanup unneeded files.
+ */
+function copyToDist() {
+  return src([config.srcDir + '**/*.*', '!**/_*.*']).pipe(dest(config.distDir));
+}
+
+/*
+ * $ npm run build
+ * The default build task, running these tasks in series.
+ */
+const build = series(clean, copyToDist, ...orderedTasks);
+
+module.exports = {
+  default: build,
+  build,
+
+  /*
+   * $ npm run serve
+   * A watch task to run a local server with auto-refreshing when files are changed
+   */
+  serve: series(build, () => {
+    const browserSync = require('browser-sync').create();
+
+    function refresh(done) {
+      browserSync.reload();
+      done();
+    }
+
+    browserSync.init({
+      server: config.distDir
+    });
+
+    watch([config.srcDir + '**/*.*'], series(build, refresh));
+  }),
+
+  ...taskFns
+};

build/util.js

@@ -0,0 +1,96 @@
+const { src, dest, series } = require('gulp');
+const rename = require('gulp-rename');
+const del = require('del');
+
+const { config } = require('../package.json');
+
+/*
+ * Typical PreProcessor workflow
+ * Reads files from /src/ directory, runs processes, and outputs to /dist/ directory
+ *
+ * Pass in a `rename` option to rename the processed files
+ * Pass in a `cleanup` parameter to remove unnecessary files
+ */
+function makeTask(opts) {
+  const { key, pipe = [] } = opts;
+
+  function runTask() {
+    // Gather the files from the entry directory (dir)
+    src(
+      opts.src.map((file) => config.srcDir + file),
+      {
+        sourcemaps: config.sourcemaps
+      }
+    ).pipe(dest(config.distDir)); // Copy to the Dist dir
+
+    const filesToModify = src(
+      opts.src.map((file) => config.distDir + file),
+      {
+        sourcemaps: config.sourcemaps
+      }
+    ); // Make sure we include any additional files from the dist dir
+
+    const pipes = pipe.map((processor) => {
+      const fn = require(processor.require);
+      return fn.apply(null, processor.args);
+    });
+
+    if (opts.rename) {
+      pipes.push(makeRename(opts.rename));
+    }
+
+    // Pipe the files through the all of the task's functions
+    return (
+      pipes
+        .reduce((stream, processor) => {
+          return stream.pipe(processor);
+        }, filesToModify)
+
+        // Pipe the output to the destination
+        .pipe(
+          dest(config.distDir, {
+            sourcemaps: '.'
+          })
+        )
+    );
+  }
+
+  runTask.displayName = key;
+
+  if (opts.cleanup) {
+    return series(runTask, makeCleanup(opts));
+  }
+
+  return runTask;
+}
+
+/*
+ * Rename files in the pipeline.
+ */
+function makeRename(opts) {
+  // Find & replace of the basename if `find` option passed in
+  if (opts.find) {
+    return rename(function (path) {
+      path.basename = path.basename.replace(opts.find, opts.replace);
+    });
+  }
+
+  return rename(opts);
+}
+
+/*
+ * Delete unnecessary files in the /dist/ directory
+ */
+function makeCleanup(opts) {
+  function runCleanup(done) {
+    const filesToDelete = Array.isArray(opts.cleanup) ? opts.cleanup : opts.src;
+    del.sync(filesToDelete.map((file) => config.distDir + file));
+    done();
+  }
+  runCleanup.displayName = 'cleanup:' + opts.key;
+  return runCleanup;
+}
+
+module.exports = {
+  makeTask
+};

dist/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Brave Chicky Dice Adventure</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="prefetch" href="https://assets.codepen.io/430361/chicky-dice-game.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/chicky-dice-bg.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/chicky-dice-heal.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/chicky-dice-shield.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/chicky-dice-sword.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeChicky-5.mtl" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeChicky-5.obj" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeChicky-5.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeGhost-6.mtl" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeGhost-6.obj" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeGhost-6.png" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeStage.mtl" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeStage.obj" />
+<link rel="prefetch" href="https://assets.codepen.io/430361/RogueLikeStage.png" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+<link rel="stylesheet" href="./style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id="app"></div>
+<!-- partial -->
+  <script type="module" src="./script.js"></script>
+
+</body>
+</html>