Skip to content

Commit

Permalink
Updates to UI strings.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yrammos
yrammos committed Sep 14, 2024
1 parent b2f3bf4 commit ae11371
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 66 deletions.
2 changes: 1 addition & 1 deletion dist/css/bundle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ body {
}

#random-button::after {
content: "Random Score";
content: "New Random Score";
font-size: 3vw;
}

Expand Down
154 changes: 90 additions & 64 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bundle.css">
<link rel="stylesheet" type="text/css" href="css/bundle.css" />
<title>Mozart Dice Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body class="theme-ocean">

<div id="loading-container">
<div class="sk-circle">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body class="theme-ocean">
<div id="loading-container">
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
Expand All @@ -25,19 +27,19 @@
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
</div>
</div>

<div id="selection-container">
<div id="exit-button" class="circle">Confirm</div>
<div id="selection-container">
<div id="exit-button" class="circle">Confirm</div>

<div id="instrum-container">
<div id="instrum-container">
<!-- <div id="piano-button" class="circle highlight"></div>
<div id="clav-button" class="circle"></div>
<div id="harpsi-button" class="circle"></div> -->
</div>
</div>

<div id="minuet-container" >
<div id="minuet-container">
<div id="min-0" class="circle" data-number="2"></div>
<div id="min-1" class="circle" data-number="3"></div>
<div id="min-2" class="circle" data-number="4"></div>
Expand All @@ -49,66 +51,90 @@
<div id="min-8" class="circle" data-number="10"></div>
<div id="min-9" class="circle" data-number="11"></div>
<div id="min-10" class="circle" data-number="12"></div>
</div>
</div>
</div>

<div id="main-container">
<select id="themeSelector" onchange="setTheme(this.value)">
<div id="main-container">
<select id="themeSelector" onchange="setTheme(this.value)">
<option value="">Default</option>
<option value="theme-ocean">Ocean</option>
<option value="theme-night-sky">Night Sky</option>
<option value="theme-modern">Modern</option>
<option value="theme-nature">Nature</option>
<option value="theme-elegant">Elegant</option>
<!-- <option value="theme-soft">Soft</option> -->
</select>
</select>

<div id="sheet-container"></div>
<div id="sheet-container"></div>

<div id="options-container">
<div id="play-button"></div>
<!-- <div id="instrum-button"></div> -->
<div id="reset-button"></div>
<div id="random-button"></div>
</div>
<div id="options-container">
<div id="play-button"></div>
<!-- <div id="instrum-button"></div> -->
<div id="reset-button"></div>
<div id="random-button"></div>
</div>

<div id="music-icon-container">
<svg id="music-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="music-note", fill="currentColor" d="M13 13V8.5c0-.83-.67-1.5-1.5-1.5S10 7.67 10 8.5v9.74l-3.43-.72c-.08-.01-.15-.03-.23-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13z"/>
<path class="music-score", fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M4 5 L20 5 M4 8 L20 8 M4 11 L20 11"></path>
<circle cx="6" cy="3.5" r="1.5" fill="currentColor"/>
<circle cx="18" cy="8" r="1.5" fill="currentColor"/>
<circle cx="7.8" cy="9.5" r="1.5" fill="currentColor"/>
<div id="music-icon-container">
<span id="dicing-prompt"
>Cast two dice &#127922; &#127922;... then tap on any slot.</span
>
<svg
id="music-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
class="music-note"
,
fill="currentColor"
d="M13 13V8.5c0-.83-.67-1.5-1.5-1.5S10 7.67 10 8.5v9.74l-3.43-.72c-.08-.01-.15-.03-.23-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13z"
/>
<path
class="music-score"
,
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
d="M4 5 L20 5 M4 8 L20 8 M4 11 L20 11"
></path>
<circle cx="6" cy="3.5" r="1.5" fill="currentColor" />
<circle cx="18" cy="8" r="1.5" fill="currentColor" />
<circle cx="7.8" cy="9.5" r="1.5" fill="currentColor" />
</svg>
<span id="dicing-prompt">Click on the score to start dicing!</span>
</div>
</div>

<div id="play-container">
<div id="slot-0" class="slots"></div>
<div id="slot-1" class="slots"></div>
<div id="slot-2" class="slots"></div>
<div id="slot-3" class="slots"></div>
<div id="slot-4" class="slots"></div>
<div id="slot-5" class="slots"></div>
<div id="slot-6" class="slots"></div>
<div id="slot-7" class="slots"></div>
<div id="slot-8" class="slots"></div>
<div id="slot-9" class="slots"></div>
<div id="slot-10" class="slots"></div>
<div id="slot-11" class="slots"></div>
<div id="slot-12" class="slots"></div>
<div id="slot-13" class="slots"></div>
<div id="slot-14" class="slots"></div>
<div id="slot-15" class="slots"></div>
</div>
</div>
<div id="play-container">
<div id="slot-0" class="slots"></div>
<div id="slot-1" class="slots"></div>
<div id="slot-2" class="slots"></div>
<div id="slot-3" class="slots"></div>
<div id="slot-4" class="slots"></div>
<div id="slot-5" class="slots"></div>
<div id="slot-6" class="slots"></div>
<div id="slot-7" class="slots"></div>
<div id="slot-8" class="slots"></div>
<div id="slot-9" class="slots"></div>
<div id="slot-10" class="slots"></div>
<div id="slot-11" class="slots"></div>
<div id="slot-12" class="slots"></div>
<div id="slot-13" class="slots"></div>
<div id="slot-14" class="slots"></div>
<div id="slot-15" class="slots"></div>
</div>
</div>

<script>
function setTheme(themeName) {
<script>
function setTheme(themeName) {
document.documentElement.className = themeName;
}
</script>
<script language="javascript" type="text/javascript" src="js/LT.js"></script>

</body>
}
</script>
<script
language="javascript"
type="text/javascript"
src="js/LT.js"
></script>
</body>
</html>
2 changes: 1 addition & 1 deletion dist/js/LT.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@
// update the currently selected slot
app.currentSlot = i;
// update confirm(exit) button text
exitButton.textContent = `Confirm\nM${i + 1}`;
exitButton.textContent = `Update \nmeasure ${i + 1}`;
}.bind(this));

app.gameModel.allSlots.push(slot);
Expand Down

0 comments on commit ae11371

Please sign in to comment.