Play here

https://cljs-fake-news.netlify.app/

cljs-fake-news

A re-frame application based on an old project when I first started out. Play the old version

I wanted to rejuvenate this game in ClojureScript for more practice and add more features such as:

• Time Limit
• Difficulty
• Show the articles of the news
• Improve game logic
• Possibly multiplayer and/or high score table
• Clean up the UI

I've always come into projects when they are built, but never really started from the ground up. I also wanted to get more practice in starting an application in Clojure/ClojureScript land.

Getting Started

npm install
npm run watch

Project Overview

• Architecture: Single Page Application (SPA)
• Languages
  • Front end is ClojureScript with (re-frame)
• Dependencies
  • UI framework: re-frame (docs, FAQs) -> Reagent -> React
• Build tools
  • CLJS compilation, dependency management, REPL, & hot reload: shadow-cljs
• Development tools
  • Debugging: CLJS DevTools, re-frame-10x

Directory structure

• /: project config files
• dev/: source files compiled only with the dev profile
  • user.cljs: symbols for use during development in the ClojureScript REPL
• resources/public/: SPA root directory; dev / prod profile depends on the most recent build
  • index.html: SPA home page
    • Dynamic SPA content rendered in the following div:

      <div id="app"></div>

    • Customizable; add headers, footers, links to other scripts and styles, etc.
  • Generated directories and files
    • Created on build with either the dev or prod profile
    • js/compiled/: compiled CLJS (shadow-cljs)
      • Not tracked in source control; see .gitignore
• src/cljs_fake_news/: SPA source files (ClojureScript, re-frame)
  • core.cljs: contains the SPA entry point, init

Environment Setup

1. Install JDK 8 or later (Java Development Kit)
2. Install Node.js (JavaScript runtime environment) which should include NPM or if your Node.js installation does not include NPM also install it.
3. Clone this repo and open a terminal in the cljs-fake-news project root directory
4. Run npm install && npm start
5. HTTP server available at http://localhost:8281
6. nREPL server will be on port 8777

Development

Running the App

Start a temporary local web server, build the app with the dev profile, and serve the app, browser test runner and karma test runner with hot reload:

npm install
npx shadow-cljs watch app

Please be patient; it may take over 20 seconds to see any output, and over 40 seconds to complete.

When [:app] Build completed appears in the output, browse to http://localhost:8280/.

shadow-cljs will automatically push ClojureScript code changes to your browser on save. To prevent a few common issues, see Hot Reload in ClojureScript: Things to avoid.

Opening the app in your browser starts a ClojureScript browser REPL, to which you may now connect.

TODO:

• Stop timer when game ends
• Add Past News section
• lives section
• show time
• show past news component in end game page
• ajax calls concurrent
• fix modal
• goals
• gifs?
• WebRTC?