diff --git a/frontend/assets/images/facilities/active_ingredients_facility.jpg b/frontend/assets/images/facilities/active_ingredients_facility.jpg new file mode 100644 index 0000000..1dd1ffe Binary files /dev/null and b/frontend/assets/images/facilities/active_ingredients_facility.jpg differ diff --git a/frontend/assets/images/facilities/aircraft_alloys_facility.jpg b/frontend/assets/images/facilities/aircraft_alloys_facility.jpg new file mode 100644 index 0000000..7b8c334 Binary files /dev/null and b/frontend/assets/images/facilities/aircraft_alloys_facility.jpg differ diff --git a/frontend/assets/images/facilities/airframes_facility.jpg b/frontend/assets/images/facilities/airframes_facility.jpg new file mode 100644 index 0000000..c50ccbd Binary files /dev/null and b/frontend/assets/images/facilities/airframes_facility.jpg differ diff --git a/frontend/assets/images/facilities/aluminum_facility.jpg b/frontend/assets/images/facilities/aluminum_facility.jpg new file mode 100644 index 0000000..a671b99 Binary files /dev/null and b/frontend/assets/images/facilities/aluminum_facility.jpg differ diff --git a/frontend/assets/images/facilities/automated_warehouses_facility.jpg b/frontend/assets/images/facilities/automated_warehouses_facility.jpg new file mode 100644 index 0000000..f347821 Binary files /dev/null and b/frontend/assets/images/facilities/automated_warehouses_facility.jpg differ diff --git a/frontend/assets/images/facilities/avionics_facility.jpg b/frontend/assets/images/facilities/avionics_facility.jpg new file mode 100644 index 0000000..46d1a7f Binary files /dev/null and b/frontend/assets/images/facilities/avionics_facility.jpg differ diff --git a/frontend/assets/images/facilities/battery_cells_facility.jpg b/frontend/assets/images/facilities/battery_cells_facility.jpg new file mode 100644 index 0000000..699d4fc Binary files /dev/null and b/frontend/assets/images/facilities/battery_cells_facility.jpg differ diff --git a/frontend/assets/images/facilities/bauxite_facility.jpg b/frontend/assets/images/facilities/bauxite_facility.jpg new file mode 100644 index 0000000..6b7d16f Binary files /dev/null and b/frontend/assets/images/facilities/bauxite_facility.jpg differ diff --git a/frontend/assets/images/facilities/bioreagents_facility.jpg b/frontend/assets/images/facilities/bioreagents_facility.jpg new file mode 100644 index 0000000..c6e0d49 Binary files /dev/null and b/frontend/assets/images/facilities/bioreagents_facility.jpg differ diff --git a/frontend/assets/images/facilities/cardboard_facility.jpg b/frontend/assets/images/facilities/cardboard_facility.jpg new file mode 100644 index 0000000..c9c54bf Binary files /dev/null and b/frontend/assets/images/facilities/cardboard_facility.jpg differ diff --git a/frontend/assets/images/facilities/cargo_aircraft_facility.jpg b/frontend/assets/images/facilities/cargo_aircraft_facility.jpg new file mode 100644 index 0000000..6bd0a76 Binary files /dev/null and b/frontend/assets/images/facilities/cargo_aircraft_facility.jpg differ diff --git a/frontend/assets/images/facilities/cargo_ships_facility.jpg b/frontend/assets/images/facilities/cargo_ships_facility.jpg new file mode 100644 index 0000000..e9ac463 Binary files /dev/null and b/frontend/assets/images/facilities/cargo_ships_facility.jpg differ diff --git a/frontend/assets/images/facilities/cell_cultures_facility.jpg b/frontend/assets/images/facilities/cell_cultures_facility.jpg new file mode 100644 index 0000000..f949002 Binary files /dev/null and b/frontend/assets/images/facilities/cell_cultures_facility.jpg differ diff --git a/frontend/assets/images/facilities/cement_facility.jpg b/frontend/assets/images/facilities/cement_facility.jpg new file mode 100644 index 0000000..82d398f Binary files /dev/null and b/frontend/assets/images/facilities/cement_facility.jpg differ diff --git a/frontend/assets/images/facilities/cheese_facility.jpg b/frontend/assets/images/facilities/cheese_facility.jpg new file mode 100644 index 0000000..5ed053a Binary files /dev/null and b/frontend/assets/images/facilities/cheese_facility.jpg differ diff --git a/frontend/assets/images/facilities/concrete_facility.jpg b/frontend/assets/images/facilities/concrete_facility.jpg new file mode 100644 index 0000000..33bb108 Binary files /dev/null and b/frontend/assets/images/facilities/concrete_facility.jpg differ diff --git a/frontend/assets/images/facilities/consumer_batteries_facility.jpg b/frontend/assets/images/facilities/consumer_batteries_facility.jpg new file mode 100644 index 0000000..3118283 Binary files /dev/null and b/frontend/assets/images/facilities/consumer_batteries_facility.jpg differ diff --git a/frontend/assets/images/facilities/conveyor_systems_facility.jpg b/frontend/assets/images/facilities/conveyor_systems_facility.jpg new file mode 100644 index 0000000..2ebe771 Binary files /dev/null and b/frontend/assets/images/facilities/conveyor_systems_facility.jpg differ diff --git a/frontend/assets/images/facilities/copper_ore_facility.jpg b/frontend/assets/images/facilities/copper_ore_facility.jpg new file mode 100644 index 0000000..00564d4 Binary files /dev/null and b/frontend/assets/images/facilities/copper_ore_facility.jpg differ diff --git a/frontend/assets/images/facilities/cotton_facility.jpg b/frontend/assets/images/facilities/cotton_facility.jpg new file mode 100644 index 0000000..9745e49 Binary files /dev/null and b/frontend/assets/images/facilities/cotton_facility.jpg differ diff --git a/frontend/assets/images/facilities/data_servers_facility.jpg b/frontend/assets/images/facilities/data_servers_facility.jpg new file mode 100644 index 0000000..bfbfa3d Binary files /dev/null and b/frontend/assets/images/facilities/data_servers_facility.jpg differ diff --git a/frontend/assets/images/facilities/diagnostic_systems_facility.jpg b/frontend/assets/images/facilities/diagnostic_systems_facility.jpg new file mode 100644 index 0000000..d3983d7 Binary files /dev/null and b/frontend/assets/images/facilities/diagnostic_systems_facility.jpg differ diff --git a/frontend/assets/images/facilities/electric_bicycles_facility.jpg b/frontend/assets/images/facilities/electric_bicycles_facility.jpg new file mode 100644 index 0000000..5e99a1e Binary files /dev/null and b/frontend/assets/images/facilities/electric_bicycles_facility.jpg differ diff --git a/frontend/assets/images/facilities/electric_motors_facility.jpg b/frontend/assets/images/facilities/electric_motors_facility.jpg new file mode 100644 index 0000000..282821f Binary files /dev/null and b/frontend/assets/images/facilities/electric_motors_facility.jpg differ diff --git a/frontend/assets/images/facilities/electronic_sensors_facility.jpg b/frontend/assets/images/facilities/electronic_sensors_facility.jpg new file mode 100644 index 0000000..2316a13 Binary files /dev/null and b/frontend/assets/images/facilities/electronic_sensors_facility.jpg differ diff --git a/frontend/assets/images/facilities/excavators_facility.jpg b/frontend/assets/images/facilities/excavators_facility.jpg new file mode 100644 index 0000000..9becda3 Binary files /dev/null and b/frontend/assets/images/facilities/excavators_facility.jpg differ diff --git a/frontend/assets/images/facilities/fermentation_media_facility.jpg b/frontend/assets/images/facilities/fermentation_media_facility.jpg new file mode 100644 index 0000000..f7f6835 Binary files /dev/null and b/frontend/assets/images/facilities/fermentation_media_facility.jpg differ diff --git a/frontend/assets/images/facilities/flat_glass_facility.jpg b/frontend/assets/images/facilities/flat_glass_facility.jpg new file mode 100644 index 0000000..fd70f4c Binary files /dev/null and b/frontend/assets/images/facilities/flat_glass_facility.jpg differ diff --git a/frontend/assets/images/facilities/forklifts_facility.jpg b/frontend/assets/images/facilities/forklifts_facility.jpg new file mode 100644 index 0000000..0ded46c Binary files /dev/null and b/frontend/assets/images/facilities/forklifts_facility.jpg differ diff --git a/frontend/assets/images/facilities/garments_facility.jpg b/frontend/assets/images/facilities/garments_facility.jpg new file mode 100644 index 0000000..5f113d7 Binary files /dev/null and b/frontend/assets/images/facilities/garments_facility.jpg differ diff --git a/frontend/assets/images/facilities/gas_turbines_facility.jpg b/frontend/assets/images/facilities/gas_turbines_facility.jpg new file mode 100644 index 0000000..35f0d34 Binary files /dev/null and b/frontend/assets/images/facilities/gas_turbines_facility.jpg differ diff --git a/frontend/assets/images/facilities/grid_batteries_facility.jpg b/frontend/assets/images/facilities/grid_batteries_facility.jpg new file mode 100644 index 0000000..975d9bf Binary files /dev/null and b/frontend/assets/images/facilities/grid_batteries_facility.jpg differ diff --git a/frontend/assets/images/facilities/home_appliances_facility.jpg b/frontend/assets/images/facilities/home_appliances_facility.jpg new file mode 100644 index 0000000..936f2ee Binary files /dev/null and b/frontend/assets/images/facilities/home_appliances_facility.jpg differ diff --git a/frontend/assets/images/facilities/household_cleaners_facility.jpg b/frontend/assets/images/facilities/household_cleaners_facility.jpg new file mode 100644 index 0000000..01ec19c Binary files /dev/null and b/frontend/assets/images/facilities/household_cleaners_facility.jpg differ diff --git a/frontend/assets/images/facilities/hydraulic_pumps_facility.jpg b/frontend/assets/images/facilities/hydraulic_pumps_facility.jpg new file mode 100644 index 0000000..00003a8 Binary files /dev/null and b/frontend/assets/images/facilities/hydraulic_pumps_facility.jpg differ diff --git a/frontend/assets/images/facilities/industrial_computers_facility.jpg b/frontend/assets/images/facilities/industrial_computers_facility.jpg new file mode 100644 index 0000000..93510c4 Binary files /dev/null and b/frontend/assets/images/facilities/industrial_computers_facility.jpg differ diff --git a/frontend/assets/images/facilities/industrial_control_facility.jpg b/frontend/assets/images/facilities/industrial_control_facility.jpg new file mode 100644 index 0000000..8403e37 Binary files /dev/null and b/frontend/assets/images/facilities/industrial_control_facility.jpg differ diff --git a/frontend/assets/images/facilities/industrial_facilities_facility.jpg b/frontend/assets/images/facilities/industrial_facilities_facility.jpg new file mode 100644 index 0000000..7cfe02c Binary files /dev/null and b/frontend/assets/images/facilities/industrial_facilities_facility.jpg differ diff --git a/frontend/assets/images/facilities/industrial_solvents_facility.jpg b/frontend/assets/images/facilities/industrial_solvents_facility.jpg new file mode 100644 index 0000000..36b1e00 Binary files /dev/null and b/frontend/assets/images/facilities/industrial_solvents_facility.jpg differ diff --git a/frontend/assets/images/facilities/insulation_facility.jpg b/frontend/assets/images/facilities/insulation_facility.jpg new file mode 100644 index 0000000..675d536 Binary files /dev/null and b/frontend/assets/images/facilities/insulation_facility.jpg differ diff --git a/frontend/assets/images/facilities/jet_engines_facility.jpg b/frontend/assets/images/facilities/jet_engines_facility.jpg new file mode 100644 index 0000000..c73f319 Binary files /dev/null and b/frontend/assets/images/facilities/jet_engines_facility.jpg differ diff --git a/frontend/assets/images/facilities/limestone_facility.jpg b/frontend/assets/images/facilities/limestone_facility.jpg new file mode 100644 index 0000000..b36a150 Binary files /dev/null and b/frontend/assets/images/facilities/limestone_facility.jpg differ diff --git a/frontend/assets/images/facilities/lithium_ore_facility.jpg b/frontend/assets/images/facilities/lithium_ore_facility.jpg new file mode 100644 index 0000000..d1ffd7d Binary files /dev/null and b/frontend/assets/images/facilities/lithium_ore_facility.jpg differ diff --git a/frontend/assets/images/facilities/locomotives_facility.jpg b/frontend/assets/images/facilities/locomotives_facility.jpg new file mode 100644 index 0000000..4a839ec Binary files /dev/null and b/frontend/assets/images/facilities/locomotives_facility.jpg differ diff --git a/frontend/assets/images/facilities/machine_tools_facility.jpg b/frontend/assets/images/facilities/machine_tools_facility.jpg new file mode 100644 index 0000000..ce02031 Binary files /dev/null and b/frontend/assets/images/facilities/machine_tools_facility.jpg differ diff --git a/frontend/assets/images/facilities/marine_hulls_facility.jpg b/frontend/assets/images/facilities/marine_hulls_facility.jpg new file mode 100644 index 0000000..98a1e51 Binary files /dev/null and b/frontend/assets/images/facilities/marine_hulls_facility.jpg differ diff --git a/frontend/assets/images/facilities/medical_devices_facility.jpg b/frontend/assets/images/facilities/medical_devices_facility.jpg new file mode 100644 index 0000000..943a951 Binary files /dev/null and b/frontend/assets/images/facilities/medical_devices_facility.jpg differ diff --git a/frontend/assets/images/facilities/milk_facility.jpg b/frontend/assets/images/facilities/milk_facility.jpg new file mode 100644 index 0000000..0325447 Binary files /dev/null and b/frontend/assets/images/facilities/milk_facility.jpg differ diff --git a/frontend/assets/images/facilities/modular_buildings_facility.jpg b/frontend/assets/images/facilities/modular_buildings_facility.jpg new file mode 100644 index 0000000..b5a44c5 Binary files /dev/null and b/frontend/assets/images/facilities/modular_buildings_facility.jpg differ diff --git a/frontend/assets/images/facilities/natural_gas_facility.jpg b/frontend/assets/images/facilities/natural_gas_facility.jpg new file mode 100644 index 0000000..cc52ebf Binary files /dev/null and b/frontend/assets/images/facilities/natural_gas_facility.jpg differ diff --git a/frontend/assets/images/facilities/packaging_facility.jpg b/frontend/assets/images/facilities/packaging_facility.jpg new file mode 100644 index 0000000..86a0408 Binary files /dev/null and b/frontend/assets/images/facilities/packaging_facility.jpg differ diff --git a/frontend/assets/images/facilities/power_modules_facility.jpg b/frontend/assets/images/facilities/power_modules_facility.jpg new file mode 100644 index 0000000..f373be3 Binary files /dev/null and b/frontend/assets/images/facilities/power_modules_facility.jpg differ diff --git a/frontend/assets/images/facilities/precision_gears_facility.jpg b/frontend/assets/images/facilities/precision_gears_facility.jpg new file mode 100644 index 0000000..d5f281f Binary files /dev/null and b/frontend/assets/images/facilities/precision_gears_facility.jpg differ diff --git a/frontend/assets/images/facilities/precision_robots_facility.jpg b/frontend/assets/images/facilities/precision_robots_facility.jpg new file mode 100644 index 0000000..ceabdbb Binary files /dev/null and b/frontend/assets/images/facilities/precision_robots_facility.jpg differ diff --git a/frontend/assets/images/facilities/premium_appliances_facility.jpg b/frontend/assets/images/facilities/premium_appliances_facility.jpg new file mode 100644 index 0000000..8fbc48f Binary files /dev/null and b/frontend/assets/images/facilities/premium_appliances_facility.jpg differ diff --git a/frontend/assets/images/facilities/refined_copper_facility.jpg b/frontend/assets/images/facilities/refined_copper_facility.jpg new file mode 100644 index 0000000..e9c7bc7 Binary files /dev/null and b/frontend/assets/images/facilities/refined_copper_facility.jpg differ diff --git a/frontend/assets/images/facilities/reinforced_panels_facility.jpg b/frontend/assets/images/facilities/reinforced_panels_facility.jpg new file mode 100644 index 0000000..d5b3837 Binary files /dev/null and b/frontend/assets/images/facilities/reinforced_panels_facility.jpg differ diff --git a/frontend/assets/images/facilities/robotic_arms_facility.jpg b/frontend/assets/images/facilities/robotic_arms_facility.jpg new file mode 100644 index 0000000..34fd29c Binary files /dev/null and b/frontend/assets/images/facilities/robotic_arms_facility.jpg differ diff --git a/frontend/assets/images/facilities/servo_drives_facility.jpg b/frontend/assets/images/facilities/servo_drives_facility.jpg new file mode 100644 index 0000000..0fe6be1 Binary files /dev/null and b/frontend/assets/images/facilities/servo_drives_facility.jpg differ diff --git a/frontend/assets/images/facilities/ship_engines_facility.jpg b/frontend/assets/images/facilities/ship_engines_facility.jpg new file mode 100644 index 0000000..9e07908 Binary files /dev/null and b/frontend/assets/images/facilities/ship_engines_facility.jpg differ diff --git a/frontend/assets/images/facilities/smart_factories_facility.jpg b/frontend/assets/images/facilities/smart_factories_facility.jpg new file mode 100644 index 0000000..b304968 Binary files /dev/null and b/frontend/assets/images/facilities/smart_factories_facility.jpg differ diff --git a/frontend/assets/images/facilities/smart_home_devices_facility.jpg b/frontend/assets/images/facilities/smart_home_devices_facility.jpg new file mode 100644 index 0000000..59d301e Binary files /dev/null and b/frontend/assets/images/facilities/smart_home_devices_facility.jpg differ diff --git a/frontend/assets/images/facilities/solar_panels_facility.jpg b/frontend/assets/images/facilities/solar_panels_facility.jpg new file mode 100644 index 0000000..90062ed Binary files /dev/null and b/frontend/assets/images/facilities/solar_panels_facility.jpg differ diff --git a/frontend/assets/images/facilities/sterile_vials_facility.jpg b/frontend/assets/images/facilities/sterile_vials_facility.jpg new file mode 100644 index 0000000..0d1261a Binary files /dev/null and b/frontend/assets/images/facilities/sterile_vials_facility.jpg differ diff --git a/frontend/assets/images/facilities/synthetic_rubber_facility.jpg b/frontend/assets/images/facilities/synthetic_rubber_facility.jpg new file mode 100644 index 0000000..9144d3a Binary files /dev/null and b/frontend/assets/images/facilities/synthetic_rubber_facility.jpg differ diff --git a/frontend/assets/images/facilities/telecom_equipment_facility.jpg b/frontend/assets/images/facilities/telecom_equipment_facility.jpg new file mode 100644 index 0000000..c960960 Binary files /dev/null and b/frontend/assets/images/facilities/telecom_equipment_facility.jpg differ diff --git a/frontend/assets/images/facilities/textiles_facility.jpg b/frontend/assets/images/facilities/textiles_facility.jpg new file mode 100644 index 0000000..e5d238d Binary files /dev/null and b/frontend/assets/images/facilities/textiles_facility.jpg differ diff --git a/frontend/assets/images/facilities/thermal_power_facility.jpg b/frontend/assets/images/facilities/thermal_power_facility.jpg new file mode 100644 index 0000000..444ec1e Binary files /dev/null and b/frontend/assets/images/facilities/thermal_power_facility.jpg differ diff --git a/frontend/assets/images/facilities/transformers_facility.jpg b/frontend/assets/images/facilities/transformers_facility.jpg new file mode 100644 index 0000000..1630ee5 Binary files /dev/null and b/frontend/assets/images/facilities/transformers_facility.jpg differ diff --git a/frontend/assets/images/facilities/upholstery_facility.jpg b/frontend/assets/images/facilities/upholstery_facility.jpg new file mode 100644 index 0000000..e416a04 Binary files /dev/null and b/frontend/assets/images/facilities/upholstery_facility.jpg differ diff --git a/frontend/assets/images/facilities/vaccines_facility.jpg b/frontend/assets/images/facilities/vaccines_facility.jpg new file mode 100644 index 0000000..924395e Binary files /dev/null and b/frontend/assets/images/facilities/vaccines_facility.jpg differ diff --git a/frontend/assets/images/facilities/wind_turbines_facility.jpg b/frontend/assets/images/facilities/wind_turbines_facility.jpg new file mode 100644 index 0000000..356a188 Binary files /dev/null and b/frontend/assets/images/facilities/wind_turbines_facility.jpg differ diff --git a/frontend/assets/images/products/active_ingredients_product.jpg b/frontend/assets/images/products/active_ingredients_product.jpg new file mode 100644 index 0000000..75aec5c Binary files /dev/null and b/frontend/assets/images/products/active_ingredients_product.jpg differ diff --git a/frontend/assets/images/products/aircraft_alloys_product.jpg b/frontend/assets/images/products/aircraft_alloys_product.jpg new file mode 100644 index 0000000..b81bac4 Binary files /dev/null and b/frontend/assets/images/products/aircraft_alloys_product.jpg differ diff --git a/frontend/assets/images/products/airframes_product.jpg b/frontend/assets/images/products/airframes_product.jpg new file mode 100644 index 0000000..79e66e4 Binary files /dev/null and b/frontend/assets/images/products/airframes_product.jpg differ diff --git a/frontend/assets/images/products/aluminum_product.jpg b/frontend/assets/images/products/aluminum_product.jpg new file mode 100644 index 0000000..5255c3b Binary files /dev/null and b/frontend/assets/images/products/aluminum_product.jpg differ diff --git a/frontend/assets/images/products/automated_warehouses_product.jpg b/frontend/assets/images/products/automated_warehouses_product.jpg new file mode 100644 index 0000000..bcf5830 Binary files /dev/null and b/frontend/assets/images/products/automated_warehouses_product.jpg differ diff --git a/frontend/assets/images/products/avionics_product.jpg b/frontend/assets/images/products/avionics_product.jpg new file mode 100644 index 0000000..e695c82 Binary files /dev/null and b/frontend/assets/images/products/avionics_product.jpg differ diff --git a/frontend/assets/images/products/battery_cells_product.jpg b/frontend/assets/images/products/battery_cells_product.jpg new file mode 100644 index 0000000..8bc0e85 Binary files /dev/null and b/frontend/assets/images/products/battery_cells_product.jpg differ diff --git a/frontend/assets/images/products/bauxite_product.jpg b/frontend/assets/images/products/bauxite_product.jpg new file mode 100644 index 0000000..5175f6f Binary files /dev/null and b/frontend/assets/images/products/bauxite_product.jpg differ diff --git a/frontend/assets/images/products/bioreagents_product.jpg b/frontend/assets/images/products/bioreagents_product.jpg new file mode 100644 index 0000000..f5f47cd Binary files /dev/null and b/frontend/assets/images/products/bioreagents_product.jpg differ diff --git a/frontend/assets/images/products/cardboard_product.jpg b/frontend/assets/images/products/cardboard_product.jpg new file mode 100644 index 0000000..4725ff5 Binary files /dev/null and b/frontend/assets/images/products/cardboard_product.jpg differ diff --git a/frontend/assets/images/products/cargo_aircraft_product.jpg b/frontend/assets/images/products/cargo_aircraft_product.jpg new file mode 100644 index 0000000..4343d1e Binary files /dev/null and b/frontend/assets/images/products/cargo_aircraft_product.jpg differ diff --git a/frontend/assets/images/products/cargo_ships_product.jpg b/frontend/assets/images/products/cargo_ships_product.jpg new file mode 100644 index 0000000..d6a3580 Binary files /dev/null and b/frontend/assets/images/products/cargo_ships_product.jpg differ diff --git a/frontend/assets/images/products/cell_cultures_product.jpg b/frontend/assets/images/products/cell_cultures_product.jpg new file mode 100644 index 0000000..63243f7 Binary files /dev/null and b/frontend/assets/images/products/cell_cultures_product.jpg differ diff --git a/frontend/assets/images/products/cement_product.jpg b/frontend/assets/images/products/cement_product.jpg new file mode 100644 index 0000000..fc57c19 Binary files /dev/null and b/frontend/assets/images/products/cement_product.jpg differ diff --git a/frontend/assets/images/products/cheese_product.jpg b/frontend/assets/images/products/cheese_product.jpg new file mode 100644 index 0000000..f8f209d Binary files /dev/null and b/frontend/assets/images/products/cheese_product.jpg differ diff --git a/frontend/assets/images/products/concrete_product.jpg b/frontend/assets/images/products/concrete_product.jpg new file mode 100644 index 0000000..26e6e6a Binary files /dev/null and b/frontend/assets/images/products/concrete_product.jpg differ diff --git a/frontend/assets/images/products/consumer_batteries_product.jpg b/frontend/assets/images/products/consumer_batteries_product.jpg new file mode 100644 index 0000000..b119f2e Binary files /dev/null and b/frontend/assets/images/products/consumer_batteries_product.jpg differ diff --git a/frontend/assets/images/products/conveyor_systems_product.jpg b/frontend/assets/images/products/conveyor_systems_product.jpg new file mode 100644 index 0000000..f3e8066 Binary files /dev/null and b/frontend/assets/images/products/conveyor_systems_product.jpg differ diff --git a/frontend/assets/images/products/copper_ore_product.jpg b/frontend/assets/images/products/copper_ore_product.jpg new file mode 100644 index 0000000..11ead06 Binary files /dev/null and b/frontend/assets/images/products/copper_ore_product.jpg differ diff --git a/frontend/assets/images/products/cotton_product.jpg b/frontend/assets/images/products/cotton_product.jpg new file mode 100644 index 0000000..c4d217a Binary files /dev/null and b/frontend/assets/images/products/cotton_product.jpg differ diff --git a/frontend/assets/images/products/data_servers_product.jpg b/frontend/assets/images/products/data_servers_product.jpg new file mode 100644 index 0000000..b59c890 Binary files /dev/null and b/frontend/assets/images/products/data_servers_product.jpg differ diff --git a/frontend/assets/images/products/diagnostic_systems_product.jpg b/frontend/assets/images/products/diagnostic_systems_product.jpg new file mode 100644 index 0000000..c3a092e Binary files /dev/null and b/frontend/assets/images/products/diagnostic_systems_product.jpg differ diff --git a/frontend/assets/images/products/electric_bicycles_product.jpg b/frontend/assets/images/products/electric_bicycles_product.jpg new file mode 100644 index 0000000..a8270c1 Binary files /dev/null and b/frontend/assets/images/products/electric_bicycles_product.jpg differ diff --git a/frontend/assets/images/products/electric_motors_product.jpg b/frontend/assets/images/products/electric_motors_product.jpg new file mode 100644 index 0000000..f979bf9 Binary files /dev/null and b/frontend/assets/images/products/electric_motors_product.jpg differ diff --git a/frontend/assets/images/products/electronic_sensors_product.jpg b/frontend/assets/images/products/electronic_sensors_product.jpg new file mode 100644 index 0000000..2a97f2f Binary files /dev/null and b/frontend/assets/images/products/electronic_sensors_product.jpg differ diff --git a/frontend/assets/images/products/excavators_product.jpg b/frontend/assets/images/products/excavators_product.jpg new file mode 100644 index 0000000..bc0cde7 Binary files /dev/null and b/frontend/assets/images/products/excavators_product.jpg differ diff --git a/frontend/assets/images/products/fermentation_media_product.jpg b/frontend/assets/images/products/fermentation_media_product.jpg new file mode 100644 index 0000000..cabe043 Binary files /dev/null and b/frontend/assets/images/products/fermentation_media_product.jpg differ diff --git a/frontend/assets/images/products/flat_glass_product.jpg b/frontend/assets/images/products/flat_glass_product.jpg new file mode 100644 index 0000000..76ec62f Binary files /dev/null and b/frontend/assets/images/products/flat_glass_product.jpg differ diff --git a/frontend/assets/images/products/forklifts_product.jpg b/frontend/assets/images/products/forklifts_product.jpg new file mode 100644 index 0000000..9ed6fbe Binary files /dev/null and b/frontend/assets/images/products/forklifts_product.jpg differ diff --git a/frontend/assets/images/products/garments_product.jpg b/frontend/assets/images/products/garments_product.jpg new file mode 100644 index 0000000..5f9dd17 Binary files /dev/null and b/frontend/assets/images/products/garments_product.jpg differ diff --git a/frontend/assets/images/products/gas_turbines_product.jpg b/frontend/assets/images/products/gas_turbines_product.jpg new file mode 100644 index 0000000..63a46b9 Binary files /dev/null and b/frontend/assets/images/products/gas_turbines_product.jpg differ diff --git a/frontend/assets/images/products/grid_batteries_product.jpg b/frontend/assets/images/products/grid_batteries_product.jpg new file mode 100644 index 0000000..136313c Binary files /dev/null and b/frontend/assets/images/products/grid_batteries_product.jpg differ diff --git a/frontend/assets/images/products/home_appliances_product.jpg b/frontend/assets/images/products/home_appliances_product.jpg new file mode 100644 index 0000000..4506724 Binary files /dev/null and b/frontend/assets/images/products/home_appliances_product.jpg differ diff --git a/frontend/assets/images/products/household_cleaners_product.jpg b/frontend/assets/images/products/household_cleaners_product.jpg new file mode 100644 index 0000000..0de8c15 Binary files /dev/null and b/frontend/assets/images/products/household_cleaners_product.jpg differ diff --git a/frontend/assets/images/products/hydraulic_pumps_product.jpg b/frontend/assets/images/products/hydraulic_pumps_product.jpg new file mode 100644 index 0000000..360b050 Binary files /dev/null and b/frontend/assets/images/products/hydraulic_pumps_product.jpg differ diff --git a/frontend/assets/images/products/industrial_computers_product.jpg b/frontend/assets/images/products/industrial_computers_product.jpg new file mode 100644 index 0000000..2237281 Binary files /dev/null and b/frontend/assets/images/products/industrial_computers_product.jpg differ diff --git a/frontend/assets/images/products/industrial_control_product.jpg b/frontend/assets/images/products/industrial_control_product.jpg new file mode 100644 index 0000000..3301a0b Binary files /dev/null and b/frontend/assets/images/products/industrial_control_product.jpg differ diff --git a/frontend/assets/images/products/industrial_facilities_product.jpg b/frontend/assets/images/products/industrial_facilities_product.jpg new file mode 100644 index 0000000..6bf5745 Binary files /dev/null and b/frontend/assets/images/products/industrial_facilities_product.jpg differ diff --git a/frontend/assets/images/products/industrial_solvents_product.jpg b/frontend/assets/images/products/industrial_solvents_product.jpg new file mode 100644 index 0000000..012dcfc Binary files /dev/null and b/frontend/assets/images/products/industrial_solvents_product.jpg differ diff --git a/frontend/assets/images/products/insulation_product.jpg b/frontend/assets/images/products/insulation_product.jpg new file mode 100644 index 0000000..bf2692f Binary files /dev/null and b/frontend/assets/images/products/insulation_product.jpg differ diff --git a/frontend/assets/images/products/jet_engines_product.jpg b/frontend/assets/images/products/jet_engines_product.jpg new file mode 100644 index 0000000..9101218 Binary files /dev/null and b/frontend/assets/images/products/jet_engines_product.jpg differ diff --git a/frontend/assets/images/products/limestone_product.jpg b/frontend/assets/images/products/limestone_product.jpg new file mode 100644 index 0000000..624aea5 Binary files /dev/null and b/frontend/assets/images/products/limestone_product.jpg differ diff --git a/frontend/assets/images/products/lithium_ore_product.jpg b/frontend/assets/images/products/lithium_ore_product.jpg new file mode 100644 index 0000000..6871942 Binary files /dev/null and b/frontend/assets/images/products/lithium_ore_product.jpg differ diff --git a/frontend/assets/images/products/locomotives_product.jpg b/frontend/assets/images/products/locomotives_product.jpg new file mode 100644 index 0000000..a3f4b42 Binary files /dev/null and b/frontend/assets/images/products/locomotives_product.jpg differ diff --git a/frontend/assets/images/products/machine_tools_product.jpg b/frontend/assets/images/products/machine_tools_product.jpg new file mode 100644 index 0000000..d34a852 Binary files /dev/null and b/frontend/assets/images/products/machine_tools_product.jpg differ diff --git a/frontend/assets/images/products/marine_hulls_product.jpg b/frontend/assets/images/products/marine_hulls_product.jpg new file mode 100644 index 0000000..dbf83a5 Binary files /dev/null and b/frontend/assets/images/products/marine_hulls_product.jpg differ diff --git a/frontend/assets/images/products/medical_devices_product.jpg b/frontend/assets/images/products/medical_devices_product.jpg new file mode 100644 index 0000000..90e568c Binary files /dev/null and b/frontend/assets/images/products/medical_devices_product.jpg differ diff --git a/frontend/assets/images/products/milk_product.jpg b/frontend/assets/images/products/milk_product.jpg new file mode 100644 index 0000000..1fcd70a Binary files /dev/null and b/frontend/assets/images/products/milk_product.jpg differ diff --git a/frontend/assets/images/products/modular_buildings_product.jpg b/frontend/assets/images/products/modular_buildings_product.jpg new file mode 100644 index 0000000..9288e2d Binary files /dev/null and b/frontend/assets/images/products/modular_buildings_product.jpg differ diff --git a/frontend/assets/images/products/natural_gas_product.jpg b/frontend/assets/images/products/natural_gas_product.jpg new file mode 100644 index 0000000..344d7a9 Binary files /dev/null and b/frontend/assets/images/products/natural_gas_product.jpg differ diff --git a/frontend/assets/images/products/packaging_product.jpg b/frontend/assets/images/products/packaging_product.jpg new file mode 100644 index 0000000..18f0268 Binary files /dev/null and b/frontend/assets/images/products/packaging_product.jpg differ diff --git a/frontend/assets/images/products/power_modules_product.jpg b/frontend/assets/images/products/power_modules_product.jpg new file mode 100644 index 0000000..435cfaa Binary files /dev/null and b/frontend/assets/images/products/power_modules_product.jpg differ diff --git a/frontend/assets/images/products/precision_gears_product.jpg b/frontend/assets/images/products/precision_gears_product.jpg new file mode 100644 index 0000000..b8cbdf6 Binary files /dev/null and b/frontend/assets/images/products/precision_gears_product.jpg differ diff --git a/frontend/assets/images/products/precision_robots_product.jpg b/frontend/assets/images/products/precision_robots_product.jpg new file mode 100644 index 0000000..1b4346d Binary files /dev/null and b/frontend/assets/images/products/precision_robots_product.jpg differ diff --git a/frontend/assets/images/products/premium_appliances_product.jpg b/frontend/assets/images/products/premium_appliances_product.jpg new file mode 100644 index 0000000..79ea274 Binary files /dev/null and b/frontend/assets/images/products/premium_appliances_product.jpg differ diff --git a/frontend/assets/images/products/refined_copper_product.jpg b/frontend/assets/images/products/refined_copper_product.jpg new file mode 100644 index 0000000..6fb7f0b Binary files /dev/null and b/frontend/assets/images/products/refined_copper_product.jpg differ diff --git a/frontend/assets/images/products/reinforced_panels_product.jpg b/frontend/assets/images/products/reinforced_panels_product.jpg new file mode 100644 index 0000000..9299a68 Binary files /dev/null and b/frontend/assets/images/products/reinforced_panels_product.jpg differ diff --git a/frontend/assets/images/products/robotic_arms_product.jpg b/frontend/assets/images/products/robotic_arms_product.jpg new file mode 100644 index 0000000..b87849e Binary files /dev/null and b/frontend/assets/images/products/robotic_arms_product.jpg differ diff --git a/frontend/assets/images/products/servo_drives_product.jpg b/frontend/assets/images/products/servo_drives_product.jpg new file mode 100644 index 0000000..98ce1b5 Binary files /dev/null and b/frontend/assets/images/products/servo_drives_product.jpg differ diff --git a/frontend/assets/images/products/ship_engines_product.jpg b/frontend/assets/images/products/ship_engines_product.jpg new file mode 100644 index 0000000..75410c5 Binary files /dev/null and b/frontend/assets/images/products/ship_engines_product.jpg differ diff --git a/frontend/assets/images/products/smart_factories_product.jpg b/frontend/assets/images/products/smart_factories_product.jpg new file mode 100644 index 0000000..94010aa Binary files /dev/null and b/frontend/assets/images/products/smart_factories_product.jpg differ diff --git a/frontend/assets/images/products/smart_home_devices_product.jpg b/frontend/assets/images/products/smart_home_devices_product.jpg new file mode 100644 index 0000000..71dc2cc Binary files /dev/null and b/frontend/assets/images/products/smart_home_devices_product.jpg differ diff --git a/frontend/assets/images/products/solar_panels_product.jpg b/frontend/assets/images/products/solar_panels_product.jpg new file mode 100644 index 0000000..4c08d25 Binary files /dev/null and b/frontend/assets/images/products/solar_panels_product.jpg differ diff --git a/frontend/assets/images/products/sterile_vials_product.jpg b/frontend/assets/images/products/sterile_vials_product.jpg new file mode 100644 index 0000000..9aeea4a Binary files /dev/null and b/frontend/assets/images/products/sterile_vials_product.jpg differ diff --git a/frontend/assets/images/products/synthetic_rubber_product.jpg b/frontend/assets/images/products/synthetic_rubber_product.jpg new file mode 100644 index 0000000..c5eba09 Binary files /dev/null and b/frontend/assets/images/products/synthetic_rubber_product.jpg differ diff --git a/frontend/assets/images/products/telecom_equipment_product.jpg b/frontend/assets/images/products/telecom_equipment_product.jpg new file mode 100644 index 0000000..e12014e Binary files /dev/null and b/frontend/assets/images/products/telecom_equipment_product.jpg differ diff --git a/frontend/assets/images/products/textiles_product.jpg b/frontend/assets/images/products/textiles_product.jpg new file mode 100644 index 0000000..c0ae366 Binary files /dev/null and b/frontend/assets/images/products/textiles_product.jpg differ diff --git a/frontend/assets/images/products/thermal_power_product.jpg b/frontend/assets/images/products/thermal_power_product.jpg new file mode 100644 index 0000000..b9691a8 Binary files /dev/null and b/frontend/assets/images/products/thermal_power_product.jpg differ diff --git a/frontend/assets/images/products/transformers_product.jpg b/frontend/assets/images/products/transformers_product.jpg new file mode 100644 index 0000000..c7b7f1f Binary files /dev/null and b/frontend/assets/images/products/transformers_product.jpg differ diff --git a/frontend/assets/images/products/upholstery_product.jpg b/frontend/assets/images/products/upholstery_product.jpg new file mode 100644 index 0000000..42e26d2 Binary files /dev/null and b/frontend/assets/images/products/upholstery_product.jpg differ diff --git a/frontend/assets/images/products/vaccines_product.jpg b/frontend/assets/images/products/vaccines_product.jpg new file mode 100644 index 0000000..3950eac Binary files /dev/null and b/frontend/assets/images/products/vaccines_product.jpg differ diff --git a/frontend/assets/images/products/wind_turbines_product.jpg b/frontend/assets/images/products/wind_turbines_product.jpg new file mode 100644 index 0000000..b12af6d Binary files /dev/null and b/frontend/assets/images/products/wind_turbines_product.jpg differ diff --git a/frontend/css/views/production.css b/frontend/css/views/production.css index d099ead..6c5ad8c 100644 --- a/frontend/css/views/production.css +++ b/frontend/css/views/production.css @@ -75,9 +75,10 @@ min-height: 440px; gap: 10px; cursor: pointer; - transition: border-color 0.2s, box-shadow 0.2s; + transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; position: relative; box-sizing: border-box; + overflow: hidden; } .facility-card:hover { @@ -90,31 +91,72 @@ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } -/* Card Navigation Highlight Pulse */ -.facility-card.card-highlight-pulse { - animation: cardPulseAnim 1.5s ease-out; +/* Card Backdrop Art (Dimmed Photographic Watermark) */ +.card-backdrop-art { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + overflow: hidden; + pointer-events: none; + z-index: 0; } -@keyframes cardPulseAnim { - 0% { - box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); - border-color: var(--primary-blue); - transform: scale(1.02); - } - 50% { - box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); - border-color: var(--primary-blue); - transform: scale(1.01); - } - 100% { - box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); - transform: scale(1.0); - } +.card-backdrop-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 25%; + opacity: 0.08; + transform: scale(1.05); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +[data-theme="dark"] .card-backdrop-img { + opacity: 0.12; + filter: brightness(0.9) contrast(1.1); +} + +.card-backdrop-overlay { + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 60%, rgba(255, 255, 255, 0.6) 100%); + pointer-events: none; +} + +[data-theme="dark"] .card-backdrop-overlay { + background: linear-gradient(135deg, rgba(17, 24, 39, 0.5) 0%, transparent 60%, rgba(17, 24, 39, 0.7) 100%); +} + +.facility-card:hover .card-backdrop-img { + opacity: 0.14; + transform: scale(1.08); +} + +[data-theme="dark"] .facility-card:hover .card-backdrop-img { + opacity: 0.20; } .facility-card.locked-card { - opacity: 0.85; - background: #fbfcfe; + opacity: 0.88; + background: var(--bg-surface-sub); +} + +.facility-card.locked-card .card-backdrop-img { + filter: grayscale(45%) contrast(0.95); + opacity: 0.06; +} + +[data-theme="dark"] .facility-card.locked-card .card-backdrop-img { + opacity: 0.09; +} + +/* Ensure all interactive card contents sit above the background watermark */ +.facility-card > *:not(.card-backdrop-art) { + position: relative; + z-index: 1; } .facility-header { @@ -592,3 +634,257 @@ white-space: nowrap; } +/* ========================================================================== + COMPACT PRODUCTION GRID VIEW & COMPACT FACILITY CARDS + ========================================================================== */ + +.compact-production-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 10px; + align-items: stretch; +} + +@media (max-width: 600px) { + .compact-production-grid { + grid-template-columns: 1fr; + gap: 8px; + } +} + +.compact-card { + background: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: 8px 12px; + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + gap: 12px; + min-height: 82px; + cursor: pointer; + position: relative; + box-sizing: border-box; + overflow: hidden; + transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; +} + +.compact-card:hover { + border-color: #cbd5e1; + box-shadow: var(--shadow-md); + transform: translateY(-1px); +} + +.compact-card.selected { + border-color: var(--primary-blue); + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); +} + +.compact-card.locked-compact-card { + background: var(--bg-surface-sub); + opacity: 0.88; +} + +/* Miniature cycle bar strip across the top of compact cards */ +.compact-progress-bar { + position: absolute; + top: 0; + left: 0; + height: 3px; + transition: width 0.1s linear; + border-top-left-radius: var(--radius-md); + z-index: 2; +} + +/* Thumbnail Container */ +.compact-thumb-wrap { + width: 58px; + height: 58px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + background: var(--bg-surface-sub); + overflow: hidden; + position: relative; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.compact-thumb-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.compact-thumb-fallback { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.4rem; +} + +.compact-tier-pill { + position: absolute; + bottom: 2px; + right: 2px; + font-size: 0.60rem; + font-weight: 800; + background: rgba(15, 23, 42, 0.8); + color: #ffffff; + padding: 1px 4px; + border-radius: 3px; + line-height: 1; +} + +.compact-thumb-lock-overlay { + position: absolute; + inset: 0; + background: rgba(15, 23, 42, 0.6); + display: flex; + align-items: center; + justify-content: center; + color: #f8fafc; + font-size: 1.2rem; +} + +/* Middle Information Column */ +.compact-info-col { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 3px; +} + +.compact-meta-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; +} + +.compact-sector-badge { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.compact-status-badge { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 0.62rem; + font-weight: 700; + padding: 1px 5px; + border-radius: 8px; + white-space: nowrap; +} + +.compact-status-badge iconify-icon { + font-size: 0.75rem; +} + +.compact-title-row { + display: flex; + align-items: baseline; + gap: 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.compact-name { + font-size: 0.88rem; + font-weight: 700; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.2; +} + +.compact-lines-badge { + font-size: 0.70rem; + color: var(--text-secondary); +} + +.compact-sub { + font-size: 0.68rem; + color: var(--text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.compact-stats-row { + display: flex; + align-items: center; + gap: 5px; + font-size: 0.72rem; + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.compact-stat-item { + display: inline-flex; + align-items: center; + gap: 3px; +} + +.compact-stat-item iconify-icon { + font-size: 0.80rem; + color: var(--text-muted); +} + +.compact-stat-divider { + color: var(--border-subtle); +} + +/* Right Actions Column */ +.compact-actions-col { + display: flex; + flex-direction: column; + gap: 5px; + align-items: flex-end; + flex-shrink: 0; +} + +.btn-compact-expand { + padding: 5px 8px !important; + font-size: 0.72rem !important; + gap: 4px; + white-space: nowrap; + border-radius: var(--radius-sm); + min-width: 90px; +} + +.btn-compact-expand iconify-icon { + font-size: 0.85rem; +} + +.btn-compact-unlock { + padding: 6px 10px !important; + font-size: 0.72rem !important; + gap: 4px; + white-space: nowrap; + border-radius: var(--radius-sm); +} + +.btn-compact-detail { + height: 22px !important; + padding: 2px 6px !important; + font-size: 0.65rem !important; + gap: 2px !important; +} + + diff --git a/frontend/index.html b/frontend/index.html index 94cf058..3a1e98b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -40,6 +40,10 @@ Dark + + + + + `; + } + + const nextM = getNextMilestone(pState.lines || 0); + const rates = getProductOutputRates(p, pState, state); + const milestoneMult = rates.milestoneMult || getUnitMilestoneMultiplier(pState.lines || 0); + const calc = calculateMultiCost(p.baseFacilityCost, pState.lines || 0, buyMode); + const canAffordBuy = state.cash >= calc.cost; + const currentThrottle = pState.productionTarget !== undefined ? pState.productionTarget : 1.0; + + let statusClass = 'badge-success'; + let statusLabel = `${milestoneMult}x Speed`; + let statusIcon = 'lucide:check-circle'; + + if (currentThrottle <= 0.0) { + statusClass = 'badge-idle'; + statusLabel = 'Paused (0%)'; + statusIcon = 'lucide:pause-circle'; + } else if (pState.isBottlenecked) { + statusClass = 'badge-warning'; + statusLabel = 'Starved'; + statusIcon = 'lucide:alert-triangle'; + } else if (!pState.lines || pState.lines === 0) { + statusClass = 'badge-idle'; + statusLabel = '0 Lines'; + statusIcon = 'lucide:circle-slash'; + } + + const progressPct = Math.min(100, Math.floor((pState.cycleProgress || 0) * 100)); + + return ` +
+ +
+ +
+ ${p.name} + + T${p.tier} +
+ +
+
+ + ${sector?.name} + + + + ${statusLabel} + +
+ +
+

${p.name}

+ ${pState.lines} lines +
+ +
+ + + ${fmtNum(pState.stock || 0, 0)} + + • + + ${rates.isBottlenecked ? '0.0/s' : `${fmtNum(rates.prodRate || 0, 1)}/s`} + + • + + +$${fmtNum(rates.revRate || 0, 2)}/s + +
+
+ +
+ + +
+
+ `; +} + +export function updateCompactFacilityCardDom(p, pState, state, engine) { + if (!pState.unlocked) { + const canAfford = state.cash >= p.unlockCost; + const btn = document.getElementById(`btn-compact-unlock-${p.id}`); + if (btn && btn.disabled === canAfford) { + btn.disabled = !canAfford; + } + return; + } + + const buyMode = state.buyMode || '1'; + const rates = getProductOutputRates(p, pState, state); + const calc = calculateMultiCost(p.baseFacilityCost, pState.lines || 0, buyMode); + const canAffordBuy = state.cash >= calc.cost; + const currentThrottle = pState.productionTarget !== undefined ? pState.productionTarget : 1.0; + + // Progress bar + const elProg = document.getElementById(`compact-progress-${p.id}`); + if (elProg) { + const pct = Math.min(100, Math.floor((pState.cycleProgress || 0) * 100)); + elProg.style.width = `${pct}%`; + } + + // Lines + const elLines = document.getElementById(`compact-lines-${p.id}`); + if (elLines) { + const txt = `${pState.lines || 0} lines`; + if (elLines.innerHTML !== txt) elLines.innerHTML = txt; + } + + // Stock + const elStock = document.getElementById(`compact-stock-${p.id}`); + if (elStock) { + const val = fmtNum(pState.stock || 0, 0); + if (elStock.textContent !== val) elStock.textContent = val; + } + + // Production Rate + const elUnits = document.getElementById(`compact-rate-units-${p.id}`); + if (elUnits) { + const txt = rates.isBottlenecked ? '0.0/s' : `${fmtNum(rates.prodRate || 0, 1)}/s`; + if (elUnits.textContent !== txt) elUnits.textContent = txt; + elUnits.className = `compact-stat-item ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}`; + } + + // Logistics Revenue Rate + const elRev = document.getElementById(`compact-rate-rev-${p.id}`); + if (elRev) { + const txt = `+$${fmtNum(rates.revRate || 0, 2)}/s`; + if (elRev.textContent !== txt) elRev.textContent = txt; + } + + // Status Badge + const elBadge = document.getElementById(`compact-badge-${p.id}`); + const elBadgeText = document.getElementById(`compact-badge-text-${p.id}`); + if (elBadge && elBadgeText) { + let statusClass = 'badge-success'; + let statusLabel = `${rates.milestoneMult}x Speed`; + let statusIcon = 'lucide:check-circle'; + + if (currentThrottle <= 0.0) { + statusClass = 'badge-idle'; + statusLabel = 'Paused'; + statusIcon = 'lucide:pause-circle'; + } else if (rates.isBottlenecked) { + statusClass = 'badge-warning'; + statusLabel = 'Starved'; + statusIcon = 'lucide:alert-triangle'; + } else if (!pState.lines || pState.lines === 0) { + statusClass = 'badge-idle'; + statusLabel = '0 Lines'; + statusIcon = 'lucide:circle-slash'; + } + + if (elBadgeText.textContent !== statusLabel) elBadgeText.textContent = statusLabel; + elBadge.className = `compact-status-badge ${statusClass}`; + const iconEl = elBadge.querySelector('iconify-icon'); + if (iconEl && iconEl.getAttribute('icon') !== statusIcon) { + iconEl.setAttribute('icon', statusIcon); + } + } + + // Buy Button + const btnExpand = document.getElementById(`btn-compact-expand-${p.id}`); + const spanExpand = document.getElementById(`compact-expand-text-${p.id}`); + if (btnExpand) { + if (btnExpand.disabled === canAffordBuy) { + btnExpand.disabled = !canAffordBuy; + } + if (spanExpand) { + const expText = `+${calc.count} (${fmtCurrency(calc.cost)})`; + if (spanExpand.textContent !== expText) spanExpand.textContent = expText; + } + } +} diff --git a/frontend/js/ui/production/facilityCard.js b/frontend/js/ui/production/facilityCard.js index 6112a1b..91d764e 100644 --- a/frontend/js/ui/production/facilityCard.js +++ b/frontend/js/ui/production/facilityCard.js @@ -7,10 +7,19 @@ export function renderFacilityCardHtml(p, pState, state, buyMode) { const sector = SECTORS.find(s => s.id === p.sector); const isSelected = state.selectedProductId === p.id; + const productImgPath = `assets/images/products/${p.id}_product.jpg`; + const backdropArtHtml = ` + + `; + if (!pState.unlocked) { const canAffordUnlock = state.cash >= p.unlockCost; return `
+ ${backdropArtHtml}
@@ -99,6 +108,7 @@ export function renderFacilityCardHtml(p, pState, state, buyMode) { return `
+ ${backdropArtHtml}
diff --git a/frontend/js/ui/productionView.js b/frontend/js/ui/productionView.js index 20325f1..2fa42dd 100644 --- a/frontend/js/ui/productionView.js +++ b/frontend/js/ui/productionView.js @@ -1,9 +1,7 @@ -// Production - The Idle Game: Production Floor View -// Clean modular orchestrator connecting sector toolbar, facility cards, and fine-grained DOM updating - import { PRODUCTS } from '../data/products.js'; import { renderSectorBarHtml, renderSectorSummariesHtml, updateSectorBarDom } from './production/sectorBar.js'; import { renderFacilityCardHtml, updateFacilityCardDom } from './production/facilityCard.js'; +import { renderCompactFacilityCardHtml, updateCompactFacilityCardDom } from './production/compactFacilityCard.js'; export { calculateMultiCost, getProductOutputRates } from './production/ratesCalculator.js'; /** @@ -12,6 +10,7 @@ export { calculateMultiCost, getProductOutputRates } from './production/ratesCal export function mountProductionFloor(container, state, onAction, engine) { const selectedSector = state.selectedSector || 'all'; const buyMode = state.buyMode || '1'; + const isCompact = state.floorViewMode === 'compact'; const filteredProducts = PRODUCTS.filter(p => { if (selectedSector === 'all') return true; @@ -19,11 +18,15 @@ export function mountProductionFloor(container, state, onAction, engine) { }); let html = renderSectorSummariesHtml(selectedSector, engine); - html += `
`; + html += `
`; for (const p of filteredProducts) { const pState = state.products[p.id] || { unlocked: false, lines: 0, stock: 0, cycleProgress: 0, isBottlenecked: false }; - html += renderFacilityCardHtml(p, pState, state, buyMode); + if (isCompact) { + html += renderCompactFacilityCardHtml(p, pState, state, buyMode); + } else { + html += renderFacilityCardHtml(p, pState, state, buyMode); + } } html += `
`; @@ -38,21 +41,21 @@ export function mountProductionFloor(container, state, onAction, engine) { card.onclick = () => onAction({ type: 'SELECT_SECTOR', sector: card.dataset.sector }); }); - container.querySelectorAll('.btn-card-detail').forEach(btn => { + container.querySelectorAll('.btn-card-detail, .btn-compact-detail').forEach(btn => { btn.onclick = (e) => { e.stopPropagation(); onAction({ type: 'OPEN_UNIT_DETAIL', productId: btn.dataset.product }); }; }); - container.querySelectorAll('.facility-card').forEach(card => { + container.querySelectorAll('.facility-card, .compact-card').forEach(card => { card.onclick = (e) => { if (e.target.closest('button')) return; onAction({ type: 'OPEN_UNIT_DETAIL', productId: card.dataset.product }); }; }); - container.querySelectorAll('.btn-unlock').forEach(btn => { + container.querySelectorAll('.btn-unlock, .btn-compact-unlock').forEach(btn => { btn.onclick = () => onAction({ type: 'UNLOCK_PRODUCT', productId: btn.dataset.product }); }); @@ -60,7 +63,7 @@ export function mountProductionFloor(container, state, onAction, engine) { btn.onclick = () => onAction({ type: 'MANUAL_CYCLE', productId: btn.dataset.product }); }); - container.querySelectorAll('.btn-expand').forEach(btn => { + container.querySelectorAll('.btn-expand, .btn-compact-expand').forEach(btn => { btn.onclick = () => onAction({ type: 'BUY_LINES', productId: btn.dataset.product }); }); @@ -95,14 +98,20 @@ export function mountProductionFloor(container, state, onAction, engine) { export function updateProductionFloor(container, state, engine) { const buyMode = state.buyMode || '1'; const selectedSector = state.selectedSector || 'all'; + const isCompact = state.floorViewMode === 'compact'; // 1. Update Sector Navigation Pills & Summaries updateSectorBarDom(selectedSector, engine); - // 2. Update Facility Cards + // 2. Update Facility Cards (Standard or Compact) for (const p of PRODUCTS) { const pState = state.products[p.id]; if (!pState) continue; - updateFacilityCardDom(p, pState, state, buyMode); + if (isCompact) { + updateCompactFacilityCardDom(p, pState, state, engine); + } else { + updateFacilityCardDom(p, pState, state, buyMode); + } } } +