Clojure-Developer · isyufu · Apr 9, 2024
diff --git a/project-work/.gitignore b/project-work/.gitignore
@@ -0,0 +1,15 @@
+/resources/public/js/compiled/**
+figwheel_server.log
+pom.xml
+*jar
+/lib/
+/classes/
+/out/
+/target/
+.lein-deps-sum
+.lein-repl-history
+.lein-plugins/
+.repl
+.nrepl-port
+.idea
+*.idea
diff --git a/project-work/README.md b/project-work/README.md
@@ -0,0 +1,22 @@
+# game-2048
+
+
+## Overview
+
+FIXME: Write a paragraph about the library/project and highlight its goals.
+
+## Setup
+    lein figwheel
+
+and open your browser at [localhost:3449](http://localhost:3449/). Click btn run or new game
+
+To clean all compiled files:
+
+    lein clean
+
+To create a production build run:
+
+    lein do clean, cljsbuild once min
+
+And open your browser in `resources/public/index.html`. You will not
+get live reloading, nor a REPL. 
diff --git a/project-work/project.clj b/project-work/project.clj
@@ -0,0 +1,45 @@
+(defproject game-2048 "0.1.0-SNAPSHOT"
+  :description "2048"
+
+  :min-lein-version "2.9.1"
+
+  :dependencies [[org.clojure/clojure "1.11.0"]
+                 [org.clojure/clojurescript "1.10.773"]
+                 [org.clojure/core.async  "0.4.500"]
+                 [reagent "1.0.0"]
+                 [reagent-utils "0.3.8"]
+                 ]
+
+  :plugins [[lein-figwheel "0.5.20"]
+            [lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]]
+
+  :source-paths ["src"]
+
+  :cljsbuild {:builds
+              [{:id "dev"
+                :source-paths ["src"]
+                :figwheel {:on-jsload "game-2048.core/on-js-reload"
+                           ;:open-urls ["http://localhost:3449/index.html"]
+                           }
+                :compiler {:main game-2048.core
+                           :asset-path "js/compiled/out"
+                           :output-to "resources/public/js/compiled/game_2048.js"
+                           :output-dir "resources/public/js/compiled/out"
+                           :source-map-timestamp true
+                           :preloads [devtools.preload]}}
+               {:id "min"
+                :source-paths ["src"]
+                :compiler {:output-to "resources/public/js/compiled/game_2048.js"
+                           :main game-2048.core
+                           :optimizations :advanced
+                           :pretty-print false}}]}
+
+  :figwheel {             :css-dirs ["resources/public/css"]             }
+
+  :profiles {:dev {:dependencies [[binaryage/devtools "1.0.0"]
+                                  [figwheel-sidecar "0.5.20"]]
+                   ;; need to add dev source path here to get user.clj loaded
+                   :source-paths ["src"]
+                   ;; need to add the compiled assets to the :clean-targets
+                   :clean-targets ^{:protect false} ["resources/public/js/compiled"
+                                                     :target-path]}})
diff --git a/project-work/resources/public/css/fonts/ClearSancBold.woff b/project-work/resources/public/css/fonts/ClearSancBold.woff
diff --git a/project-work/resources/public/css/fonts/ClearSansRegular.woff b/project-work/resources/public/css/fonts/ClearSansRegular.woff
diff --git a/project-work/resources/public/css/fonts/clear-sans.css b/project-work/resources/public/css/fonts/clear-sans.css
@@ -0,0 +1,32 @@
+/*@font-face {*/
+/*  font-family: "Clear Sans";*/
+/*  src: url("ClearSans-Light-webfont.eot");*/
+/*  src: url("ClearSans-Light-webfont.eot?#iefix") format("embedded-opentype"),*/
+/*    url("ClearSans-Light-webfont.svg#clear_sans_lightregular") format("svg"),*/
+/*    url("ClearSans-Light-webfont.woff") format("woff");*/
+/*  font-weight: 200;*/
+/*  font-style: normal;*/
+/*  font-display: swap;*/
+/*}*/
+
+@font-face {
+  font-family: "Clear Sans";
+  /*src: url("ClearSans-Regular-webfont.eot");*/
+  /*src: url("ClearSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),*/
+    /*url("ClearSans-Regular-webfont.svg#clear_sansregular") format("svg"),*/
+  src: url("ClearSansRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Clear Sans";
+  /*src: url("ClearSans-Bold-webfont.eot");*/
+  /*src: url("ClearSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),*/
+  /*  url("ClearSans-Bold-webfont.svg#clear_sansbold") format("svg"),*/
+  url("ClearSancBold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/project-work/resources/public/css/style.css b/project-work/resources/public/css/style.css
@@ -0,0 +1,240 @@
+/* some style */
+
+
+.grid-container {
+  position: absolute;
+  z-index: 1;
+}
+
+.grid-row {
+  margin-bottom: 15px;
+}
+.grid-row:last-child {
+  margin-bottom: 0;
+}
+.grid-row:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.grid-cell {
+  width: 106.25px;
+  height: 106.25px;
+  margin-right: 15px;
+  float: left;
+  border-radius: 3px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 106.25px;
+  background: rgba(238, 228, 218, 0.35);
+}
+.grid-cell:last-child {
+  margin-right: 0;
+}
+
+
+.tile-container {
+  position: absolute;
+  z-index: 2;
+}
+
+.tile,
+.tile .tile-inner {
+  width: 107px;
+  height: 107px;
+  line-height: 107px;
+}
+.tile.tile-position-1-1 {
+  -webkit-transform: translate(0px, 0px);
+  -moz-transform: translate(0px, 0px);
+  -ms-transform: translate(0px, 0px);
+  transform: translate(0px, 0px);
+}
+.tile.tile-position-1-2 {
+  -webkit-transform: translate(0px, 121px);
+  -moz-transform: translate(0px, 121px);
+  -ms-transform: translate(0px, 121px);
+  transform: translate(0px, 121px);
+}
+.tile.tile-position-1-3 {
+  -webkit-transform: translate(0px, 242px);
+  -moz-transform: translate(0px, 242px);
+  -ms-transform: translate(0px, 242px);
+  transform: translate(0px, 242px);
+}
+.tile.tile-position-1-4 {
+  -webkit-transform: translate(0px, 363px);
+  -moz-transform: translate(0px, 363px);
+  -ms-transform: translate(0px, 363px);
+  transform: translate(0px, 363px);
+}
+.tile.tile-position-2-1 {
+  -webkit-transform: translate(121px, 0px);
+  -moz-transform: translate(121px, 0px);
+  -ms-transform: translate(121px, 0px);
+  transform: translate(121px, 0px);
+}
+.tile.tile-position-2-2 {
+  -webkit-transform: translate(121px, 121px);
+  -moz-transform: translate(121px, 121px);
+  -ms-transform: translate(121px, 121px);
+  transform: translate(121px, 121px);
+}
+.tile.tile-position-2-3 {
+  -webkit-transform: translate(121px, 242px);
+  -moz-transform: translate(121px, 242px);
+  -ms-transform: translate(121px, 242px);
+  transform: translate(121px, 242px);
+}
+.tile.tile-position-2-4 {
+  -webkit-transform: translate(121px, 363px);
+  -moz-transform: translate(121px, 363px);
+  -ms-transform: translate(121px, 363px);
+  transform: translate(121px, 363px);
+}
+.tile.tile-position-3-1 {
+  -webkit-transform: translate(242px, 0px);
+  -moz-transform: translate(242px, 0px);
+  -ms-transform: translate(242px, 0px);
+  transform: translate(242px, 0px);
+}
+.tile.tile-position-3-2 {
+  -webkit-transform: translate(242px, 121px);
+  -moz-transform: translate(242px, 121px);
+  -ms-transform: translate(242px, 121px);
+  transform: translate(242px, 121px);
+}
+.tile.tile-position-3-3 {
+  -webkit-transform: translate(242px, 242px);
+  -moz-transform: translate(242px, 242px);
+  -ms-transform: translate(242px, 242px);
+  transform: translate(242px, 242px);
+}
+.tile.tile-position-3-4 {
+  -webkit-transform: translate(242px, 363px);
+  -moz-transform: translate(242px, 363px);
+  -ms-transform: translate(242px, 363px);
+  transform: translate(242px, 363px);
+}
+.tile.tile-position-4-1 {
+  -webkit-transform: translate(363px, 0px);
+  -moz-transform: translate(363px, 0px);
+  -ms-transform: translate(363px, 0px);
+  transform: translate(363px, 0px);
+}
+.tile.tile-position-4-2 {
+  -webkit-transform: translate(363px, 121px);
+  -moz-transform: translate(363px, 121px);
+  -ms-transform: translate(363px, 121px);
+  transform: translate(363px, 121px);
+}
+.tile.tile-position-4-3 {
+  -webkit-transform: translate(363px, 242px);
+  -moz-transform: translate(363px, 242px);
+  -ms-transform: translate(363px, 242px);
+  transform: translate(363px, 242px);
+}
+.tile.tile-position-4-4 {
+  -webkit-transform: translate(363px, 363px);
+  -moz-transform: translate(363px, 363px);
+  -ms-transform: translate(363px, 363px);
+  transform: translate(363px, 363px);
+}
+
+.tile {
+  position: absolute;
+  /*-webkit-transition: 100ms ease-in-out;*/
+  /*-moz-transition: 100ms ease-in-out;*/
+  /*transition: 100ms ease-in-out;*/
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  transition-property: transform;
+}
+.tile .tile-inner {
+  border-radius: 3px;
+  background: #eee4da;
+  text-align: center;
+  font-weight: bold;
+  z-index: 10;
+  font-size: 55px;
+}
+.tile.tile-2 .tile-inner {
+  background: #eee4da;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-4 .tile-inner {
+  background: #eee1c9;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
+}
+.tile.tile-8 .tile-inner {
+  color: #f9f6f2;
+  background: #f3b27a;
+}
+.tile.tile-16 .tile-inner {
+  color: #f9f6f2;
+  background: #f69664;
+}
+.tile.tile-32 .tile-inner {
+  color: #f9f6f2;
+  background: #f77c5f;
+}
+.tile.tile-64 .tile-inner {
+  color: #f9f6f2;
+  background: #f75f3b;
+}
+.tile.tile-128 .tile-inner {
+  color: #f9f6f2;
+  background: #edd073;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2380952381), inset 0 0 0 1px rgba(255, 255, 255, 0.1428571429);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-128 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-256 .tile-inner {
+  color: #f9f6f2;
+  background: #edcc62;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3174603175), inset 0 0 0 1px rgba(255, 255, 255, 0.1904761905);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-256 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-512 .tile-inner {
+  color: #f9f6f2;
+  background: #edc950;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.3968253968), inset 0 0 0 1px rgba(255, 255, 255, 0.2380952381);
+  font-size: 45px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-512 .tile-inner {
+    font-size: 25px;
+  }
+}
+.tile.tile-1024 .tile-inner {
+  color: #f9f6f2;
+  background: #edc53f;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.4761904762), inset 0 0 0 1px rgba(255, 255, 255, 0.2857142857);
+  font-size: 35px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-1024 .tile-inner {
+    font-size: 15px;
+  }
+}
+.tile.tile-2048 .tile-inner {
+  color: #f9f6f2;
+  background: #edc22e;
+  box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.5555555556), inset 0 0 0 1px rgba(255, 255, 255, 0.3333333333);
+  font-size: 35px;
+}
+@media screen and (max-width: 520px) {
+  .tile.tile-2048 .tile-inner {
+    font-size: 15px;
+  }
+}
diff --git a/project-work/resources/public/favicon.ico b/project-work/resources/public/favicon.ico
diff --git a/project-work/resources/public/index.html b/project-work/resources/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="css/style.css" rel="stylesheet" type="text/css">
+    <link href="css/fonts/clear-sans.css" rel="stylesheet" type="text/css">
+    <link href="css/fonts/clear-sans.css" rel="stylesheet" type="">
+    <link rel="icon" href="favicon.ico">
+  </head>
+  <body id="body">
+    <div id="app" style="width: 700px; height: 700px">
+    </div>
+    <script src="js/compiled/game_2048.js" type="text/javascript"></script>
+  </body>
+</html>