[add] initial commit

.gitignore

@@ -0,0 +1,62 @@
+# --------------------
+# OSX Files
+# --------------------
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+# --------------------
+# Windows Files
+# --------------------
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+*.lnk
+
+# --------------------
+# Sublime Text Files
+# --------------------
+*.sublime-project
+*.sublime-workspace
+
+# --------------------
+# IntelliJ Files
+# --------------------
+*.iml
+*.ipr
+*.iws
+.idea/
+out/
+
+# --------------------
+# Eclipse Files
+# --------------------
+.project
+.metadata
+*.bak
+.classpath
+.settings/
+
+# --------------------
+# App Files
+# --------------------
+node_modules
+npm-debug.log
+.nyc_output
+coverage
+generated
+/dist
+
+# these files are generated anyway
+.nycrc
+!.gitmodules
+!.travis.yml

package.json

@@ -0,0 +1 @@
+{"dependencies":{"@riotjs/hot-reload":"^6.0.0","@riotjs/lazy":"^2.0.1","@riotjs/route":"^8.0.0","riot":"^6.0.2"},"name":"wordle_finder","version":"1.0.0","description":"Find available Words with current Input","main":"index.js","devDependencies":{"@riotjs/compiler":"^6.0.1","@riotjs/register":"^5.0.0","@riotjs/webpack-loader":"^6.0.0","chai":"^4.3.4","css-loader":"^6.2.0","esm":"^3.2.25","html-webpack-plugin":"^5.3.2","jsdom":"^16.6.0","jsdom-global":"^3.0.2","mini-css-extract-plugin":"^2.1.0","mocha":"^9.2.2","nyc":"^15.1.0","webpack":"^5.47.1","webpack-cli":"^4.7.2","webpack-dev-server":"^3.11.2"},"scripts":{"test":"nyc --require esm --require jsdom-global/register --require @riotjs/register mocha src/**/*.spec.js","cov":"nyc report --reporter=text-lcov","cov-html":"nyc report --reporter=html","build":"webpack --mode production","prepublishOnly":"npm test","start":"webpack serve --mode development --hot --port 3000"},"author":"pdevq","license":"MIT"}

src/components/global/finder/finder.riot

