dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reorganize assets; change to global-based sharding; add rebrand logo

Browse Source
This commit is contained in:
Dakedres 2024-05-05 22:26:23 -06:00
parent bb7bc4f9ea
commit ddf6dd559b
20 changed files with 102 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/main.css Normal file
View File

@ -0,0 +1,45 @@
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body { margin:0px; padding:0px; overflow:hidden; font-family:monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none; font-size:12px; transition: background 500ms}
*:focus { outline: none; }
#ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
#ronin #wrapper { overflow: hidden; position: relative; }
#ronin #wrapper #commander { z-index: 9000;position: relative;width: calc(50vw - 30px);height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 105px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
#ronin #wrapper #commander #status { position: absolute; bottom: 0px; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 75px); padding-left:45px;}
#ronin #wrapper #commander #status #eval { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
#ronin #wrapper #commander #status #eval:hover { background: none }
#ronin.expand #wrapper #commander { width:100%; }
#ronin #surface, #ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; width:100%; height:100%; transition: left 250ms, opacity 250ms; opacity: 1; }
/* Default */
#ronin.hidden #wrapper #commander { margin-left:-40vw; }
#ronin.hidden #surface, #ronin.hidden #guide { left:0; }
#ronin #guide.hidden { opacity: 0 }
#ronin.hidden #wrapper #commander { margin-left:-50vw; }
#ronin #surface,#ronin #guide { left:50vw; }
#ronin #surface { border-radius: 2px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
@media (min-width: 720px) {
#ronin #wrapper #commander { width:350px; }
#ronin.hidden #wrapper #commander { margin-left:-380px; }
#ronin #surface,#ronin #guide { left:380px; }
}
/* Acels */
#acels { position: fixed; width: 30px; top: 0; left: 0; width: 100vw; font-size:11px; line-height: 20px; transition: margin-top 0.25s; z-index: 9999; padding-left: 25px; }
#acels.hidden { margin-top:-20px; }
#acels.hidden > li > ul > li { display: none }
#acels > li { float: left; position: relative; cursor: pointer; padding:0px 5px; display: inline-block; }
/* #acels > li:hover { background: black; color:white; } */
#acels > li > ul { display: none; position: absolute; position: absolute; top:20px; left:0px; width: 200px}
#acels > li:hover > ul { display: block; }
#acels > li > ul > li { padding: 0px 10px; display: block }
#acels > li > ul > li > i { display: inline-block; float: right; }

10
links/theme.css → assets/theme.css
View File

@ -6,5 +6,13 @@ body { background:var(--background); }
#ronin #wrapper #commander #status #source { color:var(--f_low); }
#ronin #wrapper #commander #status #eval { background-color: var(--b_inv); border-color: var(--b_inv) }
#ronin #wrapper #commander #status #eval.active { background:var(--f_high); border-color:var(--f_high); transition: none }
#ronin #surface { color: red }
::selection { background-color:var(--b_inv); color:var(--f_inv); text-decoration:none }
::selection { background-color:var(--b_inv); color:var(--f_inv); text-decoration:none }
/* #acels { background: red } */
#acels { background: var(--b_low); color:var(--f_high) }
#acels > li:hover { background:var(--b_med); color:var(--f_high); }
#acels > li > ul { background:var(--b_low); color:var(--f_high); }
#acels > li > ul > li:hover { background: var(--b_med); }
#acels > li > ul > li > i { color:var(--f_med) }

4
debug.html
View File

@ -6,8 +6,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ronin</title>
<link rel="stylesheet" type="text/css" href="./links/main.css"/>
<link rel="stylesheet" type="text/css" href="./links/theme.css"/>
<link rel="stylesheet" type="text/css" href="./assets/main.css"/>
<link rel="stylesheet" type="text/css" href="./assets/theme.css"/>
<script type="text/javascript" src="./scripts/lib/acels.js"></script>
<script type="text/javascript" src="./scripts/lib/lain.js"></script>

57
links/main.css
View File

File diff suppressed because one or more lines are too long

2
src/Lain.js
View File

@ -162,4 +162,4 @@ function Lain (lib = {}) {
}
}
export default Lain
global.Lain = Lain

2
src/Library.js
View File

@ -724,4 +724,4 @@ function Library (client) {
}
}
export default Library
global.Library = Library

2
src/Surface.js
View File

@ -293,4 +293,4 @@ function Surface (client) {
}
}
export default Surface
global.Surface = Surface

4
src/browser/Acels.js
View File

@ -114,6 +114,4 @@ function Acels (client) {
}
function capitalize (s) { return s.substr(0, 1).toUpperCase() + s.substr(1) }
}
export default Acels
}

13
src/browser/Client.js
View File

