From 7b2e6d67c403917aae44927f27844d89e9e4d3b6 Mon Sep 17 00:00:00 2001
From: Yurij Mikhalevich <yurij@mikhalevi.ch>
Date: Sun, 7 Jul 2024 18:32:47 +0400
Subject: [PATCH] feat: add shadow border to the code editor and to the game
 screen (#10)

## How does this PR impact the user?

### Now

<img width="1608" alt="image"
src="https://github.com/move-fast-and-break-things/aibyss/assets/4187729/4129b538-9c8b-4a76-baa7-06ed8d8d1564">

### Before

<img width="1608" alt="image"
src="https://github.com/move-fast-and-break-things/aibyss/assets/4187729/7e1dd3cf-31df-4ca5-8a76-db65ee7fd21d">

## Description

Ditto.

## Limitations

N/A

## Checklist

- [x] my PR is focused and contains one wholistic change
- [x] I have added screenshots or screen recordings to show the changes
---
 components/CodeEditor.vue | 2 +-
 components/GameScreen.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/CodeEditor.vue b/components/CodeEditor.vue
index dc0f581..32a9078 100644
--- a/components/CodeEditor.vue
+++ b/components/CodeEditor.vue
@@ -84,7 +84,7 @@ function onSubmit(event: Event) {
       <MonacoEditor
         v-model="state.code"
         lang="javascript"
-        class="flex-grow mb-4"
+        class="flex-grow mb-4 shadow"
       />
       <div class="flex justify-end">
         <button
diff --git a/components/GameScreen.vue b/components/GameScreen.vue
index cbf9288..dc8106d 100644
--- a/components/GameScreen.vue
+++ b/components/GameScreen.vue
@@ -63,6 +63,9 @@ watch(gameState, (newState) => {
     class="h-full w-full"
     data-testid="game-screen"
   >
-    <canvas ref="canvas" />
+    <canvas
+      ref="canvas"
+      class="shadow m-4 mt-0"
+    />
   </div>
 </template>