Merge branch 'master' into hugo
This commit is contained in:
simplonco
@@ -9,22 +9,8 @@
|
||||
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
|
||||
.then((resp) => resp.json())
|
||||
|
||||
// i mean i could do a failed to load user or some shit, maybe with a .catch or something? but atm why bother
|
||||
|
||||
console.log('User var');
|
||||
console.log(user);
|
||||
// if (user && user.statusCode && user.statusCode === 403) {
|
||||
// console.log('user not logged in')
|
||||
// }
|
||||
// if (user && user.username) {
|
||||
// console.log('we have a user');
|
||||
// }
|
||||
|
||||
// user === undefined doesn't work cuz we declared user in the scope of onMount
|
||||
// if (user === undefined) {
|
||||
if (user && user.statusCode && user.statusCode === 403) {
|
||||
console.log('on mount no user, returned status code 403 so logging out of userStore')
|
||||
// userLogout(); // which i think should delete any previous local storage
|
||||
}
|
||||
|
||||
});
|
||||
@@ -34,8 +20,6 @@
|
||||
console.log('you are now logged in');
|
||||
}
|
||||
|
||||
// i could prolly put this in it's own compoent, i seem to use it in several places... or maybe just some JS? like no need for html
|
||||
// we could .then( () => replace('/') ) need the func so TS compatible...
|
||||
const logout = async() => {
|
||||
await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/auth/logout`, {
|
||||
method: 'POST',
|
||||
@@ -46,108 +30,71 @@
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<header class="grid-container">
|
||||
<h1>Potato Pong</h1>
|
||||
<nav>
|
||||
<!-- {#if user !== undefined} -->
|
||||
{#if user && user.username}
|
||||
<div on:click={ () => (push('/profile')) }>Profile</div>
|
||||
<div on:click={logout}>Logout</div>
|
||||
{:else}
|
||||
<div on:click={login}>Login</div>
|
||||
{/if}
|
||||
</nav>
|
||||
<h2>
|
||||
<div>Welcome to</div>
|
||||
<div>Potato Pong</div>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<Canvas/>
|
||||
|
||||
<!-- doesn't work :( -->
|
||||
<!-- <svelte:body style="overflow-y: hidden"/> -->
|
||||
<div class="container">
|
||||
<div class="splash-page">
|
||||
{#if user && user.username}
|
||||
<button class="button-in" on:click={ () => (push('/profile')) }>Profile</button>
|
||||
<button class="button-out" on:click={logout}>Logout</button>
|
||||
{:else}
|
||||
<button class="button-in" on:click={login}>Login</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Bit5x3";
|
||||
src:
|
||||
url("/fonts/Bit5x3.woff2") format("woff2"),
|
||||
local("Bit5x3"),
|
||||
url("/fonts/Bit5x3.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* :global(body) {
|
||||
overflow-y: hidden;
|
||||
} */
|
||||
|
||||
header {
|
||||
/* didn't work... */
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-image: url('/img/SPLASH_PAGE_BACKGROUND.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/* The actually important stuff */
|
||||
.splash-page {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
-ms-transform: translateY(-80%);
|
||||
transform: translateY(-80%);
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.grid-container{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.button-in {
|
||||
background-color: #8c0000;
|
||||
border-color: black;
|
||||
border-width: 4px;
|
||||
color: white;
|
||||
font-family: "Bit5x3";
|
||||
font-size: x-large;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* max-height: 100%; */
|
||||
white-space: nowrap;
|
||||
/* padding-bottom: 0; */
|
||||
margin-bottom: 0px;
|
||||
overflow: hidden;
|
||||
padding: 20px 40px;
|
||||
margin: 0px;
|
||||
.button-out {
|
||||
background-color: #008c8c;
|
||||
border-color: black;
|
||||
border-width: 4px;
|
||||
color: white;
|
||||
font-family: "Bit5x3";
|
||||
font-size: x-large;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1{
|
||||
grid-column: 1 / 7;
|
||||
grid-row: 1;
|
||||
/* grid-column: span 6; */
|
||||
/* tmp? */
|
||||
padding: 20px;
|
||||
border: 1px solid bisque;
|
||||
}
|
||||
header nav{
|
||||
/* make it a flexbox? */
|
||||
grid-column: 7 / 13;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
/* tmp? */
|
||||
padding: 20px;
|
||||
border: 1px solid bisque;
|
||||
}
|
||||
|
||||
header h2{
|
||||
grid-row: 3;
|
||||
grid-column: 5 / span 4;
|
||||
justify-self: center;
|
||||
/* tmp */
|
||||
border: 1px solid black;
|
||||
z-index: 3;
|
||||
}
|
||||
header h2 div{
|
||||
font-size: 2em;
|
||||
/* color: red; */
|
||||
}
|
||||
|
||||
nav div {
|
||||
display: inline;
|
||||
color: bisque;
|
||||
font-weight: bold;
|
||||
}
|
||||
nav > div {
|
||||
padding-left: 1em;
|
||||
/* didn't quite work, applies to both for some reason */
|
||||
/* nav:first-child doesn't work either*/
|
||||
}
|
||||
nav div:hover{
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -268,25 +268,34 @@
|
||||
<button class="pong_button" on:click={fetchInvitations}>Show invitations</button>
|
||||
<fieldset in:fly="{{ y: 10, duration: 1000 }}">
|
||||
<legend>game options</legend>
|
||||
<div>
|
||||
|
||||
<label for="multi_balls">
|
||||
<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={options.multi_balls}>
|
||||
<label for="multi_balls">Multiples balls</label>
|
||||
</div>
|
||||
<div>
|
||||
Multiples balls
|
||||
</label>
|
||||
|
||||
<label for="moving_walls">
|
||||
<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={options.moving_walls}>
|
||||
<label for="moving_walls">Moving walls</label>
|
||||
</div>
|
||||
Moving walls
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<p>sound :</p>
|
||||
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
|
||||
<label for="sound_on">on</label>
|
||||
<input type="radio" id="sound_off" name="sound_selector" bind:group={options.sound} value="off">
|
||||
<label for="sound_off">off</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="isSomeoneIsInvited" bind:checked={options.isSomeoneIsInvited}>
|
||||
<label for="moving_walls">Invite a friend</label>
|
||||
sound :
|
||||
<label for="sound_on">
|
||||
<input type="radio" id="sound_on" name="sound_selector" bind:group={options.sound} value="on">
|
||||
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">
|
||||
<input type="checkbox" id="invitation_checkbox" bind:checked={options.isSomeoneIsInvited}>
|
||||
Invite a friend
|
||||
</label>
|
||||
|
||||
{#if options.isSomeoneIsInvited}
|
||||
<select bind:value={options.playerTwoUsername}>
|
||||
{#each allUsers as user }
|
||||
|
||||
@@ -131,13 +131,19 @@
|
||||
<fieldset>
|
||||
<legend>options</legend>
|
||||
<button class="pong_button" on:click={fetchMatchList}>Reload</button>
|
||||
|
||||
<div>
|
||||
<p>sound :</p>
|
||||
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
|
||||
<label for="sound_on">on</label>
|
||||
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
|
||||
<label for="sound_off">off</label>
|
||||
sound :
|
||||
<label for="sound_on">
|
||||
<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
|
||||
on
|
||||
</label>
|
||||
<label for="sound_off">
|
||||
<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
|
||||
off
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
{#if matchList.length !== 0}
|
||||
<menu id="match_list">
|
||||
|
||||
Reference in New Issue
Block a user