css small fix

This commit is contained in:
LuckyLaszlo
2023-01-15 21:11:38 +01:00
parent 1a07065f6a
commit c6d034b9f7

View File

@@ -289,56 +289,54 @@
{#if hiddenGame} {#if hiddenGame}
{#if showGameOptions} {#if showGameOptions}
<div id="game_option"> <div class="div_game" id="game_options">
<div class="div_game"> <button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button> <fieldset in:fly="{{ y: 10, duration: 1000 }}">
<fieldset in:fly="{{ y: 10, duration: 1000 }}"> <legend>game options</legend>
<legend>game options</legend>
<label for="multi_balls"> <label for="multi_balls">
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}> <input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
Multiples balls Multiples balls
</label>
<label for="moving_walls">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
Moving walls
</label>
<div>
sound :
<label for="sound_on">
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
on
</label> </label>
<label for="sound_off">
<label for="moving_walls"> <input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}> off
Moving walls
</label> </label>
</div>
<div> <label for="invitation_checkbox">
sound : <input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
<label for="sound_on"> Invite a friend
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on"> </label>
on
</label>
<label for="sound_off">
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
off
</label>
</div>
<label for="invitation_checkbox"> {#if options.isSomeoneIsInvited}
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}> <select bind:value={options.playerTwoUsername}>
Invite a friend {#each allUsers as invitedUser }
</label> <option value={invitedUser.username}>{invitedUser.username}</option>
{/each}
{#if options.isSomeoneIsInvited} </select>
<select bind:value={options.playerTwoUsername}> {/if}
{#each allUsers as invitedUser } <div>
<option value={invitedUser.username}>{invitedUser.username}</option> <button class="pong_button" on:click={initGame}>PLAY</button>
{/each} </div>
</select> </fieldset>
{/if}
<div>
<button class="pong_button" on:click={initGame}>PLAY</button>
</div>
</fieldset>
</div>
</div> </div>
{/if} {/if}
{#if showInvitations} {#if showInvitations}
<div class="div_game"> <div class="div_game" id="game_invitations">
<button class="pong_button" on:click={switchToGameOptions}>Play a Game</button> <button class="pong_button" on:click={switchToGameOptions}>Play a Game</button>
<fieldset in:fly="{{ y: 10, duration: 1000 }}"> <fieldset in:fly="{{ y: 10, duration: 1000 }}">
<legend>invitations</legend> <legend>invitations</legend>
@@ -372,9 +370,11 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
#game_option {
#game_options, #game_invitations {
margin-top: 20px; margin-top: 20px;
} }
#canvas_container { #canvas_container {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;