Set up a tabletop view for both the GM and the player #260

Merged
savanni merged 15 commits from visions-playfield into main 2024-11-20 04:06:13 +00:00
3 changed files with 10 additions and 2 deletions
Showing only changes of commit 6416931c67 - Show all commits

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" };
} }
} }

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%;
}

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>)
} }