Revisions · 6228858a88b5341cbcfe6657d67064a9

s19h058 revised this on 13 Jul 2022

b0d4a2c

7
struct Part3View2: View { @State var position : [CGSize] @State private var currentProgress = 0.0 private let total = 100.0 @Binding var kigu: Bool @Binding var beaker_1:Bool @Binding var beaker_2:Bool @Binding var beaker_1_Del:Bool @Binding var beaker_2_Del:Bool @Binding var imgSet:Bool @Binding var AS_1:Bool @Binding var AS_2:Bool @Binding var KI_Del:Bool @Binding var H2O2_Del:Bool @Binding var AS_2_drag:Bool let beaker = Beaker(name : "Beaker") var body: some View { /HStack { let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect() ProgressView(value: currentProgress, total: total) .accentColor(.purple) .onReceive(timer) { _ in if currentProgress < total { currentProgress += 2.0 if currentProgress > total { currentProgress = total } } } .rotationEffect(Angle(degrees: -90), anchor: UnitPoint(x: -0.2, y: 1.0)) .position(x: position[4].width, y: position[4].height) }/ // ビーカー操作 // Image("beaker") Image(uiImage:beaker.beaker_Image[0]!) .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[3].width, y: position[3].height) .blinkEffect() if beaker_1 == true { //Image("beaker") Image(uiImage:beaker.beaker_Image[0]!) .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[3].width, y: position[3].height) //Image("beaker") Image(uiImage:beaker.beaker_Image[0]!) .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[4].width, y: position[4].height) .blinkEffect() } if beaker_2 == true { //Image("beaker") Image(uiImage:beaker.beaker_Image[0]!) .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[4].width, y: position[4].height) } if kigu == true { // 器具が表示される if beaker_1_Del == true { Image("beaker") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 100, height: 100, alignment: /@START_MENU_TOKEN@/.center/@END_MENU_TOKEN@/) .position(x: position[0].width, y: position[0].height) .gesture( DragGesture() .onChanged { value in self.position[0] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } .onEnded { value in if (-420 ... -138 ~= self.position[0].height) && (0...200 ~= self.position[0].width) { beaker_1 = true beaker_1_Del = false imgSet = true } self.position[0] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } ) } //2個目ビーカー if imgSet == true { if beaker_2_Del == true{ Image("beaker") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 100, height: 100, alignment: /@START_MENU_TOKEN@/.center/@END_MENU_TOKEN@/) .position(x: position[5].width, y: position[5].height) .gesture( DragGesture() .onChanged { value in self.position[5] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } .onEnded { value in if (-420 ... -138 ~= self.position[5].height) && (201...400 ~= self.position[5].width) { beaker_2 = true beaker_2_Del = false } self.position[5] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } ) } } } // 試薬操作 // ヨウ化カリウム if AS_1 == true { Image("AS") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[3].width, y: position[3].height) } if AS_2 == true { Image("AS") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[4].width, y: position[4].height) .gesture( DragGesture().onChanged { value in self.position[4] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } .onEnded { value in if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) { AS_2_drag = true beaker_1 = false beaker_2 = false AS_1 = false AS_2 = false } self.position[4] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } ) } if AS_2_drag == true { Image("after") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 180, height: 180, alignment: .center) .position(x: position[3].width, y: position[3].height) } if kigu == false { // 試薬が表示される if KI_Del == true { Image("KI") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 100, height: 100, alignment: /@START_MENU_TOKEN@/.center/@END_MENU_TOKEN@/) .position(x: position[1].width, y: position[1].height) .gesture( DragGesture().onChanged { value in self.position[1] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } .onEnded { value in if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) { AS_1 = true KI_Del = false } self.position[1] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } ) } if H2O2_Del == true{ Image("H2O2") .resizable() .aspectRatio(contentMode: .fit) .scaledToFit() .frame(width: 100, height: 100, alignment: /@START_MENU_TOKEN@/.center/@END_MENU_TOKEN@/) .position(x: position[2].width, y: position[2].height) .gesture( DragGesture().onChanged { value in self.position[2] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } .onEnded { value in if (-270 ... -190 ~= self.position[2].height) && (270...325 ~= self.position[2].width) && (beaker_2 == true) { AS_2 = true H2O2_Del = false } self.position[2] = CGSize( width: value.startLocation.x + value.translation.width, height: value.startLocation.y + value.translation.height ) } ) //Text("x:\(position[2].width), y:\(position[2].height)") } } // 指示 if (AS_1 == true) && (AS_2 == true) { Text("右のビーカーを左のビーカーに近づけて、　混ぜてください") .padding() .font(.body) .frame(alignment: .center) .position(x: position[7].width, y: position[7].height) } else if (beaker_1 == true) && (beaker_2 == true){ Text("水溶液を入れてください") .padding() .font(.body) .frame(alignment: .center) .position(x: position[7].width, y: position[7].height) } else if AS_2_drag == true { Button(action: { }) { Text("解説") .padding() .font(.title) .frame(alignment: .center) .position(x: position[7].width, y: position[7].height) } .buttonStyle(ShrinkButtonStyle()) } else { Text("ビーカーをセットしてください") .padding() .font(.body) .frame(alignment: .center) .position(x: position[7].width, y: position[7].height) } } } // 点滅 extension View { func blinkEffect(opacity: ClosedRange<Double> = 0.1...1, interval: Double = 0.6) -> some View { self.modifier(BlinkEffect(opacity: opacity, interval: interval)) } } //struct ExperimentView2_Previews: PreviewProvider { // static var previews: some View { // StartMenuView() } //}

struct Part3View2: View {
    @State var position : [CGSize]
    
    @State private var currentProgress = 0.0
    private let total = 100.0
    
