Merge 891fde1 into 08de84c

README.md

@@ -36,14 +36,17 @@ const loop = setInterval(() => {
 ```
 
 <img width="450" height="50"
-src="docs/media/demo-1-cropped.gif" />
+src="docs/media/demo-1-edited.gif" />
 
 <img width="450" height="50"
-src="docs/media/demo-2-cropped.gif" />
+src="docs/media/demo-2-edited.gif" />
 
-**NOTE:** The two images above are screen capture of the demos in folder examples.
+<img width="450" height="50"
+src="docs/media/demo-3-edited.gif" />
+
+**NOTE:** The images above are screen captures of the demos in folder examples.
 
-## Concept: why is it **flex**-progress?
+## Concept: Why is it *flex*-progress?
 This was inspired by CSS Flexbox concept, although much simpler.
 
 Basically, all elements have `flexShrink` and `flexGrow` properties,

examples/demo-2.ts

@@ -13,14 +13,14 @@ const msg = new FlexProgress.Text({
   flex: 1
 })
 const bar1 = new FlexProgress.Bar({
-  width: 10,
+  width: 15,
   /** The output text will be pass to this function */
   postProcess:
     overArgs((...s: string[]) => s.join(''),
       [chalk.green, chalk.yellow, chalk.gray])
 })
 const bar2 = new FlexProgress.Bar({
-  width: 15,
+  width: 25,
   postProcess:
     overArgs(flip((...s: string[]) => s.join('')),
       [chalk.green, chalk.yellow, chalk.gray])
@@ -46,8 +46,8 @@ out.append(
 let count = 0
 const loop = setInterval(() => {
   count++
-  bar1.ratio = (count % 39) / 38
-  bar2.ratio = ((2 * count) % 39) / 38
+  bar1.ratio = (count % 40) / 39
+  bar2.ratio = ((2 * count) % 40) / 39
 }, 80)
 
 /* End the loop */

examples/demo-3.ts

@@ -48,15 +48,15 @@ const HSY = (h: number, s: number, y: number) => {
 
 /* NOTE: need true color supports */
 const colors: typeof chalk.red[] = []
-for (let i = 0; i <= 36; i++) {
-  const [r, g, b ] = HSY(i * 10, .5, .5).map(c => Math.floor(c * 255))
+for (let h = 0; h <= 120; h += 10) {
+  const [r, g, b ] = HSY(h, .5, .5).map(c => Math.floor(c * 255))
   colors.push(chalk.rgb(r, g, b))
 }
 
 let ratio = 0
 
 const colorBar = (fill: string, half: string, empty: string) => {
-  const i = Math.min(colors.length - 1, Math.floor(ratio * colors.length))
+  const i = Math.floor(ratio * 1 * (colors.length - 1)) % colors.length
   return [ colors[i](fill), colors[Math.max(0, i)](half), chalk.gray(empty) ].join('')
 }
 
@@ -67,8 +67,9 @@ const text = new FlexProgress.Text({
 })
 
 out.append(
-  1, new FlexProgress.Spinner({ postProcess: chalk.cyan })
-, 1, 'Hello World!'
+  new FlexProgress.HideCursor()
+, 1, new FlexProgress.Spinner({ postProcess: chalk.cyan })
+, 1, new FlexProgress.Text({ text: 'Hello World!', postProcess: chalk.white })
 , 1, new FlexProgress.Spinner({ postProcess: chalk.magenta })
 , 1, '⸨', bar , '⸩'
 , 1, text
@@ -85,9 +86,7 @@ const loop = setInterval(() => {
 }, 80)
 
 process.on('SIGINT', () => {
-  process.exit(0)
-})
-
-process.on('exit', () => {
+  out.clear(false)
   console.log()
+  process.exit(0)
 })