@@ -0,0 +1,173 @@
+<finder>
+    <div class="row">
+        <div class="column column-60">
+            <input id="word" type="text" value={ state.input }>
+        </div>
+        <div class="column column-20">
+            <button onclick={ check }>check</button>
+            <button onclick={ save }>save</button>
+            <button onclick={ load }>load</button>
+        </div>
+    </div>
+    <div class="row">
+        <div class="column">
+            <wordle letters={ state.letters } />
+        </div>
+    </div>
+    <div class="row">
+        <div class="column">
+            <word each={ word in state.words } if={ word.word }
+                  btn_onclick={ () => toggle_active(word) } word={ word.word } btn_class={ word.active ? 'active' : 'inactive' }/>
+        </div>
+    </div>
+    <script>
+        import User from '../../includes/user/user.riot'
+        import { SOLUTIONS, WORDS } from '../../../data/wordle_words'
+        import Word from '../../includes/word/word.riot'
+        import Char from '../../includes/word/char.riot'
+        import Wordle from '../../includes/word/wordle.riot'
+
+        const WORDLE = WORDS.concat(SOLUTIONS).sort(function (a, b) {
+            return a.localeCompare(b);
+        });
+
+        class Letter {
+            constructor(char, position = null, invalid_positions = null) {
+                this.char = char;
+                this.position = position ? parseInt(position) - 1 : null;
+                this.invalid_positions = null;
+                if(invalid_positions) {
+                    this.invalid_positions = [];
+                    for(const inv_pos of invalid_positions) {
+                        this.invalid_positions.push(parseInt(inv_pos) - 1);
+                    }
+                }
+            }
+
+            is_valid(position = null) {
+                if(position === null) return this.position !== null;
+                return this.position !== null && this.position === position;
+            }
+
+            is_present(position = null) {
+                if(position === null) return this.invalid_positions !== null;
+                return this.invalid_positions !== null && this.invalid_positions.includes(position);
+            }
+
+            is_invalid() {
+                return this.position === null && this.invalid_positions === null;
+            }
+
+            valid_word(word, debug = false) {
+                if(debug) {
+                    console.log('--- valid_word ---');
+                    console.log('word', word);
+                    console.log('this.char', this.char);
+                    console.log('this.position', this.position);
+                    console.log('this.invalid_positions', this.invalid_positions);
+                }
+
+                // valid letter and position
+                if(this.position !== null) {
+                    return word.charAt(this.position) === this.char;
+                // valid letter no position
+                } else if(this.invalid_positions !== null) {
+                    // check if letter is included
+                    if(!word.includes(this.char)) return false;
+                    // check it is not on invalid positions
+                    for(const inv_pos of this.invalid_positions) {
+                        if(inv_pos < 5 && word.charAt(inv_pos) === this.char) return false;
+                    }
+                    return true;
+                // invalid letter
+                } else {
+                    return !word.includes(this.char);
+                }
+            }
+        }
+
+        function parse_input(input) {
+            let letters = [];
+            let input_array = input.split(' ');
+            for(let arg of input_array) {
+                // valid letter and position
+                if(arg.charAt(1) === '@') {
+                    letters.push(new Letter(arg.charAt(0), arg.charAt(2)));
+                // valid letter no position
+                } else if(arg.charAt(1) === '?') {
+                    letters.push(new Letter(arg.charAt(0), null, arg.substring(2)));
+                // invalid letter
+                } else if(arg.charAt(0) === '!') {
+                    for(const letter of arg.substring(1)) {
+                        letters.push(new Letter(letter));
+                    }
+                }
+            }
+            return letters;
+        }
+
+        export default {
+            components: {
+                User,
+                Word,
+                Char,
+                Wordle
+            },
+            state: {
+                input: '',
+                memory: '',
+                letters: [],
+                words: []
+            },
+            set_state(key, value) {
+                const obj = {};
+                obj[key] = value;
+                this.update(obj);
+            },
+
+            check_letters(word) {
+                let valid = false;
+                for(const letter of this.state.letters) {
+                    valid = letter.valid_word(word);
+                    if(!valid) return false;
+                }
+                return true;
+            },
+
+            save() {
+                const input = document.getElementById('word').value;
+                this.set_state('memory', input);
+            },
+
+            load() {
+                const input = document.getElementById('word');
+                input.value = this.state.memory;
+            },
+
+            check() {
+                const input = document.getElementById('word').value;
+                this.set_state('input', input);
+                this.set_state('letters', parse_input(input));
+                const valid_words = [];
+                //console.log('check', this.check_letters('shall', true));
+                //console.log('contains', SOLUTIONS.includes('shall'))
+                for(const word of WORDLE) {
+                    if(this.check_letters(word)) valid_words.push({ word: word, active: true });
+                }
+                console.log(WORDS.length, SOLUTIONS.length);
+                this.set_state('words', valid_words);
+                //console.log('valid words', valid_words);
+            },
+
+            toggle_active(word) {
+                word.active = !word.active;
+                this.update();
+            },
+            toggleUser() {
+                this.update({
+                    showUser: !this.state.showUser
+                })
+            }
+        }
+    </script>
+</finder>

src/components/includes/word/char.riot

@@ -0,0 +1,5 @@
+<Char>
+    <div class="char { props.type || 'invalid' }">
+        { props.letter || '' }
+    </div>
+</Char>

src/components/includes/word/word.riot

@@ -0,0 +1,5 @@
+<word>
+    <div onclick={ props.btn_onclick } class="word { props.btn_class }">
+        { props.word }
+    </div>
+</word>

src/components/includes/word/wordle.riot

