Set up a tabletop view for both the GM and the player #260
|
@ -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" };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
|
@ -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>)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue