From 5d4ea4e85a0ac80a4746cb9af5299f03bd6324d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Pelletier?= Date: Fri, 6 Sep 2024 19:53:24 -0400 Subject: [PATCH] Quelques mises a jour amusantes --- app/controllers/GameController.scala | 19 +++++---- app/views/game.scala.html | 26 +++++------- app/views/main.scala.html | 5 ++- conf/bricks-ai-techbro.json | 31 ++++++++++++++ conf/bricks-coaching.json | 31 ++++++++++++++ conf/bricks-developpement.json | 25 +++++++++++ conf/bricks-marketing.json | 31 ++++++++++++++ conf/bricks-medias-sociaux.json | 31 ++++++++++++++ conf/bricks-productivite.json | 25 +++++++++++ conf/bricks.json | 31 -------------- conf/routes | 2 +- public/javascripts/game.js | 63 +++++++++++++++++++++------- public/stylesheets/main.css | 38 +++++++++++++++++ run-docker.sh | 9 +++- 14 files changed, 294 insertions(+), 73 deletions(-) create mode 100644 conf/bricks-ai-techbro.json create mode 100644 conf/bricks-coaching.json create mode 100644 conf/bricks-developpement.json create mode 100644 conf/bricks-marketing.json create mode 100644 conf/bricks-medias-sociaux.json create mode 100644 conf/bricks-productivite.json delete mode 100644 conf/bricks.json diff --git a/app/controllers/GameController.scala b/app/controllers/GameController.scala index 1f6c5c6..b675cc1 100644 --- a/app/controllers/GameController.scala +++ b/app/controllers/GameController.scala @@ -15,11 +15,16 @@ class GameController @Inject()(val controllerComponents: ControllerComponents) e Ok(views.html.game()) } - def getBricks: Action[AnyContent] = Action { - - val source = scala.io.Source.fromFile("conf/bricks.json") - val jsonString = try source.mkString finally source.close() - val bricks = Json.parse(jsonString).as[List[Brick]] - Ok(Json.toJson(bricks)) + def getBricks(file: String): Action[AnyContent] = Action { + val filePath = s"conf/$file" + try { + val source = scala.io.Source.fromFile(filePath) + val jsonString = try source.mkString finally source.close() + val bricks = Json.parse(jsonString).as[List[Brick]] + Ok(Json.toJson(bricks)) + } catch { + case e: Exception => + BadRequest(s"Error reading file: ${e.getMessage}") + } } -} +} \ No newline at end of file diff --git a/app/views/game.scala.html b/app/views/game.scala.html index f0381a7..7c6a14b 100644 --- a/app/views/game.scala.html +++ b/app/views/game.scala.html @@ -1,17 +1,11 @@ -@() +@()(implicit request: RequestHeader) -@main("Arkanoid Game") { - - - - - -} \ No newline at end of file + @main("Breakout Game") { +
+

+
+ +
+
+ + } \ No newline at end of file diff --git a/app/views/main.scala.html b/app/views/main.scala.html index c6af152..a085b83 100644 --- a/app/views/main.scala.html +++ b/app/views/main.scala.html @@ -8,7 +8,10 @@ - @content +
+

