Skip to content

Instantly share code, notes, and snippets.

@krainboltgreene

krainboltgreene/cycle.js

Created June 13, 2017 01:43
Show Gist options
  • Save krainboltgreene/61454f26cd623b488fdc602f5ee6106d to your computer and use it in GitHub Desktop.
Save krainboltgreene/61454f26cd623b488fdc602f5ee6106d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cycle.js
import xs from "xstream"
import view from "@deushack/view"
const state$ = xs.of({
resources: {
programs: {
overload: {
id: "overload",
type: "programs",
attributes: {
name: "Overload",
uses: 3,
icon: "thermometer",
description: "Slows down all opperations on this node.",
},
},
handshake: {
id: "handshake",
type: "programs",
attributes: {
name: "Handshake",
uses: 2,
icon: "handshake-o",
description: "Trigger this node's special ability",
},
},
},
bridges: {
bridge1: {
id: "bridge1",
type: "bridges",
attributes: {
from: "node1",
to: "node2",
},
},
bridge2: {
id: "bridge2",
type: "bridges",
attributes: {
from: "node2",
to: "node3",
},
},
},
servers: {
node1: {
id: "node1",
type: "servers",
attributes: {
role: "security",
icon: "warning",
level: 4,
},
},
node2: {
id: "node2",
type: "servers",
attributes: {
role: "storage",
icon: "database",
level: 4,
},
},
node3: {
id: "node3",
type: "servers",
attributes: {
role: "home",
icon: "server",
level: 1,
},
},
},
},
ephemeral: {},
})
export default function cycle () {
return {DOM: state$.map(view)}
}
Raw
drivers.js
import {makeDOMDriver} from "@cycle/dom"
export default {DOM: makeDOMDriver("body")}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Deus Hack</title>
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/>
<link rel="apple-touch-icon-precomposed" href="/apple-icon-precomposed.png"/>
<link rel="icon" kind="image/png" sizes="192x192" href="/android-icon-192x192.png"/>
<link rel="icon" kind="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" kind="image/png" sizes="96x96" href="/favicon-96x96.png"/>
<link rel="icon" kind="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="icon" href="/favicon.ico"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Handlee|Open+Sans"/>
<link rel="stylesheet" href="/index.css"/>
<link rel="copyright" href="/copyright.txt"/>
<link rel="author" href="/humans.txt"/>
<meta name="robots" content="index,follow"/>
<meta type="environment" name="NODE_ENV" content="development"/>
</head>
<body style="background-color: black;">
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe>
</noscript>
<script async="" type="text/javascript" src="babel-helpers.js"></script>
<script async="" type="text/javascript" src="index.js"></script>
</body>
</html>
Raw
index.js
import "babel-polyfill"
import {run} from "@cycle/run"
import environment from "./environment"
import cycle from "./cycle"
import drivers from "./drivers"
window.env = environment(
[...document.querySelectorAll("meta[type='environment']")]
)
run(cycle, drivers)
Raw
view.js
import {html} from "snabbdom-helpers"
import {head} from "snabbdom-helpers"
import {body} from "snabbdom-helpers"
import {main} from "snabbdom-helpers"
import {header} from "snabbdom-helpers"
import {h1} from "snabbdom-helpers"
import {h2} from "snabbdom-helpers"
import {i} from "snabbdom-helpers"
import {section} from "snabbdom-helpers"
import mapValues from "@unction/mapvalues"
import {values} from "ramda"
export default function view (state) {
if (global.window) {
return main({
inner: [
section({
inner: [
header({
inner: [
h1({inner: "Visuals"}),
],
}),
section({
inner: mapValues(
(program) => {
return section({
inner: [
h2({inner: i({selector: program.attributes.icon})}),
h2({inner: `${program.attributes.name} (${program.attributes.role})`}),
],
})
}
)(
values(state.resources.servers)
),
}),
],
}),
section({
inner: [
header({
inner: [
h1({inner: "Programs"}),
],
}),
section({
inner: mapValues(
(program) => {
return section({
inner: [
h2({inner: i({selector: program.attributes.icon})}),
h2({inner: `${program.attributes.name} (${program.attributes.uses})`}),
],
})
}
)(
values(state.resources.programs)
),
}),
],
}),
],
})
}
return html({
inner: [
head(),
body({style: {"background-color": "black"}}),
],
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment