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

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

@@ -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);

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

@@ -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

20
src/index.html
View File

@@ -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>

30
src/style.css
View File

@@ -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;
}