add: question page

6 days ago · 7e3e6e54cf
27 changed files with 574 additions and 4 deletions
--- a/assets/svg/close.svg
+++ b/assets/svg/close.svg
@ -0,0 +1,4 @@
+<svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 4.5L4.5 0.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 4.5L0.5 0.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/svg/done.svg
+++ b/assets/svg/done.svg
@ -0,0 +1,3 @@
+<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 2.78571L2.16667 4.5L5.5 0.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/svg/polygon.svg
+++ b/assets/svg/polygon.svg
@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.27881 9.375L1.94873 1.875L1.29932 0.750001L12.5571 0.75L11.9077 1.875L7.57764 9.375L6.92822 10.5L6.27881 9.375Z" fill="#D59C33" stroke="#310E63" stroke-width="1.5"/>
+</svg>
--- a/assets/svg/timer.svg
+++ b/assets/svg/timer.svg
@ -0,0 +1,38 @@
+<svg width="95" height="103" viewBox="0 0 95 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="35.9971" y="9.3999" width="12" height="16.8" fill="#7559A1"/>
+<rect x="81.9751" y="32.1084" width="6.70603" height="16.8" transform="rotate(54.2988 81.9751 32.1084)" fill="#7559A1"/>
+<circle cx="42.6002" cy="60.3995" r="39.6" transform="rotate(180 42.6002 60.3995)" fill="url(#paint0_linear_188_1273)" stroke="url(#paint1_linear_188_1273)" stroke-width="6"/>
+<circle cx="42.6006" cy="60.3999" r="39.6" transform="rotate(180 42.6006 60.3999)" stroke="url(#paint2_linear_188_1273)" stroke-width="1.2"/>
+<rect x="28.593" y="1.1999" width="26.4" height="11.4" rx="3.6" fill="url(#paint3_linear_188_1273)" stroke="url(#paint4_linear_188_1273)" stroke-width="2.4"/>
+<rect x="86.5106" y="24.5252" width="13.9363" height="9.6" rx="3.6" transform="rotate(54.1991 86.5106 24.5252)" fill="url(#paint5_linear_188_1273)" stroke="url(#paint6_linear_188_1273)" stroke-width="2.4"/>
+<defs>
+<linearGradient id="paint0_linear_188_1273" x1="35.4002" y1="26.7995" x2="67.8002" y2="96.9995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#270D51"/>
+<stop offset="1" stop-color="#563B83"/>
+</linearGradient>
+<linearGradient id="paint1_linear_188_1273" x1="42.6002" y1="96.9995" x2="42.6002" y2="23.7995" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C0A3ED"/>
+<stop offset="1" stop-color="#785FA1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_188_1273" x1="42.6006" y1="99.3999" x2="42.6006" y2="21.3999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E0CCFF"/>
+<stop offset="1" stop-color="#785FA1"/>
+</linearGradient>
+<linearGradient id="paint3_linear_188_1273" x1="39.4323" y1="2.76875" x2="41.1917" y2="12.934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E6DC3"/>
+<stop offset="1" stop-color="#D9C1FE"/>
+</linearGradient>
+<linearGradient id="paint4_linear_188_1273" x1="41.793" y1="11.3999" x2="41.793" y2="2.3999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C0A3EC"/>
+<stop offset="1" stop-color="#7A5DA7"/>
+</linearGradient>
+<linearGradient id="paint5_linear_188_1273" x1="90.8727" y1="26.4955" x2="93.1005" y2="34.2296" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E6DC3"/>
+<stop offset="1" stop-color="#D9C1FE"/>
+</linearGradient>
+<linearGradient id="paint6_linear_188_1273" x1="92.0074" y1="33.4004" x2="92.0074" y2="26.2004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C0A3EC"/>
+<stop offset="1" stop-color="#7A5DA7"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -70,6 +70,10 @@ class MyAssets {
  static const String iconRandom = 'assets/svg/icon_random.svg';
  static const String magnifier = 'assets/svg/magnifier.svg';
  static const String iconIran = 'assets/svg/icon_iran.svg';
+  static const String polygon = 'assets/svg/polygon.svg';
+  static const String close = 'assets/svg/close.svg';
+  static const String doneWhite = 'assets/svg/done.svg';
+  static const String timer = 'assets/svg/timer.svg';

  /// ----- Audios -----
  static const String sampleAudio = 'assets/audios/sample.mp3';
--- a/lib/core/params/bl_question_params.dart
+++ b/lib/core/params/bl_question_params.dart
@ -0,0 +1,13 @@
+class BLQuestionParams {
+  int? id;
+
+  BLQuestionParams({this.id});
+
+  BLQuestionParams copyWith({
+    int? id,
+  }) {
+    return BLQuestionParams(
+        id: id ?? this.id,
+    );
+  }
+}
--- a/lib/core/routers/my_routes.dart
+++ b/lib/core/routers/my_routes.dart
@ -5,6 +5,8 @@ import 'package:shia_game_flutter/features/battle_league/first_part/presentation
 import 'package:shia_game_flutter/features/battle_league/first_part/presentation/ui/battle_league_founded_page.dart';
 import 'package:shia_game_flutter/features/battle_league/first_part/presentation/ui/battle_league_page.dart';
 import 'package:shia_game_flutter/features/battle_league/first_part/presentation/ui/battle_league_topic_page.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/binding/bl_question_binding.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/ui/bl_question_page.dart';
 import 'package:shia_game_flutter/features/home/presentation/binding/home_binding.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/home_page.dart';
 import 'package:shia_game_flutter/features/intro/presentation/binding/intro_binding.dart';
@ -37,6 +39,7 @@ class Routes {
  static const String battleLeagueTopicPage = '/battle_league_topic_page';
  static const String battleLeagueFindingPage = '/battle_league_finding_page';
  static const String battleLeagueFoundedPage = '/battle_league_founded_page';
+  static const String battleLeagueQuestionPage = '/battle_league_question_page';
 }

 final List<GetPage> appPages = [
@ -97,4 +100,9 @@ final List<GetPage> appPages = [
    page: () => const BattleLeagueFoundedPage(),
    binding: BattleLeagueBinding(),
  ),
+  GetPage(
+    name: Routes.battleLeagueQuestionPage,
+    page: () => const BLQuestionPage(),
+    binding: BLQuestionBinding(),
+  ),
 ];
--- a/lib/core/widgets/stepper/my_stepper.dart
+++ b/lib/core/widgets/stepper/my_stepper.dart
@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/core/widgets/stepper/styles/my_step_default_item.dart';
+
+class MyStepper extends StatelessWidget {
+  const MyStepper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 30.h,
+      width: context.widthScreen,
+      alignment: Alignment.center,
+      padding: EdgeInsets.symmetric(horizontal: 16.w),
+      decoration: const ShapeDecoration(
+        shape: StadiumBorder(),
+        color: Color(0XFF3A1570),
+      ),
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Container(
+            height: 3.h,
+            width: context.widthScreen,
+            decoration: const ShapeDecoration(
+              shape: StadiumBorder(),
+              color: Color(0XFF2B0D57),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: List.generate(
+              10,
+              (index) => const MyStepDefaultItem(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/stepper/styles/my_step_correct_item.dart
+++ b/lib/core/widgets/stepper/styles/my_step_correct_item.dart
@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class MyStepCorrectItem extends StatelessWidget {
+  const MyStepCorrectItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 16,
+      width: 16,
+      padding: const EdgeInsets.all(3),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: const Color(0XFF0BA310),
+        border: Border.all(
+          width: 1,
+          color: const Color(0XFF3DE543),
+          strokeAlign: BorderSide.strokeAlignInside,
+        ),
+      ),
+      child: const MyImage(asset: MyAssets.done, color: MyColors.white),
+    );
+  }
+}
--- a/lib/core/widgets/stepper/styles/my_step_current_item.dart
+++ b/lib/core/widgets/stepper/styles/my_step_current_item.dart
@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class MyStepCurrentItem extends StatelessWidget {
+  const MyStepCurrentItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      clipBehavior: Clip.none,
+      alignment: Alignment.center,
+      children: [
+        Container(
+          width: 16,
+          height: 16,
+          padding: const EdgeInsets.all(4),
+          decoration: const BoxDecoration(
+            shape: BoxShape.circle,
+            color: Color(0XFF2B0D57),
+          ),
+          child: Container(
+            decoration: const BoxDecoration(
+              shape: BoxShape.circle,
+              color: MyColors.white,
+            ),
+          ),
+        ),
+        const Positioned(top: -12, child: MyImage(asset: MyAssets.polygon)),
+      ],
+    );
+  }
+}
--- a/lib/core/widgets/stepper/styles/my_step_default_item.dart
+++ b/lib/core/widgets/stepper/styles/my_step_default_item.dart
@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class MyStepDefaultItem extends StatelessWidget {
+  const MyStepDefaultItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 8,
+      height: 8,
+      decoration: const BoxDecoration(
+        shape: BoxShape.circle,
+        color: Color(0XFFA86CFF),
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/stepper/styles/my_step_wrong_item.dart
+++ b/lib/core/widgets/stepper/styles/my_step_wrong_item.dart
@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class MyStepWrongItem extends StatelessWidget {
+  const MyStepWrongItem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 16,
+      width: 16,
+      padding: const EdgeInsets.all(4),
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: const Color(0XFFA30B0B),
+        border: Border.all(
+          width: 1,
+          color: const Color(0XFFE53D3D),
+          strokeAlign: BorderSide.strokeAlignInside,
+        ),
+      ),
+      child: const MyImage(asset: MyAssets.close, color: MyColors.white),
+    );
+  }
+}
--- a/lib/core/widgets/text/gradient_text.dart
+++ b/lib/core/widgets/text/gradient_text.dart
@ -16,6 +16,8 @@ class GradientText extends StatelessWidget {
    this.offset = Offset.zero,
    this.textAlign,
    this.textStyle,
+    this.begin,
+    this.end,
  });

  final String? text;
