2c:null 2d:["$","title",null,{"children":"Gameboy | senritsu | Observable"}] 32:T481,viewof registers = { const registers = makeCpuRegisters() const proxy = new Proxy(registers, { set(target, property, value) { target[property] = value update() return true } }) const display = unpackedFragment`

` const container = ViewContainer('registers', display) const increment = name => () => proxy[name]++ const update = () => { display.replaceChildren( ...['AF', 'BC', 'DE', 'HL', 'SP', 'PC'].flatMap(key => Labeled(key, RegisterValue(proxy[key], true), {onClick: interactive && increment(key)})), ...['A', 'B', 'D', 'H'].flatMap(key => Labeled(key, RegisterValue(proxy[key]), {onClick: interactive && increment(key)})), ...[Empty(), Empty()], RegisterFlags(proxy, interactive), ...['C', 'E', 'L'].flatMap(key => Labeled(key, RegisterValue(proxy[key]), {onClick: interactive && increment(key)})), ) container.dispatchEvent(new Event("input", {bubbles: true})) } update() container.value = proxy return container }33:T435,function makeCpuRegisters() { const registers = { SP: 0, PC: 0 } const splitRegisters = ['AF', 'BC', 'DE', 'HL'] splitRegisters.forEach(pair => { const [hi, lo] = pair registers[hi] = 0 if (lo === 'F') { Object.defineProperty(registers, 'lo', { value: 0, enumerable: false }) } else { registers[lo] = 0 } Object.defineProperty(registers, pair, { get() { return this[hi] << 8 | this[lo] }, set(value) { this[hi] = (value & 0xFF00) >> 8 this[lo] = value & 0xFF }, enumerable: true }) }) const flags = ['z', 'n', 'h', 'c'] flags.forEach((flag, index) => { const bit = 1 << (7 - index) Object.defineProperty(registers, flag, { get() { console.log(flag, bit.toString(2), this.F & bit, this.F & bit ? true : false) return this.F & bit ? 1 : 0 }, set(value) { this.F = value ? this.F | bit : this.F & ~bit }, enumerable: true }) }) return registers }34:[] 30:{"id":"a1ffc7c1e4ef1fe3","slug":null,"title":"Gameboy","thumbnail":"f13f2cf3035fc86bb42314e343a6b159049034feb828e5f37f1479f8bf08bfab","access_level":"public","create_time":"$D2023-10-19T17:28:24.922Z","update_time":"$D2023-10-20T10:44:52.995Z","view_time":null,"first_public_time":"$D2023-10-19T17:28:24.922Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":582,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gameboy","cells":[{"id":0,"value":"# Gameboy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"If time allows, this will be a simple and primitive gameboy emulator running directly in Observable, all parts exposed and easy to see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof selectedPalette = Inputs.select(palettes.map(x => x.displayName), {label: \"Select palette\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof interactive = Inputs.toggle({label: \"Interactive registers\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"registers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"## Parts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"CpuFlags = ({\n zero: 1 << 7,\n subtraction: 1 << 6,\n halfCarry: 1 << 5,\n carry: 1 << 4\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## UI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"palette = palettes.find(x => x.displayName === selectedPalette).colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"FancyContainer(RegisterFlags({z: 0, n: 1, h: 0, c: 1}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"RegisterFlags = (registers, interactive) => {\n const flip = (name) => () => {\n registers[name] = registers[name] ? 0 : 1\n }\n\n const labels = {\n z: 'ZERO',\n n: 'SUB',\n h: 'HALF',\n c: 'CARRY',\n }\n \n return htl.html.fragment`\n\n ${['z', 'n', 'h', 'c'].map(name => LabeledFlag(labels[name], registers[name], {onClick: interactive && flip(name)}))}\n\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"{\n let value = 0\n\n while (true) {\n yield FancyContainer(LabeledFlag('foo', value))\n await Promises.delay(1000)\n value = value ? 0 : 1\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"LabeledFlag = (name, value, {onClick} = {}) => htl.html.fragment`${name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"{\n let value = 0\n\n while(true) {\n yield FancyContainer(RegisterValue(value))\n value = (value + 1) % 0x01FF\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"FancyContainer(RegisterValue(123456))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"RegisterValue = (value, as16Bit) => {\n const decimalValue = value.toString()\n const binaryValue = value.toString(2)\n\n if (as16Bit === undefined && value > 0xFF) {\n as16Bit = true\n }\n\n const min = 0\n const max = as16Bit ? 0xFFFF : 0xFF\n\n if (value < min || value > max) return ErrorMessage(`${value} not in range [${min}, ${max}]`)\n\n const decimalZeroCount = (as16Bit ? 5 : 3) - decimalValue.length\n const binaryZeroCount = (as16Bit ? 16 : 8) - binaryValue.length\n\n return AlternateValues(ZeroPaddedValue(decimalValue, decimalZeroCount), ZeroPaddedValue(binaryValue, binaryZeroCount))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"FancyContainer(Labeled('Hello', 'World'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"Labeled = (label, content, {onClick} = {}) => htl.html.fragment`\n\n ${label}:\n ${content}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"FancyContainer(AlternateValues('Hello', 'World'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"AlternateValues = (a, b) => htl.html.fragment`\n

\n ${a}\n /\n ${b}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"FancyContainer(ZeroPaddedValue('Hello', 27))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"ZeroPaddedValue = (value, zeroes) => PaddedValue(value, '0'.repeat(zeroes))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"FancyContainer(PaddedValue('World', 'Hello'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"PaddedValue = (value, padding) => htl.html.fragment`\n\n ${padding}\n ${value}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"FancyContainer(ErrorMessage('test error'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"ErrorMessage = message => htl.html.fragment`\nERR: ${message}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"FancyContainer('Hello world', {large: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"function FancyContainer(children, {large} = {}) {\n return htl.html`\n

\n ${children}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"ViewContainer('foo', 'Hello World')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"ViewContainer = (label, children, containerOptions) => FancyContainer(htl.html.fragment`\n

\n viewof ${label}\n ${children}\n

\n`, containerOptions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"## Bits and bobs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"palettes = Promise.all(['nintendo-gameboy-bgb', 'lospec-gb', 'nostalgia'].map(getLospecPalette))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"getLospecPalette = async (name) => {\n const url = `https://lospec.com/palette-list/${name}.txt`\n const proxyUrl = 'https://corsproxy.io/?' + encodeURIComponent(url)\n \n const response = await fetch(proxyUrl, {mode: 'cors'})\n const text = await response.text()\n\n const lines = text.split(/\\r\\n/)\n\n const displayName = lines.find(x => x.startsWith(';Palette Name')).split(':')[1].trim()\n\n const colors = lines.filter(x => x.startsWith('FF')).map(x => `#${x.trim().substring(2)}`)\n\n const [darkest, dark, light, lightest] = colors\n\n return {\n displayName,\n url: url.replace('.txt', ''),\n colors: {darkest, dark, light, lightest}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"unpackedFragment = (...args) => htl.html.fragment(...args).children[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"Empty = () => htl.html.fragment``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"styleVariables = `--gb-darkest: ${palette.darkest}; --gb-dark: ${palette.dark}; --gb-light: ${palette.light}; --gb-lightest: ${palette.lightest}; --small: 8px; --large: 16px; --gb-error: #e32929`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"style = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## References\n\n- https://gbdev.io/pandocs/Specifications.html\n- https://rylev.github.io/DMG-01/public/book/\n- https://www.inspiredpython.com/course/game-boy-emulator/let-s-write-a-game-boy-emulator-in-python\n- https://fonts.google.com/specimen/Press+Start+2P","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"