@ -1,12 +1,3 @@
import Acels from "./Acels.js"
import Theme from "./Theme.js"
import Source from "./Source.js"
import Commander from "./Commander.js"
import DisplaySurface from "./DisplaySurface.js"
import Library from "../Library.js"
import Lain from "../Lain.js"
function Client () {
this.el = document.createElement('div')
this.el.id = 'ronin'
@ -237,6 +228,4 @@ function Client () {
}
return { x, y, xy, wh, d, r, a, line, rect, pos, size, circle, arc, type, 'is-down': type !== 'mouse-up' ? true : null }
}
}
export default Client
}

15
src/browser/Commander.js
View File

@ -1,5 +1,3 @@
'use strict'
function Commander (client) {
this.el = document.createElement('div')
this.el.id = 'commander'
@ -284,14 +282,17 @@ function Commander (client) {
this.splash = `; Ronin v2.50
(def logo-path "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ")
(def logo-path "M90 195 L90 195 L105 0 M120 120 L120 120 A120 90 0 0 0 0 210 M90 270 A90 60 0 0 1 0 210 M210 180 L210 180 L90 195 M210 180 A90 60 0 0 0 120 120 M210 180 A120 90 0 0 1 90 270")
(clear)
(resize 600 600)
(def theme
(get-theme))
(stroke
(svg 140 140 logo-path) "black" 7)`
(svg 190 140 logo-path) theme:f_high 4)`
}
function lintLISP (str) {
@ -322,6 +323,4 @@ function lintLISP (str) {
// Space out comments
val = val.split('\n').map((line) => { return line.substr(0, 2) === '; ' ? `\n${line}\n` : line }).join('\n')
return val.trim()
}
export default Commander
}

7
src/browser/DisplaySurface.js
View File

@ -1,6 +1,3 @@
import Surface from "../Surface.js"
import { classExtends } from "../util.js"
const DisplaySurface = function(client) {
classExtends(this, Surface, client)
@ -49,6 +46,4 @@ const DisplaySurface = function(client) {
this.toDataURL = () => {
return this._canvas.toDataURL()
}
}
export default DisplaySurface
}

2
src/browser/Source.js
View File

@ -95,5 +95,3 @@ function Source (client) {
return (ms / 8640 / 10000).toFixed(6).substr(2, 6)
}
}
export default Source

10
src/browser/Theme.js
View File

@ -1,9 +1,3 @@
'use strict'
/* global localStorage */
/* global FileReader */
/* global DOMParser */
function Theme (client) {
this.el = document.createElement('style')
this.el.type = 'text/css'
@ -167,6 +161,4 @@ function Theme (client) {
function isHtml (text) {
try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
}
}
export default Theme
}

67
src/browser/index.html
View File

@ -6,69 +6,32 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ronin</title>
<style>
<script>window.global = window;</script>
<script src="./Acels.js"></script>
<script src="./Theme.js"></script>
<script src="./Source.js"></script>
<script src="./Commander.js"></script>
<script src="./DisplaySurface.js"></script>
<script src="./Client.js"></script>
* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body { margin:0px; padding:0px; overflow:hidden; font-family: monospace; background:000; -webkit-app-region: drag; -webkit-user-select: none; font-size:12px; transition: background 500ms}
*:focus { outline: none; }
#ronin { height: calc(100vh - 60px); width:calc(100vw - 60px); -webkit-app-region: drag; padding: 30px;overflow: hidden; }
#ronin #wrapper { overflow: hidden; position: relative; }
#ronin #wrapper #commander { z-index: 9000;position: relative;width: calc(50vw - 30px);height: calc(100vh - 60px);-webkit-app-region: no-drag;padding-right: 30px;transition: margin-left 250ms;}
#ronin #wrapper #commander textarea { background: none; width: 100%; height: calc(100vh - 105px); resize: none; font-size: 12px;line-height: 15px; padding-right: 15px}
#ronin #wrapper #commander #status { position: absolute; bottom: 0px; line-height: 15px; height: 30px; overflow: hidden; width: calc(100% - 75px); padding-left:45px;}
#ronin #wrapper #commander #status #eval { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
#ronin #wrapper #commander #status #eval:hover { background: none }
#ronin.expand #wrapper #commander { width:100%; }
#ronin #surface, #ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; transition: left 250ms, opacity 250ms; opacity: 1; }
#ronin.hidden #wrapper #commander { margin-left:-40vw; }
#ronin.hidden #surface, #ronin.hidden #guide { left:0; }
#ronin #guide.hidden { opacity: 0 }
#ronin.hidden #wrapper #commander { margin-left:-50vw; }
#ronin #surface,#ronin #guide { left:50vw; }
#ronin #guide { background:none; }
#ronin #surface { border-radius: 2px }
#acels { position: fixed;width: 30px;background: red;top: 0;left: 0; width: 100vw; color:black; background:white; font-size:11px; line-height: 20px; transition: margin-top 0.25s; z-index: 9999; padding-left: 25px; }
#acels.hidden { margin-top:-20px; }
#acels.hidden > li > ul > li { display: none }
#acels > li { float: left; position: relative; cursor: pointer; padding:0px 5px; display: inline-block; }
#acels > li:hover { background: black; color:white; }
#acels > li > ul { display: none; position: absolute; background:white; position: absolute; top:20px; left:0px; color:black; width: 200px}
#acels > li:hover > ul { display: block; }
#acels > li > ul > li { padding: 0px 10px; display: block }
#acels > li > ul > li:hover { background: #ccc; }
#acels > li > ul > li > i { display: inline-block; float: right; color: #aaa; }
body { background:var(--background); }
#ronin #wrapper { background: var(--background); }
#ronin #wrapper #commander { background:var(--background); }
#ronin #wrapper #commander textarea { color:var(--f_high); }
#ronin #wrapper #commander #status { color:var(--f_med); }
#ronin #wrapper #commander #status #source { color:var(--f_low); }
#ronin #wrapper #commander #status #eval { background-color: var(--b_inv); border-color: var(--b_inv) }
#ronin #wrapper #commander #status #eval.active { background:var(--f_high); border-color:var(--f_high); transition: none }
::selection { background-color:var(--b_inv); color:var(--f_inv); text-decoration:none }
@media (min-width: 720px) {
#ronin #wrapper #commander { width:350px; }
#ronin.hidden #wrapper #commander { margin-left:-380px; }
#ronin #surface,#ronin #guide { left:380px; }
}
<script src="../Library.js"></script>
<script src="../Lain.js"></script>
<script src="../Surface.js"></script>
<script src="../util.js"></script>
</style>
<link rel="stylesheet" type="text/css" href="../../assets/main.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/theme.css"/>
</head>
<body>
<script type="module">
import Client from './Client.js'
<script>
const client = new Client()
client.install(document.body)
window.addEventListener('load', () => {
client.start()
})
window.client = client
</script>
</body>

1
src/browser/index.js
View File

@ -1,5 +1,4 @@
import Path from 'path'
import FS from 'fs/promises'
import http from 'http'
const root = Path.join(__dirname, '../')

11
src/cli/Client.js
View File

@ -1,9 +1,4 @@
import Lain from "../Lain.js";
import Library from "../Library.js";
import NodeSurface from "./NodeSurface.js";
import Source from "./Source.js";
import Path from 'path'
import FS from 'fs/promises'
import { Image, Path2D } from "@napi-rs/canvas";
// Polyfill
@ -60,7 +55,7 @@ function Client(directory) {
out = this.cache.get(key)
if(out) {
return Promise.resolve(out)
return out
} else {
return openImage(key)
}
@ -78,7 +73,7 @@ function Client(directory) {
}
const openImage = async (key) => {
let buf = await FS.readFile(key)
let buf = await Bun.file(key).arrayBuffer()
.catch(err => {
console.error('Source', `Could not load image at path "${key}"`, err)
process.exit()
@ -91,4 +86,4 @@ function Client(directory) {
}
}
export default Client
global.Client = Client

4
src/cli/NodeSurface.js
View File

@ -1,6 +1,4 @@
import { createCanvas } from "@napi-rs/canvas"
import Surface from "../Surface.js"
import { classExtends } from "../util.js"
function noop () {}
@ -41,4 +39,4 @@ function NodeSurface (client) {
}
}
export default NodeSurface
global.NodeSurface = NodeSurface

5
src/cli/Source.js
View File

@ -1,4 +1,3 @@
import FS from 'fs'
import Path from 'path'
function Source (client) {
@ -8,8 +7,8 @@ function Source (client) {
path = Path.isAbsolute(`${name}.${ext}`) ? path : Path.join(client.workingDirectory, path)
return FS.writeFileSync(path, content)
return Bun.write(path, content)
}
}
export default Source
global.Source = Source

13
src/cli/index.js
View File

@ -1,6 +1,13 @@
import "../Lain.js"
import "../Library.js"
import "../util.js"
import "../Surface.js"
import "./Source.js"
import "./NodeSurface.js"
import "./Client.js"
import Path from 'path'
import FS from 'fs'
import Client from './Client.js'
let target = process.argv[2],
client = new Client(process.cwd())
@ -8,6 +15,6 @@ let target = process.argv[2],
if(!Path.isAbsolute(target) )
target = Path.join(client.workingDirectory, target)
let program = FS.readFileSync(target, 'utf8')
let program = await Bun.file(target).text()
client.run(process.argv.slice(3), program)

4
src/util.js
View File

@ -12,6 +12,4 @@ function classExtends (context, parentConstructor, ...superArgs) {
}
}
export {
classExtends
}
global.classExtends = classExtends