    @Binding var kigu: Bool
    @Binding var beaker_1:Bool
    @Binding var beaker_2:Bool
    @Binding var beaker_1_Del:Bool
    @Binding var beaker_2_Del:Bool
    @Binding var imgSet:Bool
    @Binding var AS_1:Bool
    @Binding var AS_2:Bool
    @Binding var KI_Del:Bool
    @Binding var H2O2_Del:Bool
    @Binding var AS_2_drag:Bool
    
    let beaker = Beaker(name : "Beaker")
    
    var body: some View {
        
            /*HStack {
            let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
            ProgressView(value: currentProgress, total: total)
                .accentColor(.purple)
                .onReceive(timer) { _ in
                    if currentProgress < total {
                        currentProgress += 2.0
                        if currentProgress > total {
                            currentProgress = total
                        }
                    }
                }
                .rotationEffect(Angle(degrees: -90), anchor: UnitPoint(x: -0.2, y: 1.0))
                .position(x: position[4].width, y: position[4].height)
        }*/
    // ビーカー操作
       // Image("beaker")
      
            Image(uiImage:beaker.beaker_Image[0]!)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .scaledToFit()
            .frame(width: 180, height: 180, alignment: .center)
            .position(x: position[3].width, y: position[3].height)
            .blinkEffect()
    
        
        
        if beaker_1 == true {
            //Image("beaker")
        
                Image(uiImage:beaker.beaker_Image[0]!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
            //Image("beaker")

Image(uiImage:beaker.beaker_Image[0]!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[4].width, y: position[4].height)
        }
        
        if kigu == true {       // 器具が表示される
            if beaker_1_Del == true {
                Image("beaker")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[0].width, y: position[0].height)
                    .gesture(
                      DragGesture()
                        .onChanged { value in
                            self.position[0] = CGSize(
                              width: value.startLocation.x + value.translation.width,
                              height: value.startLocation.y + value.translation.height
                            )
                        }
                          .onEnded { value in
                            if (-420 ... -138 ~= self.position[0].height) && (0...200 ~= self.position[0].width) {
                                beaker_1 = true
                                beaker_1_Del = false
                                imgSet = true
                            }
                            
                            self.position[0] = CGSize(
                              width: value.startLocation.x + value.translation.width,
                              height: value.startLocation.y + value.translation.height
                            )
                          }
                    )
            }
            
            //2個目ビーカー
            if imgSet == true {
                if beaker_2_Del == true{
                    Image("beaker")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .scaledToFit()
                        .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        .position(x: position[5].width, y: position[5].height)
                        .gesture(
                          DragGesture()
                            .onChanged { value in
                                self.position[5] = CGSize(
                                  width: value.startLocation.x + value.translation.width,
                                  height: value.startLocation.y + value.translation.height
                                )
                            }
                              .onEnded { value in
                                if (-420 ... -138 ~= self.position[5].height) && (201...400 ~= self.position[5].width) {
                                    beaker_2 = true
                                    beaker_2_Del = false
                                }
                                
                                self.position[5] = CGSize(
                                  width: value.startLocation.x + value.translation.width,
                                  height: value.startLocation.y + value.translation.height
                                )
                              }
                        )
                }
            }
        }
        
        
    // 試薬操作
        // ヨウ化カリウム
        if AS_1 == true {
            Image("AS")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
        }
        
        if AS_2 == true {
            Image("AS")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[4].width, y: position[4].height)
                .gesture(
                  DragGesture().onChanged { value in
                    self.position[4] = CGSize(
                      width: value.startLocation.x + value.translation.width,
                      height: value.startLocation.y + value.translation.height
                    )
                  }
                  .onEnded { value in
                    if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) {
                        AS_2_drag = true
                        beaker_1 = false
                        beaker_2 = false
                        AS_1 = false
                        AS_2 = false
                    }
                    
                    self.position[4] = CGSize(
                      width: value.startLocation.x + value.translation.width,
                      height: value.startLocation.y + value.translation.height
                    )
                  }
               )
        }

if AS_2_drag == true {
            Image("after")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
        }
        
        if kigu == false {      // 試薬が表示される
            if KI_Del == true {
                Image("KI")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[1].width, y: position[1].height)
                    .gesture(
                      DragGesture().onChanged { value in
                        self.position[1] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                      .onEnded { value in
                        if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) {
                            AS_1 = true
                            KI_Del = false
                        }
                        
                        self.position[1] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                   )
            }

if H2O2_Del == true{
                Image("H2O2")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[2].width, y: position[2].height)
                    .gesture(
                      DragGesture().onChanged { value in
                        self.position[2] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                      .onEnded { value in
                        if (-270 ... -190 ~= self.position[2].height) && (270...325 ~= self.position[2].width) && (beaker_2 == true) {
                            AS_2 = true
                            H2O2_Del = false
                        }

self.position[2] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                    )
                //Text("x:\(position[2].width), y:\(position[2].height)")
            }
        }

// 指示
        if (AS_1 == true) && (AS_2 == true) {
            Text("右のビーカーを左のビーカーに近づけて、　混ぜてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)

} else if (beaker_1 == true) && (beaker_2 == true){
            Text("水溶液を入れてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)
            
        } else if AS_2_drag == true {
            Button(action: {
            }) {
                Text("解説")
                    .padding()
                    .font(.title)
                    .frame(alignment: .center)
                    .position(x: position[7].width, y: position[7].height)
            }
            .buttonStyle(ShrinkButtonStyle())
            
        } else {
            Text("ビーカーをセットしてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)
        }
    }
}

// 点滅
extension View {
    func blinkEffect(opacity: ClosedRange<Double> = 0.1...1, interval: Double = 0.6) -> some View {
        self.modifier(BlinkEffect(opacity: opacity, interval: interval))
    }
}