Téléverser les fichiers vers "/"

2025-02-11 19:44:46 +01:00 · 2025-02-11 19:44:46 +01:00 · 49fff9c2e8
commit 49fff9c2e8
3 changed files with 147 additions and 0 deletions
--- a/app.css
+++ b/app.css
@ -0,0 +1,57 @@
+/* styles.css */
+body {
+    background-color: #f6f6ff;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    padding: 50px 20px;
+}
+
+h1 {
+    color: #7f4de0;
+    font-size: 40px;
+    margin-bottom: 20px;
+}
+
+.columns {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+}
+
+.column {
+    width: 150px;
+    height: 80px; /* Taille de la colonne, affichant 3 cases visibles */
+    background-color: #fff;
+    border: 3px solid #7f4de0;
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #7f4de0;
+    line-height: 80px;
+}
+
+button {
+    margin-top: 30px;
+    background-color: #e3cb20;
+    color: #fff;
+    font-size: 20px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #c0a019;
+}
--- a/app.js
+++ b/app.js
@ -0,0 +1,69 @@
+const places = [
+    "forest",
+    "castle",
+    "farm",
+    "test",
+]
+const characters = [
+    "knight",
+    "wizard",
+    "detective",
+    "test",
+]
+const objects = [
+    "wand",
+    "sword",
+    "book",
+    "test",
+]
+const columnplaces = document.querySelector('#places')
+const columncharacters = document.querySelector('#characters')
+const columnobjects = document.querySelector('#objects')
+const buttonstartgame = document.querySelector('#startgame')
+
+function GenerateNewList(list) {
+    const items = []
+    for (let i = 0; i < 1000; i++) {
+        items.push(list[Math.floor(Math.random() * list.length)])
+    }
+    return items
+}
+
+function UpdateColumn(column, list) {
+    const items = GenerateNewList(list)
+    column.innerHTML = items.join('<br>')
+}
+
+function DoScroll(column, top, divider, currentTop) {
+    const newTop = currentTop + (top/divider)
+
+    column.scrollTo({
+        top: newTop,
+        behavior: 'smooth'
+    })
+
+    if (newTop < top) {
+        window.setTimeout(function () {
+            DoScroll(column, top, divider, newTop)
+        }, 200)        
+    }
+}
+
+function StartGame() {
+    columnplaces.scrollTo(0, 0)
+    columncharacters.scrollTo(0, 0)
+    columnobjects.scrollTo(0, 0)
+
+    window.setTimeout(function () {
+        UpdateColumn(columnplaces, places)
+        UpdateColumn(columncharacters, characters)
+        UpdateColumn(columnobjects, objects)
+
+        DoScroll(columnplaces, 10040, 15, 0)
+        DoScroll(columncharacters, 10040, 20, 0)
+        DoScroll(columnobjects, 10040, 25, 0)
+
+    }, 10)
+}
+
+buttonstartgame.addEventListener('click', StartGame)
--- a/index.html
+++ b/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Make it happen</title>
+    <link rel="stylesheet" href="app.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Make it happen</h1>
+        <div class="columns">
+            <div class="column" id="places"></div>
+            <div class="column" id="characters"></div>
+            <div class="column" id="objects"></div>
+        </div>
+        <button id="startgame">Generate</button>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>