)[model] = gtlf;
+
+ progress++;
+
+ text.innerText = (
+ Math.round((progress / total) * 10000) / 100
+ ).toString();
+ }
+
+ preloadWindow.classList.add(
+ 'opacity-0',
+ 'transition-opacity',
+ 'duration-500',
+ 'ease-out',
+ );
+ } catch (ex) {
+ console.error(ex);
+ }
+};
+
+preloadWindow.addEventListener('transitionend', (): void => {
+ preloadWindow.remove();
+});
diff --git a/src/script.typescript b/src/script.typescript
deleted file mode 100644
index 25edb9e..0000000
--- a/src/script.typescript
+++ /dev/null
@@ -1,1119 +0,0 @@
-'use strict';
-
-import * as THREE from 'https://cdn.skypack.dev/three@0.135.0';
-import { MTLLoader } from 'https://cdn.skypack.dev/three@0.135.0/examples/jsm/loaders/MTLLoader.js';
-import { DDSLoader } from 'https://cdn.skypack.dev/three@0.135.0/examples/jsm/loaders/DDSLoader.js';
-import { OBJLoader } from 'https://cdn.skypack.dev/three@0.135.0/examples/jsm/loaders/OBJLoader.js';
-import React, { useState, useEffect, useRef } from 'https://cdn.skypack.dev/react@18.2.0';
-import ReactDOM from 'https://cdn.skypack.dev/react-dom@18.2.0';
-import gsap from 'https://cdn.skypack.dev/gsap@3.10.4';
-
-console.clear();
-
-const IS_DEBUG = false;
-const ASSETS_PATH = 'https://assets.codepen.io/430361';
-const FPS = 24;
-const SCREEN = [{
- FOV: 65,
- Y: 2,
- Z: 7,
-}, {
- FOV: 45,
- Y: 1.15,
- Z: 6.5
-}];
-const DEFAULT_LIFE = 40;
-const DEFAULT_ENEMY_LIFE = 10;
-const COMMANDS = ['Skip', 'Defend', 'Attack', 'Heal'];
-
-let scene;
-let camera;
-let renderer;
-
-let chicky;
-let ghost;
-let stage;
-let dice;
-
-let renderTimeout = 0;
-
-//////////////////////////////////////////////////
-// ENUMS
-
-enum ObjectType {
- Chicky,
- Ghost,
-}
-
-enum FadeType {
- Hidden,
- In,
- Out,
-}
-
-enum FloorType {
- None,
- Next,
- Reset,
-}
-
-//////////////////////////////////////////////////
-// HELPERS
-
-function getRadian(degree: number): number {
- return degree * Math.PI / 180;
-}
-
-function random(min: number, max: number): number {
- return Math.round(Math.random() * (max - min) + min);
-}
-
-//////////////////////////////////////////////////
-// ThreeJS Settings
-
-function setRenderer() {
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize(window.innerWidth, window.innerHeight);
- // renderer.setClearColor(SKY_COLOR);
-
- renderer.shadowMap.enabled = true;
- renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-
- document.body.appendChild(renderer.domElement);
-}
-
-function setLighting() {
- const ambientColor = 0xffffff;
- const ambientIntensity = 0.7;
- const ambientLight = new THREE.AmbientLight(ambientColor, ambientIntensity);
-
- scene.add(ambientLight);
-
- const directionalColor = 0xffffff;
- const directionalIntensity = 0.8;
- const directionalLight = new THREE.DirectionalLight(
- directionalColor, directionalIntensity);
- const directionalX = -3;
- const directionalY = 5;
- const directionalZ = 2;
-
- directionalLight.position.set(directionalX, directionalY, directionalZ);
- directionalLight.castShadow = true;
- directionalLight.shadow.camera.near = 0.1;
- directionalLight.shadow.camera.far = 100;
- directionalLight.shadow.bias = -0.0005;
-
- scene.add(directionalLight);
-
- if (IS_DEBUG) {
- scene.add(new THREE.CameraHelper(directionalLight.shadow.camera));
- }
-}
-
-function setScreenSettings() {
- let fov = SCREEN[0].FOV;
- let y = SCREEN[0].Y;
- let z = SCREEN[0].Z;
-
- if (window.innerWidth > 525) {
- fov = SCREEN[1].FOV;
- y = SCREEN[1].Y;
- z = SCREEN[1].Z;
- }
-
- camera.fov = fov;
- camera.position.y = y;
- camera.position.z = z;
-}
-
-//////////////////////////////////////////////////
-// ThreeJS Models
-
-function loadModel(name) {
- return new Promise((resolve, reject) => {
- const manager = new THREE.LoadingManager();
-
- manager.addHandler(/\.dds$/i, new DDSLoader());
-
- new MTLLoader(manager)
- .load(`${ASSETS_PATH}/${name}.mtl`, (materials) => {
-
- materials.preload();
-
- new OBJLoader()
- .setMaterials(materials)
- .load(`${ASSETS_PATH}/${name}.obj`, (obj) => {
-
- obj.traverse((o) => {
- o.castShadow = true;
- o.receiveShadow = true;
- });
-
- resolve(obj);
- }, undefined, (error) => {
- reject(error);
- });
- });
- });
-}
-
-async function setChicky() {
- chicky = await loadModel('RogueLikeChicky-5');
-
- scene.add(chicky);
-
- chicky.position.set(-2, 0, 0);
- chicky.traverse((obj) => {
- if (obj.isMesh === true) {
- obj.rotateY(getRadian(90));
- }
- });
-}
-
-async function setGhost() {
- ghost = await loadModel('RogueLikeGhost-6');
-
- scene.add(ghost);
-
- ghost.position.set(2, 0, 0);
- ghost.traverse((obj) => {
- if (obj.isMesh === true) {
- obj.rotateY(getRadian(-90));
- }
- });
-}
-
-async function setStage() {
- stage = await loadModel('RogueLikeStage');
-
- scene.add(stage);
-
- stage.position.set(0, -1.6, 0);
-}
-
-async function setDice() {
- dice = await loadModel('RogueLikeDice');
-
- scene.add(dice);
-
- dice.visible = false;
-}
-
-//////////////////////////////////////////////////
-// Game Functions
-
-function animateFloor(callback) {
- let y = SCREEN[0].Y;
- let z = SCREEN[0].Z;
-
- if (window.innerWidth > 525) {
- y = SCREEN[1].Y;
- z = SCREEN[1].Z;
- }
-
- gsap.fromTo(camera.position, {
- y: 0,
- z: 0,
- }, {
- y: y,
- z: z,
- duration: 0.75,
- ease: 'back.out(1.5)',
- onComplete() {
- callback();
- },
- });
-}
-
-function doSkip(obj: THREE.Group) {
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 0.9,
- y: 1.1,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 1,
- ease: 'elastic.out',
- onComplete() {
- resolve();
- },
- });
- });
-}
-
-function doAttack(obj: THREE.Group, type: ObjectType) {
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.3,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 0.3,
- ease: 'elastic.out',
- });
- tl.to(obj.position, {
- y: 0.8,
- duration: 0.3,
- ease: 'power3.out',
- }, '-=0.3');
- tl.to(obj.position, {
- y: 0,
- duration: 0.3,
- ease: 'power3.in',
- });
- tl.to(obj.position, {
- x: (type === ObjectType.Chicky) ? 2 : -2,
- duration: 0.8,
- ease: 'power1.out',
- }, '-=0.6');
- tl.to(obj.scale, {
- x: 1.1,
- y: 0.9,
- duration: 0.1,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 0.35,
- ease: 'elastic.out',
- });
- tl.to(obj.rotation, {
- y: getRadian(-25),
- z: getRadian(-10),
- ease: 'power4.out',
- duration: 0.2,
- delay: 0.05,
- onComplete() {
- let obj2 = (type === ObjectType.Chicky) ? ghost : chicky;
- let tl2 = gsap.timeline();
-
- tl2.to(obj2.position, {
- x: obj2.position.x - ((type === ObjectType.Chicky) ? -0.15 : 0.15),
- ease: 'power4.out',
- duration: 0.1,
- delay: 0.5,
- });
- tl2.to(obj2.position, {
- x: obj2.position.x + ((type === ObjectType.Chicky) ? -0.15 : 0.15),
- ease: 'bounce.out',
- duration: 0.5,
- });
- },
- });
- tl.to(obj.rotation, {
- y: getRadian(45),
- z: getRadian((type === ObjectType.Chicky) ? -20 : 20),
- ease: 'power4.inOut',
- duration: 0.5,
- });
- tl.to(obj.rotation, {
- y: 0,
- z: 0,
- ease: 'bounce.out',
- duration: 0.4,
- delay: 0.25,
- });
- tl.to(obj.position, {
- y: 0.2,
- duration: 0.3,
- ease: 'power4.out',
- delay: 0.2,
- });
- tl.to(obj.position, {
- x: (type === ObjectType.Chicky) ? -2 : 2,
- duration: 0.6,
- ease: 'power1.out',
- }, '-=0.2');
- tl.to(obj.rotation, {
- z: getRadian((type === ObjectType.Chicky) ? 10 : -10),
- duration: 0.1,
- ease: 'power1.out',
- }, '-=0.6');
- tl.to(obj.rotation, {
- z: 0,
- duration: 0.1,
- ease: 'power1.out',
- }, '-=0.3');
- tl.to(obj.position, {
- y: 0,
- duration: 0.3,
- ease: 'power4.out',
- }, '-=0.2');
- tl.to(obj.scale, {
- x: 1.1,
- y: 0.9,
- duration: 0.2,
- ease: 'power4.out',
- }, '-=0.2');
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 0.4,
- ease: 'elastic.out',
- onComplete() {
- resolve();
- },
- });
- });
-}
-
-function doDefend(obj: THREE.Group, type: ObjectType) {
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(obj.rotation, {
- y: getRadian((type === ObjectType.Chicky) ? -90 : 90),
- ease: 'power4.out',
- duration: 0.75,
- });
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- delay: 0.2,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 0.9,
- y: 1.1,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 1,
- ease: 'elastic.out',
- });
- tl.to(obj.rotation, {
- y: 0,
- ease: 'power4.out',
- duration: 0.75,
- onComplete() {
- resolve();
- },
- });
- });
-}
-
-function doHeal(obj: THREE.Group, type: ObjectType) {
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(obj.rotation, {
- y: getRadian((type === ObjectType.Chicky) ? 720 : -720),
- ease: 'power2.out',
- duration: 2,
- });
- tl.to(obj.position, {
- y: 1.5,
- ease: 'power2.out',
- duration: 1,
- }, '-=2');
- tl.to(obj.position, {
- y: 0,
- ease: 'power2.in',
- duration: 1,
- }, '-=1');
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 0.9,
- y: 1.1,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 1,
- ease: 'elastic.out',
- onComplete() {
- obj.rotation.y = 0;
-
- resolve();
- },
- });
- });
-}
-
-function doCommand(command: Number, type: ObjectType) {
- let obj;
-
- if (type === ObjectType.Chicky) {
- obj = chicky;
- } else if (type === ObjectType.Ghost) {
- obj = ghost;
- }
-
- return new Promise(async (resolve) => {
- switch (command) {
- case 0:
- await doSkip(obj);
- break;
- case 1:
- await doDefend(obj, type);
- break;
- case 2:
- await doAttack(obj, type);
- break;
- case 3:
- await doHeal(obj, type);
- break;
- }
-
- resolve();
- });
-}
-
-function animateDefeat(type) {
- let obj;
-
- if (type === ObjectType.Chicky) {
- obj = chicky;
- } else if (type === ObjectType.Ghost) {
- obj = ghost;
- }
-
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(obj.scale, {
- x: 1.2,
- y: 0.8,
- duration: 0.15,
- ease: 'power4.out',
- });
- tl.to(obj.scale, {
- x: 1,
- y: 1,
- duration: 0.5,
- ease: 'elastic.out',
- });
- tl.to(obj.position, {
- y: 1.2,
- x: (type === ObjectType.Chicky) ? -2.5 : 2.5,
- duration: 0.3,
- ease: 'power4.out',
- });
- tl.to(obj.rotation, {
- z: getRadian((type === ObjectType.Chicky) ? 90 : -90),
- duration: 0.5,
- ease: 'power4.out',
- }, '-=0.3');
- tl.to(obj.position, {
- y: 0.9,
- duration: 0.5,
- ease: 'bounce.out',
- onComplete() {
- resolve();
- },
- }, '-=0.3');
- });
-}
-
-function doChangeFloor(callback) {
- return new Promise((resolve) => {
- let tl = new gsap.timeline();
-
- tl.to(stage.position, {
- x: -6,
- duration: 2,
- });
- tl.to(ghost.position, {
- x: -4,
- duration: 2,
- }, '-=2');
- tl.to(chicky.position, {
- y: 0.2,
- yoyo: true,
- ease: 'power2.out',
- repeat: 12,
- duration: 0.1,
- }, '-=2');
- tl.fromTo(chicky.rotation, {
- y: getRadian(5),
- }, {
- y: getRadian(-5),
- yoyo: true,
- ease: 'power2.inOut',
- repeat: 6,
- duration: 0.2,
- onComplete() {
- resolve();
- },
- }, '-=2');
- });
-}
-
-function repositionFloor() {
- return new Promise((resolve) => {
- let tl = gsap.timeline();
-
- tl.to(chicky.position, {
- x: -2,
- y: 0,
- duration: 0.1,
- })
- tl.to(chicky.rotation, {
- y: 0,
- z: 0,
- duration: 0.1,
- });
- tl.to(ghost.position, {
- x: 2,
- y: 0,
- duration: 0.1,
- });
- tl.to(ghost.rotation, {
- z: 0,
- duration: 0.1,
- });
- tl.to(stage.position, {
- x: 0,
- duration: 0.1,
- onComplete() {
- resolve();
- },
- });
- });
-}
-
-//////////////////////////////////////////////////
-// Game Settings
-
-async function create(callback) {
- setRenderer();
-
- if (IS_DEBUG) {
- scene.add(new THREE.CameraHelper(camera));
- }
-
- setLighting();
-
- await setChicky();
- await setGhost();
- await setStage();
- // await setDice();
-
- animateFloor(callback);
-}
-
-function update() {
-}
-
-function render() {
- if (performance.now() - renderTimeout > 1000 / FPS) {
- renderTimeout = performance.now();
-
- renderer.render(scene, camera);
- }
-}
-
-function loop() {
- requestAnimationFrame(loop);
- update();
- render();
-}
-
-//////////////////////////////////////////////////
-// Initialization
-
-async function initialize(gameCanvas, callback) {
- let fov = SCREEN[0].FOV;
-
- if (window.innerWidth > 525) {
- fov = SCREEN[1].FOV;
- }
-
- scene = new THREE.Scene();
- camera = new THREE.PerspectiveCamera(
- fov, window.innerWidth / window.innerHeight, 0.1, 1000);
- renderer = new THREE.WebGLRenderer({
- canvas: gameCanvas,
- antialias: true,
- alpha: true,
- });
-
- await create(callback);
- loop();
-}
-
-//////////////////////////////////////////////////
-// ReactJS Components
-
-function CommandMenu(props) {
- const [item, setItem] = useState(null);
-
- useEffect(() => {
- setItem(null);
- }, [props.shown]);
-
- if (props.shown === false) {
- return null;
- }
-
- let menuClassName = 'command';
-
- if (item !== null) {
- menuClassName += ' selected';
- }
-
- return (
-
- );
-}
-
-function DiceArea(props) {
- const [diceStyle, setDiceStyle] = useState({
- '--number': '-0vmin',
- '--rotation': '0deg',
- });
- const [diceValue, setDiceValue] = useState(null);
-
- useEffect(() => {
- if (props.shown === false) {
- return;
- }
-
- let diceOccurence = {
- count: 0,
- num: [],
- rotation: 0,
- };
-
- for (let i = 0; i < 20; i++) {
- diceOccurence.num[i] = random(1, 6);
- }
-
- gsap.fromTo(diceOccurence, {
- count: 0,
- rotation: 0,
- }, {
- count: diceOccurence.num.length - 1,
- rotation: 720,
- ease: 'power2.out',
- duration: 1.5,
- onUpdate() {
- let i = Math.floor(diceOccurence.count);
- let num = diceOccurence.num[i];
-
- setDiceStyle({
- '--number': `${num * -50}vmin`,
- '--rotation': `${diceOccurence.rotation}deg`,
- });
- },
- onComplete() {
- setTimeout(() => {
- let value = diceOccurence.num.pop() + 1;
- value = (value > 6) ? (value - 6) : value;
- setDiceValue(value);
- }, 512);
- },
- });
- }, [props.shown]);
-
- if (props.shown === false) {
- return null;
- }
-
- let diceAreaStyle = 'dice-area';
-
- if (diceValue !== null) {
- diceAreaStyle += ' hidden';
- }
-
- return (
- {
- if (evt.animationName === 'fade-out') {
- setDiceStyle({
- '--number': '-0vmin',
- '--rotation': '0deg',
- });
- setDiceValue(null);
-
- props.onSelect(diceValue);
- }
- }}>
-
-
{
- props.onFadeEnd(evt.animationName);
- }}
- >
- );
-}
-
-function CommandEffect(props) {
- if (props.shown === false) {
- return null;
- }
-
- let imageUrl = `url(${ASSETS_PATH}/${props.link})`;
-
- return (
- {
- if (evt.animationName === 'fade-out') {
- props.onEnded();
- }
- }}
- >
-
-
-
-
- HP:{life}
- Enemy:{enemyLife}
- Floor:{floor}
-
-
{
- setDiceCmdShown(false);
- setDiceShown(true);
- }}
- />
- {
- setDiceValue(null);
- doChickyTurn(item);
- }}
- />
- {
- setFloorType(FloorType.Reset);
- setFadeType(FadeType.In);
- setShowGameOver(false);
- }}
- />
- {
- setShowDefendEffect(false);
- }}
- />
- {
- setShowAttackEffect(false);
- }}
- />
- {
- setShowHealEffect(false);
- }}
- />
- {
- setDiceShown(false);
-
- if (IS_DEBUG === true) {
- value = 6;
- }
-
- if (turn === ObjectType.Chicky) {
- setDiceValue(value);
- } else {
- doEnemyTurn(value);
- }
- }} />
- {
- changeFloorFade(type);
- }}
- />
- 
+# Bravy Chicky Dice Adventure
## Description
@@ -14,12 +10,10 @@ 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
-```
+- `n == 1` Do nothing
+- `n >= 2` Able to Defend
+- `n >= 3` Able to Defend, and Attack
+- `n >= 5` Able to Defend, Attack, and Heal
Also, you may challenge your friends and brag your highest score.
@@ -27,13 +21,38 @@ I haven't been ditching practicing web development these days, and I had hard ti
This game is best viewed in landscape mode.
-## Resources
+## Requirements
+
+1. Text editor (Preferred Visual Studio Code)
+1. Terminal (I use the built-in terminal on Visual Studio Code)
-- [ThreeJS](https://threejs.org) for 3D rendering and graphics
-- [GSAP](https://greensock.com) for animation
-- [ReactJS](https://reactjs.org) for UI
+## Building the program
+
+For my future reference, below is the way to build the program.
+
+1. Clone the repository
+1. Install the dependencies using this command:
+ `# npm`
+1. Build the main program using this command:
+ `# npm run build`
+1. At the step above, the distributed program will be produced, and _dist_ folder will be generated. The step from here will be optional if you want to run the program on the localhost.
+1. Create a local virtual server using this command:
+ `# npm run dev`
+1. After building, it can be accessed at [http://localhost:5173/](http://localhost:5173/).
+
+## Resources
-- [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.
+1. [Blockbench](https://www.blockbench.net/) Low poly 3D model creation tool
+1. [Aseprite](https://www.aseprite.org/) Image creation software for textures
+1. [ThreeJS](https://threejs.org/) 3D Rendering engine used for the game
+1. [tween.js](https://tweenjs.github.io/tween.js/) Animation or tweening
+1. [TailwindCSS](https://tailwindcss.com/) CSS framework for easy styling
+1. [howler.js](https://howlerjs.com/) Audio playing library
+1. [Vite](https://vitejs.dev/) Build tool for the web
+1. [TypeScript](https://www.typescriptlang.org/) Type safety JavaScript transpiler
+1. [NodeJS](https://nodejs.org/en/) Runtime JavaScript used for building the app
+1. [npm](https://www.npmjs.com/) Package manager for NodeJS
+1. [Silkscreen](https://fonts.google.com/specimen/Silkscreen) Pixel-art fonts
+1. [Misaki](https://littlelimit.net/misaki.htm) Pixel-art fonts
+1. [PICO-8 Secret Palette](https://lospec.com/palette-list/pico-8-secret-palette) All PICO-8 palettes and its hidden colours
+1. [Visual Studio Code](https://code.visualstudio.com/) Text editor (IDE) I used for development
diff --git a/build/gulpfile.js b/build/gulpfile.js
deleted file mode 100644
index 68c8f09..0000000
--- a/build/gulpfile.js
+++ /dev/null
@@ -1,77 +0,0 @@
-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
-};
\ No newline at end of file
diff --git a/build/util.js b/build/util.js
deleted file mode 100644
index dd14302..0000000
--- a/build/util.js
+++ /dev/null
@@ -1,96 +0,0 @@
-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
-};
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
deleted file mode 100644
index 259393d..0000000
--- a/dist/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-