[mod][add] changed to pure-css and added fontawesome
This commit is contained in:
40
package.json
40
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"}
|
||||
{
|
||||
"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"
|
||||
}
|
||||
@@ -1,23 +1,30 @@
|
||||
<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 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="row">
|
||||
<div class="column">
|
||||
<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 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>
|
||||
@@ -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);
|
||||
|
||||
@@ -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;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Char from './char.riot'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Char
|
||||
|
||||
@@ -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 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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user