first commit
Auric Vente
|
|
@ -0,0 +1,53 @@
|
|||
@font-face {
|
||||
font-family: mordred;
|
||||
src: url(mordred.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
color: black;
|
||||
background-color: #F0E0D6;
|
||||
font-family: mordred;
|
||||
font-size: 18px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#words {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.6rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.word {
|
||||
font-size: 3rem;
|
||||
animation-name: fadein;
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: linear;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#card {
|
||||
padding-bottom: 2rem;
|
||||
animation-name: fadein;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: linear;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 318 B |
|
|
@ -0,0 +1,24 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Oracle</title>
|
||||
<link rel="shortcut icon" href="favicon.ico?v=1" type="image/x-icon">
|
||||
<script src="js/base.js"></script>
|
||||
<script src="js/words.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
App.init()
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="words"></div>
|
||||
</div>
|
||||
|
||||
<audio preload class="sound" id="atmo" src="audio/atmo.mp3"></audio>
|
||||
<audio preload class="sound" id="pup" src="audio/pup.mp3"></audio>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
const App = {}
|
||||
App.show_delay = 1441
|
||||
|
||||
App.init = () => {
|
||||
App.set_volume()
|
||||
App.play(`atmo`)
|
||||
|
||||
setTimeout(() => {
|
||||
App.show_word()
|
||||
}, App.show_delay)
|
||||
|
||||
setTimeout(() => {
|
||||
App.show_word()
|
||||
}, App.show_delay * 2)
|
||||
|
||||
setTimeout(() => {
|
||||
App.show_word()
|
||||
}, App.show_delay * 3)
|
||||
|
||||
setTimeout(() => {
|
||||
App.show_card()
|
||||
}, App.show_delay * 4)
|
||||
}
|
||||
|
||||
App.show_word = () => {
|
||||
let word = App.words[App.get_random_int(0, App.words.length - 1)]
|
||||
let el = document.createElement(`div`)
|
||||
el.textContent = word
|
||||
el.classList.add(`word`)
|
||||
App.el(`#words`).append(el)
|
||||
el.style.opacity = 1
|
||||
App.play(`pup`)
|
||||
}
|
||||
|
||||
App.show_card = () => {
|
||||
let n = App.get_random_int(1, 22)
|
||||
let fname = `deck/${n}.gif`
|
||||
|
||||
let img = document.createElement(`img`)
|
||||
img.id = `card`
|
||||
img.src = fname
|
||||
|
||||
App.el(`#container`).append(img)
|
||||
img.style.opacity = 1
|
||||
}
|
||||
|
||||
App.play = (what) => {
|
||||
App.el(`#${what}`).pause()
|
||||
App.el(`#${what}`).currentTime = 0
|
||||
App.el(`#${what}`).play()
|
||||
}
|
||||
|
||||
App.set_volume = () => {
|
||||
App.el(`#atmo`).volume = 0.45
|
||||
}
|
||||
|
||||
App.get_random_int = (min, max) => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
App.el = (query, root = document) => {
|
||||
return root.querySelector(query)
|
||||
}
|
||||