Update: 급한 수정

src/client/components/camera.ts

@@ -326,7 +326,7 @@ export class Camera extends PIXI.Container {
     this._jobNameText.anchor.set(0.5);
     this._jobNameText.position.set(1920 / 2, 916);
 
-    this.addChild(createBlurOverlay());
+    this.addChild(new BlurOverlay());
 
     this.addChild(PIXI.Sprite.from('./assets/ui/cameraUI.png'));
   }
@@ -522,22 +522,57 @@ export class Camera extends PIXI.Container {
   }
 }
 
-function createBlurOverlay() {
-  const container = new PIXI.Container();
+class BlurOverlay extends PIXI.Container {
+  private _state: 'default' | 'ban';
+  private _tween?: Tween<any>;
+  private _multiply: PIXI.Sprite;
 
-  const blurFilter = new PIXI.filters.BlurFilter();
-  blurFilter.blur = 16;
-  blurFilter.quality = 6;
+  constructor() {
+    super();
+
+    this._state = 'default';
+
+    const blurFilter = new PIXI.filters.BlurFilter();
+    blurFilter.blur = 16;
+    blurFilter.quality = 6;
+
+    const graphics = PIXI.Sprite.from('../assets/backgrounds/multiply.png');
+    graphics.filters = [new PIXI.picture.MaskFilter(blurFilter)];
+    this.addChild(graphics);
+
+    this._multiply = PIXI.Sprite.from('../assets/backgrounds/multiply.png');
+    this._multiply.blendMode = PIXI.BLEND_MODES.MULTIPLY;
+    this.addChild(this._multiply);
+
+    autorun(() => {
+      if (store.sequenceStore.currentSequence?.payload?.action == 'ban') {
+        this.state = 'ban';
+      } else {
+        this.state = 'default';
+      }
+    });
+  }
 
-  const graphics = PIXI.Sprite.from('./assets/backgrounds/multiply.png');
-  graphics.filters = [new PIXI.picture.MaskFilter(blurFilter)];
-  container.addChild(graphics);
+  set state(value: 'default' | 'ban') {
+    if (this._state == value) {
+      return;
+    }
 
-  const multiply = PIXI.Sprite.from('./assets/backgrounds/multiply.png');
-  multiply.blendMode = PIXI.BLEND_MODES.MULTIPLY;
-  container.addChild(multiply);
+    this._state = value;
 
-  return container;
+    switch (this._state) {
+      case 'default':
+        this._multiply.texture = PIXI.Texture.from(
+          '../assets/backgrounds/multiply.png'
+        );
+        break;
+      case 'ban':
+        this._multiply.texture = PIXI.Texture.from(
+          '../assets/backgrounds/multiplyBan.png'
+        );
+        break;
+    }
+  }
 }
 
 type CameraEvent = {

src/client/components/pickPanel.ts

@@ -1,4 +1,5 @@
 import { IReactionDisposer, autorun } from 'mobx';
+import { DropShadowFilter } from 'pixi-filters';
 import { JobId } from '../../common/enums';
 import { getJob, Job } from '../../common/jobs';
 import { store } from '../store';
@@ -90,6 +91,12 @@ export class PickPanel extends PIXI.Container {
     this.title.anchor.set(direction == 'left' ? 1 : 0, 1);
     this.title.position.set(direction == 'left' ? 396 - 12 : 0 + 12, 120 - 8);
 
+    const dropShadowFilter = new DropShadowFilter({
+      distance: 4,
+      rotation: 90,
+    });
+    this.filters = [dropShadowFilter];
+
     this.reset();
   }
 

src/client/components/titleBar.ts

@@ -178,6 +178,10 @@ export class TitleBar extends PIXI.Container {
           fontSize: '56px',
           fill: '#de9300',
         },
+        ban: {
+          fontSize: '56px',
+          fill: '#ca0000',
+        },
       })
     );
 
@@ -204,7 +208,7 @@ export class TitleBar extends PIXI.Container {
                   : `<rightTeam>${store.sequenceStore.rightTeamName}</rightTeam>`
               }이 ${
                 (nextSequence.payload.index ?? 0) + 1
-              }번째 밴할 직업을 선택 중`;
+              }번째 <ban>밴</ban>할 직업을 선택 중`;
             } else if (nextSequence.payload?.action == 'pick') {
               title.text = `${
                 nextSequence.payload?.team == 'left'

src/client/index.ts

@@ -43,6 +43,9 @@ function onFontLoaded() {
   }
   loader.add(splashes);
 
+  loader.add('../assets/backgrounds/multiply.png');
+  loader.add('../assets/backgrounds/multiplyBan.png');
+
   loader.load(onAssetsLoaded);
 
   const loading = app.stage.addChild(