From 4d50b00952b3c4a9e89b44af8a78bfaca0bde37f Mon Sep 17 00:00:00 2001
From: Pascal <pascal@pdev.dev>
Date: Sun, 24 Apr 2022 14:07:55 -0500
Subject: [PATCH] [mod][add] changed to pure-css and added fontawesome

---
 package.json                             | 40 ++++++++++-
 src/components/global/finder/finder.riot | 92 +++++++++++++-----------
 src/components/includes/word/wordle.riot | 36 +++++-----
 src/index.html                           | 20 +++---
 src/style.css                            | 30 +++++++-
 5 files changed, 142 insertions(+), 76 deletions(-)

diff --git a/package.json b/package.json
index bd89205..71cc22f 100644
--- a/package.json
+++ b/package.json
@@ -1 +1,39 @@
-{"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"}
\ No newline at end of file
+{
+  "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 --host 0.0.0.0 --port 3000"
+  },
+  "author": "pdevq",
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/src/components/global/finder/finder.riot b/src/components/global/finder/finder.riot
index e6868a4..b989f26 100644
--- a/src/components/global/finder/finder.riot
+++ b/src/components/global/finder/finder.riot
@@ -1,28 +1,35 @@
 <finder>
-    <div class="row">
-        <div class="column column-60">
-            <input id="word" type="text" value={ state.input }>
+    <div class="pure-g">
+        <div class="pure-u-1-3">
+            <button onclick={ check } class="pure-button"><i class="fa-solid fa-magnifying-glass"></i> find</button>
         </div>
-        <div class="column column-20">
-            <button onclick={ check }>check</button>
-            <button onclick={ save }>save</button>
-            <button onclick={ load }>load</button>
+        <div class="pure-u-1-3">
+            <button onclick={ save } class="pure-button"><i class="fa-solid fa-floppy-disk"></i> save</button>
         </div>
-    </div>
-    <div class="row">
-        <div class="column">
-            <wordle letters={ state.letters } />
+        <div class="pure-u-1-3">
+            <button onclick={ load } class="pure-button"><i class="fa-solid fa-file-arrow-up"></i> load</button>
         </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 class="pure-u-1-1 margin-0-5">
+            <form class="pure-form form-input" onsubmit={ submit_handler }>
+                <input id="word" type="text" value={ state.input } class="pure-input-1">
+            </form>
+        </div>
+
+        <div class="pure-u-1-1">
+            <wordle letters={ state.letters }/>
+        </div>
+        <div class="pure-u-1-1">
+            <div class="pure-g word-container">
+                <div each={ word in state.words } if={ word.word } class="pure-u-1-6">
+                    <word btn_onclick={ () => toggle_active(word) } word={ word.word }
+                          btn_class={ word.active ? 'active' : 'inactive' }/>
+                </div>
+            </div>
         </div>
     </div>
     <script>
         import User from '../../includes/user/user.riot'
-        import { SOLUTIONS, WORDS } from '../../../data/wordle_words'
+        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'
@@ -36,21 +43,21 @@
                 this.char = char;
                 this.position = position ? parseInt(position) - 1 : null;
                 this.invalid_positions = null;
