From aa79579624529b2fb676e08e8643607f99def317 Mon Sep 17 00:00:00 2001 From: Bilal <112407129+TMBilalTM@users.noreply.github.com> Date: Sun, 4 Aug 2024 18:05:56 +0300 Subject: [PATCH] BilalTM --- .eslintrc.json | 3 + .gitignore | 145 +- README.md | 29 +- app/favicon.ico | Bin 0 -> 15406 bytes app/globals.css | 54 + app/layout.js | 17 + app/page.jsx | 145 + app/page.module.css | 36 + app/slidingpuzzle/page.jsx | 37 + app/slidingpuzzle/page.module.css | 43 + components/PasswordBox.css | 33 + components/PasswordBox.jsx | 71 + components/ReloadButton.jsx | 25 + components/ReloadButton.module.css | 15 + components/RuleBox.css | 41 + components/RuleBox.jsx | 19 + jsconfig.json | 7 + next.config.js | 8 + package-lock.json | 3789 +++++++++++++++++ package.json | 20 + public/sifreolusturucu.png | Bin 0 -> 5859 bytes public/sifreolusturucu2.png | Bin 0 -> 6700 bytes public/yenile.png | Bin 0 -> 1346 bytes rules/Rule.js | 15 + rules/RuleEarthquake/RuleEarthquake.jsx | 84 + rules/RuleLocation/RuleLocation.jsx | 159 + rules/RuleLocation/RuleLocation.module.css | 13 + rules/RuleMorse/RuleMorse.jsx | 28 + rules/RuleQR/RuleQR.jsx | 59 + rules/RuleQR/words.js | 6 + rules/RuleRiddle/RuleRiddle.jsx | 82 + rules/RuleRiddle/RuleRiddle.module.css | 9 + rules/RuleSlidingPuzzle/RuleSlidingPuzzle.css | 38 + rules/RuleSlidingPuzzle/RuleSlidingPuzzle.jsx | 154 + rules/RuleSlidingPuzzle/utils.js | 68 + rules/RuleSum/RuleSum.jsx | 23 + rules/RuleTimeEmoji/RuleTimeEmoji.jsx | 72 + rules/RuleWordle/RuleWordle.jsx | 44 + rules/rules.js | 88 + 39 files changed, 5358 insertions(+), 121 deletions(-) create mode 100644 .eslintrc.json create mode 100644 app/favicon.ico create mode 100644 app/globals.css create mode 100644 app/layout.js create mode 100644 app/page.jsx create mode 100644 app/page.module.css create mode 100644 app/slidingpuzzle/page.jsx create mode 100644 app/slidingpuzzle/page.module.css create mode 100644 components/PasswordBox.css create mode 100644 components/PasswordBox.jsx create mode 100644 components/ReloadButton.jsx create mode 100644 components/ReloadButton.module.css create mode 100644 components/RuleBox.css create mode 100644 components/RuleBox.jsx create mode 100644 jsconfig.json create mode 100644 next.config.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/sifreolusturucu.png create mode 100644 public/sifreolusturucu2.png create mode 100644 public/yenile.png create mode 100644 rules/Rule.js create mode 100644 rules/RuleEarthquake/RuleEarthquake.jsx create mode 100644 rules/RuleLocation/RuleLocation.jsx create mode 100644 rules/RuleLocation/RuleLocation.module.css create mode 100644 rules/RuleMorse/RuleMorse.jsx create mode 100644 rules/RuleQR/RuleQR.jsx create mode 100644 rules/RuleQR/words.js create mode 100644 rules/RuleRiddle/RuleRiddle.jsx create mode 100644 rules/RuleRiddle/RuleRiddle.module.css create mode 100644 rules/RuleSlidingPuzzle/RuleSlidingPuzzle.css create mode 100644 rules/RuleSlidingPuzzle/RuleSlidingPuzzle.jsx create mode 100644 rules/RuleSlidingPuzzle/utils.js create mode 100644 rules/RuleSum/RuleSum.jsx create mode 100644 rules/RuleTimeEmoji/RuleTimeEmoji.jsx create mode 100644 rules/RuleWordle/RuleWordle.jsx create mode 100644 rules/rules.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore index c6bba59..ae96402 100644 --- a/.gitignore +++ b/.gitignore @@ -1,130 +1,37 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* -.pnpm-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# Runtime data -pids -*.pid -*.seed -*.pid.lock +# dependencies +/node_modules +/.pnp +.pnp.js -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov +# testing +/coverage -# Coverage directory used by tools like istanbul -coverage -*.lcov +# next.js +/.next/ +/out/ -# nyc test coverage -.nyc_output +# production +/build -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt +# misc +.DS_Store +*.pem -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* -# Dependency directories -node_modules/ -jspm_packages/ +# local env files +.env*.local -# Snowpack dependency directory (https://snowpack.dev/) -web_modules/ +# vercel +.vercel -# TypeScript cache +# typescript *.tsbuildinfo +next-env.d.ts -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional stylelint cache -.stylelintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variable files -.env -.env.development.local -.env.test.local -.env.production.local -.env.local - -# parcel-bundler cache (https://parceljs.org/) -.cache -.parcel-cache - -# Next.js build output -.next -out - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and not Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# vuepress v2.x temp and cache directory -.temp -.cache - -# Docusaurus cache and generated files -.docusaurus - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port - -# Stores VSCode versions used for testing VSCode extensions -.vscode-test - -# yarn v2 -.yarn/cache -.yarn/unplugged -.yarn/build-state.yml -.yarn/install-state.gz -.pnp.* +/extras \ No newline at end of file diff --git a/README.md b/README.md index 1fae043..3fd8ce9 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,27 @@ -# passwordgame - Password Game - Turkish +# Şifre Oluşturma Oyunu + +[Şifre Oluşturucu](https://sifreolusturucu.vercel.app) oyununa hoş geldiniz! Hayatınızın en karmaşık şifresini oluşturmaya hazır olun. Şifreniz, giderek absürt hale gelen bir dizi kurala uygun olmalıdır. Oyun deneyimini zenginleştiren bulmacalar ve bilmece içeren çeşitli mini oyunların keyfini çıkarın. + +[Şifre Oluşturucuyu Şimdi Oyna](https://sifreolusturucu.vercel.app) + +![şifreolusturucu](https://github.com/user-attachments/assets/506f286a-66c0-4993-845d-c3471288dbe6) + +Bu oyun fikri, [Neal](https://twitter.com/nealagarwal) tarafından yapılan [The Password Game](https://neal.fun/password-game/) den esinlenilmiştir. Eğer henüz oynamadıysanız, orijinalini mutlaka kontrol edin. + +## Geliştirme +### Başlarken + +1. Bu kodu terminale yapıştırın: `git clone https://github.com/TMBilalTM/passwordgame/passwordgame.git`. +2. Komut satırından proje dizinine gidin: `cd passwordgame`. +3. Gerekli bağımlılıkları yüklemek için `npm install` komutunu çalıştırın. +4. Geliştirme sunucusunu `npm run dev` ile başlatın. +5. Web tarayıcınızı açın ve `http://localhost:3000` adresine giderek oyunu oynayın. + +### Katkıda Bulunma + +Katkılarınızı bekliyorum! Bir hata bulursanız veya iyileştirmeler için önerileriniz varsa, lütfen bir sorun açın veya bir pull request oluşturun. + +## Teşekkürler +- Bu oyun, [Neal](https://twitter.com/nealagarwal) tarafından yapılan [The Password Game](https://neal.fun/password-game/)den büyük ölçüde esinlenilmiştir. +- Bu oyun, [Next.js](https://nextjs.org/) framework'ü kullanılarak geliştirilmiştir. +- [Yenileme simgesi mavadee tarafından yapılmıştır, teşekkürler!](https://www.freepik.com/icon/reload_3580291#fromView=keyword&term=Refresh&page=1&position=15) diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..dbbffcfa960e822a493b9df02af60e1868536a59 GIT binary patch literal 15406 zcmeI3TWl0%6vwB6T!j>n#;D*LnhK4SmO`PWgkB-n zApsvmj4>h!)E9l^#b`h=F~N9&pdr8uV$}Em0kKr-?_c&?zD{?`?Cz9O=q4xMnRA~r z-}TI_<0LraoWw+jHsG|4cbqK8aRPx`*YjsM&WF&_(}VmJ$N6Tqw{D%xJ7r~M>1)=kNfHPbO+3j65BFea5A6c+WK&DadEQn^78Vhv$L}&3y9%q(ZrLC@NmB+OP1_kym;~1p+GX>bVbX|%=|em zEv;`Tkc?OTg$oz%7TETp(MPX62%(s~>ZhltUn7T81j0=WUiFc`xpe8$`sK@)*9(t9 zKNPdkRU3u>sP%d7$ACBRQxp#1bx9`D^P_KcWn^R=io_RBGLiW7&za=A zY>RmG=b3JveVvn&^DJ`e!^iOVxX97Sz zp!q45UutUV1p394y1Kf_M!&SQbfRc>+`>f@&&WwfG}$n;XxoyKl3eDvwyLVCCZo%| zRVo^DUX`H<7fn1vla6SzVQ8_mZEbA+d{Ih@fZPB7djRN8J{krjCy8kmKr}#VL_Gw?=kN#PIzccqQ+`eBo?)Uw(cK0&B zYKiUtF&{1v&F$A*`|Y2-&N<`TwCp9$8Gr89Z~xqD4`+waT+cfD6to*|zvkL+|FX+7 z|Al#Nvw;27uf|unb~yZp^Am|S=703f|E${w^gQWjCun!Y0zutA*)rqQYs>oIA^+%p z=2gcn$DHuFY{-_Icc*K{^b+ZE4_DdC&AOAkn=c*agsZZ_{Fv$Hd%0$w`(FB-b>HzK zZ_7wWy4W~r)1$!)3JS_(gEhVvyuzz4bK`T;k?zWsE6cp&EaHh znq(v^9qHP|N zu4ft^u>@3yHGYMQX84jdyr6E#u6)Rs&G!@Ewr$(QNHux-#dya2)JXoQT}-7W$J>X& zKiQP+!5sf6to^rcIj$tViT`26e&?a=edcFkoye2Iwv1cpv%gkgOdS z?|A0QCgWr$_nBk!{Kn~{)5+5S|Hg;v&A?;k+TC&{Op=V7u4~zp?QpyYou)a1ew)Sf zf0I4zTf+(RAz$+8SKjHHY1)UGz2I=S_&P_9JiYtza*wQ^daoGTSKbX=KE1@|MFv|h z-;J1UAM)uXHZL+`@kihHMmYaH^aY(c^{zx9Tr|&PXoTaxOsoy2Zwd!Q8;jp0C5kqN z@jI6P5u87%+x$U&tk67S;i8R({!h*4KhBCTnb=Lsp1MsuulF!g^ABf~^LzL19dr&9 zjhfPhdp&+?Z6{35-7Win)$BdZp(B-lYV(&lrw#fxLNw~ASMK%r6(7&wBhHJV?_M~s z&!MLCvDeroH&XeRZ^mg4x&D!u-xGlUB-&_+Kbklr$&O_HBgGUAeJuXlv!8MiP44`V z^)vs}o9=r2)UrnP`H?!SZ}C%)X*PX=dGKFweOGkaXE+nI-M>Clvw7im4~`FG{VBwD z|K5xDf@k^m@$uy3+=(`tvtz>e8v~`ZEb3kDb$qyl5O_EzmuE1+gyJz*_3Vh zkT3c4$Fk#)izN0nUj}p2!#-?>`yEz1zGO=_$$S4AEno5(k4;;bXFGv?z;5jKzfZ>g zarW~O>&&*U7hJa3V;m3Wrx#zlhWg)x7n^Pw>XEs`-~W7-C*I3%cgw_jO|AA7lY9B# zn}`*$+KQy7XUzNigUXSBzIvTnaY1)?cg*kFq^of%TgEQ^=%Al{)4m`2(OmjY=szor zvkUkykEPZv9qG!3iCwnsZ>??Le&L!Y^le4Z=S}d7#GzWT{l5B6?h>RUUF_VHE$-ve zaLjA&KzO#}84LP0a6mnQF?W=HyNbAy!o3F-O+50RFIkgwwb=SoHsk4w?l_0K*0ZN3 zQqS`~WyircSy!Na#X0?5#!3g*n*_o|6HhX>j%>)5Y!2nqZ(d(tUjjbob5=ZT<_ + + + + {children} + + ) +} diff --git a/app/page.jsx b/app/page.jsx new file mode 100644 index 0000000..f719bfc --- /dev/null +++ b/app/page.jsx @@ -0,0 +1,145 @@ +'use client' +import React, { useState, useEffect, useRef } from 'react'; +import Image from 'next/image'; +import { useAutoAnimate } from '@formkit/auto-animate/react' +import styles from './page.module.css' +import PasswordBox from "../components/PasswordBox"; +import RuleBox from "../components/RuleBox"; +import ruleList, {sort_rules} from "../rules/rules"; + + + + +export default function Home(){ + const [pswd, setPswd] = useState(""); + const [ruleState, setRuleState] = useState([]); + const max_unlocked_rules = useRef(0); + const pswdBoxRef = useRef(null); + const [aaParent, aaEnableAnimations] = useAutoAnimate(); + const [allSolved, setAllSolved] = useState(false); + + + useEffect(() => { + + for (let i = 0; i < ruleList.length; i++) { + ruleList[i].num = i + 1; + } + max_unlocked_rules.current = 0; + + setRuleState(ruleList); + + }, []); + + + + function setPswdAndCheckRules(txt){ + setPswd(txt); + checkRules(txt); + } + + function checkRules(txt) { + if(ruleState.length===0) return; + + let rules = [...ruleState]; + + if(!rules[0].unlocked && txt.length > 0){ + rules[0].unlocked = true; + max_unlocked_rules.current++; + } + + let solved_count = 0; + for(let i=0;i +
+ +
+ +
+ ŞifreniOluştur +
+
+ + + +
Seviye: {max_unlocked_rules.current}
+
+ {allSolved && } + {ruleState.filter(r => r.unlocked).sort(sort_rules).map(r => { + return( + + ) + })} +
+ +
+
+ Göz atın GitHub
+ BilalTM  + +
+ + ) +} \ No newline at end of file diff --git a/app/page.module.css b/app/page.module.css new file mode 100644 index 0000000..1cd3e93 --- /dev/null +++ b/app/page.module.css @@ -0,0 +1,36 @@ +.container{ + width: 576px; + max-width: calc(100% - 20px); + margin: 0 auto; + padding: 5px; + min-height: calc(100vh - 50px); +} + +.footer{ + font-size: 12px; + width: 100%; + color: #151515; + text-align: center; + padding-bottom: 2px; +} + +.title{ + text-align: center; + display: grid; + align-items: center; + grid-template-columns: 60px auto; + justify-content: center; + margin-top: 20px; + margin-bottom: 40px; +} +.title_text{ + font-size: 28px; + font-weight: bold; + color: #533ea5; +} +.introduction{ + text-align: center; + font-size: 15px; + margin-top: 50px; + margin-bottom: 60px; +} \ No newline at end of file diff --git a/app/slidingpuzzle/page.jsx b/app/slidingpuzzle/page.jsx new file mode 100644 index 0000000..f6ee4a1 --- /dev/null +++ b/app/slidingpuzzle/page.jsx @@ -0,0 +1,37 @@ +'use client' + +import React, { useEffect, useState } from 'react'; + +import styles from "./page.module.css"; + +import {SlidingPuzzle} from "../../rules/RuleSlidingPuzzle/RuleSlidingPuzzle"; +import {getRandomWord} from "../../rules/RuleSlidingPuzzle/utils"; + +function PuzzlePage() { + const [word, setWord] = useState(null); + const [showSolution, setShowSolution] = useState(false); + + useEffect(()=>{ + setWord(getRandomWord()); + }, []); + + return ( +
+

Kaydırmalı Bulmaca!

+ {word===null ? null : ( + <> + +
+ + +
+ + + )} +
+ ); +} + +export default PuzzlePage; \ No newline at end of file diff --git a/app/slidingpuzzle/page.module.css b/app/slidingpuzzle/page.module.css new file mode 100644 index 0000000..1dc3df3 --- /dev/null +++ b/app/slidingpuzzle/page.module.css @@ -0,0 +1,43 @@ +.container{ + width: 576px; + max-width: calc(100% - 20px); + margin: 0 auto; + color: #4e4e4e; + min-height: calc(100vh - 50px); + text-align: center; +} +.buttons{ + margin-top: 20px; + margin-bottom: 10px; +} +.buttons>button{ + + margin: 5px 5px 5px 5px; + background-color: #FFFFFF; + border: 0; + border-radius: .5rem; + box-sizing: border-box; + color: #4e4e4e; + font-size: 14px; + padding: .75rem 1rem; + text-align: center; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +.buttons>button:hover { + /* background-color: rgb(249,250,251); */ + box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25) +} +.buttons>button:active { + transform: scale(0.98); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1); +} + +.buttons>button:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.buttons>button:focus-visible { + box-shadow: none; +} \ No newline at end of file diff --git a/components/PasswordBox.css b/components/PasswordBox.css new file mode 100644 index 0000000..34747a4 --- /dev/null +++ b/components/PasswordBox.css @@ -0,0 +1,33 @@ +.pswdbox_label { + text-align: left; + font-size: 15px; + margin-bottom: 6px; + padding: 0 10px 2px 10px; +} + +.pswdbox { + box-sizing: border-box; + text-align: left; + background: #fff; + border: 2px solid #0A0F0D; + font-size: 22px; + /* border-radius:3px; */ + padding: 12px 16px; + margin-top: 5px; + margin-bottom: 20px; + box-shadow: 8px 8px 1px 0px rgba(209,197,209,0.5); +} + +.pswdbox:hover{ + box-shadow: 10px 10px 1px 0px rgba(209,197,209,0.6); +} +.pswdbox:focus-within{ + border: 2px solid #533ea5; + outline:none; +} + +.psswd_len { + text-align: right; + margin: 3px 5px 10px 0px; + float: right; +} \ No newline at end of file diff --git a/components/PasswordBox.jsx b/components/PasswordBox.jsx new file mode 100644 index 0000000..edb32ed --- /dev/null +++ b/components/PasswordBox.jsx @@ -0,0 +1,71 @@ + +import React, {useRef, useEffect} from 'react'; +import "./PasswordBox.css"; + + +function getCaretPosition(el){ + if(el.selectionStart || el.selectionStart == '0'){ + return { + 'start': el.selectionStart, + 'end': el.selectionEnd + }; + } + else { + return { + 'start': 0, + 'end': 0 + }; + } +} + +function setCaretPosition(el, pos){ + if (el && pos && el.setSelectionRange) { + el.setSelectionRange(pos.start, pos.end); + } +} + + + +function PasswordBox(props, ref) { + const {pswd, setPswd} = props; + const caretPos = useRef(); + + useEffect(() => { + ref.current.style.height = 'auto'; + ref.current.style.height = `${ref.current.scrollHeight}px`; + }, [pswd, ref]); + + + function handleChange(e){ + caretPos.current = getCaretPosition(ref.current); + setPswd(e.target.value); + } + useEffect(() => { + setCaretPosition(ref.current, caretPos.current); + }, [pswd]); + + return ( + <> +
+ Şifreni Seç + + {pswd.length} + +
+