566 lines
17 KiB
HTML
566 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Editor - NeoIDE</title>
|
|
|
|
<link href="src/index.css" rel="stylesheet" />
|
|
<link href="src/editor.css" rel="stylesheet" />
|
|
|
|
<meta name="author" content="ddededodediamante">
|
|
<meta name="description" content="Create and share games using visual block-coding, inspired by Scratch.">
|
|
<meta name="keywords"
|
|
content="NeoIDE, block coding, Scratch, visual programming, game maker, coding for kids, online coding">
|
|
<meta name="theme-color" content="#3b82f6">
|
|
<meta property="og:title" content="NeoIDE">
|
|
<meta property="og:image" content="icons/NeoIDE.svg">
|
|
<meta property="og:type" content="website">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="NeoIDE">
|
|
<meta name="twitter:description" content="Create and share games using visual block-coding, inspired by Scratch.">
|
|
<meta name="twitter:image" content="icons/NeoIDE.svg">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div>
|
|
<img src="/icons/NeoIDE.svg" alt="NeoIDE logo" class="logo" onclick="location.href='/'" style="cursor: pointer;">
|
|
<button id="theme-button">
|
|
<i class="fa-solid fa-paintbrush"></i>
|
|
Appearance
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<input type="text" id="project-name-input" placeholder="Untitled Project" maxlength="50">
|
|
</div>
|
|
<div>
|
|
<button id="save-button">
|
|
<i class="fa-solid fa-file-arrow-up"></i>
|
|
Save
|
|
</button>
|
|
<button id="load-button">
|
|
<i class="fa-solid fa-file-arrow-down"></i>
|
|
Load
|
|
</button>
|
|
<input type="file" id="load-input" class="hidden" accept=".neo, .neoz" />
|
|
<!--
|
|
<button id="liveshare-button">
|
|
<i class="fa-solid fa-share-from-square"></i>
|
|
Live Share
|
|
</button>
|
|
-->
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main">
|
|
<div class="left-panel">
|
|
<div class="tab-header">
|
|
<button class="tab-button" data-tab="code">Code</button>
|
|
<button class="tab-button inactive" data-tab="costumes">Costumes</button>
|
|
<button class="tab-button inactive" data-tab="sounds">Sounds</button>
|
|
</div>
|
|
|
|
<div id="code-tab" class="tab-content active">
|
|
<div id="blocklyDiv"></div>
|
|
</div>
|
|
|
|
<div id="costumes-tab" class="tab-content tab-section">
|
|
<h2>Costumes</h2>
|
|
<div id="costumes-list"></div>
|
|
<input type="file" id="costume-upload" accept="image/*">
|
|
</div>
|
|
|
|
<div id="sounds-tab" class="tab-content tab-section">
|
|
<h2>Sounds</h2>
|
|
<div id="sounds-list"></div>
|
|
<input type="file" id="sound-upload" accept="audio/*" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div id="stage-div">
|
|
<div id="stage-controls">
|
|
<button id="run-button">
|
|
<img src="icons/flag.svg">
|
|
</button>
|
|
<button id="stop-button">
|
|
<img src="icons/stop.svg">
|
|
</button>
|
|
<button id="fullscreen-button">
|
|
<img src="icons/fullscreen.svg">
|
|
</button>
|
|
</div>
|
|
|
|
<div id="stage-wrapper">
|
|
<div id="stage"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sprite-info">
|
|
<p>Loading...</p>
|
|
</div>
|
|
|
|
<div id="sprites-section">
|
|
<h3>Sprites</h3>
|
|
<div id="sprites-list"></div>
|
|
<div id="sprites-section-buttons">
|
|
<button id="add-sprite-button" class="primary">
|
|
<i class="fa-solid fa-plus"></i>
|
|
Add Sprite
|
|
</button>
|
|
<button id="delete-sprite-button" class="danger">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
Delete Sprite
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="backdrops-section">
|
|
<h3>Backdrops</h3>
|
|
<div id="backdrops-list"></div>
|
|
<div id="backdrops-section-buttons">
|
|
<button id="add-backdrop-button" class="primary">
|
|
<i class="fa-solid fa-plus"></i>
|
|
Add Backdrop
|
|
</button>
|
|
<button id="delete-backdrop-button" class="danger">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
Delete Backdrop
|
|
</button>
|
|
</div>
|
|
<input type="file" id="backdrop-upload" class="hidden" accept="image/*" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="extensions-popup hidden" id="extensions-popup">
|
|
<header>
|
|
<h2>Extensions List</h2>
|
|
<button id="extensions-custom-button" class="orange">
|
|
<i class="fa-solid fa-plus"></i>
|
|
Load Custom
|
|
</button>
|
|
<button class="danger" onclick="document.getElementById('extensions-popup').classList.add('hidden')">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
Close
|
|
</button>
|
|
</header>
|
|
|
|
<div class="extensions-list"></div>
|
|
</div>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<category name="Events" colour="#ffc400">
|
|
<block type="when_flag_clicked"></block>
|
|
<block type="project_timer"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="when_key_clicked"></block>
|
|
<block type="when_stage_clicked"></block>
|
|
<block type="when_timer_reaches"></block>
|
|
<block type="every_seconds"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="when_custom_event_triggered"></block>
|
|
<block type="trigger_custom_event"></block>
|
|
</category>
|
|
|
|
<category name="Control" colour="#FFAB19">
|
|
<block type="wait_one_frame"></block>
|
|
<block type="wait_block">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">2</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<sep gap="50"></sep>
|
|
<block type="controls_if"></block>
|
|
<block type="controls_repeat_ext">
|
|
<value name="TIMES">
|
|
<shadow type="math_number">
|
|
<field name="NUM">2</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_whileUntil"></block>
|
|
<block type="controls_flow_statements"></block>
|
|
<block type="controls_stopscript"></block>
|
|
<block type="controls_run_instantly"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="controls_thread_current"></block>
|
|
<block type="controls_thread_create"></block>
|
|
<block type="controls_thread_set_var">
|
|
<value name="THREAD">
|
|
<shadow type="controls_thread_current"></shadow>
|
|
</value>
|
|
<value name="NAME">
|
|
<shadow type="text">
|
|
<field name="TEXT">name</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="VALUE">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="controls_thread_get_var">
|
|
<value name="THREAD">
|
|
<shadow type="controls_thread_current"></shadow>
|
|
</value>
|
|
<value name="NAME">
|
|
<shadow type="text">
|
|
<field name="TEXT">name</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
</category>
|
|
|
|
<category name="Functions" colour="#FF6680" custom="FUNCTIONS_CATEGORY"></category>
|
|
|
|
<sep></sep>
|
|
|
|
<category name="Motion" colour="#4C97FF">
|
|
<block type="move_steps">
|
|
<value name="STEPS">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="goto_position">
|
|
<value name="x">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="y">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="set_position">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="change_position">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="get_position"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="point_towards">
|
|
<value name="x">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="y">
|
|
<shadow type="math_number">
|
|
<field name="NUM">0</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="angle_set">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">15</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="angle_turn">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">15</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="get_angle"></block>
|
|
</category>
|
|
|
|
<category name="Looks" colour="#9966FF">
|
|
<block type="looks_hide_sprite"></block>
|
|
<block type="looks_show_sprite"></block>
|
|
<block type="looks_isVisible"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="switch_backdrop"></block>
|
|
<block type="say_message">
|
|
<value name="MESSAGE">
|
|
<shadow type="text">
|
|
<field name="TEXT">Hello!</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="say_message_duration">
|
|
<value name="MESSAGE">
|
|
<shadow type="text">
|
|
<field name="TEXT">Hello!</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="DURATION">
|
|
<shadow type="math_number">
|
|
<field name="NUM">2</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<sep gap="50"></sep>
|
|
<block type="switch_costume">
|
|
<value name="COSTUME">
|
|
<shadow type="text">
|
|
<field name="TEXT">default</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="get_costume_size"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="set_size">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="change_size">
|
|
<value name="AMOUNT">
|
|
<shadow type="math_number">
|
|
<field name="NUM">10</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="get_sprite_scale"></block>
|
|
</category>
|
|
|
|
<category name="Sounds" colour="#ff66ba">
|
|
<block type="play_sound">
|
|
<value name="name">
|
|
<shadow type="text">
|
|
<field name="TEXT">hey</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="stop_sound">
|
|
<value name="name">
|
|
<shadow type="text">
|
|
<field name="TEXT">hey</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="stop_all_sounds"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="set_sound_property">
|
|
<value name="value">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="get_sound_property"></block>
|
|
</category>
|
|
|
|
<sep></sep>
|
|
|
|
<category name="Operators" colour="#59ba57">
|
|
<label text="Logic"></label>
|
|
|
|
<block type="logic_compare"></block>
|
|
<block type="logic_operation"></block>
|
|
<block type="logic_negate"></block>
|
|
<block type="logic_boolean"></block>
|
|
<block type="logic_null"></block>
|
|
<block type="logic_ternary"></block>
|
|
|
|
<label text="Math"></label>
|
|
|
|
<block type="math_number">
|
|
<field name="NUM">0</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="math_single"></block>
|
|
<block type="math_trig"></block>
|
|
<block type="math_constant"></block>
|
|
<block type="math_number_property"></block>
|
|
<block type="math_round"></block>
|
|
<block type="math_on_list"></block>
|
|
<block type="math_modulo"></block>
|
|
<block type="math_constrain">
|
|
<value name="LOW">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="HIGH">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_int">
|
|
<value name="FROM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">1</field>
|
|
</shadow>
|
|
</value>
|
|
<value name="TO">
|
|
<shadow type="math_number">
|
|
<field name="NUM">100</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="math_random_float"></block>
|
|
|
|
<label text="Text"></label>
|
|
|
|
<block type="text"></block>
|
|
<block type="text_join"></block>
|
|
<block type="text_append">
|
|
<value name="TEXT">
|
|
<shadow type="text"></shadow>
|
|
</value>
|
|
</block>
|
|
<block type="text_length"></block>
|
|
<block type="text_isEmpty"></block>
|
|
<block type="text_indexOf"></block>
|
|
<block type="text_charAt"></block>
|
|
<block type="text_getSubstring"></block>
|
|
<block type="text_changeCase"></block>
|
|
<block type="text_trim"></block>
|
|
<block type="text_print"></block>
|
|
<block type="text_prompt_ext"></block>
|
|
</category>
|
|
|
|
<category name="System" colour="#5CB1D6">
|
|
<block type="key_pressed"></block>
|
|
<block type="all_keys_pressed"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="mouse_button_pressed"></block>
|
|
<block type="mouse_over"></block>
|
|
<block type="get_mouse_position"></block>
|
|
<sep gap="50"></sep>
|
|
<block type="window_size"></block>
|
|
</category>
|
|
|
|
<category name="Lists" colour="#e35340">
|
|
<block type="lists_create_with">
|
|
<mutation items="2"></mutation>
|
|
</block>
|
|
<block type="lists_repeat">
|
|
<value name="NUM">
|
|
<shadow type="math_number">
|
|
<field name="NUM">5</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<sep gap="50"></sep>
|
|
<block type="lists_length"></block>
|
|
<block type="lists_isEmpty"></block>
|
|
<block type="lists_indexOf"></block>
|
|
<block type="lists_find">
|
|
<value name="method">
|
|
<block type="logic_compare">
|
|
<field name="OP">EQ</field>
|
|
<value name="A">
|
|
<block type="lists_filter_item"></block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">0</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
<block type="lists_getIndex_modified"></block>
|
|
<block type="lists_setIndex_modified"></block>
|
|
<block type="lists_getSublist"></block>
|
|
<block type="lists_split">
|
|
<value name="DELIM">
|
|
<shadow type="text">
|
|
<field name="TEXT">,</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="lists_merge"></block>
|
|
<block type="lists_sort"></block>
|
|
<block type="lists_filter">
|
|
<value name="method">
|
|
<block type="logic_compare">
|
|
<field name="OP">EQ</field>
|
|
<value name="A">
|
|
<block type="lists_filter_item"></block>
|
|
</value>
|
|
<value name="B">
|
|
<block type="math_number">
|
|
<field name="NUM">0</field>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
</value>
|
|
</block>
|
|
<sep gap="50"></sep>
|
|
<block type="lists_foreach"></block>
|
|
<block type="lists_filter_item"></block>
|
|
</category>
|
|
|
|
<category name="Objects" colour="#ff8349">
|
|
<block type="json_create_statement"></block>
|
|
<block type="json_key_value_statement">
|
|
<value name="KEY">
|
|
<shadow type="text">
|
|
<field name="TEXT"></field>
|
|
</shadow>
|
|
</value>
|
|
<value name="VALUE">
|
|
<shadow type="text">
|
|
<field name="TEXT"></field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<sep gap="50"></sep>
|
|
<block type="json_has_key">
|
|
<value name="KEY">
|
|
<shadow type="text">
|
|
<field name="TEXT">key</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="json_get">
|
|
<value name="KEY">
|
|
<shadow type="text">
|
|
<field name="TEXT">key</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="json_set">
|
|
<value name="KEY">
|
|
<shadow type="text">
|
|
<field name="TEXT">key</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="json_delete">
|
|
<value name="KEY">
|
|
<shadow type="text">
|
|
<field name="TEXT">key</field>
|
|
</shadow>
|
|
</value>
|
|
</block>
|
|
<block type="json_property_list"></block>
|
|
<block type="json_parse"></block>
|
|
<block type="json_clone"></block>
|
|
</category>
|
|
|
|
<category name="Variables" colour="#FF8C1A" custom="GLOBAL_VARIABLES"></category>
|
|
</xml>
|
|
|
|
<script type="module" src="src/scripts/editor.js"></script>
|
|
</body>
|
|
|
|
</html> |