little cleanup of the last commit

+ CSS adjustements
This commit is contained in:
LuckyLaszlo
2023-01-18 02:52:52 +01:00
parent d44576513e
commit b66a0f78c3
9 changed files with 64 additions and 28 deletions

View File

@@ -26,8 +26,9 @@ export class GameController {
@UseGuards(TwoFactorGuard) @UseGuards(TwoFactorGuard)
async getMatchHistory(@Req() req, @Query('username') username: string, @Res() res) async getMatchHistory(@Req() req, @Query('username') username: string, @Res() res)
{ {
console.log("DANS MATCH HISTORY") if (!username) {
console.log("usrrnmae" + username) username = req.user.username;
}
return this.gameService.getMatchHistory(username, res); return this.gameService.getMatchHistory(username, res);
} }

View File

@@ -62,12 +62,9 @@ export class GameService {
.where('history.playerOne.id = :userOne', {userOne : user.id}) .where('history.playerOne.id = :userOne', {userOne : user.id})
.orWhere('history.playerTwo.id = :userTwo', {userTwo: user.id}) .orWhere('history.playerTwo.id = :userTwo', {userTwo: user.id})
.getMany() .getMany()
console.log("gZZZZZZZZZZZZamehistory")
console.log(...gameHistory)
let sendableHistory : SendableMatchHistory[] = [] let sendableHistory : SendableMatchHistory[] = []
for (const history of gameHistory) for (const history of gameHistory)
{ {
console.log(history.playerOne.username + 'ssssssssss')
sendableHistory.push(new SendableMatchHistory(history)) sendableHistory.push(new SendableMatchHistory(history))
} }
console.log("sendable history") console.log("sendable history")

View File

@@ -16,6 +16,6 @@ export class SendableMatchHistory {
this.playerOneUsername = matchHistory.playerOne.username; this.playerOneUsername = matchHistory.playerOne.username;
this.playerTwoUsername = matchHistory.playerTwo.username; this.playerTwoUsername = matchHistory.playerTwo.username;
this.playerOneResult = matchHistory.playerOneResult; this.playerOneResult = matchHistory.playerOneResult;
this.playerTwoResult = matchHistory.playerTwoResult; this.playerTwoResult = matchHistory.playerTwoResult;
}; };
} }

View File

@@ -305,11 +305,11 @@
{#if gameState.matchStarted && !gameState.matchEnded} {#if gameState.matchStarted && !gameState.matchEnded}
<div class="div_game"> <div class="div_game">
<button class="pong_button" on:click={leaveMatch}>forfeit</button> <button class="pong_button margin_top" on:click={leaveMatch}>forfeit</button>
</div> </div>
{:else if !gameState.matchStarted} {:else if !gameState.matchStarted}
<div class="div_game"> <div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave matchmaking</button> <button class="pong_button margin_top" on:click={leaveMatch}>leave matchmaking</button>
</div> </div>
{/if} {/if}
{/if} {/if}
@@ -470,6 +470,11 @@ canvas {
} }
.avatar { .avatar {
height: 5vw; height: 5vw;
width: 5vw; width: 5vw;
margin-top: 2vw;
margin-bottom: -2vw;
}
button.margin_top {
margin-top: 1vw;
} }
</style> </style>

View File

@@ -144,7 +144,7 @@
{#if !gameState.matchEnded} {#if !gameState.matchEnded}
<div class="div_game"> <div class="div_game">
<button class="pong_button" on:click={leaveMatch}>leave</button> <button class="pong_button margin_top" on:click={leaveMatch}>leave</button>
</div> </div>
{/if} {/if}
{/if} {/if}
@@ -171,11 +171,12 @@
</fieldset> </fieldset>
{#if matchList.length !== 0} {#if matchList.length !== 0}
<menu id="match_list"> <!-- <menu id="match_list"> -->
{#each matchList as match} {#each matchList as match}
<MatchOngoingElem match={match} on:click={(e) => initGameSpectator(match)} /> <MatchOngoingElem match={match} on:click={(e) => initGameSpectator(match)} />
<br>
{/each} {/each}
</menu> <!-- </menu> -->
{:else} {:else}
<p>no match ongoing</p> <p>no match ongoing</p>
{/if} {/if}
@@ -263,12 +264,16 @@ canvas {
font-size: 1vw; font-size: 1vw;
padding: 10px; padding: 10px;
} }
#match_list { /* #match_list {
font-family: 'Courier New', Courier, monospace; text-align: center;
font-size: 1vw; } */
}
.avatar { .avatar {
height: 5vw; height: 5vw;
width: 5vw; width: 5vw;
margin-top: 2vw;
margin-bottom: -2vw;
}
button.margin_top {
margin-top: 1vw;
} }
</style> </style>

