Merge branch 'sadjigui'
This commit is contained in:
commit
ec776b150e
@ -1,25 +0,0 @@
|
||||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: 'tsconfig.json',
|
||||
tsconfigRootDir: __dirname,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: ['@typescript-eslint/eslint-plugin'],
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
jest: true,
|
||||
},
|
||||
ignorePatterns: ['.eslintrc.js'],
|
||||
rules: {
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
},
|
||||
};
|
||||
35
backend/.gitignore
vendored
35
backend/.gitignore
vendored
@ -1,35 +0,0 @@
|
||||
# compiled output
|
||||
/dist
|
||||
/node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
pnpm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
|
||||
# Tests
|
||||
/coverage
|
||||
/.nyc_output
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
|
||||
</p>
|
||||
|
||||
[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
|
||||
[circleci-url]: https://circleci.com/gh/nestjs/nest
|
||||
|
||||
<p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
|
||||
<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
|
||||
<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
|
||||
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
|
||||
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
|
||||
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
|
||||
<a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
|
||||
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
|
||||
<a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
|
||||
</p>
|
||||
<!--[](https://opencollective.com/nest#backer)
|
||||
[](https://opencollective.com/nest#sponsor)-->
|
||||
|
||||
## Description
|
||||
|
||||
[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
## Running the app
|
||||
|
||||
```bash
|
||||
# development
|
||||
$ npm run start
|
||||
|
||||
# watch mode
|
||||
$ npm run start:dev
|
||||
|
||||
# production mode
|
||||
$ npm run start:prod
|
||||
```
|
||||
|
||||
## Test
|
||||
|
||||
```bash
|
||||
# unit tests
|
||||
$ npm run test
|
||||
|
||||
# e2e tests
|
||||
$ npm run test:e2e
|
||||
|
||||
# test coverage
|
||||
$ npm run test:cov
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
|
||||
|
||||
## Stay in touch
|
||||
|
||||
- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
|
||||
- Website - [https://nestjs.com](https://nestjs.com/)
|
||||
- Twitter - [@nestframework](https://twitter.com/nestframework)
|
||||
|
||||
## License
|
||||
|
||||
Nest is [MIT licensed](LICENSE).
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/nest-cli",
|
||||
"collection": "@nestjs/schematics",
|
||||
"sourceRoot": "src",
|
||||
"compilerOptions": {
|
||||
"deleteOutDir": true
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService } from './app.service';
|
||||
|
||||
describe('AppController', () => {
|
||||
let appController: AppController;
|
||||
|
||||
beforeEach(async () => {
|
||||
const app: TestingModule = await Test.createTestingModule({
|
||||
controllers: [AppController],
|
||||
providers: [AppService],
|
||||
}).compile();
|
||||
|
||||
appController = app.get<AppController>(AppController);
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
it('should return "Hello World!"', () => {
|
||||
expect(appController.getHello()).toBe('Hello World!');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,61 +0,0 @@
|
||||
import { Body, Controller, Get, Param, Post, Query, InternalServerErrorException } from '@nestjs/common';
|
||||
// import { AppService } from './app.service.js';
|
||||
import { UsersService } from './app.service';
|
||||
import { User } from './model/item.entity';
|
||||
// import { HttpService } from '@nestjs/common';
|
||||
// import { HttpService } from '@nestjs/axios'
|
||||
import axios from 'axios';
|
||||
import { AxiosResponse } from 'axios';
|
||||
|
||||
|
||||
@Controller()
|
||||
export class AppController2 {
|
||||
constructor(private readonly usersService: UsersService) {}
|
||||
|
||||
@Get()
|
||||
getHello(): string {
|
||||
return this.usersService.getHello();
|
||||
}
|
||||
}
|
||||
|
||||
@Controller('api')
|
||||
export class AppController
|
||||
{
|
||||
constructor(private readonly usersService: UsersService) {}
|
||||
|
||||
@Post('token')
|
||||
async getToken(@Body('code') code: string): Promise<any>
|
||||
{
|
||||
const http = axios;
|
||||
console.log(`here is the code= ${code}`);
|
||||
const data = {
|
||||
grant_type: 'authorization_code',
|
||||
client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
|
||||
client_secret: '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',
|
||||
code: code,
|
||||
redirect_uri: 'http://localhost:8080/login42',
|
||||
};
|
||||
try {
|
||||
const response: AxiosResponse = await http.post('https://api.intra.42.fr/oauth/token', data);
|
||||
// console.log(`response= ${response}`);
|
||||
return response;
|
||||
}
|
||||
catch (error)
|
||||
{
|
||||
console.error(error);
|
||||
throw new InternalServerErrorException('Failed to get access token');
|
||||
}
|
||||
}
|
||||
|
||||
@Post('login')
|
||||
async create(@Body() user: User)
|
||||
{
|
||||
return this.usersService.create(user);
|
||||
}
|
||||
|
||||
@Get('user/:id')
|
||||
async getUser(@Param('id') id: number)
|
||||
{
|
||||
return this.usersService.findOne(id);
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
// import { Module } from '@nestjs/common';
|
||||
// import { AppController } from './app.controller';
|
||||
// import { AppService } from './app.service';
|
||||
|
||||
// @Module({
|
||||
// imports: [],
|
||||
// controllers: [AppController],
|
||||
// providers: [AppService],
|
||||
// })
|
||||
// export class AppModule {}
|
||||
|
||||
|
||||
|
||||
import { Module } from '@nestjs/common';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService, UsersService } from './app.service';
|
||||
import { User } from './model/item.entity';
|
||||
import { TypeOrmModule } from '@nestjs/typeorm';
|
||||
import { getTypeOrmConfig } from './config/config.service';
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
TypeOrmModule.forRoot(getTypeOrmConfig()),
|
||||
TypeOrmModule.forFeature([User]),
|
||||
// TypeOrmModule.forFeature([UserRepository]),
|
||||
],
|
||||
controllers: [AppController],
|
||||
providers: [AppService, UsersService],
|
||||
})
|
||||
export class AppModule { }
|
||||
@ -1,46 +0,0 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
import { InjectRepository } from '@nestjs/typeorm';
|
||||
import { Repository } from 'typeorm';
|
||||
import { User } from './model/item.entity';
|
||||
// import { User } from './entity/user.entity';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class AppService {
|
||||
getHello(): string {
|
||||
return 'Hello World!';
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class UsersService {
|
||||
constructor(
|
||||
@InjectRepository(User) private userRepository: Repository<User>,
|
||||
) {}
|
||||
// constructor(
|
||||
// @InjectRepository(User)
|
||||
// private usersRepository: Repository<User>,
|
||||
// ) {}
|
||||
// constructor(
|
||||
// @InjectRepository(User)
|
||||
// private usersRepository: Repository<User>,
|
||||
// ) {}
|
||||
// constructor(private usersRepository: Repository<User>) {}
|
||||
|
||||
getHello(): string {
|
||||
return 'Hello World!';
|
||||
}
|
||||
|
||||
async create(user: User): Promise<User> {
|
||||
return await this.userRepository.save(user);
|
||||
}
|
||||
|
||||
async findAll(): Promise<User[]> {
|
||||
return await this.userRepository.find();
|
||||
}
|
||||
|
||||
async findOne(id: number): Promise<User> {
|
||||
return await this.userRepository.findOneBy({id: id});
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* config.service.ts :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2023/04/09 14:53:49 by apommier #+# #+# */
|
||||
/* Updated: 2023/04/09 14:55:40 by apommier ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { TypeOrmModuleOptions } from '@nestjs/typeorm';
|
||||
export const getTypeOrmConfig = (): TypeOrmModuleOptions => ({
|
||||
type: 'postgres',
|
||||
host: 'postgresql',
|
||||
port: 5432,
|
||||
username: 'postgres',
|
||||
password: 'pass',
|
||||
database: 'postgres',
|
||||
entities: ['**/*.entity{.ts,.js}'],
|
||||
migrationsTableName: 'migration',
|
||||
migrations: ['src/migration/*.ts'],
|
||||
ssl: process.env.MODE !== 'DEV',
|
||||
synchronize: true,
|
||||
});
|
||||
@ -1,17 +0,0 @@
|
||||
import { NestFactory } from '@nestjs/core';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = await NestFactory.create(AppModule, {
|
||||
cors: {
|
||||
origin: '*',
|
||||
methods: '*',
|
||||
// preflightContinue: false,
|
||||
// optionsSuccessStatus: 204,
|
||||
// credentials: true,
|
||||
allowedHeaders: '*',
|
||||
},
|
||||
});
|
||||
await app.listen(3000);
|
||||
}
|
||||
bootstrap();
|
||||
@ -1,83 +0,0 @@
|
||||
// // import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';
|
||||
// import {Entity, PrimaryGeneratedColumn, Column} from 'typeorm';
|
||||
|
||||
// @Entity()
|
||||
// export class User {
|
||||
// @PrimaryGeneratedColumn()
|
||||
// id: number;
|
||||
|
||||
// @Column()
|
||||
// nickName: string;
|
||||
|
||||
// @Column()
|
||||
// Password: string;
|
||||
|
||||
// @Column()
|
||||
// email: string;
|
||||
|
||||
// @Column()
|
||||
// password: string;
|
||||
|
||||
// @Column()
|
||||
// win: number;
|
||||
|
||||
// @Column()
|
||||
// loose: number;
|
||||
|
||||
// // friend
|
||||
// // joined chat
|
||||
// // jsp
|
||||
// // prout
|
||||
// }
|
||||
|
||||
// base.entity.ts
|
||||
// @PrimaryGeneratedColumn('uuid')
|
||||
// id: string;
|
||||
|
||||
// @Column({ type: 'boolean', default: true })
|
||||
// isActive: boolean;
|
||||
|
||||
// @Column({ type: 'boolean', default: false })
|
||||
// isArchived: boolean;
|
||||
|
||||
// @CreateDateColumn({ type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
|
||||
// createDateTime: Date;
|
||||
|
||||
// @Column({ type: 'varchar', length: 300 })
|
||||
// createdBy: string;
|
||||
|
||||
// @UpdateDateColumn({ type: 'timestamptz', default: () => 'CURRENT_TIMESTAMP' })
|
||||
// lastChangedDateTime: Date;
|
||||
|
||||
// @Column({ type: 'varchar', length: 300 })
|
||||
// lastChangedBy: string;
|
||||
|
||||
// @Column({ type: 'varchar', length: 300, nullable: true })
|
||||
// internalComment: string | null;
|
||||
import { PrimaryGeneratedColumn, Column, UpdateDateColumn, CreateDateColumn } from 'typeorm';
|
||||
|
||||
export abstract class BaseEntity {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column({ nullable: true })
|
||||
nickname: string;
|
||||
|
||||
@Column({ nullable: true })
|
||||
password: string;
|
||||
|
||||
@Column({ nullable: true })
|
||||
email: string;
|
||||
|
||||
// @Column({ nullable: true })
|
||||
// password: string;
|
||||
|
||||
@Column({ default: 0 })
|
||||
win: number;
|
||||
|
||||
@Column({ default: 0 })
|
||||
loose: number;
|
||||
|
||||
@Column({ default: 0 })
|
||||
rank: number;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
// item.entity.ts
|
||||
import { Entity, Column } from 'typeorm';
|
||||
import { BaseEntity } from './base.entity';
|
||||
|
||||
@Entity({ name: 'User' })
|
||||
export class User extends BaseEntity {
|
||||
|
||||
@Column({ type: 'varchar', length: 300 , nullable: true})
|
||||
name: string;
|
||||
|
||||
@Column({ type: 'varchar', length: 300 , nullable: true})
|
||||
description: string;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { INestApplication } from '@nestjs/common';
|
||||
import * as request from 'supertest';
|
||||
import { AppModule } from './../src/app.module';
|
||||
|
||||
describe('AppController (e2e)', () => {
|
||||
let app: INestApplication;
|
||||
|
||||
beforeEach(async () => {
|
||||
const moduleFixture: TestingModule = await Test.createTestingModule({
|
||||
imports: [AppModule],
|
||||
}).compile();
|
||||
|
||||
app = moduleFixture.createNestApplication();
|
||||
await app.init();
|
||||
});
|
||||
|
||||
it('/ (GET)', () => {
|
||||
return request(app.getHttpServer())
|
||||
.get('/')
|
||||
.expect(200)
|
||||
.expect('Hello World!');
|
||||
});
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"moduleFileExtensions": ["js", "json", "ts"],
|
||||
"rootDir": ".",
|
||||
"testEnvironment": "node",
|
||||
"testRegex": ".e2e-spec.ts$",
|
||||
"transform": {
|
||||
"^.+\\.(t|j)s$": "ts-jest"
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"target": "es2017",
|
||||
"sourceMap": true,
|
||||
"outDir": "./dist",
|
||||
"baseUrl": "./",
|
||||
"incremental": true,
|
||||
"skipLibCheck": true,
|
||||
"strictNullChecks": false,
|
||||
"noImplicitAny": false,
|
||||
"strictBindCallApply": false,
|
||||
"forceConsistentCasingInFileNames": false,
|
||||
"noFallthroughCasesInSwitch": false
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: 'tsconfig.json',
|
||||
tsconfigRootDir: __dirname,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: ['@typescript-eslint/eslint-plugin'],
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:prettier/recommended',
|
||||
],
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
jest: true,
|
||||
},
|
||||
ignorePatterns: ['.eslintrc.js'],
|
||||
rules: {
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
},
|
||||
};
|
||||
35
chat/.gitignore
vendored
35
chat/.gitignore
vendored
@ -1,35 +0,0 @@
|
||||
# compiled output
|
||||
/dist
|
||||
/node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
pnpm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
|
||||
# Tests
|
||||
/coverage
|
||||
/.nyc_output
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
|
||||
</p>
|
||||
|
||||
[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
|
||||
[circleci-url]: https://circleci.com/gh/nestjs/nest
|
||||
|
||||
<p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
|
||||
<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
|
||||
<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
|
||||
<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
|
||||
<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
|
||||
<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
|
||||
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
|
||||
<a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
|
||||
<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
|
||||
<a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
|
||||
</p>
|
||||
<!--[](https://opencollective.com/nest#backer)
|
||||
[](https://opencollective.com/nest#sponsor)-->
|
||||
|
||||
## Description
|
||||
|
||||
[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
$ npm install
|
||||
```
|
||||
|
||||
## Running the app
|
||||
|
||||
```bash
|
||||
# development
|
||||
$ npm run start
|
||||
|
||||
# watch mode
|
||||
$ npm run start:dev
|
||||
|
||||
# production mode
|
||||
$ npm run start:prod
|
||||
```
|
||||
|
||||
## Test
|
||||
|
||||
```bash
|
||||
# unit tests
|
||||
$ npm run test
|
||||
|
||||
# e2e tests
|
||||
$ npm run test:e2e
|
||||
|
||||
# test coverage
|
||||
$ npm run test:cov
|
||||
```
|
||||
|
||||
## Support
|
||||
|
||||
Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
|
||||
|
||||
## Stay in touch
|
||||
|
||||
- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
|
||||
- Website - [https://nestjs.com](https://nestjs.com/)
|
||||
- Twitter - [@nestframework](https://twitter.com/nestframework)
|
||||
|
||||
## License
|
||||
|
||||
Nest is [MIT licensed](LICENSE).
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/nest-cli",
|
||||
"collection": "@nestjs/schematics",
|
||||
"sourceRoot": "src",
|
||||
"compilerOptions": {
|
||||
"deleteOutDir": true
|
||||
}
|
||||
}
|
||||
8353
chat/package-lock.json
generated
8353
chat/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,72 +0,0 @@
|
||||
{
|
||||
"name": "chat",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"author": "",
|
||||
"private": true,
|
||||
"license": "UNLICENSED",
|
||||
"scripts": {
|
||||
"build": "nest build",
|
||||
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
|
||||
"start": "nest start",
|
||||
"start:dev": "nest start --watch",
|
||||
"start:debug": "nest start --debug --watch",
|
||||
"start:prod": "node dist/main",
|
||||
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:cov": "jest --coverage",
|
||||
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
|
||||
"test:e2e": "jest --config ./test/jest-e2e.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nestjs/common": "^9.0.0",
|
||||
"@nestjs/core": "^9.0.0",
|
||||
"@nestjs/platform-express": "^9.0.0",
|
||||
"@nestjs/websockets": "^9.4.0",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"rxjs": "^7.2.0",
|
||||
"socket.io": "^4.6.1",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nestjs/cli": "^9.0.0",
|
||||
"@nestjs/schematics": "^9.0.0",
|
||||
"@nestjs/testing": "^9.0.0",
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/jest": "29.5.0",
|
||||
"@types/node": "18.15.11",
|
||||
"@types/supertest": "^2.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"eslint": "^8.0.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"jest": "29.5.0",
|
||||
"prettier": "^2.3.2",
|
||||
"source-map-support": "^0.5.20",
|
||||
"supertest": "^6.1.3",
|
||||
"ts-jest": "29.0.5",
|
||||
"ts-loader": "^9.2.3",
|
||||
"ts-node": "^10.0.0",
|
||||
"tsconfig-paths": "4.2.0",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"json",
|
||||
"ts"
|
||||
],
|
||||
"rootDir": "src",
|
||||
"testRegex": ".*\\.spec\\.ts$",
|
||||
"transform": {
|
||||
"^.+\\.(t|j)s$": "ts-jest"
|
||||
},
|
||||
"collectCoverageFrom": [
|
||||
"**/*.(t|j)s"
|
||||
],
|
||||
"coverageDirectory": "../coverage",
|
||||
"testEnvironment": "node"
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService } from './app.service';
|
||||
|
||||
describe('AppController', () => {
|
||||
let appController: AppController;
|
||||
|
||||
beforeEach(async () => {
|
||||
const app: TestingModule = await Test.createTestingModule({
|
||||
controllers: [AppController],
|
||||
providers: [AppService],
|
||||
}).compile();
|
||||
|
||||
appController = app.get<AppController>(AppController);
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
it('should return "Hello World!"', () => {
|
||||
expect(appController.getHello()).toBe('Hello World!');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
import { Controller, Get } from '@nestjs/common';
|
||||
import { AppService } from './app.service';
|
||||
|
||||
@Controller()
|
||||
export class AppController {
|
||||
constructor(private readonly appService: AppService) {}
|
||||
|
||||
@Get()
|
||||
getHello(): string {
|
||||
return this.appService.getHello();
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import { Module } from '@nestjs/common';
|
||||
import { AppController } from './app.controller';
|
||||
import { AppService } from './app.service';
|
||||
import { ChatGateway } from './chat/chat.gateway';
|
||||
|
||||
@Module({
|
||||
imports: [],
|
||||
controllers: [AppController],
|
||||
providers: [AppService, ChatGateway],
|
||||
})
|
||||
export class AppModule {}
|
||||
@ -1,8 +0,0 @@
|
||||
import { Injectable } from '@nestjs/common';
|
||||
|
||||
@Injectable()
|
||||
export class AppService {
|
||||
getHello(): string {
|
||||
return 'Hello World!';
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { ChatGateway } from './chat.gateway';
|
||||
|
||||
describe('ChatGateway', () => {
|
||||
let gateway: ChatGateway;
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
providers: [ChatGateway],
|
||||
}).compile();
|
||||
|
||||
gateway = module.get<ChatGateway>(ChatGateway);
|
||||
});
|
||||
|
||||
it('should be defined', () => {
|
||||
expect(gateway).toBeDefined();
|
||||
});
|
||||
});
|
||||
4
|
||||
@ -1,45 +0,0 @@
|
||||
import { SubscribeMessage, WebSocketGateway, OnGatewayInit, WebSocketServer, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';
|
||||
import { Server, Socket } from 'socket.io';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
@WebSocketGateway({ cors: true })
|
||||
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
|
||||
|
||||
|
||||
private clients: Record<string, Socket> = {};
|
||||
|
||||
afterInit(server: Server)
|
||||
{
|
||||
console.log('ChatGateway initialized');
|
||||
}
|
||||
|
||||
handleConnection(client: Socket, ...args: any[])
|
||||
{
|
||||
console.log(`Client connected: ${client.id}`);
|
||||
|
||||
const clientId = uuidv4();
|
||||
this.clients[clientId] = client;
|
||||
client.emit('chat:clientId', clientId);
|
||||
|
||||
console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
|
||||
}
|
||||
|
||||
handleDisconnect(client: Socket)
|
||||
{
|
||||
console.log(`Client disconnected: ${client.id}`);
|
||||
|
||||
const disconnectedClientId = Object.keys(this.clients).find(clientId => this.clients[clientId] === client);
|
||||
if (disconnectedClientId)
|
||||
{
|
||||
delete this.clients[disconnectedClientId];
|
||||
console.log(`Client disconnected: ${disconnectedClientId}`);
|
||||
console.log(`Total connected clients: ${Object.keys(this.clients).length}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@SubscribeMessage('message')
|
||||
handleMessage(client: any, payload: any): string {
|
||||
return 'Hello world!';
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import { NestFactory } from '@nestjs/core';
|
||||
import { AppModule } from './app.module';
|
||||
import * as socketio from 'socket.io';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = await NestFactory.create(AppModule, {
|
||||
cors:
|
||||
{
|
||||
origin: '*',
|
||||
methods: '*',
|
||||
allowedHeaders: '*',
|
||||
},
|
||||
});
|
||||
|
||||
const httpServer = app.getHttpServer();
|
||||
const io = new socketio.Server(httpServer);
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
console.log('Client connected:', socket.id);
|
||||
|
||||
// Gestion des événements personnalisés ici
|
||||
socket.on('customEvent', (data) => {
|
||||
console.log('Custom event received:', data);
|
||||
|
||||
// Exemple de réponse à un événement personnalisé
|
||||
socket.emit('customEventResponse', { message: 'Event processed.' });
|
||||
});
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
console.log('Client disconnected:', socket.id);
|
||||
});
|
||||
});
|
||||
|
||||
await app.listen(4001);
|
||||
}
|
||||
bootstrap();
|
||||
@ -1,24 +0,0 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing';
|
||||
import { INestApplication } from '@nestjs/common';
|
||||
import * as request from 'supertest';
|
||||
import { AppModule } from './../src/app.module';
|
||||
|
||||
describe('AppController (e2e)', () => {
|
||||
let app: INestApplication;
|
||||
|
||||
beforeEach(async () => {
|
||||
const moduleFixture: TestingModule = await Test.createTestingModule({
|
||||
imports: [AppModule],
|
||||
}).compile();
|
||||
|
||||
app = moduleFixture.createNestApplication();
|
||||
await app.init();
|
||||
});
|
||||
|
||||
it('/ (GET)', () => {
|
||||
return request(app.getHttpServer())
|
||||
.get('/')
|
||||
.expect(200)
|
||||
.expect('Hello World!');
|
||||
});
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"moduleFileExtensions": ["js", "json", "ts"],
|
||||
"rootDir": ".",
|
||||
"testEnvironment": "node",
|
||||
"testRegex": ".e2e-spec.ts$",
|
||||
"transform": {
|
||||
"^.+\\.(t|j)s$": "ts-jest"
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"removeComments": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"target": "es2017",
|
||||
"sourceMap": true,
|
||||
"outDir": "./dist",
|
||||
"baseUrl": "./",
|
||||
"incremental": true,
|
||||
"skipLibCheck": true,
|
||||
"strictNullChecks": false,
|
||||
"noImplicitAny": false,
|
||||
"strictBindCallApply": false,
|
||||
"forceConsistentCasingInFileNames": false,
|
||||
"noFallthroughCasesInSwitch": false
|
||||
}
|
||||
}
|
||||
@ -27,38 +27,53 @@ export class AppController {
|
||||
kFactor = 36;
|
||||
scaleFactor = 400;
|
||||
|
||||
@Redirect('http://localhost/token', 302)
|
||||
@Get('auth/login')
|
||||
async login2(@Req() request: Request) {
|
||||
const url = request.url;
|
||||
const user = await this.loginClass.Login42(url);
|
||||
console.log(`user in auth/login= ${user}`);
|
||||
const data = this.authService.login(user);
|
||||
console.log(`all data in api = ${data}`)
|
||||
|
||||
const myJSON = JSON.stringify(data);
|
||||
console.log(`all data json version= ${myJSON}`)
|
||||
|
||||
console.log(`data in api = ${(await data).access_token}`)
|
||||
const token = (await data).access_token;
|
||||
return { url: `http://localhost/token?data=${encodeURIComponent(JSON.stringify(token))}` };
|
||||
}
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// User
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Get('/profile')
|
||||
getProfile(@Request() req) {
|
||||
const myJSON = JSON.stringify(req.user);
|
||||
console.log(`req user api= ${req.user}`)
|
||||
console.log(`json user api= ${myJSON}`)
|
||||
return req.user;
|
||||
async getProfile(@Request() req) {
|
||||
// const myJSON = JSON.stringify(req.user);
|
||||
// console.log(`req user api= ${req.user}`)
|
||||
// console.log(`json user api= ${myJSON}`)
|
||||
// return req.user;
|
||||
return await this.userService.findOne(req.user.username);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Get('/user')
|
||||
@Post('/user')
|
||||
async getUser( @Body() data: any) {
|
||||
console.log(`usernamewwww= ${data.username}`)
|
||||
return await this.userService.findOne(data.username);
|
||||
}
|
||||
|
||||
@Get('/friends')
|
||||
async getFriends(@Request() req) {
|
||||
// return await this.userService.getFriends(req.user.username);
|
||||
return await this.userService.getFriends("apommier");
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Post('/nickname')
|
||||
async setNickname(@Request() req, @Body() data: any) {
|
||||
// let user = req.user
|
||||
// user.nickname = data.nickname
|
||||
let user = await this.userService.findOne(req.user.username)
|
||||
user.nickname = data.nickname;
|
||||
// return await this.userService.getFriends(req.user.username);
|
||||
return await this.userService.save(user);
|
||||
}
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// Pong
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Post('/win')
|
||||
async addWin(@Request() req, @Body() data: any) {
|
||||
@ -110,6 +125,52 @@ export class AppController {
|
||||
return user.rank;
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Post('/history')
|
||||
async getHistory(@Body() data: any)
|
||||
{
|
||||
// const user = await this.userService.findOne(req.user.username);
|
||||
// return user.rank;
|
||||
return await this.userService.getHistory(data.username);
|
||||
|
||||
// if (user) {
|
||||
// const children = user.children;
|
||||
// console.log(user);
|
||||
// console.log(user.children); // or perform any operations with the children
|
||||
// return children;
|
||||
// // You can also access specific properties of each child
|
||||
// // children.forEach((child) => {
|
||||
// // console.log(child.id);
|
||||
// // console.log(child.opponent);
|
||||
// // // Access other child properties as needed
|
||||
// // });
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// Auth
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
@Redirect('http://localhost/token', 302)
|
||||
@Get('auth/login')
|
||||
async login2(@Req() request: Request) {
|
||||
const url = request.url;
|
||||
const user = await this.loginClass.Login42(url);
|
||||
console.log(`user in auth/login= ${user}`);
|
||||
const data = this.authService.login(user);
|
||||
console.log(`all data in api = ${data}`)
|
||||
|
||||
const myJSON = JSON.stringify(data);
|
||||
console.log(`all data json version= ${myJSON}`)
|
||||
|
||||
console.log(`data in api = ${(await data).access_token}`)
|
||||
const token = (await data).access_token;
|
||||
return { url: `http://localhost/token?data=${encodeURIComponent(JSON.stringify(token))}` };
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@Get('/2fa')
|
||||
async get2fa(@Request() req)
|
||||
@ -137,6 +198,13 @@ export class AppController {
|
||||
console.log("User quit");
|
||||
}
|
||||
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// Chat
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
@Post('/conv')
|
||||
async createConv(@Request() req, @Body() data: any) {
|
||||
///create conv and return it ? id?
|
||||
@ -146,6 +214,8 @@ export class AppController {
|
||||
// res.json(messages);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @UseGuards(JwtAuthGuard)
|
||||
@Get('/conv')
|
||||
async getConv(@Request() req, @Body() data: any) {
|
||||
|
||||
@ -66,7 +66,9 @@ export class loginClass {
|
||||
userId: userId,
|
||||
children: null,
|
||||
status: 1,
|
||||
doubleAuth: 0
|
||||
doubleAuth: 0,
|
||||
friendRequest: null,
|
||||
friends: null,
|
||||
};
|
||||
await this.usersService.create(user);
|
||||
}
|
||||
|
||||
@ -47,8 +47,15 @@ export class User {
|
||||
@Column({ default: 0 })
|
||||
doubleAuth: number;
|
||||
|
||||
@OneToMany(() => MatchLog, child => child.parent)
|
||||
@Column('text', { array: true, nullable: true })
|
||||
friendRequest: string[];
|
||||
|
||||
@Column('text', { array: true, nullable: true })
|
||||
friends: string[];
|
||||
|
||||
@OneToMany(() => MatchLog, (child) => child.parent, { eager: true })
|
||||
children: MatchLog[];
|
||||
|
||||
}
|
||||
|
||||
@Entity()
|
||||
|
||||
@ -38,6 +38,33 @@ export class UsersService {
|
||||
await this.matchRepository.save(match);
|
||||
return await this.userRepository.save(user);
|
||||
}
|
||||
|
||||
async getFriends(username: string) {
|
||||
const user = await this.findOne(username)
|
||||
let friendsTab = user.friends
|
||||
console.log(friendsTab)
|
||||
friendsTab = ['apommier', 'syd']
|
||||
const friends = await this.userRepository.query("SELECT * FROM \"User\" WHERE username = ANY ($1);", [friendsTab]);
|
||||
console.log(friends)
|
||||
return (friends)
|
||||
}
|
||||
|
||||
async getHistory(username: string) {
|
||||
const user = await this.findOne(username);
|
||||
|
||||
if (user) {
|
||||
const children = user.children;
|
||||
console.log(user);
|
||||
console.log(user.children); // or perform any operations with the children
|
||||
return children;
|
||||
// You can also access specific properties of each child
|
||||
// children.forEach((child) => {
|
||||
// console.log(child.id);
|
||||
// console.log(child.opponent);
|
||||
// // Access other child properties as needed
|
||||
// });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -83,6 +83,7 @@ export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewa
|
||||
@SubscribeMessage('connection')
|
||||
connectClient(client: any, payload: any): void {
|
||||
console.log("connect client")
|
||||
console.log(`connect name: ${payload.username}`);
|
||||
if (this.clientsNames.has(payload.username)) {
|
||||
console.log("get it")
|
||||
const clientArray = this.clientsNames.get(payload.username); // Retrieve the array
|
||||
|
||||
@ -16,7 +16,7 @@ import SuccessToken from '../script/tokenSuccess'
|
||||
|
||||
import DoubleAuth from "../pages/2fa.js";
|
||||
import Game from "../pages/Game.jsx";
|
||||
import Social from "../pages/Social.jsx";
|
||||
import Social from "../components/Social/Social.jsx";
|
||||
|
||||
function AnimatedRoute () {
|
||||
const location = useLocation();
|
||||
@ -26,6 +26,7 @@ function AnimatedRoute () {
|
||||
|
||||
<Route exact path="/" element={<HomeLogin/>}/>
|
||||
<Route exact path="/profile" element={<Home/>}/>
|
||||
<Route exact path="/profile/:username" element={<Home/>}/>
|
||||
|
||||
<Route exact path="/2fa" element={<DoubleAuth/>}/>
|
||||
<Route exact path="/Social" element={<Social/>}/>
|
||||
|
||||
@ -81,7 +81,7 @@ function Header() {
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}>
|
||||
{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
|
||||
{modalOpen && <Modal modalOpen={modalOpen} handleclose={close}/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
import React from "react"
|
||||
import styled from "styled-components"
|
||||
import '../../styles/Messages.css'
|
||||
import DefaultPic from '../../assets/profile.jpg';
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
import Conversation from "./Conversation";
|
||||
import Input from "./Input";
|
||||
|
||||
|
||||
const TouchDiv = styled.div`
|
||||
margin-left: 10px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 21px;
|
||||
cursor: pointer;
|
||||
justify-content: space-around;
|
||||
|
||||
&:hover {
|
||||
color: #F4F3EF;
|
||||
}
|
||||
`
|
||||
|
||||
function Chat(){
|
||||
return (
|
||||
<div className="chat">
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<TouchDiv>Dummy</TouchDiv>
|
||||
<div className="end">
|
||||
<TouchDiv>
|
||||
<MdOutlineGroupAdd/>
|
||||
</TouchDiv>
|
||||
<TouchDiv>
|
||||
<ImBlocked/>
|
||||
</TouchDiv>
|
||||
</div>
|
||||
</div>
|
||||
{/* <Conversation/> */}
|
||||
{/* <Input/> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Chat
|
||||
|
||||
|
||||
// const SideSpan = styled.span`
|
||||
// font-size: 18px;
|
||||
// font-weight: 500;
|
||||
// cursor: pointer;
|
||||
// margin-bottom: 40px;
|
||||
|
||||
// &:hover {
|
||||
// color: #F4F3EF;
|
||||
// }
|
||||
// `
|
||||
|
||||
// const SideP = styled.p`
|
||||
// font-size: 14px;
|
||||
// color: lightgray
|
||||
// `
|
||||
@ -1,15 +1,31 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import io from 'socket.io-client';
|
||||
import '../../styles/Messages.css'
|
||||
import styled from "styled-components";
|
||||
import DefaultPic from '../../assets/profile.jpg'
|
||||
import api from '../../script/axiosApi';
|
||||
|
||||
import io from 'socket.io-client';
|
||||
import { TbSend } from 'react-icons/tb';
|
||||
import MessageYou from "./MessageYou"
|
||||
import Message from "./Message"
|
||||
import Input from "./Input";
|
||||
// import Input from "./Input";
|
||||
|
||||
//react icons
|
||||
import { TbSend } from 'react-icons/tb';
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
|
||||
|
||||
const TouchDiv = styled.div`
|
||||
margin-left: 10px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 21px;
|
||||
cursor: pointer;
|
||||
justify-content: space-around;
|
||||
|
||||
&:hover {
|
||||
color: #F4F3EF;
|
||||
}
|
||||
`
|
||||
|
||||
const UserChat = styled.div `
|
||||
padding: 5px;
|
||||
@ -35,15 +51,6 @@ const SideP = styled.p`
|
||||
margin-left: 15px;
|
||||
`
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// Socket handler
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
|
||||
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// Logical part
|
||||
@ -53,9 +60,10 @@ const SideP = styled.p`
|
||||
|
||||
function Chats(){
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [conversations, setConversation] = useState([]);
|
||||
const [user, setUser] = useState(null);
|
||||
const [currentChat, setCurrentChat] = useState(null);
|
||||
const [currentChat, setCurrentChat] = useState(false); // false is good?
|
||||
const [messages, setMessage] = useState([]);
|
||||
const [newMessages, setNewMessage] = useState("");
|
||||
const [incomingMessage, setIncomingMessage] = useState("");
|
||||
@ -77,26 +85,29 @@ function Chats(){
|
||||
const convs = await api.get("/conv")
|
||||
const tmpUser = await api.get("/profile")
|
||||
console.log(convs);
|
||||
setUser(tmpUser);
|
||||
setUser(tmpUser.data);
|
||||
setConversation(convs.data);
|
||||
// return tmpUser;
|
||||
|
||||
|
||||
console.log(`tmpUser= ${tmpUser.data}`);
|
||||
socket.current = io("http://localhost:4001");
|
||||
// console.log(`user= ${tmpUser.data.username}`);
|
||||
// console.log(`user= ${tmpUser.data.nickname}`);
|
||||
// console.log(`user= ${tmpUser.data}`);
|
||||
socket.current = io("ws://localhost:4001");
|
||||
console.log(`connection....`);
|
||||
socket.current.emit('connection', {username: tmpUser.data.username})
|
||||
// const socket = io("http://localhost:4001", {
|
||||
// query: {
|
||||
// username: user.data.username,
|
||||
// username: user.username,
|
||||
// },});
|
||||
socket.current.on('message', (data) => { //data should be a message ?
|
||||
console.log(`message received data= ${data.sender}`)
|
||||
console.log(`message received data= ${data.convId}`)
|
||||
console.log(`message received data= ${data.sender}`)
|
||||
console.log(`curretn chat = ${currentChat}`)
|
||||
console.log(`current chat = ${currentChat}`)
|
||||
setIncomingMessage(data);
|
||||
});
|
||||
setIsLoading(false)
|
||||
|
||||
}
|
||||
catch(err){
|
||||
@ -135,25 +146,24 @@ function Chats(){
|
||||
useEffect(()=> {
|
||||
const getMessage = async ()=>
|
||||
{
|
||||
const data = {
|
||||
convId: currentChat.id
|
||||
};
|
||||
try{
|
||||
const res = await api.post('/getMessage', data);
|
||||
setMessage(res.data);
|
||||
} catch(err){
|
||||
const data = {convId: currentChat.id};
|
||||
|
||||
try {
|
||||
const res = await api.post('/getMessage', data);
|
||||
setMessage(res.data);
|
||||
} catch(err) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
getMessage()
|
||||
}, [currentChat])
|
||||
|
||||
|
||||
getMessage();
|
||||
}, [currentChat]);
|
||||
|
||||
const handleSubmit = async (e)=>{
|
||||
e.preventDefault();
|
||||
// console.log(`e= ${e.key}`)
|
||||
// console.log(`name= ${user.username}`)
|
||||
const message = {
|
||||
sender: user.data.username,
|
||||
sender: user.username,
|
||||
text: newMessages,
|
||||
convId: currentChat.id,
|
||||
members: null
|
||||
@ -175,8 +185,82 @@ function Chats(){
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyPress = async (e)=>{
|
||||
// console.log(`e in press= ${e.key}`)
|
||||
if (e.key !== "Enter")
|
||||
return ;
|
||||
// console.log(`name= ${user.username}`)
|
||||
const message = {
|
||||
sender: user.username,
|
||||
text: newMessages,
|
||||
convId: currentChat.id,
|
||||
members: null
|
||||
};
|
||||
try{
|
||||
console.log(`id= ${currentChat.id}`)
|
||||
const res = await api.post('/message', message);
|
||||
const convMember = await api.post('/member', message);
|
||||
message.members = convMember.data.members;
|
||||
console.log(convMember);
|
||||
// console.log(`currentChat= ${currentChat.id}`)
|
||||
|
||||
setMessage([...messages, res.data]);
|
||||
setNewMessage("");
|
||||
socket.current.emit('sendMessage', message);
|
||||
}
|
||||
catch(err){
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(`data user1= ${user.username}`)
|
||||
|
||||
// while (user === null)
|
||||
// ;
|
||||
|
||||
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
// HTML
|
||||
//========================================================================================================
|
||||
//========================================================================================================
|
||||
|
||||
|
||||
return (
|
||||
<div className="chat">
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<span>
|
||||
{isLoading ? (
|
||||
<h4>Loading...</h4>
|
||||
) : (
|
||||
<h4>{user.nickname}</h4>
|
||||
// <h4>{user.username}</h4>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <div className="chat"> */}
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<span>
|
||||
{isLoading ? (
|
||||
<h4>Loading...</h4>
|
||||
) : (
|
||||
<h4>{user.nickname}</h4>
|
||||
)}
|
||||
</span>
|
||||
<div className="end">
|
||||
<TouchDiv>
|
||||
<MdOutlineGroupAdd/>
|
||||
</TouchDiv>
|
||||
<TouchDiv>
|
||||
<ImBlocked/>
|
||||
</TouchDiv>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
{conversations.map(c=> (
|
||||
<div onClick={() => setCurrentChat(c)}>
|
||||
<UserChat>
|
||||
@ -194,11 +278,12 @@ function Chats(){
|
||||
<>
|
||||
<div className="messages">
|
||||
{messages.map(m=>(
|
||||
<Message message = {m} own={m.sender === user.data.username}/>
|
||||
<Message message = {m} own={m.sender === user.username}/>
|
||||
))}
|
||||
{/* <Input/> */}
|
||||
<div className="input">
|
||||
<input
|
||||
onKeyDown={handleKeyPress}
|
||||
type="text"
|
||||
placeholder="What do you want to say"
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
import MessageYou from "./MessageYou"
|
||||
import MessageMe from "./MessageMe"
|
||||
// import { useRef } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import '../../styles/Messages.css'
|
||||
import Input from "./Input";
|
||||
|
||||
function Conversation(){
|
||||
|
||||
const [currentChat, setCurrentChat] = useState(null);
|
||||
const [message, setMessage] = useState([]);
|
||||
|
||||
// setCurrentChat(true)
|
||||
return (
|
||||
<div className="messages">
|
||||
{
|
||||
currentChat ? (
|
||||
<>
|
||||
<div>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<Input/>
|
||||
</div></>) : (<span className="noConv">Open a conversation</span>)}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default Conversation
|
||||
@ -1,15 +0,0 @@
|
||||
// import UserProfile from '../../DataBase/DataProfileUser'
|
||||
import DefaultPic from '../../assets/profile.jpg';
|
||||
// import Data from '../../DataBase/DataProfileUser';
|
||||
import '../../styles/Messages.css'
|
||||
|
||||
function Navbar(){
|
||||
return (
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<h4>Dipper Ratman</h4>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import Navbar from "./Navbar";
|
||||
import Chats from "./Chats";
|
||||
|
||||
function Sidebar(){
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<Navbar/>
|
||||
<Chats/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@ -5,6 +5,8 @@ import { UserProfile } from "../../DataBase/DataUserProfile";
|
||||
import {useState} from 'react';
|
||||
import "../../styles/Profile.css"
|
||||
|
||||
import api from '../../script/axiosApi';
|
||||
|
||||
const dropIn = {
|
||||
hidden: {
|
||||
opacity: '0',
|
||||
@ -17,22 +19,35 @@ const dropIn = {
|
||||
},
|
||||
}
|
||||
|
||||
// const changeName = ({handleClose, name}) => {
|
||||
// const changeName = ({handleclose, name}) => {
|
||||
// return (
|
||||
// UserProfile.UserName = name
|
||||
// )
|
||||
// }
|
||||
|
||||
const ModalEdit = ({ handleClose }) => {
|
||||
const ModalEdit = ( handleClose ) => {
|
||||
// let new_name = "";
|
||||
const [username, setUserName] = useState("");
|
||||
const [nickname, setNickname] = useState("");
|
||||
|
||||
const handler = e =>
|
||||
{
|
||||
setUserName (e.target.value);
|
||||
setNickname(e.target.value);
|
||||
const postNickname = async ()=>{
|
||||
try{
|
||||
await api.post("/nickname", {nickname: nickname})
|
||||
// setUser(tmpUser.data);
|
||||
// setIsLoading(false)
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
postNickname();
|
||||
}
|
||||
void(handleClose);
|
||||
// function handleClose(){
|
||||
// //do nothing
|
||||
// }
|
||||
return (
|
||||
// <Backdrop onClick={handleClose}>
|
||||
<motion.div
|
||||
className="modal"
|
||||
variants={dropIn}
|
||||
@ -40,14 +55,13 @@ const ModalEdit = ({ handleClose }) => {
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" type="text" value={username} onChange={handler} handleClose/>
|
||||
<input className="text" type="text" value={nickname} onChange={handler} handleClose/>
|
||||
<div onClick={handleClose}>
|
||||
<div onClick={() => {UserProfile.UserName = username;}}>
|
||||
<div onClick={() => {UserProfile.UserName = nickname;}}>
|
||||
<Link className="button">change</Link>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
// </Backdrop>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
// import styled from 'styled-components';
|
||||
// import '../DataBase/DummyDBWinLoss.js'
|
||||
// import '../DataBase/DataProfileUser.js'
|
||||
import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js';
|
||||
// import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js';
|
||||
import '../../styles/Win_Loss.css'
|
||||
import { UserProfile } from '../../DataBase/DataUserProfile';
|
||||
// import { UserProfile } from '../../DataBase/DataUserProfile';
|
||||
// import color from '../../utils/style/color.js';
|
||||
|
||||
|
||||
@ -44,26 +44,87 @@ import { UserProfile } from '../../DataBase/DataUserProfile';
|
||||
// border-radius: 50%;
|
||||
// `
|
||||
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useParams } from 'react-router-dom';
|
||||
import api from '../../script/axiosApi';
|
||||
|
||||
|
||||
function WinLoss() {
|
||||
|
||||
const [user, setUser] = useState(null);
|
||||
const [history, setHistory] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const { username } = useParams();
|
||||
|
||||
useEffect(()=> {
|
||||
const getUser = async ()=>{
|
||||
try{
|
||||
// const tmpUser = await api.get("/profile")
|
||||
const tmpUser = await api.post("/user", {username: username})
|
||||
const tmpHistory = await api.post("/history", {username: username})
|
||||
setHistory(tmpHistory.data);
|
||||
setUser(tmpUser.data);
|
||||
setIsLoading(false)
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
getUser();
|
||||
}, [])
|
||||
|
||||
// console.log(`user= ${user.children}`)
|
||||
|
||||
return (
|
||||
|
||||
// <div>
|
||||
// {isLoading ? (
|
||||
// <h1>Loading...</h1>
|
||||
// ) : (
|
||||
// <h1>{user.username}</h1>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
|
||||
<div className='tab'>
|
||||
<h1 className='title'>Match history Win/Loss</h1>
|
||||
<div className='scroll'>
|
||||
{DBWinLoss.map((item, index) => {
|
||||
{isLoading ? (
|
||||
<h1>Loading...</h1>
|
||||
// <span>Loading...</span>
|
||||
) : (
|
||||
<div className='scroll'>
|
||||
<h2 className='title'>Match history Win/Loss</h2>
|
||||
{history.map((c, index) => {
|
||||
return (
|
||||
<div key={index} className='elements'>
|
||||
<li key={index}>
|
||||
<h4 className='content'>{item.title}</h4>
|
||||
{/* <h4 className='content'>{c.id}</h4> */}
|
||||
<div className='content2nd'>
|
||||
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score}</h4> <h4 className="opponent">{item.opponent}</h4>
|
||||
<h4 className='me'>{user.username}</h4> <h4 className='score'>{c.myScore} - {c.opScore} </h4> <h4 className="opponent">{c.opponent}</h4>
|
||||
</div>
|
||||
{/* <h4 className='content'>{item.openent}</h4> */}
|
||||
{/* <h4 className='content'>{c.openent}</h4> */}
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
// <div>
|
||||
// <h1>User: {user.name}</h1>
|
||||
// <div>
|
||||
// <h2>Children:</h2>
|
||||
// {history.map((child) => (
|
||||
// <div key={child.id}>
|
||||
// <p>Child ID: {child.id}</p>
|
||||
// <p>Child Name: {child.name}</p>
|
||||
// {/* Render other child properties as needed */}
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -39,9 +39,9 @@ const dropIn = {
|
||||
// })}
|
||||
// )
|
||||
// }
|
||||
const Modal = ({ handleClose }) => {
|
||||
const Modal = ({ handleclose }) => {
|
||||
return (
|
||||
<Backdrop onClick={handleClose}>
|
||||
<Backdrop onClick={handleclose}>
|
||||
<motion.div
|
||||
className="nav-menu"
|
||||
variants={dropIn}
|
||||
|
||||
@ -8,7 +8,7 @@ import {IoSettingsSharp} from 'react-icons/io5'
|
||||
|
||||
export const SidebarData = [
|
||||
{
|
||||
title: 'Dipper Ratman',
|
||||
title: 'Home/Login',
|
||||
path: '/',
|
||||
icon: <AiIcons.AiFillHome />,
|
||||
cName: 'nav-text'
|
||||
|
||||
114
containers/react/src/components/Social/Social.jsx
Normal file
114
containers/react/src/components/Social/Social.jsx
Normal file
@ -0,0 +1,114 @@
|
||||
import DefaultPic from '../../assets/profile.jpg'
|
||||
import api from '../../script/axiosApi';
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
// import React from "react";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const UserChat = styled.div `
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background-color: #3e3c61;
|
||||
}
|
||||
`
|
||||
|
||||
const SideP = styled.p`
|
||||
font-size: 14px;
|
||||
color: lightgray;
|
||||
margin-left: 15px;
|
||||
`
|
||||
const TouchDiv = styled.div`
|
||||
margin-left: 10px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 21px;
|
||||
cursor: pointer;
|
||||
justify-content: space-around;
|
||||
|
||||
&:hover {
|
||||
color: #F4F3EF;
|
||||
}
|
||||
`
|
||||
|
||||
function Social (){
|
||||
|
||||
const [friends, setFriends] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [user, setUser] = useState(null);
|
||||
|
||||
useEffect(()=> {
|
||||
|
||||
const getFriend = async ()=>{
|
||||
try{
|
||||
const tmpFriends = await api.get("/friends")
|
||||
const tmpUser = await api.get("/profile")
|
||||
setUser(tmpUser.data);
|
||||
setFriends(tmpFriends.data);
|
||||
// return tmpUser;
|
||||
console.log(`user= ${tmpUser.data.username}`);
|
||||
setIsLoading(false)
|
||||
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
getFriend();
|
||||
|
||||
}, [])
|
||||
|
||||
const handleButtonClick = (user) => {
|
||||
let path = `http://localhost/profile/${user.username}`;
|
||||
// history(path, { replace: true });
|
||||
// window.location.replace(path);
|
||||
window.history.pushState({}, null, path);
|
||||
window.location.reload(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<span>
|
||||
{isLoading ? (
|
||||
<h4>Loading...</h4>
|
||||
) : (
|
||||
<h4>{user.nickname}</h4>
|
||||
)}
|
||||
</span>
|
||||
<div className="end">
|
||||
<TouchDiv>
|
||||
<MdOutlineGroupAdd/>
|
||||
</TouchDiv>
|
||||
<TouchDiv>
|
||||
<ImBlocked/>
|
||||
</TouchDiv>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{friends.map(c=> (
|
||||
<div onClick={() => handleButtonClick(c)}>
|
||||
<UserChat>
|
||||
<img className="pic-user" src={DefaultPic} alt="User" />
|
||||
<div className="infoSideBar">
|
||||
<span>{c.nickname}</span>
|
||||
<SideP>Desc?</SideP>
|
||||
</div>
|
||||
</UserChat>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Social
|
||||
@ -1,31 +0,0 @@
|
||||
import React from "react";
|
||||
import {Routes, Route} from 'react-router-dom';
|
||||
import Home from "../pages/Home.jsx";
|
||||
import PlayButton from "../pages/PlayButton.js";
|
||||
import Field from "../pages/Field";
|
||||
import Login42 from "../pages/Login42.js";
|
||||
import Messages from "../pages/Messages.jsx";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import {AnimatePresence} from "framer-motion";
|
||||
|
||||
import SuccessToken from '../script/tokenSuccess'
|
||||
|
||||
function App () {
|
||||
const location = useLocation();
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<Routes location={location} key={location.pathname}>
|
||||
|
||||
<Route exact path="/" element={<Home/>}/>
|
||||
<Route exact path="/token" element={<SuccessToken />}/>
|
||||
<Route exact path="/pong/play" element={<Field />}/>
|
||||
<Route path="/game" element={<PlayButton />}/>
|
||||
<Route exact path="/login42" element={<Login42 />}/>
|
||||
|
||||
<Route exact path="/messages" element={<Messages />}/>
|
||||
</Routes>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -1,20 +0,0 @@
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Home from './components/Home';
|
||||
import ChatPage from './components/ChatPage';
|
||||
import socketIO from 'socket.io-client';
|
||||
|
||||
const socket = socketIO.connect('http://localhost:4000');
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home socket={socket} />}></Route>
|
||||
<Route path="/chat" element={<ChatPage socket={socket} />}></Route>
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,12 +0,0 @@
|
||||
import '../styles/old.css';
|
||||
|
||||
function Footer()
|
||||
{
|
||||
return (
|
||||
<footer>
|
||||
<p>@apommier | apommier@student.42.fr</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,23 +0,0 @@
|
||||
import '../styles/App.css';
|
||||
import '../styles/old.css';
|
||||
import logo from '../logo.svg';
|
||||
|
||||
function Header()
|
||||
{
|
||||
return (
|
||||
<div className="header">
|
||||
<a href="http://localhost" className="box menu"> <p className="userTxt">Menu</p> </a>
|
||||
<div className="box headerName">
|
||||
<a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin42&response_type=code"
|
||||
className="center pong">PONG</a>
|
||||
</div>
|
||||
<a href="http://localhost/pong" className="box username">
|
||||
<p className="userTxt">Play</p>
|
||||
{/* <img className="pp center" src="../../public/logo192.png" alt="profile picture"> */}
|
||||
<img src={logo} className="pp center" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
// import { React, useState } from "react";
|
||||
import '../styles/Profile.css'
|
||||
// import '../styles/App.css'
|
||||
import DefaultPicture from "../assets/profile.jpg";
|
||||
@ -10,13 +10,16 @@ import { Link } from "react-router-dom";
|
||||
import ModalEdit from "../components/Profile/EditName";
|
||||
import {AiOutlineHistory} from 'react-icons/ai'
|
||||
// import { Link } from "react-router-dom";
|
||||
import {UserProfile} from "../DataBase/DataUserProfile";
|
||||
// import {UserProfile} from "../DataBase/DataUserProfile";
|
||||
// import axios from "axios";
|
||||
import api from '../script/axiosApi';
|
||||
import { CgEditMarkup } from 'react-icons/cg'
|
||||
import { IoCloseCircleOutline } from "react-icons/io5";
|
||||
|
||||
|
||||
// import * as React from 'react';
|
||||
// import { useState, useEffect, useParams} from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useParams } from 'react-router-dom';
|
||||
// axios.get("http://localhost/api")
|
||||
// .then((response) => {
|
||||
// response = response.json()
|
||||
@ -28,27 +31,40 @@ import { IoCloseCircleOutline } from "react-icons/io5";
|
||||
|
||||
|
||||
function Profile () {
|
||||
const [user, setUser] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const close = () => setModalOpen(false);
|
||||
const open = () => setModalOpen(true);
|
||||
|
||||
const getConv = async ()=>{
|
||||
try{
|
||||
const convs = await api.get("/profile")
|
||||
// const tmpUser = await api.get("/profile")
|
||||
console.log(convs.data);
|
||||
// setUser(tmpUser);
|
||||
// setConversation(convs.data);
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
getConv();
|
||||
const { username } = useParams();
|
||||
|
||||
useEffect(()=> {
|
||||
const getUser = async ()=>{
|
||||
console.log(`username= ${username}`)
|
||||
try{
|
||||
const tmpUser = await api.post("/user", {username: username})
|
||||
setUser(tmpUser.data);
|
||||
console.log(`user= ${tmpUser.data.username}`)
|
||||
setIsLoading(false)
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
getUser();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="profile">
|
||||
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
|
||||
<h1>{UserProfile.UserName}</h1>
|
||||
<span>
|
||||
{isLoading ? (
|
||||
<h1>Loading...</h1>
|
||||
) : (
|
||||
<h1>{user.nickname}</h1>
|
||||
)}
|
||||
</span>
|
||||
<motion.div onClick={() => (modalOpen ? close() : open())}>
|
||||
<Link to="#" className="edit_name">
|
||||
{modalOpen === true ? <IoCloseCircleOutline/> : <CgEditMarkup/>}
|
||||
@ -57,7 +73,7 @@ function Profile () {
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}>
|
||||
{modalOpen && <ModalEdit modalOpen={modalOpen} handleClose={close}/>}
|
||||
{modalOpen && <ModalEdit modalOpen={modalOpen} handleclose={close}/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Sidebar from '../components/Messages/Sidebar'
|
||||
import Chat from "../components/Messages/Chat"
|
||||
// import Sidebar from '../components/Messages/Sidebar'
|
||||
import Chats from "../components/Messages/Chats"
|
||||
import '../styles/Messages.css'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
@ -26,16 +26,13 @@ function Messages(params) {
|
||||
// }, [user])
|
||||
return (
|
||||
<>
|
||||
{/* <div>
|
||||
<h1>Welcome to the messages page</h1>
|
||||
</div> */}
|
||||
<motion.div className="home"
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
exit={{opacity: 0}}>
|
||||
<div className="container">
|
||||
<Sidebar/>
|
||||
<Chat/>
|
||||
{/* <Sidebar/> */}
|
||||
<Chats/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
node_modules/
|
||||
dist/
|
||||
@ -1,20 +0,0 @@
|
||||
# Utilisez l'image de base de Node.js version 14
|
||||
FROM node:latest
|
||||
|
||||
# Définissez le répertoire de travail à /app
|
||||
WORKDIR /app
|
||||
|
||||
# Copiez le fichier package.json et package-lock.json à l'intérieur de l'image
|
||||
COPY /frontend/pong/my-app/package*.json ./
|
||||
|
||||
# Installez les dépendances de l'application
|
||||
RUN npm install
|
||||
|
||||
# Copiez le reste des fichiers de l'application dans l'image
|
||||
COPY /frontend/pong/my-app/ .
|
||||
|
||||
# Exposez le port 3000 pour accéder à l'application dans le navigateur
|
||||
EXPOSE 8080
|
||||
|
||||
# Démarrez l'application avec la commande "npm start"
|
||||
CMD ["npm", "run", "start"]
|
||||
23
frontend/.gitignore
vendored
23
frontend/.gitignore
vendored
@ -1,23 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -1,70 +0,0 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
17695
frontend/package-lock.json
generated
17695
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,45 +0,0 @@
|
||||
{
|
||||
"name": "my-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.3.5",
|
||||
"framer-motion": "^10.12.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.8.0",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"socket.io-client": "^4.6.1",
|
||||
"styled-components": "^5.3.10",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "HOST=0.0.0.0 PORT=8080 react-scripts start",
|
||||
"start:dev": "npm run start --watch",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,25 +0,0 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -1,8 +0,0 @@
|
||||
import DefaultPic from '../assets/profile.jpg';
|
||||
|
||||
export const UserProfile = {
|
||||
Pic: DefaultPic,
|
||||
UserName: 'Dipper Ratman',
|
||||
}
|
||||
|
||||
// export default UserProfile
|
||||
@ -1,37 +0,0 @@
|
||||
export const DBWinLoss = [
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 6',
|
||||
openent: 'kinou'
|
||||
},
|
||||
{
|
||||
title: 'Defeat',
|
||||
score: '9 - 10',
|
||||
openent: 'Flatman'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 0',
|
||||
openent: 'fuck dat'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 9',
|
||||
openent: 'Eren jeager'
|
||||
},
|
||||
{
|
||||
title: 'Defeat',
|
||||
score: '3 - 10',
|
||||
openent: 'justin'
|
||||
},
|
||||
{
|
||||
title: 'Defeat',
|
||||
score: '9 - 10',
|
||||
openent: 'blabla car'
|
||||
},
|
||||
{
|
||||
title: 'Victory',
|
||||
score: '10 - 9',
|
||||
openent: 'jean-marie',
|
||||
},
|
||||
]
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import {Routes, Route} from 'react-router-dom';
|
||||
import Home from "../pages/Home.jsx";
|
||||
import PlayButton from "../pages/PlayButton.js";
|
||||
import Field from "../pages/Field";
|
||||
import Login42 from "../pages/Login42.js";
|
||||
import Messages from "../pages/Messages.jsx";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import {AnimatePresence} from "framer-motion";
|
||||
|
||||
function AnimatedRoute () {
|
||||
const location = useLocation();
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<Routes location={location} key={location.pathname}>
|
||||
<Route exact path="/" element={<Home/>}/>
|
||||
<Route path="/game" element={<PlayButton />}/>
|
||||
<Route exact path="/pong/play" element={<Field />}/>
|
||||
<Route exact path="/login42" element={<Login42 />}/>
|
||||
<Route exact path="/messages" element={<Messages />}/>
|
||||
</Routes>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
||||
export default AnimatedRoute
|
||||
@ -1,52 +0,0 @@
|
||||
import {motion} from "framer-motion"
|
||||
// import Backdrop from "./Sidebar/Backdrop"
|
||||
import {Link} from 'react-router-dom';
|
||||
import { UserProfile } from "../DataBase/DataUserProfile";
|
||||
import {useState} from 'react';
|
||||
import "../styles/Profile.css"
|
||||
|
||||
const dropIn = {
|
||||
hidden: {
|
||||
opacity: '0',
|
||||
},
|
||||
visible: {
|
||||
opacity: "1",
|
||||
},
|
||||
exit: {
|
||||
opacity: "0",
|
||||
},
|
||||
}
|
||||
|
||||
// const changeName = ({handleClose, name}) => {
|
||||
// return (
|
||||
// UserProfile.UserName = name
|
||||
// )
|
||||
// }
|
||||
|
||||
const ModalEdit = ({ handleClose }) => {
|
||||
// let new_name = "";
|
||||
const [username, setUserName] = useState("");
|
||||
const handler = e =>
|
||||
{
|
||||
setUserName (e.target.value);
|
||||
}
|
||||
return (
|
||||
// <Backdrop onClick={handleClose}>
|
||||
<motion.div
|
||||
className="modal"
|
||||
variants={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" type="text" value={username} onChange={handler} handleClose/>
|
||||
<div onClick={() => {UserProfile.UserName = username;}}>
|
||||
<Link className="button">change</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
// </Backdrop>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalEdit
|
||||
@ -1,12 +0,0 @@
|
||||
import React from 'react';
|
||||
// import './Header.scss';
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<p>© 2023 Paris France</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,90 +0,0 @@
|
||||
import React, {useState} from 'react';
|
||||
import {AiOutlineMenuUnfold} from 'react-icons/ai';
|
||||
// import * as AiIcons from 'react-icons/ai';
|
||||
import {Link} from 'react-router-dom';
|
||||
// import { SidebarData } from './Sidebar/SidebarData';
|
||||
import DefaultPicture from '../assets/profile.jpg'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import Modal from './Sidebar/Modal';
|
||||
// import {BiLogOutCircle} from 'react-icons/bi';
|
||||
// import AnimatePresence from
|
||||
import '../styles/Header.css';
|
||||
|
||||
|
||||
|
||||
function Header() {
|
||||
// const [sidebar, setSidebar] = useState(false);
|
||||
// const showSidebar = () => setSidebar(!sidebar);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const close = () => setModalOpen(false);
|
||||
const open = () => setModalOpen(true);
|
||||
|
||||
return (
|
||||
<div className='Header'>
|
||||
{/* <div className='Header'>
|
||||
<Link to="#" className='menu-bars'>
|
||||
<motion.div>
|
||||
|
||||
onClick={() => (modalOpen ? close() : open())}>
|
||||
<AiOutlineMenuUnfold/>
|
||||
</motion.div>
|
||||
</Link>
|
||||
<div className='end'>
|
||||
<Link to="/" className='menu-bars'>
|
||||
<img className='Header-pic' src={DefaultPicture} alt='profile'/>
|
||||
</Link>
|
||||
</div> */}
|
||||
{/* <Link to="#" className='menu-bars'>
|
||||
<AiOutlineMenuUnfold onClick={showSidebar}/>
|
||||
</Link>
|
||||
<div className='end'>
|
||||
<Link to="/" className='menu-bars'>
|
||||
<img className='Header-pic' src={DefaultPicture} alt='profile'/>
|
||||
</Link>
|
||||
</div> */}
|
||||
{/* </div> */}
|
||||
|
||||
{/* <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
|
||||
<ul className='nav-menu-items' onClick={showSidebar}>
|
||||
<li className='Header-toggle'>
|
||||
<Link to="#" className='menu-bars'>
|
||||
<AiIcons.AiOutlineClose />
|
||||
</Link>
|
||||
</li>
|
||||
{SidebarData.map((item, index) => {
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{scale: 1.1}}>
|
||||
<li key={index} className={item.cName}>
|
||||
<Link to={item.path}>
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</nav> */}
|
||||
|
||||
<motion.div
|
||||
onClick={() => (modalOpen ? close() : open())}>
|
||||
<Link to="#" className='menu-bars'>
|
||||
<AiOutlineMenuUnfold/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
<div className='end'>
|
||||
<Link to="/" className='menu-bars'>
|
||||
<img className='Header-pic' src={DefaultPicture} alt='profile'/>
|
||||
</Link>
|
||||
</div>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}>
|
||||
{modalOpen && <Modal modalOpen={modalOpen} handleClose={close}/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -1,62 +0,0 @@
|
||||
import React from "react"
|
||||
import styled from "styled-components"
|
||||
import '../../styles/Messages.css'
|
||||
import DefaultPic from '../../assets/profile.jpg';
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
import Conversation from "./Conversation";
|
||||
import Input from "./Input";
|
||||
|
||||
|
||||
const TouchDiv = styled.div`
|
||||
margin-left: 10px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 21px;
|
||||
cursor: pointer;
|
||||
justify-content: space-around;
|
||||
|
||||
&:hover {
|
||||
color: #F4F3EF;
|
||||
}
|
||||
`
|
||||
|
||||
function Chat(){
|
||||
return (
|
||||
<div className="chat">
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<TouchDiv>Dummy</TouchDiv>
|
||||
<div className="end">
|
||||
<TouchDiv>
|
||||
<MdOutlineGroupAdd/>
|
||||
</TouchDiv>
|
||||
<TouchDiv>
|
||||
<ImBlocked/>
|
||||
</TouchDiv>
|
||||
</div>
|
||||
</div>
|
||||
<Conversation/>
|
||||
<Input/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Chat
|
||||
|
||||
|
||||
// const SideSpan = styled.span`
|
||||
// font-size: 18px;
|
||||
// font-weight: 500;
|
||||
// cursor: pointer;
|
||||
// margin-bottom: 40px;
|
||||
|
||||
// &:hover {
|
||||
// color: #F4F3EF;
|
||||
// }
|
||||
// `
|
||||
|
||||
// const SideP = styled.p`
|
||||
// font-size: 14px;
|
||||
// color: lightgray
|
||||
// `
|
||||
@ -1,63 +0,0 @@
|
||||
import React from "react";
|
||||
import '../../styles/Messages.css'
|
||||
import styled from "styled-components";
|
||||
import DefaultPic from '../../assets/profile.jpg'
|
||||
|
||||
const UserChat = styled.div `
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background-color: #3e3c61;
|
||||
}
|
||||
`
|
||||
|
||||
const SideSpan = styled.span`
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
`
|
||||
|
||||
const SideP = styled.p`
|
||||
font-size: 14px;
|
||||
color: lightgray;
|
||||
margin-left: 15px;
|
||||
`
|
||||
|
||||
function Chats(){
|
||||
return (
|
||||
<div className="chat">
|
||||
<UserChat>
|
||||
<img className="pic-user" src={DefaultPic} alt="User" />
|
||||
<div className="infoSideBar">
|
||||
<SideSpan>Dummy</SideSpan>
|
||||
<SideP>yo</SideP>
|
||||
</div>
|
||||
</UserChat>
|
||||
<UserChat>
|
||||
<img className="pic-user" src={DefaultPic} alt="User" />
|
||||
<div className="infoSideBar">
|
||||
<SideSpan>Dummy</SideSpan>
|
||||
<SideP>yo</SideP>
|
||||
</div>
|
||||
</UserChat><UserChat>
|
||||
<img className="pic-user" src={DefaultPic} alt="User" />
|
||||
<div className="infoSideBar">
|
||||
<SideSpan>Dummy</SideSpan>
|
||||
<SideP>yo</SideP>
|
||||
</div>
|
||||
</UserChat><UserChat>
|
||||
<img className="pic-user" src={DefaultPic} alt="User" />
|
||||
<div className="infoSideBar">
|
||||
<SideSpan>Dummy</SideSpan>
|
||||
<SideP>yo</SideP>
|
||||
</div>
|
||||
</UserChat>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chats
|
||||
@ -1,40 +0,0 @@
|
||||
import MessageYou from "./MessageYou"
|
||||
import MessageMe from "./MessageMe"
|
||||
// import { useRef } from "react";
|
||||
// import { useEffect } from "react";
|
||||
import '../../styles/Messages.css'
|
||||
|
||||
function Conversation(){
|
||||
// const scrollRef = useRef();
|
||||
|
||||
// useEffect(() => {
|
||||
// scrollRef.current?.scrollIntoView({ behavior: "smooth"})
|
||||
// }, [])
|
||||
return (
|
||||
<div className="messages">
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
<MessageMe/>
|
||||
<MessageYou/>
|
||||
<MessageMe/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Conversation
|
||||
@ -1,15 +0,0 @@
|
||||
import { TbSend } from 'react-icons/tb';
|
||||
|
||||
|
||||
function Input(){
|
||||
return (
|
||||
<div className="input">
|
||||
<input type="text" placeholder="What do you want to say"/>
|
||||
<div className="send">
|
||||
<TbSend/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Input
|
||||
@ -1,34 +0,0 @@
|
||||
import React from "react"
|
||||
import styled from "styled-components"
|
||||
import DefaultPic from '../../assets/profile.jpg'
|
||||
import { useRef } from "react";
|
||||
import { useEffect } from "react";
|
||||
import '../../styles/Messages.css'
|
||||
|
||||
const MeStyleP = styled.p`
|
||||
background-color: lightgray;
|
||||
padding 10px 20px;
|
||||
border-radius 10px 0px 10px 10px;
|
||||
color: black;
|
||||
margin-right: 20px;
|
||||
`
|
||||
|
||||
function MessageMe(){
|
||||
const scrollRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
scrollRef.current?.scrollIntoView({ behavior: "smooth"})
|
||||
}, [])
|
||||
return (
|
||||
<div className="meMessage" ref={scrollRef}>
|
||||
<div>
|
||||
<img className="messageInfo" src={DefaultPic} alt="profile" />
|
||||
</div>
|
||||
<div className="messageContent">
|
||||
<MeStyleP>bonjours ca va</MeStyleP>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MessageMe
|
||||
@ -1,34 +0,0 @@
|
||||
import React from "react"
|
||||
import styled from "styled-components"
|
||||
import DefaultPic from '../../assets/profile.jpg'
|
||||
import { useRef } from "react"
|
||||
import { useEffect } from "react"
|
||||
import '../../styles/Messages.css'
|
||||
|
||||
const StyleP = styled.p`
|
||||
background-color: white;
|
||||
padding 10px 20px;
|
||||
border-radius 0px 10px 10px 10px;
|
||||
color: black;
|
||||
margin-left: 20px;
|
||||
`
|
||||
|
||||
function MessageYou(){
|
||||
const scrollRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
scrollRef.current?.scrollIntoView({ behavior: "smooth"})
|
||||
}, [])
|
||||
return (
|
||||
<div className="youMessage" ref={scrollRef}>
|
||||
<div>
|
||||
<img className="messageInfo" src={DefaultPic} alt="profile" />
|
||||
</div>
|
||||
<div className="messageContent">
|
||||
<StyleP>bonjours ca va</StyleP>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MessageYou
|
||||
@ -1,15 +0,0 @@
|
||||
// import UserProfile from '../../DataBase/DataProfileUser'
|
||||
import DefaultPic from '../../assets/profile.jpg';
|
||||
// import Data from '../../DataBase/DataProfileUser';
|
||||
import '../../styles/Messages.css'
|
||||
|
||||
function Navbar(){
|
||||
return (
|
||||
<div className='navbar'>
|
||||
<img src={DefaultPic} alt="profile" className="pic"/>
|
||||
<h4>Dipper Ratman</h4>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import Navbar from "./Navbar";
|
||||
import Chats from "./Chats";
|
||||
|
||||
function Sidebar(){
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<Navbar/>
|
||||
<Chats/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@ -1,16 +0,0 @@
|
||||
import { motion } from "framer-motion"
|
||||
import "../../styles/Header.css"
|
||||
|
||||
const Backdrop = ({ children, onClick }) => {
|
||||
return (
|
||||
<motion.div className="backdrop"
|
||||
onClick={onClick}
|
||||
initial={{ opacity: 0}}
|
||||
animate={{ opacity: 1}}
|
||||
exit={{ opacity: 0}}>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Backdrop
|
||||
@ -1,80 +0,0 @@
|
||||
import {motion} from "framer-motion"
|
||||
import Backdrop from "./Backdrop"
|
||||
import { SidebarData } from "./SidebarData"
|
||||
import {Link} from 'react-router-dom';
|
||||
import * as AiIcons from 'react-icons/ai';
|
||||
|
||||
|
||||
import "../../styles/Header.css"
|
||||
|
||||
const dropIn = {
|
||||
hidden: {
|
||||
x: "-100vh",
|
||||
},
|
||||
visible: {
|
||||
x: "0",
|
||||
},
|
||||
exit: {
|
||||
x: "-100vh",
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// function showBar (){
|
||||
// return (
|
||||
// {SidebarData.map((item, index) => {
|
||||
// return (
|
||||
// <motion.div
|
||||
// className="nav-menu"
|
||||
// // whileHover={{scale: 1.1}}
|
||||
// >
|
||||
// <li key={index} className={item.cName}>
|
||||
// <Link to={item.path}>
|
||||
// {item.icon}
|
||||
// <span>{item.title}</span>
|
||||
// </Link>
|
||||
// </li>
|
||||
// </motion.div>
|
||||
// )
|
||||
// })}
|
||||
// )
|
||||
// }
|
||||
const Modal = ({ handleClose }) => {
|
||||
return (
|
||||
<Backdrop onClick={handleClose}>
|
||||
<motion.div
|
||||
className="nav-menu"
|
||||
variants={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<li className='Header-toggle'>
|
||||
<Link to="#" className='menu-bars'>
|
||||
<AiIcons.AiOutlineClose />
|
||||
</Link>
|
||||
</li>
|
||||
<div
|
||||
className="nav-menu">
|
||||
<ul className='nav-menu-items'>
|
||||
{SidebarData.map((item, index) => {
|
||||
return (
|
||||
<motion.div whileHover={{scale: 1.1}}
|
||||
className>
|
||||
<li key={index} className={item.cName}>
|
||||
<Link to={item.path}>
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
</motion.div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</Backdrop>
|
||||
)
|
||||
}
|
||||
|
||||
export default Modal
|
||||
@ -1,47 +0,0 @@
|
||||
import React from "react";
|
||||
import * as FaIcons from 'react-icons/fa';
|
||||
import * as AiIcons from 'react-icons/ai';
|
||||
import * as IoIcons from 'react-icons/io';
|
||||
import {BiLogOutCircle} from 'react-icons/bi';
|
||||
import {IoSettingsSharp} from 'react-icons/io5'
|
||||
import {UserProfile} from '../../DataBase/DataUserProfile'
|
||||
|
||||
|
||||
export const SidebarData = [
|
||||
{
|
||||
title: UserProfile.UserName,
|
||||
path: '/',
|
||||
icon: <AiIcons.AiFillHome />,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
{
|
||||
title: 'Game',
|
||||
path: '/game',
|
||||
icon: <FaIcons.FaGamepad/>,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
{
|
||||
title: 'Messages',
|
||||
path: '/messages',
|
||||
icon: <FaIcons.FaEnvelopeOpenText/>,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
{
|
||||
title: 'Social',
|
||||
path: '/team',
|
||||
icon: <IoIcons.IoMdPeople />,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
path: '/team',
|
||||
icon: <IoSettingsSharp />,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
{
|
||||
title: 'Log out',
|
||||
path: '/team',
|
||||
icon: <BiLogOutCircle />,
|
||||
cName: 'nav-text'
|
||||
},
|
||||
]
|
||||
@ -1,77 +0,0 @@
|
||||
// import PropTypes from "prop-types"
|
||||
// import styled from 'styled-components';
|
||||
// import '../DataBase/DummyDBWinLoss.js'
|
||||
// import '../DataBase/DataProfileUser.js'
|
||||
import { DBWinLoss } from '../DataBase/DummyDBWinLoss.js';
|
||||
import '../styles/Win_Loss.css'
|
||||
import { UserProfile } from '../DataBase/DataUserProfile';
|
||||
// import color from '../../utils/style/color.js';
|
||||
|
||||
|
||||
|
||||
// const CardWrapper = styled.div`
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 15px;
|
||||
// background-color: black;
|
||||
// border-radius: 30px;
|
||||
// width: 350px;
|
||||
// transition: 200ms;
|
||||
// margin-top: 50px;
|
||||
// &:hover {
|
||||
// cursor: pointer;
|
||||
// box-shadow: 2px 2px 10px #b6b6b6;
|
||||
// }
|
||||
// `
|
||||
|
||||
// const CardLabel1 = styled.h1`
|
||||
// color: #5843e4;
|
||||
// // font-size: 22px;
|
||||
// font-weight: bold;
|
||||
// margin-bottom: 25px;
|
||||
// `
|
||||
// const CardLabel2 = styled.span`
|
||||
// color: #5843e4;
|
||||
// font-size: 22px;
|
||||
// font-weight: bold;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// `
|
||||
|
||||
// const CardImage = styled.img`
|
||||
// heigh: 80px;
|
||||
// width: 80px;
|
||||
// border-radius: 50%;
|
||||
// `
|
||||
|
||||
function WinLoss() {
|
||||
return (
|
||||
|
||||
<div className='tab'>
|
||||
<h1 className='title'>Match history Win/Loss</h1>
|
||||
<div className='scroll'>
|
||||
{DBWinLoss.map((item, index) => {
|
||||
return (
|
||||
<div className='elements'>
|
||||
<li key={index}>
|
||||
<h4 className='content'>{item.title}</h4>
|
||||
<div className='content2nd'>
|
||||
<h4 className='me'>{UserProfile.UserName}</h4> <h4 className='score'>{item.score} {item.openent}</h4>
|
||||
</div>
|
||||
{/* <h4 className='content'>{item.openent}</h4> */}
|
||||
</li>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Card.propTypes = {
|
||||
// label: PropTypes.string,
|
||||
// title: PropTypes.string.isRequired,
|
||||
// picture: PropTypes.string,
|
||||
// }
|
||||
|
||||
export default WinLoss
|
||||
@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
import './styles/index.css';
|
||||
// import App from './components/App';
|
||||
// import Header from './pages/Header';
|
||||
import Header from './components/Header';
|
||||
// import Home from './pages/Home.jsx';
|
||||
// import Login42 from './pages/Login42';
|
||||
// import Head from './pages/Head';
|
||||
// import Field from './pages/Field';
|
||||
// import PlayButton from './pages/PlayButton';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
// import Messages from './pages/Messages';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import AnimatedRoute from './components/App';
|
||||
import './styles/App.css'
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<div className='App'>
|
||||
{/* <Head /> */}
|
||||
<BrowserRouter>
|
||||
<Header />
|
||||
<AnimatedRoute/>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,25 +0,0 @@
|
||||
import logo from '../logo.svg';
|
||||
import '../styles/App.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,20 +0,0 @@
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Home from './components/Home';
|
||||
import ChatPage from './components/ChatPage';
|
||||
import socketIO from 'socket.io-client';
|
||||
|
||||
const socket = socketIO.connect('http://localhost:4000');
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home socket={socket} />}></Route>
|
||||
<Route path="/chat" element={<ChatPage socket={socket} />}></Route>
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,72 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
// import { useState, useRef } from 'react';
|
||||
import { drawCanvas } from './canvas.js';
|
||||
import '../styles/field.css';
|
||||
|
||||
function Field()
|
||||
{
|
||||
useEffect(() => {
|
||||
console.log("launch canva hehe")
|
||||
drawCanvas();
|
||||
}, []);
|
||||
|
||||
// const [buttonClicked, setButtonClicked] = useState(false);
|
||||
|
||||
// const handleButtonClick = () => {
|
||||
// drawCanvas();
|
||||
// setButtonClicked(true);
|
||||
// };
|
||||
|
||||
return (
|
||||
<div className="field" id="canvas_container">
|
||||
<canvas id="myCanvas"></canvas>
|
||||
{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
|
||||
{/* {buttonClicked && <canvas id="myCanvas"></canvas>}
|
||||
{!buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button>} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Field;
|
||||
|
||||
|
||||
// function Field() {
|
||||
// const [buttonClicked, setButtonClicked] = useState(false);
|
||||
|
||||
// const handleButtonClick = () => {
|
||||
// const canvas = document.createElement('canvas');
|
||||
// canvas.id = 'myCanvas';
|
||||
// console.log("button clicked")
|
||||
// document.getElementById('canvas_container').appendChild(canvas);
|
||||
// setButtonClicked(true);
|
||||
// drawCanvas(canvas);
|
||||
// };
|
||||
// setButtonClicked(true);
|
||||
// return (
|
||||
// // <div className="field" id="canvas_container">
|
||||
// <div className={`notClicked ${buttonClicked ? 'clicked' : ''}`} id="canvas_container">
|
||||
// {!buttonClicked && <button className="playButton" onClick={handleButtonClick}>Play</button>}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default Field;
|
||||
|
||||
// function draw() {
|
||||
// // Effacer le canvas
|
||||
// ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// // Dessiner la raquette
|
||||
// ctx.fillRect(canvas.width - paddleWidth, paddleY, paddleWidth, paddleHeight);
|
||||
|
||||
// // Appeler la fonction draw à chaque frame
|
||||
// requestAnimationFrame(draw);
|
||||
// }
|
||||
|
||||
// draw(); // Appeler la fonction draw pour la première fois
|
||||
|
||||
// const canvas = document.getElementById('myCanvas');
|
||||
// canvas.width = 500;
|
||||
// canvas.height = 500;
|
||||
// const ctx = canvas.getContext('2d');
|
||||
// ctx.fillRect(50, 50, 1000, 1000);
|
||||
@ -1,12 +0,0 @@
|
||||
import '../styles/old.css';
|
||||
|
||||
function Footer()
|
||||
{
|
||||
return (
|
||||
<footer>
|
||||
<p>@apommier | apommier@student.42.fr</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,16 +0,0 @@
|
||||
function Head()
|
||||
{
|
||||
return (
|
||||
<div>
|
||||
<meta charSet="utf-8"></meta>
|
||||
<link href="./css/header.css" rel="stylesheet"></link>
|
||||
<title>BEST PONG EVER</title>
|
||||
{/* <script src="./script/login.js"></script> */}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"></link>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true"></link>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap" rel="stylesheet"></link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head;
|
||||
@ -1,23 +0,0 @@
|
||||
import '../styles/App.css';
|
||||
import '../styles/old.css';
|
||||
import logo from '../logo.svg';
|
||||
|
||||
function Header()
|
||||
{
|
||||
return (
|
||||
<div className="header">
|
||||
<a href="http://localhost" className="box menu"> <p className="userTxt">Menu</p> </a>
|
||||
<div className="box headerName">
|
||||
<a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin42&response_type=code"
|
||||
className="center pong">PONG</a>
|
||||
</div>
|
||||
<a href="http://localhost/pong" className="box username">
|
||||
<p className="userTxt">Play</p>
|
||||
{/* <img className="pp center" src="../../public/logo192.png" alt="profile picture"> */}
|
||||
<img src={logo} className="pp center" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,19 +0,0 @@
|
||||
import '../styles/old.css';
|
||||
import { login } from '../script/login.js'
|
||||
|
||||
function Home()
|
||||
{
|
||||
return (
|
||||
<div className ="login">
|
||||
<form id="loginForm" method="post" name="login" action="http://localhost/api/login" className ="loginForm">
|
||||
<p className="loginHere">Login Here</p>
|
||||
<input type="text" name="nickname" placeholder="login"></input>
|
||||
<input type="text" name="password" placeholder="password"></input>
|
||||
<button className="submit" onClick={login}>LOGIN</button>
|
||||
</form>
|
||||
{/* <button></button> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
@ -1,64 +0,0 @@
|
||||
import { React, useState } from "react";
|
||||
import '../styles/Profile.css'
|
||||
// import '../styles/App.css'
|
||||
import DefaultPicture from "../assets/profile.jpg";
|
||||
import WinLoss from "../components/Win_Loss";
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { AiFillEdit } from 'react-icons/ai'
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalEdit from "../components/EditName";
|
||||
import {AiOutlineHistory} from 'react-icons/ai'
|
||||
// import { Link } from "react-router-dom";
|
||||
import {UserProfile} from "../DataBase/DataUserProfile";
|
||||
|
||||
|
||||
|
||||
function Profile () {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const close = () => setModalOpen(false);
|
||||
const open = () => setModalOpen(true);
|
||||
return (
|
||||
<div className="profile">
|
||||
<img className="profile-pic" src={DefaultPicture} alt="Profile pic" />
|
||||
<h1>{UserProfile.UserName}</h1>
|
||||
<motion.div onClick={() => (modalOpen ? close() : open())}>
|
||||
<Link to="#" className="edit_name">
|
||||
<AiFillEdit/>
|
||||
</Link>
|
||||
</motion.div>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
onExitComplete={() => null}>
|
||||
{modalOpen && <ModalEdit modalOpen={modalOpen} handleClose={close}/>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Home () {
|
||||
const [move, setmove ] = useState(false);
|
||||
return (
|
||||
<motion.div className="page"
|
||||
initial={{opacity: 0}}
|
||||
animate={{opacity: 1}}
|
||||
exit={{opacity: 0}}>
|
||||
<div className="home">
|
||||
<motion.div animate={{x: move ? -200: 170}}
|
||||
transition={{type: "tween", duration: 0.5}}>
|
||||
<Profile/>
|
||||
</motion.div>
|
||||
<motion.div animate={{opacity: !move ? 0 : 1}}>
|
||||
<WinLoss/>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.div
|
||||
className="div_history"
|
||||
// className="history"
|
||||
onClick={ () => setmove(!move)}>
|
||||
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
@ -1,43 +0,0 @@
|
||||
// import GoogleLogin from 'react-google-login';
|
||||
import { useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
// import setupLogin from '../script/login42';
|
||||
// import React, { useEffect } from 'react';
|
||||
|
||||
function Login42()
|
||||
{
|
||||
useEffect(() => {
|
||||
console.log("you said yes to connect with 42");
|
||||
const url = new URL(window.location.href);
|
||||
// console.log(`url is= ${url}`);
|
||||
const code = url.searchParams.get('code');
|
||||
console.log(`code is= ${code}`);
|
||||
|
||||
const data = {
|
||||
grant_type: 'authorization_code',
|
||||
client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
|
||||
client_secret: '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',
|
||||
code: code,
|
||||
redirect_uri: 'http://localhost:8080/login42',
|
||||
};
|
||||
|
||||
axios.post('https://api.intra.42.fr/oauth/token', data)
|
||||
.then(response => {
|
||||
// handle success response
|
||||
console.log(response);
|
||||
})
|
||||
.catch(error => {
|
||||
// handle error response
|
||||
console.error(error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>"COUCOU LOGIN$@ jeje" </p>
|
||||
{/* <script src="../script/login42.js"></script> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login42;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user