savanni
/
monorepo
1
0
Fork 0
Code Issues 76 Pull Requests Projects 6 Releases Wiki Activity

Apply a maximum size to the playing field

This commit is contained in:
Savanni D'Gerinel 2024-11-11 23:22:41 -05:00
parent c35cbd75d7
commit 6416931c67
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
visions/ui/src/client.ts
View File

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

8
visions/ui/src/components/PlayingField/PlayingField.css
View File

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

2
visions/ui/src/components/PlayingField/PlayingField.tsx
View File

@ -15,7 +15,7 @@ export const PlayingFieldComponent = ({ client }: PlayingFieldProps) => {
const backgroundUrl = field && client.imageUrl(field.backgroundImage); const backgroundUrl = field && client.imageUrl(field.backgroundImage);
return (<div className="playing-field"> return (<div className="playing-field">
<div> Left Panel </div> <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> Right Panel </div>
</div>) </div>)
} }