nicolas-arnaud
/
Transcendence
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ok

master
WalidMoovin 2 years ago
parent
ebcda7b8d7
commit
8c5a5ce018
4 changed files with 108 additions and 92 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      front/volume/src/App.svelte
  2. 89
      front/volume/src/components/Channels.svelte
  3. 20
      front/volume/src/components/Chat2.svelte
  4. 10
      front/volume/src/components/NavBar.svelte

81
front/volume/src/App.svelte
View File

@ -65,33 +65,20 @@
{ player1: "Alice", player2: "Bob", id: "3" }, { player1: "Alice", player2: "Bob", id: "3" },
]; ];
// CHAT
let isChatOpen = false;
function clickChat() {
isChatOpen = true;
}
let chatMessages: Array<chatMessagesType> = [
{ name: "Alice", text: "Bob" },
{ name: "Alice", text: "Bob" },
{ name: "Alice", text: "Bob" },
{ name: "Alice", text: "Bob" },
{ name: "Alice", text: "Bob" },
{ name: "Alice", text: "Bob" },
];
// CHANNELS // CHANNELS
let isChannelsOpen = false; let isChannelsOpen = false;
function clickChannels() { function clickChannels() {
isChannelsOpen = true; isChannelsOpen = true;
} }
let channels: Array<ChannelsType> = [ let channels: Array<ChannelsType> = [
{ name: "My Imaginary Friends", id: "1" }, { id: "1", name: "General", messages: [] },
{ name: "Chamber of Secrets", id: "4" }, { id: "2", name: "Lobby", messages: [] },
{ name: "Meme Team", id: "6" }, { id: "3", name: "Game", messages: [] },
{ name: "Chat 8", id: "8" },
{ name: "F.R.I.E.N.D.S.", id: "2" },
{ name: "Chat 3", id: "3" },
]; ];
let selectedChannel: ChannelsType;
const handleSelectChannel = (channel: ChannelsType) => {
selectedChannel = channel;
};
</script> </script>
<main> <main>
@ -100,31 +87,29 @@
{clickHistory} {clickHistory}
{clickFriends} {clickFriends}
{clickSpectate} {clickSpectate}
{clickChat} {clickChannels}
{clickChannels}
/> />
{#if isChatOpen}
<div
on:click={() => (isChatOpen = false)}
on:keydown={() => (isChatOpen = false)}
>
<Chat2 {chatMessages} />
</div>
{/if}
{#if isChannelsOpen} {#if isChannelsOpen}
<div {#if selectedChannel}
on:click={() => (isChannelsOpen = false)} <div on:click={() => (selectedChannel = undefined)} on:keydown={() => (selectedChannel = undefined)}>
on:keydown={() => (isChannelsOpen = false)} <Chat2 chatMessages={selectedChannel.messages} />
> </div>
<Channels {channels} /> {/if}
</div> {#if !selectedChannel}
{/if} <div
on:click={() => (isChannelsOpen = false)}
on:keydown={() => (isChannelsOpen = false)}
>
<Channels channels={channels} onSelectChannel={handleSelectChannel} />
</div>
{/if}
{/if}
{#if isSpectateOpen} {#if isSpectateOpen}
<div <div
on:click={() => (isSpectateOpen = false)} on:click={() => (isSpectateOpen = false)}
on:keydown={() => (isSpectateOpen = false)} on:keydown={() => (isSpectateOpen = false)}
> >
<Spectate {spectate} /> <Spectate {spectate} />
</div> </div>
{/if} {/if}
{#if isFriendOpen} {#if isFriendOpen}
@ -132,7 +117,7 @@
on:click={() => (isFriendOpen = false)} on:click={() => (isFriendOpen = false)}
on:keydown={() => (isFriendOpen = false)} on:keydown={() => (isFriendOpen = false)}
> >
<Friends {friends} /> <Friends {friends} />
</div> </div>
{/if} {/if}
{#if isHistoryOpen} {#if isHistoryOpen}
@ -140,7 +125,7 @@
on:click={() => (isHistoryOpen = false)} on:click={() => (isHistoryOpen = false)}
on:keydown={() => (isHistoryOpen = false)} on:keydown={() => (isHistoryOpen = false)}
> >
<MatchHistory {matches} /> <MatchHistory {matches} />
</div> </div>
{/if} {/if}
{#if isProfileOpen} {#if isProfileOpen}
@ -148,14 +133,14 @@
on:click={() => (isProfileOpen = false)} on:click={() => (isProfileOpen = false)}
on:keydown={() => (isProfileOpen = false)} on:keydown={() => (isProfileOpen = false)}
> >
<Profile <Profile
username="Alice" username="Alice"
wins={10} wins={10}
losses={5} losses={5}
elo={256} elo={256}
rank={23} rank={23}
is2faEnabled={false} is2faEnabled={false}
/> />
</div> </div>
{/if} {/if}
<Play /> <Play />

89
front/volume/src/components/Channels.svelte
View File

@ -1,52 +1,73 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
import type { chatMessagesType } from "./Chat2.svelte";
export interface ChannelsType { export interface ChannelsType {
id: string; id: string;
name: string; name: string;
messages: Array<chatMessagesType>;
} }
</script> </script>
<script lang="ts"> <script lang="ts">
export let channels: Array<ChannelsType> = []; export let channels: Array<ChannelsType> = [];
export let enter = (id: string) => {}; export let onSelectChannel: (channel: ChannelsType) => void;
</script> const selectChat = (id: string) => {
const channel = channels.find(c => c.id === id);
if (channel) {
onSelectChannel(channel);
}
}
const createChannel = () => {
const name = prompt("Enter a name for the new channel:");
if (name) {
const newChannel: ChannelsType = {
id: Math.random().toString(),
name,
messages: []
};
channels = [newChannel, ...channels];
}
// TODO: save to database
};
</script>
<div class="overlay"> <div class="overlay">
<div class="channels" on:click|stopPropagation on:keydown|stopPropagation> <div class="channels" on:click|stopPropagation on:keydown|stopPropagation>
<div> <div>
{#if channels.length > 0} {#if channels.length > 0}
<h2>Channels</h2> <h2>Channels</h2>
{#each channels.slice(0, 10) as _channels} {#each channels.slice(0, 10) as _channels}
<li> <li>
<span>{_channels.name}</span> <span>{_channels.name}</span>
<button on:click={() => enter(_channels.id)}>Enter</button> <button on:click={() => selectChat(_channels.id)}>Enter</button>
</li> </li>
{/each} {/each}
{:else} {:else}
<p>No channels available</p> <p>No channels available</p>
{/if} {/if}
</div> <button on:click={createChannel}>Create Channel</button>
</div>
</div> </div>
</div> </div>
<style> <style>
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 9998; z-index: 9998;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.channels { .channels {
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 1rem;
width: 300px; width: 300px;
} }
</style> </style>

20
front/volume/src/components/Chat2.svelte
View File

@ -1,23 +1,41 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export interface chatMessagesType { export interface chatMessagesType {
id: number;
name: string; name: string;
text: string; text: string;
} }
</script> </script>
<script lang="ts"> <script lang="ts">
const sendMessage = () => { const sendMessage = () => {
if (newText !== "") { if (newText !== "") {
const newMessage = { const newMessage = {
id: chatMessages.length + 1,
name: "You", name: "You",
text: newText, text: newText,
}; };
chatMessages = [...chatMessages, newMessage]; chatMessages = [...chatMessages.slice(-5 + 1), newMessage];
newText = ""; newText = "";
} }
// TODO: save to database
}; };
export let chatMessages: Array<chatMessagesType> = []; export let chatMessages: Array<chatMessagesType> = [];
let newText = ""; let newText = "";
// const openProfile = (id: number) => (event: Event) => {
// const message = chatMessages.find((m) => m.id === id);
// if (message) {
// const { name } = message;
// const options = ["View profile", "Send private message", "Block user"];
// const option = prompt(`Select an option for ${name}: ${options.join(", ")}`);
// if (option === "View profile") {
// } else if (option === "Send private message") {
// } else if (option === "Block user") {
// }
// }
// };
</script> </script>
<div class="overlay"> <div class="overlay">

10
front/volume/src/components/NavBar.svelte
View File

@ -2,8 +2,7 @@
export let links = [ export let links = [
{ text: "Home", url: "img/pong.png" }, { text: "Home", url: "img/pong.png" },
{ text: "Spectate" }, { text: "Spectate" },
{ text: "Channels" }, { text: "Channels" },
{ text: "Chat" },
{ text: "History" }, { text: "History" },
{ text: "Friends" }, { text: "Friends" },
{ text: "Profile" }, { text: "Profile" },
@ -33,13 +32,6 @@
</button> </button>
</li> </li>
{/if} {/if}
{#if link.text === "Chat"}
<li>
<button on:click={clickChat}>
<p>Chat</p>
</button>
</li>
{/if}
{#if link.text === "Friends"} {#if link.text === "Friends"}
<li> <li>
<button on:click={clickFriends}> <button on:click={clickFriends}>

Write Preview
Loading…
Cancel
Save