generated from lucien/actix-react-template
Compare commits
1 commit
main
...
chaos_page
Author | SHA1 | Date | |
---|---|---|---|
c197e460fb |
6 changed files with 16 additions and 38 deletions
|
@ -122,8 +122,6 @@ 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,10 +11,9 @@ 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://www.apple.com/macos/macos-sequoia/" bgcolor="var(--color-white)" text="?"/>
|
<RoundButton url="https://archlinux.org" bgcolor="var(--color-white)" text="?"/>
|
||||||
</div>
|
</div>
|
||||||
</nav>);
|
</nav>);
|
||||||
}
|
}
|
|
@ -1,16 +1,10 @@
|
||||||
//import { useState } from "react";
|
//import { useState } from "react";
|
||||||
|
|
||||||
interface MonInputProps {
|
export default function MonInput({text, new_focus}) {
|
||||||
text: string;
|
|
||||||
new_focus: () => void;
|
|
||||||
police: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function MonInput({text, new_focus, police}: MonInputProps) {
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<input readOnly value={text} onFocus={new_focus} style={{fontFamily: police,width:1000}}></input>
|
<input readOnly value={text} onFocus={new_focus}></input>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -1,15 +1,8 @@
|
||||||
|
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}: MonButtonProps) {
|
|
||||||
|
export default function MonButton({letter,changetext,sizeFrontw,sizeFronth,rdmFront,color}) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
#keys {
|
#keys {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto 1fr;
|
grid-template-columns: auto auto 1fr;
|
||||||
|
|
|
@ -6,17 +6,18 @@ import { useState } from "react";
|
||||||
|
|
||||||
export default function ChaosPage(){
|
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 [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 [sizeFrontw,setSizeFrontw] = useState(16)
|
||||||
const [sizeFronth,setSizeFronth] = useState(20)
|
const [sizeFronth,setSizeFronth] = useState(10)
|
||||||
const [color,setColor] = useState("#ffffff")
|
const [color,setColor] = useState("#ffffff")
|
||||||
|
|
||||||
function randomFront(){setSizeFronth(Math.floor(Math.random() * (1000)));
|
function randomFront(){setSizeFronth(Math.floor(Math.random() * (1000)));
|
||||||
setSizeFrontw(Math.floor(Math.random() * (1000)));
|
setSizeFrontw(Math.floor(Math.random() * (1000)));
|
||||||
setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`)}
|
setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`)}
|
||||||
|
|
||||||
function shuffleArray(arr: string[]) {
|
function shuffleArray(arr) {
|
||||||
for (let i = arr.length - 1; i > 0; i--) {
|
for (let i = arr.length - 1; i > 0; i--) {
|
||||||
const j = Math.floor(Math.random() * (i + 1)); // Choisir un index aléatoire
|
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
|
[arr[i], arr[j]] = [arr[j], arr[i]]; // Échanger les éléments
|
||||||
|
@ -24,30 +25,28 @@ export default function ChaosPage(){
|
||||||
return arr;
|
return arr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const myArray = [1, 2, 3, 4, 5];
|
||||||
|
const shuffledArray = shuffleArray(myArray);
|
||||||
|
|
||||||
// console.log(shuffledArray); // Affiche un tableau mélangé
|
// console.log(shuffledArray); // Affiche un tableau mélangé
|
||||||
|
|
||||||
|
|
||||||
const [entry1,setEntry1] = useState("")
|
const [entry1,setEntry1] = useState("champ1")
|
||||||
function E1(ent:string) {
|
function E1(ent:string) {
|
||||||
setEntry1(entry1+ent);
|
setEntry1(entry1+ent);
|
||||||
}
|
}
|
||||||
const [connarddefocus,setFocus] = useState(()=>E1)
|
const [connarddefocus,setFocus] = useState(()=>E1)
|
||||||
|
|
||||||
const [entry2,setEntry2] = useState("")
|
const [entry2,setEntry2] = useState("champ2")
|
||||||
function E2(ent:string) {
|
function E2(ent:string) {
|
||||||
setEntry2(entry2+ent);
|
setEntry2(entry2+ent);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeFocus(E: (ent:string)=>void) {
|
function changeFocus(E) {
|
||||||
setArray_letter(shuffleArray(array_letter));
|
setArray_letter(shuffleArray(array_letter));
|
||||||
setFocus(()=>E);
|
setFocus(()=>E);
|
||||||
}
|
}
|
||||||
|
|
||||||
const [entry3,setEntry3] = useState("")
|
|
||||||
function E3(ent:string) {
|
|
||||||
setEntry3(entry3+ent);
|
|
||||||
}
|
|
||||||
|
|
||||||
const [tel,setTel] = useState(0)
|
const [tel,setTel] = useState(0)
|
||||||
|
|
||||||
|
@ -55,12 +54,8 @@ export default function ChaosPage(){
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
<h1>Chaos Page</h1>
|
<h1>Chaos Page</h1>
|
||||||
<p>Quel est votre nom ?</p>
|
<MonInput text={entry1} new_focus={()=>changeFocus(E1)}/>
|
||||||
<MonInput text={entry1} new_focus={()=>changeFocus(E1)} police={""}/>
|
<MonInput text={entry2} new_focus={()=>changeFocus(E2)}/>
|
||||||
<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">
|
<div id = "keys">
|
||||||
{array_letter.map((letter) => {return <MonButton
|
{array_letter.map((letter) => {return <MonButton
|
||||||
letter={letter}
|
letter={letter}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue