diff --git a/app/src/app.js b/app/src/app.js index 80b1dfd..5edf991 100644 --- a/app/src/app.js +++ b/app/src/app.js @@ -77,13 +77,13 @@ export default class App { const menuBar = new PIXI.Graphics() menuBar.beginFill(PRIMARY_VIOLET, 1) - menuBar.drawRect(0, 0, window.innerWidth, 35) + menuBar.drawRect(0, 0, window.innerWidth, 28) menuBar.endFill() stage.addChild(menuBar) const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 18}) searchPrompt.x = 20 - searchPrompt.y = 10 + searchPrompt.y = 7 PIXI.ticker.shared.add(function (_) { var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI) searchPrompt.alpha = v @@ -92,21 +92,21 @@ export default class App { const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 18}) searchText.x = 40 - searchText.y = 5 + searchText.y = 7 stage.addChild(searchText) const items = [ { - text: 'Name', sorterFn: sortByName + text: 'SORT: NAME', sorterFn: sortByName }, { - text: 'Age', sorterFn: sortByAge + text: 'SORT: AGE', sorterFn: sortByAge }, { - text: 'Memory', sorterFn: sortByMemory + text: 'SORT: MEMORY', sorterFn: sortByMemory }, { - text: 'CPU', sorterFn: sortByCPU + text: 'SORT: CPU', sorterFn: sortByCPU } ] //setting default sort diff --git a/app/src/selectbox.js b/app/src/selectbox.js index 06e76be..2d9685c 100644 --- a/app/src/selectbox.js +++ b/app/src/selectbox.js @@ -15,15 +15,14 @@ export default class SelectBox extends PIXI.Graphics { align: 'center' }) this.text.x = 10 - this.text.y = 8 + this.text.y = 5 this.addChild(this.text) } onForwardPressed() { const selectBox = this - if (selectBox.count + 1 < this.items.length) { - selectBox.count++ - } else { + selectBox.count++ + if (selectBox.count >= this.items.length) { selectBox.count = 0 } selectBox.text.text = selectBox.items[selectBox.count].text @@ -32,9 +31,8 @@ export default class SelectBox extends PIXI.Graphics { onBackPressed() { const selectBox = this - if (selectBox.count - 1 > 0) { - selectBox.count-- - } else { + selectBox.count-- + if (selectBox.count < 0) { selectBox.count = selectBox.items.length - 1 } selectBox.text.text = selectBox.items[selectBox.count].text @@ -51,26 +49,28 @@ export default class SelectBox extends PIXI.Graphics { selectBox.interactive = true // draw a triangle - backArrow.lineStyle(2, 0x000000, 1) - backArrow.beginFill(PRIMARY_VIOLET, 0.5) - backArrow.moveTo(0, 2) - backArrow.lineTo(-20, 14) - backArrow.lineTo(0, 26) - backArrow.lineTo(0, 2) + backArrow.lineStyle(1.5, 0x000000, 1) + backArrow.beginFill(PRIMARY_VIOLET, 0.9) + backArrow.drawRect(-22, 0, 22, 22) + backArrow.moveTo(-7, 6) + backArrow.lineTo(-16, 11) + backArrow.lineTo(-7, 16) + backArrow.lineTo(-7, 6) backArrow.endFill() selectBox.addChild(backArrow) - selectBox.lineStyle(2, 0x000000, 1) + selectBox.lineStyle(1.5, 0x000000, 1) selectBox.beginFill(PRIMARY_VIOLET, 0.5) - selectBox.drawRoundedRect(4, 0, 100, 28, 5) + selectBox.drawRect(4, 0, 100, 22) selectBox.endFill() - forwardArrow.lineStyle(2, 0x000000, 1) - forwardArrow.beginFill(PRIMARY_VIOLET, 0.5) - forwardArrow.moveTo(108, 2) - forwardArrow.lineTo(128, 14) - forwardArrow.lineTo(108, 26) - forwardArrow.lineTo(108, 2) + forwardArrow.lineStyle(1.5, 0x000000, 1) + forwardArrow.beginFill(PRIMARY_VIOLET, 0.9) + forwardArrow.drawRect(108, 0, 22, 22) + forwardArrow.moveTo(115, 6) + forwardArrow.lineTo(124, 11) + forwardArrow.lineTo(115, 16) + forwardArrow.lineTo(115, 6) forwardArrow.endFill() selectBox.addChild(forwardArrow)