mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-11-28 08:50:22 +00:00
added welcome splash dialog
This commit is contained in:
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 */
|
image-rendering: pixelated; /* Awesome future-browsers */
|
||||||
-ms-interpolation-mode: nearest-neighbor; /* IE */
|
-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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -290,12 +273,38 @@ div.bitmap_editor {
|
|||||||
Making Games For The Atari 2600</a>
|
Making Games For The Atari 2600</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bitmap_editor" style="display:none">
|
<div id="welcomeModal" class="modal fade">
|
||||||
PC: $<span id="bitmap_editor_pc">0000</span>
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
X: <span id="bitmap_editor_x">0</span>
|
<div class="modal-content">
|
||||||
Y: <span id="bitmap_editor_y">0</span>
|
<div class="modal-header">
|
||||||
Dest: $<span id="bitmap_editor_dest">0000/0</span>
|
<h3 class="modal-title">Welcome to 8bitworkshop!</h3>
|
||||||
<canvas width="32" height="32" id="bitmap_editor_canvas"/>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script src="jquery/jquery-2.2.3.min.js"></script>
|
<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/MasterChannel.js"></script>
|
||||||
<script src="tss/js/tss/AudioLooper.js"></script>
|
<script src="tss/js/tss/AudioLooper.js"></script>
|
||||||
<script src="tss/js/Log.js"></script>
|
<script src="tss/js/Log.js"></script>
|
||||||
|
<!--
|
||||||
<script src="local/williams/defender.js"></script>
|
<script src="local/williams/defender.js"></script>
|
||||||
<script src="local/williams/robotron.js"></script>
|
<script src="local/williams/robotron.js"></script>
|
||||||
<script src="local/atarivec/gravitar/gravitar.js"></script>
|
<script src="local/atarivec/gravitar/gravitar.js"></script>
|
||||||
|
-->
|
||||||
<script src="FileSaver.js/FileSaver.min.js"></script>
|
<script src="FileSaver.js/FileSaver.min.js"></script>
|
||||||
<script src="octokat.js/dist/octokat.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/util.js"></script>
|
||||||
<script src="src/disasm.js"></script>
|
<script src="src/disasm.js"></script>
|
||||||
<script src="src/ui.js"></script>
|
<script src="src/ui.js"></script>
|
||||||
<script src="src/audio/votrax.js"></script>
|
<!-- <script src="src/audio/votrax.js"></script> -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
showWelcomeMessage();
|
|
||||||
startUI(true);
|
startUI(true);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -30,12 +30,6 @@ __asm
|
|||||||
; set up stack pointer, interrupt flag
|
; set up stack pointer, interrupt flag
|
||||||
LD SP,#0xE800
|
LD SP,#0xE800
|
||||||
DI
|
DI
|
||||||
; copy initialized data
|
|
||||||
LD BC, #l__INITIALIZER
|
|
||||||
LD A, B
|
|
||||||
LD DE, #s__INITIALIZED
|
|
||||||
LD HL, #s__INITIALIZER
|
|
||||||
LDIR
|
|
||||||
__endasm;
|
__endasm;
|
||||||
main();
|
main();
|
||||||
}
|
}
|
||||||
@ -176,7 +170,7 @@ void ay8910test() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
palette = 2;
|
palette = 0;
|
||||||
memcpy(tileram, font8x8, sizeof(font8x8));
|
memcpy(tileram, font8x8, sizeof(font8x8));
|
||||||
memset(cellram, CHAR(' '), sizeof(cellram));
|
memset(cellram, CHAR(' '), sizeof(cellram));
|
||||||
draw_box(0,0,27,31,BOX_CHARS);
|
draw_box(0,0,27,31,BOX_CHARS);
|
||||||
|
@ -401,6 +401,7 @@ var Base6502Platform = function() {
|
|||||||
if (fn.endsWith(".s")) return "ca65";
|
if (fn.endsWith(".s")) return "ca65";
|
||||||
return "dasm";
|
return "dasm";
|
||||||
}
|
}
|
||||||
|
this.getDefaultExtension = function() { return ".a"; };
|
||||||
}
|
}
|
||||||
|
|
||||||
function dumpRAM(ram, ramofs, ramlen) {
|
function dumpRAM(ram, ramofs, ramlen) {
|
||||||
@ -588,6 +589,7 @@ var BaseZ80Platform = function() {
|
|||||||
if (fn.endsWith(".s")) return "sdasz80";
|
if (fn.endsWith(".s")) return "sdasz80";
|
||||||
return "z80asm";
|
return "z80asm";
|
||||||
}
|
}
|
||||||
|
this.getDefaultExtension = function() { return ".c"; };
|
||||||
// TODO
|
// TODO
|
||||||
//this.getOpcodeMetadata = function() { }
|
//this.getOpcodeMetadata = function() { }
|
||||||
}
|
}
|
||||||
@ -646,6 +648,7 @@ var Base6809Platform = function() {
|
|||||||
// TODO: don't create new CPU
|
// 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);
|
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() { }
|
//this.getOpcodeMetadata = function() { }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -123,6 +123,7 @@ var VCSPlatform = function() {
|
|||||||
this.getToolForFilename = function(fn) {
|
this.getToolForFilename = function(fn) {
|
||||||
return "dasm";
|
return "dasm";
|
||||||
}
|
}
|
||||||
|
this.getDefaultExtension = function() { return ".a"; };
|
||||||
};
|
};
|
||||||
|
|
||||||
PLATFORMS['vcs'] = VCSPlatform;
|
PLATFORMS['vcs'] = VCSPlatform;
|
||||||
|
@ -64,7 +64,7 @@ var VicDualPlatform = function(mainElement) {
|
|||||||
for (var xx=0; xx<32; xx++) {
|
for (var xx=0; xx<32; xx++) {
|
||||||
var code = ram.mem[vramofs+xx];
|
var code = ram.mem[vramofs+xx];
|
||||||
var data = ram.mem[0x800 + (code<<3) + yy];
|
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 color1 = palette[(colorprom[col] >> 1) & 7];
|
||||||
var color2 = palette[(colorprom[col] >> 5) & 7];
|
var color2 = palette[(colorprom[col] >> 5) & 7];
|
||||||
for (var i=0; i<8; i++) {
|
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");
|
var filename = prompt("Create New File", "newfile.a");
|
||||||
if (filename && filename.length) {
|
if (filename && filename.length) {
|
||||||
if (filename.indexOf(".") < 0) {
|
if (filename.indexOf(".") < 0) {
|
||||||
filename += ".a";
|
filename += platform.getDefaultExtension();
|
||||||
}
|
}
|
||||||
qs['file'] = "local/" + filename;
|
qs['file'] = "local/" + filename;
|
||||||
gotoNewLocation();
|
gotoNewLocation();
|
||||||
@ -1038,9 +1038,27 @@ function setupDebugControls(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function showWelcomeMessage() {
|
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
|
// Instance the tour
|
||||||
|
var is_vcs = platform_id == 'vcs';
|
||||||
var tour = new Tour({
|
var tour = new Tour({
|
||||||
autoscroll:false,
|
autoscroll:false,
|
||||||
//storage:false,
|
//storage:false,
|
||||||
@ -1048,13 +1066,14 @@ function showWelcomeMessage() {
|
|||||||
{
|
{
|
||||||
element: "#editor",
|
element: "#editor",
|
||||||
title: "Welcome to 8bitworkshop!",
|
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",
|
element: "#emulator",
|
||||||
placement: 'left',
|
placement: 'left',
|
||||||
title: "Atari VCS Emulator",
|
title: "Emulator",
|
||||||
content: "This is an emulator for the Atari VCS/2600. We'll load your assembled code into the emulator whenever you make changes.",
|
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",
|
element: "#preset_select",
|
||||||
@ -1065,12 +1084,12 @@ function showWelcomeMessage() {
|
|||||||
element: "#debug_bar",
|
element: "#debug_bar",
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
title: "Debug Tools",
|
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",
|
element: "#dropdownMenuButton",
|
||||||
title: "Main Menu",
|
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();
|
tour.init();
|
||||||
@ -1109,6 +1128,7 @@ function startPlatform() {
|
|||||||
platform = new PLATFORMS[platform_id]($("#emulator")[0]);
|
platform = new PLATFORMS[platform_id]($("#emulator")[0]);
|
||||||
PRESETS = platform.getPresets();
|
PRESETS = platform.getPresets();
|
||||||
if (qs['file']) {
|
if (qs['file']) {
|
||||||
|
showWelcomeMessage();
|
||||||
// start platform and load file
|
// start platform and load file
|
||||||
preloadWorker(qs['file']);
|
preloadWorker(qs['file']);
|
||||||
setupDebugControls();
|
setupDebugControls();
|
||||||
|
Loading…
Reference in New Issue
Block a user