\r\n \r\n 
\r\n \r\n
\r\n \r\n
\r\n \r\n }\r\n \r\n )\r\n }, [\r\n props.chosenId, props.card.wayOut, props.card.inView, props.card.hidden, props.card.description,\r\n props.card.id, props.card.imageUrl, props.card.title, props.card.url]);\r\n}\r\n\r\nexport default PostCard;","export default function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}","import defineProperty from \"./defineProperty.js\";\n\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nexport default function _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n\n return target;\n}","export async function fetchPostAsync\r\n
\r\n {props.card.title!}
\r\n{props.card.description}
\r\n\r\n l\r\n o\r\n a\r\n d\r\n i\r\n n\r\n g\r\n .\r\n .\r\n .\r\n
\r\n }\r\n\r\n return (\r\n \r\n {\r\n cards?.map(\r\n card =>\r\n
\r\n );\r\n}\r\n\r\nexport default HomeIndex;","import React from 'react';\r\n\r\n\r\nconst AboutIndex = () => {\r\n\r\n return (\r\n <>\r\n About
\r\n \r\n );\r\n}\r\n\r\nexport default AboutIndex;","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { library } from '@fortawesome/fontawesome-svg-core';\r\nimport { fas } from '@fortawesome/free-solid-svg-icons';\r\nimport { GlobalContext } from \"components/GlobalContext\";\r\nimport { PostType } from \"models/IPost\";\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nlibrary.add(fas);\r\n\r\nconst Menu = () => {\r\n const globalContext = useContext(GlobalContext);\r\n const location = useLocation();\r\n const [hide, setHide] = useState(false);\r\n\r\n useEffect(() => {\r\n if (location.pathname !== \"/\") {\r\n setHide(true);\r\n }\r\n }, [location.pathname]);\r\n\r\n const changeFilter = (type?: PostType) => {\r\n if (globalContext.postFilter === type) {\r\n globalContext.setPostFilter(undefined);\r\n }\r\n else {\r\n globalContext.setPostFilter(type);\r\n }\r\n }\r\n\r\n const youtubeSubs =\r\n globalContext.externalData && globalContext.externalData.length > 1 ?\r\n parseInt(globalContext.externalData[1].data.split(\",\")[0].split(\":\")[1]).toLocaleString() :\r\n null;\r\n\r\n const youtubeViews =\r\n globalContext.externalData && globalContext.externalData.length > 1 ?\r\n parseInt(globalContext.externalData[1].data.split(\",\")[1].split(\":\")[1]).toLocaleString() :\r\n null;\r\n\r\n const githubFollowers =\r\n globalContext.externalData && globalContext.externalData.length > 1 ?\r\n parseInt(globalContext.externalData[0].data.split(\",\")[2].split(\":\")[1]).toLocaleString() :\r\n null;\r\n\r\n const githubRepos =\r\n globalContext.externalData && globalContext.externalData.length > 1 ?\r\n parseInt(globalContext.externalData[0].data.split(\",\")[0].split(\":\")[1]).toLocaleString() :\r\n null;\r\n\r\n if (hide) {\r\n return (\r\n GO BACK\r\n );\r\n }\r\n\r\n return (\r\n\r\n
);\r\n}\r\n\r\nexport default Menu;","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n var target = objectWithoutPropertiesLoose(source, excluded);\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}","import * as React from 'react';\nimport { useContext, useMemo } from 'react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst ThemeContext = /*#__PURE__*/React.createContext({\n prefixes: {}\n});\nconst {\n Consumer,\n Provider\n} = ThemeContext;\n\nfunction ThemeProvider({\n prefixes = {},\n dir,\n children\n}) {\n const contextValue = useMemo(() => ({\n prefixes: { ...prefixes\n },\n dir\n }), [prefixes, dir]);\n return /*#__PURE__*/_jsx(Provider, {\n value: contextValue,\n children: children\n });\n}\n\nexport function useBootstrapPrefix(prefix, defaultPrefix) {\n const {\n prefixes\n } = useContext(ThemeContext);\n return prefix || prefixes[defaultPrefix] || defaultPrefix;\n}\nexport function useIsRTL() {\n const {\n dir\n } = useContext(ThemeContext);\n return dir === 'rtl';\n}\n\nfunction createBootstrapComponent(Component, opts) {\n if (typeof opts === 'string') opts = {\n prefix: opts\n };\n const isClassy = Component.prototype && Component.prototype.isReactComponent; // If it's a functional component make sure we don't break it with a ref\n\n const {\n prefix,\n forwardRefAs = isClassy ? 'ref' : 'innerRef'\n } = opts;\n const Wrapped = /*#__PURE__*/React.forwardRef(({ ...props\n }, ref) => {\n props[forwardRefAs] = ref;\n const bsPrefix = useBootstrapPrefix(props.bsPrefix, prefix);\n return /*#__PURE__*/_jsx(Component, { ...props,\n bsPrefix: bsPrefix\n });\n });\n Wrapped.displayName = `Bootstrap(${Component.displayName || Component.name})`;\n return Wrapped;\n}\n\nexport { createBootstrapComponent, Consumer as ThemeConsumer };\nexport default ThemeProvider;","import classNames from 'classnames';\nimport * as React from 'react';\nimport { useBootstrapPrefix } from './ThemeProvider';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultProps = {\n fluid: false\n};\nconst Container = /*#__PURE__*/React.forwardRef(({\n bsPrefix,\n fluid,\n // Need to define the default \"as\" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595\n as: Component = 'div',\n className,\n ...props\n}, ref) => {\n const prefix = useBootstrapPrefix(bsPrefix, 'container');\n const suffix = typeof fluid === 'string' ? `-${fluid}` : '-fluid';\n return /*#__PURE__*/_jsx(Component, {\n ref: ref,\n ...props,\n className: classNames(className, fluid ? `${prefix}${suffix}` : prefix)\n });\n});\nContainer.displayName = 'Container';\nContainer.defaultProps = defaultProps;\nexport default Container;","import React, { useState, useContext, useEffect } from \"react\";\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { library } from '@fortawesome/fontawesome-svg-core';\r\nimport { fas } from '@fortawesome/free-solid-svg-icons';\r\nimport { GlobalContext } from \"components/GlobalContext\";\r\nimport { PostType } from \"models/IPost\";\r\nimport { useLocation } from \"react-router-dom\";\r\n\r\nlibrary.add(fas);\r\n\r\nconst SCROLL_DEBOUNCE_TIME = 10;\r\nconst VISIBLE_SCROLL_HEIGHT = 240;\r\n\r\nconst BottomMenu = () => {\r\n const [inView, setInView] = useState(false);\r\n const globalContext = useContext(GlobalContext);\r\n const [hide, setHide] = useState(false);\r\n let location = useLocation();\r\n\r\n useEffect(() => {\r\n if (location.pathname !== \"/\") {\r\n setHide(true);\r\n }\r\n }, [location.pathname]);\r\n\r\n useEffect(() => {\r\n let debounceId = 0;\r\n\r\n const calcVisibility = () => {\r\n if (window.scrollY > VISIBLE_SCROLL_HEIGHT) {\r\n if (!inView) {\r\n setInView(true);\r\n }\r\n }\r\n else {\r\n if (inView) {\r\n setInView(false);\r\n }\r\n }\r\n }\r\n\r\n const scrollHandler = () => {\r\n clearTimeout(debounceId);\r\n debounceId = window.setTimeout(calcVisibility, SCROLL_DEBOUNCE_TIME);\r\n };\r\n\r\n window.addEventListener(\"scroll\", scrollHandler);\r\n window.addEventListener(\"resize\", scrollHandler);\r\n scrollHandler();\r\n return () => {\r\n window.removeEventListener(\"scroll\", scrollHandler);\r\n window.removeEventListener(\"resize\", scrollHandler);\r\n }\r\n });\r\n\r\n const changeFilter = (type?: PostType) => {\r\n if (globalContext.postFilter === type) {\r\n globalContext.setPostFilter(undefined);\r\n\r\n } else {\r\n globalContext.setPostFilter(type);\r\n }\r\n }\r\n\r\n if (hide) {\r\n return (<>);\r\n }\r\n\r\n return (\r\n \r\n ![\"\"](\"/images/aboutphoto.jpg\")
\r\n
\r\n \r\n \r\n
\r\n\r\n {\r\n youtubeSubs &&\r\n <>\r\nYoutube Subs: {youtubeSubs} Views: {youtubeViews}
\r\n \r\n }\r\n {\r\n githubFollowers &&\r\n <>\r\nGithub Follows: {githubFollowers} Repos: {githubRepos}
\r\n \r\n }\r\n\r\n
\r\n Hi, I'm Jeff!
\r\n I'm an enthusiastic software engineer, inventor and artist.\r\n This is a portfolio of some of my software, projects, articles, photography, music, and videos\r\n\r\n {\r\n youtubeSubs &&\r\n <>\r\n
\r\n \r\n }\r\n {\r\n githubFollowers &&\r\n <>\r\n
\r\n \r\n }\r\n\r\n
\r\n Filter:\r\n { changeFilter(PostType.Music) }}> { changeFilter(PostType.Writing) }}> { changeFilter(PostType.Video) }}> { changeFilter(PostType.Photo) }}> { changeFilter(PostType.Code) }}>
\r\n \r\n Filter: \r\n { changeFilter(PostType.Music) }}> { changeFilter(PostType.Writing) }}> { changeFilter(PostType.Video) }}> { changeFilter(PostType.Photo) }}> { changeFilter(PostType.Code) }}>{star.spaces}{star.graphic}\r\n )\r\n )}\r\n \r\n );\r\n}\r\n\r\nexport default StarField;","/* eslint-disable */\r\nvar DemoFramework = function (initialSettings) {\r\n console.log(\"AGAIN\");\r\n\r\n var thisRef = this;\r\n\r\n thisRef.FPS = 60;\r\n thisRef.waitForAnimationFrame = true;\r\n thisRef.ctx = undefined;\r\n thisRef.canvas = undefined;\r\n thisRef.isMouseDown = false;\r\n thisRef.isSecondaryMouseDown = false;\r\n thisRef.now = undefined;\r\n thisRef.then = Date.now();\r\n thisRef.interval = 1000 / thisRef.FPS;\r\n thisRef.delta = 0;\r\n thisRef.lastX = undefined;\r\n thisRef.lastY = undefined;\r\n thisRef.canvasOffsetX = undefined;\r\n thisRef.canvasOffsetY = undefined;\r\n thisRef.stage = undefined;\r\n thisRef.passParams = {};\r\n thisRef.updateIntervalID = 0;\r\n thisRef.lastTime = 0;\r\n thisRef.date = undefined;\r\n thisRef.elapsed = 0;\r\n\r\n // ThreeJS Stuff\r\n thisRef.scene = undefined;\r\n thisRef.camera = undefined;\r\n thisRef.controls = undefined;\r\n thisRef.renderer = undefined;\r\n\r\n thisRef.initialize = function () {\r\n\r\n if (initialSettings.type === \"threejs\" && window.hasOwnProperty(\"THREE\")) {\r\n\r\n thisRef.scene = new THREE.Scene();\r\n thisRef.camera = new THREE.PerspectiveCamera(75, initialSettings.width / initialSettings.height, 0.1, 1000);\r\n thisRef.renderer = new THREE.WebGLRenderer();\r\n renderer.setPixelRatio(window.devicePixelRatio);\r\n renderer.setSize(initialSettings.width, initialSettings.height);\r\n\r\n thisRef.controls = new THREE.TrackballControls(camera);\r\n thisRef.controls.rotateSpeed = 1.0;\r\n thisRef.controls.zoomSpeed = 1.2;\r\n thisRef.controls.panSpeed = 0.8;\r\n thisRef.controls.noZoom = false;\r\n thisRef.controls.noPan = false;\r\n thisRef.controls.staticMoving = true;\r\n thisRef.controls.dynamicDampingFactor = 0.3;\r\n\r\n thisRef.stage = thisRef.renderer.domElement;\r\n document.body.appendChild(thisRef.stage);\r\n\r\n thisRef.passParams = {\r\n scene: thisRef.scene,\r\n camera: thisRef.camera,\r\n renderer: thisRef.renderer,\r\n elapsed: 0,\r\n delta: 0\r\n };\r\n\r\n } else if (initialSettings.type === \"pixijs\" && window.hasOwnProperty(\"pixijs\")) {\r\n\r\n let app = new PIXI.Application({\r\n width: initialSettings.width,\r\n height: initialSettings.height,\r\n antialias: true,\r\n transparent: false,\r\n resolution: 1\r\n }\r\n );\r\n\r\n app.renderer.autoResize = true;\r\n document.body.appendChild(app.view);\r\n thisRef.stage = app.view;\r\n\r\n thisRef.passParams = {\r\n app: app,\r\n stage: app.stage,\r\n elapsed: 0,\r\n delta: 0\r\n };\r\n\r\n } else if (initialSettings.type === \"none\") {\r\n\r\n thisRef.stage = document.querySelector(\"body\");\r\n thisRef.passParams = {\r\n elapsed: 0,\r\n delta: 0\r\n };\r\n\r\n } else {\r\n\r\n thisRef.canvas =\r\n document\r\n .getElementById(\r\n \"canvas\");\r\n\r\n thisRef.canvas.width = initialSettings.width;\r\n thisRef.canvas.height = initialSettings.height;\r\n thisRef.canvasOffsetX = thisRef.canvas.offsetLeft;\r\n thisRef.canvasOffsetY = thisRef.canvas.offsetTop;\r\n thisRef.ctx = canvas.getContext(\"2d\");\r\n\r\n thisRef.stage = thisRef.canvas;\r\n\r\n thisRef.passParams = {\r\n canvas: thisRef.canvas,\r\n ctx: thisRef.ctx,\r\n elapsed: 0,\r\n delta: 0\r\n };\r\n }\r\n\r\n if (!initialSettings.allowContextMenu) {\r\n\r\n document.oncontextmenu = function (e) {\r\n\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n }\r\n\r\n if (('ontouchstart' in window || 'onmsgesturechange' in window)) {\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"touchstart\",\r\n function (e) { thisRef.touchStartHanlder(e); },\r\n false);\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"touchmove\",\r\n function (e) { thisRef.touchMoveHanlder(e); },\r\n false);\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"touchend\",\r\n function (e) { thisRef.touchEndHanlder(e); },\r\n false);\r\n }\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"mousemove\",\r\n function (e) { thisRef.mouseMoveHandler(e); },\r\n false);\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"mousedown\",\r\n function (e) { thisRef.mouseDownHandler(e); },\r\n false);\r\n\r\n thisRef.stage\r\n .addEventListener(\r\n \"mouseup\",\r\n function (e) { thisRef.mouseUpHandler(e); },\r\n false);\r\n\r\n document\r\n .addEventListener(\r\n \"keydown\",\r\n function (e) { thisRef.keyDownHandler(e); },\r\n false);\r\n\r\n document\r\n .addEventListener(\r\n \"keyup\",\r\n function (e) { thisRef.keyUpHandler(e); },\r\n false);\r\n\r\n document\r\n .addEventListener(\r\n \"keypress\",\r\n function (e) { thisRef.keyPressHandler(e); },\r\n false);\r\n\r\n // does the device support tilt events?\r\n if (initialSettings.deviceOrientationEvent) {\r\n\r\n window\r\n .addEventListener(\r\n \"deviceorientation\",\r\n function (e) { thisRef.tiltHandler(e); },\r\n false);\r\n\r\n } else if (initialSettings.deviceMotionEvent) {\r\n\r\n window\r\n .addEventListener(\r\n \"devicemotion\",\r\n function (e) { thisRef.tiltHandler(thisRef.passParams, e); },\r\n false);\r\n }\r\n\r\n thisRef.initConsoleFeatures(thisRef.passParams);\r\n\r\n // prepare settings\r\n if (initialSettings.hasOwnProperty(\"values\")) {\r\n\r\n thisRef.initSettings(initialSettings.values);\r\n }\r\n\r\n thisRef.lastTime = new Date();\r\n thisRef.elapsed = Math.random() * 10000;\r\n\r\n thisRef.doInit(thisRef.passParams);\r\n };\r\n\r\n thisRef.initConsoleFeatures = function (params) {\r\n console.log(\"==========================\");\r\n console.log(\"Demo Framework Initialized\");\r\n console.log(\"==========================\");\r\n console.log(\"DF.Restart()\");\r\n console.log(\"DF.FullRestart()\");\r\n console.log(\"DF.SetFPS(60)\");\r\n console.log(\"DF.Values\");\r\n\r\n window.DF = {\r\n FullRestart: () => {\r\n clearInterval(thisRef.updateIntervalID);\r\n cancelAnimationFrame(thisRef.updateIntervalID);\r\n thisRef.initSettings(initialSettings.values);\r\n thisRef.doInit(params);\r\n\r\n Object.keys(thisRef.passParams.values).forEach(\r\n function (key) {\r\n thisRef.passParams.values[key].Locked = false;\r\n thisRef.passParams.values[key].Regenerate();\r\n });\r\n },\r\n Restart: () => {\r\n thisRef.doInit(params);\r\n clearInterval(thisRef.updateIntervalID);\r\n cancelAnimationFrame(thisRef.updateIntervalID);\r\n },\r\n SetFPS: thisRef.setFPS,\r\n Values: thisRef.passParams.values\r\n };\r\n }\r\n\r\n thisRef.doInit = function (params) {\r\n\r\n initialSettings.init(params)\r\n .then(\r\n function (options) {\r\n if (options && options.hasOwnProperty(\"fps\")) {\r\n\r\n if (options.fps === -1) {\r\n\r\n waitForAnimationFrame = false;\r\n thisRef.updateIntervalID = setInterval(function () { update(params); }, 0);\r\n return;\r\n\r\n } else {\r\n\r\n thisRef.setFPS(options.fps);\r\n }\r\n }\r\n\r\n thisRef.updateIntervalID = requestAnimationFrame(() => thisRef.run());\r\n });\r\n }\r\n\r\n thisRef.setFPS = function (fps) {\r\n\r\n thisRef.FPS = fps;\r\n thisRef.interval = 1000 / fps;\r\n };\r\n\r\n thisRef.initSettings = function (settingsOverrides) {\r\n\r\n thisRef.passParams.values = {};\r\n Object.keys(settingsOverrides).forEach(\r\n function (key) {\r\n var settingOverride = thisRef.setupSettingOverride(settingsOverrides[key]);\r\n thisRef.passParams.values[key] = settingOverride;\r\n });\r\n };\r\n\r\n thisRef.setupSettingOverride = function (settingOverride) {\r\n\r\n if (!settingOverride.hasOwnProperty(\"Generator\")) {\r\n\r\n if (settingOverride.hasOwnProperty(\"Min\") && settingOverride.hasOwnProperty(\"Max\")) {\r\n\r\n settingOverride.Generator = function () { return (Math.random() * (this.Max - this.Min)) + this.Min; };\r\n\r\n } else if (settingOverride.hasOwnProperty(\"Array\")) {\r\n\r\n settingOverride.Generator = function () { return this.Array[Math.floor(Math.random() * this.Array.length)]; };\r\n }\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Regenerate\")) {\r\n\r\n settingOverride.Regenerate = function () { this.TargetValue = this.Generator(); return this; };\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Update\")) {\r\n\r\n if (settingOverride.hasOwnProperty(\"TransitionFrames\")) {\r\n\r\n settingOverride.Update = function () {\r\n if (!this.Locked) {\r\n this.Value += (this.TargetValue - this.Value) / this.TransitionFrames;\r\n\r\n if (this.Floored) {\r\n this.Value = Math.floor(this.Value);\r\n }\r\n else if (this.Ceiled) {\r\n this.Value = Math.ceil(this.Value);\r\n }\r\n\r\n return this;\r\n }\r\n };\r\n\r\n } else {\r\n\r\n settingOverride.Update = function () {\r\n if (!this.Locked) {\r\n if (this.Floored) {\r\n this.Value = Math.floor(this.TargetValue);\r\n }\r\n else if (this.Ceiled) {\r\n this.Value = Math.ceil(this.TargetValue);\r\n }\r\n else {\r\n this.Value = this.TargetValue;\r\n }\r\n return this;\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Value\")) {\r\n\r\n settingOverride.Regenerate();\r\n settingOverride.Value = settingOverride.TargetValue;\r\n\r\n if (settingOverride.Floored) {\r\n settingOverride.Value = Math.floor(settingOverride.Value);\r\n }\r\n else if (settingOverride.Ceiled) {\r\n settingOverride.Value = Math.ceil(settingOverride.Value);\r\n }\r\n\r\n } else {\r\n\r\n settingOverride.TargetValue = settingOverride.Value;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Min\")) {\r\n\r\n settingOverride.Min = settingOverride.Value;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Max\")) {\r\n\r\n settingOverride.Max = settingOverride.Value;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"TransitionFrames\")) {\r\n\r\n settingOverride.TransitionFrames = 10;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Locked\")) {\r\n\r\n settingOverride.Locked = false;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Floored\")) {\r\n\r\n settingOverride.Floored = false;\r\n }\r\n\r\n if (!settingOverride.hasOwnProperty(\"Ceiled\")) {\r\n\r\n settingOverride.Ceiled = false;\r\n }\r\n\r\n return settingOverride;\r\n };\r\n\r\n thisRef.interpolateMove = function (x, y) {\r\n\r\n // fix canvas scaling\r\n x = x * thisRef.stage.width / thisRef.stage.clientWidth;\r\n y = y * thisRef.stage.height / thisRef.stage.clientHeight;\r\n\r\n var result = [];\r\n\r\n if (!thisRef.lastX) {\r\n\r\n thisRef.lastX = x;\r\n thisRef.lastY = y;\r\n }\r\n\r\n var distance = Math.sqrt((x - thisRef.lastX) * (x - thisRef.lastX) + (y - thisRef.lastY) * (y - thisRef.lastY));\r\n var steps = distance / 4;\r\n var intervalX = (x - thisRef.lastX) / steps;\r\n var intervalY = (y - thisRef.lastY) / steps;\r\n\r\n for (var step = 0; step < steps; step++) {\r\n\r\n x = thisRef.lastX + (step * intervalX);\r\n y = thisRef.lastY + (step * intervalY);\r\n result.push({ x: x, y: y, speed: distance });\r\n }\r\n\r\n thisRef.lastX = x;\r\n thisRef.lastY = y;\r\n\r\n return result;\r\n };\r\n\r\n thisRef.tiltHandler = function (e) {\r\n\r\n // browser compatability\r\n if (!e.gamma && !e.beta) {\r\n\r\n if (e.acceleration && e.acceleration.x && e.acceleration.y) {\r\n\r\n e.gamma = e.acceleration.x * 2;\r\n e.beta = e.acceleration.y * 2;\r\n\r\n } else if (e.x && e.y) {\r\n\r\n e.gamma = -(e.x * (180 / Math.PI));\r\n e.beta = -(e.y * (180 / Math.PI));\r\n }\r\n }\r\n\r\n // if we end up with any tilt values, send them along\r\n if (e.gamma && e.beta && e.alpha && initialSettings.hasOwnProperty(\"tilt\"))\r\n initialSettings.tilt(thisRef.passParams, { gamma: e.gamma, beta: e.beta, alpha: e.alpha });\r\n };\r\n\r\n thisRef.touchStartHanlder = function (e) {\r\n\r\n if (e.touches.length == 1 && initialSettings.hasOwnProperty(\"mouseDown\"))\r\n initialSettings.mouseDown(thisRef.passParams, { x: e.touches[0].pageX - thisRef.canvasOffsetX, y: e.touches[0].pageY - thisRef.canvasOffsetY });\r\n else if (e.touches.length == 2 && initialSettings.hasOwnProperty(\"secondaryMouseDown\"))\r\n initialSettings.secondaryMouseDown(thisRef.passParams, { x: e.touches[0].pageX - thisRef.canvasOffsetX, y: e.touches[0].pageY - thisRef.canvasOffsetY });\r\n };\r\n\r\n thisRef.touchEndHanlder = function (e) {\r\n\r\n if (e.touches.length == 0 && initialSettings.hasOwnProperty(\"mouseUp\"))\r\n initialSettings.mouseUp(thisRef.passParams);\r\n else if (e.touches.length == 1 && initialSettings.hasOwnProperty(\"secondaryMouseUp\"))\r\n initialSettings.secondaryMouseUp(thisRef.passParams);\r\n\r\n thisRef.lastX = undefined;\r\n thisRef.lastY = undefined;\r\n };\r\n\r\n thisRef.touchMoveHanlder = function (e) {\r\n\r\n var steps =\r\n thisRef.interpolateMove(\r\n e.touches[0].pageX - thisRef.canvasOffsetX,\r\n e.touches[0].pageY - thisRef.canvasOffsetY);\r\n\r\n for (var i = 0; i < steps.length; i++) {\r\n\r\n if (e.touches.length == 0 && initialSettings.hasOwnProperty(\"mouseMove\"))\r\n initialSettings.mouseMove(thisRef.passParams, steps[i], false);\r\n else if (e.touches.length == 1 && initialSettings.hasOwnProperty(\"mouseMove\"))\r\n initialSettings / mouseMove(thisRef.passParams, steps[i], true);\r\n else if (e.touches.length == 2 && initialSettings.hasOwnProperty(\"secondaryMouseMove\"))\r\n initialSettings.secondaryMouseMove(thisRef.passParams, steps[i]);\r\n }\r\n };\r\n\r\n thisRef.mouseDownHandler = function (e) {\r\n\r\n if ((e.which === 3 || e.button === 2)) {\r\n\r\n thisRef.isSecondaryMouseDown = true;\r\n\r\n if (initialSettings.hasOwnProperty(\"secondaryMouseDown\"))\r\n initialSettings.secondaryMouseDown(thisRef.passParams, e);\r\n\r\n } else {\r\n\r\n thisRef.isMouseDown = true;\r\n\r\n if (initialSettings.hasOwnProperty(\"mouseDown\"))\r\n initialSettings.mouseDown(thisRef.passParams, e);\r\n }\r\n };\r\n\r\n thisRef.mouseUpHandler = function (e) {\r\n\r\n if ((e.which === 3 || e.button === 2)) {\r\n\r\n thisRef.isSecondaryMouseDown = false;\r\n\r\n if (initialSettings.hasOwnProperty(\"secondaryMouseUp\"))\r\n initialSettings.secondaryMouseUp(thisRef.passParams, e);\r\n\r\n } else {\r\n\r\n thisRef.isMouseDown = false;\r\n\r\n if (initialSettings.hasOwnProperty(\"mouseUp\"))\r\n initialSettings.mouseUp(thisRef.passParams, e);\r\n }\r\n\r\n thisRef.lastX = undefined;\r\n thisRef.lastY = undefined;\r\n };\r\n\r\n thisRef.mouseMoveHandler = function (e) {\r\n\r\n var steps =\r\n thisRef.interpolateMove(\r\n e.offsetX,\r\n e.offsetY);\r\n\r\n for (var i = 0; i < steps.length; i++) {\r\n\r\n if (!thisRef.isMouseDown && !thisRef.isSecondaryMouseDown) {\r\n\r\n if (initialSettings.hasOwnProperty(\"mouseMove\"))\r\n initialSettings.mouseMove(thisRef.passParams, steps[i], false);\r\n\r\n } else if (thisRef.isMouseDown) {\r\n\r\n if (initialSettings.hasOwnProperty(\"mouseMove\"))\r\n initialSettings.mouseMove(thisRef.passParams, steps[i], true);\r\n\r\n } else if (thisRef.isSecondaryMouseDown) {\r\n\r\n if (initialSettings.hasOwnProperty(\"secondaryMouseMove\"))\r\n initialSettings.secondaryMouseMove(thisRef.passParams, steps[i]);\r\n }\r\n }\r\n };\r\n\r\n thisRef.keyUpHandler = function (e) {\r\n\r\n if (initialSettings.hasOwnProperty(\"keyUp\"))\r\n initialSettings.keyUp(thisRef.passParams, e.code);\r\n };\r\n\r\n thisRef.keyDownHandler = function (e) {\r\n\r\n if (initialSettings.hasOwnProperty(\"keyDown\"))\r\n initialSettings.keyDown(thisRef.passParams, e.code);\r\n };\r\n\r\n thisRef.keyPressHandler = function (e) {\r\n\r\n if (initialSettings.hasOwnProperty(\"keyPress\"))\r\n initialSettings.keyPress(thisRef.passParams, e.code);\r\n };\r\n\r\n thisRef.run = function () {\r\n\r\n thisRef.date = new Date();\r\n thisRef.elapsed += thisRef.date - thisRef.lastTime;\r\n thisRef.lastTime = thisRef.date;\r\n thisRef.now = Date.now();\r\n\r\n var delta = thisRef.now - thisRef.then;\r\n\r\n if (delta > thisRef.interval) {\r\n\r\n thisRef.then = thisRef.now;\r\n thisRef.passParams.elapsed = thisRef.elapsed;\r\n thisRef.passParams.delta = delta = delta;\r\n\r\n if (thisRef.passParams.values) {\r\n Object.keys(thisRef.passParams.values).forEach(\r\n key => thisRef.passParams.values[key].Update()\r\n );\r\n }\r\n\r\n initialSettings.update(thisRef.passParams);\r\n }\r\n\r\n thisRef.updateIntervalID = requestAnimationFrame(() => thisRef.run());\r\n };\r\n\r\n thisRef.initialize();\r\n};\r\n\r\nexport default DemoFramework;","import React, { useEffect, useMemo, useRef, useState } from 'react';\r\nimport DemoFramework from 'utilities/DemoFramework2';\r\nimport \"styles/bitriddle.scss\";\r\n\r\nconst CANVAS_WIDTH = 1000;\r\nconst CANVAS_HEIGHT = 280;\r\nconst FPS = 30;\r\n\r\nconst values = {\r\n FADE: {\r\n Min: 0,\r\n Max: 0.5,\r\n TransitionFrames: 10\r\n }\r\n};\r\n\r\nconst NOR_HINT_COLOR = \"#a00\";\r\nconst AND_HINT_COLOR = \"#009\";\r\nconst FLIP_HINT_COLOR = \"#090\";\r\nconst BIT_BORDER_COLOR = \"#999\";\r\n\r\nlet shiftRegisterBits: Array = [0, 0, 0, 0, 0, 0, 0, 0];\r\nlet targetBits: Array = [1, 1, 1, 1, 1, 1, 1, 1];\r\nlet hintColors: Array = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\nlet moveCount = 0;\r\nlet totalMoveCount = 0;\r\nlet roundMessages = [\"\"];\r\n\r\nconst BitRiddleIndex = () => {\r\n\r\n const [wonRound, setWonRound] = useState(false);\r\n const [wonGame, setWonGame] = useState(false);\r\n const wonGameRef = useRef(wonGame);\r\n wonGameRef.current = wonGame;\r\n const [round, setRound] = useState(0);\r\n const roundRef = useRef(round);\r\n roundRef.current = round;\r\n\r\n const resetShiftRegisterBits = () => {\r\n shiftRegisterBits = [0, 0, 0, 0, 0, 0, 0, 0];\r\n console.log(\"Reset bits\");\r\n }\r\n\r\n const shiftBitIntoRegister = (bit: number) => {\r\n shiftRegisterBits.unshift(bit);\r\n shiftRegisterBits.pop();\r\n moveCount++;\r\n totalMoveCount++;\r\n setWonRound(checkForWin());\r\n }\r\n\r\n const flipBit = (bit: number) => {\r\n return !bit ? 1 : 0;\r\n }\r\n\r\n const andBits = (bit1: number, bit2: number) => {\r\n return (bit1 && bit2) ? 1 : 0;\r\n }\r\n\r\n const orBits = (bit1: number, bit2: number) => {\r\n return (bit1 || bit2) ? 1 : 0;\r\n }\r\n\r\n const norBits = (bit1: number, bit2: number) => {\r\n return (!bit1 && !bit2) ? 1 : 0;\r\n }\r\n\r\n const nandBits = (bit1: number, bit2: number) => {\r\n return !(!bit1 && !bit2) ? 1 : 0;\r\n }\r\n\r\n const checkForWin = () => {\r\n const finalBits = [];\r\n let allCorrect = true;\r\n\r\n shiftRegisterBits.forEach(\r\n (bit, index, arr) => {\r\n if (targetBits[index] !== null && getModifiedBit(index) !== targetBits[index]) {\r\n allCorrect = false;\r\n }\r\n });\r\n\r\n return allCorrect;\r\n }\r\n\r\n const winRound = () => {\r\n const newRound = roundRef.current + 1;\r\n setRound(newRound);\r\n moveCount = 0;\r\n resetShiftRegisterBits();\r\n console.log(\"Round won!\");\r\n console.log(\"Starting round \" + round);\r\n setupRoundBits(newRound);\r\n setWonRound(false);\r\n\r\n if (newRound === 12) {\r\n setWonGame(true);\r\n }\r\n }\r\n\r\n const resetGame = (targetRound: number = 0) => {\r\n roundMessages = [\"\"];\r\n setRound(targetRound);\r\n moveCount = 0;\r\n totalMoveCount = 0;\r\n resetShiftRegisterBits();\r\n setupRoundBits(targetRound);\r\n console.log(\"Reset game!\");\r\n setWonRound(false);\r\n setWonGame(false);\r\n }\r\n\r\n const skipTutorial = () => {\r\n resetGame(10);\r\n }\r\n\r\n const setupRoundBits = (roundIndex: number) => {\r\n if (roundIndex === 0) {\r\n targetBits = [1, 1, 1, 1, 1, 1, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"Click '1' 8 times to turn on all 8 bits.\",\r\n \"A value of '1' turns on a bit, '0' turns it off.\",\r\n \"Each time you click a '1' or '0', you're pushing it into the\",\r\n \"first bit bumping the last off the end.\"\r\n ];\r\n }\r\n else if (roundIndex === 1) {\r\n targetBits = [0, 0, 0, 0, 1, 1, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"Click '1' 4 times and '0' 4 times to set 4 bits off\",\r\n \"and 4 bits on.\"\r\n ];\r\n }\r\n else if (roundIndex === 2) {\r\n targetBits = [null, null, null, 1, 0, null, null, null];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"Notice how not all bits have a target state.\",\r\n \"If you don't see a target in the center it means\",\r\n \"that bit can have any value.\"\r\n ];\r\n }\r\n else if (roundIndex === 3) {\r\n targetBits = [1, 1, 1, null, null, 1, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"The second bit is whatever value you put into it, but flipped.\",\r\n \"Try to fill all 8 bits while leaving the second space off.\",\r\n \"Winning is about matching the bits final state to it's target\"\r\n ];\r\n }\r\n else if (roundIndex === 4) {\r\n targetBits = [1, 1, 1, 1, 1, 1, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR];\r\n roundMessages = [\r\n \"Now try with 2 flipped bits.\"\r\n ];\r\n }\r\n else if (roundIndex === 5) {\r\n targetBits = [null, 0, null, 1, 1, null, 0, null];\r\n // todo: change this to a flip other bit tutorial\r\n hintColors = [BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"Here, the 2 flipped bits are based on other bits.\",\r\n \"Tricky!!\"\r\n ];\r\n }\r\n else if (roundIndex === 6) {\r\n targetBits = [0, 1, 1, 1, 1, 1, 1, 0];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, FLIP_HINT_COLOR, AND_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR];\r\n roundMessages = [\r\n \"The 5th bit only turns on when 2 other bits ARE\",\r\n \"ON. This is an AND bit.\",\r\n \"Oh, and there are a few flipped bits as well.\"\r\n ];\r\n }\r\n else if (roundIndex === 7) {\r\n targetBits = [0, 0, 0, 0, 1, 1, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, NOR_HINT_COLOR];\r\n roundMessages = [\r\n \"The 8th bit only turns on when 2 other bits\",\r\n \"are NOT ON. This is a NOR bit.\",\r\n \"Plus some flipped bits, why not.\"\r\n ];\r\n }\r\n else if (roundIndex === 8) {\r\n targetBits = [null, 1, 0, 1, null, null, 1, 1];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, AND_HINT_COLOR, NOR_HINT_COLOR];\r\n roundMessages = [\r\n \"Alright, bringing it all together now.\",\r\n \"This round has alittle of everything!\"\r\n ];\r\n }\r\n else if (roundIndex === 9) {\r\n targetBits = [0, null, 1, 0, null, 1, null, 1];\r\n hintColors = [FLIP_HINT_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, NOR_HINT_COLOR, BIT_BORDER_COLOR, AND_HINT_COLOR];\r\n roundMessages = [\r\n \"Ohhhh, final training stage.\",\r\n \"Good luck!\"\r\n ];\r\n }\r\n else if (roundIndex === 10) {\r\n targetBits = [1, null, 0, null, 1, null, 0, null];\r\n hintColors = [FLIP_HINT_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR, FLIP_HINT_COLOR, BIT_BORDER_COLOR,];\r\n roundMessages = [\r\n \"\"\r\n ];\r\n }\r\n else if (roundIndex === 11) {\r\n targetBits = [null, null, null, 1, null, 1, null, 1];\r\n hintColors = [BIT_BORDER_COLOR, BIT_BORDER_COLOR, BIT_BORDER_COLOR, NOR_HINT_COLOR, BIT_BORDER_COLOR, NOR_HINT_COLOR, BIT_BORDER_COLOR, AND_HINT_COLOR,];\r\n roundMessages = [\r\n \"\"\r\n ];\r\n }\r\n }\r\n\r\n const getModifiedBit = (currentIndex: number) => {\r\n let val = shiftRegisterBits[currentIndex];\r\n\r\n if (roundRef.current === 0) {\r\n // LEVEL 1 //////////////////////////////////////////////////////////////////////\r\n }\r\n else if (roundRef.current === 1) {\r\n // LEVEL 2 //////////////////////////////////////////////////////////////////////\r\n }\r\n else if (roundRef.current === 2) {\r\n // LEVEL 3 //////////////////////////////////////////////////////////////////////\r\n }\r\n else if (roundRef.current === 3) {\r\n // LEVEL 4 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 1) {\r\n val = flipBit(val);\r\n }\r\n }\r\n else if (roundRef.current === 4) {\r\n // LEVEL 5 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 3) {\r\n val = flipBit(val);\r\n }\r\n else if (currentIndex === 7) {\r\n val = flipBit(val);\r\n }\r\n }\r\n else if (roundRef.current === 5) {\r\n // LEVEL 6 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 1) {\r\n val = flipBit(getModifiedBit(4));\r\n }\r\n else if (currentIndex === 6) {\r\n val = flipBit(getModifiedBit(3));\r\n }\r\n }\r\n else if (roundRef.current === 6) {\r\n // LEVEL 7 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 4) {\r\n val = andBits(getModifiedBit(2), getModifiedBit(6));\r\n }\r\n else if (currentIndex === 2) {\r\n val = flipBit(val);\r\n }\r\n else if (currentIndex === 3) {\r\n val = flipBit(val);\r\n }\r\n }\r\n else if (roundRef.current === 7) {\r\n // LEVEL 8 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 7) {\r\n val = norBits(getModifiedBit(1), getModifiedBit(3));\r\n }\r\n else if (currentIndex === 1) {\r\n val = flipBit(val);\r\n }\r\n else if (currentIndex === 3) {\r\n val = flipBit(val);\r\n }\r\n }\r\n else if (roundRef.current === 8) {\r\n // LEVEL 9 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 6) {\r\n val = andBits(getModifiedBit(1), getModifiedBit(3));\r\n }\r\n if (currentIndex === 7) {\r\n val = norBits(getModifiedBit(2), getModifiedBit(0));\r\n }\r\n if (currentIndex === 2) {\r\n val = flipBit(val);\r\n }\r\n }\r\n else if (roundRef.current === 9) {\r\n // LEVEL 10 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 0) {\r\n val = flipBit(getModifiedBit(1));\r\n }\r\n else if (currentIndex === 5) {\r\n val = norBits(getModifiedBit(0), getModifiedBit(4));\r\n }\r\n else if (currentIndex === 7) {\r\n val = andBits(getModifiedBit(5), getModifiedBit(6));\r\n }\r\n }\r\n else if (roundRef.current === 10) {\r\n // LEVEL 11 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 0) {\r\n val = flipBit(getModifiedBit(1));\r\n }\r\n if (currentIndex === 2) {\r\n val = flipBit(getModifiedBit(3));\r\n }\r\n if (currentIndex === 4) {\r\n val = flipBit(getModifiedBit(5));\r\n }\r\n if (currentIndex === 6) {\r\n val = flipBit(getModifiedBit(7));\r\n }\r\n }\r\n else if (roundRef.current === 11) {\r\n // LEVEL 12 //////////////////////////////////////////////////////////////////////\r\n if (currentIndex === 3) {\r\n val = norBits(getModifiedBit(6), getModifiedBit(0));\r\n }\r\n else if (currentIndex === 5) {\r\n val = norBits(getModifiedBit(2), getModifiedBit(1));\r\n }\r\n else if (currentIndex === 7) {\r\n val = andBits(getModifiedBit(4), getModifiedBit(5));\r\n }\r\n }\r\n\r\n return val;\r\n }\r\n\r\n const init =\r\n async (p: any) => {\r\n console.log(\"Init\");\r\n p.ctx.fillStyle = \"white\";\r\n p.ctx.strokeStyle = \"white\";\r\n p.ctx.lineWidth = 5;\r\n p.ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n };\r\n\r\n const update =\r\n (p: any) => {\r\n p.ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);\r\n\r\n if (wonGameRef.current) {\r\n p.ctx.font = '90px arial';\r\n p.ctx.fillText(\r\n `Congrats!`,\r\n 300,\r\n 100);\r\n\r\n p.ctx.font = '40px arial';\r\n p.ctx.fillText(\r\n \"You've beaten all available rounds!\",\r\n 180,\r\n 160);\r\n\r\n p.ctx.font = '90px arial';\r\n p.ctx.fillText(\r\n `Move Total: ${totalMoveCount}`,\r\n 230,\r\n 250);\r\n return;\r\n }\r\n\r\n shiftRegisterBits.forEach(\r\n (bit, index) => {\r\n p.ctx.strokeStyle = BIT_BORDER_COLOR;\r\n\r\n if (roundRef.current < 10) {\r\n // actual circle\r\n p.ctx.fillStyle = bit ? \"#fff\" : \"#000\";\r\n p.ctx.beginPath();\r\n p.ctx.arc(\r\n 72 + (index * 120),\r\n 72,\r\n 45,\r\n 0,\r\n 2 * Math.PI);\r\n p.ctx.fill();\r\n p.ctx.stroke();\r\n }\r\n\r\n // final circle\r\n p.ctx.fillStyle = getModifiedBit(index) ? \"#fff\" : \"#000\";\r\n p.ctx.beginPath();\r\n p.ctx.arc(\r\n 80 + (index * 120),\r\n 80,\r\n 45,\r\n 0,\r\n 2 * Math.PI);\r\n p.ctx.fill();\r\n p.ctx.stroke();\r\n });\r\n\r\n targetBits.forEach(\r\n (bit, index) => {\r\n if (bit === null) {\r\n return;\r\n }\r\n\r\n p.ctx.strokeStyle = hintColors[index];\r\n p.ctx.fillStyle = bit ? \"#fff\" : \"#000\";\r\n p.ctx.beginPath();\r\n p.ctx.arc(\r\n 80 + (index * 120),\r\n 80,\r\n 12,\r\n 0,\r\n 2 * Math.PI);\r\n p.ctx.fill();\r\n p.ctx.stroke();\r\n });\r\n\r\n p.ctx.font = '50px arial';\r\n p.ctx.fillStyle = \"#fff\";\r\n p.ctx.fillText(\r\n `Round: ${roundRef.current}`,\r\n 10,\r\n 175);\r\n\r\n p.ctx.fillText(\r\n `Moves: ${moveCount}`,\r\n 10,\r\n 220);\r\n\r\n p.ctx.fillText(\r\n `Total: ${totalMoveCount}`,\r\n 10,\r\n 265);\r\n\r\n p.ctx.font = '24px arial';\r\n roundMessages.forEach(\r\n (message, index) => {\r\n p.ctx.fillText(\r\n message,\r\n 270,\r\n 175 + (index * 27));\r\n });\r\n };\r\n\r\n const keyUp = (p: any, code: any) => {\r\n //console.log(\"Key press \", code);\r\n\r\n if (code === \"Space\") {\r\n shiftBitIntoRegister(1);\r\n }\r\n else if (code === \"ArrowRight\") {\r\n shiftBitIntoRegister(0);\r\n }\r\n else if (code === \"KeyC\") {\r\n resetShiftRegisterBits();\r\n }\r\n else if (code === \"Enter\") {\r\n checkForWin();\r\n }\r\n else if (code === \"Escape\") {\r\n resetGame();\r\n }\r\n };\r\n\r\n useEffect(\r\n () => {\r\n new DemoFramework(\r\n {\r\n fps: FPS,\r\n width: CANVAS_WIDTH,\r\n height: CANVAS_HEIGHT,\r\n values,\r\n init,\r\n update,\r\n keyUp\r\n });\r\n\r\n resetGame();\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n {\r\n !wonGame &&\r\n <>\r\n \r\n\t\t\t\t \r\n\t\t\r\n\t);\r\n}\r\n\r\nconst AppContent: React.FC = () => {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t\t \r\n\t\t\r\n\t)\r\n}\r\n\r\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(\n process.env.PUBLIC_URL,\n window.location.href\n );\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './styles/index.scss';\nimport App from './routes/App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(
\r\n \r\n {\r\n wonRound &&\r\n \r\n }\r\n {\r\n !wonRound &&\r\n <>\r\n \r\n \r\n \r\n }\r\n \r\n
\r\n {\r\n round <= 9 &&\r\n \r\n }\r\n \r\n
\r\n \r\n }\r\n \r\n );\r\n}\r\n\r\nexport default BitRiddleIndex;","import 'styles/App.scss';\r\n\r\nimport React from 'react';\r\nimport { BrowserRouter, Routes, Route, } from \"react-router-dom\";\r\nimport HomeIndex from './home/Index';\r\nimport AboutIndex from './about/Index';\r\nimport GlobalContextWrapper from 'components/GlobalContext';\r\nimport Menu from './Menu';\r\nimport { Container } from 'react-bootstrap';\r\nimport BottomMenu from './BottomMenu';\r\nimport StarField from 'components/StarField';\r\nimport BitRiddleIndex from './blitriddle/Index';\r\n//import PointilizerIndex from './pointilizer/Index';\r\n//import PointilizerCustom from './pointilizer/Custom';\r\n\r\nconst App = () => {\r\n\treturn (\r\n\t\t<>\r\n\t\t\tThe big circle is the final bit state
\r\n The circle behind that is the actual bit state
\r\n The small circle inside it is the target state and hint
\r\n Empty target means it should be off
\r\n Filled target means it should be on
\r\n No target means it doesn't matter what state it's in
\r\n Green target border means it's final state is the opposite of whatever you put there, or somewhere else
\r\n Blue target border means it only turns on when 2 other spots are on
\r\n Red target border means it only turns on when 2 other spots are off
\r\n