Giter Club home page Giter Club logo

cljs-fake-news's Introduction

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

Directory structure

  • /: project config files
  • dev/: source files compiled only with the dev profile
  • 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)
  • 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?

cljs-fake-news's People

Contributors

aarandela avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.