scroll through igloo music

sky-is-winning · Jun 19, 2024 · 215e0d4 · 215e0d4
1 parent 5e7b5e4
commit 215e0d4
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 298 deletions.
diff --git a/client/media/crumbs/en.json b/client/media/crumbs/en.json
diff --git a/client/media/crumbs/en/music.json b/client/media/crumbs/en/music.json
@@ -1,5 +1,4 @@
 {
-    "0": "This JSON was manually compiled and written by the Club Penguin Plus team, using data from Bluestk's music spreadsheet, and the Club Penguin Wiki. You cannot find this data compilied like this elsewhere on the web. Please do not use without credit!",
     "1": {
         "name": "King of Kingston",
         "composer": "Paul Sumpter",

diff --git a/phasereditor2d.config.json b/phasereditor2d.config.json
@@ -12,5 +12,5 @@
         "client/media/games/card/cards",
         "client/media/puffles/"
     ],
-    "playUrl": "http://localhost:8888/en/"
+    "playUrl": "http://localhost:8888/"
 }
diff --git a/src/scenes/interface/game/iglooedit/IglooEdit.js b/src/scenes/interface/game/iglooedit/IglooEdit.js
@@ -360,7 +360,7 @@ export default class IglooEdit extends BaseScene {
         // title_3
         const title_3 = this.add.text(1180, 397, '', {})
         title_3.setOrigin(0.5, 0.5)
-        title_3.text = 'Replace with JSON from clipboard'
+        title_3.text = 'Replace with data from clipboard'
         title_3.setStyle({align: 'center', color: '#3e83c5ff', fixedWidth: 300, fontFamily: 'cpBurbankSmall', fontSize: '18px', fontStyle: 'bold'})
         title_3.setWordWrapWidth(300)
         chooseIgloo.add(title_3)
@@ -411,7 +411,7 @@ export default class IglooEdit extends BaseScene {
 
         // big_button (components)
         const big_buttonButton = new Button(big_button)
-        big_buttonButton.callback = () => (this.iglooMusic.visible = true)
+        big_buttonButton.callback = () => this.showIglooMusic()
 
         // small_btn (components)
         const small_btnButton = new Button(small_btn)
@@ -1206,6 +1206,10 @@ export default class IglooEdit extends BaseScene {
         this.copyTexts[id].text = this.crumbs.getString('copied')
         setTimeout(() => (this.copyTexts[id].text = this.crumbs.getString('copyclipboard')), 800)
     }
+
+    showIglooMusic() {
+        this.iglooMusic.show()
+    }
     /* END-USER-CODE */
 }
 

diff --git a/src/scenes/interface/game/iglooedit/IglooEdit.scene b/src/scenes/interface/game/iglooedit/IglooEdit.scene
@@ -89,7 +89,7 @@
                             "components": [
                                 "Button"
                             ],
-                            "Button.callback": "() => this.iglooMusic.visible = true",
+                            "Button.callback": "() => this.showIglooMusic()",
                             "texture": {
                                 "key": "iglooedit-new",
                                 "frame": "big-button"
@@ -842,7 +842,7 @@
                     "y": 397,
                     "originX": 0.5,
                     "originY": 0.5,
-                    "text": "Replace with JSON from clipboard",
+                    "text": "Replace with data from clipboard",
                     "fixedWidth": 300,
                     "align": "center",
                     "fontFamily": "cpBurbankSmall",

diff --git a/src/scenes/interface/game/iglooedit/IglooItem.js b/src/scenes/interface/game/iglooedit/IglooItem.js
@@ -152,6 +152,8 @@ export default class IglooItem extends Phaser.GameObjects.Container {
     }
 
     onClick() {
+        if (this.lastClick && new Date().getTime() - this.lastClick < 500) return
+        this.lastClick = new Date().getTime()
         if (this.scene.shell.room.selected) return
 
         let pointer = this.scene.input.activePointer

diff --git a/src/scenes/interface/game/iglooedit/igloomusic/IglooMusic.js b/src/scenes/interface/game/iglooedit/igloomusic/IglooMusic.js
@@ -10,7 +10,7 @@ export default class IglooMusic extends BaseContainer {
     constructor(scene, x, y) {
         super(scene, x ?? 760, y ?? 480)
 
-        /** @type {MusicItem[]} */
+        /** @type {Array<any>} */
         this.musicItems
 
         // block
@@ -57,70 +57,6 @@ export default class IglooMusic extends BaseContainer {
         title_2.setStyle({align: 'center', color: '#3e83c5ff', fixedWidth: 330, fontFamily: 'cpBurbankSmall', fontSize: '32px', fontStyle: 'bold'})
         this.add(title_2)
 
-        // musicItem
-        const musicItem = new MusicItem(scene, -200, -200)
-        this.add(musicItem)
-
-        // musicItem_1
-        const musicItem_1 = new MusicItem(scene, 200, -200)
-        this.add(musicItem_1)
-
-        // musicItem_2
-        const musicItem_2 = new MusicItem(scene, -200, -130)
-        this.add(musicItem_2)
-
-        // musicItem_3
-        const musicItem_3 = new MusicItem(scene, 200, -130)
-        this.add(musicItem_3)
-
-        // musicItem_4
-        const musicItem_4 = new MusicItem(scene, -200, 10)
-        this.add(musicItem_4)
-
-        // musicItem_5
-        const musicItem_5 = new MusicItem(scene, 200, 10)
-        this.add(musicItem_5)
-
-        // musicItem_6
-        const musicItem_6 = new MusicItem(scene, -200, -60)
-        this.add(musicItem_6)
-
-        // musicItem_7
-        const musicItem_7 = new MusicItem(scene, 200, -60)
-        this.add(musicItem_7)
-
-        // musicItem_8
-        const musicItem_8 = new MusicItem(scene, -200, 290)
-        this.add(musicItem_8)
-
-        // musicItem_9
-        const musicItem_9 = new MusicItem(scene, 200, 290)
-        this.add(musicItem_9)
-
-        // musicItem_10
-        const musicItem_10 = new MusicItem(scene, -200, 220)
-        this.add(musicItem_10)
-
-        // musicItem_11
-        const musicItem_11 = new MusicItem(scene, 200, 220)
-        this.add(musicItem_11)
-
-        // musicItem_12
-        const musicItem_12 = new MusicItem(scene, -200, 150)
-        this.add(musicItem_12)
-
-        // musicItem_13
-        const musicItem_13 = new MusicItem(scene, -200, 80)
-        this.add(musicItem_13)
-
-        // musicItem_14
-        const musicItem_14 = new MusicItem(scene, 200, 80)
-        this.add(musicItem_14)
-
-        // musicItem_15
-        const musicItem_15 = new MusicItem(scene, 200, 150)
-        this.add(musicItem_15)
-
         // rectangle_1
         const rectangle_1 = scene.add.rectangle(174, -369, 128, 128)
         rectangle_1.scaleX = 2.6662764784624313
@@ -134,7 +70,7 @@ export default class IglooMusic extends BaseContainer {
         this.add(rectangle)
 
         // lists
-        const musicItems = [musicItem, musicItem_1, musicItem_2, musicItem_3, musicItem_6, musicItem_7, musicItem_4, musicItem_5, musicItem_13, musicItem_14, musicItem_12, musicItem_15, musicItem_10, musicItem_11, musicItem_8, musicItem_9]
+        const musicItems = []
 
         // block (components)
         new Interactive(block)
@@ -166,36 +102,69 @@ export default class IglooMusic extends BaseContainer {
         this.musicItems = musicItems
 
         /* START-USER-CTR-CODE */
-        const musicList = 'default'
-        for (let item in this.musicItems) {
-            let trackId = this.crumbs.igloo_music[musicList][item]
-            if (!trackId) {
-                this.musicItems[item].visible = false
-                continue
+        this.musicMask = this.createMask()
+
+        let ypos = -200
+        Object.values(this.crumbs.music).forEach((song, i) => {
+            let xpos
+            if (i % 2 == 0) {
+                xpos = -200
+            } else {
+                xpos = 200
             }
-            let track = this.crumbs.music[trackId]
-            if (!track) {
-                this.musicItems[item].visible = false
-                continue
+            let musicItem = new MusicItem(scene, xpos, ypos)
+            this.add(musicItem)
+            this.musicItems.push(musicItem)
+
+            musicItem.name = song.name
+            musicItem.musicId = Object.keys(this.crumbs.music)[i]
+            if (musicItem.musicId == this.shell.room.music) {
+                musicItem.bold = true
             }
-            this.musicItems[item].name = track.name
-            this.musicItems[item].musicId = trackId
-            if (trackId == this.shell.room.music) {
-                this.musicItems[item].bold = true
+            musicItem.onAwake()
+
+            musicItem.setMask(this.musicMask)
+
+            if (i % 2 == 1) {
+                ypos += 70
             }
-            this.musicItems[item].onAwake()
-        }
+        })
         /* END-USER-CTR-CODE */
     }
 
     /* START-USER-CODE */
+    show() {
+        this.scene.input.addListener('wheel', this.onScroll, this)
+        this.visible = true
+    }
+
     close() {
         if (this.musicIsPreview) {
             this.shell.room.updateMusic(this.shell.room.music)
         }
+        this.scene.input.removeListener('wheel', this.onScroll, this)
         this.visible = false
     }
 
+    onScroll(pointer, currentlyOver, deltaX, deltaY) {
+        if (this.musicItems[0].y >= -200 && deltaY < 0) {
+            return
+        } else if (this.musicItems[this.musicItems.length - 1].y <= 310 && deltaY > 0) {
+            return
+        }
+        for (let item of this.musicItems) {
+            item.y += -deltaY
+        }
+    }
+
+    createMask() {
+        let mask = this.scene.add.graphics()
+        mask.fillStyle(0xffffff, 0)
+        mask.beginPath()
+        mask.fillRect(378, 238, 800 * window.currentScale, 600 * window.currentScale)
+        return mask.createGeometryMask()
+    }
+
     updateMusic(track) {
         this.shell.musicController.addMusic(track)
         this.shell.room.args.music = track