Electrician 13: retro computer floors (#93)

README.md

@@ -9,6 +9,8 @@ Browse to http://localhost:3000
 
 Webapps: https://kdrzazga.github.io/js-playwright
 
+Electrician: https://kdrzazga.github.io/js-playwright/other/electrician/ 
+
 C64 Blackbox:
 ---
 https://kdrzazga.github.io/js-playwright/other/c64blackbox/
@@ -29,7 +31,7 @@ K&A+: https://kdrzazga.github.io/js-playwright/other/c64blackbox/directF6Classic
 
 6:
 ---
-https://kdrzazga.github.io/js-playwright/other/6/6.html
+https://kdrzazga.github.io/js-playwright/other/6/
 
 Pacman w lesie:
 ---

index.html

@@ -26,7 +26,7 @@
       <a href = 'https://kdrzazga.github.io/js-playwright/other/cube' target="_blank">Cube</a> |
       <a href = 'https://kdrzazga.github.io/js-playwright/other/brainfuck' target="_blank">Brainfuck</a><br/>
       <a href = 'https://kdrzazga.github.io/js-playwright/other/ForestPacman' target="_blank">Forest Pacman</a>&nbsp;|
-      <a href = 'https://kdrzazga.github.io/js-playwright/other/xmas' target="_blank">X-Mas</a> |
+      <a href = 'https://kdrzazga.github.io/js-playwright/other/xmas?snow=off' target="_blank">X-Mas</a> |
       <a href = '' target="_blank"></a><br/>
     </div>
 

other/electrician/files/creators.js

@@ -180,4 +180,103 @@ class Creator {
 
         return building;
     }
+
+    //Level 4
+    static createElectronicsStore(physics){
+        let building = new Building('Electronics Store');
+        building.init(physics); // Initializes ladder and power lines
+
+       const musicFloorBuilder = new FloorBuilder();
+       building.floors.push(musicFloorBuilder.withName('music-floor').withCeilingConnector(6).withCeilingConnector(19)
+            .withBottomConnector(3).withBottomConnector(9).withBottomConnector(14).withBottomConnector(17)
+            .withBottomConnector(21).withBottomConnector(25).withBottomConnector(28).build());
+
+       const computerRoomBuilder = new FloorBuilder();
+       building.floors.push(computerRoomBuilder.withName('computer-room').withCeilingConnector(2).withCeilingConnector(7)
+            .withCeilingConnector(12).withCeilingConnector(20)
+            .withBottomConnector(26).build());
+
+       const groundFloorBuilder = new FloorBuilder();
+        building.floors.push(groundFloorBuilder.withName('computer-room2').withCeilingConnector(5).withCeilingConnector(12)
+            .withCeilingConnector(12).withCeilingConnector(15).withCeilingConnector(19).withCeilingConnector(25).build());
+
+       building.floors.forEach(floor => floor.init(physics));
+       building.floors.forEach(floor => floor.calculateFloorLevel());
+
+       const connectionPointsCounts = [2, 11, 6];
+       building.wires = building.floors.map((floor, index) => {
+           const aboveFloor = building.floors[index] || null;
+           const belowFloor = building.floors[index - 1] || null;
+           return new Wire(index, physics, belowFloor, aboveFloor, connectionPointsCounts[index]);
+       });
+
+        building.includeWiresInInfoFrame();
+
+        //const MID_FLOOR_LEVEL = 328 - Floor.HEIGHT / 2;
+        const ratsData = [
+            { id: 1, active: true, y: Building.GROUND_FLOOR_LEVEL, velocity: { x: 0.7 } },
+            { id: 2, active: true, y: Building.GROUND_FLOOR_LEVEL, velocity: { x: 0.8 } },
+            { id: 3, active: true, y: Building.GROUND_FLOOR_LEVEL, velocity: { x: 0.9 } },
+            { id: 4, active: true, y: Creator.LOW_FLOOR_LEVEL, velocity: { x: 0.7 }, wireId: 2},
+            { id: 5, active: true, y: Creator.HIGH_FLOOR_LEVEL, wireId: 0},
+            { id: 6, active: true, y: Creator.HIGH_FLOOR_LEVEL, wireId: 0, velocity: { x: 0.97 } }
+        ];
+
+        const batsData = [
+            { id: 0, active: true, speed: -0.007 },
+            { id: 1, active: true, speed: -0.006 },
+            { id: 2, active: true, speed: 0.003 }
+        ];
+
+        building.enemies = Creator.createEnemies(ratsData, batsData, physics);
+
+        return building;
+    }
+}
+
+class FrameCreator{
+    static createLevel2ExtraInfoFrameContent(){
+        const content = "<p><div>Retro computers:</div>"
+                        + "<div>Commodore 64</div>"
+                        + "<div>IBM PC 286</div>"
+                        + "<div>Atari 800XL</div>"
+                        + "<div>Amiga 500</div>"
+                        + "<p><div>Retro cars:</div>"
+                        + "<div>Fiat 126p</div>"
+                        + "<div>Polonez</div>";
+
+        return content;
+    }
+
+    static createLevel4ExtraInfoFrameContent(){
+        const content = "<p>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/fenderAmp.PNG\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Fender Amplifier</div>"
+                        + "<p><div>Mainframe<br>retro computers:</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/ibm360.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>IBM S-360</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/ibm709.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>IBM 709</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/Ferranti-Mark-1.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Ferranti Mark 1</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/odra1305.png\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Elwro ODRA 1305</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/BendixG15.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Bendix G-15</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/ray704_f_s-1910516244.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Raytheon 705</div>"
+                        + "<p>"
+                        + "<div>Analog retro computers:</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/TelefunkenRA770.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Telefunken RA 770</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/TelefunkenRA436_2.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Telefunken RA 436/2</div>"
+                        + "    <div onmouseenter='FrameCreator.showPhoto(\"files/Telefunken.jpg\");' onmouseleave='FrameCreator.hidePhotoDiv();'>Telefunken RAT 700/2</div>";
+
+        return content;
+    }
+
+    static showPhoto(picLink){
+        let photosFrame = document.getElementById('photos');
+        photosFrame.style.display = 'block';
+        let photoImg = document.getElementById('photo');
+        photoImg.setAttribute('src', picLink);
+    }
+
+    static hidePhotoDiv(){
+        console.log('hide');
+        let photosFrame = document.getElementById('photos');
+        photosFrame.style.display = 'none';
+    }
 }

other/electrician/files/electrician.js

@@ -1,4 +1,4 @@
-const levelsJson = {'lvl1' : Level1Scene, 'lvl2': Level2Scene, 'lvl3': Level3Scene}
+const levelsJson = {'lvl1' : Level1Scene, 'lvl2': Level2Scene, 'lvl3': Level3Scene, 'lvl4': Level4Scene}
 
 let level = sessionStorage.getItem("level");
 let levelObject = Level1Scene;

other/electrician/files/levels.js

@@ -4,6 +4,7 @@ class LevelScene extends Phaser.Scene {
         this.playerCanJump = true;
         this.playerFalling = false;
         this.nextLevel = '';
+        this.extraInfoFrameVisible = "left: 85%; visibility: hidden";
     }
 
     preload() {
@@ -35,15 +36,13 @@ class LevelScene extends Phaser.Scene {
          //abstract
     }
 
-    create() {
-        this.physics.world.setBounds(0, 0, 800, 600);
-
-        this.building = Creator.create3storeBuilding(this.physics);
-
-        this.player = this.physics.add.sprite(100, 400, 'sprite');
-        this.player.setCollideWorldBounds(true);
+    create(creatorMethodRef) {
+         this.physics.world.setBounds(0, 0, 800, 600);
+         this.cursors = this.input.keyboard.createCursorKeys();
 
-        this.cursors = this.input.keyboard.createCursorKeys();
+         this.building = creatorMethodRef(this.physics);
+         this.player = this.physics.add.sprite(100, 400, 'sprite');
+         this.player.setCollideWorldBounds(true);
     }
 
     update() {
@@ -228,6 +227,12 @@ class LevelScene extends Phaser.Scene {
             location.reload();
         }
     }
+
+    showExtraInfoFrame(content){
+        const frame = document.getElementById('extraInfoFrame');
+        frame.innerHTML = content;
+        frame.style = "left: 85%; visibility: show";
+    }
 }
 
 class Level1Scene extends LevelScene {
@@ -244,14 +249,7 @@ class Level1Scene extends LevelScene {
     }
 
     create() {
-        this.physics.world.setBounds(0, 0, 800, 600);
-
-        this.building = Creator.createBuilding(this.physics);
-
-        this.player = this.physics.add.sprite(100, 400, 'sprite');
-        this.player.setCollideWorldBounds(true);
-
-        this.cursors = this.input.keyboard.createCursorKeys();
+        super.create(Creator.createBuilding);
     }
 }
 
@@ -269,27 +267,47 @@ class Level2Scene extends LevelScene{
     }
 
     create() {
-        this.physics.world.setBounds(0, 0, 800, 600);
-
-        this.building = Creator.createOfficeGymGarage(this.physics);
-
-        this.player = this.physics.add.sprite(100, 400, 'sprite');
-        this.player.setCollideWorldBounds(true);
-
-        this.cursors = this.input.keyboard.createCursorKeys();
+        super.create(Creator.createOfficeGymGarage);
+        const content = FrameCreator.createLevel2ExtraInfoFrameContent();
+        this.showExtraInfoFrame(content);
     }
 }
 
 class Level3Scene extends LevelScene{
 
     constructor() {
         super('Level3');
-        this.nextLevel = 'lvl1';
+        this.nextLevel = 'lvl4';
     }
 
     loadFloorImages(){
          this.load.image('floor0', 'files/attic.png');
          this.load.image('floor1', 'files/livingRoom.png');
          this.load.image('floor2', 'files/kitchen.png');
     }
+
+    create(){
+        super.create(Creator.create3storeBuilding);
+    }
+}
+
+class Level4Scene extends LevelScene{
+
+    constructor() {
+        super('Level4');
+        this.nextLevel = 'lvl1';
+        this.extraInfoFrameVisible = "left: 85%; visibility: show"
+    }
+
+    loadFloorImages(){
+         this.load.image('floor0', 'files/music-floor.png');
+         this.load.image('floor1', 'files/computer-room.png');
+         this.load.image('floor2', 'files/computer-room2.png');
+    }
+
+     create() {
+        super.create(Creator.createElectronicsStore);
+        const content = FrameCreator.createLevel4ExtraInfoFrameContent();
+        this.showExtraInfoFrame(content);
+     }
 }

