Future City

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate a responsive RTL Arabic educational web game titled “FUTURE CITY” (مدينة المستقبل), styled as a polished futuristic smart-city dashboard. Use a very dark navy background with a subtle blue radial glow, glassy navy panels with rounded 16–20px corners, thin cyan borders, soft shadows, cyan accent text, muted light-blue body text, and blue gradient primary buttons. Use Tahoma/Arial or a similar clean Arabic-capable font. The overall content is centered in a max-width layout around 1000px.

Start with a full-screen hero/landing view centered on the page: small cyan uppercase eyebrow “SMART WORLD · PYTHON ADVENTURE”, very large glowing cyan “FUTURE CITY”, creator text “Game Creator: Wareef Naif Al-Osaimi”, Arabic subtitle “خمس محطات برمجية، ومستقبل تصنعه أنت.” and a primary button “ابدأ المغامرة ←”. Clicking it hides the intro and shows a setup view. The setup view contains a panel with “PLAYER IDENTIFICATION”, Arabic welcome text asking for the player’s name, a full-width dark input with placeholder “اكتب اسمك هنا”, and a primary “دخول المدينة” button. Do not allow starting with an empty name; show an Arabic error message. Beside/below it, show a panel titled “قاموس الحروف العربية في HTML” explaining that it teaches HTML symbols for Arabic letters, with a four-column grid of dark rounded tiles. Each tile displays a cyan Arabic letter and its corresponding numeric HTML entity as visible text (the original visual shows strings such as “آ”, rather than interpreting them), covering the provided Arabic letter/entity list.

After a valid name, show the main game screen. The header has “FUTURE CITY SYSTEM”, “مدينة المستقبل”, and a cyan outlined pill showing “👤 [player name]”. Under it is a wrapped navigation row of five stage buttons, each with an emoji, number, and Arabic station label. Buttons use a dark navy background; the current station has a cyan border/text and completed stations have a green border. The five stages are:
1. “المحطة الأولى | القطار الذكي” with 🚆. Intro: the train is waiting and the player must execute boarding commands in the correct order. Challenge: arrange three commands to pass the card, enter the PIN, and open the door. Correct order/code lines: `pass_card()` (مرر كارت القطار), `enter_pin(1234)` (أدخل الرقم السري), `open_train_door()` (افتح باب القطار). Hint says to swipe/pass the card first, enter the PIN second, then open the door.
2. “المحطة الثانية | المطعم الذكي” with 🍏. Challenge is to arrange an if/else program checking whether balance covers meal price. Correct lines: `if balance >= meal_price:`, indented `print("Print Invoice & Prepare Order")`, `else:`, indented `print("Insufficient Balance!")`, with Arabic explanations.
3. “المحطة الثالثة | السوبر ماركت” with 🛒. Challenge is a loop for five items. Correct lines: `for item in range(5):`, indented `scan_barcode()`, indented `total_price += item_price`.
4. “المحطة الرابعة | طاقة المدينة” with 🌃. Challenge is energy bookkeeping. Correct lines: `energy_power = 100`, `energy_power = energy_power - 10`, `print(energy_power)`. After success, show a result lesson stating initial energy 100%, consumption 10%, remaining energy 90%.
5. “المحطة الخامسة | مركز إدارة المدينة” with 🏙️. Challenge is a function definition and call for night mode. Correct lines: `def night_mode():`, indented `turn_on_street_lights()`, indented `activate_security_alarm()`, indented `off_billboards()`, then `night_mode()`.

Each station’s mission panel contains an Arabic intro, a large decorative scene, a horizontal progress bar, and progress text such as “أنجزت 0 من 5 مراحل”. The scene is a rounded bordered rectangle with a subtle concentric circular sci-fi decoration. For the train scene, render a stylized futuristic train instead of just the emoji: a wide pale-blue train body with cyan border, rounded nose, three blue windows, a small right-side door, and rails beneath. On successful completion of stage one, turn the door green/open-looking. For the other scenes use their station emoji very large and centered over station-specific gradients: warm cream/green for restaurant, dark blue/green for market, dark skyline-like blue for city energy, and blue control-room tones for management.

Below the mission panel, use a two-column responsive layout that collapses to one column on narrow screens. The left panel is “CODE CHALLENGE”, heading “رتّب الأوامر البرمجية”, Arabic challenge text, and a vertical shuffled list of large clickable code option buttons. Each option has a left-to-right monospace code line in cyan and an Arabic translation beneath. Clicking options toggles selection and prefixes the chosen line with its order number; selected items get a brighter cyan border/background. A “تحقق من الإجابة” primary button validates that every line is selected and in the exact intended order, and “إعادة المحاولة” resets the selection. If incomplete, show a red Arabic error telling the player to choose all commands; if incorrectly ordered, show a red error saying the order is wrong and to review the meaning. On success, show a green success card addressing the player, mark the station complete, update the progress bar/navigation, and add station-specific simulation text. If stations remain, append a “المحطة التالية ←” button to go to the next incomplete station. Allow navigation directly between all five stations.

The right column is “LEARNING LAB”, displaying the station’s complete command list as lesson cards with code and Arabic explanation, plus a blue hint box labeled “تلميح ذكي”. Once all five stations are completed, reveal a “MISSION COMPLETE” panel with “أبدعت يا [name]! 🏆”, text that the player completed all five stations, a summary naming the player, and a “العب من جديد” button that clears completion and restarts at station one.

Below the challenge area, always include a “SMART RESTAURANT PREVIEW” panel. It should be a contrasting pale cream/light-green restaurant card titled “VERDE | المطعم التقني”, subtitle “جدار زجاجي وشلال داخلي”, a decorative waterfall area labeled “شلال مائي خلف الزجاج”, and three menu rows: 🥗 السلطة الخضراء for 18 ريال, 🍏 عصير التفاح for 12 ريال, and 🥪 ساندويتش المزرعة for 22 ريال. Each has a green “أضف · [price]” button. Include a pale cart area titled “شاشة الطلب الذاتي”, initially saying no order has been added, showing “الإجمالي: 0 ريال”, a blue primary “تأكيد الطلب” button, and feedback. Adding items updates the cart and total; each cart row has a “حذف” button; confirming an empty cart asks the player to add an item, otherwise confirms the demo order and total in Arabic. End with a small muted footer: “FUTURE CITY · Game Creator: Wareef Naif Al-Osaimi”. Ensure all interface text is Arabic where shown, with RTL page direction while code snippets remain LTR. Make it fully responsive: stacked challenge panels on screens below about 700px, compact stage buttons, and readable cards on mobile.