commit 49fff9c2e825b1e33ebda5cdb257c8287d3ae8d3 Author: jenn Date: Tue Feb 11 19:44:46 2025 +0100 Téléverser les fichiers vers "/" diff --git a/app.css b/app.css new file mode 100644 index 0000000..d141325 --- /dev/null +++ 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; +} diff --git a/app.js b/app.js new file mode 100644 index 0000000..b9efa5d --- /dev/null +++ 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('
') +} + +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) diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc92a5d --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + Make it happen + + + +
+

Make it happen

+
+
+
+
+
+ +
+ + +