Fran314
/
qwordle-clone
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some cleanup

Browse Source
main
Francesco Baldino 2 years ago
parent 7e4c2c74af
commit 7cb8cbc555
7 changed files with 1957 additions and 36 deletions
Show Stats Download Patch File Download Diff File

17
README.md
Unescape Escape View File

@ -1,7 +1,16 @@
# Vue 3 + Vite # PHC Math Qwordle
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. This is a ripoff of the original Qwordle, but this is much better because it only uses mathematical words and you can do it as many times a day as your heart desires.
## Recommended IDE Setup ## Usage
To live preveiw it, run
```bash
pnpm install
pnpm run dev
```
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) To build it, run
```bash
pnpm install
pnpm run build
```

11
pair-generation/README.md
Unescape Escape View File

@ -0,0 +1,11 @@
# Pair Generation
This is only a subscript to generate valid quantum pairs from a given list of pairs.
## Usage
To use, edit the script content by changing the variable `words` at the top with the list of words that you want to pair up.
Then, run
```bash
python pair_generation.py > output-pairs.json
```

21
pair-generation/pair-generator.py
Unescape Escape View File

@ -0,0 +1,21 @@
words = ["MINUS","ZEROS","ROUND","THIRD","PROOF","EVENT","MATHS","CUBIC","MONAD","GAUSS","AXIOM","PRISM","CHORD","ANGLE","LITRE","MILES","VALUE","TABLE","HALVE","EXACT","LOCUS","QUART","ARRAY","SOLID","KITES","TRIAL","EMPTY","FIFTH","NINTH","DEPTH","BOOLE","FACES","TENTH","SLOPE","SIXTH","DELTA","SIGMA","LINES","EULER","FIFTY","SCALE","RULER","INDEX","OUNCE","FIRST","SPACE","MONIC","POINT","RIGHT","DIGIT","VALID","TIMES","KLEIN","TWICE","SIXES","METRE","STONE","BAYES","SEVEN","PLANE","CLOCK","THREE","CHAOS","ACUTE","UNITS","HARDY","COUNT","FORTY","TORUS","WIDTH","LOGIC","WILES","POWER","EIGHT","RANGE","PRIME","MODAL","TREND","THETA","CURVE","SIXTY","ERROR","TALLY","PLATO","UNION","KILOS","GRAPH","RATIO","CUBES","DOZEN","EQUAL","ALPHA","NODES","GROUP","ERDOS","KAPPA","LIMIT","ADDED","HERTZ","LATEX","CONIC","RINGS","BOUND","ROOTS","BOREL","ALEPH","SURDS","HELIX","APPEL","EDGES","GAMMA","POLAR","GODEL","FIELD","TUPLE","POLYA","BASIS","UPPER","LEMMA","PROVE","ORDER","SIDES","HASSE","SMALL","BRACE","KNUTH","AREAS","IDEAL","SPACE","DENSE","MODEL","LOWER","OVALS","NOISE","SOLVE","BAIRE","CHAIN","JULIA","FOCUS","KNOTS","DIRAC","HOLES","NORMS","REALS"]
def are_disjoint(f,s):
for c in f:
if c in s:
return False
return True
pairs = []
for fi in range(len(words)):
for si in range(fi, len(words)):
f = words[fi]
s = words[si]
if are_disjoint(f, s):
pairs.append([f, s])
print('[')
print(',\n'.join([f'["{pair[0]}", "{pair[1]}"]' for pair in pairs]))
print(']')

87
public/logo-circuit-board.svg
Unescape Escape View File

@ -0,0 +1,87 @@
<svg width="1000" height="500" viewBox="0 0 1000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="80" y="190" width="60" height="120" fill="#1E6733"/>
<rect x="160" y="50" width="150" height="60" fill="#1E6733"/>
<rect x="140" y="90" width="10" height="50" fill="#ECC333"/>
<rect x="140" y="200" width="10" height="50" fill="#ECC333"/>
<rect x="140" y="410" width="10" height="20" fill="#ECC333"/>
<rect x="140" y="350" width="10" height="50" fill="#ECC333"/>
<rect x="240" y="110" width="70" height="10" fill="#ECC333"/>
<rect x="250" y="130" width="60" height="130" fill="#1E6733"/>
<rect x="340" y="50" width="60" height="120" fill="#1E6733"/>
<rect x="340" y="190" width="60" height="120" fill="#1E6733"/>
<rect x="590" y="190" width="60" height="120" fill="#1E6733"/>
<rect x="690" y="180" width="60" height="120" fill="#1E6733"/>
<rect x="690" y="310" width="60" height="140" fill="#1E6733"/>
<rect x="690" y="50" width="60" height="120" fill="#1E6733"/>
<rect x="590" y="320" width="60" height="130" fill="#1E6733"/>
<rect x="590" y="50" width="60" height="130" fill="#1E6733"/>
<rect x="420" y="240" width="150" height="60" fill="#1E6733"/>
<rect x="340" y="320" width="60" height="130" fill="#1E6733"/>
<rect x="240" y="140" width="10" height="50" fill="#ECC333"/>
<rect x="350" y="170" width="40" height="10" fill="#ECC333"/>
<rect x="330" y="330" width="10" height="50" fill="#ECC333"/>
<rect x="160" y="200" width="80" height="60" fill="#1E6733"/>
<rect x="650" y="200" width="10" height="50" fill="#ECC333"/>
<rect x="750" y="330" width="10" height="60" fill="#ECC333"/>
<rect x="800" y="450" width="40" height="10" fill="#ECC333"/>
<rect x="850" y="450" width="30" height="10" fill="#ECC333"/>
<rect x="750" y="90" width="10" height="50" fill="#ECC333"/>
<rect x="810" y="110" width="60" height="10" fill="#ECC333"/>
<rect x="580" y="330" width="10" height="50" fill="#ECC333"/>
<rect x="580" y="60" width="10" height="50" fill="#ECC333"/>
<rect x="710" y="420" width="20" height="20" fill="#C4C4C4"/>
<rect x="710" y="390" width="20" height="20" fill="#C4C4C4"/>
<rect x="100" y="280" width="20" height="10" fill="#C4C4C4"/>
<rect x="100" y="260" width="20" height="10" fill="#C4C4C4"/>
<rect x="110" y="210" width="20" height="20" fill="#C4C4C4"/>
<rect x="350" y="430" width="40" height="10" fill="#303030"/>
<rect x="350" y="410" width="40" height="10" fill="#303030"/>
<rect x="350" y="390" width="40" height="10" fill="#303030"/>
<rect x="700" y="70" width="20" height="40" fill="#303030"/>
<rect x="700" y="120" width="20" height="40" fill="#303030"/>
<rect x="610" y="280" width="20" height="20" fill="#C4C4C4"/>
<rect x="600" y="240" width="20" height="20" fill="#C4C4C4"/>
<rect x="430" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="430" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="430" y="280" width="10" height="10" fill="#C4C4C4"/>
<rect x="445" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="445" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="460" y="280" width="40" height="10" fill="#C4C4C4"/>
<rect x="475" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="475" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="505" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="505" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="520" y="265" width="10" height="15" fill="#C4C4C4"/>
<rect x="505" y="280" width="25" height="10" fill="#C4C4C4"/>
<rect x="535" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="535" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="535" y="280" width="10" height="10" fill="#C4C4C4"/>
<rect x="445" y="280" width="10" height="10" fill="#C4C4C4"/>
<rect x="460" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="460" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="490" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="490" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="520" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="550" y="250" width="10" height="10" fill="#C4C4C4"/>
<rect x="550" y="265" width="10" height="10" fill="#C4C4C4"/>
<rect x="550" y="280" width="10" height="10" fill="#C4C4C4"/>
<rect x="620" y="210" width="20" height="20" fill="#C4C4C4"/>
<rect x="370" y="70" width="20" height="30" fill="#303030"/>
<rect x="370" y="110" width="20" height="30" fill="#303030"/>
<rect x="870" y="440" width="40" height="10" transform="rotate(-90 870 440)" fill="#303030"/>
<rect x="890" y="440" width="40" height="10" transform="rotate(-90 890 440)" fill="#303030"/>
<rect x="810" y="440" width="40" height="10" transform="rotate(-90 810 440)" fill="#303030"/>
<rect x="790" y="440" width="40" height="10" transform="rotate(-90 790 440)" fill="#303030"/>
<rect x="270" y="100" width="40" height="10" transform="rotate(-90 270 100)" fill="#303030"/>
<rect x="290" y="100" width="40" height="10" transform="rotate(-90 290 100)" fill="#303030"/>
<rect x="190" y="100" width="40" height="10" transform="rotate(-90 190 100)" fill="#303030"/>
<rect x="170" y="100" width="40" height="10" transform="rotate(-90 170 100)" fill="#303030"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M140 60V170C134.477 170 130 174.477 130 180H90C90 174.477 85.5228 170 80 170V60C85.5228 60 90 55.5228 90 50H130C130 55.5228 134.477 60 140 60Z" fill="#1E6733"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M130 320H90C90 325.523 85.5229 330 80 330V440C85.5229 440 90 444.477 90 450H130C130 444.477 134.477 440 140 440V330C134.477 330 130 325.523 130 320Z" fill="#1E6733"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 60C775.523 60 780 55.5228 780 50H910C910 55.5228 914.477 60 920 60V100C914.477 100 910 104.477 910 110H780C780 104.477 775.523 100 770 100V60Z" fill="#1E6733"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M770 400C775.523 400 780 395.523 780 390H910C910 395.523 914.477 400 920 400V440C914.477 440 910 444.477 910 450H780C780 444.477 775.523 440 770 440V400Z" fill="#1E6733"/>
<rect x="750" y="190" width="10" height="40" fill="#ECC333"/>
<rect x="750" y="240" width="10" height="20" fill="#ECC333"/>
<rect x="400" y="200" width="10" height="40" fill="#ECC333"/>
<rect x="400" y="250" width="10" height="20" fill="#ECC333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