@@ -0,0 +1,56 @@
+<wordle>
+
+    <div class="row" style="width: 500px">
+        <div class="column column-10">
+            <char each={ letter in props.letters } if={ letter.is_valid(0) } letter={ letter.char } type="valid"/>
+        </div>
+        <div class="column column-10">
+            <char each={ letter in props.letters } if={ letter.is_valid(1) } letter={ letter.char } type="valid"/>
+        </div>
+        <div class="column column-10">
+            <char each={ letter in props.letters } if={ letter.is_valid(2) } letter={ letter.char } type="valid"/>
+        </div>
+        <div class="column column-10">
+            <char each={ letter in props.letters } if={ letter.is_valid(3) } letter={ letter.char } type="valid"/>
+        </div>
+        <div class="column column-10">
+            <char each={ letter in props.letters } if={ letter.is_valid(4) } letter={ letter.char } type="valid"/>
+        </div>
+    </div>
+
+    <div each={ letter in props.letters } if={ letter.is_present() } class="row" style="width: 500px">
+        <div class="column column-10">
+            <char if={ letter.is_present(0) } letter={ letter.char } type="present"/>
+        </div>
+        <div class="column column-10">
+            <char if={ letter.is_present(1) } letter={ letter.char } type="present"/>
+        </div>
+        <div class="column column-10">
+            <char if={ letter.is_present(2) } letter={ letter.char } type="present"/>
+        </div>
+        <div class="column column-10">
+            <char if={ letter.is_present(3) } letter={ letter.char } type="present"/>
+        </div>
+        <div class="column column-10">
+            <char if={ letter.is_present(4) } letter={ letter.char } type="present"/>
+        </div>
+    </div>
+
+    <div class="row" style="width: 500px">
+        <div class="column">
+            <div each={ letter in props.letters } if={ letter.is_invalid() } style="float: left;">
+                <char letter={ letter.char } type="invalid"/>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        import Char from './char.riot'
+        export default {
+            components: {
+                Char
+            }
+        }
+    </script>
+</wordle>
+

src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Riot App</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
+</head>
+<body>
+  <div class="">
+    <div class="row">
+      <main class="column">
+        <div is="finder" data-riot-component>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

src/index.js

@@ -0,0 +1,10 @@
+import './style.css'
+import '@riotjs/hot-reload'
+import { mount } from 'riot'
+import registerGlobalComponents from './register-global-components'
+
+// register
+registerGlobalComponents()
+
+// mount all the global components found in this page
+mount('[data-riot-component]')

src/register-global-components.js

@@ -0,0 +1,19 @@
+import { register } from 'riot'
+
+const basename = (path, extension = '') => path.split('/').reverse()[0].replace(extension, '')
+const globalComponentsContext = require.context('./components/global/', true, /[a-zA-Z0-9-]+\.riot/)
+
+export default () => {
+  globalComponentsContext.keys().map(path => {
+    const name = basename(path, '.riot')
+
+    const component = globalComponentsContext(path)
+
+    register(name, component.default || component)
+
+    return {
+      name,
+      component
+    }
+  })
+}

src/style.css

@@ -0,0 +1,45 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.char {
+  width: 40px;
+  height: 40px;
+  /*border: 1px solid black;*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: capitalize;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 5px;
+}
+
+.char.valid {
+  background-color: #538d4e;
+}
+.char.invalid {
+  background-color: #3a3a3c;
+}
+.char.present {
+  background-color: #b59f3b;
+}
+
+.word {
+  cursor: pointer;
+  margin: 2px;
+  float: left;
+  width: 60px;
+  text-align: center;
+  font-weight: bold;
+}
+.active {
+  background-color: #54d1ff;
+}
+.inactive {
+  background-color: #cccccc;
+  color: #a1a1a1;
+}
+

webpack.config.js

@@ -0,0 +1,74 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack')
+const path = require('path')
+
+module.exports = {
+  entry: {
+    app: './src/index.js',
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].bundle.js',
+    clean: true
+  },
+  devtool: 'source-map',
+  optimization: {
+    runtimeChunk: {
+      name: 'runtime',
+    },
+    splitChunks: {
+      chunks: 'async',
+      minSize: 20000,
+      minRemainingSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 30,
+      maxInitialRequests: 30,
+      enforceSizeThreshold: 50000,
+      cacheGroups: {
+        defaultVendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          reuseExistingChunk: true,
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+  devServer: {
+    hot: true,
+    open: true,
+    historyApiFallback: {
+      index: 'index.html'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.riot$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: '@riotjs/webpack-loader',
+          options: {
+            hot: true
+          }
+        }]
+      },
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'src/index.html'
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ]
+}