+ @content +
\ No newline at end of file diff --git a/conf/bricks-ai-techbro.json b/conf/bricks-ai-techbro.json new file mode 100644 index 0000000..d0b6ecc --- /dev/null +++ b/conf/bricks-ai-techbro.json @@ -0,0 +1,31 @@ +[ + {"x": 20, "y": 50, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "AGI"}, + {"x": 120, "y": 50, "color": "#50E3C2", "textColor": "#000000", "text": "Singularity"}, + {"x": 220, "y": 50, "color": "#F5A623", "textColor": "#000000", "text": "Neural Net"}, + {"x": 320, "y": 50, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Transformer"}, + {"x": 420, "y": 50, "color": "#7ED321", "textColor": "#000000", "text": "GPT-4"}, + + {"x": 20, "y": 90, "color": "#9013FE", "textColor": "#FFFFFF", "text": "Her"}, + {"x": 120, "y": 90, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Prompt"}, + {"x": 220, "y": 90, "color": "#B8E986", "textColor": "#000000", "text": "Fine-tuning"}, + {"x": 320, "y": 90, "color": "#FF6B6B", "textColor": "#000000", "text": "Vectorize"}, + {"x": 420, "y": 90, "color": "#54C7FC", "textColor": "#000000", "text": "DALL-E"}, + + {"x": 20, "y": 130, "color": "#FF9FF3", "textColor": "#000000", "text": "LLM"}, + {"x": 120, "y": 130, "color": "#FFA94D", "textColor": "#000000", "text": "Deepfake"}, + {"x": 220, "y": 130, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Blockchain"}, + {"x": 320, "y": 130, "color": "#50E3C2", "textColor": "#000000", "text": "ML Ops"}, + {"x": 420, "y": 130, "color": "#F5A623", "textColor": "#000000", "text": "Web3"}, + + {"x": 20, "y": 170, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Tokenize"}, + {"x": 120, "y": 170, "color": "#7ED321", "textColor": "#000000", "text": "NLP"}, + {"x": 220, "y": 170, "color": "#9013FE", "textColor": "#FFFFFF", "text": "Metaverse"}, + {"x": 320, "y": 170, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Quantum"}, + {"x": 420, "y": 170, "color": "#B8E986", "textColor": "#000000", "text": "Edge AI"}, + + {"x": 20, "y": 210, "color": "#FF6B6B", "textColor": "#000000", "text": "AutoML"}, + {"x": 120, "y": 210, "color": "#54C7FC", "textColor": "#000000", "text": "Multimodal"}, + {"x": 220, "y": 210, "color": "#FF9FF3", "textColor": "#000000", "text": "Sentient"}, + {"x": 320, "y": 210, "color": "#FFA94D", "textColor": "#000000", "text": "Transhuman"}, + {"x": 420, "y": 210, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Skynet"} +] \ No newline at end of file diff --git a/conf/bricks-coaching.json b/conf/bricks-coaching.json new file mode 100644 index 0000000..6504c71 --- /dev/null +++ b/conf/bricks-coaching.json @@ -0,0 +1,31 @@ +[ + {"x": 20, "y": 50, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "10X"}, + {"x": 120, "y": 50, "color": "#50E3C2", "textColor": "#000000", "text": "Guru"}, + {"x": 220, "y": 50, "color": "#F5A623", "textColor": "#000000", "text": "Crushing"}, + {"x": 320, "y": 50, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Hack"}, + {"x": 420, "y": 50, "color": "#7ED321", "textColor": "#000000", "text": "Mastermind"}, + + {"x": 20, "y": 90, "color": "#9013FE", "textColor": "#FFFFFF", "text": "Synergy"}, + {"x": 120, "y": 90, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Disrupt"}, + {"x": 220, "y": 90, "color": "#B8E986", "textColor": "#000000", "text": "Leverage"}, + {"x": 320, "y": 90, "color": "#FF6B6B", "textColor": "#000000", "text": "Rockstar"}, + {"x": 420, "y": 90, "color": "#54C7FC", "textColor": "#000000", "text": "Hustle"}, + + {"x": 20, "y": 130, "color": "#FF9FF3", "textColor": "#000000", "text": "Unicorn"}, + {"x": 120, "y": 130, "color": "#FFA94D", "textColor": "#000000", "text": "Change"}, + {"x": 220, "y": 130, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Mindset"}, + {"x": 320, "y": 130, "color": "#50E3C2", "textColor": "#000000", "text": "Visionary"}, + {"x": 420, "y": 130, "color": "#F5A623", "textColor": "#000000", "text": "Superstar"}, + + {"x": 20, "y": 170, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Ninja"}, + {"x": 120, "y": 170, "color": "#7ED321", "textColor": "#000000", "text": "Startup"}, + {"x": 220, "y": 170, "color": "#9013FE", "textColor": "#FFFFFF", "text": "Massive"}, + {"x": 320, "y": 170, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Pivot"}, + {"x": 420, "y": 170, "color": "#B8E986", "textColor": "#000000", "text": "Empower"}, + + {"x": 20, "y": 210, "color": "#FF6B6B", "textColor": "#000000", "text": "Morning"}, + {"x": 120, "y": 210, "color": "#54C7FC", "textColor": "#000000", "text": "Influencer"}, + {"x": 220, "y": 210, "color": "#FF9FF3", "textColor": "#000000", "text": "Dominate"}, + {"x": 320, "y": 210, "color": "#FFA94D", "textColor": "#000000", "text": "Unstoppable"}, + {"x": 420, "y": 210, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Rainmaker"} +] \ No newline at end of file diff --git a/conf/bricks-developpement.json b/conf/bricks-developpement.json new file mode 100644 index 0000000..4645673 --- /dev/null +++ b/conf/bricks-developpement.json @@ -0,0 +1,25 @@ +[ + {"x": 29, "y": 50, "text": "GitHub", "color": "#24292E", "textColor": "#FFFFFF"}, + {"x": 127, "y": 50, "text": "GitLab", "color": "#FCA121", "textColor": "#000000"}, + {"x": 225, "y": 50, "text": "Bitbucket", "color": "#0052CC", "textColor": "#FFFFFF"}, + {"x": 323, "y": 50, "text": "VS Code", "color": "#007ACC", "textColor": "#FFFFFF"}, + {"x": 421, "y": 50, "text": "IntelliJ", "color": "#000000", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 88, "text": "Android", "color": "#3DDC84", "textColor": "#000000"}, + {"x": 127, "y": 88, "text": "Xcode", "color": "#147EFB", "textColor": "#FFFFFF"}, + {"x": 225, "y": 88, "text": "Postman", "color": "#FF6C37", "textColor": "#000000"}, + {"x": 323, "y": 88, "text": "Jira", "color": "#0052CC", "textColor": "#FFFFFF"}, + {"x": 421, "y": 88, "text": "Confluence", "color": "#172B4D", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 126, "text": "Firebase", "color": "#FFCA28", "textColor": "#000000"}, + {"x": 127, "y": 126, "text": "Docker", "color": "#2496ED", "textColor": "#FFFFFF"}, + {"x": 225, "y": 126, "text": "Jenkins", "color": "#D24939", "textColor": "#FFFFFF"}, + {"x": 323, "y": 126, "text": "Kubernetes", "color": "#326CE5", "textColor": "#FFFFFF"}, + {"x": 421, "y": 126, "text": "Figma", "color": "#F24E1E", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 164, "text": "Sketch", "color": "#FDB300", "textColor": "#000000"}, + {"x": 127, "y": 164, "text": "Slack", "color": "#4A154B", "textColor": "#FFFFFF"}, + {"x": 225, "y": 164, "text": "Trello", "color": "#0079BF", "textColor": "#FFFFFF"}, + {"x": 323, "y": 164, "text": "Stack", "color": "#F48024", "textColor": "#000000"}, + {"x": 421, "y": 164, "text": "npm", "color": "#CB3837", "textColor": "#FFFFFF"} +] \ No newline at end of file diff --git a/conf/bricks-marketing.json b/conf/bricks-marketing.json new file mode 100644 index 0000000..9de989d --- /dev/null +++ b/conf/bricks-marketing.json @@ -0,0 +1,31 @@ +[ + {"x": 20, "y": 50, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "SEO"}, + {"x": 120, "y": 50, "color": "#50E3C2", "textColor": "#000000", "text": "PPC"}, + {"x": 220, "y": 50, "color": "#F5A623", "textColor": "#000000", "text": "Content"}, + {"x": 320, "y": 50, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Social"}, + {"x": 420, "y": 50, "color": "#7ED321", "textColor": "#000000", "text": "Email"}, + + {"x": 20, "y": 90, "color": "#9013FE", "textColor": "#FFFFFF", "text": "CRO"}, + {"x": 120, "y": 90, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Analytics"}, + {"x": 220, "y": 90, "color": "#B8E986", "textColor": "#000000", "text": "Branding"}, + {"x": 320, "y": 90, "color": "#FF6B6B", "textColor": "#000000", "text": "SEM"}, + {"x": 420, "y": 90, "color": "#54C7FC", "textColor": "#000000", "text": "Viral"}, + + {"x": 20, "y": 130, "color": "#FF9FF3", "textColor": "#000000", "text": "Funnel"}, + {"x": 120, "y": 130, "color": "#FFA94D", "textColor": "#000000", "text": "Retarget"}, + {"x": 220, "y": 130, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Influencer"}, + {"x": 320, "y": 130, "color": "#50E3C2", "textColor": "#000000", "text": "CTA"}, + {"x": 420, "y": 130, "color": "#F5A623", "textColor": "#000000", "text": "Leads"}, + + {"x": 20, "y": 170, "color": "#D0021B", "textColor": "#FFFFFF", "text": "Affiliate"}, + {"x": 120, "y": 170, "color": "#7ED321", "textColor": "#000000", "text": "KPI"}, + {"x": 220, "y": 170, "color": "#9013FE", "textColor": "#FFFFFF", "text": "ROI"}, + {"x": 320, "y": 170, "color": "#4A4A4A", "textColor": "#FFFFFF", "text": "Organic"}, + {"x": 420, "y": 170, "color": "#B8E986", "textColor": "#000000", "text": "Paid"}, + + {"x": 20, "y": 210, "color": "#FF6B6B", "textColor": "#000000", "text": "Inbound"}, + {"x": 120, "y": 210, "color": "#54C7FC", "textColor": "#000000", "text": "Outbound"}, + {"x": 220, "y": 210, "color": "#FF9FF3", "textColor": "#000000", "text": "Growth"}, + {"x": 320, "y": 210, "color": "#FFA94D", "textColor": "#000000", "text": "Reach"}, + {"x": 420, "y": 210, "color": "#4A90E2", "textColor": "#FFFFFF", "text": "Conversion"} +] \ No newline at end of file diff --git a/conf/bricks-medias-sociaux.json b/conf/bricks-medias-sociaux.json new file mode 100644 index 0000000..b6edcb6 --- /dev/null +++ b/conf/bricks-medias-sociaux.json @@ -0,0 +1,31 @@ +[ + {"x": 29, "y": 50, "text": "Facebook", "color": "#1877F2", "textColor": "#FFFFFF"}, + {"x": 127, "y": 50, "text": "Instagram", "color": "#E4405F", "textColor": "#FFFFFF"}, + {"x": 225, "y": 50, "text": "Twitter", "color": "#1DA1F2", "textColor": "#FFFFFF"}, + {"x": 323, "y": 50, "text": "LinkedIn", "color": "#0077B5", "textColor": "#FFFFFF"}, + {"x": 421, "y": 50, "text": "YouTube", "color": "#FF0000", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 88, "text": "TikTok", "color": "#000000", "textColor": "#FFFFFF"}, + {"x": 127, "y": 88, "text": "Snapchat", "color": "#FFC0CB", "textColor": "#FFFFFF"}, + {"x": 225, "y": 88, "text": "Pinterest", "color": "#BD081C", "textColor": "#FFFFFF"}, + {"x": 323, "y": 88, "text": "Reddit", "color": "#FF4500", "textColor": "#FFFFFF"}, + {"x": 421, "y": 88, "text": "Tumblr", "color": "#35465C", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 126, "text": "Discord", "color": "#5865F2", "textColor": "#FFFFFF"}, + {"x": 127, "y": 126, "text": "Slack", "color": "#4A154B", "textColor": "#FFFFFF"}, + {"x": 225, "y": 126, "text": "Telegram", "color": "#26A5E4", "textColor": "#FFFFFF"}, + {"x": 323, "y": 126, "text": "Signal", "color": "#8E44AD", "textColor": "#FFFFFF"}, + {"x": 421, "y": 126, "text": "WhatsApp", "color": "#25D366", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 164, "text": "Skype", "color": "#00AFF0", "textColor": "#FFFFFF"}, + {"x": 127, "y": 164, "text": "Zoom", "color": "#2D8CFF", "textColor": "#FFFFFF"}, + {"x": 225, "y": 164, "text": "Meet", "color": "#4285F4", "textColor": "#FFFFFF"}, + {"x": 323, "y": 164, "text": "Teams", "color": "#0078D7", "textColor": "#FFFFFF"}, + {"x": 421, "y": 164, "text": "Hangouts", "color": "#4CAF50", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 202, "text": "Viber", "color": "#00B2FF", "textColor": "#FFFFFF"}, + {"x": 127, "y": 202, "text": "Line", "color": "#00C0DE", "textColor": "#FFFFFF"}, + {"x": 225, "y": 202, "text": "WeChat", "color": "#1AAD19", "textColor": "#FFFFFF"}, + {"x": 323, "y": 202, "text": "Weibo", "color": "#E54D42", "textColor": "#FFFFFF"}, + {"x": 421, "y": 202, "text": "QQ", "color": "#00B0F0", "textColor": "#FFFFFF"} +] \ No newline at end of file diff --git a/conf/bricks-productivite.json b/conf/bricks-productivite.json new file mode 100644 index 0000000..6359cd7 --- /dev/null +++ b/conf/bricks-productivite.json @@ -0,0 +1,25 @@ +[ + {"x": 29, "y": 50, "text": "Slack", "color": "#4A154B", "textColor": "#FFFFFF"}, + {"x": 127, "y": 50, "text": "Asana", "color": "#F06A6A", "textColor": "#FFFFFF"}, + {"x": 225, "y": 50, "text": "Notion", "color": "#000000", "textColor": "#FFFFFF"}, + {"x": 323, "y": 50, "text": "Trello", "color": "#0079BF", "textColor": "#FFFFFF"}, + {"x": 421, "y": 50, "text": "Jira", "color": "#0052CC", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 88, "text": "Todoist", "color": "#E44332", "textColor": "#FFFFFF"}, + {"x": 127, "y": 88, "text": "Evernote", "color": "#00A82D", "textColor": "#FFFFFF"}, + {"x": 225, "y": 88, "text": "OneNote", "color": "#7719AA", "textColor": "#FFFFFF"}, + {"x": 323, "y": 88, "text": "Airtable", "color": "#FCB400", "textColor": "#000000"}, + {"x": 421, "y": 88, "text": "Basecamp", "color": "#1D2D35", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 126, "text": "ClickUp", "color": "#7B68EE", "textColor": "#FFFFFF"}, + {"x": 127, "y": 126, "text": "Monday", "color": "#FF3D57", "textColor": "#FFFFFF"}, + {"x": 225, "y": 126, "text": "Toggl", "color": "#E57CD8", "textColor": "#FFFFFF"}, + {"x": 323, "y": 126, "text": "RescueTime", "color": "#39424E", "textColor": "#FFFFFF"}, + {"x": 421, "y": 126, "text": "Forest", "color": "#54BAB9", "textColor": "#FFFFFF"}, + + {"x": 29, "y": 164, "text": "Zapier", "color": "#FF4A00", "textColor": "#FFFFFF"}, + {"x": 127, "y": 164, "text": "IFTTT", "color": "#33CCFF", "textColor": "#000000"}, + {"x": 225, "y": 164, "text": "Clockify", "color": "#03A9F4", "textColor": "#FFFFFF"}, + {"x": 323, "y": 164, "text": "Grammarly", "color": "#15C39A", "textColor": "#FFFFFF"}, + {"x": 421, "y": 164, "text": "LastPass", "color": "#D32D27", "textColor": "#FFFFFF"} +] \ No newline at end of file diff --git a/conf/bricks.json b/conf/bricks.json deleted file mode 100644 index a153f46..0000000 --- a/conf/bricks.json +++ /dev/null @@ -1,31 +0,0 @@ -[ - {"x": 29, "y": 50, "text": "Facebook", "color": "#1877F2", "textColor": "#FFFFFF"}, - {"x": 127, "y": 50, "text": "Canva", "color": "#00C4CC", "textColor": "#FFFFFF"}, - {"x": 225, "y": 50, "text": "Stripe", "color": "#008CDD", "textColor": "#FFFFFF"}, - {"x": 323, "y": 50, "text": "AWS", "color": "#FF9900", "textColor": "#000000"}, - {"x": 421, "y": 50, "text": "Zoom", "color": "#2D8CFF", "textColor": "#FFFFFF"}, - - {"x": 29, "y": 88, "text": "Notion", "color": "#000000", "textColor": "#FFFFFF"}, - {"x": 127, "y": 88, "text": "LinkedIn", "color": "#0077B5", "textColor": "#FFFFFF"}, - {"x": 225, "y": 88, "text": "Asana", "color": "#F06A6A", "textColor": "#FFFFFF"}, - {"x": 323, "y": 88, "text": "Oracle", "color": "#F80000", "textColor": "#FFFFFF"}, - {"x": 421, "y": 88, "text": "Trello", "color": "#0079BF", "textColor": "#FFFFFF"}, - - {"x": 29, "y": 126, "text": "TikTok", "color": "#000000", "textColor": "#FFFFFF"}, - {"x": 127, "y": 126, "text": "Instagram", "color": "#E4405F", "textColor": "#FFFFFF"}, - {"x": 225, "y": 126, "text": "GitHub", "color": "#24292E", "textColor": "#FFFFFF"}, - {"x": 323, "y": 126, "text": "Upwork", "color": "#6FDA44", "textColor": "#FFFFFF"}, - {"x": 421, "y": 126, "text": "Fiverr", "color": "#1DBF73", "textColor": "#FFFFFF"}, - - {"x": 29, "y": 164, "text": "Mailchimp", "color": "#FFE01B", "textColor": "#000000"}, - {"x": 127, "y": 164, "text": "Slack", "color": "#4A154B", "textColor": "#FFFFFF"}, - {"x": 225, "y": 164, "text": "Azure", "color": "#0089D6", "textColor": "#FFFFFF"}, - {"x": 323, "y": 164, "text": "X", "color": "#000000", "textColor": "#FFFFFF"}, - {"x": 421, "y": 164, "text": "YouTube", "color": "#FF0000", "textColor": "#FFFFFF"}, - - {"x": 29, "y": 202, "text": "Google", "color": "#4285F4", "textColor": "#FFFFFF"}, - {"x": 127, "y": 202, "text": "IBM", "color": "#1261FE", "textColor": "#FFFFFF"}, - {"x": 225, "y": 202, "text": "Dropbox", "color": "#0061FF", "textColor": "#FFFFFF"}, - {"x": 323, "y": 202, "text": "GCP", "color": "#4285F4", "textColor": "#FFFFFF"}, - {"x": 421, "y": 202, "text": "Pinterest", "color": "#BD081C", "textColor": "#FFFFFF"} -] \ No newline at end of file diff --git a/conf/routes b/conf/routes index 4bd70ea..b7031eb 100644 --- a/conf/routes +++ b/conf/routes @@ -1,6 +1,6 @@ GET / controllers.HomeController.index() GET /game controllers.GameController.index() -GET /bricks controllers.GameController.getBricks() +GET /bricks controllers.GameController.getBricks(file: String) # Map static resources from the /public folder to the /assets URL path GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset) \ No newline at end of file diff --git a/public/javascripts/game.js b/public/javascripts/game.js index ce6cbb2..ef0c49c 100644 --- a/public/javascripts/game.js +++ b/public/javascripts/game.js @@ -1,6 +1,13 @@ const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); +// Set canvas size to match the container +canvas.width = 540; +canvas.height = 675; + +// Make sure the canvas is visible +canvas.style.display = 'block'; + // Load background image once, outside of any function const backgroundImage = new Image(); backgroundImage.src = '/assets/images/background.png'; @@ -44,16 +51,12 @@ function drawBall() { function movePaddle(e) { if (!isPaused) { - let relativeX; - if (e.type.startsWith('mouse')) { - relativeX = e.clientX - canvas.offsetLeft; - } else if (e.type.startsWith('touch')) { - relativeX = e.touches[0].clientX - canvas.offsetLeft; - e.preventDefault(); // Prevent scrolling when touching the canvas - } - if (relativeX > 0 && relativeX < canvas.width) { - paddle.x = relativeX - paddle.width / 2; - } + let rect = canvas.getBoundingClientRect(); + let root = document.documentElement; + let mouseX = e.clientX - rect.left - root.scrollLeft; + + // Ensure the paddle stays within the canvas + paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, mouseX - paddle.width / 2)); } } @@ -158,8 +161,6 @@ function update() { requestAnimationFrame(update); } -document.addEventListener('mousemove', movePaddle, false); - document.addEventListener('keydown', function(e) { if (e.key === 'p' || e.key === 'P') { togglePause(); @@ -172,13 +173,43 @@ pauseButton.textContent = 'Pause'; pauseButton.style.position = 'absolute'; pauseButton.style.top = '10px'; pauseButton.style.left = '10px'; -document.body.appendChild(pauseButton); - +pauseButton.style.zIndex = '20'; +document.getElementById('gameContainer').appendChild(pauseButton); pauseButton.addEventListener('click', togglePause); -fetch('/bricks') +// Load bricks from JSON file + +function updateThemeHeader(theme) { + const themeHeader = document.getElementById('themeHeader'); + if (themeHeader) { + themeHeader.textContent = `Theme: ${theme}`; + themeHeader.style.position = 'absolute'; + themeHeader.style.top = '10px'; + themeHeader.style.left = '0'; + themeHeader.style.right = '0'; + themeHeader.style.zIndex = '10'; + } +} + +const brickFiles = [ + 'bricks-productivite.json', + 'bricks-developpement.json', + 'bricks-medias-sociaux.json', + 'bricks-marketing.json', + 'bricks-coaching.json', + 'bricks-ai-techbro.json' +]; +const randomFile = brickFiles[Math.floor(Math.random() * brickFiles.length)]; + +// Extract theme from filename +const theme = randomFile.split('-')[1].split('.')[0]; + +fetch(`/bricks?file=${randomFile}`) .then(response => response.json()) .then(data => { bricks = data; + updateThemeHeader(theme); update(); - }); \ No newline at end of file + }); + +document.addEventListener('mousemove', movePaddle, true); \ No newline at end of file diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index c571b25..ce4fc91 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -3,3 +3,41 @@ padding: 20px; font-family: Arial, sans-serif; } + +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f2f2f2; +} + +#gameContainer { + width: 540px; + margin: 0 auto; + text-align: center; + padding-top: 20px; /* Add some padding at the top */ +} + +#themeHeader { + margin: 0 0 10px 0; /* Add margin at the bottom */ + padding: 10px 0; + background-color: #f0f0f0; + border-bottom: 1px solid #ccc; + font-family: Arial, sans-serif; + font-size: 18px; + color: #333; +} + +#canvasContainer { + position: relative; + width: 540px; + height: 675px; +} + +#gameCanvas { + display: block; + margin: 0 auto; +} diff --git a/run-docker.sh b/run-docker.sh index f241bf2..29dd2a0 100644 --- a/run-docker.sh +++ b/run-docker.sh @@ -1 +1,8 @@ -docker run -p 9000:9000 breakout-game \ No newline at end of file +#!/bin/bash + +# Stop and remove existing container with the same name +docker stop "$(docker ps -aq --filter "name=breakout-game")" +docker rm "$(docker ps -aq --filter "name=breakout-game")" + +# Run the container with the specified tag and name +docker run -p 9000:9000 --name breakout-game breakout-game \ No newline at end of file