added src

src/ui/button.js

@@ -0,0 +1,219 @@
+export default class Button {
+   constructor(_scene, _pos, _atlas, _frame, _text, _togglebutton, _func) {
+      this.scene = _scene;
+      this.pos = _pos;
+      this.text = _text;
+      this.func = _func;
+      this.toggleOffFunc = () => { };
+      this.hoverInFunc = () => { };
+      this.hoverOutFunc = () => { };
+      this.hovering = false;
+      this.tintFill = true;
+      this.tintText = true;
+      this.data = {}
+
+      this.colors = {
+         out: 0xfff1e8,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.changeColor = true;
+      this.useOtherTextColor = false;
+      this.textColors = {
+         out: 0xfff1e8,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+
+      this.states = {
+         out: 0,
+         over: 1,
+         on: 2,
+         off: 3
+      }
+      this.state = this.states.out;
+      this.togglebutton = _togglebutton;
+      this.active = false;
+
+      this.sprite = this.scene.add.sprite(_pos.x, _pos.y, _atlas, _frame);
+      this.sprite.depth = 10000;
+      this.txt = this.scene.add.bitmapText(_pos.x, _pos.y, "uiFont", _text, 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txt.depth = 10000;
+
+      this.colorInState(this.state);
+   }
+
+   update() {
+      //if(this.sprite.getBounds().contains(this.scene.input.activePointer.worldX, this.scene.input.activePointer.worldY)){
+      if (this.sprite.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+         if (this.scene.hand.pressed === false) {
+            if (this.active === false) {
+               this.switchState(this.states.over);
+               if (this.hovering === false) {
+                  this.hoverInFunc();
+                  this.hovering = true;
+                  this.scene.soundManager.playSound(this.scene.soundManager.menuSelectSound);
+               }
+            } else {
+               this.switchState(this.states.over);
+            }
+         }
+         if (this.scene.hand.justPressed === true) {
+            if (this.active === true) {
+               this.switchState(this.states.over);
+            } else {
+               this.switchState(this.states.on);
+            }
+         }
+         if (this.scene.hand.justReleased === true) {
+            if (this.togglebutton === true) {
+               if (this.active === false) {
+                  this.active = true;
+                  this.func();
+               } else {
+                  this.active = false;
+                  this.toggleOffFunc();
+               }
+            } else {
+               this.func();
+            }
+         }
+      } else {
+         if (this.active === false) {
+            this.switchState(this.states.out);
+         } else {
+            this.switchState(this.states.on);
+         }
+
+         if (this.hovering === true) {
+            this.hoverOutFunc();
+            this.hovering = false;
+         }
+      }
+   }
+
+   simulateClick(_triggerFunction = true) {
+      if (this.togglebutton === true) {
+         if (this.active === false) {
+            this.active = true;
+            if(_triggerFunction === true){
+               this.func();
+            }
+         } else {
+            this.active = false;
+            if (_triggerFunction === true) {
+               this.toggleOffFunc();
+            }
+         }
+      } else {
+         if (_triggerFunction === true) {
+            this.func();
+         }
+      }
+   }
+
+   switchState(_state) {
+      if (this.state !== _state) {
+         this.state = _state;
+         if (this.changeColor === true) {
+            this.colorInState(this.state);
+         }
+      }
+   }
+
+   colorInState(_state) {
+      if (this.tintFill === true) {
+         switch (this.state) {
+            case this.states.out:
+               this.sprite.setTintFill(this.colors.out);
+               if (this.tintText === true) { this.txt.setTintFill(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.out); }
+               break;
+            case this.states.over:
+               this.sprite.setTintFill(this.colors.over);
+               if (this.tintText === true) { this.txt.setTintFill(this.colors.over); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.over); }
+               break;
+            case this.states.on:
+               this.sprite.setTintFill(this.colors.on);
+               if (this.tintText === true) { this.txt.setTintFill(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.on); }
+               break;
+            case this.states.off:
+               this.sprite.setTintFill(this.colors.off);
+               if (this.tintText === true) { this.txt.setTintFill(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.off); }
+               break;
+            default:
+               break;
+         }
+      } else {
+         switch (this.state) {
+            case this.states.out:
+               this.sprite.setTint(this.colors.out);
+               if (this.tintText === true) { this.txt.setTint(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.out); }
+               break;
+            case this.states.over:
+               this.sprite.setTint(this.colors.over);
+               if (this.tintText === true) { this.txt.setTint(this.colors.over); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.over); }
+               break;
+            case this.states.on:
+               this.sprite.setTint(this.colors.on);
+               if (this.tintText === true) { this.txt.setTint(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.on); }
+               break;
+            case this.states.off:
+               this.sprite.setTint(this.colors.off);
+               if (this.tintText === true) { this.txt.setTint(this.colors.out); }
+               if (this.useOtherTextColor === true) { this.txt.setTintFill(this.textColors.off); }
+               break;
+            default:
+               break;
+         }
+      }
+   }
+
+   setDepth(_depth) {
+      this.sprite.depth = _depth;
+      this.txt.depth = _depth;
+   }
+
+   setSpriteVisibility(_bool) {
+      if (_bool === true) {
+         this.sprite.alpha = 1;
+      } else {
+         this.sprite.alpha = 0;
+      }
+   }
+
+   setHighlighting(_bool) {
+      if (_bool === true) {
+         this.changeColor = true;
+         this.colorInState();
+      } else {
+         this.changeColor = false;
+         this.sprite.clearTint();
+      }
+   }
+
+   move(_x, _y) {
+      this.sprite.x = _x;
+      this.sprite.y = _y;
+      this.txt.x = _x;
+      this.txt.y = _y;
+   }
+
+   addToContainer(_container) {
+      _container.add(this.sprite);
+      _container.add(this.txt);
+   }
+
+   destroy() {
+      this.sprite.destroy();
+      this.txt.destroy();
+   }
+}

src/ui/computer/programs/programCalendarAero.js

@@ -0,0 +1,115 @@
+import Button from "../../button.js";
+
+export default class ProgramCalendar {
+   constructor(_scene, _computer, _window) {
+      this.scene = _scene;
+      this.computer = _computer;
+      this.window = _window;
+
+      this.tiles = [];
+      let i = 0;
+      for (let yy = 0; yy < 4; yy++) {
+         for (let xx = 0; xx < 7; xx++) {
+            /*tile.colors = {
+                out: 0x83769c,
+                over: 0x29adff,
+                on: 0x00e436,
+                off: 0xad2900
+            }*/
+            if (i === 10) {
+               this.tiles.push(new Button(this.scene, { x: this.window.pos.x + 16 + (xx * 37), y: this.window.pos.y + 32 + (yy * 37) }, "atlasUi", "sprDesktopCalendarTileMarked", String(i + 1), false, () => {
+                  this.txtNoData.alpha = 0;
+                  this.textContainer.alpha = 1;
+               }));
+            } else if (i === 22) {
+               this.tiles.push(new Button(this.scene, { x: this.window.pos.x + 16 + (xx * 37), y: this.window.pos.y + 32 + (yy * 37) }, "atlasUi", "sprDesktopCalendarTile", String(i + 1), false, () => {
+                  this.txtNoData.setText("I see you.");
+                  this.txtNoData.alpha = 1;
+                  this.textContainer.alpha = 0;
+               }));
+            } else {
+               this.tiles.push(new Button(this.scene, { x: this.window.pos.x + 16 + (xx * 37), y: this.window.pos.y + 32 + (yy * 37) }, "atlasUi", "sprDesktopCalendarTile", String(i + 1), false, () => {
+                  this.txtNoData.setText("503: Service Unavailable");
+                  this.txtNoData.alpha = 1;
+                  this.textContainer.alpha = 0;
+               }));
+            }
+
+
+            let tile = this.tiles[this.tiles.length - 1];
+
+            tile.tintFill = false;
+            tile.tintText = false;
+            tile.colorInState(tile.states.out);
+            tile.setDepth(this.window.depth + 1);
+            this.window.container.add(tile.sprite);
+            this.window.container.add(tile.txt);
+
+            i += 1;
+         }
+      }
+
+      this.textContainer = this.scene.add.container(0, 0);
+      this.window.container.add(this.textContainer);
+
+      this.txtTrackTitle = this.scene.add.bitmapText((this.window.pos.x + this.window.width * 0.5) - 64, this.window.pos.y + (this.window.height * 0.5) + 64, "uiFont", "upcoming race:", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtTrackTitle.depth = this.depth + 1;
+      this.txtTrackTitle.setTintFill(0x83769c);
+      this.textContainer.add(this.txtTrackTitle);
+
+      this.txtTrackname = this.scene.add.bitmapText((this.window.pos.x + this.window.width * 0.5) - 64, this.window.pos.y + (this.window.height * 0.5) + 104 - 14, "uiFont", "Metro Loop", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtTrackname.depth = this.depth + 1;
+      this.txtTrackname.setTintFill(0x83769c);
+      this.textContainer.add(this.txtTrackname);
+
+      this.txtSessionTitle = this.scene.add.bitmapText((this.window.pos.x + this.window.width * 0.5) + 64, this.window.pos.y + (this.window.height * 0.5) + 64, "uiFont", "upcoming sessions:", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtSessionTitle.depth = this.depth + 1;
+      this.txtSessionTitle.setTintFill(0x83769c);
+      this.textContainer.add(this.txtSessionTitle);
+
+      this.txtSessions = this.scene.add.bitmapText(this.window.pos.x + (this.window.width * 0.5) + 32, this.window.pos.y + (this.window.height * 0.5) + 104, "uiFont", "09:00\n11:00\n14:00", 14, 0).setOrigin(1, 0.5).setLetterSpacing(0);
+      this.txtSessions.depth = this.depth + 1;
+      this.txtSessions.setTintFill(0x83769c);
+      this.textContainer.add(this.txtSessions);
+
+      this.txtSessionNames = this.scene.add.bitmapText(this.window.pos.x + (this.window.width * 0.5) + 32, this.window.pos.y + (this.window.height * 0.5) + 104, "uiFont", "  Free Practice\n  Qualifying\n  Race", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtSessionNames.depth = this.depth + 1;
+      this.txtSessionNames.setTintFill(0x83769c);
+      this.textContainer.add(this.txtSessionNames);
+      //this.window.container.add(this.txtSessionNames);
+
+      this.txtNoData = this.scene.add.bitmapText(this.window.pos.x + (this.window.width * 0.5) + 0, this.window.pos.y + (this.window.height * 0.5) + 104 - 14, "uiFont", "503: Service Unavailable", 14, 0).setOrigin(0.5, 0.5).setLetterSpacing(0);
+      this.txtNoData.depth = this.depth + 1;
+      this.txtNoData.setTintFill(0xff004d);
+      this.window.container.add(this.txtNoData);
+
+      this.txtNoData.alpha = 0;
+      this.textContainer.alpha = 0;
+   }
+
+   update() {
+      //console.log("update claendar")
+      for (let t of this.tiles) {
+         t.update();
+
+         if (t.hovering === true) {
+            this.computer.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+         }
+      }
+   }
+
+   destroy() {
+      this.txtTrackTitle.destroy();
+      this.txtTrackname.destroy();
+      this.txtSessionTitle.destroy();
+      this.txtSessions.destroy();
+      this.txtSessionNames.destroy();
+      this.textContainer.destroy();
+
+      this.txtNoData.destroy();
+
+      for (let t of this.tiles) {
+         t.destroy();
+      }
+   }
+}

src/ui/computer/programs/programMessengerAero.js

@@ -0,0 +1,22 @@
+import Button from "../../button.js";
+
+export default class ProgramMessenger {
+   constructor(_scene, _computer, _window) {
+      this.scene = _scene;
+      this.computer = _computer;
+      this.window = _window;
+
+      this.txtDenied = this.scene.add.bitmapText(this.window.pos.x + (this.window.width * 0.5) + 0, this.window.pos.y + (this.window.height * 0.5), "uiFont", "403: Access Denied", 14, 0).setOrigin(0.5, 0.5).setLetterSpacing(0);
+      this.txtDenied.depth = this.depth + 1;
+      this.txtDenied.setTintFill(0xff004d);
+      this.window.container.add(this.txtDenied);
+   }
+
+   update() {
+      //console.log("update messages");
+   }
+
+   destroy() {
+      this.txtDenied.destroy();
+   }
+}

src/ui/computer/programs/programRegulationsAero.js

@@ -0,0 +1,152 @@
+import Button from "../../button.js";
+
+export default class ProgramRegulations{
+   constructor(_scene, _computer, _window){
+      this.scene = _scene;
+      this.computer = _computer;
+      this.window = _window;
+
+      this.pageNo = 0;
+      this.pages = [{
+         atlas: "",
+         asset: "",
+         name: "",
+         texts: [
+            "Resistance Racing",
+            "technical Manual version 0.1",
+            "written by Joe Barber"
+         ]
+      },{
+         atlas: "infoRake00",
+         asset: "",
+         name: "neutral pitch",
+         texts: []
+      }, {
+         atlas: "infoRake01",
+         asset: "",
+         name: "good pitch",
+         texts: []
+      }, {
+         atlas: "infoRake02",
+         asset: "",
+         name: "aggressive pitch",
+         texts: []
+      }];
+        this.pageMax = this.pages.length;
+        this.pageImage = this.scene.add.sprite(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + this.window.height * 0.5, this.pages[this.pageNo].atlas, this.pages[this.pageNo].asset);
+        this.pageImage.depth = this.window.depth + 1;
+        this.window.container.add(this.pageImage);
+
+        this.txtPreview = this.scene.add.bitmapText(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + (this.window.height * 0.5) + 64 + 8, "uiFont", this.pages[this.pageNo].name, 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.txtPreview.depth = this.depth + 1;
+        this.txtPreview.setTintFill(0x83769c);
+      this.window.container.add(this.txtPreview);
+
+      this.txtPageNo = this.scene.add.bitmapText(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + this.window.height - 8, "uiFont", "1/10", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtPageNo.depth = this.depth + 1;
+      this.txtPageNo.setTintFill(0x83769c);
+      this.window.container.add(this.txtPageNo);
+
+      this.texts = [];
+
+        this.btnNext = new Button(this.scene, { x: this.window.pos.x + (this.window.width * 0.5) + 32, y: this.window.pos.y + (this.window.height * 1) - 8 }, "atlasUi", "sprBtn12", "", false, () => {
+            this.pageNo += 1;
+            if(this.pageNo >= this.pageMax){
+                this.pageNo -= this.pageMax;
+            }
+            this.changePage(this.pageNo)
+        });
+        this.btnNext.setDepth(this.window.depth + 1);
+        this.btnNext.colors = {
+            out: 0x83769c,
+            over: 0x29adff,
+            on: 0x00e436,
+            off: 0xad2900
+        }
+        this.btnNext.tintFill = false;
+        this.btnNext.colorInState(this.btnNext.states.out);
+        this.window.container.add(this.btnNext.sprite);
+        this.window.container.add(this.btnNext.txt);
+
+        this.btnPrev = new Button(this.scene, { x: this.window.pos.x + (this.window.width * 0.5) - 32, y: this.window.pos.y + (this.window.height * 1) - 8 }, "atlasUi", "sprBtn11", "", false, () => {
+            this.pageNo -= 1;
+            if(this.pageNo < 0){
+                this.pageNo += this.pageMax;
+            }
+            this.changePage(this.pageNo)
+        });
+        this.btnPrev.setDepth(this.window.depth + 1);
+        this.btnPrev.colors = {
+            out: 0x83769c,
+            over: 0x29adff,
+            on: 0x00e436,
+            off: 0xad2900
+        }
+        this.btnPrev.tintFill = false;
+        this.btnPrev.colorInState(this.btnPrev.states.out);
+        this.window.container.add(this.btnPrev.sprite);
+      this.window.container.add(this.btnPrev.txt);
+
+      this.changePage(0);
+    }
+
+   changePage(_no) {
+      this.txtPageNo.setText(String(_no + 1) + '/' + String(this.pageMax));
+
+      let data = this.pages[this.pageNo];
+      console.log(data)
+      if (data.texts.length > 0) {
+         this.pageImage.alpha = 0;
+         this.txtPreview.alpha = 0;
+
+         for (let txt of this.texts) {
+            this.window.container.remove(txt);
+            txt.destroy();
+         }
+         this.texts = [];
+
+         let part = (this.window.height - 16) / data.texts.length;
+         for (let [i, d] of data.texts.entries()) {
+            //this.texts.push(this.scene.add.bitmapText(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + (this.window.height * 0.5) + (part * i), "uiFont", d, 14, 0))
+            this.texts.push(this.scene.add.bitmapText(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + (part * i) + 16, "uiFont", d, 14, 0));
+            let t = this.texts[this.texts.length - 1];
+            t.setOrigin(0.5);
+            t.setLetterSpacing(0);
+            t.depth = this.depth + 1;
+            t.setTintFill(0x83769c);
+            this.window.container.add(t);
+         }
+      } else {
+         this.pageImage.alpha = 1;
+         this.pageImage.setTexture(this.pages[this.pageNo].atlas, this.pages[_no].asset);
+         this.txtPreview.alpha = 1;
+         this.txtPreview.setText(this.pages[_no].name);
+
+         for (let txt of this.texts) {
+            this.window.container.remove(txt);
+            txt.destroy();
+         }
+         this.texts = [];
+      }
+    }
+
+    update(){
+        this.btnNext.update();
+        this.btnPrev.update();
+
+        if(this.btnNext.hovering === true || this.btnPrev.hovering === true){
+            this.computer.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+        }
+    }
+
+    destroy(){
+        this.btnNext.destroy();
+       this.btnPrev.destroy();
+       this.txtPageNo.destroy();
+       this.pageImage.destroy();
+
+       for (let txt of this.texts) {
+          txt.destroy();
+       }
+    }
+}

src/ui/computer/programs/programSystemAero.js

@@ -0,0 +1,236 @@
+import Button from "../../button.js";
+import PanelEscapeMenu from "../../panelEscapeMenu.js";
+
+export default class ProgramSystem {
+   constructor(_scene, _computer, _window) {
+      this.scene = _scene;
+      this.computer = _computer;
+      this.window = _window;
+
+      this.contSYS = this.scene.add.container(0, 0);
+      this.window.container.add(this.contSYS);
+      this.contAUX = this.scene.add.container(0, 0);
+      this.window.container.add(this.contAUX);
+      this.contAUX.alpha = 0;
+      /*this.contGFX = this.scene.add.container(0, 0);
+      this.contGFX.alpha = 0;
+      this.contCTL = this.scene.add.container(0, 0);
+      this.contCTL.alpha = 0;
+      this.activeContainer = this.contAUX;*/
+
+      this.options = {
+         sys: 0,
+         aux: 1,
+         gfx: 2,
+         ctl: 3
+      }
+      this.currentOption = this.options.sys;
+
+      //system options background
+      this.btnOptions = new Button(this.scene, { x: this.window.pos.x + this.window.width * 0.5, y: this.window.pos.y + 20 }, "atlasUi", "sprBtn13long", "options", false, () => {
+         console.log("aaa")
+         if (this.currentOption === this.currentOption.sys) {
+            this.currentOption = this.options.aux;
+            this.contSYS.alpha = 0;
+            this.contAUX.alpha = 1;
+         }
+      });
+      this.btnOptions.setDepth(this.window.depth + 1);
+      this.btnOptions.colors = {
+         out: 0x83769c,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.btnOptions.tintFill = false;
+      this.btnOptions.tintText = false;
+      this.btnOptions.colorInState(this.btnOptions.states.off);
+      this.contSYS.add(this.btnOptions.sprite);
+      this.contSYS.add(this.btnOptions.txt);
+
+      this.backgroundNo = 0;
+      this.backgrounds = [{
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground00",
+         locked: false,
+         name: "Formula Aero"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground01",
+         locked: false,
+         name: "Long Nails"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground02",
+         locked: false,
+         name: "Dreams of the Overworld"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground03",
+         locked: false,
+         name: "SerpenTiles"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground03",
+         locked: true,
+         name: "SerpenTiles"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground04",
+         locked: false,
+         name: "Abstract Mirror 1 by Thisispow on Reddit"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground05",
+         locked: false,
+         name: "Abstract Mirror 2 by Thisispow on Reddit"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground06",
+         locked: false,
+         name: "Abstract Mirror 3 by Thisispow on Reddit"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground07",
+         locked: false,
+         name: "Red Ship Fast"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground08",
+         locked: false,
+         name: "Corporate Race"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground09",
+         locked: false,
+         name: "Metalheart"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground10",
+         locked: false,
+         name: "Tunnel"
+      }, {
+         atlas: "atlasDesktopBackgrounds",
+         asset: "sprDesktopBackground11",
+         locked: false,
+         name: "Gen X Soft Club - Tokyo Metro"
+      }];
+      this.backgroundMax = this.backgrounds.length;
+      this.bgPreview = this.scene.add.sprite(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + this.window.height * 0.5, this.backgrounds[this.backgroundNo].atlas, this.backgrounds[this.backgroundNo].asset);
+      this.bgPreview.depth = this.window.depth + 1;
+      this.bgPreview.setScale(0.25);
+      this.contSYS.add(this.bgPreview);
+
+      this.txtPreview = this.scene.add.bitmapText(this.window.pos.x + this.window.width * 0.5, this.window.pos.y + (this.window.height * 0.5) + 64 + 8, "uiFont", this.backgrounds[this.backgroundNo].name, 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtPreview.depth = this.depth + 1;
+      this.txtPreview.setTintFill(0x83769c);
+      this.contSYS.add(this.txtPreview);
+
+      this.btnNext = new Button(this.scene, { x: this.window.pos.x + this.window.width - 16, y: this.window.pos.y + this.window.height * 0.5 }, "atlasUi", "sprBtn12", "", false, () => {
+         this.backgroundNo += 1;
+         if (this.backgroundNo >= this.backgroundMax) {
+            this.backgroundNo -= this.backgroundMax;
+         }
+         this.changeBackgroundPreview(this.backgroundNo)
+      });
+      this.btnNext.setDepth(this.window.depth + 1);
+      this.btnNext.colors = {
+         out: 0x83769c,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.btnNext.tintFill = false;
+      this.btnNext.colorInState(this.btnNext.states.out);
+      this.contSYS.add(this.btnNext.sprite);
+      this.contSYS.add(this.btnNext.txt);
+
+      this.btnPrev = new Button(this.scene, { x: this.window.pos.x + 16, y: this.window.pos.y + this.window.height * 0.5 }, "atlasUi", "sprBtn11", "", false, () => {
+         this.backgroundNo -= 1;
+         if (this.backgroundNo < 0) {
+            this.backgroundNo += this.backgroundMax;
+         }
+         this.changeBackgroundPreview(this.backgroundNo)
+      });
+      this.btnPrev.setDepth(this.window.depth + 1);
+      this.btnPrev.colors = {
+         out: 0x83769c,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.btnPrev.tintFill = false;
+      this.btnPrev.colorInState(this.btnPrev.states.out);
+      this.contSYS.add(this.btnPrev.sprite);
+      this.contSYS.add(this.btnPrev.txt);
+
+
+      //audio options
+      this.btnSystem = new Button(this.scene, { x: this.window.pos.x + this.window.width * 0.5, y: this.window.pos.y + 20 }, "atlasUi", "sprBtn13long", "system", false, () => {
+         console.log("closing audio")
+         if (this.currentOption === this.currentOption.aux) {
+            this.currentOption = this.options.sys;
+            this.contAUX.alpha = 0;
+            this.contSYS.alpha = 1;
+         }
+      });
+      this.btnSystem.setDepth(this.window.depth + 1);
+      this.btnSystem.colors = {
+         out: 0x83769c,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.btnSystem.tintFill = false;
+      this.btnSystem.tintText = false;
+      this.btnSystem.colorInState(this.btnSystem.states.out);
+      this.contAUX.add(this.btnSystem.sprite);
+      this.contAUX.add(this.btnSystem.txt);
+   }
+
+   changeBackgroundPreview(_no) {
+      if (this.backgrounds[_no].locked === false) {
+         this.bgPreview.alpha = 1;
+         this.bgPreview.setTexture(this.backgrounds[this.backgroundNo].atlas, this.backgrounds[_no].asset);
+         this.txtPreview.setText(this.backgrounds[_no].name);
+         this.computer.background.setTexture(this.backgrounds[this.backgroundNo].atlas, this.backgrounds[_no].asset);
+         flagManager.setFlag("desktopBackground", String(this.backgroundNo));
+      } else {
+         this.bgPreview.alpha = 0.1;
+         //this.txtPreview.setText(this.backgrounds[_no].text);
+         this.txtPreview.setText("locked");
+      }
+   }
+
+   update() {
+      switch (this.currentOption) {
+         case this.options.sys:
+            this.btnNext.update();
+            this.btnPrev.update();
+            //this.btnOptions.update();
+
+            if (this.btnNext.hovering === true || this.btnPrev.hovering === true || this.btnOptions.hovering === true) {
+               this.computer.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+            }
+            break;
+         case this.options.aux:
+            this.btnSystem.update();
+            break;
+         default:
+            break;
+      }
+
+   }
+
+   destroy() {
+      this.btnOptions.destroy();
+      this.btnNext.destroy();
+      this.btnPrev.destroy();
+      this.bgPreview.destroy();
+
+      this.btnSystem.destroy();
+
+      this.contSYS.destroy();
+      this.contAUX.destroy();
+   }
+}

src/ui/computer/windowAero.js

@@ -0,0 +1,135 @@
+import Button from "../button.js";
+
+export default class ComputerWindowAero{
+    constructor(_scene, _computer, _name, _x, _y, _width, _height){
+        this.scene = _scene;
+        this.computer = _computer;
+        this.name = _name;
+        this.width = _width;
+        this.height = _height;
+        this.pos = {
+            x: _x,
+            y: _y
+        }
+        this.depth = 15000;
+        this.isOpen = false;
+
+        this.container = this.scene.add.container(0, 0);
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0xfff1e8, 1);
+        this.bgGraphics.fillRect(this.pos.x - 16, this.pos.y, this.width + 32, this.height);
+        this.bgGraphics.fillRect(this.pos.x, this.pos.y - 16, this.width, this.height + 32);
+        this.bgGraphics.depth = this.depth;
+        this.container.add(this.bgGraphics);
+
+        this.txtWindowname = this.scene.add.bitmapText(this.pos.x + (this.width * 0.5), this.pos.y, "uiFont", this.name, 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.txtWindowname.depth = this.depth + 1;
+        this.txtWindowname.setTintFill(0x1d2b53);
+        this.container.add(this.txtWindowname);
+
+        this.cornerTL = this.scene.add.sprite(this.pos.x - 8, this.pos.y - 8, "atlasUi", "sprDesktopWindowCorner");
+        this.cornerTL.depth = this.depth;
+        this.container.add(this.cornerTL);
+
+        this.cornerTR = this.scene.add.sprite(this.pos.x + this.width + 8, this.pos.y - 8, "atlasUi", "sprDesktopWindowCorner");
+        this.cornerTR.angle = 90;
+        this.cornerTR.depth = this.depth;
+        this.container.add(this.cornerTR);
+
+        this.cornerBL = this.scene.add.sprite(this.pos.x - 8, this.pos.y + this.height + 7, "atlasUi", "sprDesktopWindowCorner");
+        this.cornerBL.angle = 270;
+        this.cornerBL.depth = this.depth;
+        this.container.add(this.cornerBL);
+
+        this.cornerBR = this.scene.add.sprite(this.pos.x + this.width + 8, this.pos.y + this.height + 7, "atlasUi", "sprDesktopWindowCorner");
+        this.cornerBR.angle = 180;
+        this.cornerBR.depth = this.depth;
+        this.container.add(this.cornerBR);
+
+        this.btnBack = new Button(this.scene, { x: this.pos.x, y: this.pos.y }, "atlasUi", "sprBtn09b", "", false, () => {
+            this.close();
+        });
+        this.btnBack.setDepth(this.depth + 1);
+        this.btnBack.colors = {
+            out: 0xff004d,
+            over: 0x29adff,
+            on: 0x00e436,
+            off: 0xad2900
+        }
+        this.btnBack.tintFill = false;
+        this.btnBack.colorInState(this.btnBack.states.out);
+        this.container.add(this.btnBack.sprite);
+
+        this.program = null;
+
+        this.container.alpha = 0;
+    }
+
+    update(){
+        if(this.btnBack.hovering === true){
+            this.computer.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+        }else{
+            //this.computer.cursor.setTexture("atlasUi", "sprDesktopCursorNormal");
+        }
+
+        if(this.isOpen === true){
+            if(this.container.alpha < 1){
+                this.container.alpha *= 1.1;
+                if(this.container.alpha > 0.9){
+                    this.container.alpha = 1;
+                }
+            }
+        }else{
+            if(this.container.alpha > 0){
+                this.container.alpha *= 0.9;
+            }
+            if(this.container.alpha <= 0.1){
+                this.closeForReal();
+            }
+        }
+
+        if(this.program !== null){
+            this.program.update();
+        }
+
+        this.btnBack.update();
+    }
+
+    open(){
+        this.computer.windowOpen = this;
+        this.container.alpha = 0.1;
+        this.isOpen = true;
+    }
+
+    close(){
+        if(this.computer.windowToClose === null){
+            this.isOpen = false;
+            this.computer.windowToClose = this;
+        }
+    }
+
+    closeForReal(){
+        this.container.alpha = 0;
+        this.computer.windowToClose = null;
+        if(this.computer.windowOpen === this){
+            this.computer.windowOpen = null;
+        }
+    }
+
+    destroy(){
+        if(this.program !== null){
+            this.program.destroy();
+        }
+
+        this.bgGraphics.destroy();
+        this.txtWindowname.destroy();
+        this.cornerTL.destroy();
+        this.cornerTR.destroy();
+        this.cornerBL.destroy();
+        this.cornerBR.destroy();
+        this.btnBack.destroy();
+
+        this.container.destroy();
+    }
+}

src/ui/conversationManager.js

@@ -0,0 +1,539 @@
+import ConversationOption from "./conversationOption.js";
+
+export default class ConversationManager {
+   constructor(_scene) {
+      this.scene = _scene;
+      this.btnOptions = [];
+      this.npc = null;
+      this.npcSprite = null;
+      this.npcTextGhost = this.scene.add.bitmapText(0, -32, "uiFont", "", 14, 1).setOrigin(0.5, 1).setLetterSpacing(0);
+      this.npcTextGhost.maxWidth = 460;
+      this.npcTextGhost.depth = 10000;
+      this.npcTextGhost.alpha = 0;
+      this.npcTextGhost.setLeftAlign();
+      this.npcText = this.scene.add.bitmapText(0, -32, "uiFont", "", 14, 1).setOrigin(0, 0).setLetterSpacing(0);
+      this.npcText.maxWidth = 460;
+      this.npcText.depth = 10000;
+      this.npcText.setLeftAlign();
+
+
+      this.conversation = {
+         file: null,
+         treePosition: 0,
+         speakingTo: {
+            name: "",
+         },
+      };
+
+      this.highlightedAnswer = 0;
+      this.usedKeyboard = false;
+      this.cooldown = {
+         current: 0,
+         max: 10,
+      };
+      this.animText = {
+         text: "",
+         textFull: "",
+         current: 0,
+         end: 0,
+      }
+
+      this.bg = this.scene.add.graphics();
+
+      this.glyphs = '0123456789AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz[]/&"!§$%&/()=?[].:,;+-#~*|<>';
+      this.rend = '';
+      this.dead = false;
+   }
+
+   update() {
+      if (this.animText.current < this.animText.end && this.dead === false) {
+         this.animText.current += 1 * this.scene.dt;
+         this.animText.text = this.animText.textFull.substring(0, Math.floor(this.animText.current));
+         //this.npcText.setText(this.animText.text + (Math.floor(this.animText.current) % 4 < 2 ? " []"  : "  "));
+
+         let rend = ' ';
+         lp: for (let i = Math.floor(this.animText.current); i < this.animText.end; i++) {
+            rend += this.glyphs[Math.floor(Math.random() * this.glyphs.length)];
+            if (rend.length > 10) {
+               break lp;
+            }
+         }
+         this.npcText.setText(this.animText.text + rend);
+
+         let tb = this.npcTextGhost.getTextBounds();
+         this.bg.clear();
+         this.bg.fillStyle(0x000000, 1);
+         this.bg.fillRect(tb.local.x - tb.local.width * 0.5 - 3, tb.local.y + this.npcTextGhost.y - (tb.local.height * 1) - 3, tb.local.width + 6, tb.local.height + 6);
+         this.bg.depth = this.npcText.depth - 1;
+
+         this.npcText.setPosition(tb.local.x - tb.local.width * 0.5, tb.local.y + this.npcTextGhost.y - tb.local.height)
+      }
+
+      if (this.cooldown.current <= 0) {
+         let lit = null;
+         for (let b of this.btnOptions) {
+            b.btn.update();
+            if (b.btn.state === b.btn.states.over) {
+               lit = b;
+            }
+         }
+
+         if (this.btnOptions.length > 0) {
+            if (INPUTS.btnUp.justPressed === true || INPUTS.stickLeft.asKey.up.justPressed === true) {
+               this.usedKeyboard = true;
+               if (lit !== null) {
+                  lit.btn.state = lit.btn.states.out;
+               }
+               this.btnOptions[this.highlightedAnswer].btn.switchState(this.btnOptions[this.highlightedAnswer].btn.states.out);
+               this.highlightedAnswer -= 1;
+            }
+            if (INPUTS.btnDown.justPressed === true || INPUTS.stickLeft.asKey.down.justPressed === true) {
+               this.usedKeyboard = true;
+               if (lit !== null) {
+                  lit.btn.state = lit.btn.states.out;
+               }
+               this.btnOptions[this.highlightedAnswer].btn.switchState(this.btnOptions[this.highlightedAnswer].btn.states.out);
+               this.highlightedAnswer += 1;
+            }
+
+            if (this.scene.hand.mouseMoved === true) {
+               if (lit !== this.btnOptions[this.highlightedAnswer] && lit !== null) {
+                  this.btnOptions[this.highlightedAnswer].btn.switchState(this.btnOptions[this.highlightedAnswer].btn.states.out);
+               }
+               this.usedKeyboard = false;
+            }
+
+            if (this.usedKeyboard === true) {
+               if (lit !== null) {
+                  lit.btn.switchState(lit.btn.states.out);
+               }
+               this.highlightedAnswer = Math.max(0, Math.min(this.highlightedAnswer, this.btnOptions.length - 1));
+               this.btnOptions[this.highlightedAnswer].btn.switchState(this.btnOptions[this.highlightedAnswer].btn.states.over);
+            }
+
+            if (INPUTS.btnA.justReleased === true) {
+               //this.btnOptions[this.highlightedAnswer].btn.simulateClick();
+            }
+         }
+      } else {
+         this.cooldown.current -= 1;
+      }
+   }
+
+   createOptions(_elem) {
+      for (let b of this.btnOptions) {
+         b.btn.destroy();
+      }
+      this.btnOptions = [];
+
+      let rec = 0;
+      for (let [i, a] of _elem.answers.entries()) {
+         let valid = true;
+         //check if option is valid
+         if (a.checkFlag !== undefined) {
+            valid = false;
+            //todo check if flag is set
+            if (flagManager.getFlagById(a.checkFlag) !== null) {
+               valid = true;
+            }
+         }
+         if (a.checkFlagTrue !== undefined) {
+            valid = false;
+            //todo check if flag is set
+            if (flagManager.getFlagById(a.checkFlagTrue).value === "true") {
+               valid = true;
+            }
+         }
+         if (a.checkFlagFalse !== undefined) {
+            valid = false;
+            //todo check if flag is set
+            if (flagManager.getFlagById(a.checkFlagFalse).value === "false") {
+               valid = true;
+            }
+         }
+         /*if (a.checkPlayerInventory !== undefined) {
+                valid = false;
+                for (let i of this.scene.playerData.inventory) {
+                    if (i.type === a.checkPlayerInventory.type && i.data.id === a.checkPlayerInventory.dataId) {
+                        valid = true;
+                    }
+                }
+            }*/
+
+         //push conversation option
+         if (valid === true) {
+            //check if another styling applies than default
+            let atext = String(i) + ". >> " + a.text + " <<";
+            if (a.style !== undefined) {
+               if (a.style === "command") {
+                  atext = "*" + a.text + "*";
+               }
+            }
+
+            this.btnOptions.push({
+               data: a,
+               btn: new ConversationOption(this.scene, { x: 0, y: i * 22 }, atext, () => {
+                  this.interpret(a.actions.split(" "));
+               }),
+            });
+            //update the rec for move left aligned below
+            let w = this.btnOptions[this.btnOptions.length - 1].btn.txt.getTextBounds().local.width;
+            if (w > rec) {
+               rec = w;
+            }
+         } else {
+            this.btnOptions.push({
+               data: a,
+               btn: new ConversationOption(this.scene, { x: 0, y: i * 22 }, String(i) + ". *locked*", () => { }),
+            });
+            //update the rec for move left aligned below
+            let w = this.btnOptions[this.btnOptions.length - 1].btn.txt.getTextBounds().local.width;
+            if (w > rec) {
+               rec = w;
+            }
+         }
+      }
+      //move all buttons left by half of widest button (left aligned list but centered on screen)
+      for (let b of this.btnOptions) {
+         b.btn.move(b.btn.txt.x - rec * 0.5, b.btn.txt.y);
+      }
+
+      this.highlightedAnswer = Math.max(0, Math.min(this.highlightedAnswer, this.btnOptions.length - 1));
+      this.cooldown.current = this.cooldown.max;
+   }
+
+   interpret(_actions) {
+      let arr = _actions;
+      let modelId = "";
+      switch (arr[0]) {
+         case "GOTO":
+            this.goto(Number(arr[1]));
+            arr.splice(0, 2);
+            break;
+         case "GOTONOACTION":
+            this.goto(Number(arr[1]), false);
+            arr.splice(0, 2);
+            break;
+         case "SETFILE": // [diag id / filename] [tree position / start id]
+            //todo maybe set file like old style for a specific character or create SETFILEFORID action
+            //currently this only sets file for the currernt NPC conversation
+            this.setConversation(arr[1], Number(arr[2]));
+            arr.splice(0, 3);
+            break;
+         case "EXIT":
+            arr.splice(0, 1);
+            //save latest position in conversation for reentry
+            if (this.npc != null) {
+               this.npc.data.conversation.treePosition = this.conversation.treePosition;
+            }
+            this.clearConversation();
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            break;
+         case "SETFLAG": // [flag id] [value]
+            flagManager.setFlag(arr[1], arr[2]);
+            arr.splice(0, 3);
+            break;
+         case "REMOVEFLAG": // [flag id]
+            flagManager.removeFlag(arr[1]);
+            arr.splice(0, 2);
+            break;
+         case "CHECKFLAGBOOL": //[flag id][GOTO A][GOTO B]
+            if (flagManager.getFlagById(arr[1]).value === "true") {
+               this.goto(Number(arr[2]));
+            } else {
+               this.goto(Number(arr[3]));
+            }
+            arr.splice(0, 4);
+            break;
+         case "REMOVEMODEL": // [model id]
+            this.scene.geometryController.destroyModelById(arr[1]);
+            arr.splice(0, 2);
+            break;
+         case "SCALE": // [model id] [x] [y] [z]
+            this.scene.geometryController.getModelById(arr[1]).scale({ x: arr[2], y: arr[3], z: arr[4] });
+            arr.splice(0, 5);
+            break;
+         case "LOOKATRAD": // [model id] [rad]
+            this.scene.geometryController.getModelById(arr[1]).lookDir.yaw = Number(arr[2]);
+            arr.splice(0, 3);
+            break;
+         case "LOOKATMODEL": // [model id] [other model id]
+            arr.splice(0, 2);
+            break;
+         case "PLAYERLOOKAT": // [other model id]
+            //todo make player look at model - maybe at position but needs another action?
+            //modelId = this.scene.geometryController.models.filter((el) => { return el.id === arr[1] })[0];
+            //let a = Phaser.Math.Angle.Between(this.scene.cam.pos.x * -1, this.scene.cam.pos.z * -1, modelId.pos.x, modelId.pos.z) + (Math.PI * 0.5);
+            //this.scene.cam.dir.x = a * -1;
+
+            let toDir = {
+               yaw: Math.PI * 0.25,
+            };
+            this.scene.player.dir.yaw += toDir.yaw;
+            this.scene.player.rotateAroundAxis(this.scene.player.transform.toVectorArray(this.scene.player.transform.up), toDir.yaw * -1);
+
+            arr.splice(0, 2);
+            break;
+         case "TRIGGERDIALOGUE":
+            //todo simulate click action on other model with its dialogue
+            //modelId = this.scene.geometryController.models.filter((el) => { return el.id === arr[1] })[0];
+            //this.triggerDialogue(modelId);
+            arr.splice(0, 2);
+            break;
+         case "JUMPPLAYERPOSITION":
+            this.scene.player.jumpToPosition(
+               {
+                  x: arr[1],
+                  y: arr[2],
+                  z: arr[3],
+               },
+               true,
+            );
+            arr.splice(0, 4);
+            break;
+         case "JUMPPLAYERPOSITIONRELATIVE":
+            this.scene.player.jumpToPosition(
+               {
+                  x: this.scene.player.pos.x + arr[1],
+                  y: this.scene.player.pos.y + arr[2],
+                  z: this.scene.player.pos.z + arr[3],
+               },
+               true,
+            );
+            arr.splice(0, 4);
+            break;
+         case "JUMPTOPOSITION":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.jumpToPosition({ x: Number(arr[2]), y: Number(arr[3]), z: Number(arr[4]) });
+            arr.splice(0, 5);
+            break;
+         case "JUMPTOPOSITIONRELATIVE":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.jumpToPosition({ x: modelId.pos.x + Number(arr[2]), y: modelId.pos.y + Number(arr[3]), z: modelId.pos.z + Number(arr[4]) });
+            arr.splice(0, 5);
+            break;
+         case "ADDWAYPOINT": // [model id] [x] [y] [z] [spd] [jump]
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            //console.log(modelId)
+            /*
+                if(modelId.data.waypoints === undefined || modelId.data.waypoints === null){
+                    modelId.data.waypoints = [];
+                }
+                modelId.waypoints.push({ x: Number(arr[2]), y: Number(arr[3]), z: Number(arr[4]) }, Number(arr[5]), Boolean(Number(arr[6])));
+                */
+            modelId.mover.targets.push({
+               pos: {
+                  x: Number(arr[2]),
+                  y: Number(arr[3]),
+                  z: Number(arr[4]),
+                  spd: Number(arr[5]),
+               },
+               dir: {
+                  yaw: modelId.dir.yaw,
+                  pitch: modelId.dir.pitch,
+                  roll: modelId.dir.roll,
+                  spd: 0.01,
+               },
+               jump: Boolean(Number(arr[6])),
+            });
+            modelId.mover.target = modelId.mover.targets[0];
+            //modelId.mover.isMoving = true;
+            arr.splice(0, 7);
+            break;
+         case "STARTWAYPOINT":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.mover.target = modelId.mover.targets[0];
+            modelId.mover.isMoving = true;
+            arr.splice(2, 0);
+            break;
+         case "SETTEXTURE": // [model id] [quadData nr = 0] [texture] [frame = 0]
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.quadData[arr[2]].setTexture(arr[3], arr[4], false);
+            arr.splice(0, 5);
+            break;
+         case "SETATLAS8WAY": // [model id] [quadData nr = 0] [texture] [frame = 0]
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.atlas = arr[3];
+            modelId.atlas8wayFrame = arr[4];
+            modelId.quadData[arr[2]].setTexture(arr[3], arr[4], false);
+            arr.splice(0, 5);
+            break;
+         case "IS8WAY":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.flags.is8way = arr[2] === "true" ? true : false;
+            arr.splice(0, 3);
+            break;
+         case "USESATLAS":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.flags.usesAtlas = arr[2] === "true" ? true : false;
+            arr.splice(0, 3);
+            break;
+         case "ENDDIALOGUE":
+            this.endDialogue();
+            arr.splice(0, 1);
+            break;
+         /*
+            //old one
+            case "SETFILE":
+                modelId = this.scene.geometryController.models.filter((el) => { return el.id === arr[1] })[0];
+                if (arr[2] !== "null") {
+                    modelId.file = arr[2];
+                } else {
+                    modelId.file = null;
+                }
+                arr.splice(0, 3);
+                break;
+            */
+         case "PLAYSOUND":
+            //todo sound controller or model has a (spatial) sound?
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.setSfx(arr[2], { loop: Boolean(Number(arr[3])) });
+            arr.splice(0, 4);
+            break;
+         case "STOPSOUND":
+            //todo sound controller or model has a (spatial) sound?
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.stopSfx();
+            arr.splice(0, 2);
+            break;
+         case "LOADLEVEL":
+            this.scene.loadLevel(arr[1]);
+            arr.splice(0, 2);
+            break;
+         case "RESTART":
+            //this.scene.restart();
+            //this.scene.scene.start("Preloader");
+            arr.splice(0, 1);
+            break;
+         case "TRIGGERACTION":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.action();
+            arr.splice(0, 2);
+            break;
+         case "TRIGGERACTIONID":
+            modelId = this.scene.geometryController.models.filter((el) => {
+               return el.id === arr[1];
+            })[0];
+            modelId.customActions[Number(arr[2])]();
+            arr.splice(0, 3);
+            break;
+         default:
+            console.log(arr[0]);
+            arr.splice(0, 1);
+            break;
+      }
+      if (arr.length > 0) {
+         this.interpret(arr);
+      }
+   }
+
+   goto(_id, _interpretActions = true) {
+      this.conversation.treePosition = _id;
+      let elem = this.conversation.file.cards.filter((e) => e.id === _id)[0];
+      if (elem === undefined) {
+         elem = this.conversation.file.cards[0];
+      }
+      //this.npcText.setText(this.replaceCheck(elem.text))
+      this.npcTextGhost.setText(this.replaceCheck(elem.text));
+      this.animText.text = "";
+      this.animText.textFull = this.npcTextGhost.text;
+      this.animText.current = 0;
+      this.animText.end = this.animText.textFull.length;
+
+
+      let tb = this.npcTextGhost.getTextBounds();
+      this.bg.clear();
+      this.bg.fillStyle(0x000000, 1);
+      this.bg.fillRect(tb.local.x - tb.local.width * 0.5 - 3, tb.local.y + this.npcText.y - tb.local.height * 1 - 3, tb.local.width + 6, tb.local.height + 6);
+      this.bg.depth = this.npcText.depth - 1;
+
+      if (this.npcSprite !== null) {
+         this.npcSprite.destroy();
+      }
+      if (elem.sprite !== undefined) {
+         //TODO eventually adding a sprite for people who speak to you
+         //this.npcSprite = this.scene.add.sprite(-142, -85, elem.sprite);
+      }
+
+      if (elem.actions !== undefined && _interpretActions === true) {
+         this.interpret(elem.actions.split(" "));
+      }
+
+      this.createOptions(elem);
+   }
+
+   replaceCheck(_str) {
+      /*if (this.npc !== null) {
+            _str = _str.replace("PLAYERNAME", this.npc.conversation.speakingTo.name !== null ? this.npc.conversation.speakingTo.name : this.scene.playerData.name);
+        } else {
+            _str = _str.replace("PLAYERNAME", this.scene.playerData.name);
+        }*/
+      return _str;
+   }
+
+   setNPC(_npc) {
+      this.npc = _npc;
+   }
+
+   setConversation(_fileName, _startId) {
+      this.dead = false;
+      this.conversation.file = this.scene.cache.json.get(_fileName);
+      //save current fileName in NPC if possible for reentry purpose
+      if (this.npc != null) {
+         this.npc.data.conversation.fileName = _fileName;
+      }
+      this.conversation.treePosition = _startId;
+      this.goto(_startId);
+   }
+
+   clearConversation() {
+      this.npcText.setText("");
+      for (let b of this.btnOptions) {
+         b.btn.destroy();
+      }
+      this.btnOptions = [];
+      if (this.npcSprite !== null) {
+         this.npcSprite.destroy();
+      }
+      this.bg.clear();
+      this.dead = true;
+   }
+
+   destroy() {
+      this.npcText.destroy();
+      this.npcTextGhost.destroy();
+      for (let b of this.btnOptions) {
+         b.btn.destroy();
+      }
+      this.btnOptions = [];
+      if (this.npcSprite !== null) {
+         this.npcSprite.destroy();
+      }
+      this.bg.clear();
+      this.bg.destroy();
+
+      this.dead = true;
+   }
+}

src/ui/conversationOption.js

@@ -0,0 +1,116 @@
+export default class ConversationOption{
+    constructor(_scene, _pos, _text, _func){
+        this.scene = _scene;
+        this.pos = _pos;
+        this.func = _func;
+        this.toggleOffFunc = () => {};
+
+        this.colors = {
+            out: 0xfff1e8,
+            over: 0x29adff,
+            on: 0x00e436
+        }
+
+        this.states = {
+            out: 0,
+            over: 1,
+            on: 2
+        }
+        this.state = this.states.out;
+        this.active = false;
+        
+        this.txt = this.scene.add.bitmapText(_pos.x, _pos.y, "uiFont", _text, 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+        this.txt.depth = 10000;
+        this.txt.maxWidth = 460;
+
+        this.colorInState(this.state);
+
+        let tb = this.txt.getTextBounds();
+        this.rect = new Phaser.GameObjects.Rectangle(this.scene, tb.local.x, tb.local.y + this.txt.y, tb.local.width, tb.local.height).setOrigin(0, 0.5);
+
+        this.bg = this.scene.add.graphics();
+        this.bg.fillStyle(0x000000, 0.5);
+        this.bg.fillRect(0, 0, tb.local.width + 6, tb.local.height + 6);
+        this.bg.x = this.txt.x - 3;
+        this.bg.y = this.txt.y - (tb.local.height * 0.5) - 3;
+        this.bg.depth = this.txt.depth-1;
+    }
+
+    update(){
+        
+        if(this.rect.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)){
+            if(this.scene.hand.pressed === false){
+                if(this.active === false){
+                    this.switchState(this.states.over);
+                }else{
+                    this.switchState(this.states.out);
+                }
+            }
+            if(this.scene.hand.justPressed === true){
+                if(this.active === true){
+                    this.switchState(this.states.over);
+                }else{
+                    this.switchState(this.states.on);
+                }
+            }
+            if(this.scene.hand.justReleased === true){
+                this.func();
+            }
+        }else{
+            if(this.active === false){
+                this.switchState(this.states.out);
+            }else{
+                this.switchState(this.states.on);
+            }
+        }
+    }
+
+    simulateClick(){
+        this.func();
+    }
+
+    switchState(_state){
+        if (this.state !== _state) {
+            this.state = _state;
+            this.colorInState(this.state);
+        }
+    }
+
+    colorInState(_state){
+        switch(this.state){
+            case this.states.out:
+                this.txt.setTintFill(this.colors.out);
+            break;
+            case this.states.over:
+                this.txt.setTintFill(this.colors.over);
+            break;
+            case this.states.on:
+                this.txt.setTintFill(this.colors.out);
+            break;
+            default:
+            break;
+        }
+    }
+
+    move(_x, _y){
+        this.txt.x = _x;
+        this.txt.y = _y;
+        
+        let tb = this.txt.getTextBounds();
+        this.bg.x = this.txt.x - 3;
+        this.bg.y = this.txt.y - (tb.local.height * 0.5) - 3;
+
+        this.rect.x = _x;
+        this.rect.y = _y;
+    }
+
+    destroy(){
+        this.txt.destroy();
+        this.rect.destroy();
+        this.bg.destroy();
+    }
+
+    setDepth(_depth){
+        this.txt.depth = _depth;
+    }
+}

src/ui/movingGrid.js

@@ -0,0 +1,87 @@
+export default class MovingGrid{
+    constructor(_scene, _sizeX, _sizeY, _cellSize){
+        this.scene = _scene;
+        this.size = {
+            x: _sizeX,
+            y: _sizeY
+        }
+        this.cellSize = _cellSize;
+
+        this.points = [];
+        for (let yy = 0; yy < this.size.y; yy += this.cellSize){
+            for (let xx = 0; xx < this.size.x; xx += this.cellSize) {
+                this.points.push({
+                    id: this.points.length,
+                    x: 16 + xx - (this.scene.game.config.width * 0.5),
+                    y: 16 + yy - (this.scene.game.config.height * 0.5),
+                    sprite: this.scene.add.sprite(xx, yy, "atlasUi", "sprUiMenuBg")
+                });
+                this.points[this.points.length - 1].sprite.depth = 9991;
+            }
+        }
+
+        this.pointers = [];
+
+        //this.highlight = this.scene.add.graphics();
+    }
+
+    update(){
+        for(let m of this.pointers){
+            for(let p of this.points){
+                let a = Phaser.Math.Angle.Between(p.x, p.y, m.x, m.y);
+                let d = Phaser.Math.Distance.Between(m.x, m.y, p.x, p.y);
+                if (d < m.influence) {
+                    p.sprite.x = p.x + Math.cos(a) * Math.min(d * 0.25, ((m.influence * 2) / d));
+                    p.sprite.y = p.y + Math.sin(a) * Math.min(d * 0.25, ((m.influence * 2) / d));
+                } else {
+                    p.sprite.x = p.x;
+                    p.sprite.y = p.y;
+                }
+                p.sprite.setScale(1);
+            }
+        }
+
+        //this.highlight.clear();
+        //this.highlight.lineStyle(1, 0x00ff00);
+        let lx = Math.floor(this.size.x / this.cellSize);
+        let mx = this.scene.hand.pos.x + (this.scene.game.config.width * 0.5) - 16;
+        let my = this.scene.hand.pos.y + (this.scene.game.config.height * 0.5) - 16;
+        let xx = Math.floor(mx / this.cellSize);
+        let yy = Math.floor(my / this.cellSize);
+        let id = Math.max(0, Math.min((yy * lx) + xx, this.points.length-1));
+        this.points[id].sprite.setScale(4);
+    }
+
+    addPointer(_id, _x, _y, _influence){
+        this.pointers.push({
+            id: _id,
+            influence: _influence,
+            pos: {
+                x: _x,
+                y: _y
+            }
+        });
+    }
+
+    updatePointer(_id, _x, _y, _influence){
+        let m = this.pointers.filter(el => el.id === _id)[0];
+        m.x = _x;
+        m.y = _y;
+        m.influence = _influence;
+    }
+
+    removePointerById(_id){
+        for(let i = this.pointers.length-1 ; i >= 0 ; i--){
+            if(this.pointers[i].id === _id){
+                this.pointers.splice(i, 1);
+            }
+        }
+    }
+
+    destroy(){
+        for(let p of this.points){
+            p.sprite.destroy();
+        }
+        //this.highlight.destroy();
+    }
+}

src/ui/panelElevator.js

@@ -0,0 +1,225 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelElevator {
+   constructor(_scene) {
+      this.scene = _scene;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      //left side
+      this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "BACK", false, () => {
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+
+      /*
+      this.btnToTrack = new Button(this.scene, { x: -160, y: -34 }, "atlasUi", "sprBtn00", "DIRECT TRACK", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.loadLevel("quadRingsTest", {track: 2, startFromHangar: false, playerShipModel: "modHoverCarWipeOutStyle"});
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+      });
+
+      this.btnToShipSelection = new Button(this.scene, { x: -160, y: 34 }, "atlasUi", "sprBtn00", "MAIN MENU", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.scene.player.setVisibility(false);
+
+          this.scene.loadLevel("mainMenu", {});
+          this.destroy();
+      });
+      */
+
+      /*
+      this.btnToEditor = new Button(this.scene, { x: -160, y: 102 }, "atlasUi", "sprBtn00", "editor", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+
+          this.scene.loadLevel("modelBuilder");
+      });
+      */
+
+      //right side
+      this.btnOffice = new Button(this.scene, { x: 160, y: -68 }, "atlasUi", "sprBtn00", "OFFICE", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("office00");
+      });
+
+      this.btnQuarters = new Button(this.scene, { x: 160, y: -34 }, "atlasUi", "sprBtn00", "QUARTERS", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+         //only bc immideat new panel in level
+         this.scene.loadLevel("playerApartement00", { fromElevator: false });
+      });
+
+      this.btnLounge = new Button(this.scene, { x: 160, y: 0 }, "atlasUi", "sprBtn00", "LOUNGE", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("marketSquareApartements00", { lounge: true });
+      });
+
+      this.btnSocial = new Button(this.scene, { x: 160, y: 34 }, "atlasUi", "sprBtn00", "MARKET", false, () => {
+         this.scene.player.jumpToPosition({ x: 256, y: 16, z: -96 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("marketSquareApartements00", { lounge: false });
+      });
+
+      this.btnHangar = new Button(this.scene, { x: 160, y: 68 }, "atlasUi", "sprBtn00", "HANGAR", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         if (flagManager.getFlagById("demoProgress").value === "0") {
+            this.scene.loadLevel("hangar00", { startFromElevator: true, showIntro: true });
+         } else {
+            this.scene.loadLevel("hangar00", { startFromElevator: true });
+         }
+      });
+
+      this.btnPower = new Button(this.scene, { x: 160, y: 102 }, "atlasUi", "sprBtn00", "CHVRCH CLUB" /*"POWER"*/, false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("church00");
+      });
+
+      /*
+      //this.btnOffice.switchState(this.btnOffice.states.off);
+      this.btnQuarters.switchState(this.btnQuarters.states.off);
+      this.btnLounge.switchState(this.btnLounge.states.off);
+      //this.btnPower.switchState(this.btnPower.states.off);
+
+      if (flagManager.getFlagById("playingDemo").value === "1") {
+         this.btnHangar.switchState(this.btnHangar.states.off);
+         this.btnLounge.switchState(this.btnLounge.states.off);
+         this.btnQuarters.switchState(this.btnQuarters.states.off);
+         this.btnSocial.switchState(this.btnSocial.states.off);
+      }
+      */
+      /*this.btnDream = new Button(this.scene, { x: 160, y: -66 }, "atlasUi", "sprBtn00", "DREAM", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+
+          this.scene.loadLevel("dream00");
+      });*/
+
+      if (flagManager.getFlagById("officeLevel").value === "-1") {
+         this.btnOffice.switchState(this.btnOffice.states.off);
+      }
+      if (flagManager.getFlagById("quartersLevel").value === "-1") {
+         this.btnQuarters.switchState(this.btnQuarters.states.off);
+      }
+      if (flagManager.getFlagById("loungeLevel").value === "-1") {
+         this.btnLounge.switchState(this.btnLounge.states.off);
+      }
+      if (flagManager.getFlagById("marketLevel").value === "-1") {
+         this.btnSocial.switchState(this.btnSocial.states.off);
+      }
+      if (flagManager.getFlagById("hangarLevel").value === "-1") {
+         this.btnHangar.switchState(this.btnHangar.states.off);
+      }
+      if (flagManager.getFlagById("churchLevel").value === "-1") {
+         this.btnPower.switchState(this.btnPower.states.off);
+      }
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons === false) {
+         this.btnBack.update();
+         //this.btnToTrack.update();
+         //this.btnToShipSelection.update();
+         //this.btnToEditor.update();
+         //this.btnDream.update();
+         /*if (flagManager.getFlagById("playingDemo").value === "0") {
+         this.btnOffice.update();
+         this.btnQuarters.update();
+         this.btnLounge.update();
+         this.btnSocial.update();
+         this.btnHangar.update();
+         this.btnPower.update();
+         }*/
+
+         if (flagManager.getFlagById("officeLevel").value !== "-1") {
+            this.btnOffice.update();
+         }
+         if (flagManager.getFlagById("quartersLevel").value !== "-1") {
+            this.btnQuarters.update();
+         }
+         if (flagManager.getFlagById("loungeLevel").value !== "-1") {
+            this.btnLounge.update();
+         }
+         if (flagManager.getFlagById("marketLevel").value !== "-1") {
+            this.btnSocial.update();
+         }
+         if (flagManager.getFlagById("hangarLevel").value !== "-1") {
+            this.btnHangar.update();
+         }
+         if (flagManager.getFlagById("churchLevel").value !== "-1") {
+            this.btnPower.update();
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.btnBack.destroy();
+      //this.btnToTrack.destroy();
+      //this.btnToShipSelection.destroy();
+      //this.btnToEditor.destroy();
+      //this.btnDream.destroy();
+      this.btnOffice.destroy();
+      this.btnQuarters.destroy();
+      this.btnLounge.destroy();
+      this.btnSocial.destroy();
+      this.btnHangar.destroy();
+      this.btnPower.destroy();
+   }
+}

src/ui/panelElevatorMaster.js

@@ -0,0 +1,185 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelElevator {
+   constructor(_scene) {
+      this.scene = _scene;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      //left side
+      this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "BACK", false, () => {
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+
+      /*
+      this.btnToTrack = new Button(this.scene, { x: -160, y: -34 }, "atlasUi", "sprBtn00", "DIRECT TRACK", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.loadLevel("quadRingsTest", {track: 2, startFromHangar: false, playerShipModel: "modHoverCarWipeOutStyle"});
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+      });
+
+      this.btnToShipSelection = new Button(this.scene, { x: -160, y: 34 }, "atlasUi", "sprBtn00", "MAIN MENU", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.scene.player.setVisibility(false);
+
+          this.scene.loadLevel("mainMenu", {});
+          this.destroy();
+      });
+      */
+
+      /*
+      this.btnToEditor = new Button(this.scene, { x: -160, y: 102 }, "atlasUi", "sprBtn00", "editor", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+
+          this.scene.loadLevel("modelBuilder");
+      });
+      */
+
+      //right side
+      this.btnOffice = new Button(this.scene, { x: 160, y: -68 }, "atlasUi", "sprBtn00", "OFFICE", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("office00");
+      });
+
+      this.btnQuarters = new Button(this.scene, { x: 160, y: -34 }, "atlasUi", "sprBtn00", "QUARTERS", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+         //only bc immideat new panel in level
+         this.scene.loadLevel("playerApartement00");
+      });
+
+      this.btnLounge = new Button(this.scene, { x: 160, y: 0 }, "atlasUi", "sprBtn00", "LOUNGE", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("marketSquareApartements00", { lounge: true });
+      });
+
+      this.btnSocial = new Button(this.scene, { x: 160, y: 34 }, "atlasUi", "sprBtn00", "MARKET", false, () => {
+         this.scene.player.jumpToPosition({ x: 256, y: 16, z: -96 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("marketSquareApartements00", { lounge: false });
+      });
+
+      this.btnHangar = new Button(this.scene, { x: 160, y: 68 }, "atlasUi", "sprBtn00", "HANGAR", false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         if (flagManager.getFlagById("demoProgress").value === "0") {
+            this.scene.loadLevel("hangar00", { startFromElevator: true, showIntro: true });
+         } else {
+            this.scene.loadLevel("hangar00", { startFromElevator: true });
+         }
+      });
+
+      this.btnPower = new Button(this.scene, { x: 160, y: 102 }, "atlasUi", "sprBtn00", "CHVRCH CLUB"/*"POWER"*/, false, () => {
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.scene.loadLevel("church00");
+      });
+
+      //this.btnOffice.switchState(this.btnOffice.states.off);
+      this.btnQuarters.switchState(this.btnQuarters.states.off);
+      this.btnLounge.switchState(this.btnLounge.states.off);
+      //this.btnPower.switchState(this.btnPower.states.off);
+
+      if (flagManager.getFlagById("playingDemo").value === "1") {
+         this.btnHangar.switchState(this.btnHangar.states.off);
+         this.btnLounge.switchState(this.btnLounge.states.off);
+         this.btnQuarters.switchState(this.btnQuarters.states.off);
+         this.btnSocial.switchState(this.btnSocial.states.off);
+      }
+
+      /*this.btnDream = new Button(this.scene, { x: 160, y: -66 }, "atlasUi", "sprBtn00", "DREAM", false, () => {
+          this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+          this.scene.player.setMode(PLAYERMODE.LOOK);
+          this.scene.player.panel = null;
+          this.destroy();
+
+          this.scene.loadLevel("dream00");
+      });*/
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons === false) {
+         this.btnBack.update();
+         //this.btnToTrack.update();
+         //this.btnToShipSelection.update();
+         //this.btnToEditor.update();
+         //this.btnDream.update();
+         if (flagManager.getFlagById("playingDemo").value === "0") {
+            this.btnOffice.update();
+            this.btnQuarters.update();
+            this.btnLounge.update();
+            this.btnSocial.update();
+            this.btnHangar.update();
+            this.btnPower.update();
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.btnBack.destroy();
+      //this.btnToTrack.destroy();
+      //this.btnToShipSelection.destroy();
+      //this.btnToEditor.destroy();
+      //this.btnDream.destroy();
+      this.btnOffice.destroy();
+      this.btnQuarters.destroy();
+      this.btnLounge.destroy();
+      this.btnSocial.destroy();
+      this.btnHangar.destroy();
+      this.btnPower.destroy();
+   }
+}

src/ui/panelEndOfCanyon.js

@@ -0,0 +1,169 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelEndOfRace {
+   constructor(_scene, _level, _previousState = 0) {
+      this.scene = _scene;
+      this.level = _level;
+      this.previousState = _previousState;
+
+      this.scene.hand.setMouseLock(false);
+      this.scene.hand.showCursor = true;
+      this.scene.hand.cursor.alpha = 1;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+      this.bgGraphics.depth = 9990;
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      this.qrcode = this.scene.add.sprite(-160, 68, "atlasUi", "qrcode");
+      this.qrcode.depth = 9999;
+
+      this.scene.soundManager.stopSound(this.level.musicTrack);
+
+      let playingStory = flagManager.getFlagById("playingStory").value;
+
+      //left side
+      this.btnContinue = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "CONTINUE", false, () => {
+
+         if (this.level.finishedRace === true) {
+            this.scene.paused = false;
+            this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+            this.scene.soundManager.stopSound(this.level.musicTrack);
+            if (playingStory === "1") {
+               this.scene.player.panel = null;
+               this.level.destroy();
+
+               this.destroy();
+               //this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+               this.scene.loadLevel("hangar00", null);//dream00
+               //INFO demo starts with a panel so dont override after the fact
+               //this.scene.player.setMode(PLAYERMODE.LOOK);
+               //this.scene.player.panel = null;
+            } else {
+               /*
+               this.level.destroy();
+               this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+               this.destroy();
+               this.scene.player.setMode(PLAYERMODE.LOOK);
+               this.scene.player.panel = null;
+               this.scene.player.setVisibility(false);
+               this.scene.loadLevel("mainMenu", {});
+               */
+
+               this.scene.paused = false;
+               //if(this.fromWalk === false){
+               this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+               this.scene.soundManager.stopSound(this.level.musicTrack);
+               //}
+               this.scene.player.panel = null;
+               this.level.destroy();
+
+               this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+               this.scene.player.setMode(PLAYERMODE.LOOK);
+               this.scene.player.panel = null;
+               this.scene.player.setVisibility(false);
+               this.scene.loadLevel("mainMenu", {});
+               this.destroy();
+            }
+         } else {
+            //go for second round
+            this.level.startFromHangar = false;
+            this.level.params.startFromHangar = false;
+            this.level.loadTrack(this.level.params.track);
+
+            //restart all ships
+            for (let ai of this.level.aiShips) {
+               ai.fastestLap = 0;
+               ai.last.fastestLap = 0;
+            }
+            this.level.playerShip.fastestLap = 0;
+            this.level.playerShip.last.fastestLap = 0;
+            this.level.playerShip.autopilot = false;
+            //this.level.ui.show();
+
+            this.scene.paused = false;
+            this.level.state = this.previousState;
+            this.level.ui.show();
+            this.scene.player.panel = null;
+            this.destroy();
+         }
+
+
+
+      });
+
+      //show all laptimes in a container - another container could be the position of everyone and their best lap or smth
+      this.lapContainer = this.scene.add.container(0, 0);
+      this.lapContainer.depth = 9999;
+      this.txtLapNo = [];
+      this.txtLapPos = [];
+      this.txtLapTime = [];
+
+      let xx = 64;
+      let yy = 0;
+      let names = ["YOU", this.level.aiShips[0].name];
+      for (let lap = -1; lap < this.level.maxLaps; lap++) {
+         xx = -64;
+         yy = Math.floor((this.level.maxLaps * 0.5) * -34) + ((lap + 1) * 34);//(this.scene.game.config.height * -0.4) + ((lap + 1) * 34);
+         this.txtLapNo.push(new Button(this.scene, { x: xx + 40, y: yy }, "atlasUi", "sprBtn00", lap === -1 ? "PILOT" : names[lap], false, () => { }));
+         this.txtLapTime.push(new Button(this.scene, { x: xx + 120, y: yy }, "atlasUi", "sprBtn00", lap === -1 ? "POINTS" : this.level.raceModeData.points.rounds[lap], false, () => { }));
+         //this.txtLapPos.push(new Button(this.scene, { x: xx + 160, y: yy }, "atlasUi", "sprBtn08", lap === -1 ? "POS" : "X", false, () => { }));
+      }
+      let winStr = "RACE OVER!";
+      //if (this.level.playerShip.position > -1) {
+      if (this.level.raceModeData.points.overall > 0) {
+         winStr = "YOU WON!"
+      } else {
+         winStr = "YOU LOST BY: " + String(this.level.raceModeData.points.overall) + " PTS!";
+      }
+      if (this.level.finishedRace === false) {
+         winStr = "YOU ARE HUNTED NOW";
+      }
+      this.txtLapPos.push(this.scene.add.bitmapText(0, yy + 34, "uiFont", winStr, 14, 0).setOrigin(0.5).setLetterSpacing(0))
+      this.txtLapPos[this.txtLapPos.length - 1].depth = 9999;
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons === false) {
+         this.btnContinue.update();
+
+         if (INPUTS.btnA.justReleased) {
+            this.btnContinue.func();
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.qrcode.destroy();
+
+      for (let txt of this.txtLapNo) { txt.destroy(); }
+      for (let txt of this.txtLapTime) { txt.destroy(); }
+      for (let txt of this.txtLapPos) { txt.destroy(); }
+      this.lapContainer.destroy();
+
+      this.btnContinue.destroy();
+   }
+}

src/ui/panelEndOfRace.js

@@ -0,0 +1,144 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelEndOfRace {
+   constructor(_scene, _level, _previousState = 0, _fromWalk = false) {
+      this.scene = _scene;
+      this.level = _level;
+      this.previousState = _previousState;
+      this.fromWalk = _fromWalk;
+
+      this.scene.hand.setMouseLock(false);
+      this.scene.hand.showCursor = true;
+      this.scene.hand.cursor.alpha = 1;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+      this.bgGraphics.depth = 9990;
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      this.qrcode = this.scene.add.sprite(-160, 68, "atlasUi", "qrcode");
+      this.qrcode.depth = 9999;
+
+      this.scene.soundManager.stopSound(this.level.musicTrack);
+
+      let playingStory = flagManager.getFlagById("playingStory").value;
+
+      //left side
+      this.btnContinue = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "CONTINUE", false, () => {
+         this.scene.paused = false;
+         this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+         this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+         this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+         this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+         this.scene.soundManager.stopSound(this.level.musicTrack);
+         if (playingStory === "1") {
+            this.scene.player.panel = null;
+            this.level.destroy();
+
+            this.destroy();
+            //this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+            this.scene.loadLevel("hangar00", null);//dream00
+            //INFO demo starts with a panel so dont override after the fact
+            //this.scene.player.setMode(PLAYERMODE.LOOK);
+            //this.scene.player.panel = null;
+         } else {
+            /* //old back to menu
+            this.level.destroy();
+            this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+            this.destroy();
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.scene.player.setVisibility(false);
+            this.scene.loadLevel("mainMenu", {});
+            */
+
+            this.scene.paused = false;
+            //if(this.fromWalk === false){
+            this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+            this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+            this.scene.soundManager.stopSound(this.level.musicTrack);
+            //}
+            this.scene.player.panel = null;
+            this.level.destroy();
+
+            this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.scene.player.setVisibility(false);
+            this.destroy();
+            this.scene.loadLevel("mainMenu", {});
+         }
+      });
+
+      //show all laptimes in a container - another container could be the position of everyone and their best lap or smth
+      this.lapContainer = this.scene.add.container(0, 0);
+      this.lapContainer.depth = 9999;
+      this.txtLapNo = [];
+      this.txtLapPos = [];
+      this.txtLapTime = [];
+
+      let xx = 64;
+      let yy = 0;
+      for (let lap = -1; lap < this.level.maxLaps; lap++) {
+         xx = -64;
+         yy = Math.floor((this.level.maxLaps * 0.5) * -34) + ((lap + 1) * 34);//(this.scene.game.config.height * -0.4) + ((lap + 1) * 34);
+         this.txtLapNo.push(new Button(this.scene, { x: xx + 0, y: yy }, "atlasUi", "sprBtn08", lap === -1 ? "LAP" : String(lap + 1), false, () => { }));
+         this.txtLapTime.push(new Button(this.scene, { x: xx + 80, y: yy }, "atlasUi", "sprBtn00", lap === -1 ? "TIME" : timeToLapTime(this.level.playerShip.lapTimes[lap].time), false, () => { }));
+         this.txtLapPos.push(new Button(this.scene, { x: xx + 160, y: yy }, "atlasUi", "sprBtn08", lap === -1 ? "POS" : String(this.level.playerShip.lapTimes[lap].position + 1) + ".", false, () => { }));
+      }
+      let winStr = "RACE OVER!";
+      if (this.level.playerShip.position > -1) {
+         let affix = "th";
+         if (this.level.playerShip.position === 0) {
+            affix = "ST"
+            winStr = "YOU WON!"
+         } else {
+            if (this.level.playerShip.position === 1) { affix = "ND" }
+            if (this.level.playerShip.position === 2) { affix = "RD" }
+            winStr = "YOU FINISHED " + String(Number(this.level.playerShip.position + 1)) + affix;
+         }
+      }
+      this.txtLapPos.push(this.scene.add.bitmapText(0, yy + 34, "uiFont", winStr, 14, 0).setOrigin(0.5).setLetterSpacing(0))
+      this.txtLapPos[this.txtLapPos.length - 1].depth = 9999;
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons === false) {
+         this.btnContinue.update();
+
+         if (INPUTS.btnA.justReleased) {
+            this.btnContinue.func();
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.qrcode.destroy();
+
+      for (let txt of this.txtLapNo) { txt.destroy(); }
+      for (let txt of this.txtLapTime) { txt.destroy(); }
+      for (let txt of this.txtLapPos) { txt.destroy(); }
+      this.lapContainer.destroy();
+
+      this.btnContinue.destroy();
+   }
+}

src/ui/panelEnterShip.js

@@ -0,0 +1,108 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelEnterShip{
+    constructor(_scene, _level, _returnPos) {
+        this.scene = _scene;
+        this.level = _level;
+        this.returnPos = _returnPos;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.9);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+        this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+        this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "EXIT SHIP", false, () => {
+            //console.log(this.scene.hand.justPressed + " , " + this.scene.hand.justReleased)
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+
+            this.level.shipInteractable.interactable = true;
+            this.scene.player.jumpToPosition(_returnPos, true);
+            this.scene.player.eyeHeight = 24;
+            this.scene.player.setMoveMode(PLAYERMOVE.STAND);
+            
+            this.destroy();
+        });
+
+        this.btnTrack00 = new Button(this.scene, { x: 160, y: -68 }, "atlasUi", "sprBtn00", "TEST TRACK", false, () => {
+            this.level.leavingHangar = true;//todo: create a function with leave to track? After moving enough upward?
+            this.level.toTrack = 0;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.btnTrack01 = new Button(this.scene, { x: 160, y: -34 }, "atlasUi", "sprBtn00", "SEWERS", false, () => {
+            this.level.leavingHangar = true;
+            this.level.toTrack = 1;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.btnTrack02 = new Button(this.scene, { x: 160, y: 0 }, "atlasUi", "sprBtn00", "CONSTRUCTION", false, () => {
+            this.level.leavingHangar = true;
+            this.level.toTrack = 2;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.btnTrack03 = new Button(this.scene, { x: 160, y: 34 }, "atlasUi", "sprBtn00", "OVAL", false, () => {
+            this.level.leavingHangar = true;
+            this.level.toTrack = 3;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.btnTrack04 = new Button(this.scene, { x: 160, y: 68 }, "atlasUi", "sprBtn00", "TEST", false, () => {
+            this.level.leavingHangar = true;
+            this.level.toTrack = 0;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.btnTrack01.switchState(this.btnTrack01.states.off);
+
+        this.lockButtons = true;
+    }
+
+    update(){
+        this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+        this.bgGrid.update();
+
+        if(this.lockButtons <= false){
+
+            this.btnBack.update();
+            this.btnTrack00.update();
+            this.btnTrack01.update();
+            this.btnTrack02.update();
+            this.btnTrack03.update();
+            //this.btnTrack04.update();
+        }else{
+            this.lockButtons = false;
+        }
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.bgGrid.destroy();
+        this.btnBack.destroy();
+        this.btnTrack00.destroy();
+        this.btnTrack01.destroy();
+        this.btnTrack02.destroy();
+        this.btnTrack03.destroy();
+        this.btnTrack04.destroy();
+    }
+}

src/ui/panelEnterShipDemo00.js

@@ -0,0 +1,190 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelEnterShipDemo00 {
+   constructor(_scene, _level, _returnPos) {
+      this.scene = _scene;
+      this.level = _level;
+      this.returnPos = _returnPos;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "EXIT SHIP", false, () => {
+         //console.log(this.scene.hand.justPressed + " , " + this.scene.hand.justReleased)
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+
+         this.level.shipInteractable.interactable = true;
+         this.scene.player.jumpToPosition(_returnPos, true);
+         this.scene.player.eyeHeight = 24;
+         this.scene.player.setMoveMode(PLAYERMOVE.STAND);
+
+         this.destroy();
+      });
+
+      this.btnTrack00 = new Button(this.scene, { x: 16, y: -68 }, "atlasUi", "sprBtn00square", "LOAD SIMULATION\nTUTORIAL", false, () => {
+         this.level.leavingHangar = false;
+         this.level.toTrack = 9000;
+         this.level.maxLaps = 99;
+         this.level.raceMode = 99;
+
+         if (Number(flagManager.getFlagById("demoProgress").value) >= 1) {
+            this.level.toTrack = 9002;
+            this.level.maxLaps = 5;
+            this.level.raceMode = 0;
+         }
+
+         //flagManager.setFlag("demoProgress", "1");
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+
+         this.level.startSimulation();
+      });
+      if (Number(flagManager.getFlagById("demoProgress").value) >= 1) {
+         this.btnTrack00.txt.setText("RACING LINE\nHOT LAPS");
+      }
+
+      this.btnTrack01 = new Button(this.scene, { x: 160, y: -68 }, "atlasUi", "sprBtn00square", "METRO LOOP\nQUALIFICATION", false, () => {
+         this.level.leavingHangar = true;
+         this.level.toTrack = 0;
+         //todo check if practice is needed or quali skipped after herring talk
+
+         if (Number(flagManager.getFlagById("demoProgress").value) >= 4) {
+            this.level.toTrack = 0;
+            this.level.maxLaps = 5;
+            this.level.raceMode = 5;
+         } else {
+            this.level.maxLaps = 3;
+            this.level.raceMode = 3;
+            flagManager.setFlag("demoProgress", "4");
+         }
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      if (Number(flagManager.getFlagById("demoProgress").value) >= 4) {
+         this.btnTrack01.txt.setText("METRO LOOP\nFULL RACE");
+      }
+
+      this.btnTrack02 = new Button(this.scene, { x: 16, y: 76 }, "atlasUi", "sprBtn00square", "PIPELINE\nRACE ROKI", false, () => {
+         this.level.leavingHangar = true;
+         this.level.toTrack = 3;
+         this.level.maxLaps = 2;
+         this.level.raceMode = 6; //5gp 6canyon
+
+         if (Number(flagManager.getFlagById("demoProgress").value) >= 4) {
+            this.level.toTrack = 3;
+            this.level.maxLaps = 3;
+            this.level.raceMode = 5;
+         }
+
+         //flagManager.setFlag("demoProgress", "2");
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      if (Number(flagManager.getFlagById("demoProgress").value) >= 4) {
+         this.btnTrack02.txt.setText("PIPELINE\nFULL RACE");
+      }
+
+      this.btnTrack03 = new Button(this.scene, { x: 160, y: 76 }, "atlasUi", "sprBtn00square", "ATOMIC SEWERS\nHOT LAPS", false, () => {
+         this.level.leavingHangar = true;
+         this.level.toTrack = 1;
+         this.level.maxLaps = 7;
+         this.level.raceMode = 0;
+
+         //flagManager.setFlag("demoProgress", "2");
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+
+      /*
+        this.btnTrack04 = new Button(this.scene, { x: 160, y: 68 }, "atlasUi", "sprBtn00", "TEST", false, () => {
+            this.level.leavingHangar = true;
+            this.level.toTrack = 0;
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+        this.btnTrack01.switchState(this.btnTrack01.states.off);*/
+
+      //todo: reset this
+      //if (Number(flagManager.getFlagById("demoProgress").value) > 0) { this.btnTrack00.switchState(this.btnTrack01.states.off); }
+      if (Number(flagManager.getFlagById("demoProgress").value) <= 3) {
+         this.btnTrack01.switchState(this.btnTrack01.states.off);
+      }
+      if (Number(flagManager.getFlagById("demoProgress").value) <= 2) {
+         this.btnTrack02.switchState(this.btnTrack02.states.off);
+      }
+      if (Number(flagManager.getFlagById("demoProgress").value) <= 1) {
+         this.btnTrack03.switchState(this.btnTrack03.states.off);
+      }
+
+      if (Number(flagManager.getFlagById("demoProgress").value) === 5) {
+         this.btnTrack00.switchState(this.btnTrack01.states.off);
+         this.btnTrack01.switchState(this.btnTrack01.states.off);
+         this.btnTrack02.switchState(this.btnTrack01.states.off);
+         this.btnTrack03.switchState(this.btnTrack01.states.off);
+      }
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons <= false) {
+         this.btnBack.update();
+
+         //todo: reset this
+         let progress = Number(flagManager.getFlagById("demoProgress").value);
+
+         if ((progress >= 0 && progress < 5) || progress > 5) {
+            this.btnTrack00.update();
+         }
+         if ((progress >= 2 && progress < 5) || progress > 5) {
+            this.btnTrack02.update();
+         }
+         if ((progress >= 4 && progress < 5) || progress > 5) {
+            this.btnTrack01.update();
+         }
+         if ((progress >= 1 && progress < 5) || progress > 5) {
+            this.btnTrack03.update();
+         }
+
+         //this.btnTrack00.update()
+         //this.btnTrack01.update()
+         //this.btnTrack02.update()
+         //this.btnTrack03.update()
+
+         //this.btnTrack04.update();
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+      this.btnBack.destroy();
+      this.btnTrack00.destroy();
+      this.btnTrack01.destroy();
+      this.btnTrack02.destroy();
+      this.btnTrack03.destroy();
+      //this.btnTrack04.destroy();
+   }
+}

src/ui/panelEscapeMenu.js

@@ -0,0 +1,400 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelEscapeMenu{
+    constructor(_scene, _level, _previousState = 0, _fromWalk = false) {
+        this.scene = _scene;
+        this.level = _level;
+        this.previousState = _previousState;
+        this.fromWalk = _fromWalk;
+
+        this.scene.hand.setMouseLock(false);
+        this.scene.hand.showCursor = true;
+        this.scene.hand.cursor.alpha = 1;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x1d2b53, 0.9); //0x000000, 0.9
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+        this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+        this.qrcode = this.scene.add.sprite(160, 68, "atlasUi", "qrcode");
+        this.qrcode.depth = 9999;
+
+        //left side
+        this.btnBack = new Button(this.scene, { x: -176, y: -112}, "atlasUi", "sprBtn00", "CONTINUE", false, () => {
+            this.scene.saveOptions();
+            //this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.paused = false;
+            if(this.fromWalk === false){
+                //racing
+                this.level.state = this.previousState;
+                this.level.ui.show();
+            }else{
+                //fps level
+                this.scene.player.showUI();
+                this.scene.player.setMode(PLAYERMODE.LOOK);
+            }
+
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        /*
+        this.btnToTrack = new Button(this.scene, { x: -160, y: -34 }, "atlasUi", "sprBtn00", "DIRECT TRACK", false, () => {
+            this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+            
+            this.scene.loadLevel("quadRingsTest", {track: 2, startFromHangar: false, playerShipModel: "modHoverCarWipeOutStyle"});
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+        */
+       
+        let playingStory = flagManager.getFlagById("playingStory").value;
+        this.btnToMainMenu = new Button(this.scene, { x: -176, y: 112 }, "atlasUi", "sprBtn00", "MAIN MENU", false, () => {
+            //todo: you need be able to jump back into the main menu as well - idk maybe it needs a third button to either go to hangar or main menu
+            /*if(playingStory === "1"){
+                this.scene.player.panel = null;
+                this.level.destroy();
+
+                this.destroy();
+                //this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+                this.scene.loadLevel("hangar00", {startFromElevator: true, showIntro: true});//dream00
+                //INFO demo starts with a panel so dont override after the fact
+                //this.scene.player.setMode(PLAYERMODE.LOOK);
+                //this.scene.player.panel = null;
+            }else{*/
+                this.scene.paused = false;
+                if(this.fromWalk === false){
+                    this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+                    this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+                    this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+                    this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+                    this.scene.soundManager.stopSound(this.level.musicTrack);
+                }
+                this.scene.player.panel = null;
+                this.level.destroy();
+                
+                this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+                this.scene.player.setMode(PLAYERMODE.LOOK);
+                this.scene.player.panel = null;
+                this.scene.player.setVisibility(false);
+                this.scene.loadLevel("mainMenu", {});
+                this.destroy();
+            //}
+        });
+        this.btnToHangar = null;
+        if(playingStory === "1" && this.scene.player.id === "shipPlayer"){
+            this.btnToHangar = new Button(this.scene, { x: -176, y: -112 + 34 }, "atlasUi", "sprBtn00", "END RACE", false, () => {
+                this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+                this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+                this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+                this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+                this.scene.soundManager.stopSound(this.level.musicTrack);
+
+                this.scene.paused = false;
+
+                this.scene.player.panel = null;
+                this.level.destroy();
+
+                this.destroy();
+                //this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+                this.scene.loadLevel("hangar00", {startFromElevator: false, showIntro: false});//dream00
+                //INFO demo starts with a panel so dont override after the fact
+                //this.scene.player.setMode(PLAYERMODE.LOOK);
+                //this.scene.player.panel = null;
+            });
+        }
+
+        /*
+        this.btnToEditor = new Button(this.scene, { x: -160, y: 102 }, "atlasUi", "sprBtn00", "editor", false, () => {
+            this.level.destroy();
+
+            this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+
+            this.scene.loadLevel("modelBuilder");
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+        */
+
+        this.btnAUX = new Button(this.scene, { x: 176 + 32 - 132, y: -112 }, "atlasUi", "sprBtn00mid", "AUX", false, () => {
+            this.contAUX.alpha = 1;
+            this.contGFX.alpha = 0;
+            this.contCTL.alpha = 0;
+            this.activeContainer = this.contAUX;
+        });
+        this.btnGFX = new Button(this.scene, { x: 176 + 32 - 66, y: -112 }, "atlasUi", "sprBtn00mid", "GFX", false, () => {
+            this.contAUX.alpha = 0;
+            this.contGFX.alpha = 1;
+            this.contCTL.alpha = 0;
+            this.activeContainer = this.contGFX;
+        });
+        this.btnCTL = new Button(this.scene, { x: 176 + 32, y: -112 }, "atlasUi", "sprBtn00mid", "CTRL", false, () => {
+            this.contAUX.alpha = 0;
+            this.contGFX.alpha = 0;
+            this.contCTL.alpha = 1;
+            this.activeContainer = this.contCTL;
+        });
+
+        this.contAUX = this.scene.add.container(0, 0);
+        this.contGFX = this.scene.add.container(0, 0);
+        this.contGFX.alpha = 0;
+        this.contCTL = this.scene.add.container(0, 0);
+        this.contCTL.alpha = 0;
+        this.activeContainer = this.contAUX;
+
+        //sound options
+        this.sliMaster = new SliderHorizontal(this.scene, {x: 0, y: -34}, OPTIONS.sound.master, 128);
+        this.sliMaster.move(0, -34);
+        this.sliMaster.releaseFunc = () => {
+            Howler.volume(this.sliMaster.value);
+            this.scene.soundManager.playSpecificSound(this.scene.soundManager.raceAnnouncer, 0);
+            OPTIONS.sound.master = this.sliMaster.value;
+        }
+        this.btnMaster = new Button(this.scene, { x: -128, y: -34 }, "atlasUi", "sprBtn08", "master:", false, () => {
+            if(this.sliMaster.value > 0){
+                this.sliMaster.setTo(0);
+            }else{
+                this.sliMaster.setTo(1);
+            }
+        });
+        this.sliMaster.addToContainer(this.contAUX);
+        this.btnMaster.addToContainer(this.contAUX);
+
+        this.sliSound = new SliderHorizontal(this.scene, {x: 0, y: 0}, OPTIONS.sound.sfx, 128);
+        this.sliSound.move(0, 0);
+        this.sliSound.releaseFunc = () => {
+            for(let s of this.scene.soundManager.soundRef){
+                s.howlGroup.volume(this.sliSound.value);
+            }
+            this.scene.soundManager.playSpecificSound(this.scene.soundManager.raceAnnouncer, 0);
+            OPTIONS.sound.sfx = this.sliSound.value;
+        }
+        this.btnSound = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn08", "sound:", false, () => {
+            if(this.sliSound.value > 0){
+                this.sliSound.setTo(0);
+            }else{
+                this.sliSound.setTo(1);
+            }
+        });
+        this.sliSound.addToContainer(this.contAUX);
+        this.btnSound.addToContainer(this.contAUX);
+
+        this.sliMusic = new SliderHorizontal(this.scene, {x: 0, y: 34}, OPTIONS.sound.music, 128);
+        this.sliMusic.move(0, 34);
+        this.sliMusic.releaseFunc = () => {
+            //Howler.volume(this.sliMusic.value);
+            for(let s of this.scene.soundManager.musicRef){
+                s.howlGroup.volume(this.sliMusic.value);
+            }
+            OPTIONS.sound.music = this.sliMusic.value;
+        }
+        this.btnMusic = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn08", "music:", false, () => {
+            if(this.sliMusic.value > 0){
+                this.sliMusic.setTo(0);
+            }else{
+                this.sliMusic.setTo(1);
+            }
+        });
+        this.sliMusic.addToContainer(this.contAUX);
+        this.btnMusic.addToContainer(this.contAUX);
+
+        //graphical options
+        this.sliScreenshake = new SliderHorizontal(this.scene, {x: 0, y: -34}, OPTIONS.effects.screenshake, 128);
+        this.sliScreenshake.move(0, -34);
+        this.sliScreenshake.releaseFunc = () => {
+            OPTIONS.effects.screenshake = this.sliScreenshake.value;
+        }
+        this.btnScreenshake = new Button(this.scene, { x: -128, y: -34 }, "atlasUi", "sprBtn00mid", "screenshake:", false, () => {
+            if(this.sliScreenshake.value > 0){
+                this.sliScreenshake.setTo(0);
+            }else{
+                this.sliScreenshake.setTo(1);
+            }
+        });
+        this.sliScreenshake.addToContainer(this.contGFX);
+        this.btnScreenshake.addToContainer(this.contGFX);
+
+        this.btnFullscreen = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn00mid", "fullscreen", false, () => {
+            if(document.fullscreen === false){
+                if(document.documentElement.requestFullscreen) {
+                    document.documentElement.requestFullscreen();
+                } else if(document.documentElement.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
+                    document.documentElement.msRequestFullscreen();
+                } else if(document.documentElement.webkitRequestFullscreen) {  // iOS Safari
+                    document.documentElement.webkitRequestFullscreen();
+                }
+            }else{
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+            }
+        });
+        this.btnFullscreen.addToContainer(this.contGFX);
+
+        this.btnHUD = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn00mid", "HUD", true, () => {
+            if(OPTIONS.config.hideUI === false){
+                OPTIONS.config.hideUI = true;
+                this.btnHUDTxt.setText("hidden");
+            }else{
+                OPTIONS.config.hideUI = false;
+                this.btnHUDTxt.setText("active");
+            }
+        });
+        this.btnHUD.toggleOffFunc = this.btnHUD.func;
+        this.btnHUD.addToContainer(this.contGFX);
+        this.btnHUDTxt = this.scene.add.bitmapText(this.btnHUD.pos.x + 128, this.btnHUD.pos.y, "uiFont", "active", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.btnHUDTxt.depth = 10000;
+        this.contGFX.add(this.btnHUDTxt);
+        if(OPTIONS.config.hideUI === false){
+            this.btnHUD.active = true;
+            this.btnHUDTxt.setText("active");
+        }else{
+            this.btnHUD.active = false;
+            this.btnHUDTxt.setText("hidden");
+        }
+
+        //control options
+        this.sliCursorspeed = new SliderHorizontal(this.scene, {x: 0, y: 0}, OPTIONS.controls.mouse.sensitivity / 6, 128);
+        this.sliCursorspeed.move(0, 0);
+        this.sliCursorspeed.releaseFunc = () => {
+            OPTIONS.controls.mouse.sensitivity = Math.max(0.1, this.sliCursorspeed.value * 6);
+        }
+        this.btnCursorspeed = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn00mid", "mouse sensitivity:", false, () => {
+            if(this.sliCursorspeed.value > 0){
+                this.sliCursorspeed.setTo(0);
+            }else{
+                this.sliCursorspeed.setTo(1);
+            }
+        });
+        this.sliCursorspeed.addToContainer(this.contCTL);
+        this.btnCursorspeed.addToContainer(this.contCTL);
+
+        this.btnRadar = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn00mid", "radar", true, () => {
+            if(OPTIONS.config.collisionRadar === 0){
+                OPTIONS.config.collisionRadar = 1;
+                this.btnRadarTxt.setText("active");
+            }else{
+                OPTIONS.config.collisionRadar = 0;
+                this.btnRadarTxt.setText("off");
+            }
+        });
+        this.btnRadar.toggleOffFunc = this.btnRadar.func;
+        this.btnRadar.addToContainer(this.contCTL);
+        this.btnRadarTxt = this.scene.add.bitmapText(this.btnRadar.pos.x + 128, this.btnRadar.pos.y, "uiFont", "active", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.btnRadarTxt.depth = 10000;
+        this.contCTL.add(this.btnRadarTxt);
+        if(OPTIONS.config.collisionRadar === 0){
+            this.btnRadar.active = false;
+            this.btnRadarTxt.setText("off");
+        }else{
+            this.btnRadar.active = true;
+            this.btnRadarTxt.setText("active");
+        }
+        
+        this.lockButtons = true;
+    }
+
+    update(){
+        this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+        this.bgGrid.update();
+        
+        if(this.lockButtons === false){
+            this.btnBack.update();
+            //this.btnToTrack.update();
+            this.btnToMainMenu.update();
+            if(this.btnToHangar !== null){
+                this.btnToHangar.update();
+            }
+            //this.btnToEditor.update();
+
+            //todo: does not work although lockButtons should prevent it
+            if(INPUTS.btnStart.justpressed){
+                this.btnBack.func();
+            }
+
+            this.btnAUX.update();
+            this.btnGFX.update();
+            this.btnCTL.update();
+
+            switch(this.activeContainer){
+                case this.contAUX:
+                    this.btnMaster.update();
+                    this.sliMaster.update();
+                    this.btnSound.update();
+                    this.sliSound.update();
+                    this.btnMusic.update();
+                    this.sliMusic.update();
+                break;
+                case this.contGFX:
+                    this.btnScreenshake.update();
+                    this.sliScreenshake.update();
+                    this.btnFullscreen.update();
+                    this.btnHUD.update();
+                break;
+                case this.contCTL:
+                    this.btnCursorspeed.update();
+                    this.sliCursorspeed.update();
+                    this.btnRadar.update();
+                break;
+                default:
+                break;
+            }
+        }else{
+            this.lockButtons = false;
+        }
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.bgGrid.destroy();
+
+        this.qrcode.destroy();
+        
+        this.btnBack.destroy();
+        //this.btnToTrack.destroy();
+        this.btnToMainMenu.destroy();
+        if(this.btnToHangar !== null){
+            this.btnToHangar.destroy();
+        }
+        //this.btnToEditor.destroy();
+
+        this.btnAUX.destroy();
+        this.btnGFX.destroy();
+        this.btnCTL.destroy();
+
+        this.btnMaster.destroy();
+        this.sliMaster.destroy();
+        this.btnSound.destroy();
+        this.sliSound.destroy();
+        this.btnMusic.destroy();
+        this.sliMusic.destroy();
+
+        this.btnScreenshake.destroy();
+        this.sliScreenshake.destroy();
+        this.btnFullscreen.destroy();
+        this.btnHUD.destroy();
+        this.btnHUDTxt.destroy();
+
+        this.btnCursorspeed.destroy();
+        this.sliCursorspeed.destroy();
+        this.btnRadar.destroy();
+        this.btnRadarTxt.destroy();
+
+        this.contAUX.destroy();
+        this.contGFX.destroy();
+        this.contCTL.destroy();
+    }
+}

src/ui/panelFlavourText.js

@@ -0,0 +1,59 @@
+export default class PanelFlavourText{
+    constructor(_scene, _txt) {
+        this.scene = _scene;
+
+        //stop use click clicking immediatly again and eg hit the back btn
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.75);
+        this.bgGraphics.fillRect(this.scene.left, -64, this.scene.game.config.width, 64);
+
+        /*
+        this.bgGraphics.beginPath();
+        this.bgGraphics.lineStyle(1, 0xffffff);
+        this.bgGraphics.moveTo(-128, -16);
+        this.bgGraphics.lineTo(128, -16);
+        this.bgGraphics.strokePath();
+        */
+
+        this.header = this.scene.add.bitmapText(0, -32, "segoeUI_16", _txt, 16, 0).setOrigin(0.5);
+        this.header.depth = 10000;
+
+        this.tweenBg = this.scene.add.tween({
+            targets: this.bgGraphics,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Cubic.Out,
+            onComplete: () => {
+                this.destroy();
+                this.scene.player.panel = null;
+            }
+        })
+
+        this.tweenHeader = this.scene.add.tween({
+            targets: this.header,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Quintic.Out,
+            onComplete: () => {
+                
+            }
+        })
+    }
+
+    update(){
+        
+    }
+
+    destroy(){
+        //this.tweenBg.destroy();
+        //this.tweenHeader.destroy();
+        this.bgGraphics.destroy();
+        this.header.destroy();
+    }
+}

src/ui/panelIntro.js

@@ -0,0 +1,240 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelIntroDemo{
+    constructor(_scene) {
+        this.scene = _scene;
+
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.95);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+        this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+        this.pos = {
+            x: 0,
+            y: this.scene.game.config.height,
+            start: {
+                x: 0,
+                y: this.scene.game.config.height,
+            }, 
+            end: {
+                x: 0,
+                y: this.scene.game.config.height * -1,
+            },
+            in: {
+                x: 0,
+                y: this.scene.game.config.height,
+            },
+            out: {
+                x: 0,
+                y: 0,
+            }
+        }
+        this.target = {
+            in: {
+                x: 0,
+                y: 0
+            },
+            out: {
+                x: 0,
+                y: this.scene.game.config.height * -1,
+            }
+        }
+
+        this.tweenIn = this.scene.tweens.add({
+            targets: this.pos.in,
+            x: { value: () => this.target.in.x },
+            y: { value: () => this.target.in.y },
+            ease: "Sine.easeInOut",
+            duration: 500,
+            callbackScope: this
+        });
+        this.tweenOut = this.scene.tweens.add({
+            targets: this.pos.out,
+            x: { value: () => this.target.out.x},
+            y: { value: () => this.target.out.y},
+            ease: "Sine.easeInOut",
+            duration: 750,
+            callbackScope: this
+        });
+
+        //STORYBITS //this.scene.add.bitmapText(0, (this.scene.game.config.height * -0.4), "uiFont", "Test", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.story = {
+            currentBit: 0,
+            previousBit: -1,
+            bits: [
+                {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "The world is dying.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "We are dying.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "A global rise in CO2 levels forced civilisation underground.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Our cities were connected through pipelines and hyperloops, built to help us reach prosperity.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Or so we thought.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "The rich got richer, the poor grew more poor.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Nobody wanted to do anything against the climate crisis. No government wanted to risk their economy.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                    sprite: this.scene.add.sprite(this.pos.start.x, this.pos.start.y * 2, "sprStoryPolitics00")
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Instead we got to build for a new future with climate change in mind.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                    sprite: this.scene.add.sprite(this.pos.start.x, this.pos.start.y * 2, "sprStoryLoop00")
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Underground.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "We built huge air filtering stations, underground gardens, anti-flood pumps. The economy boomed. Everyone had a job and worked for a new future. A new hope.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Little did we know, that the superrich already planned further ahead.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Earths climate is on a runaway course and we are trapped underground.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "The rich elite secured their future. Some bought themselves a stasis chamber to outwait the catastrophe. Others left earth to colonise mars and start anew.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "People are unemployed and dying. They dance a danse-macabre until all will come to an end.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "There is only one chance left for some us. We race in the tunnels to win one of the last tickets in a rocket off earth.", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                    sprite: this.scene.add.sprite(this.pos.start.x, this.pos.start.y * 2, "sprStoryRacing00")
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "Our grandparents were the people who built this all!", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }, {
+                    txt: this.scene.add.bitmapText(this.pos.start.x, this.pos.start.y, "uiFont", "And we are the people who race to escape it!", 14, 0).setOrigin(0.5).setLetterSpacing(0),
+                }
+            ]
+        }
+        for(let b of this.story.bits){
+            if(b.txt !== undefined){
+                b.txt.setMaxWidth(292);
+                b.txt.depth = 9999;
+            }
+            if (b.sprite !== undefined) {
+                //b.sprite.depth = -100;
+                b.txt.depth = 9899;
+            }
+        }
+
+        //left side
+        this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "SKIP", false, () => {
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        //left side
+        this.btnContinue = new Button(this.scene, { x: -160, y: -34 }, "atlasUi", "sprBtn00", "CONTINUE", false, () => {
+            
+        });
+
+        this.narrator = this.scene.add.sprite(-160, 68, "atlasUi", "portraitRob00sw");
+        this.narrator.depth = 9999;
+        
+        this.lockButtons = true;
+    }
+
+    update(){
+        this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+        this.bgGrid.update();
+        
+        if(this.lockButtons === false){
+            
+            this.btnBack.update();
+            this.btnContinue.update();
+
+            if (this.story.currentBit < this.story.bits.length) {
+                this.story.bits[this.story.currentBit].txt.x = this.pos.in.x + 64;
+                this.story.bits[this.story.currentBit].txt.y = this.pos.in.y;
+                if (this.story.bits[this.story.currentBit].sprite !== undefined){
+                    this.story.bits[this.story.currentBit].sprite.x = this.pos.in.x;
+                    this.story.bits[this.story.currentBit].sprite.y = this.pos.in.y * 2;
+                    //todo: think if you want it this way or if it just stays
+                    this.narrator.alpha = 0;
+                }else{
+                    this.narrator.alpha = 1;
+                }
+            }
+            if(this.story.previousBit >= 0){
+                this.story.bits[this.story.previousBit].txt.x = this.pos.out.x + 64;
+                this.story.bits[this.story.previousBit].txt.y = this.pos.out.y;
+                if (this.story.bits[this.story.previousBit].sprite !== undefined) {
+                    this.story.bits[this.story.previousBit].sprite.x = this.pos.out.x;
+                    this.story.bits[this.story.previousBit].sprite.y = this.pos.out.y * 2;
+                }
+            }
+
+            if ((this.scene.hand.justReleased === true || INPUTS.btnA.justReleased === true) && this.tweenOut.isPlaying() === false && this.tweenIn.isPlaying() === false){
+                if(this.story.currentBit < this.story.bits.length){
+                    this.story.currentBit += 1;
+                    this.story.previousBit += 1;
+
+                    this.pos.in.x = this.pos.start.x;
+                    this.pos.in.y = this.pos.start.y;
+                    this.tweenIn.updateTo("x", this.target.in.x, false);
+                    this.tweenIn.updateTo("y", this.target.in.y, false);
+                    this.tweenIn.restart();
+
+                    this.pos.out.x = 0;
+                    this.pos.out.y = 0;
+                    this.tweenOut.updateTo("x", this.target.out.x, false);
+                    this.tweenOut.updateTo("y", this.target.out.y, false);
+                    this.tweenOut.restart();
+
+                    if(this.story.currentBit === this.story.bits.length){
+                        this.gotoGame();
+                    }
+                }else{
+                    this.gotoGame();
+                }
+            }
+
+            if(INPUTS.btnB.justReleased === true){
+                this.gotoMenu();
+            }
+
+        }else{
+            this.lockButtons = false;
+        }
+
+        
+    }
+
+    gotoGame(){
+        /*//from wakeup
+        this.scene.player.panel = null;
+        this.scene.player.showUI();
+        this.destroy();*/
+        this.scene.player.setMode(PLAYERMODE.LOOK);
+        this.scene.player.panel = null;
+        this.destroy();
+    }
+
+    gotoMenu(){
+        this.scene.player.setMode(PLAYERMODE.LOOK);
+        this.scene.player.panel = null;
+        this.destroy();
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.bgGrid.destroy();
+
+        this.btnBack.destroy();
+        this.btnContinue.destroy();
+
+        this.narrator.destroy();
+
+        for(let b of this.story.bits){
+            b.txt.destroy();
+            if(b.sprite !== undefined){
+                b.sprite.destroy();
+            }
+        }
+    }
+}

src/ui/panelInventory.js

@@ -0,0 +1,160 @@
+import Button from "./button.js";
+
+export default class PanelInventory{
+    constructor(_scene) {
+        this.scene = _scene;
+
+        //stop use click clicking immediatly again and eg hit the back btn
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.9);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.btnBack = new Button(this.scene, { x: -180, y: -116 }, "atlasUi", "sprBtn00", "back", false, () => {
+            this.destroy();
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+        });
+
+        /*this.btnDream = new Button(this.scene, { x: 160, y: -66 }, "sprBtn00", "DREAM", false, () => {
+            this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+            this.scene.loadLevel("dream00");
+
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });*/
+
+        //this.saveGame = JSON.parse(localStorage.getItem(SAVEGAMENAME));
+
+        this.drag = {
+            item: null,
+            offset: {
+                x: 0,
+                y: 0
+            }
+        }
+
+        this.bg = this.scene.add.sprite(0, 0, "atlasFps", "fps_tex_128_inventory");
+        this.bg.setScale(4);
+        this.bg.alpha = 0.5;
+
+       let xx = -2000;
+       let yy = 0;
+
+       if (flagManager.getFlagById("dreamcoin") !== null) {
+           xx = Number(flagManager.getFlagById("dreamcoin").value) > 0 ? -128 : -2000;
+       }
+       this.dreamcoin = this.scene.add.sprite(xx, 0, "atlasObstacles", "obstTokenSmiley");
+
+       if (flagManager.getFlagById("dream00hasKey") !== null) {
+           xx = flagManager.getFlagById("dream00hasKey").value === "true" ? -128 : -2000;
+       }
+       this.dreamkey = this.scene.add.sprite(xx, 0, "atlasObjects", "itemDreamKey00");
+       /*
+        if (flagManager.getFlagById("00hasRevolver") !== null) {
+            xx = flagManager.getFlagById("00hasRevolver").value === "true" ? -128 : -2000;
+        }
+        this.revolver = this.scene.add.sprite(xx, 0, "itemRevolver");
+
+        xx = -2000;
+        if (flagManager.getFlagById("00hasBullet") !== null) {
+            xx = flagManager.getFlagById("00hasBullet").value === "true" ? 32 : -2000;
+        }
+        this.bullet = this.scene.add.sprite(xx, 0, "atlasItems", "itemRevolverRoundFull");
+        this.bullet.rotation = Math.PI * 0.5;
+
+        xx = -2000;
+        if (flagManager.getFlagById("00hasCigarettes") !== null) {
+            xx = flagManager.getFlagById("00hasCigarettes").value === "true" ? 0 : -2000;
+        }
+        this.cigarettes = this.scene.add.sprite(xx, 64, "atlasItems", "itemCigarettes00");
+
+        xx = -2000;
+        if (flagManager.getFlagById("00hasKeycard") !== null) {
+            xx = flagManager.getFlagById("00hasKeycard").value === "true" ? -128 : -2000;
+        }
+        this.keycard = this.scene.add.sprite(xx, 96, "atlasItems", "itemKeycard");
+
+        xx = -2000;
+        if (flagManager.getFlagById("00hasShipcard") !== null) {
+            xx = flagManager.getFlagById("00hasShipcard").value === "true" ? 128 : -2000;
+        }
+        this.shipcard = this.scene.add.sprite(xx, 0, "atlasItems", "itemCardBoat");
+
+        xx = -2000;
+        if (flagManager.getFlagById("00hasPlant") !== null) {
+            xx = flagManager.getFlagById("00hasPlant").value === "true" ? -128 : -2000;
+        }
+        this.plant = this.scene.add.sprite(xx, 0, "atlasItems", "itemPlant00");
+
+        this.photo = this.scene.add.sprite(-96, -64, "atlasItems", "itemPhotoWho");
+
+        this.items = [
+            this.revolver,
+            this.bullet,
+            this.cigarettes,
+            this.keycard,
+            this.shipcard,
+            this.plant,
+            this.photo
+        ]*/
+
+       this.items = [
+          this.dreamcoin
+       ]
+
+        for (let it of this.items) {
+            it.setInteractive();
+            it.on("pointerdown", (_a, _b, _c) => {
+                this.drag.item = it;
+                this.bringToFront(this.drag.item);
+                this.drag.offset.x = this.scene.hand.pos.x - it.x;
+                this.drag.offset.y = this.scene.hand.pos.y - it.y;
+            })
+        }
+    }
+
+    update(){
+        this.btnBack.update();
+
+        if (this.drag.item !== null) {
+            this.drag.item.x = this.scene.hand.pos.x - this.drag.offset.x;
+            this.drag.item.y = this.scene.hand.pos.y - this.drag.offset.y;
+            if (this.scene.hand.pressed === false) {
+                this.drag.item = null;
+            }
+        }
+    }
+
+    bringToFront(_item){
+        for(let it of this.items){
+            if(it === _item){
+                it.depth = 10;
+            }else{
+                it.depth = 5;
+            }
+        }
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.btnBack.destroy();
+        this.bg.destroy();
+
+       this.dreamcoin.destroy();
+       this.dreamkey.destroy();
+       /*
+        this.revolver.destroy();
+        this.bullet.destroy();
+        this.cigarettes.destroy();
+        this.keycard.destroy();
+        this.shipcard.destroy();
+        this.plant.destroy();
+       this.photo.destroy();
+       */
+    }
+}

src/ui/panelJoeComputer.js

@@ -0,0 +1,207 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import ComputerWindowAero from "./computer/windowAero.js";
+import ProgramSystem from "./computer/programs/programSystemAero.js";
+import ProgramCalendar from "./computer/programs/programCalendarAero.js";
+import ProgramMessenger from "./computer/programs/programMessengerAero.js";
+import ProgramRegulations from "./computer/programs/programRegulationsAero.js";
+
+export default class PanelJoeComputer {
+   constructor(_scene) {
+      this.scene = _scene;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.screenTop = this.scene.game.config.height * -0.5;
+      this.screenBottom = this.scene.game.config.height * 0.5;
+      this.screenLeft = this.scene.game.config.width * -0.5;
+      this.screenRight = this.scene.game.config.width * 0.5;
+
+      //this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      //this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      let deskBgFlag = flagManager.getFlagById("desktopBackgroundJoe").value;
+      this.background = this.scene.add.sprite(0, 0, "atlasDesktopBackgrounds", "sprDesktopBackground0" + deskBgFlag);
+      this.background.alpha = 1;//0.75;
+
+      this.scene.hand.showCursor = false;
+      this.cursor = this.scene.add.sprite(0, 0, "atlasUi", "sprDesktopCursorNormal");
+      this.cursor.depth = 10001;
+      this.cursor.setOrigin(0, 0);
+
+      this.windowOpen = null;
+      this.windowToOpen = null;
+      this.windowToClose = null;
+      this.windowSystem = new ComputerWindowAero(this.scene, this, "System", -128, -128, 256, 200);
+      this.windowMessenger = new ComputerWindowAero(this.scene, this, "Messenger", -128, -128, 256, 256);
+      this.windowTech = new ComputerWindowAero(this.scene, this, "Technical Regulations", -128, -128, 256, 256);
+      this.windowCalendar = new ComputerWindowAero(this.scene, this, "Race Calendar", -128, -128, 256, 256);
+      //programs
+      this.programSystem = new ProgramSystem(this.scene, this, this.windowSystem);
+      this.programSystem.changeBackgroundPreview(String(deskBgFlag));//todo: save this number
+      this.windowSystem.program = this.programSystem;
+      this.programCalendar = new ProgramCalendar(this.scene, this, this.windowCalendar);
+      this.windowCalendar.program = this.programCalendar;
+      this.programRegulations = new ProgramRegulations(this.scene, this, this.windowTech);
+      this.windowTech.program = this.programRegulations;
+      this.programMessenger = new ProgramMessenger(this.scene, this, this.windowMessenger);
+      this.windowMessenger.program = this.programMessenger;
+
+
+      //left side
+      this.btnBack = new Button(this.scene, { x: this.screenLeft + 32, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconLogout", "", false, () => {
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.btnBack.colors = {
+         out: 0xff004d,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900
+      }
+      this.btnBack.colorInState(this.btnBack.states.out);
+
+      this.txtTime = this.scene.add.bitmapText(this.screenLeft + 16, this.screenBottom - 16, "uiFont", "00:00 DD/MM/2k97", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtTime.depth = 9999;
+      this.txtTime.setTintFill(0xfff1e8);
+
+      //desktop icons
+      this.btnSystem = new Button(this.scene, { x: this.screenRight - 32, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconSystem", "", false, () => {
+         //if(this.windowOpen === null){
+         //    this.windowOpen = this.windowSystem;
+         //    this.windowOpen.open();
+         //}else
+         if (this.windowOpen !== this.windowSystem && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowSystem;
+            if (this.windowSystem.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnSystem.setHighlighting(false);
+
+      this.btnMessenger = new Button(this.scene, { x: this.screenRight - 32, y: this.screenTop + 80 }, "atlasUi", "sprDesktopIconMessenger", "", false, () => {
+         if (this.windowOpen !== this.windowMessenger && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowMessenger;
+            if (this.windowMessenger.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnMessenger.setHighlighting(false);
+
+      this.btnTech = new Button(this.scene, { x: this.screenRight - 80, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconTechCol", "", false, () => {
+         if (this.windowOpen !== this.windowTech && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowTech;
+            if (this.windowTech.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnTech.setHighlighting(false);
+
+      this.btnCalendar = new Button(this.scene, { x: this.screenRight - 80, y: this.screenTop + 80 }, "atlasUi", "sprDesktopIconCalendar", "", false, () => {
+         if (this.windowOpen !== this.windowCalendar && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowCalendar;
+            if (this.windowCalendar.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnCalendar.setHighlighting(false);
+
+      /*this.btnLcarsSystem = new Button(this.scene, { x: this.screenRight - 80, y: this.screenBottom - 32 }, "sprDesktopIconSystemLcars", "", false, () => {
+
+      });
+      this.btnLcarsSystem.setHighlighting(false);
+      this.btnLcarsBrowser = new Button(this.scene, { x: this.screenRight - 32, y: this.screenBottom - 32 }, "sprDesktopIconBrowserLcars", "", false, () => {
+
+      });
+      this.btnLcarsBrowser.setHighlighting(false);*/
+
+      this.lockButtons = true;
+      this.date = new Date();
+
+      this.scene.soundManager.playSound(this.scene.soundManager.computerStartSound);
+   }
+
+   update() {
+      //this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      //this.bgGrid.update();
+
+      this.updateCursor();
+
+      if (this.lockButtons === false) {
+         this.btnBack.update();
+         this.btnSystem.update();
+         this.btnMessenger.update();
+         this.btnTech.update();
+         this.btnCalendar.update();
+         //this.btnLcarsSystem.update();
+         //this.btnLcarsBrowser.update();
+      } else {
+         this.lockButtons = false;
+      }
+
+      if (this.windowOpen !== null) {
+         this.windowOpen.update();
+      }
+      if (this.windowToClose !== null) {
+         this.windowToClose.update();
+      }
+
+      let d = this.date;
+      this.txtTime.setText(zeroPad(d.getHours(), 2) + ":" + zeroPad(d.getMinutes(), 2) + " " + zeroPad(d.getDate(), 2) + "." + zeroPad(d.getMonth(), 2) + ".2k97");
+   }
+
+   updateCursor() {
+      this.cursor.x = this.scene.hand.pos.x;
+      this.cursor.y = this.scene.hand.pos.y;
+
+      if (this.btnSystem.hovering === true || this.btnMessenger.hovering === true || this.btnTech.hovering === true || this.btnBack.hovering === true || this.btnCalendar.hovering === true /*|| this.btnLcarsBrowser.hovering === true || this.btnLcarsSystem.hovering === true*/) {
+         this.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+      } else {
+         this.cursor.setTexture("atlasUi", "sprDesktopCursorNormal");
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      //this.bgGrid.destroy();
+      this.background.destroy();
+      this.cursor.destroy();
+
+      this.windowOpen = null;
+      this.windowMessenger.destroy();
+      this.windowSystem.destroy();
+      this.windowTech.destroy();
+      this.windowCalendar.destroy();
+
+      this.btnBack.destroy();
+      this.btnSystem.destroy();
+      this.btnMessenger.destroy();
+      this.btnTech.destroy();
+      this.btnCalendar.destroy();
+
+      this.txtTime.destroy();
+      //this.btnLcarsSystem.destroy();
+      //this.btnLcarsBrowser.destroy();
+      this.scene.hand.showCursor = true;
+   }
+}

src/ui/panelLevelname.js

@@ -0,0 +1,57 @@
+export default class PanelLevelname{
+    constructor(_scene, _txt) {
+        this.scene = _scene;
+
+        //stop use click clicking immediatly again and eg hit the back btn
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.75);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGraphics.beginPath();
+        this.bgGraphics.lineStyle(1, 0xffffff);
+        this.bgGraphics.moveTo(-128, -16);
+        this.bgGraphics.lineTo(128, -16);
+        this.bgGraphics.strokePath();
+
+        this.header = this.scene.add.bitmapText(0, -32, "segoeUI_16", _txt, 16, 0).setOrigin(0.5);
+        this.header.depth = 10000;
+
+        this.tweenBg = this.scene.add.tween({
+            targets: this.bgGraphics,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Cubic.Out,
+            onComplete: () => {
+                this.destroy();
+                this.scene.player.panel = null;
+            }
+        })
+
+        this.tweenHeader = this.scene.add.tween({
+            targets: this.header,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Quintic.Out,
+            onComplete: () => {
+                
+            }
+        })
+    }
+
+    update(){
+        
+    }
+
+    destroy(){
+        //this.tweenBg.destroy();
+        //this.tweenHeader.destroy();
+        this.bgGraphics.destroy();
+        this.header.destroy();
+    }
+}

src/ui/panelLoungeRoundtable00.js

@@ -0,0 +1,72 @@
+import Button from "./button.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelLoungeRoundtable00{
+    constructor(_scene, _level, _treePosition = 0) {
+        this.scene = _scene;
+        this.level = _level;
+        this.treePosition = _treePosition;
+
+        this.scene.hand.setMouseLock(false);
+        this.scene.hand.showCursor = true;
+        this.scene.hand.cursor.alpha = 1;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.25);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+        this.bgGraphics.depth = 9990;
+
+        this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+        this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+        this.narrator = this.scene.add.sprite(-160, -68-34, "charSheetExpressions", "scooterExpressionOuch00");
+        this.narrator.depth = 9999;
+        this.faces = [
+            "scooterExpressionOuch00",
+            "hogExpressionHaha00",
+            "rahyExpressionAngry01",
+            "scooterExpressionOuch00",
+            "rahyExpressionOuch01",
+            "hogExpressionHaha00",
+            "scooterExpressionHaha01",
+            "rahyExpressionHaha02",
+            "scooterExpressionHaHa00",
+            "rahyExpressionAngry00",//9
+            "hogExpressionHappy01",
+            "scooterExpressionAngry00",
+            "hogExpressionHaha00",
+            "rahyExpressionAngry01",
+            "rahyExpressionAngry00"
+        ]
+
+        this.scene.player.setMode(PLAYERMODE.DIALOGUE);
+        this.scene.player.conversationManager.setNPC(this.level.loungeTables[1]);
+        this.scene.player.conversationManager.setConversation(this.level.loungeTables[1].data.conversation.fileName, this.level.loungeTables[1].data.conversation.treePosition);
+                        
+        
+        this.lockButtons = true;
+    }
+
+    update(){
+        this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+        this.bgGrid.update();
+        
+        if(this.lockButtons === false){
+            this.narrator.setTexture("charSheetExpressions", this.faces[this.scene.player.conversationManager.conversation.treePosition]);
+            if(this.level.loungeTables[1].data.conversation.treePosition === 14){
+                this.scene.paused = false;
+                this.scene.player.panel = null;
+                this.destroy();
+            }
+        }else{
+            this.lockButtons = false;
+        }
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.bgGrid.destroy();
+
+        this.narrator.destroy();
+    }
+}

src/ui/panelPainting.js

@@ -0,0 +1,48 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelPainting{
+    constructor(_scene) {
+        this.scene = _scene;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.9);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+        this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+        //left side
+        this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "BACK", false, () => {
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.destroy();
+        });
+
+        this.description = this.scene.add.bitmapText(0, 34 , "uiFont", "The Arashi Corporation is a thin shadow of its former self. Once a leader in microchip technology and tunneling and mining, it was dismantled and bought up by more powerful corporations. Nowadays it only lives as a small racing team, with pride but without much financial resources.", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+        this.description.depth = 9999;
+        this.description.maxWidth = 240;
+
+        this.lockButtons = true;
+    }
+
+    update(){
+        this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+        this.bgGrid.update();
+        
+        if(this.lockButtons === false){
+            this.btnBack.update();
+        }else{
+            this.lockButtons = false;
+        }
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.bgGrid.destroy();
+        
+        this.btnBack.destroy();
+        this.description.destroy();
+    }
+}

src/ui/panelPlayerComputer.js

@@ -0,0 +1,250 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import ComputerWindowAero from "./computer/windowAero.js";
+import ProgramSystem from "./computer/programs/programSystemAero.js";
+import ProgramCalendar from "./computer/programs/programCalendarAero.js";
+import ProgramMessenger from "./computer/programs/programMessengerAero.js";
+import ProgramRegulations from "./computer/programs/programRegulationsAero.js";
+
+export default class PanelPlayerComputer {
+   constructor(_scene) {
+      this.scene = _scene;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.screenTop = this.scene.game.config.height * -0.5;
+      this.screenBottom = this.scene.game.config.height * 0.5;
+      this.screenLeft = this.scene.game.config.width * -0.5;
+      this.screenRight = this.scene.game.config.width * 0.5;
+
+      //this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      //this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      let deskBgFlag = flagManager.getFlagById("desktopBackground").value;
+      this.background = this.scene.add.sprite(0, 0, "atlasDesktopBackgrounds", "sprDesktopBackground0" + deskBgFlag);
+      this.background.alpha = 1; //0.75;
+
+      this.scene.hand.showCursor = false;
+      this.cursor = this.scene.add.sprite(0, 0, "atlasUi", "sprDesktopCursorNormal");
+      this.cursor.depth = 10001;
+      this.cursor.setOrigin(0, 0);
+
+      this.windowOpen = null;
+      this.windowToOpen = null;
+      this.windowToClose = null;
+      this.windowSystem = new ComputerWindowAero(this.scene, this, "System", -128, -128, 256, 200);
+      this.windowMessenger = new ComputerWindowAero(this.scene, this, "Messenger", -128, -128, 256, 256);
+      this.windowTech = new ComputerWindowAero(this.scene, this, "Technical Regulations", -128, -128, 256, 256);
+      this.windowCalendar = new ComputerWindowAero(this.scene, this, "Race Calendar", -128, -128, 256, 256);
+      //programs
+      this.programSystem = new ProgramSystem(this.scene, this, this.windowSystem);
+      this.programSystem.changeBackgroundPreview(String(deskBgFlag)); //todo: save this number
+      this.windowSystem.program = this.programSystem;
+      this.programCalendar = new ProgramCalendar(this.scene, this, this.windowCalendar);
+      this.windowCalendar.program = this.programCalendar;
+      this.programRegulations = new ProgramRegulations(this.scene, this, this.windowTech);
+      this.windowTech.program = this.programRegulations;
+      this.programMessenger = new ProgramMessenger(this.scene, this, this.windowMessenger);
+      this.windowMessenger.program = this.programMessenger;
+
+      //left side
+      this.btnBack = new Button(this.scene, { x: this.screenLeft + 32, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconLogout", "", false, () => {
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.btnBack.colors = {
+         out: 0xff004d,
+         over: 0x29adff,
+         on: 0x00e436,
+         off: 0xad2900,
+      };
+      this.btnBack.colorInState(this.btnBack.states.out);
+
+      this.txtTime = this.scene.add
+         .bitmapText(this.screenLeft + 16, this.screenBottom - 16, "uiFont", "00:00 DD/MM/2k97", 14, 0)
+         .setOrigin(0, 0.5)
+         .setLetterSpacing(0);
+      this.txtTime.depth = 9999;
+      this.txtTime.setTintFill(0xfff1e8);
+
+      //desktop icons
+      this.btnSystem = new Button(this.scene, { x: this.screenRight - 32, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconSystem", "", false, () => {
+         //if(this.windowOpen === null){
+         //    this.windowOpen = this.windowSystem;
+         //    this.windowOpen.open();
+         //}else
+         if (this.windowOpen !== this.windowSystem && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowSystem;
+            if (this.windowSystem.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnSystem.setHighlighting(false);
+
+      this.btnMessenger = new Button(this.scene, { x: this.screenRight - 32, y: this.screenTop + 80 }, "atlasUi", "sprDesktopIconMessenger", "", false, () => {
+         if (this.windowOpen !== this.windowMessenger && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowMessenger;
+            if (this.windowMessenger.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnMessenger.setHighlighting(false);
+
+      this.btnTech = new Button(this.scene, { x: this.screenRight - 80, y: this.screenTop + 32 }, "atlasUi", "sprDesktopIconTechCol", "", false, () => {
+         if (this.windowOpen !== this.windowTech && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowTech;
+            if (this.windowTech.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnTech.setHighlighting(false);
+
+      this.btnCalendar = new Button(this.scene, { x: this.screenRight - 80, y: this.screenTop + 80 }, "atlasUi", "sprDesktopIconCalendar", "", false, () => {
+         if (this.windowOpen !== this.windowCalendar && this.windowToClose === null) {
+            if (this.windowOpen !== null) {
+               this.windowOpen.close();
+            }
+            this.windowOpen = this.windowCalendar;
+            if (this.windowCalendar.isOpen === false) {
+               this.windowOpen.open();
+            }
+         }
+      });
+      this.btnCalendar.setHighlighting(false);
+
+      this.sticky = null;
+      if (flagManager.getFlagById("apartement00sticky").value === "1") {
+         this.sticky = this.scene.add.sprite(0, 0, "atlasUi", "sprStickyNote");
+         this.sticky.setInteractive.interactable = true;
+         this.sticky.depth = 19000;
+         this.txtSticky = this.scene.add
+            .bitmapText(0, 0, "uiFont", "the pc is not setup\nyet\ncome see me\nin the hangar\n\nbring nutricubes", 14, 0)
+            .setOrigin(0.5)
+            .setLetterSpacing(0);
+         this.txtSticky.depth = 19001;
+         this.txtSticky.setTintFill(0x1d2b53);
+
+         flagManager.setFlag("quartersLevel", "00");
+         flagManager.setFlag("hangarLevel", "00");
+      }
+
+      /*this.btnLcarsSystem = new Button(this.scene, { x: this.screenRight - 80, y: this.screenBottom - 32 }, "sprDesktopIconSystemLcars", "", false, () => {
+
+      });
+      this.btnLcarsSystem.setHighlighting(false);
+      this.btnLcarsBrowser = new Button(this.scene, { x: this.screenRight - 32, y: this.screenBottom - 32 }, "sprDesktopIconBrowserLcars", "", false, () => {
+
+      });
+      this.btnLcarsBrowser.setHighlighting(false);*/
+
+      this.lockButtons = true;
+      this.date = new Date();
+
+      this.scene.soundManager.playSound(this.scene.soundManager.computerStartSound);
+   }
+
+   update() {
+      //this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      //this.bgGrid.update();
+
+      this.updateCursor();
+
+      if (this.lockButtons === false) {
+         if (this.sticky !== null) {
+            if (this.sticky.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+               this.sticky.tint = 0xbbbbbb;
+               if (this.scene.hand.justReleased === true) {
+                  flagManager.setFlag("apartement00sticky", "0");
+                  this.sticky.destroy();
+                  this.txtSticky.destroy();
+               }
+            } else {
+               this.sticky.tint = 0xffffff;
+            }
+         }
+
+         this.btnBack.update();
+         this.btnSystem.update();
+         this.btnMessenger.update();
+         this.btnTech.update();
+         this.btnCalendar.update();
+         //this.btnLcarsSystem.update();
+         //this.btnLcarsBrowser.update();
+      } else {
+         this.lockButtons = false;
+      }
+
+      if (this.windowOpen !== null) {
+         this.windowOpen.update();
+      }
+      if (this.windowToClose !== null) {
+         this.windowToClose.update();
+      }
+
+      let d = this.date;
+      this.txtTime.setText(zeroPad(d.getHours(), 2) + ":" + zeroPad(d.getMinutes(), 2) + " " + zeroPad(d.getDate(), 2) + "." + zeroPad(d.getMonth(), 2) + ".2k97");
+   }
+
+   updateCursor() {
+      this.cursor.x = this.scene.hand.pos.x;
+      this.cursor.y = this.scene.hand.pos.y;
+
+      if (
+         this.btnSystem.hovering === true ||
+         this.btnMessenger.hovering === true ||
+         this.btnTech.hovering === true ||
+         this.btnBack.hovering === true ||
+         this.btnCalendar.hovering === true /*|| this.btnLcarsBrowser.hovering === true || this.btnLcarsSystem.hovering === true*/
+      ) {
+         this.cursor.setTexture("atlasUi", "sprDesktopCursorTouch");
+      } else {
+         this.cursor.setTexture("atlasUi", "sprDesktopCursorNormal");
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      //this.bgGrid.destroy();
+      this.background.destroy();
+      this.cursor.destroy();
+
+      this.windowOpen = null;
+      this.windowMessenger.destroy();
+      this.windowSystem.destroy();
+      this.windowTech.destroy();
+      this.windowCalendar.destroy();
+
+      this.btnBack.destroy();
+      this.btnSystem.destroy();
+      this.btnMessenger.destroy();
+      this.btnTech.destroy();
+      this.btnCalendar.destroy();
+
+      this.txtTime.destroy();
+
+      if (this.sticky !== null) {
+         this.sticky.destroy();
+         this.txtSticky.destroy();
+      }
+
+      //this.btnLcarsSystem.destroy();
+      //this.btnLcarsBrowser.destroy();
+      this.scene.hand.showCursor = true;
+   }
+}

src/ui/panelRaceTutorial.js

@@ -0,0 +1,174 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelRaceTutorial {
+   constructor(_scene, _level, _previousState = 0, _tutorial = 0) {
+      this.scene = _scene;
+      this.level = _level;
+      this.previousState = _previousState;
+      this.tutorial = _tutorial;
+
+      this.scene.hand.setMouseLock(false);
+      this.scene.hand.showCursor = true;
+      this.scene.hand.cursor.alpha = 1;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.25);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+      this.bgGraphics.depth = 9990;
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      //left side
+      /*
+      this.btnContinue = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "CONTINUE", false, () => {
+          this.scene.paused = false;
+          //racing
+          this.level.state = this.previousState;
+          this.level.ui.show();
+          this.scene.player.panel = null;
+          this.destroy();
+      });
+      */
+
+      //this.narrator = this.scene.add.sprite(-160, -68 - 34, "atlasUi", "portraitLara00sw");
+      this.narrator = this.scene.add.sprite(-160, -68 - 34, "charSheetExpressions", "rokiExpressionAngry00");
+      this.narrator.depth = 9999;
+
+      /*
+      let txts = [
+          "Hate to stop you right away, but I am here to help you learn the ropes!",
+          ""
+      ]
+
+      this.txt = this.scene.add.bitmapText(0, 34, "uiFont", txts[this.tutorial], 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txt.depth = 9999;
+      this.txt.maxWidth = 240;*/
+
+      this.scene.player.setMode(PLAYERMODE.DIALOGUE);
+      this.scene.player.conversationManager.setNPC(this.level.aiShips[0].ship);
+      this.scene.player.conversationManager.setConversation(this.level.aiShips[0].ship.data.conversation.fileName, this.level.aiShips[0].ship.data.conversation.treePosition);
+
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons === false) {
+         //this.btnContinue.update();
+
+         //if(INPUTS.btnA.justReleased){
+         //this.btnContinue.func();
+         //}
+
+         //listen to end of conversation and quit
+         //if(this.scene.player.conversation === null){
+         //
+
+         switch (this.scene.player.conversationManager.conversation.treePosition) {
+            case 0:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHappy02");
+               break;
+            case 3:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionNormal02");
+               break;
+            case 4:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionNormal01");
+               break;
+            case 7:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHaha00");
+               break;
+            case 8:
+               this.narrator.setTexture("charSheetExpressions", "joeExpressionNormal00");
+               break;
+            case 9:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHaha04");
+               break;
+            case 10:
+               this.narrator.setTexture("charSheetExpressions", "joeExpressionNormal00");
+               break;
+            case 11:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionThinking01");
+               break;
+            case 13:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHappy02");
+               break;
+            case 15:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionOuch02");
+               break;
+            case 16:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHaha00");
+               break;
+            case 17:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHappy00");
+               break;
+            case 21:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHappy01");
+               break;
+            case 39:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHappy02");
+               break;
+            case 40:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionAngry03");
+               break;
+            case 42:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionHaha04");
+               break;
+            case 43:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionNormal01");
+               break;
+            default:
+               this.narrator.setTexture("charSheetExpressions", "rokiExpressionAngry02");
+               break;
+         }
+
+         if (this.scene.player.mode !== PLAYERMODE.DIALOGUE) {
+            if (this.level.aiShips[0].ship.data.conversation.treePosition !== 9999) {
+               console.log("cycle from end of diag")
+               this.level.cycleTutorial();
+
+               this.scene.paused = false;
+               //racing
+               this.level.state = this.previousState;
+               this.level.ui.show();
+               this.scene.player.panel = null;
+               this.destroy();
+            } else {
+               flagManager.setFlag("demoProgress", "1");
+
+               this.scene.soundManager.stopSound(this.scene.soundManager.engineSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.engineRotorSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.scrapeSound);
+               this.scene.soundManager.stopSound(this.scene.soundManager.heatWarningSound);
+               this.scene.soundManager.stopSound(this.level.musicTrack);
+
+               this.scene.paused = false;
+
+               this.scene.player.panel = null;
+               this.level.destroy();
+
+               this.destroy();
+               //this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+               this.scene.loadLevel("hangar00", { startFromElevator: false, showIntro: false });//dream00
+            }
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      //this.txt.destroy();
+      this.narrator.destroy();
+
+      //this.btnContinue.destroy();
+   }
+}

src/ui/panelStopTrain.js

@@ -0,0 +1,134 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+
+export default class PanelStopTrain {
+   constructor(_scene, _level) {
+      this.scene = _scene;
+      this.level = _level;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x000000, 0.9);
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      this.btnBack = new Button(this.scene, { x: -160, y: -68 }, "atlasUi", "sprBtn00", "BACK", false, () => {
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.level.metroComputer.interactable = true;
+
+         this.destroy();
+      });
+
+      this.ridges = [];
+      this.ridges.push(this.scene.add.sprite(-64, 0, "atlasAll", "texWallGrind07"))
+      this.ridges.push(this.scene.add.sprite(64, 0, "atlasAll", "texWallGrind07"))
+      for (let r of this.ridges) {
+         r.setScale(4 / 32, 3);
+         r.setOrigin(0.5, 1);
+      }
+
+      this.lever = this.scene.add.sprite(0, -96, "atlasUi", "sprBtn14");
+      this.lever.interactable = true;
+      this.leverFollow = false;
+      this.leverLock = false;
+      this.keyStarted = false;
+
+      this.lockSymbol = this.scene.add.sprite(128, -16, "atlasUi", "sprBtnLock00");
+
+      this.keyhole = this.scene.add.sprite(128, 64, "atlasUi", flagManager.getFlagById("dream00hasKey").value === "true" ? "sprBtn15key" : "sprBtn15");
+      this.keyhole.interactable = true;
+
+      flagManager.setFlag("dream00searchKey", "true");
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons <= false) {
+         this.btnBack.update();
+
+         if (this.lever.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+            this.lever.tint = 0xbbbbbb;
+            if (this.scene.hand.pressed === true && this.keyStarted === true) {
+               this.leverFollow = true;
+            }
+            if (this.scene.hand.justPressed === true && this.keyStarted === false) {
+               this.scene.soundManager.playSound(this.scene.soundManager.menuErrorSound);
+            }
+         } else {
+            this.lever.tint = 0xffffff;
+         }
+         if (this.keyhole.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+            this.keyhole.tint = 0xbbbbbb;
+            if (this.scene.hand.pressed === true && flagManager.getFlagById("dream00hasKey").value === "true") {
+               this.keyhole.rotation = Math.PI * 0.5;
+               this.keyStarted = true;
+               this.keyhole.interactable = false;
+               this.lockSymbol.setTexture("atlasUi", "sprBtnLock01")
+            }
+            if (this.scene.hand.justPressed === true && flagManager.getFlagById("dream00hasKey").value === "false") {
+               this.scene.soundManager.playSound(this.scene.soundManager.menuErrorSound);
+            }
+         } else {
+            this.keyhole.tint = 0xffffff;
+         }
+         if (this.scene.hand.pressed === false) {
+            this.leverFollow = false;
+            if (this.lever.y > 64) {
+               this.leverLock = true;
+
+               this.scene.player.setMode(PLAYERMODE.LOOK);
+               this.scene.player.panel = null;
+               this.level.metroComputer.interactable = false;
+
+               this.destroy();
+               this.level.stopTrainTop();
+            }
+         }
+
+         if (this.leverFollow === true) {
+            this.lever.y = this.scene.hand.pos.y;
+         } else {
+            let leverDelta = 0;
+            if (this.leverLock === false) {
+               leverDelta = 96 - this.lever.y;
+               this.lever.y -= Math.max(1, leverDelta * 0.1);
+            } else {
+               leverDelta = -96 + this.lever.y;
+               this.lever.y -= Math.min(-1, leverDelta * 1);
+            }
+         }
+         this.lever.y = Math.max(-96, Math.min(96, this.lever.y));
+
+         let ridgeScale = (this.lever.y * -1) / 32;
+         if (ridgeScale > 0) {
+            ridgeScale = Math.max(0.25, ridgeScale);
+         } else {
+            ridgeScale = Math.min(-0.25, ridgeScale);
+         }
+         for (let r of this.ridges) {
+            r.setScale(4 / 32, ridgeScale);
+         }
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+      this.btnBack.destroy();
+      this.lever.destroy();
+      this.keyhole.destroy();
+      this.lockSymbol.destroy();
+      for (let r of this.ridges) {
+         r.destroy();
+      }
+   }
+}

src/ui/panelTunnelMainMenu.js

@@ -0,0 +1,369 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import PanelTunnelSelector from "./panelTunnelSelector.js";
+import PanelTunnelOptions from "./panelTunnelOptions.js";
+
+export default class PanelTunnelMainMenu {
+   constructor(_scene, _level, _returnPos) {
+      this.scene = _scene;
+      this.level = _level;
+      this.returnPos = _returnPos;
+
+      //this.bgGraphics = this.scene.add.graphics();
+      //this.bgGraphics.fillStyle(0x000000, 0.1);
+      //this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      //this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      //this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      /*
+      //draw faint scanlines
+      this.scanlinesAnim = 0;
+      let th = 6;
+      this.scanlines = this.scene.add.graphics(0, 0);
+      this.scanlines.lineStyle(3, 0xffffff, 0.025);// green: 0x00e436  orig: 3, 0xffffff, 0.25
+      this.scanlines.beginPath();
+      for (let y = 0; y < this.scene.game.config.height + 6; y++) {
+          if ((Math.floor(this.scene.game.config.height + y)) % th === Math.floor(this.scanlinesAnim)) {
+              this.scanlines.moveTo(this.scene.game.config.width * -0.5, -6 + y + (this.scene.game.config.height * -0.5));
+              this.scanlines.lineTo(this.scene.game.config.width * 0.5, -6 + y + (this.scene.game.config.height * -0.5));
+          }
+      }
+      this.scanlines.strokePath();
+      this.scanlines.depth = 10000;
+      this.scanlines.setVisible(false);
+      this.scanMask = this.scanlines.createGeometryMask();
+      */
+
+      this.logos = [];
+      this.logos.push(this.scene.add.sprite(0, 0, "atlasUi", "mainMenuLogoFZ"));
+      this.logos.push(this.scene.add.sprite(0, 0, "atlasUi", "mainMenuLogoRR"));
+      //this.logos.push(this.scene.add.sprite(0, 0, "atlasUi", "logoRRsmall"));
+      for (let [i, l] of this.logos.entries()) {
+         l.depth = 9998;
+         //if(i > 0){l.alpha = 0}else{
+         l.alpha = 0;
+         //l.angle = Math.PI;
+         if (i === 1) {
+         } else {
+            l.angle = Math.PI * -0.5;
+         }
+         //}
+      }
+      this.logoAnimator = 0;
+
+      this.colors = {
+         out: 0xfff1e8, //white 0xfff1e8
+         over: 0x29adff, //light blue: 0x29adff //dark blue 1d2b53 //yellow 0xffec27
+         on: 0x00e436,
+         off: 0xad2900,
+      };
+
+      let a = 0;
+      //new game
+      a = Math.PI * 1.09;
+      this.btnBackgroundNewGame = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundNewGame.setOrigin(0, 0.1);
+      this.btnBackgroundNewGame.setTint(this.colors.over);
+      this.btnBackgroundNewGame.rotation = a;
+      this.btnBackgroundNewGame.depth = 9999;
+      //this.btnBackgroundNewGame.setMask(this.scanMask);
+      this.btnNewGame = new Button(this.scene, { x: Math.cos(a + 0.2) * 190, y: Math.sin(a + 0.2) * 190 }, "atlasUi", "sprBtn00", "NEW GAME", false, () => {
+         /*
+         //old direct to hangar demo
+         this.scene.soundManager.stopSound(this.level.mainMusic);
+         this.scene.player.panel = null;
+
+         this.setupNewGame();
+
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+         this.scene.loadLevel("hangar00", { startFromElevator: true, showIntro: true });//dream00
+         //INFO demo starts with a panel so dont override after the fact
+         //this.scene.player.setMode(PLAYERMODE.LOOK);
+         //this.scene.player.panel = null;
+         this.destroy();
+         */
+         this.scene.soundManager.stopSound(this.level.mainMusic);
+         this.scene.player.panel = null;
+
+         this.setupNewGame();
+
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+         this.scene.loadLevel("dream00", null);
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.btnNewGame.hoverInFunc = () => {
+         this.btnBackgroundNewGame.setTint(this.colors.out);
+         this.btnBackgroundNewGame.depth = 10000;
+      };
+      this.btnNewGame.hoverOutFunc = () => {
+         this.btnBackgroundNewGame.setTint(this.colors.over);
+         this.btnBackgroundNewGame.depth = 9999;
+      };
+      this.btnNewGame.txt.destroy();
+      this.btnNewGame.txt = this.scene.add.bitmapText(this.btnNewGame.pos.x, this.btnNewGame.pos.y, "racer", this.btnNewGame.text, 16, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnNewGame.txt.depth = 10000;
+      this.btnNewGame.txt.rotation = a + Math.PI * 1.05;
+      this.btnNewGame.sprite.alpha = 0;
+
+      //load game
+      a = Math.PI * 1; //0.975;
+      this.btnBackgroundLoadGame = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundLoadGame.setOrigin(0, 0.1);
+      this.btnBackgroundLoadGame.setTint(this.colors.over);
+      this.btnBackgroundLoadGame.rotation = a;
+      this.btnBackgroundLoadGame.depth = 9999;
+      //this.btnBackgroundLoadGame.setMask(this.scanMask);
+      this.btnLoadGame = new Button(this.scene, { x: Math.cos(a + 0.2) * 190, y: Math.sin(a + 0.2) * 190 }, "atlasUi", "sprBtn00", "LOAD GAME", false, () => {
+         this.scene.soundManager.stopSound(this.level.mainMusic);
+         this.scene.player.panel = null;
+
+         this.setupNewGame();
+
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+         this.scene.loadLevel("dream00", null);
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.btnLoadGame.hoverInFunc = () => {
+         this.btnBackgroundLoadGame.setTint(this.colors.out);
+         this.btnBackgroundLoadGame.depth = 10000;
+      };
+      this.btnLoadGame.hoverOutFunc = () => {
+         this.btnBackgroundLoadGame.setTint(this.colors.over);
+         this.btnBackgroundLoadGame.depth = 9999;
+      };
+      this.btnLoadGame.txt.destroy();
+      this.btnLoadGame.txt = this.scene.add.bitmapText(this.btnLoadGame.pos.x, this.btnLoadGame.pos.y, "racer", this.btnLoadGame.text, 16, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnLoadGame.txt.depth = 10000;
+      this.btnLoadGame.txt.rotation = a + Math.PI * 1.05;
+      this.btnLoadGame.sprite.alpha = 0;
+
+      //custom race
+      a = Math.PI * 0.8;
+      this.btnBackgroundCustomGame = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundCustomGame.setOrigin(0, 0.1);
+      this.btnBackgroundCustomGame.setTint(this.colors.over);
+      this.btnBackgroundCustomGame.rotation = a;
+      this.btnBackgroundCustomGame.depth = 9999;
+      //this.btnBackgroundCustomGame.setMask(this.scanMask);
+      this.btnCustomGame = new Button(this.scene, { x: Math.cos(a + 0.2) * 200, y: Math.sin(a + 0.2) * 200 }, "atlasUi", "sprBtn00", "CUSTOM RACE", false, () => {
+         flagManager.setFlag("playingStory", "0");
+
+         this.level.state = this.level.states.shipSelection;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         this.level.playerShip.speed = this.level.speed.switching;
+         this.scene.player.panel = null;
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelSelector(this.scene, this.level);
+         });
+         this.destroy();
+      });
+      this.btnCustomGame.hoverInFunc = () => {
+         this.btnBackgroundCustomGame.setTint(this.colors.out);
+      };
+      this.btnCustomGame.hoverOutFunc = () => {
+         this.btnBackgroundCustomGame.setTint(this.colors.over);
+      };
+      this.btnCustomGame.txt.destroy();
+      this.btnCustomGame.txt = this.scene.add
+         .bitmapText(this.btnCustomGame.pos.x, this.btnCustomGame.pos.y, "racer", this.btnCustomGame.text, 16, 0)
+         .setOrigin(0.5)
+         .setLetterSpacing(0);
+      this.btnCustomGame.txt.depth = 10000;
+      this.btnCustomGame.txt.rotation = a + Math.PI * 1.05;
+      this.btnCustomGame.sprite.alpha = 0;
+
+      //options
+      a = Math.PI * 1.75;
+      this.btnBackgroundOptions = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundOptions.setOrigin(0, 0.1);
+      this.btnBackgroundOptions.setTint(this.colors.over);
+      this.btnBackgroundOptions.rotation = a;
+      this.btnBackgroundOptions.depth = 9999;
+      //this.btnBackgroundOptions.setMask(this.scanMask);
+      this.btnOptions = new Button(this.scene, { x: Math.cos(a + 0.2) * 200, y: Math.sin(a + 0.2) * 200 }, "atlasUi", "sprBtn00", "OPTIONS", false, () => {
+         this.level.state = this.level.states.options;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         this.scene.player.panel = null;
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelOptions(this.scene, this.level);
+         });
+         this.destroy();
+      });
+      this.btnOptions.hoverInFunc = () => {
+         this.btnBackgroundOptions.setTint(this.colors.out);
+      };
+      this.btnOptions.hoverOutFunc = () => {
+         this.btnBackgroundOptions.setTint(this.colors.over);
+      };
+      this.btnOptions.txt.destroy();
+      this.btnOptions.txt = this.scene.add.bitmapText(this.btnOptions.pos.x, this.btnOptions.pos.y, "racer", this.btnOptions.text, 16, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnOptions.txt.depth = 10000;
+      this.btnOptions.txt.rotation = a + Math.PI + Math.PI * 1.05;
+      this.btnOptions.sprite.alpha = 0;
+
+      //credits
+      a = Math.PI * 0;
+      this.btnBackgroundCredits = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundCredits.setOrigin(0, 0.1);
+      this.btnBackgroundCredits.setTint(this.colors.over);
+      this.btnBackgroundCredits.rotation = a;
+      this.btnBackgroundCredits.depth = 9999;
+      //this.btnBackgroundCredits.setMask(this.scanMask);
+      this.btnCredits = new Button(this.scene, { x: Math.cos(a + 0.2) * 200, y: Math.sin(a + 0.2) * 200 }, "atlasUi", "sprBtn00", "EDITOR", false, () => {
+         this.scene.soundManager.stopSound(this.level.mainMusic);
+         this.scene.player.panel = null;
+
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+         this.scene.loadLevel("modelBuilder");
+
+         this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.btnCredits.hoverInFunc = () => {
+         this.btnBackgroundCredits.setTint(this.colors.out);
+      };
+      this.btnCredits.hoverOutFunc = () => {
+         this.btnBackgroundCredits.setTint(this.colors.over);
+      };
+      this.btnCredits.txt.destroy();
+      this.btnCredits.txt = this.scene.add.bitmapText(this.btnCredits.pos.x, this.btnCredits.pos.y, "racer", this.btnCredits.text, 16, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnCredits.txt.depth = 10000;
+      this.btnCredits.txt.rotation = a + Math.PI + Math.PI * 1.05;
+      this.btnCredits.sprite.alpha = 0;
+
+      //quit
+      a = Math.PI * 0.1;
+      this.btnBackgroundQuit = this.scene.add.sprite(Math.cos(a) * 100, Math.sin(a) * 100, "atlasUi", "mainMenuBtnBlur");
+      this.btnBackgroundQuit.setOrigin(0, 0.1);
+      this.btnBackgroundQuit.setTint(this.colors.over);
+      this.btnBackgroundQuit.rotation = a;
+      this.btnBackgroundQuit.depth = 9999;
+      //this.btnBackgroundQuit.setMask(this.scanMask);
+      this.btnQuit = new Button(this.scene, { x: Math.cos(a + 0.2) * 200, y: Math.sin(a + 0.2) * 200 }, "atlasUi", "sprBtn00", "TRAILER", false, () => {
+         //window.close();//IMPORTANT this does not work - how will it work in built version?
+         //$(".videoHolder").show();
+         //$("#trailer")[0].play();
+         //let elem = document.getElementsByClassName("videoHolder");
+         //console.log(elem);
+         //elem[0].style.display = "block";
+         //for (let s of this.scene.soundManager.musicRef) {
+         //s.howlGroup.volume(0);
+         //}
+      });
+      this.btnQuit.hoverInFunc = () => {
+         this.btnBackgroundQuit.setTint(this.colors.out);
+      };
+      this.btnQuit.hoverOutFunc = () => {
+         this.btnBackgroundQuit.setTint(this.colors.over);
+      };
+      this.btnQuit.txt.destroy();
+      this.btnQuit.txt = this.scene.add.bitmapText(this.btnQuit.pos.x, this.btnQuit.pos.y, "racer", this.btnQuit.text, 16, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnQuit.txt.depth = 10000;
+      this.btnQuit.txt.rotation = a + Math.PI + Math.PI * 1.09;
+      this.btnQuit.sprite.alpha = 0;
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      //this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      //this.bgGrid.update();
+      /*
+      this.scanlinesAnim += 0.1 * this.scene.dt;
+      if(this.scanlinesAnim >= 6){
+          this.scanlinesAnim -= 6;
+      }
+      this.scanlines.y = this.scanlinesAnim;
+      //this.scanlines.rotation += 0.01;
+      */
+      this.logoAnimator += 0.0025 * this.scene.dt; //0.002 * this.scene.dt;
+
+      this.logos[0].alpha = Math.sin(this.logoAnimator);
+      this.logos[0].alpha = Math.max(0, this.logos[0].alpha) * 10;
+      if (this.logos[0].alpha < 0.5 && this.logoAnimator > 1) {
+         let amt = Math.cos(this.logoAnimator) * 0.2;
+         if (amt < 0) {
+            amt *= -1;
+         }
+         this.logos[0].rotation -= amt;
+      } else {
+         this.logos[0].rotation = 0;
+      }
+      this.logos[1].alpha = Math.sin(this.logoAnimator + Math.PI);
+      this.logos[1].alpha = Math.max(0, this.logos[1].alpha) * 10;
+      if (this.logos[1].alpha < 0.5) {
+         let amt = Math.cos(this.logoAnimator + Math.PI) * 0.2;
+         if (amt < 0) {
+            amt *= -1;
+         }
+         this.logos[1].rotation -= amt;
+      } else {
+         this.logos[1].rotation = 0;
+      }
+
+      if (this.lockButtons <= false) {
+         this.btnNewGame.update();
+         this.btnLoadGame.update();
+         this.btnCustomGame.update();
+         this.btnOptions.update();
+         this.btnCredits.update();
+         this.btnQuit.update();
+         //this.btnToTrack.update();
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   setupNewGame() {
+      flagManager.setFlag("playingStory", "1");
+
+      flagManager.setFlag("officeLevel", "-1");
+      flagManager.setFlag("quartersLevel", "-1");
+      flagManager.setFlag("loungeLevel", "-1");
+      flagManager.setFlag("marketLevel", "-1");
+      flagManager.setFlag("hangarLevel", "-1");
+      flagManager.setFlag("churchLevel", "-1");
+
+      //flagManager.setFlag("playingDemo", "1");
+      flagManager.setFlag("apartement00sticky", "1");
+
+      flagManager.setFlag("wonDemoRace", "false");
+      flagManager.setFlag("demoProgress", "0");
+      flagManager.setFlag("demoTutorialStep", "0");
+      flagManager.setFlag("desktopBackground", "0");
+      flagManager.setFlag("desktopBackgroundJoe", "0");
+   }
+
+   destroy() {
+      //this.bgGraphics.destroy();
+      //this.bgGrid.destroy();
+      for (let l of this.logos) {
+         l.destroy();
+      }
+      this.btnNewGame.destroy();
+      this.btnLoadGame.destroy();
+      this.btnCustomGame.destroy();
+      this.btnOptions.destroy();
+      this.btnCredits.destroy();
+      this.btnQuit.destroy();
+
+      this.btnBackgroundNewGame.destroy();
+      this.btnBackgroundLoadGame.destroy();
+      this.btnBackgroundCustomGame.destroy();
+      this.btnBackgroundOptions.destroy();
+      this.btnBackgroundCredits.destroy();
+      this.btnBackgroundQuit.destroy();
+      //this.btnToTrack.destroy();
+   }
+}

src/ui/panelTunnelOptions.js

@@ -0,0 +1,298 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import PanelTunnelMainMenu from "./panelTunnelMainMenu.js";
+
+export default class PanelTunnelOptions {
+   constructor(_scene, _level, _returnPos) {
+      this.scene = _scene;
+      this.level = _level;
+      this.returnPos = _returnPos;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x1d2b53, 0.9); //0x000000 black - 0xa7d254 green - 0x1d2b53 blue - 0x29adff lightblue
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+
+      this.btnBack = new Button(this.scene, { x: -176, y: -112 + 34 }, "atlasUi", "sprBtn00", "CANCEL", false, () => {
+         this.level.state = this.level.states.main;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelMainMenu(this.scene, this.level);
+         });
+         this.destroy();
+      });
+
+      this.btnApply = new Button(this.scene, { x: -176, y: -112 }, "atlasUi", "sprBtn00", "APPLY", false, () => {
+         this.scene.saveOptions();
+         this.level.state = this.level.states.main;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelMainMenu(this.scene, this.level);
+         });
+         this.destroy();
+      });
+
+      this.btnAUX = new Button(this.scene, { x: 176 + 32 - 132, y: -112 }, "atlasUi", "sprBtn00mid", "AUX", false, () => {
+         this.contAUX.alpha = 1;
+         this.contGFX.alpha = 0;
+         this.contCTL.alpha = 0;
+         this.activeContainer = this.contAUX;
+      });
+      this.btnGFX = new Button(this.scene, { x: 176 + 32 - 66, y: -112 }, "atlasUi", "sprBtn00mid", "GFX", false, () => {
+         this.contAUX.alpha = 0;
+         this.contGFX.alpha = 1;
+         this.contCTL.alpha = 0;
+         this.activeContainer = this.contGFX;
+      });
+      this.btnCTL = new Button(this.scene, { x: 176 + 32, y: -112 }, "atlasUi", "sprBtn00mid", "CTRL", false, () => {
+         this.contAUX.alpha = 0;
+         this.contGFX.alpha = 0;
+         this.contCTL.alpha = 1;
+         this.activeContainer = this.contCTL;
+      });
+
+      this.contAUX = this.scene.add.container(0, 0);
+      this.contGFX = this.scene.add.container(0, 0);
+      this.contGFX.alpha = 0;
+      this.contCTL = this.scene.add.container(0, 0);
+      this.contCTL.alpha = 0;
+      this.activeContainer = this.contAUX;
+
+      //sound options
+      this.sliMaster = new SliderHorizontal(this.scene, { x: 0, y: -34 }, OPTIONS.sound.master, 128);
+      this.sliMaster.move(0, -34);
+      this.sliMaster.releaseFunc = () => {
+         Howler.volume(this.sliMaster.value);
+         this.scene.soundManager.playSpecificSound(this.scene.soundManager.raceAnnouncer, 0);
+         OPTIONS.sound.master = this.sliMaster.value;
+      }
+      this.btnMaster = new Button(this.scene, { x: -128, y: -34 }, "atlasUi", "sprBtn08", "master:", false, () => {
+         if (this.sliMaster.value > 0) {
+            this.sliMaster.setTo(0);
+         } else {
+            this.sliMaster.setTo(1);
+         }
+      });
+      this.sliMaster.addToContainer(this.contAUX);
+      this.btnMaster.addToContainer(this.contAUX);
+
+      this.sliSound = new SliderHorizontal(this.scene, { x: 0, y: 0 }, OPTIONS.sound.sfx, 128);
+      this.sliSound.move(0, 0);
+      this.sliSound.releaseFunc = () => {
+         for (let s of this.scene.soundManager.soundRef) {
+            s.howlGroup.volume(this.sliSound.value);
+         }
+         this.scene.soundManager.playSpecificSound(this.scene.soundManager.raceAnnouncer, 0);
+         OPTIONS.sound.sfx = this.sliSound.value;
+      }
+      this.btnSound = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn08", "sound:", false, () => {
+         if (this.sliSound.value > 0) {
+            this.sliSound.setTo(0);
+         } else {
+            this.sliSound.setTo(1);
+         }
+      });
+      this.sliSound.addToContainer(this.contAUX);
+      this.btnSound.addToContainer(this.contAUX);
+
+      this.sliMusic = new SliderHorizontal(this.scene, { x: 0, y: 34 }, OPTIONS.sound.music, 128);
+      this.sliMusic.move(0, 34);
+      this.sliMusic.releaseFunc = () => {
+         //Howler.volume(this.sliMusic.value);
+         for (let s of this.scene.soundManager.musicRef) {
+            s.howlGroup.volume(this.sliMusic.value);
+         }
+         OPTIONS.sound.music = this.sliMusic.value;
+      }
+      this.btnMusic = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn08", "music:", false, () => {
+         if (this.sliMusic.value > 0) {
+            this.sliMusic.setTo(0);
+         } else {
+            this.sliMusic.setTo(1);
+         }
+      });
+      this.sliMusic.addToContainer(this.contAUX);
+      this.btnMusic.addToContainer(this.contAUX);
+
+      //graphical options
+      this.sliScreenshake = new SliderHorizontal(this.scene, { x: 0, y: -34 }, OPTIONS.effects.screenshake, 128);
+      this.sliScreenshake.move(0, -34);
+      this.sliScreenshake.releaseFunc = () => {
+         OPTIONS.effects.screenshake = this.sliScreenshake.value;
+      }
+      this.btnScreenshake = new Button(this.scene, { x: -128, y: -34 }, "atlasUi", "sprBtn00mid", "screenshake:", false, () => {
+         if (this.sliScreenshake.value > 0) {
+            this.sliScreenshake.setTo(0);
+         } else {
+            this.sliScreenshake.setTo(1);
+         }
+      });
+      this.sliScreenshake.addToContainer(this.contGFX);
+      this.btnScreenshake.addToContainer(this.contGFX);
+
+      this.btnFullscreen = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn00mid", "fullscreen", false, () => {
+         if (document.fullscreen === false) {
+            if (document.documentElement.requestFullscreen) {
+               document.documentElement.requestFullscreen();
+            } else if (document.documentElement.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
+               document.documentElement.msRequestFullscreen();
+            } else if (document.documentElement.webkitRequestFullscreen) {  // iOS Safari
+               document.documentElement.webkitRequestFullscreen();
+            }
+         } else {
+            if (document.exitFullscreen) {
+               document.exitFullscreen();
+            } else if (document.msExitFullscreen) {
+               document.msExitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+               document.webkitExitFullscreen();
+            }
+         }
+      });
+      this.btnFullscreen.addToContainer(this.contGFX);
+
+      this.btnHUD = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn00mid", "HUD", true, () => {
+         if (OPTIONS.config.hideUI === false) {
+            OPTIONS.config.hideUI = true;
+            this.btnHUDTxt.setText("hidden");
+         } else {
+            OPTIONS.config.hideUI = false;
+            this.btnHUDTxt.setText("active");
+         }
+      });
+      this.btnHUD.toggleOffFunc = this.btnHUD.func;
+      this.btnHUD.addToContainer(this.contGFX);
+      this.btnHUDTxt = this.scene.add.bitmapText(this.btnHUD.pos.x + 128, this.btnHUD.pos.y, "uiFont", "active", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnHUDTxt.depth = 10000;
+      this.contGFX.add(this.btnHUDTxt);
+      if (OPTIONS.config.hideUI === false) {
+         this.btnHUD.active = true;
+         this.btnHUDTxt.setText("active");
+      } else {
+         this.btnHUD.active = false;
+         this.btnHUDTxt.setText("hidden");
+      }
+
+      //control options
+      this.sliCursorspeed = new SliderHorizontal(this.scene, { x: 0, y: 0 }, OPTIONS.controls.mouse.sensitivity / 6, 128);
+      this.sliCursorspeed.move(0, 0);
+      this.sliCursorspeed.releaseFunc = () => {
+         OPTIONS.controls.mouse.sensitivity = Math.max(0.1, this.sliCursorspeed.value * 6);
+      }
+      this.btnCursorspeed = new Button(this.scene, { x: -128, y: 0 }, "atlasUi", "sprBtn00mid", "mouse sensitivity:", false, () => {
+         if (this.sliCursorspeed.value > 0) {
+            this.sliCursorspeed.setTo(0);
+         } else {
+            this.sliCursorspeed.setTo(1);
+         }
+      });
+      this.sliCursorspeed.addToContainer(this.contCTL);
+      this.btnCursorspeed.addToContainer(this.contCTL);
+
+      this.btnRadar = new Button(this.scene, { x: -128, y: 34 }, "atlasUi", "sprBtn00mid", "radar", true, () => {
+         if (OPTIONS.config.collisionRadar === 0) {
+            OPTIONS.config.collisionRadar = 1;
+            this.btnRadarTxt.setText("active");
+         } else {
+            OPTIONS.config.collisionRadar = 0;
+            this.btnRadarTxt.setText("off");
+         }
+      });
+      this.btnRadar.toggleOffFunc = this.btnRadar.func;
+      this.btnRadar.addToContainer(this.contCTL);
+      this.btnRadarTxt = this.scene.add.bitmapText(this.btnRadar.pos.x + 128, this.btnRadar.pos.y, "uiFont", "active", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.btnRadarTxt.depth = 10000;
+      this.contCTL.add(this.btnRadarTxt);
+      if (OPTIONS.config.collisionRadar === 0) {
+         this.btnRadar.active = false;
+         this.btnRadarTxt.setText("off");
+      } else {
+         this.btnRadar.active = true;
+         this.btnRadarTxt.setText("active");
+      }
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      if (this.lockButtons <= false) {
+         this.btnBack.update();
+         this.btnApply.update();
+         this.btnAUX.update();
+         this.btnGFX.update();
+         this.btnCTL.update();
+
+         switch (this.activeContainer) {
+            case this.contAUX:
+               this.btnMaster.update();
+               this.sliMaster.update();
+               this.btnSound.update();
+               this.sliSound.update();
+               this.btnMusic.update();
+               this.sliMusic.update();
+               break;
+            case this.contGFX:
+               this.btnScreenshake.update();
+               this.sliScreenshake.update();
+               this.btnFullscreen.update();
+               this.btnHUD.update();
+               break;
+            case this.contCTL:
+               this.btnCursorspeed.update();
+               this.sliCursorspeed.update();
+               this.btnRadar.update();
+               break;
+            default:
+               break;
+         }
+
+
+
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.btnBack.destroy();
+      this.btnApply.destroy();
+
+      this.btnAUX.destroy();
+      this.btnGFX.destroy();
+      this.btnCTL.destroy();
+
+      this.btnMaster.destroy();
+      this.sliMaster.destroy();
+      this.btnSound.destroy();
+      this.sliSound.destroy();
+      this.btnMusic.destroy();
+      this.sliMusic.destroy();
+
+      this.btnScreenshake.destroy();
+      this.sliScreenshake.destroy();
+      this.btnFullscreen.destroy();
+      this.btnHUD.destroy();
+      this.btnHUDTxt.destroy();
+
+      this.btnCursorspeed.destroy();
+      this.sliCursorspeed.destroy();
+      this.btnRadar.destroy();
+      this.btnRadarTxt.destroy();
+
+      this.contAUX.destroy();
+      this.contGFX.destroy();
+      this.contCTL.destroy();
+   }
+}

src/ui/panelTunnelSelector.js

@@ -0,0 +1,310 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import PanelTunnelMainMenu from "./panelTunnelMainMenu.js";
+import PanelTunnelTrackSelection from "./panelTunnelTrackSelection.js";
+
+export default class PanelTunnelSelector {
+   constructor(_scene, _level, _returnPos) {
+      this.scene = _scene;
+      this.level = _level;
+      this.returnPos = _returnPos;
+
+      //this.bgGraphics = this.scene.add.graphics();
+      //this.bgGraphics.fillStyle(0x000000, 0.1);
+      //this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      //this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      //this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      //INFO IMPORTANT keep this up to date with level aiShips or pull data from level
+      this.infos = [
+         {
+            logo: this.scene.add.sprite(198, -38, "atlasAdverts", "sprLogoArashi"),
+            text: "The Arashi Corporation is a thin shadow of its former self. Once a leader in microchip technology and tunneling and mining, it was dismantled and bought up by more powerful corporations. Nowadays it only lives as a small racing team, with pride but without much financial resources.",
+            txt: this.scene.add.bitmapText(-240 + 8, -112 + 34, "uiFont", "", 14, 0),
+         },
+         {
+            logo: this.scene.add.sprite(198, -38, "atlasAdverts", "sprLogoDaito"),
+            text: "Daito are unattainably elegant, fast and rich. They're actually just taking part in Formula Zero for fun to pass the time underground as they are coming from a control district. However, they enjoy humiliating the other drivers.",
+            txt: this.scene.add.bitmapText(-240 + 8, -112 + 34, "uiFont", "", 14, 0),
+         },
+         {
+            logo: this.scene.add.sprite(198, -38, "atlasAdverts", "sprLogoTinnemann"),
+            text: "In principle, Tinnemann only drives in one direction: straight ahead. They are the bullies of the track. The Tinnemann Group is run in an extremely authoritarian manner and the residents of this district are used to being able to obtain small amenities only through sheer force. Anyone who doesn't move out of their path will be pushed out of their way.",
+            txt: this.scene.add.bitmapText(-240 + 8, -112 + 34, "uiFont", "", 14, 0),
+         },
+         {
+            logo: this.scene.add.sprite(198, -38, "atlasAdverts", "sprLogoHapton"),
+            text: "Hampton Systems manufactured tanks in the great war, then the scavenging vehicles and finally the tunneling machines. Now they are converting their powerful machines into equally powerful racing vehicles. War may change, but good machining does not...",
+            txt: this.scene.add.bitmapText(-240 + 8, -112 + 34, "uiFont", "", 14, 0),
+         },
+         {
+            logo: this.scene.add.sprite(198, -38, "atlasAdverts", "radioactive04"),
+            text: "unknown information",
+            txt: this.scene.add.bitmapText(-240 + 8, -112 + 34, "uiFont", "", 14, 0),
+         },
+      ];
+      for (let i of this.infos) {
+         i.logo.alpha = 0;
+         i.txt.alpha = 0;
+         i.txt.maxWidth = 180;
+         i.txt.setText(i.text);
+         //i.txt.setTintFill(0x1d2b53)
+         i.txt.setOrigin(0);
+         i.txt.setLetterSpacing(0);
+      }
+
+      this.character = {
+         ghostReverse: this.scene.add.sprite(512, 0, "charSheetRoki", "rokiStandIdle0000"),
+         ghost: this.scene.add.sprite(198, 0, "charSheetRoki", "rokiStandIdle0000"),
+         sprite: this.scene.add.sprite(198, 0, "charSheetRoki", "rokiStandIdle0000"),
+         name: this.scene.add.bitmapText(198, 80, "racer", "Roki", 16, 0).setOrigin(0.5).setLetterSpacing(0),
+         dir: 0,
+         atlas: "charSheetRoki",
+         asset: "rokiStandIdle000",
+         pos: {x: 198, y: 0}
+      };
+      this.character.ghostReverse.y = 512;
+      this.character.ghostReverse.setScale(10);
+      this.character.ghostReverse.alpha = 0.25;
+
+      this.characterTweenIn = this.scene.tweens.add({
+         targets: this.character.sprite,
+         x: { from: -256, to: 198 },
+         ease: "Cubic",
+         repeat: 0,
+         duration: 1000,
+         persist: true,
+         onRestart: () => { },
+         onUpdate: () => {},
+         onComplete: (_ev) => {/*this.characterTweenGhost.restart();*/}
+      }).pause();
+      this.characterTweenGhostReverse = this.scene.tweens.add({
+         targets: this.character.ghostReverse,
+         x: { from: 512, to: -256 },
+         alpha: { from: 1, to: 0 },
+         ease: "Linear",
+         repeat: 0,
+         duration: 2000,
+         persist: true,
+      }).pause();
+      this.characterTweenGhost = this.scene.tweens.add({
+         targets: this.character.ghost,
+         alpha: {from: 1, to: 0},
+         scale: 4,
+         ease: "Linear",
+         repeat: 0,
+         duration: 500,
+         persist: true,
+      }).pause();
+
+      /*
+      this.zoomTween = this.scene.tweens.add({
+          targets: this,
+          zoom: 0.0001,
+          // x: '+=1',
+          // x: '-=1',
+          // x: '*=1',
+          // x: '/=1',
+          // x: 'random(0.25, 0.75)',
+          // x: 'int(10, 100)',
+          // x: [100, 300, 200, 600],
+          // x: { from: 0, to: 1 },
+          // x: { start: 0, to: 1 },
+          // x: { start: value0, from: value1, to: value2 },
+          // x: {
+          //      getActive: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },
+          //      getStart: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; },
+          //      getEnd: function (target, key, value, targetIndex, totalTargets, tween) { return newValue; }
+          // },
+          ease: 'Linear',       // 'Cubic', 'Elastic', 'Bounce', 'Back'
+          duration: 1000,
+          repeat: 0,            // -1: infinity
+          yoyo: true,
+          //persist: true,
+          // interpolation: null,
+          onYoyo: () => {
+              console.log(this)
+          }
+      }).pause();
+      */
+
+
+      this.btnBack = new Button(this.scene, { x: -176, y: -112 }, "atlasUi", "sprBtnNFS01", "BACK", false, () => {
+         this.level.state = this.level.states.main;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         //this.level.playerShip.speed = 10;
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelMainMenu(this.scene, this.level);
+         });
+         this.destroy();
+      });
+      this.level.makeBtnNFS(this.btnBack);
+
+      this.btnTrackSelection = new Button(this.scene, { x: -176 + 128, y: -112 }, "atlasUi", "sprBtnNFS02", "TRACK SELECT", false, () => {
+         this.level.state = this.level.states.trackSelection;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         //this.level.playerShip.speed = 10;
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelTrackSelection(this.scene, this.level);
+         });
+         this.destroy();
+      });
+      this.level.makeBtnNFS(this.btnTrackSelection);
+
+      //this.btnToTrack = new Button(this.scene, { x: 0, y: 128-16 }, "atlasUi", "sprBtn00", "DIRECT TRACK", false, () => {
+      this.btnToTrack = new Button(this.scene, { x: -176 + 256, y: -112 }, "atlasUi", "sprBtnNFS00", "START RACE", false, () => {
+         this.scene.soundManager.stopSound(this.level.mainMusic);
+         this.scene.player.panel = null;
+
+         this.scene.player.jumpToPosition({ x: 0, y: 0, z: 0 });
+         this.scene.loadLevel("quadRingsTest", { track: this.level.trackSelected, raceMode: 5, maxLaps: 5, startFromHangar: false, playerShipModel: this.level.playerShip.modelFile });
+         //this.scene.loadLevel("quadRingsTest", { track: 1, raceMode: 0, maxLaps: 99, startFromHangar: false, playerShipModel: this.level.playerShip.modelFile });
+         //this.scene.loadLevel("quadRingsTest", { track: 4, raceMode: 5, maxLaps: 99, startFromHangar: false, playerShipModel: this.level.playerShip.modelFile });
+
+         //this.scene.player.setMode(PLAYERMODE.LOOK);
+         this.scene.playerWalk.setVisibility(false);
+         this.scene.player.panel = null;
+         this.destroy();
+      });
+      this.level.makeBtnNFS(this.btnToTrack);
+
+      this.btnDeco00 = new Button(this.scene, { x: 208-48, y: -112 }, "atlasUi", "sprBtnSlider00", "", false, () => {});
+      this.level.makeBtnNFS(this.btnDeco00);
+      this.btnDeco00.sprite.setScale(2);
+
+      this.btnDeco01 = new Button(this.scene, { x: 208 - 11, y: -112 }, "atlasUi", "sprBtnNFS07", "//", false, () => {});
+      this.level.makeBtnNFS(this.btnDeco01);
+      this.btnDeco01.sprite.setScale(0.5, 1);
+
+      this.btnDeco02 = new Button(this.scene, { x: 208 + 22, y: -112 }, "atlasUi", "sprBtnSlider00", "", false, () => {});
+      this.level.makeBtnNFS(this.btnDeco02);
+      this.btnDeco02.sprite.setScale(2);
+
+      this.btnShipNext = new Button(this.scene, { x: 208, y: 128 - 16 }, "atlasUi", "sprBtnNFS04", ">>>", false, () => {
+         this.level.playerShip.speed = this.level.speed.switching;
+         this.level.shipSelected += 1;
+         if (this.level.shipSelected >= this.level.aiShips.length) {
+            this.level.shipSelected -= this.level.aiShips.length;
+         }
+         this.level.playerShip = this.level.aiShips[this.level.shipSelected];
+         this.level.playerShip.speed = this.level.speed.switching;
+         this.showInfo(this.level.shipSelected);
+      });
+      this.level.makeBtnNFS(this.btnShipNext);
+
+      this.btnShipPrev = new Button(this.scene, { x: -208, y: 128 - 16 }, "atlasUi", "sprBtnNFS05", "<<<", false, () => {
+         this.level.playerShip.speed = this.level.speed.switching;
+         this.level.shipSelected -= 1;
+         if (this.level.shipSelected < 0) {
+            this.level.shipSelected += this.level.aiShips.length;
+         }
+         this.level.playerShip = this.level.aiShips[this.level.shipSelected];
+         this.level.playerShip.speed = this.level.speed.switching;
+         this.showInfo(this.level.shipSelected);
+      });
+      this.level.makeBtnNFS(this.btnShipPrev);
+
+      this.btnShipInfo = new Button(this.scene, { x: -208 + 64, y: 128 - 16 }, "atlasUi", "sprBtnNFS06", "NFO", false, () => {
+         //alert("show racer info")
+      });
+      this.level.makeBtnNFS(this.btnShipInfo);
+
+      this.lockButtons = true;
+      this.showInfo(this.level.shipSelected);
+   }
+
+   showInfo(_no) {
+      for (let i of this.infos) {
+         i.logo.alpha = 0;
+         i.txt.alpha = 0;
+      }
+      this.infos[_no % 5].logo.alpha = 1;
+      this.infos[_no % 5].txt.alpha = 1;
+
+      this.character.atlas = this.level.aiShips[this.level.shipSelected].character.promoAtlas;
+      this.character.asset = this.level.aiShips[this.level.shipSelected].character.promoAsset;
+      this.character.ghost.setTexture(this.character.atlas, this.character.asset + "0");
+      this.character.ghost.setScale(1);
+      this.character.ghost.alpha = 0;
+      this.character.ghost.setTintFill(0xffffff);
+      this.character.ghostReverse.setTexture(this.character.atlas, this.character.asset + "0");
+
+      if (this.level.aiShips[this.level.shipSelected].character.locked === true) {
+         this.character.sprite.setTintFill(0x000000);
+         this.character.ghostReverse.setTintFill(0x000000);
+         this.character.name.setText("locked");
+         this.btnToTrack.switchState(this.btnToTrack.states.off);
+         this.btnShipInfo.switchState(this.btnShipInfo.states.off);
+      } else {
+         this.character.sprite.clearTint();
+         this.character.ghostReverse.clearTint();
+         this.character.name.setText(this.level.aiShips[this.level.shipSelected].character.name);
+      }
+
+      this.characterTweenIn.restart();
+      this.characterTweenGhost.restart();
+      this.characterTweenGhostReverse.restart();
+
+      //console.log(this.btnToTrack.state)
+   }
+
+   update() {
+      //this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      //this.bgGrid.update();
+
+
+      if (this.lockButtons <= false) {
+         if(this.character !== null){
+            this.character.dir += 0.06 * this.scene.dt;
+            if (this.character.dir > 8) {
+               this.character.dir -= 8;
+            }
+            this.character.sprite.setTexture(this.character.atlas, this.character.asset + String(Math.floor(this.character.dir % 8)));
+         }
+
+         this.btnBack.update();
+         this.btnTrackSelection.update();
+         if (this.level.aiShips[this.level.shipSelected].character.locked === false) {
+            this.btnToTrack.update();
+            this.btnShipInfo.update();
+         }
+         this.btnShipNext.update();
+         this.btnShipPrev.update();
+      } else {
+         this.lockButtons = false;
+      }
+   }
+
+   destroy() {
+      //this.bgGraphics.destroy();
+      //this.bgGrid.destroy();
+      for (let i of this.infos) {
+         i.logo.destroy();
+         i.txt.destroy();
+      }
+      this.character.sprite.destroy();
+      this.character.ghost.destroy();
+      this.character.ghostReverse.destroy();
+      this.character.name.destroy();
+      this.character = null;
+
+      this.scene.tweens.remove(this.characterTweenGhost);
+      this.scene.tweens.remove(this.characterTweenGhostReverse);
+      this.scene.tweens.remove(this.characterTweenIn);
+
+      this.btnBack.destroy();
+      this.btnTrackSelection.destroy();
+      this.btnToTrack.destroy();
+      this.btnShipNext.destroy();
+      this.btnShipInfo.destroy();
+      this.btnShipPrev.destroy();
+
+      this.btnDeco00.destroy();
+      this.btnDeco01.destroy();
+      this.btnDeco02.destroy();
+   }
+}

src/ui/panelTunnelTrackSelection.js

@@ -0,0 +1,408 @@
+import Button from "./button.js";
+import { SliderHorizontal } from "./slider.js";
+import MovingGrid from "./movingGrid.js";
+import PanelTunnelSelector from "./panelTunnelSelector.js";
+
+export default class PanelTunnelTrackSelection {
+   constructor(_scene, _level, _returnPos) {
+      this.scene = _scene;
+      this.level = _level;
+      this.returnPos = _returnPos;
+
+      this.bgGraphics = this.scene.add.graphics();
+      this.bgGraphics.fillStyle(0x1d2b53, 0.9); //0x000000 black - 0xa7d254 green - 0x1d2b53 blue - 0x29adff lightblue
+      this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+      this.bgGrid = new MovingGrid(this.scene, this.scene.game.config.width, this.scene.game.config.height, 32);
+      this.bgGrid.addPointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+
+      this.trackBtnSelected = 0;
+      this.trackBtnSelectedOffset = 0;
+
+      this.trackGraphics = this.scene.add.graphics();
+      this.trackGraphics.depth = 10000;
+      this.trackMap = {
+         spline: [],
+         dir: { yaw: 0, pitch: 0, roll: 0 },
+         spd: 0.01,
+         origin: { x: 0, y: 0 },
+         zoom: 64,
+         bounds: { p0: { x: 0, y: 0 }, p1: { x: 0, y: 0 } },
+         racer: 0,
+         oblique: true
+      }
+
+      this.btnBack = new Button(this.scene, { x: -176-32, y: -112 }, "atlasUi", "sprBtn00mid", "BACK", false, () => {
+         this.level.state = this.level.states.shipSelection;
+         this.level.lerper = 100;
+         this.level.calculateLerpStep();
+         this.level.actions.push(() => {
+            this.scene.player.panel = new PanelTunnelSelector(this.scene, this.level);
+         });
+         this.destroy();
+      });
+
+      this.sliZoom = new SliderHorizontal(this.scene, { x: 0, y: 112 }, 0.75, 128);
+      this.sliZoom.move(0, -112);
+      this.sliZoom.changeFunc = () => {
+         this.trackMap.zoom = Math.max(1, (256 - this.sliZoom.value * 256));
+      }
+
+      this.btnTrackOblique = new Button(this.scene, { x: 176-64, y: -112 }, "atlasUi", "sprBtn00mid", "OBL", false, () => {
+         this.trackMap.oblique = !this.trackMap.oblique;
+         if (this.trackMap.oblique === true) { this.btnTrackOblique.txt.setText("OBL"); }
+         else { this.btnTrackOblique.txt.setText("D3D"); }
+      });
+
+
+      this.btnsTrack = [];
+
+      this.btnTrackScrollUp = new Button(this.scene, { x: 176+32, y: -112 }, "atlasUi", "sprBtn08", "<<<", false, () => {
+         if (this.trackBtnSelected > 1) {
+            this.trackBtnSelected -= 1;
+            this.toggleOffTrackButtons();
+            this.btnsTrack[this.trackBtnSelected].simulateClick();
+         } else {
+            this.cycleTrackButtons(-1);
+         }
+         this.loadTrackMap(this.btnsTrack[this.trackBtnSelected].data.trackId);
+      });
+      this.btnTrackScrollUp.txt.angle = 90;
+
+      this.btnTrack00 = new Button(this.scene, { x: 176, y: -68 }, "atlasUi", "sprBtn01", "METRO LOOP", true, () => {
+         this.toggleOffTrackButtons();
+         this.btnTrack00.active = true;
+         this.trackBtnSelected = 0;
+         this.loadTrackMap(this.btnTrack00.data.trackId);
+      });
+      this.btnTrack00.useOtherTextColor = true;
+      this.btnTrack00.data = {trackId: 0}
+      this.btnsTrack.push(this.btnTrack00);
+
+      this.btnTrack01 = new Button(this.scene, { x: 176, y: -34 }, "atlasUi", "sprBtn01", "ATOMIC SEWERS", true, () => {
+         this.toggleOffTrackButtons();
+         this.btnTrack01.active = true;
+         this.trackBtnSelected = 1;
+         this.loadTrackMap(this.btnTrack01.data.trackId);
+      });
+      this.btnTrack01.useOtherTextColor = true;
+      this.btnTrack01.data = {trackId: 1}
+      this.btnsTrack.push(this.btnTrack01);
+
+      this.btnTrack02 = new Button(this.scene, { x: 176, y: 0 }, "atlasUi", "sprBtn01", "CONSTRUCTION", true, () => {
+         this.toggleOffTrackButtons();
+         this.btnTrack02.active = true;
+         this.trackBtnSelected = 2;
+         this.loadTrackMap(this.btnTrack02.data.trackId);
+      });
+      this.btnTrack02.useOtherTextColor = true;
+      this.btnTrack02.data = {trackId: 2}
+      this.btnsTrack.push(this.btnTrack02);
+
+      this.btnTrack03 = new Button(this.scene, { x: 176, y: 34 }, "atlasUi", "sprBtn01", "PIPELINE", true, () => {
+         this.toggleOffTrackButtons();
+         this.btnTrack03.active = true;
+         this.trackBtnSelected = 3;
+         this.loadTrackMap(this.btnTrack03.data.trackId);
+      });
+      this.btnTrack03.useOtherTextColor = true;
+      this.btnTrack03.data = {trackId: 3}
+      this.btnsTrack.push(this.btnTrack03);
+
+      this.btnTrack04 = new Button(this.scene, { x: 176, y: 68 }, "atlasUi", "sprBtn01", "VELOCIDROME", true, () => {
+         this.toggleOffTrackButtons();
+         this.btnTrack04.active = true;
+         this.trackBtnSelected = 4;
+         this.loadTrackMap(this.btnTrack04.data.trackId);
+      });
+      this.btnTrack04.useOtherTextColor = true;
+      this.btnTrack04.data = {trackId: 4}
+      this.btnsTrack.push(this.btnTrack04);
+
+      this.btnTrackScrollDown = new Button(this.scene, { x: 176+32, y: 112 }, "atlasUi", "sprBtn08", ">>>", false, () => {
+         if (this.trackBtnSelected < this.btnsTrack.length - 2) {
+            this.trackBtnSelected += 1;
+            this.toggleOffTrackButtons();
+            this.btnsTrack[this.trackBtnSelected].simulateClick();
+         } else {
+            this.cycleTrackButtons(1);
+         }
+         this.loadTrackMap(this.btnsTrack[this.trackBtnSelected].data.trackId);
+      });
+      this.btnTrackScrollDown.txt.angle = 90;
+
+
+
+      this.btnsTrack[this.trackBtnSelected].simulateClick();
+
+      this.lockButtons = true;
+   }
+
+   update() {
+      this.bgGrid.updatePointer("hand", this.scene.hand.pos.x, this.scene.hand.pos.y, 128);
+      this.bgGrid.update();
+
+      this.renderTrackMap(this.trackMap.oblique);
+
+      if (this.lockButtons <= false) {
+         this.btnBack.update();
+         this.sliZoom.update();
+         this.btnTrackOblique.update();
+         this.btnTrackScrollUp.update();
+         this.btnTrackScrollDown.update();
+         this.btnTrack00.update();
+         this.btnTrack01.update();
+         this.btnTrack02.update();
+         this.btnTrack03.update();
+         this.btnTrack04.update();
+      } else {
+         this.lockButtons = false;
+      }
+
+      this.level.trackSelected = this.btnsTrack[this.trackBtnSelected].data.trackId;
+   }
+
+   loadTrackMap(_trackId) {
+      this.level.trackPreview.loadTrack(_trackId, true);
+
+      this.trackMap.spline = [];
+      this.trackMap.origin = { x: 0, y: 0 }
+      this.trackMap.center = { x: 0, y: 0 }
+
+      let dim = { x0: 0, x1: 0, y0: 0, y1: 0 }
+      for (let i = 0; i < this.level.trackPreview.spline.length; i += 1) {
+         let s = this.level.trackPreview.spline[i];
+         dim.x0 = Math.min(s.x, dim.x0);
+         dim.y0 = Math.min(s.z, dim.y0);
+         dim.x1 = Math.max(s.x, dim.x1);
+         dim.y1 = Math.max(s.z, dim.y1);
+
+         this.trackMap.center.x += s.x;
+         this.trackMap.center.y += s.z;
+
+         this.trackMap.spline.push({
+            x: s.x * -1,
+            y: s.y,
+            z: s.z,
+            id: i,
+            type: 0
+         });
+      }
+
+      this.trackMap.bounds = {p0: {x: dim.x0, y: dim.y0}, p1: {x: dim.x1, y: dim.y1}}
+
+      this.trackMap.origin.x = ((dim.x0 + dim.x1) * -0.5);
+      this.trackMap.origin.y = ((dim.y0 + dim.y1) * -0.5);
+
+      for (let s of this.trackMap.spline) {
+         s.x -= this.trackMap.origin.x;
+         s.z += this.trackMap.origin.y;
+      }
+
+      //console.log(this.trackMap)
+   }
+
+   renderTrackMap(_oblique = true) {
+      this.trackGraphics.clear();
+      this.trackGraphics.lineStyle(3, 0xffffff, 1);
+      this.trackGraphics.fillStyle(0xffffff, 1);
+      //this.trackGraphics.beginPath();
+      this.trackGraphics.fillCircle(0, 0, 2);//origin
+
+      this.trackMap.racer += 1;
+      if (this.trackMap.racer >= this.trackMap.spline.length) {
+         this.trackMap.racer -= this.trackMap.spline.length;
+      }
+
+      this.trackMap.dir.yaw += 0.01;
+      let cos = Math.cos(this.trackMap.dir.yaw);
+      let sin = Math.sin(this.trackMap.dir.yaw);
+
+      if (_oblique === true) {
+         let firs = {x: 0, y: 0}
+         let prev = {x: 0, y: 0}
+         for (let i = 0; i < this.trackMap.spline.length; i += 1) {
+            let s = this.trackMap.spline[i];
+
+            let nx = (cos * s.x) + (sin * s.z);
+            let ny = s.y;
+            let nz = (cos * s.z) - (sin * s.x);
+
+            //3dize
+            nz = (nz * 0.5) + ny;
+
+            nx /= this.trackMap.zoom;
+            ny /= this.trackMap.zoom;
+            nz /= this.trackMap.zoom;
+
+            if (i === 0) {
+               firs.x = nx;
+               firs.y = nz;
+            }
+
+            if (i > 0) {
+               //this.trackGraphics.lineStyle(3, 0xffffff, 1 - Math.min(0.5, Math.max(0, Math.abs(ny) / 64)));
+               //this.trackGraphics.lineStyle(2, 0xffffff, Math.max(0.5, ((i + this.trackMap.racer) % 20) / 20));
+               //this.trackGraphics.lineStyle(2, 0xffffff, Math.max(0.5, (i % 20) / 20));
+               //if (i < this.trackMap.racer && i > this.trackMap.racer - 20) {
+               if (i - Math.floor(this.trackMap.racer) < 10 && i - Math.floor(this.trackMap.racer) > 0) {
+                  this.trackGraphics.lineStyle(2, 0xe60840, 1);//0xf79e00
+               } else {
+                  this.trackGraphics.lineStyle(2, 0xf8f2e6, 1);
+               }
+               this.trackGraphics.beginPath();
+               this.trackGraphics.moveTo(prev.x, prev.y);
+               this.trackGraphics.lineTo(nx, nz);
+               this.trackGraphics.strokePath();
+            }
+
+            let radius = 1;
+            if (i < 44) {
+               if(i % 2 === 0){
+                  this.trackGraphics.fillStyle(0x7d7195, 1);
+                  radius = 3;
+                  this.trackGraphics.fillCircle(nx, nz, radius);
+               } else {
+                  this.trackGraphics.fillStyle(0xf8f2e6, 1);
+               }
+            }else {
+               this.trackGraphics.fillStyle(0xf8f2e6, 1);// ((i + this.trackMap.racer) % 10 / 10));
+            }
+            if (i - Math.floor(this.trackMap.racer) < 10 && i - Math.floor(this.trackMap.racer) > 0) {
+               this.trackGraphics.fillStyle(0xe60840, 1 -(Math.floor(this.trackMap.racer) - i) * 0.1);
+               radius = (11 + (Math.floor(this.trackMap.racer) - i)) * 0.5;
+               this.trackGraphics.fillCircle(nx, nz, radius);
+            }
+            prev.x = nx;
+            prev.y = nz;
+         }
+
+         this.trackGraphics.beginPath();
+         this.trackGraphics.moveTo(prev.x / this.trackMap.zoom, prev.y / this.trackMap.zoom);
+         this.trackGraphics.lineTo(firs.x / this.trackMap.zoom, firs.y / this.trackMap.zoom);
+         this.trackGraphics.strokePath();
+      } else {
+         let firs = {x: 0, y: 0}
+         let prev = {x: 0, y: 0}
+         for (let i = 0; i < this.trackMap.spline.length; i += 1) {
+            let s = this.trackMap.spline[i];
+
+            let nx = (cos * s.x) + (sin * s.z);
+            let ny = s.y + 2000;
+            let nz = (cos * s.z) - (sin * s.x);
+            nz *= -1;
+            //3dize
+            //nz = (nz * 0.5) + ny;
+            let nzMod = nz + 10000;
+            if(nzMod > 0){
+               nx = (nx / nzMod) * 5000;
+               ny = (ny / nzMod) * 5000;
+            }
+
+            nx /= this.trackMap.zoom;
+            ny /= this.trackMap.zoom;
+            nz /= this.trackMap.zoom;
+
+            if (i === 0) {
+               firs.x = nx;
+               firs.y = ny;
+            }
+
+            if (i > 0) {
+               //this.trackGraphics.lineStyle(3, 0xffffff, 1 - Math.min(0.5, Math.max(0, Math.abs(ny) / 64)));
+               //this.trackGraphics.lineStyle(2, 0xffffff, Math.max(0.5, ((i + this.trackMap.racer) % 20) / 20));
+               //this.trackGraphics.lineStyle(2, 0xffffff, Math.max(0.5, (i % 20) / 20));
+               //if (i < this.trackMap.racer && i > this.trackMap.racer - 20) {
+               if (i - Math.floor(this.trackMap.racer) < 10 && i - Math.floor(this.trackMap.racer) > 0) {
+                  this.trackGraphics.lineStyle(2, 0xe60840, 1);//0xf79e00
+               } else {
+                  this.trackGraphics.lineStyle(2, 0xf8f2e6, 1);
+               }
+               this.trackGraphics.beginPath();
+               this.trackGraphics.moveTo(prev.x, prev.y);
+               this.trackGraphics.lineTo(nx, ny);
+               this.trackGraphics.strokePath();
+            }
+
+            let radius = 1;
+            if (i < 44) {
+               if(i % 2 === 0){
+                  this.trackGraphics.fillStyle(0x7d7195, 1);
+                  radius = 3;
+                  this.trackGraphics.fillCircle(nx, ny, radius);
+               } else {
+                  this.trackGraphics.fillStyle(0xf8f2e6, 1);
+               }
+            }else {
+               this.trackGraphics.fillStyle(0xf8f2e6, 1);// ((i + this.trackMap.racer) % 10 / 10));
+            }
+            if (i - Math.floor(this.trackMap.racer) < 10 && i - Math.floor(this.trackMap.racer) > 0) {
+               this.trackGraphics.fillStyle(0xe60840, 1 -(Math.floor(this.trackMap.racer) - i) * 0.1);
+               radius = (11 + (Math.floor(this.trackMap.racer) - i)) * 0.5;
+               this.trackGraphics.fillCircle(nx, ny, radius);
+            }
+
+            prev.x = nx;
+            prev.y = ny;
+         }
+
+         this.trackGraphics.beginPath();
+         this.trackGraphics.moveTo(prev.x / this.trackMap.zoom, prev.y / this.trackMap.zoom);
+         this.trackGraphics.lineTo(firs.x / this.trackMap.zoom, firs.y / this.trackMap.zoom);
+         this.trackGraphics.strokePath();
+      }
+   }
+
+   cycleTrackButtons(_amt) {
+      let arr = [this.btnTrack00, this.btnTrack01, this.btnTrack02, this.btnTrack03, this.btnTrack04];
+      if (_amt > 0) {
+         let help = arr[0].text;
+         let helpData = JSON.parse(JSON.stringify(arr[0].data));
+         for (let i = 0; i < arr.length - 1; i++){
+            arr[i].txt.setText(arr[i + 1].text);
+            arr[i].text = arr[i + 1].text;
+            arr[i].data = arr[i + 1].data;
+         }
+         arr[4].txt.setText(help);
+         arr[4].text = help;
+         arr[4].data = helpData;
+      } else if (_amt < 0) {
+         let help = arr[4].text;
+         let helpData = JSON.parse(JSON.stringify(arr[4].data));
+         for (let i = arr.length - 1; i > 0; i--){
+            arr[i].txt.setText(arr[i - 1].text);
+            arr[i].text = arr[i - 1].text;
+            arr[i].data = arr[i - 1].data;
+         }
+         arr[0].txt.setText(help);
+         arr[0].text = help;
+         arr[0].data = helpData;
+      }
+   }
+
+   toggleOffTrackButtons() {
+      for (let b of this.btnsTrack) {
+         if (b.active === true) {
+            b.simulateClick(false);
+         }
+      }
+   }
+
+   destroy() {
+      this.bgGraphics.destroy();
+      this.bgGrid.destroy();
+
+      this.trackGraphics.destroy();
+
+      this.btnBack.destroy();
+      this.sliZoom.destroy();
+      this.btnTrackOblique.destroy();
+      this.btnTrackScrollUp.destroy();
+      this.btnTrackScrollDown.destroy();
+      this.btnTrack00.destroy();
+      this.btnTrack01.destroy();
+      this.btnTrack02.destroy();
+      this.btnTrack03.destroy();
+      this.btnTrack04.destroy();
+   }
+}

src/ui/panelWakeUp.js

@@ -0,0 +1,74 @@
+export default class PanelWakeUp{
+    constructor(_scene, _text = "") {
+        this.scene = _scene;
+
+        //stop use click clicking immediatly again and eg hit the back btn
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.75);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+
+        this.bgGraphics.beginPath();
+        this.bgGraphics.lineStyle(1, 0xffffff);
+        this.bgGraphics.moveTo(-128, -16);
+        this.bgGraphics.lineTo(128, -16);
+        this.bgGraphics.strokePath();
+
+        this.eyelidLow = this.scene.add.sprite(0, 0, "atlasAll", "texStone01b");
+        this.eyelidLow.setScale(this.scene.game.config.width / 32, this.scene.game.config.height / 32);
+        this.eyelidLow.alpha = 0.25;
+        this.eyelidUp = this.scene.add.sprite(0, 0, "atlasAll", "texStone01b");
+        this.eyelidUp.rotation = Math.PI;
+        this.eyelidUp.setScale(this.scene.game.config.width / 32, this.scene.game.config.height / 32);
+        this.eyelidUp.alpha = 0.25;
+
+        this.text = _text;
+        if(_text === ""){
+            this.text = "Wakey, Wakey, mon ami!";
+        }
+
+        this.header = this.scene.add.bitmapText(0, -32, "uiFont", this.text, 16, 0).setOrigin(0.5);
+        this.header.depth = 10000;
+
+        this.tweenBg = this.scene.add.tween({
+            targets: this.bgGraphics,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Cubic.Out,
+            onComplete: () => {
+                this.destroy();
+                this.scene.player.panel = null;
+                this.scene.player.showUI();
+            }
+        })
+
+        this.tweenHeader = this.scene.add.tween({
+            targets: this.header,
+            alpha: 0,
+            delay: 1500,
+            duration: 2500,
+            ease: Phaser.Math.Easing.Quintic.Out,
+            onComplete: () => {
+                
+            }
+        })
+    }
+
+    update(){
+        this.eyelidLow.y = (1 - this.header.alpha) * this.scene.game.config.height;
+        this.eyelidUp.y = (1 - this.header.alpha) * -this.scene.game.config.height;
+    }
+
+    destroy(){
+        //this.tweenBg.destroy();
+        //this.tweenHeader.destroy();
+        this.bgGraphics.destroy();
+        this.header.destroy();
+        this.eyelidLow.destroy();
+        this.eyelidUp.destroy();
+    }
+}

src/ui/panelWelcome.js

@@ -0,0 +1,55 @@
+import Button from "./button.js";
+import {SliderHorizontal, SliderVertical} from "./slider.js";
+
+export default class PanelWelcome{
+    constructor(_scene) {
+        this.scene = _scene;
+
+        //stop use click clicking immediatly again and eg hit the back btn
+        this.scene.hand.justPressed = false;
+        this.scene.hand.pressed = false;
+        this.scene.hand.justReleased = false;
+
+        this.bgGraphics = this.scene.add.graphics();
+        this.bgGraphics.fillStyle(0x000000, 0.9);
+        this.bgGraphics.fillRect(this.scene.left, this.scene.top, this.scene.game.config.width, this.scene.game.config.height);
+        /*
+        this.bgSprite = this.scene.add.sprite(0, this.scene.bottom - (25 * 4), "klimtUI01");
+        this.bgSprite.setScale(4);
+        this.bgSpriteOver = this.scene.add.sprite(0, this.scene.bottom - (40 * 4), "klimtUI02");
+        this.bgSpriteOver.setScale(4);
+        */
+
+        let btnPos = { x: 0, y: this.scene.bottom - (25 * 4) };
+        if(isMobile === true){
+            btnPos.y = 155;
+        }
+        this.btnPlay = new Button(this.scene, { x: btnPos.x, y: btnPos.y }, "atlasUi", "sprBtn00Invisible", "START GAME", false, () => {
+            this.destroy();
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+        });
+
+        
+        this.btnToEditor = new Button(this.scene, { x: this.scene.left + 64, y: this.scene.bottom - 24 }, "atlasUi", "sprBtn01", "Editor", false, () => {
+            //$("#optionbox").hide();
+            //this.scene.scene.start("Scn3d", { level: "modelBuilder" });
+            this.destroy();
+            this.scene.player.setMode(PLAYERMODE.LOOK);
+            this.scene.player.panel = null;
+            this.scene.loadLevel("modelBuilder");
+        });
+        
+    }
+
+    update(){
+        this.btnPlay.update();
+        this.btnToEditor.update();
+    }
+
+    destroy(){
+        this.bgGraphics.destroy();
+        this.btnPlay.destroy();
+        this.btnToEditor.destroy();
+    }
+}

src/ui/racing/times.js

@@ -0,0 +1,5 @@
+export default class RaceTimes{
+   constructor(){
+      
+   }
+}

src/ui/racing/ui.js

@@ -0,0 +1,527 @@
+export default class UI {
+   constructor(_scene, _level) {
+      this.scene = _scene;
+      this.level = _level;
+      this.hidden = false;
+      this.rumbling = false;
+      this.rumble = {
+         intensity: {
+            x: 1,
+            y: 2
+         },
+         time: 0
+      }
+      this.scrape = {
+         isScraping: false,
+         amount: 0
+      }
+      this.heat = {
+         amount: 0
+      }
+
+      this.container = this.scene.add.container(0, 0);
+
+      //cockpit
+      this.cockpit = this.scene.add.sprite(0, 200, "sprCockpitMockup");
+      this.cockpit.depth = 9997;
+      this.cockpit.alpha = 0;
+      this.container.add(this.cockpit);
+
+      //vignette borders
+      this.vignetteScrape = this.scene.add.sprite(0, 0, "atlasUi", "sprUiTunnelBorderScrape");
+      this.vignetteScrape.depth = 9998;
+      this.vignetteScrape.setScale(this.scene.game.config.width / 16, this.scene.game.config.height / 64);
+      this.vignetteScrape.setTint(0xffa300);
+      this.container.add(this.vignetteScrape);
+
+      this.vignetteHeat = this.scene.add.sprite(0, 0, "atlasUi", "sprUiTunnelBorderHeat00");
+      this.vignetteHeat.depth = 9998;
+      this.vignetteHeat.setScale(this.scene.game.config.width / 16, this.scene.game.config.height / 64);
+      this.vignetteHeat.setTint(0xffa300);
+      this.container.add(this.vignetteHeat);
+
+      //texts
+      this.txtHelper = this.scene.add.bitmapText(0, (this.scene.game.config.height * -0.4), "uiFont", "Test", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtHelper.depth = 9999;
+      this.container.add(this.txtHelper);
+      this.txtLower = this.scene.add.bitmapText(0, (this.scene.game.config.height * 0.4), "uiFont", "Test", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtLower.depth = 9999;
+      this.container.add(this.txtLower);
+
+      this.txtDelta = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 8, (this.scene.game.config.height * -0.5) + 8, "uiFont", "Test", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtDelta.depth = 9999;
+      this.txtDelta.alpha = 0;
+      this.container.add(this.txtDelta);
+
+      this.txtBestLapTime = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * -0.4) + 0, "uiFont", "NO BEST LAP YET", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtBestLapTime.depth = 9999;
+      this.container.add(this.txtBestLapTime);
+      this.txtLastLapTime = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * -0.4) + 16, "uiFont", "NO LAST LAP YET", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtLastLapTime.depth = 9999;
+      this.container.add(this.txtLastLapTime);
+      this.txtLapTime = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * -0.4) + 32, "uiFont", "CURRENT LAP", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtLapTime.depth = 9999;
+      this.container.add(this.txtLapTime);
+
+      this.txtLapPos = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * -0.4) + 48, "uiFont", "CURRENT POS", 14, 0).setOrigin(0, 0.5).setLetterSpacing(0);
+      this.txtLapPos.depth = 9999;
+      this.container.add(this.txtLapPos);
+
+      this.txtWarning = this.scene.add.bitmapText(0, (this.scene.game.config.height * -0.4) + 48, "uiFont", "!!!WARNING!!!", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtWarning.depth = 9999;
+      this.container.add(this.txtWarning);
+
+      this.txtCountdown = this.scene.add.bitmapText(0, 0, "uiFont", "", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.txtCountdown.depth = 9999;
+      this.txtCountdown.alpha = 1;
+      this.container.add(this.txtCountdown);
+
+      this.lineMap = this.scene.add.graphics(0, 0);
+      this.lineMap.depth = 9999;
+      this.container.add(this.lineMap);
+      this.lineMap.lineStyle(1, 0xffffff, 1);//0x00e436
+      this.lineMap.beginPath();
+      this.lineMap.moveTo((this.scene.game.config.width * 0.5) - 16.5, (this.scene.game.config.height * -0.5) + 16);
+      this.lineMap.lineTo((this.scene.game.config.width * 0.5) - 16.5, (this.scene.game.config.height * 0.5) - 16);
+      this.lineMap.strokePath();
+
+      this.reactionPosition = { x: (this.scene.game.config.width * 0.5) - 96, y: (this.scene.game.config.height * -0.5) + 64 }
+      this.racerReaction = this.scene.add.sprite(this.reactionPosition.x, this.reactionPosition.y, "charSheetExpressions", "bonezExpressionHaha01");
+      this.racerReaction.depth = 9999;
+      this.racerReaction.alpha = 0;
+      this.racerReactionUpcount = 0.01;
+      this.container.add(this.racerReaction);
+      this.racerReactionName = this.scene.add.bitmapText(this.reactionPosition.x, this.reactionPosition.y + 32 + 8, "uiFontOffwhite", "RACER", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      //this.racerReactionName.setTintFill(0xfff1e8)
+      this.racerReactionName.depth = 9999;
+      this.racerReactionName.alpha = 0;
+      this.container.add(this.racerReactionName);
+
+      //danger circle
+      this.dangerCircleContainer = this.scene.add.container();
+      this.dangerCircleContainer.depth = 9998;
+      this.container.add(this.dangerCircleContainer);
+      this.dangerCirclets = [];
+      for (let q = 0; q < 4; q++) {
+         for (let i = 0; i < 4; i++) {
+            this.dangerCirclets.push([]);
+            let arr = this.dangerCirclets[this.dangerCirclets.length - 1];
+            for (let j = 0; j < 6; j++) {
+               arr.push(this.scene.add.sprite(0, 32, "atlasUi", "sprUiCollisionWarningCircle" + String(i) + String(j)));
+               let s = arr[arr.length - 1];
+               s.setOrigin(0, 1);
+               s.rotation = (Math.PI * 0.5) * q;
+               s.alpha = 0;
+               this.dangerCircleContainer.add(s);
+            }
+         }
+      }
+
+      //slipstream visual
+      this.slipstream = this.scene.add.graphics(0, 0);
+      this.slipstream.depth = 9999;
+      this.container.add(this.slipstream);
+      this.slipstream.lineStyle(1, 0xffffff, 1);
+      this.slipstreamAngle = 0;
+
+      //(tutorial) progress
+      this.progress = this.scene.add.graphics(0, 0);
+      this.progress.depth = 9999;
+      this.container.add(this.progress);
+      this.progress.lineStyle(1, 0xffffff, 1);
+      this.txtProgress = this.scene.add.bitmapText(0, (this.scene.game.config.height * -0.4) + 38, "uiFont", "", 14, 0).setOrigin(0.5).setLetterSpacing(0);
+      this.container.add(this.txtProgress);
+
+      //tacho
+      this.tachoContainer = this.scene.add.container();
+      this.tachoContainer.depth = 9998;
+      this.container.add(this.tachoContainer);
+
+      this.txtTachoSpd = this.scene.add.bitmapText((this.scene.game.config.width * -0.5) + 16 + 90, (this.scene.game.config.height * 0.4) + 12, "uiFont", "0000 SPD", 14, 0).setOrigin(1, 0.5).setLetterSpacing(0);
+      this.txtTachoSpd.depth = 9999;
+      this.tachoContainer.add(this.txtTachoSpd);
+
+      //INFO without border looks somehow better, but also it does read less good against some tunnnel textures
+      //this.tachoBorder = this.scene.add.sprite((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * 0.4), "atlasUi", "sprUiTunnelTachoBorder");
+      //this.tachoBorder.setOrigin(0, 0.5);
+      //this.tachoBorder.depth = 9999;
+      //this.tachoContainer.add(this.tachoBorder);
+      this.tachoNeedleContainer = this.scene.add.container();
+      this.tachoContainer.add(this.tachoNeedleContainer);
+      this.tachoOverspeed = this.scene.add.sprite((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * 0.4), "atlasUi", "sprUiTunnelTachoOverspeed");
+      this.tachoOverspeed.setOrigin(0, 0.5);
+      this.tachoOverspeed.depth = 9998;
+      this.tachoOverspeed.setTint(0xff004d);
+      this.tachoNeedleContainer.add(this.tachoOverspeed);
+      this.tachoHighlight = this.scene.add.sprite((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * 0.4), "atlasUi", "sprUiTunnelTacho");
+      this.tachoHighlight.setOrigin(0, 0.5);
+      this.tachoHighlight.depth = 9999;
+      this.tachoNeedleContainer.add(this.tachoHighlight);
+      this.tachoMaskImage = this.scene.add.image((this.scene.game.config.width * -0.5) + 16, (this.scene.game.config.height * 0.4), "atlasUi", "sprUiTunnelTachoMask");
+      this.tachoMaskImage.setOrigin(0, 0.5);
+      this.tachoMaskImage.setVisible(false);
+      this.tachoMaskImage.depth = 9999;
+      this.tachoContainer.add(this.tachoMaskImage);
+      this.tachoMask = this.tachoMaskImage.createBitmapMask();
+      this.tachoNeedleContainer.setMask(this.tachoMask);
+
+
+      //middle pitch thingy
+      this.pitchContainer = this.scene.add.container();
+      this.pitchContainer.depth = 9999;
+      this.pitchPosY = 32;
+      //this.container.add(this.pitchContainer); //todo: this somehow just hides the pitch container? if I add it, the mouse hand cursor is visible
+
+      this.pitchYL = this.scene.add.sprite(-16, this.pitchPosY, "atlasUi", "sprUiTunnelTarget03Hor");
+      this.pitchYL.depth = 9999;
+      this.pitchYR = this.scene.add.sprite(16, this.pitchPosY, "atlasUi", "sprUiTunnelTarget03Hor");
+      this.pitchYR.setScale(-1, 1);
+      this.pitchYR.depth = 9999;
+      this.pitchContainer.add(this.pitchYL);
+      this.pitchContainer.add(this.pitchYR);
+
+      this.pitchXL = this.scene.add.sprite(-32, this.pitchPosY, "atlasUi", "sprUiTunnelTarget00");
+      this.pitchXL.setOrigin(1, 0.5);
+      this.pitchXL.depth = 9999;
+      this.pitchXR = this.scene.add.sprite(32, this.pitchPosY, "atlasUi", "sprUiTunnelTarget00");
+      this.pitchXR.setOrigin(1, 0.5);
+      this.pitchXR.setScale(-1, 1);
+      this.pitchXR.depth = 9999;
+      this.pitchContainer.add(this.pitchXL);
+      this.pitchContainer.add(this.pitchXR);
+
+      this.pitchLimit = this.scene.add.sprite(0, this.pitchPosY + 64, "atlasUi", "sprUiTunnelDanger04");
+      this.pitchLimit.depth = 9999;
+      this.pitchContainer.add(this.pitchLimit);
+      this.pitchLimitMaskImage = this.scene.add.image(0, this.pitchPosY, "atlasUi", "sprUiTunnelDangerMask");
+      this.pitchLimitMaskImage.setVisible(false);
+      this.pitchLimitMaskImage.depth = 9999;
+      this.pitchContainer.add(this.pitchLimitMaskImage);
+      this.pitchLimitMask = this.pitchLimitMaskImage.createBitmapMask();
+      this.pitchLimit.setMask(this.pitchLimitMask);
+
+      this.ships = [];
+   }
+
+   update(_delta) {
+      if (this.hidden === false) {
+
+         //show cockpit
+         if (this.level.playerShip.camera === 1) {
+            this.cockpit.alpha = 1;
+         } else {
+            this.cockpit.alpha = 0;
+         }
+
+         //rumble
+         if (this.rumble.time > 0) {
+            this.rumble.time -= this.scene.dt;
+            this.container.x = -this.rumble.intensity.x + (Math.random() * (this.rumble.intensity.x * 2));
+            this.container.y = -this.rumble.intensity.y + (Math.random() * (this.rumble.intensity.y * 2));
+         }
+
+         //if(this.scrape.isScraping === true){
+         if (this.level.playerShip.scraping === true) {
+            //this.vignetteScrape.alpha = Math.random() * Math.min(1, (3000 / this.level.playerShip.scrapingTime));
+            this.vignetteScrape.alpha = 0.5
+            this.vignetteScrape.y = Math.random() * (1 * this.level.playerShip.speed);
+            this.rumble.time = 1;
+            this.rumble.intensity.x = this.level.playerShip.speed / this.level.playerShip.speedMax;
+            this.rumble.intensity.y = (this.level.playerShip.speed / this.level.playerShip.speedMax) * 2;
+         } else {
+            this.vignetteScrape.alpha = 0;
+         }
+
+         if (this.racerReactionUpcount > 0) {
+            this.racerReactionUpcount -= this.scene.dt;
+            if (this.racerReactionUpcount < 0) {
+               this.racerReactionUpcount = 0;
+            }
+         }
+         // TODO why does alpha blip to 1 in tutorial?
+         this.racerReaction.alpha = Math.min(1, this.racerReactionUpcount);
+         this.racerReactionName.alpha = Math.min(1, this.racerReactionUpcount);
+
+         this.vignetteHeat.alpha = Math.log(1.1 - (this.level.playerShip.temp / 999)) * -0.5;
+
+         this.txtWarning.setText("");
+         //slipstream draw
+         if (this.level.playerShip.slipstreamTarget === null) {
+            //todo: idk, alpha does not work somehow, it just blinks out of existance later
+            /*this.slipstream.alpha -= 0.01 * this.scene.dt;
+            if(this.slipstream.alpha <= 0){
+               this.slipstream.clear();
+            }*/
+            this.slipstream.clear();
+            this.txtWarning.setText("");
+         }
+         if (this.level.playerShip.slipstreaming === true) {
+            if (this.level.playerShip.slipstreamTarget !== null) {
+               this.slipstreamAngle += 0.025 * this.scene.dt;
+               //this.slipstream.alpha = 0.1;
+               let d2dTarget = this.level.playerShip.slipstreamTarget.getScreenBounds();
+               let d2dMid = {
+                  x: d2dTarget.p0.x + ((d2dTarget.p1.x - d2dTarget.p0.x) * 0.5),
+                  y: d2dTarget.p0.y + ((d2dTarget.p1.y - d2dTarget.p0.y) * 0.5)
+               }
+               let d2dLen = (d2dTarget.p1.x - d2dTarget.p0.x) * 1;
+               let d2dPoints = [];
+               for (let i = 0; i < Math.PI * 2; i += Math.PI * 0.5) {
+                  d2dPoints.push({
+                     x: d2dMid.x + (Math.cos(i + this.slipstreamAngle) * d2dLen),
+                     y: d2dMid.y + (Math.sin(i + this.slipstreamAngle) * d2dLen)
+                  })
+               }
+
+               this.slipstream.clear();
+               this.slipstream.beginPath();
+               this.slipstream.moveTo(d2dPoints[0].x, d2dPoints[0].y);
+               this.slipstream.lineTo(d2dPoints[1].x, d2dPoints[1].y);
+               this.slipstream.moveTo(d2dPoints[1].x, d2dPoints[1].y);
+               this.slipstream.lineTo(d2dPoints[2].x, d2dPoints[2].y);
+               this.slipstream.moveTo(d2dPoints[2].x, d2dPoints[2].y);
+               this.slipstream.lineTo(d2dPoints[3].x, d2dPoints[3].y);
+               this.slipstream.moveTo(d2dPoints[3].x, d2dPoints[3].y);
+               this.slipstream.lineTo(d2dPoints[0].x, d2dPoints[0].y);
+               this.slipstream.strokePath();
+
+               this.txtWarning.setText("\\\\\\ SLIPSTREAMING ///");
+            }
+         }
+         //TODO: this is a bit meh also the warning stays on only for a short time, the exact data, and not like slipstreamin with a fade
+         if (this.level.situation.actions.slipstreamed.who !== "") {
+            this.txtWarning.setText("!!! BEING SLIPSTREAMED !!!");
+         }
+
+         if (this.level.playerShip.temp >= 900) {
+            this.txtWarning.setText("!!! OVERHEATING !!!");
+         }
+
+         //radar
+         if (OPTIONS.config.collisionRadar === 0 && this.dangerCircleContainer.alpha === 1) {
+            this.dangerCircleContainer.alpha = 0;
+         } else if (OPTIONS.config.collisionRadar === 1 && this.dangerCircleContainer.alpha === 0) {
+            this.dangerCircleContainer.alpha = 1;
+         }
+
+         //progress (especially tutorial)
+         if (this.level.raceMode === this.level.raceModes.tutorial) {
+            if (this.level.tutorialStep === 1 || this.level.tutorialStep === 3 || this.level.tutorialStep === 5) {
+               this.progress.clear();
+               this.progress.lineStyle(1, 0xffffff, 1);
+               this.progress.beginPath();
+               this.progress.moveTo(-100, (this.scene.game.config.height * -0.4) + 24);
+               this.progress.lineTo(100, (this.scene.game.config.height * -0.4) + 24);
+               this.progress.strokePath();
+               this.progress.lineStyle(3, 0xffffff, 1);
+               this.progress.beginPath();
+               this.progress.moveTo(-86, (this.scene.game.config.height * -0.4) + 24);
+               this.progress.lineTo(-86 + (172 * (this.level.tutorialHoldVar / this.level.tutorialHoldVarMax)), (this.scene.game.config.height * -0.4) + 24);
+               this.progress.strokePath();
+            } else {
+               this.progress.clear();
+            }
+         }
+
+         //normal draw
+         let linePart = this.level.trackBuilder.spline.length > 0 ? (this.scene.game.config.height - 32) / this.level.trackBuilder.spline.length : 1;
+         for (let s of this.ships) {
+            //
+            //console.log(s.shipManager.splineId * linePart)
+            s.sprTarget.x = Math.floor(this.scene.game.config.width * 0.5) - 16.5;
+            s.sprTarget.y = Math.floor(this.scene.game.config.height * 0.5) - 16 - Math.floor(s.shipManager.splineId * linePart);
+            s.txtName.x = Math.floor(this.scene.game.config.width * 0.5) - 16.5 - 16;
+            s.txtName.y = s.sprTarget.y;
+            if (s.txtName.alpha < 1) {
+               s.txtName.alpha += 0.1
+            };
+            for (let o of this.ships) {
+               if (s.txtName.y <= (o.txtName.y + 7) && s.txtName.y >= (o.txtName.y - 7)) {
+                  if (s.shipManager.splineId < o.shipManager.splineId) {
+                     s.txtName.alpha -= 0.1;
+                  } else {
+                     o.txtName.alpha -= 0.1;
+                     s.txtName.alpha += 0.1;
+                  }
+                  if (s.shipManager.isPlayer === true) {
+                     o.txtName.alpha -= 0.1;
+                  }
+               }
+            }
+            if (s.shipManager.isPlayer === true) {
+               s.txtName.alpha = 1;
+
+               //update reticle
+               //this.pitchX.x = this.scene.hand.pos.x;
+               //this.pitchY.y = this.scene.hand.pos.y;
+               this.pitchYL.y = this.pitchPosY + (s.shipManager.pitch.current * 32);
+               this.pitchYR.y = this.pitchPosY + (s.shipManager.pitch.current * 32);
+            }
+            s.txtName.alpha = Math.max(0, Math.min(s.txtName.alpha, 1));
+         }
+
+      }
+   }
+
+   addReaction(_atlas, _texture, _character) {
+      if (this.racerReactionUpcount <= 0 && this.hidden === false) {
+         this.racerReaction.setTexture(_atlas, _texture);
+         this.racerReaction.alpha = 1;
+         this.racerReactionUpcount = 300;
+
+         this.racerReactionName.setText(_character.name);
+         this.racerReactionName.alpha = 1;
+      }
+   }
+
+   registerShip(_shipManager) {
+      this.ships.push({
+         shipManager: _shipManager,
+         //line: this.scene.add.graphics(0, 0),
+         txtName: this.scene.add.bitmapText(0, 0, "uiFont", _shipManager.name, 14, 0),
+         txtPlace: this.scene.add.bitmapText(0, 0, "uiFont", "0", 14, 0),
+         sprFace: null,
+         sprTarget: null//this.scene.add.sprite(0, 0, "atlasUi", "sprUiTrackLineBike")
+      });
+
+      let s = this.ships[this.ships.length - 1];
+      s.txtName.setOrigin(1, 0.5);
+      s.txtName.setLetterSpacing(0);
+      s.txtName.alpha = 1;
+      this.container.add(s.txtName);
+      s.txtPlace.setOrigin(0, 0.5);
+      s.txtPlace.setLetterSpacing(0);
+      s.txtPlace.alpha = 0;
+      //this.container.add(s.txtPlace);
+      /*
+      s.line.lineStyle(1, 0xffffff, 1);//0x00e436
+      s.line.beginPath();
+      s.line.moveTo(-8, 0);
+      s.line.lineTo(8, 0);
+      s.line.strokePath();
+      */
+      if (s.shipManager.isAI === true) {
+         s.sprTarget = this.scene.add.sprite(0, 0, "atlasUi", "sprUiTrackLineBike");
+      } else {
+         s.sprTarget = this.scene.add.sprite(0, 0, "atlasUi", "sprUiTrackLinePlayer");
+      }
+      s.sprTarget.setOrigin(1, 0.5);
+      this.container.add(s.sprTarget);
+   }
+
+   toggleVisibility() {
+      if (this.hidden === true) {
+         OPTIONS.config.hideUI = false;
+         this.show();
+      } else {
+         this.hide();
+         OPTIONS.config.hideUI = true;
+      }
+   }
+
+   show() {
+      if (this.hidden === true && OPTIONS.config.hideUI === false) {
+         /*
+         this.txtHelper.alpha = 1;
+         this.txtLower.alpha = 1;
+         this.txtDelta.alpha = 1;
+         this.txtBestLapTime.alpha = 1;
+         this.txtLastLapTime.alpha = 1;
+         this.txtLapTime.alpha = 1;
+
+         this.pitchXL.alpha = 1;
+         this.pitchXR.alpha = 1;
+         this.pitchYL.alpha = 1;
+         this.pitchYR.alpha = 1;
+         this.pitchLimit.alpha = 1;
+
+         this.lineMap.alpha = 1;
+         for(let s of this.ships){
+            s.txtName.alpha = 1;
+            //s.txtPlace.alpha = 1;
+            if(s.sprFace !== null){
+               s.sprFace.alpha = 1;
+            }
+            s.sprTarget.alpha = 1;
+         }
+         */
+         this.container.each((_el) => {
+            _el.alpha = 1;
+         });
+         this.pitchContainer.each((_el) => {
+            _el.alpha = 1;
+         });
+
+         this.txtCountdown.alpha = 0;
+         if (this.level.countdown.step <= 4) {
+            this.txtCountdown.alpha = 1;
+         }
+         this.hidden = false;
+      }
+   }
+
+   hide() {
+      if (this.hidden === false && OPTIONS.config.hideUI === false) {
+         this.container.each((_el) => {
+            _el.alpha = 0;
+         });
+         this.pitchContainer.each((_el) => {
+            _el.alpha = 0;
+         });
+         /*
+         this.txtHelper.alpha = 0;
+         this.txtLower.alpha = 0;
+         this.txtDelta.alpha = 0;
+         this.txtBestLapTime.alpha = 0;
+         this.txtLastLapTime.alpha = 0;
+         this.txtLapTime.alpha = 0;
+
+         this.pitchXL.alpha = 0;
+         this.pitchXR.alpha = 0;
+         this.pitchYL.alpha = 0;
+         this.pitchYR.alpha = 0;
+         this.pitchLimit.alpha = 0;
+
+         this.lineMap.alpha = 0;
+         for(let s of this.ships){
+            s.txtName.alpha = 0;
+            s.txtPlace.alpha = 0;
+            if(s.sprFace !== null){
+               s.sprFace.alpha = 0;
+            }
+            s.sprTarget.alpha = 0;
+         }
+         this.txtCountdown.alpha = 0;
+         */
+
+         this.hidden = true;
+      }
+   }
+
+   destroy() {
+      this.container.each((_el) => {
+         _el.destroy();
+      });
+      this.pitchContainer.each((_el) => {
+         _el.destroy();
+      });
+      this.pitchContainer.destroy();
+      this.container.destroy();
+
+      /*
+      this.txtHelper.destroy();
+      this.txtDelta.destroy();
+      this.txtBestLapTime.destroy();
+      this.txtLapTime.destroy();
+      this.pitchXL.destroy();
+      this.pitchXR.destroy();
+      this.pitchYL.destroy();
+      this.pitchYR.destroy();
+      this.pitchLimit.destroy();
+      this.pitchLimitMask.destroy();
+      this.pitchLimitMaskImage.destroy();
+      this.lineMap.destroy();
+      this.txtCountdown.destroy();
+      */
+   }
+}

src/ui/slider.js

@@ -0,0 +1,412 @@
+export class SliderHorizontal{
+    constructor(_scene, _pos, _start, _width) {
+        this.scene = _scene;
+        this.pos = _pos;
+        this.start = _start;
+        this.width = _width;
+        this.autoReturn = false;
+        this.margin = 15;
+
+        this.colors = {
+            out: 0xfff1e8,
+            over: 0x29adff,
+            on: 0x00e436,
+            off: 0xad2900
+        }
+
+        this.states = {
+            out: 0,
+            over: 1,
+            on: 2
+        }
+        this.state = this.states.out;
+        this.active = false;
+        this.hovering = false;
+        this.value = 0;
+
+        this.releaseFunc = () => { };
+        this.changeFunc = () => { };
+        this.minFunc = () => { };
+        this.maxFunc = () => { };
+
+        this.sliderEndRight = this.scene.add.sprite(this.pos.x + (this.width * 0.5) - 8, this.pos.y, "atlasUi", "sprSliderRight00");
+        this.sliderEndRight.setTintFill(0xfff1e8);
+        this.sliderEndLeft = this.scene.add.sprite(this.pos.x - (this.width * 0.5) + 8, this.pos.y, "atlasUi", "sprSliderLeft00");
+        this.sliderEndLeft.setTintFill(0xfff1e8);
+
+        this.range = Phaser.Math.Distance.Between(this.sliderEndLeft.x + this.margin, 0, this.sliderEndRight.x - this.margin, 0);
+        this.sliderPos = {
+            x: this.sliderEndLeft.x + (this.range * this.start),
+            y: this.pos.y
+        }
+        this.sliderTarget = {
+            follow: false,
+            x: 0,
+            y: 0
+        }
+
+        this.sliderLights = [];
+        for (let i = 0; i <= this.range; i += 12) {
+            this.sliderLights.push(this.scene.add.sprite(this.pos.x, this.pos.y, "atlasUi", "sprSliderHighlight00"));
+        }
+
+        this.slider = this.scene.add.sprite(this.sliderPos.x, this.sliderPos.y, "atlasUi", "sprBtnSlider00");
+        this.slider.setTintFill(0x00e436);
+
+        this.colorInState(this.state);
+    }
+
+    update() {
+        //if (this.slider.getBounds().contains(this.scene.input.activePointer.worldX, this.scene.input.activePointer.worldY)) {
+        if (this.slider.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+            if (this.scene.hand.pressed === false) {
+                this.switchState(this.states.over);
+                this.active = false;
+                if(this.hovering === false){
+                    this.hovering = true;
+                    this.scene.soundManager.playSound(this.scene.soundManager.menuSelectSound);
+                }
+            }
+            if (this.scene.hand.justPressed === true) {
+                this.switchState(this.states.on);
+                this.sliderTarget.follow = true;
+                this.active = true;
+            }
+            if (this.scene.hand.justReleased === true) {
+                this.sliderTarget.follow = false;
+                this.releaseFunc();
+                this.active = false;
+            } else {
+               this.changeFunc();
+           }
+        } else {
+            if (this.active === false) {
+                this.switchState(this.states.out);
+                this.hovering = false;
+            } else {
+               this.changeFunc();
+                if (this.scene.hand.justReleased === true) {
+                    this.hovering = false;
+                    this.sliderTarget.follow = false;
+                    this.active = false;
+                    if (this.slider.x >= this.sliderEndRight.x - this.margin) {
+                        //releasing on top
+                        this.releaseFunc();
+                        this.maxFunc();
+                    } else if (this.slider.x <= this.sliderEndLeft.x + this.margin) {
+                        //releasing on bottom
+                        this.releaseFunc();
+                        this.minFunc();
+                    } else {
+                        //releasing anywhere
+                        this.releaseFunc();
+                    }
+                }
+            }
+        }
+
+        for (let l of this.sliderLights) {
+            if (l.x < this.slider.x) {
+                l.setTintFill(0x00e436);
+            } else {
+                l.setTintFill(0x000000);
+            }
+        }
+
+        if (this.sliderTarget.follow === true) {
+            //this.sliderPos.x = Math.min(this.sliderEndRight.x - this.margin, Math.max(this.scene.input.activePointer.worldX, this.sliderEndLeft.x + this.margin));
+            this.sliderPos.x = Math.min(this.sliderEndRight.x - this.margin, Math.max(this.scene.hand.pos.x, this.sliderEndLeft.x + this.margin));
+            this.slider.x = this.sliderPos.x;
+        } else {
+            if (this.autoReturn === true) {
+                if (this.slider.x > this.sliderEndLeft.x + this.margin) {
+                    this.sliderPos.x -= this.range * 0.01;
+                } else {
+                    this.sliderPos.x = this.sliderEndLeft.x + this.margin;
+                }
+                this.slider.x = this.sliderPos.x;
+            }
+        }
+
+        this.value = Phaser.Math.Distance.Between(this.sliderEndLeft.x + this.margin, 0, this.sliderPos.x, 0) / this.range;
+    }
+
+    setTo(_amt = 0){
+        this.sliderPos.x = this.sliderEndLeft.x + this.margin + (this.range * _amt);
+        this.slider.x = this.sliderPos.x;
+        this.value = Phaser.Math.Distance.Between(this.sliderEndLeft.x + this.margin, 0, this.sliderPos.x, 0) / this.range;
+        this.releaseFunc();
+    }
+
+    switchState(_state) {
+        if (this.state !== _state) {
+            this.state = _state;
+            this.colorInState(this.state);
+        }
+    }
+
+    colorInState(_state) {
+        switch (this.state) {
+            case this.states.out:
+                this.slider.setTintFill(this.colors.out);
+                break;
+            case this.states.over:
+                this.slider.setTintFill(this.colors.over);
+                break;
+            case this.states.on:
+                this.slider.setTintFill(this.colors.on);
+                break;
+            default:
+                break;
+        }
+    }
+
+    move(_x, _y) {
+        this.pos.x = _x;
+        this.pos.y = _y;
+
+        this.sliderEndLeft.x = this.pos.x - (this.width * 0.5) + 8;
+        this.sliderEndLeft.y = this.pos.y;
+        this.sliderEndRight.x = this.pos.x + (this.width * 0.5) - 8;
+        this.sliderEndRight.y = this.pos.y;
+
+        for (let [i, l] of this.sliderLights.entries()) {
+            l.x = this.sliderEndLeft.x + this.margin + (i * 12);
+            l.y = this.sliderEndLeft.y;
+        }
+
+        this.range = Phaser.Math.Distance.Between(this.sliderEndLeft.x + this.margin, 0, this.sliderEndRight.x - this.margin, 0);
+        this.sliderPos = {
+            x: this.sliderEndLeft.x + this.margin + (this.range * this.start),
+            y: this.pos.y
+        }
+
+        this.sliderPos.y = this.pos.y;
+        this.slider.x = this.sliderPos.x;
+        this.slider.y = this.sliderPos.y;
+    }
+
+    addToContainer(_container){
+        for (let [i, l] of this.sliderLights.entries()) {
+            _container.add(l);
+        }
+        _container.add(this.sliderEndLeft);
+        _container.add(this.sliderEndRight);
+        _container.add(this.slider);
+    }
+
+    destroy() {
+        this.sliderEndLeft.destroy();
+        this.sliderEndRight.destroy();
+        this.slider.destroy();
+
+        for (let l of this.sliderLights) {
+            l.destroy();
+        }
+    }
+}
+
+export class SliderVertical {
+    constructor(_scene, _pos, _start, _height) {
+        this.scene = _scene;
+        this.pos = _pos;
+        this.start = _start;
+        this.height = _height;
+        this.autoReturn = false;
+        this.margin = 15;
+
+        this.colors = {
+            out: 0xfff1e8,
+            over: 0x29adff,
+            on: 0x00e436,
+            off: 0xad2900
+        }
+
+        this.states = {
+            out: 0,
+            over: 1,
+            on: 2
+        }
+        this.state = this.states.out;
+        this.active = false;
+        this.hovering = false;
+        this.value = 0;
+
+        this.releaseFunc = () => {};
+        this.changeFunc = () => {};
+        this.minFunc = () => {};
+        this.maxFunc = () => {};
+
+        this.sliderEndTop = this.scene.add.sprite(this.pos.x, this.pos.y - (this.height * 0.5) + 8, "atlasUi", "sprSliderLeft00");
+        this.sliderEndTop.angle = 90;
+        this.sliderEndTop.setTintFill(0xfff1e8);
+        this.sliderEndBottom = this.scene.add.sprite(this.pos.x, this.pos.y + (this.height * 0.5) - 8, "atlasUi", "sprSliderRight00");
+        this.sliderEndBottom.angle = 90;
+        this.sliderEndBottom.setTintFill(0xfff1e8);
+
+        this.range = Phaser.Math.Distance.Between(0, this.sliderEndTop.y + this.margin, 0, this.sliderEndBottom.y - this.margin);
+        this.sliderPos = {
+            x: this.pos.x,
+            y: this.sliderEndBottom.y - (this.range * this.start)
+        }
+        this.sliderTarget = {
+            follow: false,
+            x: 0,
+            y: 0
+        }
+
+        this.sliderLights = [];
+        for(let i = 0 ; i <= this.range ; i += 12){
+            this.sliderLights.push(this.scene.add.sprite(0, 0, "atlasUi", "sprSliderHighlight00"));
+            this.sliderLights[this.sliderLights.length - 1].angle = 90;
+        }
+
+        this.slider = this.scene.add.sprite(this.sliderPos.x, this.sliderPos.y, "atlasUi", "sprBtnSlider00");
+        this.slider.angle = 90;
+        this.slider.setTintFill(0x00e436);
+
+        this.colorInState(this.state);
+    }
+
+    update(){
+        //if (this.slider.getBounds().contains(this.scene.input.activePointer.worldX, this.scene.input.activePointer.worldY)) {
+        if (this.slider.getBounds().contains(this.scene.hand.pos.x, this.scene.hand.pos.y)) {
+            if (this.scene.hand.pressed === false) {
+                this.switchState(this.states.over);
+                this.active = false;
+                if(this.hovering === false){
+                    this.hovering = true;
+                    this.scene.soundManager.playSound(this.scene.soundManager.menuSelectSound);
+                }
+            }
+            if (this.scene.hand.justPressed === true) {
+                this.switchState(this.states.on);
+                this.sliderTarget.follow = true;
+                this.active = true;
+            }
+            if (this.scene.hand.justReleased === true) {
+                this.sliderTarget.follow = false;
+                this.releaseFunc();
+                this.active = false;
+            } else {
+               this.changeFunc();
+           }
+        } else {
+            if(this.active === false){
+                this.switchState(this.states.out);
+                this.hovering = false;
+            } else {
+               this.changeFunc();
+                if (this.scene.hand.justReleased === true) {
+                    this.hovering = false;
+                    this.sliderTarget.follow = false;
+                    this.active = false;
+                    if(this.slider.y <= this.sliderEndTop.y + this.margin){
+                        //releasing on top
+                        this.releaseFunc();
+                        this.maxFunc();
+                    }else if(this.slider.y >= this.sliderEndBottom.y - this.margin){
+                        //releasing on bottom
+                        this.releaseFunc();
+                        this.minFunc();
+                    }else{
+                        //releasing anywhere
+                        this.releaseFunc();
+                    }
+                }
+            }
+        }
+
+        for(let l of this.sliderLights){
+            if (l.y > this.slider.y) {
+                l.setTintFill(0x00e436);
+            } else {
+                l.setTintFill(0x000000);
+            }
+        }
+
+        if(this.sliderTarget.follow === true){
+            //this.sliderPos.y = Math.min(this.sliderEndBottom.y - this.margin, Math.max(this.scene.input.activePointer.worldY, this.sliderEndTop.y + this.margin));
+            this.sliderPos.y = Math.min(this.sliderEndBottom.y - this.margin, Math.max(this.scene.hand.pos.y, this.sliderEndTop.y + this.margin));
+            this.slider.y = this.sliderPos.y;
+        }else{
+            if(this.autoReturn === true){
+                if (this.slider.y < this.sliderEndBottom.y - this.margin){
+                    this.sliderPos.y += this.range * 0.01;
+                }else{
+                    this.sliderPos.y = this.sliderEndBottom.y - this.margin;
+                }
+                this.slider.y = this.sliderPos.y;
+            }
+        }
+
+        this.value = Phaser.Math.Distance.Between(0, this.sliderPos.y, 0, this.sliderEndBottom.y - this.margin)/this.range;
+    }
+
+    switchState(_state) {
+        if (this.state !== _state) {
+            this.state = _state;
+            this.colorInState(this.state);
+        }
+    }
+
+    colorInState(_state) {
+        switch (this.state) {
+            case this.states.out:
+                this.slider.setTintFill(this.colors.out);
+                break;
+            case this.states.over:
+                this.slider.setTintFill(this.colors.over);
+                break;
+            case this.states.on:
+                this.slider.setTintFill(this.colors.on);
+                break;
+            default:
+                break;
+        }
+    }
+
+    move(_x, _y){
+        this.pos.x = _x;
+        this.pos.y = _y;
+
+        this.sliderEndTop.x = this.pos.x;
+        this.sliderEndTop.y = this.pos.y - (this.height * 0.5) + 8;
+        this.sliderEndBottom.x = this.pos.x;
+        this.sliderEndBottom.y = this.pos.y + (this.height * 0.5) - 8;
+
+        for(let [i, l] of this.sliderLights.entries()){
+            l.x = this.sliderEndBottom.x;
+            l.y = this.sliderEndBottom.y - this.margin - (i * 12);
+        }
+
+        this.range = Phaser.Math.Distance.Between(0, this.sliderEndTop.y+this.margin, 0, this.sliderEndBottom.y-this.margin);
+        this.sliderPos = {
+            x: this.pos.x,
+            y: this.sliderEndBottom.y - this.margin - (this.range * this.start)
+        }
+
+        this.sliderPos.x = this.pos.x;
+        this.slider.x = this.sliderPos.x;
+        this.slider.y = this.sliderPos.y;
+    }
+
+    addToContainer(_container){
+        for (let [i, l] of this.sliderLights.entries()) {
+            _container.add(l);
+        }
+        _container.add(this.sliderEndLeft);
+        _container.add(this.sliderEndRight);
+        _container.add(this.slider);
+    }
+
+    destroy(){
+        this.sliderEndTop.destroy();
+        this.sliderEndBottom.destroy();
+        this.slider.destroy();
+
+        for(let l of this.sliderLights){
+            l.destroy();
+        }
+    }
+}