teamdevD · Taiga2022 · Dec 9, 2023
diff --git a/index.html b/index.html
@@ -2,13 +2,14 @@
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Card Games</title>
     <style>
       body {
         margin: 0;
         padding: 0;
-        background-color: white;        
+        background-color: white;
       }
     </style>
   </head>

diff --git a/src/component/button.ts b/src/component/button.ts
@@ -18,11 +18,11 @@ export default class Button extends GameObjects.Text{
         this.x=800;
         this.y=550
         this.backgroundColor='#111'
-        this.fontSize=44
+        this.fontSize=40
 
         this.button=scene.add.text(this.x,this.y,label,{fontSize:this.fontSize})
         .setOrigin(0.5)
-        .setPadding(20)
+        .setPadding(10)
         .setInteractive({ useHandCursor: true })
         .setStyle({backgroundColor: this.backgroundColor})
         .on('pointerdown', () => callback())

diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,6 @@
 import Phaser from "phaser";
 import IndexScene  from "./scene/index";
-import BrackJackScene from "./scene/game";
+import BrackJack from "./scene/game";
 
 
 const scale: Phaser.Types.Core.ScaleConfig = {
@@ -13,7 +13,11 @@ const scale: Phaser.Types.Core.ScaleConfig = {
 const config: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
   scale: scale,
-  scene: [IndexScene,BrackJackScene],
+  scene: [IndexScene,BrackJack],
+  parent: 'phaser',
+	dom: {
+		createContainer: true
+	}
 };
 
 new Phaser.Game(config);
diff --git a/src/scene/game.ts b/src/scene/game.ts
@@ -3,7 +3,7 @@ import {Scene} from 'phaser';
 export default class BrackJackScene extends Scene {
 
     constructor() {
-        super({ key: 'BrackJackScene', active: false });
+        super({ key: 'BrackJack', active: false });
       }
 
     preload(){

diff --git a/src/scene/index.ts b/src/scene/index.ts
@@ -9,21 +9,45 @@ export default class IndexScene extends Scene {
       }
 
     preload(){
-      this.load.image("bg","assets/indexBg.png")
+      this.load.image("indexBg","assets/indexBg.png")
     }
 
     create(){
-      this.add.image(800, 450, 'bg');
-      // const button = new Button("start Game",this,() => {
-      //   console.log('game is started')
-      //   return "button"
-      // });
-      const dropdown = new Dropdown(this,"aaaa","bbbbb","cccccc");
+      this.add.image(800, 450, 'indexBg');
+      const LevelOptions=["1","2","3"]
+      this.createDropdown(LevelOptions,800,350,"levelDropdown","select Level")
+      const GameOptions=["BrackJack","war"]
+      this.createDropdown(GameOptions,800,450,"gameDropdown","select Game")
+      const button = new Button("start Game",this,() => {
+        let dropdown1=document.getElementById("gameDropdown") as HTMLSelectElement
+          let curroption=dropdown1[dropdown1.selectedIndex] as HTMLOptionElement
+          this.scene.start(curroption.value)
+          return "button"
+      });
     }
 
     update(){
 
     }
 
+    createDropdown(options:string[],x:number,y:number,id:string,placeholder:string){
+      let dropdown=document.createElement("select")
+      dropdown.id=id
+      let firstOption=document.createElement("option")
+      firstOption.innerHTML=`${placeholder}`
+      firstOption.selected=true
+      firstOption.hidden=true
+      dropdown.appendChild(firstOption)
+      options.forEach((option)=>{
+        let optionEle=document.createElement("option")
+        optionEle.innerHTML=option
+        optionEle.value=option
+        dropdown.appendChild(optionEle)
+      })
+      let div=document.createElement("div")
+      div.className="select is-rounded is-link is-dark is-large"
+      div.appendChild(dropdown)
+      this.add.dom(x,y,div)
+    }
 
 }