1793
public/math-pairs.json
View File

File diff suppressed because it is too large Load Diff

0
public/mathematical-wordle-words-list.json → public/math-words.json
Unescape Escape View File

64
src/App.vue
Unescape Escape View File

@ -12,7 +12,7 @@
SHAKE_ANIMATION_DURATION: 0.3, SHAKE_ANIMATION_DURATION: 0.3,
// Variables // Variables
words: [], pairs: [],
listen: true, listen: true,
@ -44,8 +44,8 @@
} }
}); });
let req = await fetch('./mathematical-wordle-words-list.json'); let req = await fetch('./math-pairs.json');
this.words = await req.json(); this.pairs = await req.json();
this.setupGame(); this.setupGame();
}, },
@ -56,33 +56,6 @@
PopUp, PopUp,
}, },
methods: { methods: {
generatePair() {
let words = [];
let validPair = false;
while (!validPair) {
let firstWord = this.words[Math.floor(Math.random() * this.words.length)];
let possibleSecondWords = []
for(let i = 0; i < this.words.length; i++) {
let validSecondWord = true;
for (let l = 0; l < firstWord.length; l++) {
if (this.words[i].includes(firstWord[l])) {
validSecondWord = false;
}
}
if (validSecondWord) {
possibleSecondWords.push(this.words[i]);
}
}
if (possibleSecondWords.length > 0) {
validPair = true;
words = [firstWord, possibleSecondWords[Math.floor(Math.random() * possibleSecondWords.length)]];
}
}
return words;
},
setupGame() { setupGame() {
this.gridState = Array.from({length: 6}, () => { this.gridState = Array.from({length: 6}, () => {
return Array.from({length: 5}, () => { return Array.from({length: 5}, () => {
@ -106,7 +79,7 @@
this.currentAttempt = 0; this.currentAttempt = 0;
this.currentIndex = 0; this.currentIndex = 0;
this.secretWords = this.generatePair(); this.secretWords = this.pairs[Math.floor(Math.random() * this.pairs.length)];
console.log(this.secretWords); console.log(this.secretWords);
console.log(this.secretWords[0]); console.log(this.secretWords[0]);
console.log(this.secretWords[1]); console.log(this.secretWords[1]);
@ -268,7 +241,16 @@
</script> </script>
<template> <template>
<div class="page" :style="`--letter-animation-duration: ${LETTER_ANIMATION_DURATION}s; --shake-animation-duration: ${SHAKE_ANIMATION_DURATION}s`"> <div class="page"
:style="`--letter-animation-duration: ${LETTER_ANIMATION_DURATION}s; --shake-animation-duration: ${SHAKE_ANIMATION_DURATION}s`"
>
<div class="toolbar">
<div class="logo">
<img src="logo-circuit-board.svg" alt="logo" />
/
Qwordle
</div>
</div>
<div v-if="this.gridState !== null" class="interface"> <div v-if="this.gridState !== null" class="interface">
<div class="header"> <div class="header">
<div>Qwordle</div> <div>Qwordle</div>
@ -310,6 +292,7 @@
--text-color: #ffffff; --text-color: #ffffff;
--background-color: #0f172a; --background-color: #0f172a;
--border-color: #475569;
--button-color: #475569; --button-color: #475569;
--button-highlight: #596679; --button-highlight: #596679;
@ -345,6 +328,23 @@
.page { .page {
position: relative; position: relative;
.toolbar {
padding: 1rem .75rem 1rem 1rem;
display: flex;
align-items: center;
border-bottom: 2px solid var(--border-color);
.logo {
display: flex;
align-items: center;
img {
max-height: 2.5rem;
}
}
}
.interface { .interface {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

Write Preview
Loading…
Cancel
Save