-                if(invalid_positions) {
+                if (invalid_positions) {
                     this.invalid_positions = [];
-                    for(const inv_pos of 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;
+                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;
+                if (position === null) return this.invalid_positions !== null;
                 return this.invalid_positions !== null && this.invalid_positions.includes(position);
             }
 
@@ -59,7 +66,7 @@
             }
 
             valid_word(word, debug = false) {
-                if(debug) {
+                if (debug) {
                     console.log('--- valid_word ---');
                     console.log('word', word);
                     console.log('this.char', this.char);
@@ -68,18 +75,18 @@
                 }
 
                 // valid letter and position
-                if(this.position !== null) {
+                if (this.position !== null) {
                     return word.charAt(this.position) === this.char;
-                // valid letter no position
-                } else if(this.invalid_positions !== null) {
+                    // valid letter no position
+                } else if (this.invalid_positions !== null) {
                     // check if letter is included
-                    if(!word.includes(this.char)) return false;
+                    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;
+                    for (const inv_pos of this.invalid_positions) {
+                        if (inv_pos < 5 && word.charAt(inv_pos) === this.char) return false;
                     }
                     return true;
-                // invalid letter
+                    // invalid letter
                 } else {
                     return !word.includes(this.char);
                 }
@@ -89,16 +96,16 @@
         function parse_input(input) {
             let letters = [];
             let input_array = input.split(' ');
-            for(let arg of input_array) {
+            for (let arg of input_array) {
                 // valid letter and position
-                if(arg.charAt(1) === '@') {
+                if (arg.charAt(1) === '@') {
                     letters.push(new Letter(arg.charAt(0), arg.charAt(2)));
-                // valid letter no position
-                } else if(arg.charAt(1) === '?') {
+                    // 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)) {
+                    // invalid letter
+                } else if (arg.charAt(0) === '!') {
+                    for (const letter of arg.substring(1)) {
                         letters.push(new Letter(letter));
                     }
                 }
@@ -127,9 +134,9 @@
 
             check_letters(word) {
                 let valid = false;
-                for(const letter of this.state.letters) {
+                for (const letter of this.state.letters) {
                     valid = letter.valid_word(word);
-                    if(!valid) return false;
+                    if (!valid) return false;
                 }
                 return true;
             },
@@ -143,7 +150,10 @@
                 const input = document.getElementById('word');
                 input.value = this.state.memory;
             },
-
+            submit_handler(e) {
+                e.preventDefault();
+                this.check();
+            },
             check() {
                 const input = document.getElementById('word').value;
                 this.set_state('input', input);
@@ -151,8 +161,8 @@
                 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 });
+                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);
diff --git a/src/components/includes/word/wordle.riot b/src/components/includes/word/wordle.riot
index 639b965..bd37497 100644
--- a/src/components/includes/word/wordle.riot
+++ b/src/components/includes/word/wordle.riot
@@ -1,51 +1,47 @@
 <wordle>
 
-    <div class="row" style="width: 500px">
-        <div class="column column-10">
+    <div class="pure-g char-container">
+        <div class="pure-u-1-5">
             <char each={ letter in props.letters } if={ letter.is_valid(0) } letter={ letter.char } type="valid"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char each={ letter in props.letters } if={ letter.is_valid(1) } letter={ letter.char } type="valid"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char each={ letter in props.letters } if={ letter.is_valid(2) } letter={ letter.char } type="valid"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char each={ letter in props.letters } if={ letter.is_valid(3) } letter={ letter.char } type="valid"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <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">
+    <div each={ letter in props.letters } if={ letter.is_present() } class="pure-g char-container">
+        <div class="pure-u-1-5">
             <char if={ letter.is_present(0) } letter={ letter.char } type="present"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char if={ letter.is_present(1) } letter={ letter.char } type="present"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char if={ letter.is_present(2) } letter={ letter.char } type="present"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <char if={ letter.is_present(3) } letter={ letter.char } type="present"/>
         </div>
-        <div class="column column-10">
+        <div class="pure-u-1-5">
             <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 class="pure-g char-container">
+        <div class="pure-u-1-5" each={ letter in props.letters } if={ letter.is_invalid() }>
+            <char letter={ letter.char } type="invalid"/>
         </div>
     </div>
-
     <script>
         import Char from './char.riot'
+
         export default {
             components: {
                 Char
diff --git a/src/index.html b/src/index.html
index 85ee400..2f2bae4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>My Riot App</title>
+  <title>Wordle Finder</title>
+  <script src="https://kit.fontawesome.com/851a77e50b.js" crossorigin="anonymous"></script>
   <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">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
+  <meta name="viewport" content="width=640px,user-scalable=0" />
 </head>
 <body>
-  <div class="">
-    <div class="row">
-      <main class="column">
-        <div is="finder" data-riot-component>
-        </div>
-      </main>
-    </div>
-  </div>
+  <main class="pure-g container">
+    <div class="pure-u-1-24"></div>
+    <div class="pure-u-22-24 finder" is="finder" data-riot-component></div>
+    <div class="pure-u-1-24"></div>
+  </main>
 </body>
 </html>
diff --git a/src/style.css b/src/style.css
index d716a94..54f2bee 100644
--- a/src/style.css
+++ b/src/style.css
@@ -29,9 +29,9 @@
 
 .word {
   cursor: pointer;
-  margin: 2px;
-  float: left;
-  width: 60px;
+  padding: 10px;
+  margin: 5px;
+  font-size: 1.1em;
   text-align: center;
   font-weight: bold;
 }
@@ -42,4 +42,28 @@
   background-color: #cccccc;
   color: #a1a1a1;
 }
+.char-container {
+  margin: 0 auto;
+  width: 250px;
+}
+.word-container {
+  margin: 0 auto;
+  width: 600px;
+}
 
+.finder {
+  text-align: center;
+  margin-top: 50px;
+  max-width: 640px;
+}
+
+.form-input {
+  font-size: 1.25em;
+}
+
+.margin-0-5 {
+  margin: 0.5em;
+}
+.margin-0-25 {
+  margin: 0.25em;
+}