pascal/wofi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[mod][add] changed to pure-css and added fontawesome

Browse Source
This commit is contained in:
Pascal
2022-04-24 14:07:55 -05:00
parent 14a61335cf
commit 4d50b00952
5 changed files with 142 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
package.json
View File

@@ -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"} {
"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"
}

84
src/components/global/finder/finder.riot
View File

@@ -1,28 +1,35 @@
<finder> <finder>
<div class="row"> <div class="pure-g">
<div class="column column-60"> <div class="pure-u-1-3">
<input id="word" type="text" value={ state.input }> <button onclick={ check } class="pure-button"><i class="fa-solid fa-magnifying-glass"></i> find</button>
</div> </div>
<div class="column column-20"> <div class="pure-u-1-3">
<button onclick={ check }>check</button> <button onclick={ save } class="pure-button"><i class="fa-solid fa-floppy-disk"></i> save</button>
<button onclick={ save }>save</button> </div>
<button onclick={ load }>load</button> <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 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>
<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>
</div> </div>
<script> <script>
import User from '../../includes/user/user.riot' 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 Word from '../../includes/word/word.riot'
import Char from '../../includes/word/char.riot' import Char from '../../includes/word/char.riot'
import Wordle from '../../includes/word/wordle.riot' import Wordle from '../../includes/word/wordle.riot'
@@ -36,21 +43,21 @@
this.char = char; this.char = char;
this.position = position ? parseInt(position) - 1 : null; this.position = position ? parseInt(position) - 1 : null;
this.invalid_positions = null; this.invalid_positions = null;
if(invalid_positions) { if (invalid_positions) {
this.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); this.invalid_positions.push(parseInt(inv_pos) - 1);
} }
} }
} }
is_valid(position = null) { 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; return this.position !== null && this.position === position;
} }
is_present(position = null) { 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); return this.invalid_positions !== null && this.invalid_positions.includes(position);
} }
@@ -59,7 +66,7 @@
} }
valid_word(word, debug = false) { valid_word(word, debug = false) {
if(debug) { if (debug) {
console.log('--- valid_word ---'); console.log('--- valid_word ---');
console.log('word', word); console.log('word', word);
console.log('this.char', this.char); console.log('this.char', this.char);
@@ -68,15 +75,15 @@
} }
// valid letter and position // valid letter and position
if(this.position !== null) { if (this.position !== null) {
return word.charAt(this.position) === this.char; return word.charAt(this.position) === this.char;
// valid letter no position // valid letter no position
} else if(this.invalid_positions !== null) { } else if (this.invalid_positions !== null) {
// check if letter is included // 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 // check it is not on invalid positions
for(const inv_pos of this.invalid_positions) { for (const inv_pos of this.invalid_positions) {
if(inv_pos < 5 && word.charAt(inv_pos) === this.char) return false; if (inv_pos < 5 && word.charAt(inv_pos) === this.char) return false;
} }
return true; return true;
// invalid letter // invalid letter
@@ -89,16 +96,16 @@
function parse_input(input) { function parse_input(input) {
let letters = []; let letters = [];
let input_array = input.split(' '); let input_array = input.split(' ');
for(let arg of input_array) { for (let arg of input_array) {
// valid letter and position // valid letter and position
if(arg.charAt(1) === '@') { if (arg.charAt(1) === '@') {
letters.push(new Letter(arg.charAt(0), arg.charAt(2))); letters.push(new Letter(arg.charAt(0), arg.charAt(2)));
// valid letter no position // valid letter no position
} else if(arg.charAt(1) === '?') { } else if (arg.charAt(1) === '?') {
letters.push(new Letter(arg.charAt(0), null, arg.substring(2))); letters.push(new Letter(arg.charAt(0), null, arg.substring(2)));
// invalid letter // invalid letter
} else if(arg.charAt(0) === '!') { } else if (arg.charAt(0) === '!') {
for(const letter of arg.substring(1)) { for (const letter of arg.substring(1)) {
letters.push(new Letter(letter)); letters.push(new Letter(letter));
} }
} }
@@ -127,9 +134,9 @@
check_letters(word) { check_letters(word) {
let valid = false; let valid = false;
for(const letter of this.state.letters) { for (const letter of this.state.letters) {
valid = letter.valid_word(word); valid = letter.valid_word(word);
if(!valid) return false; if (!valid) return false;
} }
return true; return true;
}, },
@@ -143,7 +150,10 @@
const input = document.getElementById('word'); const input = document.getElementById('word');
input.value = this.state.memory; input.value = this.state.memory;
}, },
submit_handler(e) {
e.preventDefault();
this.check();
},
check() { check() {
const input = document.getElementById('word').value; const input = document.getElementById('word').value;
this.set_state('input', input); this.set_state('input', input);
@@ -151,8 +161,8 @@
const valid_words = []; const valid_words = [];
//console.log('check', this.check_letters('shall', true)); //console.log('check', this.check_letters('shall', true));
//console.log('contains', SOLUTIONS.includes('shall')) //console.log('contains', SOLUTIONS.includes('shall'))
for(const word of WORDLE) { for (const word of WORDLE) {
if(this.check_letters(word)) valid_words.push({ word: word, active: true }); if (this.check_letters(word)) valid_words.push({word: word, active: true});
} }
console.log(WORDS.length, SOLUTIONS.length); console.log(WORDS.length, SOLUTIONS.length);
this.set_state('words', valid_words); this.set_state('words', valid_words);

34
src/components/includes/word/wordle.riot
View File

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

18
src/index.html
View File

@@ -1,19 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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://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://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css"> <meta name="viewport" content="width=640px,user-scalable=0" />
</head> </head>
<body> <body>
<div class=""> <main class="pure-g container">
<div class="row"> <div class="pure-u-1-24"></div>
<main class="column"> <div class="pure-u-22-24 finder" is="finder" data-riot-component></div>
<div is="finder" data-riot-component> <div class="pure-u-1-24"></div>
</div>
</main> </main>
</div>
</div>
</body> </body>
</html> </html>

30
src/style.css
View File

@@ -29,9 +29,9 @@
.word { .word {
cursor: pointer; cursor: pointer;
margin: 2px; padding: 10px;
float: left; margin: 5px;
width: 60px; font-size: 1.1em;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
@@ -42,4 +42,28 @@
background-color: #cccccc; background-color: #cccccc;
color: #a1a1a1; 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;
}