Change python into javascript

Angel-Karasu · Apr 15, 2024 · 152d2cb · 152d2cb
1 parent cee2754
commit 152d2cb
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -1,24 +1,18 @@
 # Lire entre les lignes helper
 
 This is a simple project to help for [Lire entre les lignes](https://apps.apple.com/fr/app/lire-entre-les-lignes/id1252269368) game.
-
-## Installation
-
-Clone this repository and install all requirements packages
-```shell
-git clone https://github.com/Angel-Karasu/lire-entre-les-lignes-helper.git;
-cd lire-entre-les-lignes-helper;
-pip install -r requirements.txt;
-```
 
 ## How to use
 
-1. Run the python file : `main.py`
-2. Enter the letters available
-3. Enter the length of each word
+To use this helper, simply go on the [lire entre les lignes helper](https://angel-karasu.github.io/lire-entre-les-lignes-helper/) website and complete the length of each words and the number of letters you have.
+
+See the `helper.js` file or read [how it works](#how-it-works) section if you want to understand how the helper works.
+
+## How it works
 
 ## To do
 
+- [ ] Complete how it works
 - [ ] Optimize the code
 
 ## License

diff --git a/helper.js b/helper.js
@@ -0,0 +1,44 @@
+export {available_letters, generate_possibilities};
+
+const available_letters = (() => {
+    let letters = {'-':0, "'":0};
+    for (let i=0; i<26; i++) letters[String.fromCharCode(97+i)] = 0;
+    return letters
+})();
+available_letters['f'] = 1;
+available_letters['a'] = 1;
+available_letters['u'] = 1;
+available_letters['s'] = 2;
+available_letters['e'] = 2;
+available_letters['n'] = 1;
+available_letters['o'] = 1;
+available_letters['t'] = 1;
+
+async function generate_possibilities(words_length = [], letters = {}) {
+    const check_string = string => [...new Set(string)].every(c => string.split(c).length -1 <= letters[c]);
+
+    const dictionary_by_length = (() => {
+        let dictionary = {};
+        [...new Set(words_length)].forEach(length => dictionary[length] = []);
+        return dictionary
+    })();
+
+    let possibilities = [];
+
+    await fetch('https://raw.githubusercontent.com/hbenbel/French-Dictionary/master/dictionary/dictionary.csv').then(res => res.text()).then(words => {
+        words.normalize("NFD").replaceAll(/[\u0300-\u036f]/g, '').split('\n').forEach(word => {
+            if (words_length.includes(word.length) && check_string(word)) dictionary_by_length[word.length].push(word);
+        });
+
+        possibilities = dictionary_by_length[words_length[0]];
+        for (let length of words_length.slice(1)) {
+            let tmp = [];
+            possibilities.forEach(string => dictionary_by_length[length].forEach(word => {
+                if (check_string(string.replaceAll(' ', '') + word)) tmp.push(string + ' ' + word)
+            }));
+            possibilities = tmp;
+        }
+    });
+
+    return possibilities;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="keywords" content="lire entre les lignes, lire-entre-les-lignes, lire entre les lignes helper, lire-entre-les-lignes-helper, helper"/>
+    <meta name="description" property="og:description" content="Helper for 'Lire entre les lignes' game "/>
+    <link rel="stylesheet" href="https://angel-karasu.github.io/karoace-theme/styles.css">
+    <link rel="stylesheet" href="styles.css">
+    <script type="module" src="index.js"></script>
+    <noscript>JavaScript is required for this website. Please allow JavaScript and refresh the page.</noscript>
+    <title>Lire entre les lignes helper</title>
+  </head>
+  <body>
+    <header><h1>Lire entre les lignes helper</h1></header>
+    <main>
+      <div>
+        <div class="field">
+          <h2>Words length</h2>
+          <div id="words">
+            <div class="word" style="display: none;">
+              <label>Word <span>0</span> : <input type="number" min="0" placeholder="Word 0 length"></label>
+              <button class="remove-button">X</button>
+            </div>
+          </div>
+          <button id="add-word">+</button>
+        </div>
+        <div class="field">
+          <h2>Number of letters</h2>
+          <div id="letters" >
+            <label class="letter"><span></span> : <input type="number" min="0" value="0" placeholder="Number"></label>
+          </div>
+        </div>
+        <button id="show-possibilities-button">Show possibilities</button>
+      </div>
+    </main>
+    <footer>
+      <a href="https://github.com/Angel-Karasu/lire-entre-les-lignes-helper">Github page</a>
+      <a href="https://apps.apple.com/fr/app/lire-entre-les-lignes/id1252269368" target="_blank">Lire entre les lignes</a>
+    </footer>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,64 @@
+import {available_letters, generate_possibilities} from "./helper.js";
+
+let word_html, words_html;
+
+function add_letters() {
+    const letters_html = document.querySelector('#letters');
+    const letter_html = document.querySelector('.letter');
+
+    Object.keys(available_letters).forEach(letter => {
+        let let_html = letter_html.cloneNode(true);
+        let_html.querySelector('span').textContent = letter;
+        let_html.querySelector('input').value = available_letters[letter];
+        letters_html.appendChild(let_html);
+    });
+
+    letter_html.remove();
+}
+
+function update_word_number(n) {
+    let words = document.querySelectorAll('.word');
+
+    Array.from(words).slice(n).forEach((word, i) => {
+        word.querySelector('span').textContent = n+i;
+        let input = word.querySelector('input');
+        input.placeholder = `Word ${n+i} length`;
+    });
+
+    words[1].querySelector('.remove-button').style.visibility = words.length < 3 ? 'hidden':'';
+}
+
+function add_word() {
+    let word = word_html.cloneNode(true);
+    word.querySelector('.remove-button').onclick = () => remove_word(word);
+    words_html.appendChild(word);
+    update_word_number(document.querySelectorAll('.word').length - 1)
+}
+
+function remove_word(word) {
+    const n = Array.from(document.querySelectorAll('.word')).indexOf(word);
+    word.remove();
+    update_word_number(n);
+}
+
+function show_possibilities() {
+    let letters = {};
+    for (let letter of document.querySelectorAll('.letter')) letters[letter.querySelector('span').textContent] = letter.querySelector('input').value;
+    generate_possibilities(
+        Array.from(document.querySelectorAll('.word')).slice(1).map(word => +word.querySelector('input').value),
+        letters
+    ).then(possibility => console.log(possibility));
+    alert('Go in console to see the result');
+}
+
+window.onload = () => {
+    word_html = document.querySelector('.word').cloneNode(true);
+    word_html.style.display = '';
+    words_html = document.querySelector('#words');
+
+    document.querySelector('#add-word').onclick = add_word;
+    document.querySelector('#show-possibilities-button').onclick = show_possibilities;
+
+    add_letters();
+    add_word();
+};
diff --git a/main.py b/main.py
diff --git a/requirements.txt b/requirements.txt
diff --git a/styles.css b/styles.css
@@ -0,0 +1,117 @@
+* {
+  margin: 0; padding: 0;
+  background-color: var(--black);
+  text-align: center;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: var(--white);
+}
+
+header {
+  height: 40px;
+  min-width: 260px;
+  margin: 10px 0;
+  border-bottom: solid 1px var(--black_alt);
+  padding-bottom: 10px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(92vh - 42px);
+}
+
+footer {
+  display: flex;
+  justify-content: space-around;
+  border-top: solid 1px var(--black_alt);
+  padding: 10px;
+}
+
+.field {
+  max-width: 200px;
+  margin: 15px 0;
+  border: solid 2px var(--black_alt);
+  border-radius: 10px;
+  padding: 15px 25px 10px;
+}
+.field > div, .word { position: relative; }
+.word { translate: -10px; }
+
+h2 {
+  margin: -30px 0 10px;
+  background-color: var(--black);
+  color: var(--white_alt);
+}
+
+input{
+  width: 100px;
+  height: 20px;
+  margin-bottom: 5px;
+  border: solid 1px var(--black_alt);
+  border-radius: 5px;
+  text-align: left;
+  color: var(--white_alt);
+  padding: 1px 5px;
+}
+
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input[type=number] {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+}
+
+button {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  border: solid 1px;
+}
+
+.remove-button {
+  position: absolute;
+  margin-left: 5px;
+  border-color: var(--red_alt);
+  color: var(--red_alt);
+}
+.remove-button:hover {
+  background-color: var(--red_alt);
+  color: var(--black);
+}
+
+.letter { margin: 0 5px; }
+
+.letter input {
+  width: 20px;
+  height: 20px;
+}
+
+#letters {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+
+#add-word {
+  margin-top: 5px;
+  border-color: var(--green_alt);
+  color: var(--green_alt);
+}
+#add-word:hover {
+  background-color: var(--green_alt);
+  color: var(--black);
+}
+
+#show-possibilities-button {
+  width: 100%;
+  height: 30px;
+  margin-bottom: 5px;
+  border: solid var(--green) 2px;
+  font-size: 15px;
+  font-weight: bold;
+  color: var(--green);
+}
+#show-possibilities-button:hover {
+  background-color: var(--green);
+  color: var(--black);
+}