Add wordle by oxalorg
This commit is contained in:
Michiel Borkent
parent
8f72a1a51f
commit
728cd304aa
106
resources/public/cljs/wordle.cljs
Normal file
106
resources/public/cljs/wordle.cljs
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
;; taken from https://github.com/oxalorg/wordle-clojurescript
|
||||
(ns wordle.core2)
|
||||
|
||||
(def board-state (atom []))
|
||||
(def counter (atom 0))
|
||||
(def attempt (atom 0))
|
||||
(def word-of-the-day (atom "hello"))
|
||||
|
||||
(defn write-letter [cell letter]
|
||||
(set! (.-textContent cell) letter))
|
||||
|
||||
(defn make-cell []
|
||||
(let [cell (js/document.createElement "div")]
|
||||
(set! (.-className cell) "cell")
|
||||
cell))
|
||||
|
||||
(defn make-board [n]
|
||||
(let [board (js/document.createElement "div")]
|
||||
(set! (.-className board) "board")
|
||||
;; adding cells
|
||||
(doseq [_ (range n)]
|
||||
(let [cell (make-cell)]
|
||||
(swap! board-state conj cell)
|
||||
(.appendChild board cell)))
|
||||
board))
|
||||
|
||||
(defn get-letter [cell]
|
||||
(.-textContent cell))
|
||||
|
||||
(defn color-cell [idx cell]
|
||||
(let [color (fn [el color]
|
||||
(set! (-> el .-style .-backgroundColor)
|
||||
color))
|
||||
letter (get-letter cell)]
|
||||
(cond
|
||||
(= letter (nth @word-of-the-day idx))
|
||||
(color cell "green")
|
||||
|
||||
(contains? (set @word-of-the-day) letter)
|
||||
(color cell "aqua")
|
||||
|
||||
:else
|
||||
(color cell "#333333"))))
|
||||
|
||||
(defn check-solution [cells]
|
||||
(doseq [[idx cell] (map-indexed vector cells)]
|
||||
(color-cell idx cell))
|
||||
(= (mapv get-letter cells)
|
||||
(vec @word-of-the-day)))
|
||||
|
||||
(defn user-input [key]
|
||||
(let [start (* 5 @attempt)
|
||||
end (* 5 (inc @attempt))]
|
||||
(cond
|
||||
(and (re-matches #"[a-z]" key)
|
||||
(< @counter end))
|
||||
(do
|
||||
(write-letter (nth @board-state @counter) key)
|
||||
(swap! counter inc))
|
||||
|
||||
(and (= key "backspace")
|
||||
(> @counter start))
|
||||
(do
|
||||
(swap! counter dec)
|
||||
(write-letter (nth @board-state @counter) ""))
|
||||
|
||||
(and (= key "enter")
|
||||
(zero? (mod @counter 5)))
|
||||
(do
|
||||
(when (check-solution (subvec @board-state start end))
|
||||
(js/alert "You won"))
|
||||
(swap! attempt inc))
|
||||
|
||||
)))
|
||||
|
||||
(defonce listener (atom nil))
|
||||
|
||||
(defn ^:dev/before-load unmount []
|
||||
(js/document.removeEventListener "keydown" @listener)
|
||||
(let [app (js/document.getElementById "app")]
|
||||
(set! (.-innerHTML app) "")))
|
||||
|
||||
(defn mount []
|
||||
(let [app (js/document.getElementById "app")
|
||||
board (make-board 30)
|
||||
input-listener
|
||||
(fn [e]
|
||||
(user-input (.toLowerCase(.-key e))))]
|
||||
(.appendChild app board)
|
||||
(js/console.log board)
|
||||
(reset! listener input-listener)
|
||||
(js/document.addEventListener
|
||||
"keydown"
|
||||
input-listener)))
|
||||
|
||||
(mount)
|
||||
|
||||
(js/console.log "mounted!")
|
||||
|
||||
(comment
|
||||
(do
|
||||
(def sim ["a" "a" "a" "a" "a" "enter"
|
||||
"e" "h" "o" "l" "o"
|
||||
"backspace" "k" "enter"
|
||||
"h" "e" "l" "l" "o" "enter"])
|
||||
(run! user-input sim)))
|
||||
|
|
@ -129,6 +129,7 @@
|
|||
<ul>
|
||||
<li><a href="tictactoe.html">Tic-tac-toe</a></li>
|
||||
<li><a href="bookmarklet.html">Bookmarklet</a></li>
|
||||
<li><a href="wordle.html">Worlde</a></li>
|
||||
<li>
|
||||
<a href="https://github.com/kloimhardt/babashka-scittle-guestbook">
|
||||
Babashka + scittle implementation of the Luminus guestbook.
|
||||
|
|
|
|||
39
resources/public/wordle.html
Normal file
39
resources/public/wordle.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Wordle!</title>
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<script src="js/scittle.js" type="application/javascript"></script>
|
||||
<script type="application/x-scittle" src="cljs/wordle.cljs"></script>
|
||||
<style type="text/css">
|
||||
#app {
|
||||
background-color: #121212;
|
||||
}
|
||||
#app .board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 60px);
|
||||
}
|
||||
#app .cell {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
border: 2px solid gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="board">Wordle by <a href="https://github.com/oxalorg/wordle-clojurescript">@oxalorg</a>.
|
||||
Play the game by typing letters. The source code is loaded from <a href="cljs/wordle.cljs">here</a>.
|
||||
</p>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,9 @@
|
|||
(fs/copy "resources/public/bookmarklet.html" "gh-pages"
|
||||
{:replace-existing true})
|
||||
|
||||
(fs/copy "resources/public/wordle.html" "gh-pages"
|
||||
{:replace-existing true})
|
||||
|
||||
(fs/copy "resources/public/disable_auto_eval.html" "gh-pages"
|
||||
{:replace-existing true})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue