generated from lucien/actix-react-template
Compare commits
13 commits
chaos_page
...
main
Author | SHA1 | Date | |
---|---|---|---|
1d207b56a6 | |||
6228e839d7 | |||
![]() |
75c29c719a | ||
![]() |
2b71492587 | ||
![]() |
0508ddaa7f | ||
![]() |
b2cb9ca5c8 | ||
![]() |
1e95438b2c | ||
![]() |
6405c6db09 | ||
![]() |
0e31e90af9 | ||
![]() |
6e77233ac0 | ||
![]() |
53853dcce5 | ||
![]() |
ea2bb7ac3c | ||
![]() |
e1bcb4b022 |
7 changed files with 147 additions and 1 deletions
|
@ -122,6 +122,8 @@ async fn main() -> Result<(), std::io::Error> {
|
||||||
.service(api)
|
.service(api)
|
||||||
.service(get_article)
|
.service(get_article)
|
||||||
.service(Files::new("/", "public").index_file("index.html"))
|
.service(Files::new("/", "public").index_file("index.html"))
|
||||||
|
.service(Files::new("/game", "public").index_file("index.html"))
|
||||||
|
.service(Files::new("/chaos", "public").index_file("index.html"))
|
||||||
})
|
})
|
||||||
.bind(("0.0.0.0", 2486))?
|
.bind(("0.0.0.0", 2486))?
|
||||||
.run()
|
.run()
|
||||||
|
|
|
@ -11,9 +11,10 @@ export default function NavBar(){
|
||||||
<Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
|
<Link to="/" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Home</Link>
|
||||||
<Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
|
<Link to="/game" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Game</Link>
|
||||||
<Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
|
<Link to="/articles" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Articles</Link>
|
||||||
|
<Link to="/chaos" style={{ textDecoration: "none", color: "white", fontSize: "1.5em", margin: "0.5em", fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif'}}>Le Chaos</Link>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}>
|
<div style={{ display : "flex", alignItems: "center", flexDirection: "row"}}>
|
||||||
<RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
|
<RoundButton url="https://www.apple.com/macos/macos-sequoia/" bgcolor="var(--color-white)" text="?"/>
|
||||||
</div>
|
</div>
|
||||||
</nav>);
|
</nav>);
|
||||||
}
|
}
|
16
front/src/components/chaos/MonInput.tsx
Normal file
16
front/src/components/chaos/MonInput.tsx
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
//import { useState } from "react";
|
||||||
|
|
||||||
|
interface MonInputProps {
|
||||||
|
text: string;
|
||||||
|
new_focus: () => void;
|
||||||
|
police: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MonInput({text, new_focus, police}: MonInputProps) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<input readOnly value={text} onFocus={new_focus} style={{fontFamily: police,width:1000}}></input>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
26
front/src/components/chaos/monButton.tsx
Normal file
26
front/src/components/chaos/monButton.tsx
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
interface MonButtonProps {
|
||||||
|
letter: string;
|
||||||
|
changetext: (arg0: string) => void;
|
||||||
|
sizeFrontw: number;
|
||||||
|
sizeFronth: number;
|
||||||
|
rdmFront: () => void;
|
||||||
|
color: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function MonButton({letter,changetext,sizeFrontw,sizeFronth,rdmFront,color}: MonButtonProps) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function clicked() {rdmFront();
|
||||||
|
changetext(letter)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button className="key" onClick={clicked} style={{width:sizeFrontw,height:sizeFronth,background:color}}>{letter}</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
12
front/src/components/chaos/style.css
Normal file
12
front/src/components/chaos/style.css
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
#keys {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto 1fr;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
font-size: 10px;
|
||||||
|
border: solid black;
|
||||||
|
}
|
|
@ -2,6 +2,8 @@ import { BrowserRouter, Route, Routes } from "react-router";
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import MainPage from "./pages/MainPage.tsx";
|
import MainPage from "./pages/MainPage.tsx";
|
||||||
import GamePage from "./pages/GamePage.tsx";
|
import GamePage from "./pages/GamePage.tsx";
|
||||||
|
import ChaosPage from "./pages/ChaosPage.tsx";
|
||||||
|
|
||||||
import ArticlePage from "./pages/ArticlePage.tsx";
|
import ArticlePage from "./pages/ArticlePage.tsx";
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
|
@ -12,6 +14,7 @@ createRoot(document.getElementById('root')!).render(
|
||||||
<Route path="/" element={<MainPage />} />
|
<Route path="/" element={<MainPage />} />
|
||||||
// Game page
|
// Game page
|
||||||
<Route path="/game" element={<GamePage />} />
|
<Route path="/game" element={<GamePage />} />
|
||||||
|
<Route path="/chaos" element={<ChaosPage />} />
|
||||||
// Article page (dynamic route)
|
// Article page (dynamic route)
|
||||||
<Route path="/article/:id" element={<ArticlePage />} />
|
<Route path="/article/:id" element={<ArticlePage />} />
|
||||||
// Not found
|
// Not found
|
||||||
|
|
86
front/src/pages/ChaosPage.tsx
Normal file
86
front/src/pages/ChaosPage.tsx
Normal file
|
@ -0,0 +1,86 @@
|
||||||
|
import MonButton from "../components/chaos/monButton";
|
||||||
|
import MonInput from "../components/chaos/MonInput";
|
||||||
|
import "../components/chaos/style.css"
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
export default function ChaosPage(){
|
||||||
|
|
||||||
|
const [array_letter,setArray_letter]=useState(["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ","!"]);
|
||||||
|
|
||||||
|
const [sizeFrontw,setSizeFrontw] = useState(16)
|
||||||
|
const [sizeFronth,setSizeFronth] = useState(20)
|
||||||
|
const [color,setColor] = useState("#ffffff")
|
||||||
|
|
||||||
|
function randomFront(){setSizeFronth(Math.floor(Math.random() * (1000)));
|
||||||
|
setSizeFrontw(Math.floor(Math.random() * (1000)));
|
||||||
|
setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`)}
|
||||||
|
|
||||||
|
function shuffleArray(arr: string[]) {
|
||||||
|
for (let i = arr.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1)); // Choisir un index aléatoire
|
||||||
|
[arr[i], arr[j]] = [arr[j], arr[i]]; // Échanger les éléments
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(shuffledArray); // Affiche un tableau mélangé
|
||||||
|
|
||||||
|
|
||||||
|
const [entry1,setEntry1] = useState("")
|
||||||
|
function E1(ent:string) {
|
||||||
|
setEntry1(entry1+ent);
|
||||||
|
}
|
||||||
|
const [connarddefocus,setFocus] = useState(()=>E1)
|
||||||
|
|
||||||
|
const [entry2,setEntry2] = useState("")
|
||||||
|
function E2(ent:string) {
|
||||||
|
setEntry2(entry2+ent);
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeFocus(E: (ent:string)=>void) {
|
||||||
|
setArray_letter(shuffleArray(array_letter));
|
||||||
|
setFocus(()=>E);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [entry3,setEntry3] = useState("")
|
||||||
|
function E3(ent:string) {
|
||||||
|
setEntry3(entry3+ent);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [tel,setTel] = useState(0)
|
||||||
|
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<h1>Chaos Page</h1>
|
||||||
|
<p>Quel est votre nom ?</p>
|
||||||
|
<MonInput text={entry1} new_focus={()=>changeFocus(E1)} police={""}/>
|
||||||
|
<p>Quel adjectif désigne le mieux Xi Junpin ?</p>
|
||||||
|
<MonInput text={entry2} new_focus={()=>changeFocus(E2)} police={""}/>
|
||||||
|
<p>Combien font 1+1 ?</p>
|
||||||
|
<MonInput text={entry3} new_focus={()=>changeFocus(E3)} police={"Wingdings"}/>
|
||||||
|
<div id = "keys">
|
||||||
|
{array_letter.map((letter) => {return <MonButton
|
||||||
|
letter={letter}
|
||||||
|
changetext={connarddefocus}
|
||||||
|
sizeFrontw={sizeFrontw}
|
||||||
|
sizeFronth={sizeFronth}
|
||||||
|
rdmFront={randomFront}
|
||||||
|
color={color}/> })}
|
||||||
|
</div>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Formulaire super mega bien</legend>
|
||||||
|
<input type="text" placeholder="nom"/>
|
||||||
|
<input type="text" placeholder="prenom"/>
|
||||||
|
<input type="text" placeholder="email"/>
|
||||||
|
<input type="text" placeholder="mdp"/>
|
||||||
|
<input type="text" placeholder="mdp2"/>
|
||||||
|
<label htmlFor="phone">phone : {tel}</label>
|
||||||
|
<input type="range" min="0" max="9999999999" step="1" name="phone" id="phone" value={tel} onChange={(e)=>setTel(parseInt(e.target.value))}/>
|
||||||
|
<input type="submit" value="envoyer"/>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue