Commit 86d4dc32 authored by Davide Taviani's avatar Davide Taviani

boards with responsive cell size w.r.t. board size

parent db5098c1
.board {
border: 1px solid #DDD;
margin: 50px;
width: 400px;
}
.row {
margin-bottom: -7px;
}
.cell {
display: inline-block;
margin-right: -1px;
}
.create-board {
border: 0;
height: 300px;
width: 300px;
}
.play-board, .preview-board {
border: 0;
width: 500px;
min-width: 500px;
height: 500px;
min-height: 500px;
}
.preview-board .cell {
border: 1px solid #DDD;
}
.create-board .cell {
border: 1px solid #DDD;
//margin: 0px;
......@@ -52,8 +64,9 @@ justify-content: center;
.link-block {
display: inline-block;
width: 50px;
height: 50px;
height: 100%;
border: 1px solid #DDD;
}
.fill {background-color: black;}
\ No newline at end of file
.fill {
background-color: black;
}
\ No newline at end of file
......@@ -5,10 +5,10 @@
[harmony.board :as b]
[ajax.core :as ajax]))
(defonce app-state (r/atom {:size 2
(defonce app-state (r/atom {:size 2
:column-links [0 1]
:row-links [0 0]
:pattern [1 1 1 1]}))
:row-links [0 0]
:pattern [1 1 1 1]}))
(defonce main-topic (f/topic (f/log)))
......@@ -17,11 +17,11 @@
(defn save! []
(ajax/POST "/create-level"
{:params @app-state
{:params @app-state
:error-handler (fn [e] (js/alert e))
:handler (fn [resp] (when (:saved? resp)
(js/alert "Level saved")
(.replace (.-location js/document) "/")))}))
:handler (fn [resp] (when (:saved? resp)
(js/alert "Level saved")
(.replace (.-location js/document) "/")))}))
(defn size-chooser []
[:div {:class "field is-horizontal"}
......@@ -30,81 +30,84 @@
[:div {:class "field-body"}
[:div {:class "field"}
[:p {:class "control"}
[:input {:class "input"
:type "Number"
:min 1
:value (:size @app-state)
[:input {:class "input"
:type "Number"
:min 1
:value (:size @app-state)
:on-change #(f/send! main-topic [:change-size (-> % .-target .-value js/parseInt)])}]]]
[:div {:class "field"}
[:a {:class "button is-primary"
[:a {:class "button is-primary"
:on-click save!}
"Save"]]]])
(defmethod handle-command :change-size
[state [_cmd value]]
{:size value
{:size value
:column-links (into [] (repeat (* value (dec value)) 1))
:row-links (into [] (repeat (* value (dec value)) 1))})
:row-links (into [] (repeat (* value (dec value)) 1))})
(defn level-creator []
(let [board (->> @app-state b/create-board b/solve)
{:keys [size cells]} board]
[:div
[:div {:class "board create-board"}
[:div {:class "board preview-board"}
(doall
(map-indexed
(fn [i row]
[:div {:class "row"
:key i}
:style {:height (str (/ 100 size) "%")}
:key i}
(doall
(map-indexed
(fn [j c]
(let [index (+ (* i size) j)
tile-name (name (:tile c))]
[:img {:key (str i j)
:class (str "cell rotate-" (get-in cells [index :status]))
:src (str "/tiles/" tile-name ".svg")
:width "100px;" #_(str (Math/floor (/ 100 size)) "%")
:height "100px;" #_(str (Math/floor (/ 100 size)) "%")
[:img {:key (str i j)
:class (str "cell rotate-" (get-in cells [index :status]))
:src (str "/tiles/" tile-name ".svg")
:width (str (/ 100 size) "%")
:on-click #(f/send! main-topic [:toggle-cell index])}]))
row))])
(partition size cells)))]]))
(defn column-link-board []
(let [{:keys [column-links size]} @app-state
row-count (dec size)
col-count size]
[:div {:class "create-board"}
(for [i (range row-count)]
[:div {:key i
:class "row"
:style {:height (str (/ 100 row-count) "%")}}
(for [j (range col-count)]
(let [index (+ (* i col-count) j)]
[:div {:key (str "col-" i j)
:on-click #(f/send! main-topic [:toggle-column-link index])
:style {:width (str (/ 100 col-count) "%")}
:class (str "link-block"
(when (= 1 (get column-links index))
" fill"))}]))])]))
(defn row-link-board []
(let [{:keys [size row-links]} @app-state]
[:div {:class "board create-board"}
(for [i (range size)]
[:div {:class "row"
:key i}
(for [j (range (dec size))]
(let [index (+ (* i (dec size)) j)]
[:div {:key (str "row-" i j)
(let [{:keys [row-links size]} @app-state
row-count size
col-count (dec size)]
[:div {:class "create-board"}
(for [i (range row-count)]
[:div {:key i
:class "row"
:style {:height (str (/ 100 row-count) "%")}}
(for [j (range col-count)]
(let [index (+ (* i col-count) j)]
[:div {:key (str "row-" i j)
:on-click #(f/send! main-topic [:toggle-row-link index])
:style {:width (str (/ 100 col-count) "%")}
:class (str "link-block"
(when (= 1 (get row-links index))
" fill"))}]))])]))
:class (str "link-block"
(when (= 1 (get row-links index))
" fill"))}]))
])])
)
(defn column-link-board []
(let [{:keys [size column-links]} @app-state]
[:div {:class "board create-board"}
(for [i (range (dec size))]
[:div {:key i
:class "row"}
(for [j (range size)]
(let [index (+ (* i size) j)]
[:div {:key (str "col-" i j)
:on-click #(f/send! main-topic [:toggle-column-link index])
:class (str "link-block"
(when (= 1 (get column-links index))
" fill"))}]))
])])
)
(defmethod handle-command :toggle-column-link
[state [_cmd index]]
......@@ -149,14 +152,17 @@
[size-chooser]]]
[:div {:class "columns"}
[:div {:class "column is-half is-offset-one-quarter has-centered-stuff"}
[:button {:class "button btn-create is-info"
[:button {:class "button btn-create is-info"
:on-click #(f/send! main-topic [:clear-board])} "Clear"]
[:button {:class "button btn-create is-info"
[:button {:class "button btn-create is-info"
:on-click #(f/send! main-topic [:fill-board])} "Fill"]]]
[:div {:class "columns"}
[:div {:class "column is-one-quarter"}
[:h1 {:class "subtitle"} "Row links"]
[row-link-board]]
[:div {:class "column is-one-quarter"}
[:h1 {:class "subtitle"} "Column links"]
[column-link-board]]
[level-creator]
[:div {:class "column is-half"}
[level-creator]]
]]))
......@@ -15,28 +15,29 @@
(let [{:keys [size cells]} @game-state]
[:div
[:div {:class "board-controls"}
[:div {:class "board"}
[:div {:class "play-board"}
(doall
(map-indexed
(fn [i row]
[:div {:class "row"
:key i}
:style {:height (str (/ 100 size) "%")}
:key i}
(doall
(map-indexed
(fn [j c]
(let [index (+ (* i size) j)]
[:img {:key (str i j)
:class (str "cell rotate-" (get-in cells [index :status]))
:src (str "/tiles/" (name (:tile c)) ".svg")
:width (str (Math/floor (/ 100 size)) "%")
:height (str (Math/floor (/ 100 size)) "%")
[:img {:key (str i j)
:class (str "cell rotate-" (get-in cells [index :status]))
:src (str "/tiles/" (name (:tile c)) ".svg")
:width (str (/ 100 size) "%")
:on-click #(f/send! main-topic [:rotate-tile index])}]))
row))])
(partition size cells)))]]
[:div {:class "columns"}
[:div {:class "column is-half is-offset-one-quarter"}
[:div {:class "board-controls"}
[:button {:class "button is-primary"
[:button {:class "button is-primary"
:on-click #(f/send! main-topic [:reset-game])} "Reset"]]]]]))
......@@ -81,9 +82,9 @@
[:div
[notification]
[board]
#_[:iframe {:width "1px"
:height "1px"
:scrolling "no"
:frameBorder "no"
:src "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/58173187&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"}]]))
#_[:iframe {:width "1px"
:height "1px"
:scrolling "no"
:frameBorder "no"
:src "https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/58173187&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"}]]))
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment