generated from lucien/actix-react-template
Compare commits
7 commits
chaos_page
...
main
Author | SHA1 | Date | |
---|---|---|---|
1d207b56a6 | |||
6228e839d7 | |||
![]() |
75c29c719a | ||
![]() |
2b71492587 | ||
![]() |
0508ddaa7f | ||
![]() |
b2cb9ca5c8 | ||
![]() |
1e95438b2c |
6 changed files with 38 additions and 16 deletions
|
@ -122,6 +122,8 @@ async fn main() -> Result<(), std::io::Error> {
|
|||
.service(api)
|
||||
.service(get_article)
|
||||
.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))?
|
||||
.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="/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="/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 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>
|
||||
</nav>);
|
||||
}
|
|
@ -1,10 +1,16 @@
|
|||
//import { useState } from "react";
|
||||
|
||||
export default function MonInput({text, new_focus}) {
|
||||
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}></input>
|
||||
<input readOnly value={text} onFocus={new_focus} style={{fontFamily: police,width:1000}}></input>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -1,8 +1,15 @@
|
|||
import { useState } from "react";
|
||||
|
||||
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}) {
|
||||
export default function MonButton({letter,changetext,sizeFrontw,sizeFronth,rdmFront,color}: MonButtonProps) {
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
#keys {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
|
|
|
@ -6,18 +6,17 @@ import { useState } from "react";
|
|||
|
||||
export default function ChaosPage(){
|
||||
|
||||
const array_input = [1,2,3,4];
|
||||
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(10)
|
||||
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) {
|
||||
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
|
||||
|
@ -25,28 +24,30 @@ export default function ChaosPage(){
|
|||
return arr;
|
||||
}
|
||||
|
||||
const myArray = [1, 2, 3, 4, 5];
|
||||
const shuffledArray = shuffleArray(myArray);
|
||||
|
||||
// console.log(shuffledArray); // Affiche un tableau mélangé
|
||||
|
||||
|
||||
const [entry1,setEntry1] = useState("champ1")
|
||||
const [entry1,setEntry1] = useState("")
|
||||
function E1(ent:string) {
|
||||
setEntry1(entry1+ent);
|
||||
}
|
||||
const [connarddefocus,setFocus] = useState(()=>E1)
|
||||
|
||||
const [entry2,setEntry2] = useState("champ2")
|
||||
const [entry2,setEntry2] = useState("")
|
||||
function E2(ent:string) {
|
||||
setEntry2(entry2+ent);
|
||||
}
|
||||
|
||||
function changeFocus(E) {
|
||||
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)
|
||||
|
||||
|
@ -54,8 +55,12 @@ export default function ChaosPage(){
|
|||
return(
|
||||
<div>
|
||||
<h1>Chaos Page</h1>
|
||||
<MonInput text={entry1} new_focus={()=>changeFocus(E1)}/>
|
||||
<MonInput text={entry2} new_focus={()=>changeFocus(E2)}/>
|
||||
<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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue