Checkers-Drafts Game: Layout and presentation enhancements


Standardize heading and button styles, add “Let’s play!” text and board image at start..

Goal

  • Standardize the app’s “rainbow” theme so it is not dynamic/animated.
  • Apply a global button style that fits the game theme, supports hover/active/disabled, and still allows per-button overrides.
  • Fix a few UX text tweaks.
  • Get Visual Studio MSDeploy publishing to Azure working with credentials stored locally (not in git).
  • Add marketing text to the board image: diagonal red “Lets play!”.

UI / Styling Changes

1) Rainbow headings: make static

  • Removed animation from the reusable rainbow heading styles so they’re static.

2) Global buttons: theme + states + overrides

  • Added a global style for all button elements (hover/active/disabled).
  • Improved text contrast:
    • Default text color moved to dark purple (#4a148c)
    • Increased weight to 800
    • Added subtle text-shadow
  • “Fade the background by 50%” implemented by moving the background into button::before with:
    • opacity: var(--btn-bg-opacity, 0.5)
  • Button palette changed from rainbow to board colors:
    • #EEE8D5 (light square / beige)
    • #7B5E3B (dark square / brown)
    • plus blended mid-tone #B4A388 (computed midpoint)

3) /drafts “Chat” and “Send” headings were still animated

  • /drafts uses .funky-heading inside Components/DraftsGame.razor.
  • Removed its animation: so those headings are static.

Content / UX Tweaks

  • Home page button label updated.
  • Home page board image size adjusted.

Game Behavior Verification (manual)

Confirmed OK:

  • Pages compile
  • Site runs
  • Admin page renders OK
  • Multi-jumps work and captured X persistence works

Azure Publishing (Visual Studio / MSDeploy)

Problem observed

  • Publishing with Azure AD/MFA account in the MSDeploy credential field failed:
    • Basic auth + “default credentials cannot be supplied” errors
    • MFA prompts and account mismatches

Resolution

  • Use Publish Profile import (downloaded from Azure Portal) and import it into Visual Studio:
    • Supplies the correct MSDeploy Basic-auth username/password pair
    • Password is stored locally as an EncryptedPassword in *.pubxml.user

Files / locations

  • Publish profiles:
    • Properties/PublishProfiles/*.pubxml
  • Local-only credential sidecars:
    • Properties/PublishProfiles/*.pubxml.user (contains EncryptedPassword)

Notes

  • Publish completed successfully.
  • Visual Studio displayed a warning about installing Microsoft.AspNetCore.AzureAppServices.SiteExtension, but the site still ran OK.

Board Image Update: “Lets play!”

  • Updated wwwroot/Images/TheBoard.png by overlaying diagonal red text.
  • A PowerShell script using System.Drawing was used to draw the text.
  • Font size was increased (used 100) and confirmed good.

Files Touched (high-level)

  • CSS
    • wwwroot/app.css
  • Razor
    • Components/DraftsGame.razor
    • Components/Pages/Home.razor
  • Publishing
    • Properties/PublishProfiles/*.pubxml and *.pubxml.user
    • .gitignore
  • Image
    • wwwroot/Images/TheBoard.png
 TopicSubtopic
   
 This Category Links 
Category:Artificial Intelligence Index:Artificial Intelligence
  Next: > Checkers-Drafts Game
<  Prev:   Checkers-Drafts Game