Apply a maximum size to the playing field

visions/ui/src/client.ts

@@ -16,6 +16,6 @@ export class Client {
     }
 
     async playingField(): Promise<PlayingField> {
-        return { backgroundImage: "tower-in-mist.jpg" };
+        return { backgroundImage: "su-pearl.png" };
     }
 }

visions/ui/src/components/PlayingField/PlayingField.css

@@ -1,3 +1,11 @@
 .playing-field {
     display: flex;
 }
+
+.playing-field__background {
+    max-width: 50%;
+}
+
+.playing-field__background > img {
+    max-width: 100%;
+}

visions/ui/src/components/PlayingField/PlayingField.tsx

@@ -15,7 +15,7 @@ export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
     const backgroundUrl = field && client.imageUrl(field.backgroundImage);
     return (<div className="playing-field">
         <div> Left Panel </div>
-        <div> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
+        <div className="playing-field__background"> {backgroundUrl && <img src={backgroundUrl.toString()} alt="playing field" />} </div>
         <div> Right Panel </div>
     </div>)
 }