feat: remove old dependency on pie-control-panel

Author: edeustace

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pie",
-  "version": "10.3.4",
+  "version": "10.4.0",
   "description": "The Portable Interaction Elements framework CLI",
   "preferGlobal": true,
   "bin": {
@@ -100,7 +100,6 @@
     "minimist": "^1.2.0",
     "ora": "^1.2.0",
     "pie-catalog-client": "^2.2.0",
-    "pie-control-panel": "^1.3.0",
     "pie-controller": "^3.3.0",
     "pie-player": "^3.4.0",
     "pie-support-less": "PieLabs/pie-support-less#master",

src/apps/default/src-generators/all-in-one.ts

@@ -10,20 +10,24 @@ export function allInOne(
   pieModels: Model[],
   weights: any,
   langs: any,
-  scoringType: string = 'weighted'): string {
-
+  scoringType: string = 'weighted'
+): string {
   return `
   import Controller from 'pie-controller';
 
   ${declarations.map(d => d.js).join('\n')}
 
   import PiePlayer from 'pie-player';
   customElements.define('pie-player', PiePlayer);
-  import ControlPanel from 'pie-control-panel';
+  import ControlPanel from 'pie-catalog-client/src/catalog-demo/control-panel';
   customElements.define('pie-control-panel', ControlPanel);
+  require('pie-catalog-client/src/bootstrap/common.less');
+  require('material-elements/src/select-field');
 
   const controllerMap = {};
-  ${controllerMap.map(t => `controllerMap['${t.pie}'] = require('${t.target}');`).join('\n')}
+  ${controllerMap
+    .map(t => `controllerMap['${t.pie}'] = require('${t.target}');`)
+    .join('\n')}
 
   export default class Bundled extends HTMLElement{
 
@@ -67,8 +71,8 @@ export function allInOne(
           console.error(e);
         });
 
-        panel.addEventListener('envChanged', function (event) {
-          const {env} = event.target;
+        panel.addEventListener('env-changed', function (event) {
+          const {env} = event.detail;
           player.env(env)
             .then(() => {
               if (env.mode === 'evaluate') {
@@ -95,7 +99,7 @@ export function allInOne(
           .control-panel-holder {
             display: flex;
             align-items: center;
-            background-color: rgba(0,0,0,0.1);
+            background-color: var(--catalog-header-bg, rgba(0, 50, 49, 0.9));
             padding: 0;
             margin: 0;
             padding-left: 10px;