mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-12-25 00:31:04 +00:00
added welcome splash dialog
This commit is contained in:
Steven Hugg
parent
1ca9d50801
commit
29117e7cb6
BIN
images/arcadegames.jpg
Normal file
BIN
images/arcadegames.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
images/atarivcs.jpg
Normal file
BIN
images/atarivcs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
62
index.html
62
index.html
@ -184,23 +184,6 @@ canvas.pixelated {
|
||||
image-rendering: pixelated; /* Awesome future-browsers */
|
||||
-ms-interpolation-mode: nearest-neighbor; /* IE */
|
||||
}
|
||||
div.bitmap_editor {
|
||||
position: fixed;
|
||||
left: 2%;
|
||||
width: 46%;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
background-color: #333;
|
||||
border-color: #fff;
|
||||
border-style: ridge;
|
||||
border-radius: 16px;
|
||||
color: #66ff66;
|
||||
white-space: pre;
|
||||
padding: 20px;
|
||||
z-index: 9;
|
||||
font-family: "Andale Mono", "Menlo", "Lucida Console", monospace;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -290,12 +273,38 @@ div.bitmap_editor {
|
||||
Making Games For The Atari 2600</a>
|
||||
</div>
|
||||
|
||||
<div class="bitmap_editor" style="display:none">
|
||||
PC: $<span id="bitmap_editor_pc">0000</span>
|
||||
X: <span id="bitmap_editor_x">0</span>
|
||||
Y: <span id="bitmap_editor_y">0</span>
|
||||
Dest: $<span id="bitmap_editor_dest">0000/0</span>
|
||||
<canvas width="32" height="32" id="bitmap_editor_canvas"/>
|
||||
<div id="welcomeModal" class="modal fade">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Welcome to 8bitworkshop!</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>What would you like to start programming?</p>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<img data-dismiss="modal" class="img-responsive" data-platform="vcs" src="images/atarivcs.jpg" alt="Atari 2600 four-switch wood veneer version, dating from 1980-1982 (photo by Evan Amos)"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<img data-dismiss="modal" class="img-responsive" data-platform="vicdual" src="images/arcadegames.jpg" alt="Galaxian arcade system board (photo by Dennis van Zuijlekom, CC BY-SA 2.0)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-md-offset-2">
|
||||
<button type="button" class="btn btn-secondary" data-platform="vcs" data-dismiss="modal">Atari VCS</button>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-offset-2">
|
||||
<button type="button" class="btn btn-secondary" data-platform="vicdual" data-dismiss="modal">Arcade Games</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="jquery/jquery-2.2.3.min.js"></script>
|
||||
@ -326,11 +335,11 @@ Dest: $<span id="bitmap_editor_dest">0000/0</span>
|
||||
<script src="tss/js/tss/MasterChannel.js"></script>
|
||||
<script src="tss/js/tss/AudioLooper.js"></script>
|
||||
<script src="tss/js/Log.js"></script>
|
||||
|
||||
<!--
|
||||
<script src="local/williams/defender.js"></script>
|
||||
<script src="local/williams/robotron.js"></script>
|
||||
<script src="local/atarivec/gravitar/gravitar.js"></script>
|
||||
|
||||
-->
|
||||
<script src="FileSaver.js/FileSaver.min.js"></script>
|
||||
<script src="octokat.js/dist/octokat.js"></script>
|
||||
|
||||
@ -340,10 +349,9 @@ Dest: $<span id="bitmap_editor_dest">0000/0</span>
|
||||
<script src="src/util.js"></script>
|
||||
<script src="src/disasm.js"></script>
|
||||
<script src="src/ui.js"></script>
|
||||
<script src="src/audio/votrax.js"></script>
|
||||
<!-- <script src="src/audio/votrax.js"></script> -->
|
||||
|
||||
<script>
|
||||
showWelcomeMessage();
|
||||
startUI(true);
|
||||
</script>
|
||||
|
||||
|
||||
@ -30,12 +30,6 @@ __asm
|
||||
; set up stack pointer, interrupt flag
|
||||
LD SP,#0xE800
|
||||
DI
|
||||
; copy initialized data
|
||||
LD BC, #l__INITIALIZER
|
||||
LD A, B
|
||||
LD DE, #s__INITIALIZED
|
||||
LD HL, #s__INITIALIZER
|
||||
LDIR
|
||||
__endasm;
|
||||
main();
|
||||
}
|
||||
@ -176,7 +170,7 @@ void ay8910test() {
|
||||
}
|
||||
|
||||
void main() {
|
||||
palette = 2;
|
||||
palette = 0;
|
||||
memcpy(tileram, font8x8, sizeof(font8x8));
|
||||
memset(cellram, CHAR(' '), sizeof(cellram));
|
||||
draw_box(0,0,27,31,BOX_CHARS);
|
||||
|
||||
@ -401,6 +401,7 @@ var Base6502Platform = function() {
|
||||
if (fn.endsWith(".s")) return "ca65";
|
||||
return "dasm";
|
||||
}
|
||||
this.getDefaultExtension = function() { return ".a"; };
|
||||
}
|
||||
|
||||
function dumpRAM(ram, ramofs, ramlen) {
|
||||
@ -588,6 +589,7 @@ var BaseZ80Platform = function() {
|
||||
if (fn.endsWith(".s")) return "sdasz80";
|
||||
return "z80asm";
|
||||
}
|
||||
this.getDefaultExtension = function() { return ".c"; };
|
||||
// TODO
|
||||
//this.getOpcodeMetadata = function() { }
|
||||
}
|
||||
@ -646,6 +648,7 @@ var Base6809Platform = function() {
|
||||
// TODO: don't create new CPU
|
||||
return new CPU6809().disasm(read(pc), read(pc+1), read(pc+2), read(pc+3), read(pc+4), pc);
|
||||
}
|
||||
this.getDefaultExtension = function() { return ".asm"; };
|
||||
//this.getOpcodeMetadata = function() { }
|
||||
}
|
||||
|
||||
|
||||
@ -123,6 +123,7 @@ var VCSPlatform = function() {
|
||||
this.getToolForFilename = function(fn) {
|
||||
return "dasm";
|
||||
}
|
||||
this.getDefaultExtension = function() { return ".a"; };
|
||||
};
|
||||
|
||||
PLATFORMS['vcs'] = VCSPlatform;
|
||||
|
||||
@ -64,7 +64,7 @@ var VicDualPlatform = function(mainElement) {
|
||||
for (var xx=0; xx<32; xx++) {
|
||||
var code = ram.mem[vramofs+xx];
|
||||
var data = ram.mem[0x800 + (code<<3) + yy];
|
||||
var col = (code>>5) + (palbank<<4);
|
||||
var col = (code>>5) + (palbank<<3);
|
||||
var color1 = palette[(colorprom[col] >> 1) & 7];
|
||||
var color2 = palette[(colorprom[col] >> 5) & 7];
|
||||
for (var i=0; i<8; i++) {
|
||||
|
||||
36
src/ui.js
36
src/ui.js
@ -249,7 +249,7 @@ function _createNewFile(e) {
|
||||
var filename = prompt("Create New File", "newfile.a");
|
||||
if (filename && filename.length) {
|
||||
if (filename.indexOf(".") < 0) {
|
||||
filename += ".a";
|
||||
filename += platform.getDefaultExtension();
|
||||
}
|
||||
qs['file'] = "local/" + filename;
|
||||
gotoNewLocation();
|
||||
@ -1038,9 +1038,27 @@ function setupDebugControls(){
|
||||
}
|
||||
|
||||
function showWelcomeMessage() {
|
||||
if (!localStorage.getItem("8bitworkshop.hello"))
|
||||
{
|
||||
if (!localStorage.getItem("8bitworkshop.splash")) {
|
||||
// OH BOOTSTRAP YOU ARE SO AWESOME A+++++
|
||||
// https://stackoverflow.com/questions/28270333/how-do-i-know-which-button-is-click-when-bootstrap-modal-closes
|
||||
// https://github.com/jschr/bootstrap-modal/issues/224
|
||||
var whichPlatform;
|
||||
$('#welcomeModal button').on('click', function(event) {
|
||||
whichPlatform = $(event.target).data('platform');
|
||||
});
|
||||
$('#welcomeModal img').on('click', function(event) {
|
||||
whichPlatform = $(event.target).data('platform');
|
||||
});
|
||||
$('#welcomeModal').on('hidden.bs.modal', function (event) {
|
||||
localStorage.setItem('8bitworkshop.splash', true);
|
||||
if (whichPlatform && whichPlatform != qs['platform']) {
|
||||
window.location = "?platform=" + whichPlatform;
|
||||
}
|
||||
}).modal('show');
|
||||
}
|
||||
else if (!localStorage.getItem("8bitworkshop.hello")) {
|
||||
// Instance the tour
|
||||
var is_vcs = platform_id == 'vcs';
|
||||
var tour = new Tour({
|
||||
autoscroll:false,
|
||||
//storage:false,
|
||||
@ -1048,13 +1066,14 @@ function showWelcomeMessage() {
|
||||
{
|
||||
element: "#editor",
|
||||
title: "Welcome to 8bitworkshop!",
|
||||
content: "Type your 6502 code on the left side, and it'll be assembled in real-time. All changes are saved to browser local storage.",
|
||||
content: is_vcs ? "Type your 6502 assembly code into the editor, and it'll be assembled in real-time. All changes are saved to browser local storage."
|
||||
: "Type your C source code into the editor, and it'll be compiled in real-time. All changes are saved to browser local storage."
|
||||
},
|
||||
{
|
||||
element: "#emulator",
|
||||
placement: 'left',
|
||||
title: "Atari VCS Emulator",
|
||||
content: "This is an emulator for the Atari VCS/2600. We'll load your assembled code into the emulator whenever you make changes.",
|
||||
title: "Emulator",
|
||||
content: "This is an emulator for the \"" + platform_id + "\" platform. We'll load your compiled code into the emulator whenever you make changes."
|
||||
},
|
||||
{
|
||||
element: "#preset_select",
|
||||
@ -1065,12 +1084,12 @@ function showWelcomeMessage() {
|
||||
element: "#debug_bar",
|
||||
placement: 'bottom',
|
||||
title: "Debug Tools",
|
||||
content: "Use these buttons to set breakpoints, single step through code, pause/resume, and perform timing analysis."
|
||||
content: "Use these buttons to set breakpoints, single step through code, pause/resume, and use debugging tools."
|
||||
},
|
||||
{
|
||||
element: "#dropdownMenuButton",
|
||||
title: "Main Menu",
|
||||
content: "Click the menu to create new files and share your work with others."
|
||||
content: "Click the menu to switch between platforms, create new files, or share your work with others."
|
||||
},
|
||||
]});
|
||||
tour.init();
|
||||
@ -1109,6 +1128,7 @@ function startPlatform() {
|
||||
platform = new PLATFORMS[platform_id]($("#emulator")[0]);
|
||||
PRESETS = platform.getPresets();
|
||||
if (qs['file']) {
|
||||
showWelcomeMessage();
|
||||
// start platform and load file
|
||||
preloadWorker(qs['file']);
|
||||
setupDebugControls();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user