other/electrician/index.html

@@ -22,6 +22,11 @@
     <hr>
     <div id="extra-info"></div>
 </div>
+<div id = "photos" class="panel" style="display: none">
+    <img id="photo" src="_blank">
+</div>
+<div id = "extraInfoFrame" class="panel" style="left: 85%; visibility: hidden">
+</div>
 <div id = "board"></div>
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>

other/xmas/files/flakes.js

@@ -1,37 +1,37 @@
-    class Flake {
-        constructor(id, canvasWidth, canvasHeight) {
-            this.id = id;
-            this.enabled = true;
-            this.x = Math.random() * canvasWidth;
-            this.y = 0;
-            this.speed = Math.random() * 2 + 1;
-            this.amplitude = Math.random() * 6 + 6;
-            this.frequency = Math.random() * 0.005 + 0.005;
-            this.phase = Math.random() * Math.PI;
-            this.canvasWidth = canvasWidth;
-            this.canvasHeight = canvasHeight;
-
-            const canvas = document.createElement("canvas");
-            canvas.width = canvasWidth;
-            canvas.height = canvasHeight;
-            document.body.appendChild(canvas);
-            this.ctx = canvas.getContext("2d");
-        }
+class Flake {
+    constructor(id, canvasWidth, canvasHeight) {
+        this.id = id;
+        this.enabled = true;
+        this.x = Math.random() * canvasWidth;
+        this.y = 0;
+        this.speed = Math.random() * 2 + 1;
+        this.amplitude = Math.random() * 6 + 6;
+        this.frequency = Math.random() * 0.005 + 0.005;
+        this.phase = Math.random() * Math.PI;
+        this.canvasWidth = canvasWidth;
+        this.canvasHeight = canvasHeight;
+
+        const canvas = document.createElement("canvas");
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        document.body.appendChild(canvas);
+        this.ctx = canvas.getContext("2d");
+    }
 
-        update() {
-            this.y += this.speed;
-            this.x += Math.sin(this.y * this.frequency + this.phase) * this.amplitude;
+    update() {
+        this.y += this.speed;
+        this.x += Math.sin(this.y * this.frequency + this.phase) * this.amplitude;
 
-            if (this.y > this.canvasHeight && this.enabled) {
-                this.y = 0;
-                this.x = Math.random() * this.canvasWidth;
-            }
+        if (this.y > this.canvasHeight && this.enabled) {
+            this.y = 0;
+            this.x = Math.random() * this.canvasWidth;
         }
+    }
 
-        draw(image) {
-            this.ctx.drawImage(image, this.x, this.y);
-        }
+    draw(image) {
+        this.ctx.drawImage(image, this.x, this.y);
     }
+}
 
 class FlakeAnimation {
     constructor(numFlakes) {
@@ -103,4 +103,11 @@ class FlakeAnimation {
     }
 }
 
+const currentURL = window.location.href;
+const url = new URL(currentURL);
+const params = new URLSearchParams(url.search);
+const snowParam = params.get('snow');
+
+if (snowParam === 'on'){
     const snowAnimation = new FlakeAnimation(20);
+}