Toki Pona Boggle

Developer
Eprouver
Size
3,874 Kb
Views
34,408
  1. Toki Pona Boggle Previews
  2. Toki Pona Boggle HTML Codes
  3. Toki Pona Boggle CSS Codes
  4. Toki Pona Boggle JS Codes

How do I make an toki pona boggle?

What is a toki pona boggle? How do you make a toki pona boggle? This script and codes were developed by Eprouver on 19 September 2022, Monday.

Toki Pona Boggle Previews
IQ Test

Toki Pona Boggle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toki Pona Boggle</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="boggle" id="boggle" class="container"> <boggle-board> <div ng-click="shake()"> <div class="row" ng-repeat="ro in r track by $index"> <div class="holder" ng-repeat="co in ro.c track by $index"> <div class="dice" id="letter{{ro.i}}{{$index}}"> <span>{{co}}</span> </div> </div> </div> </div> <br/> <h1 ng-if="foundWords.length == 0">mi lukin e nimi ala</h1> <div ng-if="foundWords.length"> <div ng-if="!bbCtrl.showme"> <div class="btn btn-lg btn-info btn-block animated slideInRight" ng-click="bbCtrl.showme = true">Open ({{foundWords.length}}) </div> </div> <div class="row" ng-if="bbCtrl.showme"> <div class="col-xs-4" ng-repeat="w in foundWords"> <div class="answer animated zoomIn" ng-click="highlight(w.locs)"> <span class="start">{{w.word[0]}}</span><span class="follow">{{w.word.slice(1)}}</span> </div> </div> </div> </div> </boggle-board>
</div>
<br/>
<br/> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Toki Pona Boggle - Script Codes CSS Codes

#boggle{ display:none; width: 80vw; max-width: 600px; margin: 50px auto;
}
.holder{ width: 20%; max-width: 120px; float: left; border-radius: 5px; border: 2px solid #ccc;
}
.dice{ font-size: 6vmin; text-align: center; height: 2em; width: 100%; line-height: 2em; transition: 0.2s ease all;
}
.dice span{ display:none;
}
.follow{ color: #63A9AB;
}
.highlight{ background: #63A9AB; color:white;
}
.answer{ text-align:center; font-size: 32px; border: 3px solid #ccc; margin: 3px 0; border-radius: 1em; cursor: pointer;
}
.answer:hover{ background: #eee;
}
.start{ color: #4cae4c; font-weight: bold;
}
.highlight.first{ background: #4cae4c; color: white;
}
h1{ text-align:center;
}

Toki Pona Boggle - Script Codes JS Codes

