Add init versionmain

author: Joris Guyonvarch 2026-01-01 13:35:18 +0100
committer: Joris Guyonvarch 2026-01-01 13:38:44 +0100
commit: ec13d0861875320b3d8d7ddd350463f5cbab9dd9 (patch)
tree: 69687628ef3cd9b08d150f62cfdc92abd8eb3d28
parent: b91c1efad83c626197fd81a48f984734f30f1b52 (diff)
5 files changed, 230 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..522f451
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# Word
+
+Play with words.
+
+## Run
+
+```sh
+python -m http.server -d public
+```
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..f16af88
--- /dev/null
+++ b/public/icon.png
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..02c5626
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="fr">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Word</title>
+<link rel="stylesheet" href="/main.css">
+<link rel="icon" href="/icon.png">
+
+<body>
+    <div class="g-CardsPage">
+        <div class="g-Score">Score : 0</div>
+        <div class="g-Cards">
+            <button>1</button>
+            <button>2</button>
+            <button>3</button>
+            <button>4</button>
+            <button>5</button>
+        </div>
+    </div>
+
+    <div class="g-WordPage">
+        <div class="g-Word"></div>
+        <div class="g-Buttons">
+            <button class="g-Good">✔</button>
+            <button class="g-Bad">✘</button>
+        </div>
+    </div>
+</body>
+
+<script src="/main.js"></script>
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..2bf6052
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,125 @@
+:root {
+    /* Tol Vibrant */
+    /* https://cran.r-project.org/web//packages//khroma/vignettes/tol.html */
+    --color-orange: #e73;
+    --color-blue: #07b;
+    --color-light-blue: #3be;
+    --color-pink: #e37;
+    --color-red: #c31;
+    --color-green: #098;
+    --color-gray: #bbb;
+    --color-light-gray: #eee;
+}
+
+html {
+    height: 100%;
+    font-family: sans-serif;
+}
+
+body {
+    height: 100%;
+    margin: 0;
+}
+
+/* Pages */
+
+.g-CardsPage, .g-WordPage {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Cards */
+
+.g-Score {
+    position: absolute;
+    top: 3vw;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    color: black;
+    font-size: 4vw;
+    font-weight: bold;
+}
+
+.g-Cards {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5vw;
+    width: 100%;
+    height: 100%;
+}
+
+.g-Cards > button {
+    color: var(--color-blue);
+    background-color: white;
+    border: 1vw solid var(--color-blue);
+    cursor: pointer;
+    border-radius: 1vw;
+    padding: 6vw 4vw;
+    font-size: 5vw;
+    font-weight: bold;
+}
+
+.g-Cards > button:hover {
+    background-color: var(--color-light-gray);
+}
+
+/* Word */
+
+.g-WordPage {
+    display: none;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+@keyframes appear {
+    from {opacity: 0}
+    to {opacity: 1}
+}
+
+.g-Word {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10vw;
+    font-weight: bold;
+    color: var(--color-blue);
+    opacity: 0;
+    animation: appear 2s ease-in 2s 1 normal forwards;
+}
+
+.g-Buttons {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    gap: 10vw;
+}
+
+.g-Buttons > button {
+    padding: 1vw 3vw;
+    cursor: pointer;
+    font-size: 8vw;
+    border-width: 1vw;
+    border-style: solid;
+    border-radius: 1vw;
+    background-color: white;
+}
+
+.g-Buttons > button:hover {
+    background-color: var(--color-light-gray);
+}
+
+.g-Good {
+    color: var(--color-green);
+    border-color: var(--color-green);
+}
+
+.g-Bad {
+    color: var(--color-red);
+    border-color: var(--color-red);
+}
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..5023943
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,66 @@
+// Words
+
+const words = {}
+
+words[0] = new Set([ 'BRANCHE', 'VOILE', 'VIKING', 'BUT', 'VIS', 'SÉRIE', 'VENGEANCE', 'MAFIA', 'GÉNIE', 'COCKTAIL', 'RAT', 'RAMADAN', 'RENARD', 'MONTAGNE', 'SOMBRERO', 'VEUVE NOIRE', 'CIMETIÈRE', 'TRÉSOR', 'MYTHE', 'GRUE', 'LUMIÈRE', 'CHEVALIER', 'SIROP', 'PIRATE', 'BUFFY', 'BOULANGER', 'POISON', 'MARTEAU', 'HOLLYWOOD', 'TABLEAU', 'CHAUSSON', 'GROTTE', 'SILEX', 'DINOSAURE', 'TONNERRE', 'MAMAN', 'JEUX OLYMPIQUES', 'TAPIS', 'BARBIE', 'PENSÉE', 'SOUPE', 'SERVIETTE', 'COCCINELLE', 'MUSIQUE', 'GOOGLE', 'PAPIERS', 'MIMIE MATHY', 'FOUR', 'PAPILLON', 'BARBECUE', 'CAVITÉ', 'SUCRE', 'CHAT', 'REGGAE', 'QUARTIER', 'PRISON', 'NOMBRE', 'ROI', 'TOILE', 'DARWIN', 'MIRAGE', 'GUILLOTINE', 'CÉSAR', 'COQUILLE', 'COUTEAU', 'EXPLOSION', 'CROCODILE', 'DE GAULLE', 'TATOUAGE', 'CŒUR', 'MELON', 'POIVRE', 'POLAIRE', 'FRANCE', 'FICELLE', 'MARIONNETTE', 'CERVEAU', 'SEUL', 'TOKYO', 'TRADITION', 'GÂTEAU', 'CHENILLE', 'PLASTIQUE', 'TERMINATOR', 'NINTENDO', 'MAISON', 'DISCOTHÈQUE', 'RADIO', 'SALADE', 'NAIN', 'TRAIN', 'ROCK', 'GRENADE', 'ALCATRAZ', 'GODZILLA', 'BATEAU', 'HALLOWEEN', 'ÉCHEC', 'MIROIR', 'ÉCHELLE', 'MOUSTACHE', 'AVATAR', 'FER', 'POMPE', 'BOUCHE', 'DOPAGE', 'GLACE', 'CANNE', 'CROISSANT', 'ASTÉRIX' ])
+
+words[1] = new Set([ 'CENDRILLON', 'CHEDDAR', 'ALARME', 'PAIN', 'RÂTEAU', 'NID', 'CHEF', 'LARGE', 'DRACULA', 'MARIO', 'PINCE', 'ÉLASTIQUE', 'POLICE', 'CACAHUÈTE', 'TRÈFLE', 'DOCTEUR', 'CUPIDE', 'PILOTE', 'FACEBOOK', 'OPÉRATION', 'CANAPÉ', 'PAIX', 'FORÊT', 'VACANCES', 'VOLCAN', 'PARFUM', 'ÉTOILE', 'ALLEMAGNE', 'MOUSTIQUE', 'POMPIER', 'FEUILLE', 'FORD', 'ROBOT', 'JAUNE', 'JARDIN', 'BATTERIE', 'ESCALADE', 'PONEY', 'CHOCOLAT', 'FRANKENSTEIN', 'CANADA', 'VÉNUS', 'MOUTARDE', 'GORGE', 'ARC', 'PLAYSTATION', 'NINJA', 'PRISE', 'POUDRE', 'PANDA', 'MANCHE', 'THÉATRE', 'PALACE', 'FUMIER', 'ROCHET', 'TROU', 'DÉCATHLON', 'TUTU', 'VAMPIRE', 'TOMATE', 'RAMSES', 'MAGICIEN', 'NOUILLE', 'SHAKESPEARE', 'OREILLER', 'PINGOUIN', 'BIJOUX', 'CIGARETTE', 'SPIELBERG', 'MOSCOU', 'ANCRE', 'TRIANGLE', 'SOURIS', 'LUNE', 'AUSTRALIE', 'JEU', 'MASQUE', 'PATATE', 'TALON', 'SERPENT', 'ÉTALON', 'HUMOUR', 'BALEINE', 'LETTRE', 'PARI', 'PARRAIN', 'NOËL', 'POIRE', 'ÉTUDES', 'CIRQUE', 'CREVETTE', 'MÛR', 'FARCE', 'FUMÉE', 'UNIFORME', 'BOWLING', 'CIRCUIT', 'HISTOIRE', 'BAL', 'ANGE', 'BULLE', 'MOULIN', 'BATMAN', 'ALADDIN', 'CARROUSEL', 'AÏL', 'FLÛTE', 'MOUSQUETAIRE', 'FANTÔME', 'FOURRURE' ])
+
+words[2] = new Set([ 'CRÊPE', 'SHREK', 'DANSE', 'DÉMON', 'ORDINATEUR', 'ÉPICE', 'URGENCE', 'MISSILE', 'LION', 'LIÈGE', 'AMAZON', 'POÊLE', 'SIMPSON', 'AMPOULE', 'BOUTON', 'FRAISE', 'PARAPLUIE', 'MICKEY', 'GLAND', 'RAP', 'MOZART', 'FLEUR', 'BALANCE', 'ELF', 'PASSION', 'FLAMME', 'LOUP', 'PAËLLA', 'LANCE', 'VERRE', 'PANTHÈRE', 'CASINO', 'COMÉDIE', 'CHAMPIGNON', 'PEINTURE', 'FÈTE FORRAINE', 'AVOCAT', 'COURONNE', 'NEIGE', 'ÉTAGÈRE', 'ZOO', 'PIEUVRE', 'SHERLOCK', 'AMÉRIQUE', 'MARS', 'BLOND', 'COUETTE', 'PÂQUES', 'PORCELAINE', 'RÊVE', 'OGRE', 'PELLE', 'ÉLECTION', 'LAC', 'TIGRE', 'PUNK', 'RHUM', 'GROUPE', 'MONOPOLY', 'PARACHUTE', 'FEU D’ARTIFICE', 'HOCKEY', 'CHAPEAU', 'GÉANT', 'BACH', 'CELLULE', 'MÉTRO', 'BRACELET', 'POMME', 'PISCINE', 'ISRAEL', 'POUPÉE', 'COLLIER', 'CAFÉTÉRIA', 'CHÂTEAU', 'VEGAS', 'CONCERT', 'VAGUE', 'POULET', 'COUPE', 'MEXIQUE', 'COIN', 'CARTON', 'CABARET', 'SEL', 'GUERRE', 'MODE', 'GLADIATEUR', 'GOTHIQUE', 'CÉLINE DION', 'CHAMBRE', 'TEMPLE', 'BROSSE', 'NOISETTE', 'PLUIE', 'CHURCHILL', 'BÉBÉ', 'BIÈRE', 'BAIN', 'FOU', 'CHAINE', 'JUNGLE', 'CHANSON', 'TUBE', 'PSYCHOPATHE', 'CUBE', 'CHAMPAGNE', 'FIL', 'PAILLE', 'TORNADE' ])
+
+words[3] = new Set([ 'ÎLE', 'POLE', 'HULK', 'PRIMAIRE', 'STARBUCKS', 'ÉLÉPHANT', 'CROIX', 'MICROSOFT', 'CHAUSSETTE', 'VIOLON', 'TABAC', 'FLASH', 'ÉCLAIR', 'JEDI', 'FROMAGE', 'NUCLÉAIRE', 'BOND', 'ÉGOUT', 'OS', 'MUSE', 'ANNEAU', 'SUISSE', 'ZEUS', 'AIMANT', 'COQ', 'ZOMBIE', 'MITTÉRAND', 'EMPEREUR', 'PORTE-MONNAIE', 'WRAP', 'RÉVOLUTION', 'BONBON', 'LANGAGE', 'PIGEON', 'CABANE', 'KARATÉ', 'TOLKIEN', 'NOUVEAU', 'CRAVATE', 'ACCENT', 'PIPE', 'CYCLE', 'BOUTEILLE', 'CAFÉ', 'GOLF', 'IRIS', 'CHASSEUR', 'TUYAU', 'MARCHÉ', 'MARRIAGE', 'POKER', 'DUNE', 'MIEL', 'SINGE', 'AIGUILLE', 'SOIR', 'MÉTAL', 'ALCOOL', 'DESSIN ANIMÉ', 'CANON', 'CARREFOUR', 'BANANE', 'DENTISTE', 'ÉCUME', 'ÉPÉE', 'GANDHI', 'LUNETTES', 'MÉTÉO', 'SIRÈNE', 'LICORNE', 'CACTUS', 'ITALIE', 'FERME', 'POIGNÉE', 'GARDE', 'COFFRE-FORT', 'TROIE', 'ÉCOLE', 'HÉLICOPTER', 'PICASSO', 'BLANC', 'ANTARTIQUE', 'GALET', 'PARADIS', 'MANUEL', 'CORDE', 'STATION', 'SOLEIL', 'TITANIC', 'TONDEUSE', 'CLÉOPATRE', 'SABLE', 'COCHON', 'DIAMAND', 'FEU', 'RAM', 'CANTINE', 'DISCO', 'PUIT', 'CHEUVEUX', 'FORT', 'RELIGIEUX', 'NILE', 'CEINTURE', 'HERBE', 'ROCKY', 'SAFARI', 'TULIPE', 'ONGLE', 'PYRAMIDE' ])
+
+words[4] = new Set([ 'TAXI', 'WESTERN', 'DÉSERT', 'TARZAN', 'BALLE', 'CARNAVAL', 'VALSE', 'SKI', 'VENDREDI', 'PÊCHE', 'RÈGLE', 'TUNNEL', 'JOURNAL', 'PIMENT', 'CHEWBACCA', 'LOTTERIE', 'RACINE', 'GALAXIE', 'PONT', 'DÉFENSE', 'PIZZA', 'CALENDRIER', 'CAFARD', 'FOURCHETTE', 'ÉLECTRICITÉ', 'JOKER', 'ANNIVERSAIRE', 'PAPE', 'FIN', 'GRÈCE', 'SAHARA', 'FONTAINE', 'COIFFEUR', 'PIKACHU', 'TRÊVE', 'PERROQUET', 'RIVIÈRE', 'TARANTINO', 'VENT', 'DOUCHE', 'LIVRE', 'OPÉRA', 'VIRUS', 'FIÈVRE', 'TICKET', 'MEMBRE', 'LÉGUME', 'RAILLES', 'COCON', 'NOMBRIL', 'TARTE', 'ENCEINTE', 'RAMBO', 'PHARE', 'SAVON', 'CARTE', 'THON', 'LAVE', 'HÔTEL', 'JUMELLES', 'PRINCESSE', 'JIMI HENDRIX', 'BLÉ', 'CAVE', 'VOL', 'OASIS', 'PIQÛRE', 'TOUR', 'BOXE', 'ORANGE', 'TENNIS', 'SCÈNE', 'BELGIQUE', 'OUTIL', 'MOUTON', 'AVION', 'REQUIN', 'LÉGO', 'COLONEL', 'MONTRE', 'CHAUVE', 'SAUCISSE', 'EVEREST', 'ŒUF', 'GEL', 'VIN', 'LAMPE', 'CÉRÉALE', 'MACHINE', 'PIERRE', 'FENÊTRE', 'FRITES', 'HUMAIN', 'ROSE', 'CASQUE', 'ESPION', 'PAIRE', 'PRÉSIDENT', 'FÉE', 'MATRIX', 'COOKIE', 'PÉTARD', 'CINÉMA', 'BAR', 'AUTOMNE', 'LAIT', 'ALIEN', 'IKEA', 'POTTER', 'BAGUE' ])
+
+// Elements
+
+const cardsPageElem = document.querySelector('.g-CardsPage')
+const scoreElem = document.querySelector('.g-Score')
+const cardElems = Array.from(document.querySelector('.g-Cards').children)
+
+const wordPageElem = document.querySelector('.g-WordPage')
+const wordElem = document.querySelector('.g-Word')
+const goodButton = document.querySelector('.g-Good')
+const badButton = document.querySelector('.g-Bad')
+
+let score = 0
+let selectedCardIndex
+
+function pickWord(index) {
+    const items = Array.from(words[index])
+    const word = items[Math.floor(Math.random() * items.length)]
+    words[index].delete(word)
+    return word
+}
+
+function showWord(word) {
+    cardsPageElem.style.display = 'none'
+    wordPageElem.style.display = 'flex'
+    wordElem.innerText = word
+}
+
+function showCards() {
+    cardsPageElem.style.display = 'flex'
+    wordPageElem.style.display = 'none'
+}
+
+cardElems.forEach((card, index) => {
+    card.addEventListener('click', () => {
+        const word = pickWord(index)
+        if (words[index].size == 0) {
+            cardElems[index].remove()
+        }
+        selectedCardIndex = index
+        showWord(word)
+    })
+})
+
+goodButton.addEventListener('click', () => {
+    score += selectedCardIndex + 1
+    scoreElem.innerText = `Score : ${score}`
+    showCards()
+})
+
+badButton.addEventListener('click', () => {
+    showCards()
+})
author	Joris Guyonvarch	2026-01-01 13:35:18 +0100
committer	Joris Guyonvarch	2026-01-01 13:38:44 +0100
commit	ec13d0861875320b3d8d7ddd350463f5cbab9dd9 (patch)
tree	69687628ef3cd9b08d150f62cfdc92abd8eb3d28
parent	b91c1efad83c626197fd81a48f984734f30f1b52 (diff)