app-02 js release

kuznya · Nov 2, 2020 · 2a12aaf · 2a12aaf
1 parent 25d06a5
commit 2a12aaf
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 12 deletions.
diff --git a/app-js-02.html b/app-js-02.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+<title>nouns for puzzles</title>
+<link rel="stylesheet" href="js/app-02.css">
+<script src="data/temporary_disabled.js"></script>
+<script src="data/words.js"></script>
+</head>
+<script src="js/app-js-02.js"></script>
+</html>
diff --git a/index.html b/index.html
@@ -5,17 +5,6 @@
 <link rel="stylesheet" href="js/app-02.css">
 <script src="data/temporary_disabled.js"></script>
 <script src="data/words.js"></script>
-<script src="https://unpkg.com/vue@3.0.1/dist/vue.global.prod.js"></script>
 </head>
-
-<div id="app">
-    <div id="header">
-        <div v-for="cat in cats" :key="cat" class="category">
-            <check-box :title="cat" @change="catChange();"></check-box>
-        </div>
-        <div><button id="btn" onclick="commandGen();">Gen</button></div>
-    </div>
-    <textarea id="log" readonly></textarea>
-</div>
-<script src="js/app-vue-02.js"></script>
+<script src="js/app-js-02.js"></script>
 </html>
diff --git a/js/app-js-02.js b/js/app-js-02.js
@@ -0,0 +1,72 @@
+  const write = (s) => { document.write(s); };
+  const elem = (id) => document.getElementById(id)
+
+  let wordsList = [];
+
+  const cats = ['easy', 'common', 'uncommon']
+
+  const renderCheckbox = (cat) => {
+    write('<div class="category">' +
+      `<div onclick="checkBoxClickHandle(this)" id="id_${cat}" class="active">${cat}</div>` +
+      '</div>\n'
+    );
+  }
+
+  const checkBoxClickHandle = (ctx) => {
+    ctx.classList.toggle('active')
+    optionsChanged()
+  };
+
+  const renderHeader = () => {
+    write('<div id="header">\n');
+    for (const v of cats) {
+      renderCheckbox(v);
+    }
+    write('<div><button id="btn" onclick="commandGen();">Gen</button></div>\n');
+    write('</div>\n');
+  };
+
+  const renderApp = () => {
+    write('<div id="app">\n');
+    renderHeader();
+    write('<textarea id="log" readonly></textarea>');
+    write('</div>\n');
+  };
+
+  renderApp();
+
+  const log = elem('log');
+  const print = (s) => {
+    log.value = s + '\n' + log.value
+  };
+
+  const getCats = () => {
+    return cats.filter( v => elem('id_'+v).classList.contains('active'))
+  };
+
+  const filterWords = (cats) => {
+    wordsList = words.filter(v => cats.includes(v.cat)
+      && !temporary_disabled.includes(v.word));
+  };
+
+  const optionsChanged = () => {
+    const cats = getCats();
+    filterWords(cats);
+    print(wordsList.length + ' words loaded: ' + cats)
+  };
+
+  const commandGen = () => {
+    const limit = wordsList.length;
+    if (!limit) { return; }
+    const index = Math.floor(Math.random() * limit);
+    const item = wordsList[index];
+    print(`${item.word} (${item.cat})`);
+  };
+
+  // go!
+  // const cats1 = getCats()
+  // console.log(cats1)
+
+  print(`words base from: ${version_date}`);
+  print(`${temporary_disabled.length} words temporary disabled`);
+  optionsChanged();