96 lines
2.4 KiB
PHP
96 lines
2.4 KiB
PHP
<?php require ROOT . '/web/partials/head.php'; ?>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
background-color: black;
|
|
max-width: 2200px;
|
|
}
|
|
.game_wrapper {
|
|
max-width: 1500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-family: sans-serif;
|
|
color: white;
|
|
}
|
|
.game_title {
|
|
text-align: center;
|
|
font-size: 1.8rem;
|
|
margin: 20px 0 12px 0;
|
|
}
|
|
canvas.game_canvas {
|
|
width: 100%;
|
|
height: auto;
|
|
/* match this to your actual internal render resolution ratio */
|
|
aspect-ratio: 16 / 9;
|
|
border: 0px none;
|
|
background-color: black;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.too_small_message {
|
|
display: none;
|
|
color: white;
|
|
font-family: sans-serif;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
.game_info {
|
|
max-width: 900px;
|
|
margin: 20px auto 40px auto;
|
|
padding: 0 16px;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
color: #ccc;
|
|
font-size: 0.95rem;
|
|
}
|
|
.game_info strong {
|
|
color: white;
|
|
}
|
|
.game_info a {
|
|
color: #9cf;
|
|
}
|
|
.game_info p {
|
|
margin: 6px 0;
|
|
}
|
|
/* Below this width, hide the canvas and show the message instead */
|
|
@media (max-width: 950px) {
|
|
canvas.game_canvas {
|
|
display: none;
|
|
}
|
|
.too_small_message {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="game_wrapper">
|
|
<h1 class="game_title">Octal Cookie - Chip 8 Simulator</h1>
|
|
|
|
<canvas class="game_canvas" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1" onmousedown="event.target.focus()" onkeydown="event.preventDefault()"></canvas>
|
|
|
|
<div class="game_info">
|
|
<p><strong>Click inside the simulator to focus it</strong>, click outside to release focus.</p>
|
|
<p>Keypad is mapped to <strong>1234 / QWER / ASDF / ZXCV</strong>.</p>
|
|
<hr>
|
|
<p>A CHIP-8 emulator built in Odin and Raylib as a refresher project.</p>
|
|
|
|
<p> Functional Work in progress, not perfect.</p>
|
|
<p> Planned new features when time allows: </p>
|
|
<p><strong>Instruction Quirks with gui to toggle on/off</strong></p>
|
|
<p><strong>Super Chip8 implementation</strong></p>
|
|
</br><a href="https://gitea.sc.koldsoftware.com/jasonhilder/octal_cookie" target="_blank" rel="noopener">View source on Gitea →</a></p>
|
|
</div>
|
|
|
|
<div class="too_small_message">
|
|
Your screen is too small to run this app. Please use a larger window or device.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="/web/static/apps/sim/odin.js"></script>
|
|
<script src="/web/static/apps/sim/init.js"></script>
|
|
<script src="/web/static/apps/sim/index.js"></script>
|
|
|
|
<?php require ROOT . '/web/partials/footer.php'; ?>
|