View File

@@ -38,7 +38,13 @@
} }
#setting_button { #setting_button {
margin-top: 25px; margin-top: 1vw;
font-family: "PressStart2P";
background-color: #618174;
border-color: #071013;
color: white;
border-width: 2px;
font-size: 1vw;
} }
</style> </style>

View File

@@ -90,18 +90,23 @@
div.outer{ div.outer{
max-width: 960px; max-width: 960px;
margin: 40px auto; margin: 40px auto;
margin-top: 1vw;
} }
/* The main part */ /* The main part */
main{ main{
max-width: 960px; max-width: 960px;
margin: 40px auto; margin: 40px auto;
margin-top: 1vw;
text-align: center; text-align: center;
} }
.avatar{ .avatar{
width: 15vw; width: 15vw;
height: 15vw; height: 15vw;
max-width: 130px;
max-height: 130px;
margin-bottom: 1vw;
} }
/* The variable rich section */ /* The variable rich section */

View File

@@ -5,9 +5,9 @@
import type { MatchHistory } from "./Match"; import type { MatchHistory } from "./Match";
export let user; export let user;
let matchList = []; let matchList: MatchHistory[] = [];
onMount( async() => { onMount( async() => {
console.log(user.username + 'jjjjjjjjjjjjj')
matchList = await fetchMatchList(user.username); matchList = await fetchMatchList(user.username);
console.log(matchList); console.log(matchList);
// matchList = await mockMatchList(user.username); // matchList = await mockMatchList(user.username);
@@ -16,7 +16,6 @@
async function fetchMatchList(username: string) async function fetchMatchList(username: string)
{ {
let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/history?username=${username}`; let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/history?username=${username}`;
console.log(url + 'ffffffff')
return fetch(url) return fetch(url)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
@@ -96,7 +95,7 @@
<td>{match.playerTwoResult}</td> <td>{match.playerTwoResult}</td>
{#await fetchAvatar(match.playerTwoUsername) then avatar} {#await fetchAvatar(match.playerTwoUsername) then avatar}
<td> <td>
<img class="avatar" src="{avatar}" alt="avatarOne"> <img class="avatar" src="{avatar}" alt="avatarTwo">
<br> <br>
{match.playerTwoUsername} {match.playerTwoUsername}
</td> </td>

View File

@@ -2,6 +2,7 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import { MatchOngoing, MatchOptions} from "./Match"; import { MatchOngoing, MatchOptions} from "./Match";
import { fetchAvatar } from "./utils.js";
export let match: MatchOngoing; export let match: MatchOngoing;
@@ -25,14 +26,31 @@
</script> </script>
<!-- --> <!-- -->
<li> <div>
<button on:click> {#await fetchAvatar(match.playerOneUsername) then avatar}
'{match.playerOneUsername}' VS '{match.playerTwoUsername}' <img class="avatar" src="{avatar}" alt="avatarOne">
<br/> [{matchOptionsString}] {/await}
</button> <button on:click class="match_elem">
</li> '{match.playerOneUsername}' VS '{match.playerTwoUsername}'
<br/>
[{matchOptionsString}]
</button>
{#await fetchAvatar(match.playerTwoUsername) then avatar}
<img class="avatar" src="{avatar}" alt="avatarTwo">
{/await}
</div>
<!-- --> <!-- -->
<style> <style>
.avatar {
width: 3vw;
height: 3vw;
margin-bottom: -1vw;
}
.match_elem {
margin: 1vw;
}
</style> </style>