#51 theme selector

app/src/app.js

@@ -2,7 +2,7 @@ import Tooltip from './tooltip.js'
 import Cluster from './cluster.js'
 import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge} from './pod.js'
 import SelectBox from './selectbox'
-import { Theme} from './themes.js'
+import { Theme, ALL_THEMES} from './themes.js'
 import { DESATURATION_FILTER } from './filters.js'
 
 const PIXI = require('pixi.js')
@@ -123,25 +123,36 @@ export default class App {
 
         const items = [
             {
-                text: 'SORT: NAME', sorterFn: sortByName
+                text: 'SORT: NAME', value: sortByName
             },
             {
-                text: 'SORT: AGE', sorterFn: sortByAge
+                text: 'SORT: AGE', value: sortByAge
             },
             {
-                text: 'SORT: MEMORY', sorterFn: sortByMemory
+                text: 'SORT: MEMORY', value: sortByMemory
             },
             {
-                text: 'SORT: CPU', sorterFn: sortByCPU
+                text: 'SORT: CPU', value: sortByCPU
             }
         ]
         //setting default sort
-        this.sorterFn = items[0].sorterFn
+        this.sorterFn = items[0].value
-        const selectBox = new SelectBox(items)
+        const app = this
+        const selectBox = new SelectBox(items, this.sorterFn, function(value) {
+            app.sorterFn = value
+        })
         selectBox.x = 265
         selectBox.y = 3
         menuBar.addChild(selectBox.draw())
 
+        const themeOptions = Object.keys(ALL_THEMES).sort().map(name => { return {text: name.toUpperCase(), value: name}})
+        const themeSelector = new SelectBox(themeOptions, this.theme.name, function(value) {
+            app.switchTheme(value)
+        })
+        themeSelector.x = 420
+        themeSelector.y = 3
+        menuBar.addChild(themeSelector.draw())
+
         const viewContainer = new PIXI.Container()
         viewContainer.x = 20
         viewContainer.y = 40

app/src/selectbox.js

@@ -3,10 +3,20 @@ import App from './app'
 const PIXI = require('pixi.js')
 
 export default class SelectBox extends PIXI.Graphics {
-    constructor(items) {
+    constructor(items, value, onchange) {
         super()
         this.items = items
+        this.value = value
         this.count = 0
+        for (const item of items) {
+            if (item.value == value) {
+                break
+            }
+            this.count++
+        }
+        if (this.count >= items.length) {
+            this.count = 0
+        }
         this.text = new PIXI.Text(this.items[this.count].text, {
             fontFamily: 'ShareTechMono',
             fontSize: 14,
@@ -16,6 +26,7 @@ export default class SelectBox extends PIXI.Graphics {
         this.text.x = 10
         this.text.y = 5
         this.addChild(this.text)
+        this.onchange = onchange
     }
 
     onForwardPressed() {
@@ -25,7 +36,8 @@ export default class SelectBox extends PIXI.Graphics {
             selectBox.count = 0
         }
         selectBox.text.text = selectBox.items[selectBox.count].text
-        App.current.sorterFn = selectBox.items[selectBox.count].sorterFn
+        this.value = this.items[this.count].value
+        this.onchange(this.value)
     }
 
     onBackPressed() {
@@ -35,7 +47,8 @@ export default class SelectBox extends PIXI.Graphics {
             selectBox.count = selectBox.items.length - 1
         }
         selectBox.text.text = selectBox.items[selectBox.count].text
-        App.current.sorterFn = selectBox.items[selectBox.count].sorterFn
+        this.value = this.items[this.count].value
+        this.onchange(this.value)
     }
 
     draw() {

app/src/themes.js

@@ -1,27 +1,17 @@
 const PIXI = require('pixi.js')
 
+export const ALL_THEMES = {}
+
 export class Theme {
     constructor() {
     }
 
     static get(name) {
-        switch (name) {
+        const clazz = ALL_THEMES[name]
-        case 'default':
+        if (clazz) {
-            return new DefaultTheme()
+            return new clazz()
-        case 'green':
+        } else {
-            return new GreenTheme()
+            return DefaultTheme()
-        case 'grey':
-            return new GreyTheme()
-        case 'black-and-white':
-            return new BlackAndWhiteTheme()
-        case 'sepia':
-            return new SepiaTheme()
-        case 'polaroid':
-            return new PolaroidTheme()
-        case 'high-contrast':
-            return new HighContrastTheme()
-        default:
-            return new DefaultTheme()
         }
     }
 }
@@ -34,7 +24,18 @@ class DefaultTheme {
     apply(stage) {
         stage.filters = []
     }
+    get name() {
+        return DefaultTheme.getThemeName(this.constructor.name)
+    }
+    static getThemeName(name) {
+        const className = name || this.name
+        return className.substring(0, className.length - 5).toLowerCase()
+    }
+    static register() {
+        ALL_THEMES[this.getThemeName()] = this
+    }
 }
+DefaultTheme.register()
 
 class GreenTheme extends DefaultTheme {
     constructor() {
@@ -43,6 +44,7 @@ class GreenTheme extends DefaultTheme {
         this.secondaryColor = 0x223322
     }
 }
+GreenTheme.register()
 
 class GreyTheme extends DefaultTheme {
     constructor() {
@@ -51,10 +53,13 @@ class GreyTheme extends DefaultTheme {
         this.secondaryColor = 0x333333
     }
 }
+GreyTheme.register()
 
 class BlackAndWhiteTheme extends DefaultTheme {
     constructor() {
         super()
+        this.primaryColor = 0xffffff
+        this.secondaryColor = 0x000000
     }
     apply(stage) {
         const filter = new PIXI.filters.ColorMatrixFilter()
@@ -62,6 +67,7 @@ class BlackAndWhiteTheme extends DefaultTheme {
         stage.filters = [filter]
     }
 }
+BlackAndWhiteTheme.register()
 
 class SepiaTheme extends DefaultTheme {
     constructor() {
@@ -73,6 +79,7 @@ class SepiaTheme extends DefaultTheme {
         stage.filters = [filter]
     }
 }
+SepiaTheme.register()
 
 class PolaroidTheme extends DefaultTheme {
     constructor() {
@@ -84,6 +91,7 @@ class PolaroidTheme extends DefaultTheme {
         stage.filters = [filter]
     }
 }
+PolaroidTheme.register()
 
 class HighContrastTheme extends DefaultTheme {
     constructor() {
@@ -97,3 +105,4 @@ class HighContrastTheme extends DefaultTheme {
         stage.filters = [filter]
     }
 }
+HighContrastTheme.register()