var app = angular.module('boggle', [])
var words = ["a", "akesi", "ala", "ale", "ali", "anpa", "ante", "anu", "awen", "e", "en", "esun", "ijo", "ike", "ilo", "insa", "jaki", "jan", "jelo", "jo", "kala", "kalama", "kama", "kasi", "ken", "kepeken", "kili", "kin", "kiwen", "ko", "kon", "kule", "kute", "kulupu", "la", "lape", "laso", "lawa", "len", "lete", "li", "lili", "linja", "lipu", "loje", "lon", "luka", "lukin", "lupa", "ma", "mama", "mani", "meli", "mi", "mije", "moku", "moli", "monsi", "mu", "mun", "musi", "mute", "namako", "nanpa", "nasa", "nasin", "nena", "ni", "nimi", "noka", "o", "oko", "olin", "ona", "open", "pakala", "pali", "palisa", "pan", "pana", "pi", "pilin", "pimeja", "pini", "pipi", "poka", "poki", "pona", "sama", "seli", "selo", "seme", "sewi", "sijelo", "sike", "sin", "sina", "sinpin", "sitelen", "sona", "soweli", "suli", "suno", "supa", "suwi", "tan", "taso", "tawa", "telo", "tenpo", "toki", "tomo", "tu", "unpa", "uta", "utala", "walo", "wan", "waso", "wawa", "weka", "wile"];
var chooseLetter = function() { var v = ~~(Math.random() * 470); switch (true) { case (v < 75): return 'a'; break; case (v >= 75 && v < 116): return 'e'; break; case (v >= 116 && v < 171): return 'i'; break; case (v >= 171 && v < 181): return 'j'; break; case (v >= 181 && v < 211): return 'k'; break; case (v >= 211 && v < 254): return 'l'; break; case (v >= 254 && v < 276): return 'm'; break; case (v >= 276 && v < 326): return 'n'; break; case (v >= 326 && v < 362): return 'o'; break; case (v >= 362 && v < 388): return 'p'; break; case (v >= 388 && v < 417): return 's'; break; case (v >= 417 && v < 432): return 't'; break; case (v >= 432 && v < 456): return 'u'; break; case (v >= 432 && v < 470): return 'w'; break; default: return 'a'; break; }
}
app.directive('boggleBoard', ['$timeout', function($timeout) { return { // template: '', replace: 'E', controllerAs: 'bbCtrl', controller: ['$scope', function($scope) { var self = this; var size = 5; var minLength = 2; var animation = 'zoomInDown'; self.showme = false; $scope.foundWords = []; $scope.shake = function() { self.showme = false; $('#boggle').show(); $('.dice span').hide(); $('.dice').removeClass('animated').removeClass(animation); $('.highlight').removeClass('highlight').removeClass('first'); $scope.foundWords = []; $scope.r = []; for (var r = 0; r < size; r++) { var row = { c: [], i: r }; for (var c = 0; c < size; c++) { row.c.push(chooseLetter()); } $scope.r.push(row); } var checkNextLetter = function(r, c, current, locs, success) { if (_(locs).filter(function(v) { return v[0] == r && v[1] == c; }).length) { //been in this location before return; } locs.push([r, c]) var word = current + $scope.r[r].c[c]; var found = _(words).filter(function(v) { return v.indexOf(word) == 0 && v.length == word.length && v.length > minLength; }) if (found.length) { success.push([r, c]) $scope.foundWords = _.chain($scope.foundWords).push({ word: found[0], locs: success }) .uniq(function(v) { return [v.locs[0][0], v.locs[0][1], v.word ].join(''); }) .value(); } var possible = words.filter(function(v) { return v.indexOf(word) == 0 && v.length > word.length; }); possible.forEach(function(v) { var mysuccess = success.filter(function(loc) { return current.indexOf($scope.r[loc[0]].c[loc[1]]) > -1; }) mysuccess.push([r, c]); for(var ro = r-1; ro <= r+1; ro++){ for(var co = c-1; co <= c+1; co++){ if($scope.r[ro]){ if($scope.r[ro].c[co]){ checkNextLetter(ro, co, word, locs, mysuccess); } } } } }); }; for (var r = 0; r < size; r++) { for (var c = 0; c < size; c++) { checkNextLetter(r, c, '', [], []); } } $timeout(function() { $('.dice span').hide().each(function(i, v) { setTimeout(function() { $(v).show().parent().addClass('animated').addClass(animation) }, (size * size * 50) - (i * 50) + (Math.random() * 500)); }) }) } $scope.highlight = function(locs) { $('.highlight').removeClass('highlight').removeClass('first'); $('#letter' + locs[0][0] + locs[0][1]).addClass('first'); locs.forEach(function(v) { $('#letter' + v[0] + v[1]).addClass('highlight'); }) }; $scope.shake(); } ] }
}])
Toki Pona Boggle - Script Codes
Toki Pona Boggle - Script Codes
Home Page Home
Developer Eprouver
Username eprouver
Uploaded September 19, 2022
Rating 3
Size 3,874 Kb
Views 34,408
Do you need developer help for Toki Pona Boggle?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eprouver (eprouver) Script Codes
Name
Google Speech
Spaceship Battle
Exploding Squares
Spinning Cubes
Square Friends Dropping By
American Icons
Incremental game
A Pen by eprouver
TP Reader
Wave Transitions
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!