@ -28,20 +30,22 @@ class GradientText extends StatelessWidget {
  final Offset offset;
  final TextAlign? textAlign;
  final TextStyle? textStyle;
+  final AlignmentGeometry? begin;
+  final AlignmentGeometry? end;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.modulate,
      shaderCallback: (bounds) => LinearGradient(
-        begin: Alignment.topCenter,
-        end: Alignment.bottomCenter,
+        begin: begin ?? Alignment.topCenter,
+        end: end ?? Alignment.bottomCenter,
        colors: gradientColor ?? [
          context.primaryColor,
          context.primaryColor,
          color,
        ],
-      ).createShader(bounds),
+      ).createShader(bounds, textDirection: Directionality.of(context)),
      child: Text(
        text ?? '',
        textAlign: textAlign,
--- a/lib/features/battle_league/question_part/bl_question/data/datasource/bl_question_datasource.dart
+++ b/lib/features/battle_league/question_part/bl_question/data/datasource/bl_question_datasource.dart
@ -0,0 +1,28 @@
+import 'package:shia_game_flutter/core/constants/my_api.dart';
+import 'package:shia_game_flutter/core/network/http_request.dart';
+import 'package:shia_game_flutter/core/params/bl_question_params.dart';
+import 'package:shia_game_flutter/core/response/base_response.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/data/model/bl_question_model.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+
+abstract class IBLQuestionDatasource {
+  Future<BLQuestionEntity> getData({required BLQuestionParams params});
+}
+
+class BLQuestionDatasourceImpl implements IBLQuestionDatasource {
+  final IHttpRequest httpRequest;
+
+  const BLQuestionDatasourceImpl(this.httpRequest);
+
+  @override
+  Future<BLQuestionEntity> getData({required BLQuestionParams params}) async {
+    final response = await httpRequest.get(
+      path: MyApi.baseUrl,
+    );
+
+    return BaseResponse.getData<BLQuestionEntity>(
+      response?['data'],
+      (json) => BLQuestionModel.fromJson(json),
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/data/model/bl_question_model.dart
+++ b/lib/features/battle_league/question_part/bl_question/data/model/bl_question_model.dart
@ -0,0 +1,13 @@
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+
+class BLQuestionModel extends BLQuestionEntity {
+  const BLQuestionModel({
+    super.id,
+  });
+
+  factory BLQuestionModel.fromJson(Map<String, dynamic> json) {
+    return BLQuestionModel(
+      id: json['id'],
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/data/repository_impl/bl_question_repository_impl.dart
+++ b/lib/features/battle_league/question_part/bl_question/data/repository_impl/bl_question_repository_impl.dart
@ -0,0 +1,29 @@
+import 'package:flutter/foundation.dart';
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/bl_question_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/data/datasource/bl_question_datasource.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/repository/bl_question_repository.dart';
+
+class BLQuestionRepositoryImpl implements IBLQuestionRepository {
+  final IBLQuestionDatasource datasource;
+
+  const BLQuestionRepositoryImpl(this.datasource);
+
+  @override
+  Future<DataState<BLQuestionEntity, MyException>> getData({required BLQuestionParams params}) async {
+    try {
+      final BLQuestionEntity response = await datasource.getData(params: params);
+      return DataState.success(response);
+    } on MyException catch (e) {
+      return DataState.error(e);
+    } catch (e) {
+      if (kDebugMode) {
+        rethrow;
+      } else {
+        return DataState.error(MyException(errorMessage: '$e'));
+      }
+    }
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart
+++ b/lib/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart
@ -0,0 +1,14 @@
+import 'package:equatable/equatable.dart';
+
+class BLQuestionEntity extends Equatable {
+  final int? id;
+
+  const BLQuestionEntity({
+    this.id,
+  });
+
+  @override
+  List<Object?> get props => [
+        id,
+      ];
+}
--- a/lib/features/battle_league/question_part/bl_question/domain/repository/bl_question_repository.dart
+++ b/lib/features/battle_league/question_part/bl_question/domain/repository/bl_question_repository.dart
@ -0,0 +1,8 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/bl_question_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+
+abstract class IBLQuestionRepository {
+  Future<DataState<BLQuestionEntity, MyException>> getData({required BLQuestionParams params});
+}
--- a/lib/features/battle_league/question_part/bl_question/domain/usecases/get_bl_question_usecase.dart
+++ b/lib/features/battle_league/question_part/bl_question/domain/usecases/get_bl_question_usecase.dart
@ -0,0 +1,19 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/bl_question_params.dart';
+import 'package:shia_game_flutter/core/usecase/usecase.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/repository/bl_question_repository.dart';
+
+class GetBLQuestionUseCase implements UseCase<BLQuestionEntity, BLQuestionParams> {
+  final IBLQuestionRepository repository;
+
+  const GetBLQuestionUseCase(this.repository);
+
+  @override
+  Future<DataState<BLQuestionEntity, MyException>> call(BLQuestionParams params) {
+    return repository.getData(params: params);
+  }
+}
+
+
--- a/lib/features/battle_league/question_part/bl_question/presentation/binding/bl_question_binding.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/binding/bl_question_binding.dart
@ -0,0 +1,20 @@
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/controller/bl_question_controller.dart';
+import 'package:get/get.dart';
+
+class BLQuestionBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.put<BLQuestionController>(BLQuestionController(Get.find()));
+  }
+
+  Future<void> deleteBindings() async {
+    await Future.wait([
+      Get.delete<BLQuestionController>(),
+    ]);
+  }
+
+  Future<void> refreshBinding() async {
+    await deleteBindings();
+    dependencies();
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/presentation/controller/bl_question_controller.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/controller/bl_question_controller.dart
@ -0,0 +1,54 @@
+import 'package:flutter/cupertino.dart';
+import 'package:shia_game_flutter/core/params/bl_question_params.dart';
+import 'package:shia_game_flutter/core/status/base_status.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/entity/bl_question_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/usecases/get_bl_question_usecase.dart';
+import 'package:get/get.dart';
+
+class BLQuestionController extends GetxController with StateMixin {
+  /// ----- Constructor -----
+  BLQuestionController(this.getBLQuestionUseCase);
+
+  @override
+  void onInit() {
+    super.onInit();
+    change('', status: RxStatus.success());
+  }
+
+  @override
+  void onClose() {
+    textEditingController.dispose();
+    super.onClose();
+  }
+
+  /// ----- UseCases -----
+  final GetBLQuestionUseCase getBLQuestionUseCase;
+
+  /// ----- Variables -----
+  final Rx<BLQuestionParams> bLQuestionParams = Rx(BLQuestionParams());
+  final Rx<BLQuestionEntity> bLQuestionEntity = Rx(const BLQuestionEntity());
+
+  /// ------ Controllers ------
+  final TextEditingController textEditingController = TextEditingController();
+
+  /// ------ Statuses ------
+  final Rx<BaseStatus> getBLQuestionStatus = Rx(const BaseInit());
+
+  /// ------ Functions ------
+
+  /// ------ Api Calls ------
+  Future<void> getBLQuestion() async {
+    change('', status: RxStatus.loading());
+    await getBLQuestionUseCase(bLQuestionParams.value).then(
+      (value) => value.fold(
+        (data) {
+          bLQuestionEntity.value = data;
+          change('', status: RxStatus.success());
+        },
+        (error) {
+          change('', status: RxStatus.error(error.errorMessage));
+        },
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/presentation/ui/bl_question_page.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/ui/bl_question_page.dart
@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:shia_game_flutter/core/widgets/stepper/my_stepper.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/controller/bl_question_controller.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_board.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_timer_ready_widget.dart';
+
+class BLQuestionPage extends GetView<BLQuestionController> {
+  const BLQuestionPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      body: DecoratedBox(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [Color(0XFF390F72), Color(0XFF160C30)],
+          ),
+        ),
+        child: SafeArea(
+          child: Column(
+            children: [
+              QuestionBoard(),
+              MyStepper(),
+              QuestionTimerReadyWidget(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/battle_league_question_avatar.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/battle_league_question_avatar.dart
@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class BattleLeagueQuestionAvatar extends StatelessWidget {
+  const BattleLeagueQuestionAvatar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      spacing: 12.h,
+      children: [
+        Stack(
+          alignment: Alignment.center,
+          clipBehavior: Clip.none,
+          children: [
+            Container(
+              height: 48,
+              width: 48,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: Border.all(width: 2, color: MyColors.white),
+              ),
+              child: const CircleAvatar(
+                foregroundImage: AssetImage(MyAssets.character1),
+              ),
+            ),
+            const Positioned(
+              bottom: -7,
+              child: MyImage(asset: MyAssets.iconIran),
+            ),
+          ],
+        ),
+        Text('Jack William', style: Lexend.bold.copyWith(fontSize: 10.sp)),
+      ],
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_board.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_board.dart
@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/presentation/ui/widgets/battle_league_question_avatar.dart';
+
+class QuestionBoard extends StatelessWidget {
+  const QuestionBoard({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: 30.w),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          const BattleLeagueQuestionAvatar(),
+          Column(
+            children: [
+              Text('6 - 4', style: Lexend.bold.copyWith(fontSize: 30.sp)),
+              Text(
+                'Question 5',
+                style: Lexend.regular.copyWith(
+                  fontSize: 10.sp,
+                  color: const Color(0XFF9273C0),
+                ),
+              ),
+            ],
+          ),
+          const BattleLeagueQuestionAvatar(),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_timer_ready_widget.dart
+++ b/lib/features/battle_league/question_part/bl_question/presentation/ui/widgets/question_timer_ready_widget.dart
@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class QuestionTimerReadyWidget extends StatelessWidget {
+  const QuestionTimerReadyWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      spacing: 12.h,
+      children: [
+        Stack(
+          alignment: Alignment.center,
+          children: [
+            const MyImage(asset: MyAssets.timer),
+            Positioned(
+              left: 28.w,
+              top: 26.h,
+              child: Text(
+                '5',
+                style: Lexend.extraBold.copyWith(
+                  fontSize: 48.sp,
+                  color: const Color(0XFFF3EBFF),
+                ),
+              ),
+            ),
+          ],
+        ),
+        GradientText(
+          text: 'Be Ready',
+          begin: AlignmentDirectional.topStart,
+          end: AlignmentDirectional.bottomEnd,
+          gradientColor: [const Color(0XFFE0CCFF), const Color(0XFF7860A1)],
+          textStyle: Lexend.semiBold.copyWith(fontSize: 16.sp),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/init_bindings.dart
+++ b/lib/init_bindings.dart
@ -9,6 +9,10 @@ import 'package:shia_game_flutter/features/battle_league/first_part/data/datasou
 import 'package:shia_game_flutter/features/battle_league/first_part/data/repository_impl/battle_league_repository_impl.dart';
 import 'package:shia_game_flutter/features/battle_league/first_part/domain/repository/battle_league_repository.dart';
 import 'package:shia_game_flutter/features/battle_league/first_part/domain/usecases/get_battle_league_usecase.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/data/datasource/bl_question_datasource.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/data/repository_impl/bl_question_repository_impl.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/repository/bl_question_repository.dart';
+import 'package:shia_game_flutter/features/battle_league/question_part/bl_question/domain/usecases/get_bl_question_usecase.dart';
 import 'package:shia_game_flutter/features/home/data/datasource/home_datasource.dart';
 import 'package:shia_game_flutter/features/home/data/repository_impl/home_repository_impl.dart';
 import 'package:shia_game_flutter/features/home/domain/repository/home_repository.dart';
@ -77,4 +81,9 @@ void initBindings() {
  Get.lazyPut<IBattleLeagueDatasource>(() => BattleLeagueDatasourceImpl(Get.find()), fenix: true);
  Get.lazyPut<IBattleLeagueRepository>(() => BattleLeagueRepositoryImpl(Get.find()), fenix: true);
  Get.lazyPut<GetBattleLeagueUseCase>(() => GetBattleLeagueUseCase(Get.find()), fenix: true);
+
+  /// ----- BattleLeagueQuestion Feature -----
+  Get.lazyPut<IBLQuestionDatasource>(() => BLQuestionDatasourceImpl(Get.find()), fenix: true);
+  Get.lazyPut<IBLQuestionRepository>(() => BLQuestionRepositoryImpl(Get.find()), fenix: true);
+  Get.lazyPut<GetBLQuestionUseCase>(() => GetBLQuestionUseCase(Get.find()), fenix: true);
 }
--- a/lib/main.dart
+++ b/lib/main.dart
@ -31,7 +31,7 @@ class MainApp extends StatelessWidget {
      fallbackLocale: const Locale('en', 'US'),
      supportedLocales: const [Locale('en', 'US')],
      getPages: appPages,
-      initialRoute: Routes.introPage,
+      initialRoute: Routes.battleLeagueQuestionPage,
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,